@tetacom/ng-components 1.1.16 → 1.1.18

package/fesm2022/tetacom-ng-components.mjs

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, Output, ElementRef, TemplateRef, Injector, ViewChild, Pipe, PLATFORM_ID, InjectionToken, inject, ViewContainerRef, ViewEncapsulation, ChangeDetectorRef, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, Output, PLATFORM_ID, ElementRef, TemplateRef, Injector, Pipe, ViewChild, InjectionToken, inject, ViewContainerRef, ViewEncapsulation, ChangeDetectorRef, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
 import * as i1 from '@angular/common';
-import { DOCUMENT, CommonModule, DatePipe, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, CommonModule, isPlatformBrowser, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { map, takeWhile as takeWhile$1, throttleTime, filter as filter$1, tap as tap$1, withLatestFrom } from 'rxjs/operators';
+import { map, takeWhile, throttleTime, filter, tap as tap$1, withLatestFrom } from 'rxjs/operators';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators, ControlContainer, NgForm, NgModelGroup, FormGroup } from '@angular/forms';
-import dayjs from 'dayjs';
-import * as i3$1 from 'rxjs';
-import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile, filter, map as map$1, shareReplay, Observable, share, pipe, fromEvent, tap, Subject, merge } from 'rxjs';
-import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import * as i6 from '@maskito/angular';
 import { MaskitoModule } from '@maskito/angular';
-import { trigger, transition, style, animate } from '@angular/animations';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { trigger, transition, style, animate } from '@angular/animations';
+import dayjs from 'dayjs';
+import * as i3$1 from 'rxjs';
+import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, shareReplay, Observable, share, pipe, fromEvent, tap, Subject, merge } from 'rxjs';
+import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import * as i1$2 from '@ngneat/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
 import * as i6$1 from '@angular/cdk/scrolling';
@@ -713,1024 +713,637 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 }]
         }] });
 
-class DayModel {
-    disabled;
-    isCurrentMonth;
-    today;
-    selected;
-    date;
-    weekend;
-    constructor(options) {
-        if (options) {
-            this.disabled = options.disabled;
-            this.isCurrentMonth = options.isCurrentMonth;
-            this.today = options.today;
-            this.selected = options.selected;
-            this.date = options.date;
-            this.weekend = options.weekend;
+class DomUtil {
+    static clickedInside(target, event) {
+        return !!target && event.composedPath().indexOf(target) >= 0;
+    }
+    static findTransformedParent(node) {
+        while (node !== null && node.tagName !== 'BODY') {
+            const style = getComputedStyle(node);
+            if (style.transform !== 'none') {
+                return node;
+            }
+            node = node.parentNode;
         }
+        return null;
+    }
+    static isOverflown(element) {
+        return (element.scrollHeight > element.clientHeight ||
+            element.scrollWidth > element.clientWidth);
     }
 }
 
-class BaseCalendar {
-    _cdr;
-    currentMonth = new ReplaySubject(1);
-    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;
-    }
-    generateCalendar(selectedDate, year, month, minMax) {
-        const calendarStartDay = selectedDate
-            .set('year', year)
-            .set('month', month)
-            .set('date', 1)
-            .startOf('week');
-        const calendar = new Array(42).fill(1).map((v, i) => {
-            return calendarStartDay.add(i, 'day');
-        });
-        return calendar.map(d => {
-            return new DayModel({
-                date: new Date(d.toDate()),
-                isCurrentMonth: month === d.month(),
-                disabled: !this.isSuitableMinDate(d.toDate(), minMax.min) ||
-                    !this.isSuitableMaxDate(d.toDate(), minMax.max),
-                selected: this.isSelected(d.toDate(), selectedDate.toDate()),
+class ClickOutsideDirective {
+    _elementRef;
+    _ngZone;
+    clickOutside = new EventEmitter();
+    rightClick = false;
+    _handleEvents = false;
+    set tetaClickOutside(val) {
+        this._handleEvents = val;
+        if (this._handleEvents) {
+            this._ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.addListener(this.rightClick);
+                });
             });
-        });
-    }
-    isSuitableMinDate(d, minDate) {
-        return (dayjs(new Date(minDate)).startOf('date').toDate() <= new Date(d) ||
-            minDate === null);
+        }
+        else {
+            this.removeListener();
+        }
     }
-    isSuitableMaxDate(d, maxDate) {
-        return (new Date(d) < dayjs(new Date(maxDate)).endOf('date').toDate() ||
-            maxDate === null);
+    get tetaClickOutside() {
+        return this._handleEvents;
     }
-    isSelected(date, selectedDate) {
-        const isSelectedDate = date.getDate() === selectedDate?.getDate();
-        const isSelectedYear = date.getFullYear() === selectedDate?.getFullYear();
-        const isSelectedMonth = date.getMonth() === selectedDate?.getMonth();
-        return (isSelectedDate && isSelectedMonth && isSelectedYear && !this.isDateNull);
+    constructor(_elementRef, _ngZone) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
     }
     ngOnDestroy() {
-        this.alive = false;
-    }
-    selectPicker(entity) {
-        this.selectedPicker.next(entity);
-    }
-    selectMonth(month) {
-        this.currentMonth.next(month);
-        this.selectPicker('day');
-    }
-    selectYear(year) {
-        this.setYear(year);
-        this.selectPicker('day');
-    }
-    ngOnChanges(changes) {
-        this.changeCalendarData(this.selectedDate);
-    }
-    changeCalendarData(selectedDate) {
-        const date = new Date(selectedDate || 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 });
+        this.removeListener();
     }
-    setYear(year) {
-        this.currentYear.next(year);
+    addListener(handleRightClick) {
+        window.addEventListener('click', this.listener);
+        if (handleRightClick) {
+            window.addEventListener('contextmenu', this.listener);
+        }
     }
-    changeMonth(month, year) {
-        const { availableYear, availableMonth } = this.getAvailableMonthYear(month, year);
-        this.currentMonth.next(availableMonth);
-        this.currentYear.next(availableYear);
+    removeListener() {
+        window.removeEventListener('click', this.listener);
+        window.removeEventListener('contextmenu', this.listener);
     }
-    getAvailableMonthYear(month, year) {
-        if (month > 11) {
-            return { availableMonth: month - 12, availableYear: year + 1 };
+    listener = (click) => {
+        if (!this._handleEvents) {
+            return;
         }
-        if (month < 0) {
-            return { availableMonth: 12 + month, availableYear: year - 1 };
+        const clickedInside = DomUtil.clickedInside(this._elementRef.nativeElement, click);
+        if (!clickedInside) {
+            this.clickOutside.emit(click);
         }
-        return { availableMonth: month, availableYear: year };
-    }
-    getMothName(month) {
-        return this.localeMonths.get(this.locale)[month];
-    }
-    selectDate(date) {
-        this.setDate.emit(date);
-    }
-    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 });
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: ClickOutsideDirective, selector: "[tetaClickOutside]", inputs: { rightClick: "rightClick", tetaClickOutside: "tetaClickOutside" }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseCalendar, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
             args: [{
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: '[tetaClickOutside]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
-
-class DayItemComponent {
-    day;
-    ngOnInit() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DayItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DayItemComponent, selector: "teta-day-item", inputs: { day: "day" }, ngImport: i0, template: "<p>{{day.date.getDate()}}</p>\n\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DayItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-day-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>{{day.date.getDate()}}</p>\n\n" }]
-        }], propDecorators: { day: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { clickOutside: [{
+                type: Output
+            }], rightClick: [{
+                type: Input
+            }], tetaClickOutside: [{
                 type: Input
             }] } });
 
-class DayPickerComponent {
-    date = new Date();
-    calendar;
-    viewType;
-    range;
-    min;
-    max;
-    locale;
-    hoveredDate;
-    hoveredDateChange = new EventEmitter();
-    selectDate = new EventEmitter();
-    daysOfWeek = new Map().set('ru', ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']).set('en', ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
-    constructor() {
+class ClickOutsideModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideModule, declarations: [ClickOutsideDirective], imports: [CommonModule], exports: [ClickOutsideDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClickOutsideDirective],
+                    exports: [ClickOutsideDirective],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class ScrollIntoViewDirective {
+    platformId;
+    elementRef;
+    tetaScrollIntoView;
+    behavior = 'smooth';
+    block = 'end';
+    constructor(platformId, elementRef) {
+        this.platformId = platformId;
+        this.elementRef = elementRef;
     }
-    isInRange(day, from, to) {
-        const matchesMinDate = dayjs(new Date(from)).startOf('date').toDate() <= day.date;
-        const matchesMaxDate = day.date < dayjs(new Date(to)).endOf('date').toDate();
-        return matchesMinDate && matchesMaxDate;
-    }
-    isHoveredRange(day) {
-        if (!this.range?.to && this.range?.from) {
-            return this.isInRange(day, this.range.from, this.hoveredDate) || this.isInRange(day, this.hoveredDate, this.range.from);
+    ngOnChanges(simpleChange) {
+        if (isPlatformBrowser(this.platformId)) {
+            if (coerceBooleanProperty(this.tetaScrollIntoView)) {
+                this.elementRef.nativeElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
         }
-        return false;
     }
-    isActiveRange(day) {
-        if (this.range?.from && this.range?.to) {
-            return this.isInRange(day, this.range.from, this.range.to);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: ScrollIntoViewDirective, selector: "[tetaScrollIntoView]", inputs: { tetaScrollIntoView: "tetaScrollIntoView", behavior: "behavior", block: "block" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaScrollIntoView]'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { tetaScrollIntoView: [{
+                type: Input
+            }], behavior: [{
+                type: Input
+            }], block: [{
+                type: Input
+            }] } });
+
+class ScrollIntoViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewModule, declarations: [ScrollIntoViewDirective], imports: [CommonModule], exports: [ScrollIntoViewDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ScrollIntoViewDirective
+                    ], exports: [
+                        ScrollIntoViewDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+var Align;
+(function (Align) {
+    Align[Align["left"] = 0] = "left";
+    Align[Align["right"] = 1] = "right";
+    Align[Align["center"] = 2] = "center";
+    Align[Align["auto"] = 3] = "auto";
+    Align[Align["fitWidth"] = 4] = "fitWidth";
+    Align[Align["minWidth"] = 5] = "minWidth";
+    Align[Align["outerLeft"] = 6] = "outerLeft";
+    Align[Align["outerRight"] = 7] = "outerRight";
+    Align[Align["outerAuto"] = 8] = "outerAuto";
+})(Align || (Align = {}));
+
+var VerticalAlign;
+(function (VerticalAlign) {
+    VerticalAlign[VerticalAlign["top"] = 0] = "top";
+    VerticalAlign[VerticalAlign["bottom"] = 1] = "bottom";
+    VerticalAlign[VerticalAlign["center"] = 2] = "center";
+    VerticalAlign[VerticalAlign["auto"] = 3] = "auto";
+    VerticalAlign[VerticalAlign["innerTop"] = 4] = "innerTop";
+    VerticalAlign[VerticalAlign["innerBottom"] = 5] = "innerBottom";
+    VerticalAlign[VerticalAlign["innerAuto"] = 6] = "innerAuto";
+})(VerticalAlign || (VerticalAlign = {}));
+
+class PositionUtil {
+    static getPosition(containerPosition, elementPosition, align, verticalAlign, margin = 0, verticalMargin = 0, transformedParentRect = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+    }) {
+        const rect = {};
+        const elementWidth = elementPosition.right - elementPosition.left;
+        const elementHeight = elementPosition.bottom - elementPosition.top;
+        const containerWidth = containerPosition.right - containerPosition.left;
+        const containerHeight = containerPosition.bottom - containerPosition.top;
+        if (align === Align.auto) {
+            align = Align.left;
+            if (window.innerWidth < containerPosition.left + elementWidth) {
+                align = Align.right;
+            }
         }
-        return false;
-    }
-    pickDate(day) {
-        if (!day.disabled) {
-            this.selectDate.emit(day.date);
+        if (align === Align.left) {
+            rect.left = containerPosition.left + margin;
         }
-    }
-    getRangeActiveClass(d) {
-        if (this.range && new Date(this.range?.from).getTime() !== new Date(this.range?.to).getTime()) {
-            if (this.range.to) {
-                return this.getClassStaticItem(d);
+        if (align === Align.right) {
+            rect.left = containerPosition.right - elementWidth - margin;
+        }
+        if (align === Align.center) {
+            rect.left =
+                (containerPosition.left + containerPosition.right) / 2 -
+                    elementWidth / 2;
+        }
+        if (align === Align.outerAuto) {
+            align = Align.outerRight;
+            if (window.innerWidth < containerPosition.right + elementWidth) {
+                align = Align.outerLeft;
+            }
+        }
+        if (align === Align.outerLeft) {
+            rect.left = containerPosition.left - elementWidth + margin;
+        }
+        if (align === Align.outerRight) {
+            rect.left = containerPosition.right - margin;
+        }
+        if (align === Align.fitWidth) {
+            rect.left = containerPosition.left + margin;
+            rect.right = window.innerWidth - containerPosition.right + margin;
+        }
+        if (align === Align.minWidth) {
+            rect.left = containerPosition.left + margin;
+            rect.minWidth = containerWidth;
+        }
+        if (verticalAlign === VerticalAlign.auto) {
+            if (containerPosition.bottom + elementHeight > window.innerHeight &&
+                containerPosition.bottom >= window.innerHeight / 2) {
+                verticalAlign = VerticalAlign.top;
             }
             else {
-                if (this.hoveredDate.getTime() === d.date.getTime()) {
-                    return this.getClassHoveredItem();
-                }
-                else {
-                    return this.getClassSelectedItem(d);
-                }
+                verticalAlign = VerticalAlign.bottom;
             }
         }
-        return '';
-    }
-    hover(date) {
-        if (date?.getTime() !== this.hoveredDate?.getTime()) {
-            this.hoveredDate = date;
-            this.hoveredDateChange.emit(date);
+        if (verticalAlign === VerticalAlign.innerAuto) {
+            if (containerPosition.bottom + elementHeight > window.innerHeight &&
+                containerPosition.bottom >= window.innerHeight / 2) {
+                verticalAlign = VerticalAlign.innerTop;
+            }
+            else {
+                verticalAlign = VerticalAlign.innerBottom;
+            }
         }
-    }
-    getClassStaticItem(d) {
-        const from = dayjs(new Date(this.range.from)).startOf("day").toDate();
-        const to = dayjs(new Date(this.range.to)).startOf("day").toDate();
-        const itemDate = dayjs(new Date(d.date)).startOf("day").toDate();
-        if (from.getTime() === itemDate.getTime()) {
-            return 'datepicker-date_active-first';
+        if (verticalAlign === VerticalAlign.top) {
+            rect.top = containerPosition.top - elementHeight - verticalMargin;
         }
-        if (to.getTime() === itemDate.getTime()) {
-            return 'datepicker-date_active-second';
+        if (verticalAlign === VerticalAlign.bottom) {
+            rect.top = containerPosition.bottom + verticalMargin;
         }
-        return '';
-    }
-    getClassHoveredItem() {
-        if (new Date(this.range.from) > this.hoveredDate) {
-            return 'datepicker-date_active-first';
+        if (verticalAlign === VerticalAlign.innerTop) {
+            rect.top = containerPosition.bottom - elementHeight - verticalMargin;
         }
-        if (new Date(this.range.from) < this.hoveredDate) {
-            return 'datepicker-date_active-second';
+        if (verticalAlign === VerticalAlign.innerBottom) {
+            rect.top = containerPosition.top + verticalMargin;
         }
-    }
-    getClassSelectedItem(d) {
-        if (d.selected && d.date < this.hoveredDate) {
-            return 'datepicker-date_active-first';
+        if (verticalAlign === VerticalAlign.center) {
+            rect.top =
+                (containerPosition.top + containerPosition.bottom) / 2 -
+                    elementHeight / 2;
         }
-        if (d.selected && d.date > this.hoveredDate) {
-            return 'datepicker-date_active-second';
+        if (rect.left + elementWidth > window.innerWidth) {
+            rect.left = window.innerWidth - elementWidth;
         }
-        return '';
+        if (rect.left < 0) {
+            rect.left = 0;
+        }
+        if (rect.top + elementHeight > window.innerHeight || rect.bottom < 0) {
+            rect.bottom = 0;
+        }
+        if (rect.top < 0) {
+            rect.top = 0;
+        }
+        if (verticalAlign === VerticalAlign.bottom ||
+            verticalAlign === VerticalAlign.center ||
+            verticalAlign === VerticalAlign.innerBottom) {
+            rect.maxHeight = window.innerHeight - rect.top;
+        }
+        if (verticalAlign === VerticalAlign.top ||
+            verticalAlign === VerticalAlign.innerTop) {
+            rect.maxHeight = containerPosition.top;
+        }
+        if (!isNaN(rect.left)) {
+            rect.left = rect.left - transformedParentRect.left;
+        }
+        if (!isNaN(rect.right)) {
+            rect.right = rect.right - transformedParentRect.left;
+        }
+        if (!isNaN(rect.top)) {
+            rect.top = rect.top - transformedParentRect.top;
+        }
+        if (!isNaN(rect.bottom)) {
+            rect.bottom = rect.bottom
+                ? rect.bottom - transformedParentRect.bottom
+                : rect.bottom;
+        }
+        return rect;
+    }
+    static setElementPosition(element, rect) {
+        element.style.left = rect.left != null ? `${rect.left}px` : '';
+        element.style.right = rect.right != null ? `${rect.right}px` : '';
+        element.style.top = rect.top != null ? `${rect.top}px` : '';
+        element.style.bottom = rect.bottom != null ? `${rect.bottom}px` : '';
+        element.style.maxHeight =
+            rect.maxHeight != null ? `${rect.maxHeight}px` : '';
+        element.style.minWidth = rect.minWidth != null ? `${rect.minWidth}px` : '';
+    }
+    static getMaxHeight(position) {
+        let maxHeight = null;
+        maxHeight = 1;
+        return maxHeight;
+    }
+    static getMaxWidth(position) {
+        let maxWidth = null;
+        maxWidth = 1;
+        return maxWidth;
     }
-    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 });
 }
-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" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { date: [{
-                type: Input
-            }], calendar: [{
-                type: Input
-            }], viewType: [{
-                type: Input
-            }], range: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], hoveredDate: [{
-                type: Input
-            }], hoveredDateChange: [{
-                type: Output
-            }], selectDate: [{
-                type: Output
-            }] } });
 
-class MonthPickerComponent {
-    locale;
-    selectedMonth = 1;
-    viewType;
-    currentYear;
-    localeMoths;
-    selectMonth = new EventEmitter();
-    changeYear = new EventEmitter();
-    months = [];
-    constructor() {
-    }
-    pickMonth(monthId) {
-        this.selectMonth.emit(monthId);
-    }
-    pickYear(year) {
-        this.changeYear.emit(year);
-    }
-    ngOnInit() {
-        this.months = this.localeMoths.get(this.locale).map((m, i) => {
-            return {
-                id: i,
-                name: m,
-                isSelected: this.selectedMonth === i
-            };
-        });
+class DropdownContentDirective {
+    _elementRef;
+    nativeElement;
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this.nativeElement = _elementRef.nativeElement;
     }
-    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: DropdownContentDirective, selector: "[tetaDropdownContent]", ngImport: i0 });
 }
-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: [{
-                type: Input
-            }], viewType: [{
-                type: Input
-            }], currentYear: [{
-                type: Input
-            }], localeMoths: [{
-                type: Input
-            }], selectMonth: [{
-                type: Output
-            }], changeYear: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDropdownContent]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class ScrollToSelectedYearDirective {
-    el;
-    alive = true;
-    constructor(el) {
-        this.el = el;
-    }
-    ngOnDestroy() {
-        this.alive = false;
-    }
-    ngAfterViewInit() {
-        this.el.nativeElement.scrollIntoView({ inline: "center", block: "center" });
+class DropdownHeadDirective {
+    template;
+    constructor(template) {
+        this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollToSelectedYearDirective, deps: [{ token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: ScrollToSelectedYearDirective, selector: "[tetaScrollToSelectedYear]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownHeadDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: DropdownHeadDirective, selector: "[tetaDropdownHead]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollToSelectedYearDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownHeadDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[tetaScrollToSelectedYear]'
+                    selector: '[tetaDropdownHead]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
                 }] }]; } });
 
-class YearPickerComponent {
-    selectedYear;
-    viewType;
-    minMax;
-    locale;
-    selectYear = new EventEmitter();
-    yearPickerDictionary = new Map().set('ru', 'Выберете год').set('en', 'Select year');
-    alive = true;
-    years;
-    constructor() {
-    }
-    pickYear(year, disabled) {
-        if (!disabled) {
-            this.selectYear.emit(year);
+class DropdownBase {
+    _cdr;
+    _document;
+    _elementRef;
+    _zone;
+    _renderer;
+    align = Align.left;
+    verticalAlign = VerticalAlign.auto;
+    appendToBody;
+    disabled;
+    backdrop = false;
+    className;
+    viewType = 'rounded';
+    set open(val) {
+        if (val != null && val !== this._open && !this.disabled) {
+            if (val) {
+                this.openDropdown();
+            }
+            else {
+                this.closeDropdown();
+            }
         }
     }
-    ngOnInit() {
-        this.years = new Array(100).fill(1).map((v, i) => {
-            const year = new Date().getFullYear() + (i - 50);
-            return { id: year, isSelected: year === this.selectedYear, disabled: this.isDisabled(year) };
-        });
+    get open() {
+        return this._open;
     }
-    isDisabled(year) {
-        if (this.minMax) {
-            const isSuitableMax = dayjs(new Date().setFullYear(year)).startOf('year').isAfter(new Date(this.minMax.max)) && this.minMax.max !== null;
-            const isSuitableMin = dayjs(new Date().setFullYear(year)).endOf('year').isBefore(new Date(this.minMax.min)) && this.minMax.min !== null;
-            return isSuitableMax || isSuitableMin;
-        }
-        return false;
+    get container() {
+        return this.appendToBody
+            ? this._document.body
+            : this._elementRef.nativeElement;
     }
-    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 });
-}
-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" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { selectedYear: [{
-                type: Input
-            }], viewType: [{
-                type: Input
-            }], minMax: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], selectYear: [{
-                type: Output
-            }] } });
-
-class DateCalendarComponent extends BaseCalendar {
-    _cdr;
-    selectedDate = new Date();
-    locale;
-    open;
-    viewType;
-    min;
-    isDateNull;
-    max;
-    setDate = new EventEmitter();
-    calendar = [];
-    constructor(_cdr) {
-        super(_cdr);
+    openChange = new EventEmitter();
+    autoClose = true;
+    autoCloseIgnore = ['inside'];
+    _head;
+    _content;
+    _body = null;
+    _backdrop = null;
+    _open = false;
+    _alive = true;
+    constructor(_cdr, _document, _elementRef, _zone, _renderer) {
         this._cdr = _cdr;
-        dayjs().locale('ru', { weekStart: 1 });
-        combineLatest([this.currentYear, this.currentMonth, this.minMax])
-            .pipe(takeWhile(() => this.alive), filter(([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);
-        }))
+        this._document = _document;
+        this._elementRef = _elementRef;
+        this._zone = _zone;
+        this._renderer = _renderer;
+        this._zone.onStable
+            .pipe(takeWhile(_ => this._alive), throttleTime(10, undefined, { trailing: true }))
             .subscribe(_ => {
-            this.calendar = _;
+            if (this._head?.nativeElement && this._body) {
+                setTimeout(() => {
+                    if (this._head?.nativeElement && this._body) {
+                        this.setPosition(this._head.nativeElement, this._body);
+                    }
+                });
+            }
         });
+        this.addScrollListener();
     }
-    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 });
-}
-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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedDate: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], viewType: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], isDateNull: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], setDate: [{
-                type: Output
-            }] } });
-
-var Align;
-(function (Align) {
-    Align[Align["left"] = 0] = "left";
-    Align[Align["right"] = 1] = "right";
-    Align[Align["center"] = 2] = "center";
-    Align[Align["auto"] = 3] = "auto";
-    Align[Align["fitWidth"] = 4] = "fitWidth";
-    Align[Align["minWidth"] = 5] = "minWidth";
-    Align[Align["outerLeft"] = 6] = "outerLeft";
-    Align[Align["outerRight"] = 7] = "outerRight";
-    Align[Align["outerAuto"] = 8] = "outerAuto";
-})(Align || (Align = {}));
-
-var VerticalAlign;
-(function (VerticalAlign) {
-    VerticalAlign[VerticalAlign["top"] = 0] = "top";
-    VerticalAlign[VerticalAlign["bottom"] = 1] = "bottom";
-    VerticalAlign[VerticalAlign["center"] = 2] = "center";
-    VerticalAlign[VerticalAlign["auto"] = 3] = "auto";
-    VerticalAlign[VerticalAlign["innerTop"] = 4] = "innerTop";
-    VerticalAlign[VerticalAlign["innerBottom"] = 5] = "innerBottom";
-    VerticalAlign[VerticalAlign["innerAuto"] = 6] = "innerAuto";
-})(VerticalAlign || (VerticalAlign = {}));
-
-class BasePicker {
-    _elementRef;
-    _cdr;
-    datePipe;
-    open = false;
-    placeholder = '';
-    inputText;
-    maskitoOptions;
-    constructor(_elementRef, _cdr, datePipe) {
-        this._elementRef = _elementRef;
-        this._cdr = _cdr;
-        this.datePipe = datePipe;
-        this.inputText = this.checkNull();
-    }
-    changeInput(v) {
-        this.changePlaceholder(v);
-    }
-    changePlaceholder(value) {
-        const val = this.mask.split('');
-        for (let i = 0; value.length > i; i++) {
-            val.splice(i, 1, value[i]);
-        }
-        this.placeholder = val.join('');
-    }
-    openChange(e) {
-        if (!e) {
-            this.onBlur();
+    click(event) {
+        if (this.open) {
+            if (!DomUtil.clickedInside(this._body, event) ||
+                this.autoCloseIgnore.indexOf('inside') < 0) {
+                this.closeDropdown();
+            }
         }
-        this.open = e;
-    }
-    checkNull() {
-        if (!this.date && this.allowNull) {
-            return null;
+        else {
+            if (DomUtil.clickedInside(this._head.nativeElement, event)) {
+                this.openDropdown();
+            }
         }
-        return this.datePipe.transform(new Date(), 'dd.MM.yyyy, HH:mm');
     }
-    openPicker = (show) => {
-        if (this.disabled) {
+    documentClick(event) {
+        if (!this.open ||
+            !this.autoClose ||
+            event.detail === 0 ||
+            DomUtil.clickedInside(this._head.nativeElement, event)) {
             return;
         }
-        this.open = show;
-        this._cdr.markForCheck();
-    };
-    changeSelectedDate(date, selectedDate) {
-        this.setDate(date);
-        this.emitValue(date);
-        this.open = false;
-    }
-    emitValue(value) {
-        if (this.isValueChange(value)) {
-            this.date = value;
-            this.selectDate.emit(value);
-            this.onChange(value);
-        }
-    }
-    isValueChange(value) {
-        return new Date(value).getTime() !== new Date(this.date).getTime();
-    }
-    checkEnter(e) {
-        if (e.key === 'Enter') {
-            this.inputText = e.target.value;
-            this.onBlur();
-        }
-        if (e.key === '-') {
-            e.preventDefault();
+        if (DomUtil.clickedInside(this._body, event)) {
+            if (this.autoCloseIgnore.indexOf('inside') < 0) {
+                this.closeDropdown();
+            }
         }
-        this.open = true;
-    }
-    isAvailableLength(val, length) {
-        if (val?.length) {
-            return val.length === length;
+        else {
+            if (this.autoCloseIgnore.indexOf('outside') < 0) {
+                this.closeDropdown();
+            }
         }
-        return false;
-    }
-    getDateFromStr(str, separator = '.') {
-        const date = str?.split(separator);
-        const day = this.isAvailableLength(date?.[0], 2) ? Number(date[0]) : null;
-        const month = this.isAvailableLength(date?.[1], 2) ? Number(date[1]) : null;
-        const year = this.isAvailableLength(date?.[2], 4) ? Number(date[2]) : null;
-        return { day, month, year };
-    }
-    getTimeFromStr(str, separator = ':') {
-        const time = str?.trim().split(separator);
-        const hours = this.isAvailableLength(time?.[0], 2) ? Number(time[0]) : null;
-        const mins = this.isAvailableLength(time?.[1], 2) ? Number(time[1]) : null;
-        return { hours, mins };
     }
-    focus() {
-        this._elementRef.nativeElement.focus();
-    }
-    getLocaleString(date) {
-        return new Date(date).toLocaleString([], {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: this.showTime ? '2-digit' : undefined,
-            minute: this.showTime ? '2-digit' : undefined,
-        });
-    }
-    getAvailableDate(min, max, date) {
-        const minDate = dayjs(new Date(min)).startOf('day').toDate();
-        const maxDate = dayjs(new Date(max)).endOf('day').toDate();
-        if (min && minDate.getTime() >= new Date(date).getTime()) {
-            return new Date();
+    keyUp(event) {
+        if (!this.open ||
+            !this.autoClose ||
+            ['esc', 'enter'].every((_) => this.autoCloseIgnore.indexOf(_) >= 0)) {
+            return;
         }
-        if (max && maxDate.getTime() <= new Date(date).getTime()) {
-            return maxDate;
+        if ((event.code === 'Escape' && this.autoCloseIgnore.indexOf('esc') < 0) ||
+            (event.code === 'Enter' && this.autoCloseIgnore.indexOf('enter') < 0)) {
+            this.closeDropdown();
         }
-        return new Date(date);
-    }
-}
-
-class DomUtil {
-    static clickedInside(target, event) {
-        return !!target && event.composedPath().indexOf(target) >= 0;
     }
-    static findTransformedParent(node) {
-        while (node !== null && node.tagName !== 'BODY') {
-            const style = getComputedStyle(node);
-            if (style.transform !== 'none') {
-                return node;
-            }
-            node = node.parentNode;
-        }
-        return null;
+    addScrollListener() {
+        window.addEventListener('scroll', this.scrollListener, true);
     }
-    static isOverflown(element) {
-        return (element.scrollHeight > element.clientHeight ||
-            element.scrollWidth > element.clientWidth);
+    removeScrollListener() {
+        window.removeEventListener('scroll', this.scrollListener, true);
     }
-}
-
-class PositionUtil {
-    static getPosition(containerPosition, elementPosition, align, verticalAlign, margin = 0, verticalMargin = 0, transformedParentRect = {
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-    }) {
-        const rect = {};
-        const elementWidth = elementPosition.right - elementPosition.left;
-        const elementHeight = elementPosition.bottom - elementPosition.top;
-        const containerWidth = containerPosition.right - containerPosition.left;
-        const containerHeight = containerPosition.bottom - containerPosition.top;
-        if (align === Align.auto) {
-            align = Align.left;
-            if (window.innerWidth < containerPosition.left + elementWidth) {
-                align = Align.right;
-            }
-        }
-        if (align === Align.left) {
-            rect.left = containerPosition.left + margin;
-        }
-        if (align === Align.right) {
-            rect.left = containerPosition.right - elementWidth - margin;
-        }
-        if (align === Align.center) {
-            rect.left =
-                (containerPosition.left + containerPosition.right) / 2 -
-                    elementWidth / 2;
+    scrollListener = event => {
+        if (this.open &&
+            !this._body.contains(event.target) &&
+            this._body !== event.target) {
+            this.closeDropdown();
         }
-        if (align === Align.outerAuto) {
-            align = Align.outerRight;
-            if (window.innerWidth < containerPosition.right + elementWidth) {
-                align = Align.outerLeft;
+    };
+    closeDropdown() {
+        if (this.open && this._body && this.container.contains(this._body)) {
+            this._renderer.removeChild(this.container, this._body);
+            this._open = false;
+            this._body = null;
+            if (this._backdrop) {
+                this._renderer.removeChild(this._document.body, this._backdrop);
             }
+            this.openChange.emit(this.open);
+            this._cdr.detectChanges();
         }
-        if (align === Align.outerLeft) {
-            rect.left = containerPosition.left - elementWidth + margin;
-        }
-        if (align === Align.outerRight) {
-            rect.left = containerPosition.right - margin;
-        }
-        if (align === Align.fitWidth) {
-            rect.left = containerPosition.left + margin;
-            rect.right = window.innerWidth - containerPosition.right + margin;
+    }
+    openDropdown() {
+        if (this._open || !this._content || this.disabled) {
+            return;
         }
-        if (align === Align.minWidth) {
-            rect.left = containerPosition.left + margin;
-            rect.minWidth = containerWidth;
+        this._open = true;
+        this.openChange.emit(this.open);
+        const renderer = this._renderer;
+        const content = this._content.nativeElement;
+        const container = (this._body =
+            this._body || renderer.createElement('div'));
+        renderer.addClass(container, 'dropdown');
+        renderer.addClass(container, 'dropdown_' + this.viewType);
+        if (this.backdrop) {
+            this._backdrop = renderer.createElement('div');
+            renderer.addClass(this._backdrop, 'dropdown-backdrop');
+            renderer.appendChild(this._document.body, this._backdrop);
         }
-        if (verticalAlign === VerticalAlign.auto) {
-            if (containerPosition.bottom + elementHeight > window.innerHeight &&
-                containerPosition.bottom >= window.innerHeight / 2) {
-                verticalAlign = VerticalAlign.top;
+        if (this.className != null) {
+            if (this.className instanceof Array && this.className.length > 0) {
+                this.className.forEach(_ => {
+                    renderer.addClass(container, _);
+                });
             }
-            else {
-                verticalAlign = VerticalAlign.bottom;
+            if (typeof this.className === 'string') {
+                renderer.addClass(container, this.className);
             }
         }
-        if (verticalAlign === VerticalAlign.innerAuto) {
-            if (containerPosition.bottom + elementHeight > window.innerHeight &&
-                containerPosition.bottom >= window.innerHeight / 2) {
-                verticalAlign = VerticalAlign.innerTop;
-            }
-            else {
-                verticalAlign = VerticalAlign.innerBottom;
-            }
-        }
-        if (verticalAlign === VerticalAlign.top) {
-            rect.top = containerPosition.top - elementHeight - verticalMargin;
-        }
-        if (verticalAlign === VerticalAlign.bottom) {
-            rect.top = containerPosition.bottom + verticalMargin;
-        }
-        if (verticalAlign === VerticalAlign.innerTop) {
-            rect.top = containerPosition.bottom - elementHeight - verticalMargin;
-        }
-        if (verticalAlign === VerticalAlign.innerBottom) {
-            rect.top = containerPosition.top + verticalMargin;
-        }
-        if (verticalAlign === VerticalAlign.center) {
-            rect.top =
-                (containerPosition.top + containerPosition.bottom) / 2 -
-                    elementHeight / 2;
-        }
-        if (rect.left + elementWidth > window.innerWidth) {
-            rect.left = window.innerWidth - elementWidth;
-        }
-        if (rect.left < 0) {
-            rect.left = 0;
-        }
-        if (rect.top + elementHeight > window.innerHeight || rect.bottom < 0) {
-            rect.bottom = 0;
-        }
-        if (rect.top < 0) {
-            rect.top = 0;
-        }
-        if (verticalAlign === VerticalAlign.bottom ||
-            verticalAlign === VerticalAlign.center ||
-            verticalAlign === VerticalAlign.innerBottom) {
-            rect.maxHeight = window.innerHeight - rect.top;
-        }
-        if (verticalAlign === VerticalAlign.top ||
-            verticalAlign === VerticalAlign.innerTop) {
-            rect.maxHeight = containerPosition.top;
-        }
-        if (!isNaN(rect.left)) {
-            rect.left = rect.left - transformedParentRect.left;
-        }
-        if (!isNaN(rect.right)) {
-            rect.right = rect.right - transformedParentRect.left;
-        }
-        if (!isNaN(rect.top)) {
-            rect.top = rect.top - transformedParentRect.top;
-        }
-        if (!isNaN(rect.bottom)) {
-            rect.bottom = rect.bottom
-                ? rect.bottom - transformedParentRect.bottom
-                : rect.bottom;
-        }
-        return rect;
-    }
-    static setElementPosition(element, rect) {
-        element.style.left = rect.left != null ? `${rect.left}px` : '';
-        element.style.right = rect.right != null ? `${rect.right}px` : '';
-        element.style.top = rect.top != null ? `${rect.top}px` : '';
-        element.style.bottom = rect.bottom != null ? `${rect.bottom}px` : '';
-        element.style.maxHeight =
-            rect.maxHeight != null ? `${rect.maxHeight}px` : '';
-        element.style.minWidth = rect.minWidth != null ? `${rect.minWidth}px` : '';
-    }
-    static getMaxHeight(position) {
-        let maxHeight = null;
-        maxHeight = 1;
-        return maxHeight;
+        renderer.appendChild(container, content);
+        renderer.appendChild(this.container, container);
+        this.setPosition(this._head.nativeElement, this._body);
     }
-    static getMaxWidth(position) {
-        let maxWidth = null;
-        maxWidth = 1;
-        return maxWidth;
+    setPosition(container, target) {
+        const containerPosition = container.getBoundingClientRect();
+        // target.style.maxHeight = null;
+        const targetPosition = target.getBoundingClientRect();
+        const rect = {
+            bottom: containerPosition.bottom,
+            top: containerPosition.top,
+            left: containerPosition.left,
+            right: containerPosition.right,
+        };
+        const targetRect = {
+            bottom: targetPosition.bottom,
+            top: targetPosition.top,
+            left: targetPosition.left,
+            right: targetPosition.right,
+        };
+        const targetTransformedParent = DomUtil.findTransformedParent(target);
+        let parentPosition = {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+        };
+        if (targetTransformedParent) {
+            parentPosition = targetTransformedParent.getBoundingClientRect();
+        }
+        const position = PositionUtil.getPosition(rect, targetRect, this.align, this.verticalAlign, 0, 0, parentPosition);
+        PositionUtil.setElementPosition(target, position);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: DropdownBase, inputs: { align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", disabled: "disabled", backdrop: "backdrop", className: "className", viewType: "viewType", open: "open", autoClose: "autoClose", autoCloseIgnore: "autoCloseIgnore" }, outputs: { openChange: "openChange" }, host: { listeners: { "click": "click($event)", "document:click": "documentClick($event)", "window:keyup": "keyUp($event)" } }, queries: [{ propertyName: "_head", first: true, predicate: DropdownHeadDirective, descendants: true, read: ElementRef }, { propertyName: "_content", first: true, predicate: DropdownContentDirective, descendants: true }], ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { align: [{
+                type: Input
+            }], verticalAlign: [{
+                type: Input
+            }], appendToBody: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], backdrop: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], autoClose: [{
+                type: Input
+            }], autoCloseIgnore: [{
+                type: Input
+            }], _head: [{
+                type: ContentChild,
+                args: [DropdownHeadDirective, {
+                        static: false,
+                        read: ElementRef,
+                    }]
+            }], _content: [{
+                type: ContentChild,
+                args: [DropdownContentDirective, { static: false }]
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], documentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], keyUp: [{
+                type: HostListener,
+                args: ['window:keyup', ['$event']]
+            }] } });
 
-class DropdownContentDirective {
+class DropdownComponent extends DropdownBase {
+    _cdr;
+    _document;
     _elementRef;
-    nativeElement;
-    constructor(_elementRef) {
+    _zone;
+    _renderer;
+    constructor(_cdr, _document, _elementRef, _zone, _renderer) {
+        super(_cdr, _document, _elementRef, _zone, _renderer);
+        this._cdr = _cdr;
+        this._document = _document;
         this._elementRef = _elementRef;
-        this.nativeElement = _elementRef.nativeElement;
+        this._zone = _zone;
+        this._renderer = _renderer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: DropdownContentDirective, selector: "[tetaDropdownContent]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaDropdownContent]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class DropdownHeadDirective {
-    template;
-    constructor(template) {
-        this.template = template;
+    ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownHeadDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: DropdownHeadDirective, selector: "[tetaDropdownHead]", ngImport: i0 });
+    ngOnDestroy() {
+        this.closeDropdown();
+        this.removeScrollListener();
+        this._alive = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[tetaDropdownHead]\"></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownHeadDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaDropdownHead]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'dropdown', template: "<ng-content select=\"[tetaDropdownHead]\"></ng-content>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });
 
-class DropdownBase {
+class DropdownDirective extends DropdownBase {
     _cdr;
     _document;
     _elementRef;
     _zone;
     _renderer;
-    align = Align.left;
-    verticalAlign = VerticalAlign.auto;
-    appendToBody;
-    disabled;
-    backdrop = false;
-    className;
-    viewType = 'rounded';
-    set open(val) {
-        if (val != null && val !== this._open && !this.disabled) {
-            if (val) {
-                this.openDropdown();
-            }
-            else {
-                this.closeDropdown();
-            }
-        }
-    }
-    get open() {
-        return this._open;
-    }
-    get container() {
-        return this.appendToBody
-            ? this._document.body
-            : this._elementRef.nativeElement;
-    }
-    openChange = new EventEmitter();
-    autoClose = true;
-    autoCloseIgnore = ['inside'];
-    _head;
-    _content;
-    _body = null;
-    _backdrop = null;
-    _open = false;
-    _alive = true;
     constructor(_cdr, _document, _elementRef, _zone, _renderer) {
-        this._cdr = _cdr;
-        this._document = _document;
-        this._elementRef = _elementRef;
-        this._zone = _zone;
-        this._renderer = _renderer;
-        this._zone.onStable
-            .pipe(takeWhile$1(_ => this._alive), throttleTime(10, undefined, { trailing: true }))
-            .subscribe(_ => {
-            if (this._head?.nativeElement && this._body) {
-                setTimeout(() => {
-                    if (this._head?.nativeElement && this._body) {
-                        this.setPosition(this._head.nativeElement, this._body);
-                    }
-                });
-            }
-        });
-        this.addScrollListener();
-    }
-    click(event) {
-        if (this.open) {
-            if (!DomUtil.clickedInside(this._body, event) ||
-                this.autoCloseIgnore.indexOf('inside') < 0) {
-                this.closeDropdown();
-            }
-        }
-        else {
-            if (DomUtil.clickedInside(this._head.nativeElement, event)) {
-                this.openDropdown();
-            }
-        }
-    }
-    documentClick(event) {
-        if (!this.open ||
-            !this.autoClose ||
-            event.detail === 0 ||
-            DomUtil.clickedInside(this._head.nativeElement, event)) {
-            return;
-        }
-        if (DomUtil.clickedInside(this._body, event)) {
-            if (this.autoCloseIgnore.indexOf('inside') < 0) {
-                this.closeDropdown();
-            }
-        }
-        else {
-            if (this.autoCloseIgnore.indexOf('outside') < 0) {
-                this.closeDropdown();
-            }
-        }
-    }
-    keyUp(event) {
-        if (!this.open ||
-            !this.autoClose ||
-            ['esc', 'enter'].every((_) => this.autoCloseIgnore.indexOf(_) >= 0)) {
-            return;
-        }
-        if ((event.code === 'Escape' && this.autoCloseIgnore.indexOf('esc') < 0) ||
-            (event.code === 'Enter' && this.autoCloseIgnore.indexOf('enter') < 0)) {
-            this.closeDropdown();
-        }
-    }
-    addScrollListener() {
-        window.addEventListener('scroll', this.scrollListener, true);
-    }
-    removeScrollListener() {
-        window.removeEventListener('scroll', this.scrollListener, true);
-    }
-    scrollListener = event => {
-        if (this.open &&
-            !this._body.contains(event.target) &&
-            this._body !== event.target) {
-            this.closeDropdown();
-        }
-    };
-    closeDropdown() {
-        if (this.open && this._body && this.container.contains(this._body)) {
-            this._renderer.removeChild(this.container, this._body);
-            this._open = false;
-            this._body = null;
-            if (this._backdrop) {
-                this._renderer.removeChild(this._document.body, this._backdrop);
-            }
-            this.openChange.emit(this.open);
-            this._cdr.detectChanges();
-        }
-    }
-    openDropdown() {
-        if (this._open || !this._content || this.disabled) {
-            return;
-        }
-        this._open = true;
-        this.openChange.emit(this.open);
-        const renderer = this._renderer;
-        const content = this._content.nativeElement;
-        const container = (this._body =
-            this._body || renderer.createElement('div'));
-        renderer.addClass(container, 'dropdown');
-        renderer.addClass(container, 'dropdown_' + this.viewType);
-        if (this.backdrop) {
-            this._backdrop = renderer.createElement('div');
-            renderer.addClass(this._backdrop, 'dropdown-backdrop');
-            renderer.appendChild(this._document.body, this._backdrop);
-        }
-        if (this.className != null) {
-            if (this.className instanceof Array && this.className.length > 0) {
-                this.className.forEach(_ => {
-                    renderer.addClass(container, _);
-                });
-            }
-            if (typeof this.className === 'string') {
-                renderer.addClass(container, this.className);
-            }
-        }
-        renderer.appendChild(container, content);
-        renderer.appendChild(this.container, container);
-        this.setPosition(this._head.nativeElement, this._body);
-    }
-    setPosition(container, target) {
-        const containerPosition = container.getBoundingClientRect();
-        target.style.maxHeight = null;
-        const targetPosition = target.getBoundingClientRect();
-        const rect = {
-            bottom: containerPosition.bottom,
-            top: containerPosition.top,
-            left: containerPosition.left,
-            right: containerPosition.right,
-        };
-        const targetRect = {
-            bottom: targetPosition.bottom,
-            top: targetPosition.top,
-            left: targetPosition.left,
-            right: targetPosition.right,
-        };
-        const targetTransformedParent = DomUtil.findTransformedParent(target);
-        let parentPosition = {
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-        };
-        if (targetTransformedParent) {
-            parentPosition = targetTransformedParent.getBoundingClientRect();
-        }
-        const position = PositionUtil.getPosition(rect, targetRect, this.align, this.verticalAlign, 0, 0, parentPosition);
-        PositionUtil.setElementPosition(target, position);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: DropdownBase, inputs: { align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", disabled: "disabled", backdrop: "backdrop", className: "className", viewType: "viewType", open: "open", autoClose: "autoClose", autoCloseIgnore: "autoCloseIgnore" }, outputs: { openChange: "openChange" }, host: { listeners: { "click": "click($event)", "document:click": "documentClick($event)", "window:keyup": "keyUp($event)" } }, queries: [{ propertyName: "_head", first: true, predicate: DropdownHeadDirective, descendants: true, read: ElementRef }, { propertyName: "_content", first: true, predicate: DropdownContentDirective, descendants: true }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { align: [{
-                type: Input
-            }], verticalAlign: [{
-                type: Input
-            }], appendToBody: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], backdrop: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], viewType: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }], autoClose: [{
-                type: Input
-            }], autoCloseIgnore: [{
-                type: Input
-            }], _head: [{
-                type: ContentChild,
-                args: [DropdownHeadDirective, {
-                        static: false,
-                        read: ElementRef,
-                    }]
-            }], _content: [{
-                type: ContentChild,
-                args: [DropdownContentDirective, { static: false }]
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], documentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], keyUp: [{
-                type: HostListener,
-                args: ['window:keyup', ['$event']]
-            }] } });
-
-class DropdownComponent extends DropdownBase {
-    _cdr;
-    _document;
-    _elementRef;
-    _zone;
-    _renderer;
-    constructor(_cdr, _document, _elementRef, _zone, _renderer) {
-        super(_cdr, _document, _elementRef, _zone, _renderer);
+        super(_cdr, _document, _elementRef, _zone, _renderer);
         this._cdr = _cdr;
         this._document = _document;
         this._elementRef = _elementRef;
@@ -1744,17 +1357,56 @@ class DropdownComponent extends DropdownBase {
         this.removeScrollListener();
         this._alive = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[tetaDropdownHead]\"></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ngAfterViewInit() {
+        if (this._content) {
+            this._renderer.removeChild(this._content.nativeElement.parentNode, this._content.nativeElement);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: DropdownDirective, selector: "[tetaDropdown]", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'dropdown', template: "<ng-content select=\"[tetaDropdownHead]\"></ng-content>\n" }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDropdown]'
+                }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });
 
+class DropdownModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent,
+            DropdownHeadDirective,
+            DropdownContentDirective,
+            DropdownDirective], imports: [CommonModule], exports: [DropdownComponent,
+            DropdownHeadDirective,
+            DropdownContentDirective,
+            DropdownDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DropdownComponent,
+                        DropdownHeadDirective,
+                        DropdownContentDirective,
+                        DropdownDirective
+                    ],
+                    exports: [
+                        DropdownComponent,
+                        DropdownHeadDirective,
+                        DropdownContentDirective,
+                        DropdownDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
 class ArrayUtil {
     static asArray(value) {
         if (value === null || value === undefined) {
@@ -2081,7 +1733,7 @@ class DynamicContentBaseDirective {
         this._zone = _zone;
         this._cdr = _cdr;
         this._zone.onStable
-            .pipe(takeWhile$1(_ => this._alive), filter$1(_ => this._open))
+            .pipe(takeWhile(_ => this._alive), filter(_ => this._open))
             .subscribe(_ => {
             this.setPosition();
         });
@@ -2274,273 +1926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 args: ['class.column']
             }] } });
 
-const DATE_PICKER_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => DatePickerComponent),
-    multi: true,
-};
-class DatePickerComponent extends BasePicker {
-    _elementRef;
-    _cdr;
-    datePipe;
-    date = null;
-    locale = 'ru';
-    showTime = false;
-    minDate = null;
-    maxDate = null;
-    invalid = false;
-    disabled = false;
-    align = Align.left;
-    verticalAlign = VerticalAlign.auto;
-    viewType = 'rounded';
-    appendToBody;
-    backdrop;
-    allowNull = true;
-    firstDayOfWeek = 1;
-    disabledDates;
-    disabledPeriods;
-    disabledDays;
-    minYearDate;
-    maxYearDate;
-    input;
-    selectDate = new EventEmitter();
-    selectedDate = new ReplaySubject(1);
-    mask = '';
-    classDatepicker = true;
-    tabindex = 0;
-    constructor(_elementRef, _cdr, datePipe) {
-        super(_elementRef, _cdr, datePipe);
-        this._elementRef = _elementRef;
-        this._cdr = _cdr;
-        this.datePipe = datePipe;
-    }
-    ngOnInit() {
-        if (!this.date) {
-            this.setDate(this.allowNull ? null : new Date());
-            this.date = this.allowNull ? null : new Date();
-        }
-        else {
-            this.setDate(new Date(this.date));
-        }
-        this.prepareInput();
-    }
-    prepareInput() {
-        const str = this.date ? this.getLocaleString(this.date) : '';
-        let option;
-        const setMinMax = () => {
-            if (this.minDate) {
-                option.min = dayjs(new Date(this.minDate)).startOf('day');
-            }
-            if (this.maxDate) {
-                option.max = dayjs(new Date(this.maxDate)).endOf('day');
-            }
-        };
-        if (this.showTime) {
-            this.mask = 'dd.mm.yyyy, hh:mm';
-            option = {
-                dateMode: 'dd/mm/yyyy',
-                timeMode: 'HH:MM',
-                dateSeparator: '.',
-            };
-            setMinMax();
-            this.maskitoOptions = maskitoDateTimeOptionsGenerator(option);
-        }
-        else {
-            this.mask = 'dd.mm.yyyy';
-            option = {
-                mode: 'dd/mm/yyyy',
-                separator: '.',
-            };
-            setMinMax();
-            this.maskitoOptions = maskitoDateOptionsGenerator(option);
-        }
-        this.changePlaceholder(str);
-    }
-    onBlur() {
-        if (this.allowNull && this.inputText.trim() === '') {
-            this.setDate(null);
-            this.emitValue(null);
-        }
-        else {
-            const val = this.inputText.split(',');
-            const { day, year, month } = this.getDateFromStr(val[0]);
-            const { mins, hours } = this.getTimeFromStr(val[1]);
-            if (day && year && month) {
-                let date = new Date(year, month - 1, day);
-                if (this.showTime) {
-                    date = new Date(date.setHours(hours || 0, mins || 0));
-                }
-                this.changeSelectedDate(this.getAvailableDate(this.minDate, this.maxDate, date));
-            }
-            else {
-                this.setDate(this.date);
-            }
-        }
-    }
-    setDate(date) {
-        if (!date && this.allowNull) {
-            this.inputText = '';
-            this.changePlaceholder('');
-            this.selectedDate.next(new Date(this.minDate || new Date()));
-        }
-        else {
-            this.inputText = this.getLocaleString(date);
-            this.changePlaceholder(this.getLocaleString(date));
-            this.selectedDate.next(date);
-        }
-    }
-    onChange(date) {
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-    }
-    writeValue(obj) {
-        if (obj) {
-            this.date = new Date(obj);
-            this.setDate(new Date(this.date));
-        }
-        else {
-            if (this.allowNull) {
-                this.date = null;
-                this.selectedDate.next(null);
-            }
-            else {
-                this.date = this.minDate || new Date();
-                this.selectedDate.next(this.minDate || new Date());
-            }
-        }
-    }
-    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 }], 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", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_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\"\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          <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=\"top:-0.3px;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      <teta-date-calendar [isDateNull]=\"date===null\" [open]=\"open\" [max]=\"maxDate\" [min]=\"minDate\"\n                          (setDate)=\"changeSelectedDate($event)\"\n                          [selectedDate]=\"data.selectedDate\"\n                          [viewType]=\"viewType\" [locale]=\"locale\"></teta-date-calendar>\n    </ng-container>\n\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: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.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 });
-}
-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=\"{selectedDate:selectedDate|async}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          <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=\"top:-0.3px;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      <teta-date-calendar [isDateNull]=\"date===null\" [open]=\"open\" [max]=\"maxDate\" [min]=\"minDate\"\n                          (setDate)=\"changeSelectedDate($event)\"\n                          [selectedDate]=\"data.selectedDate\"\n                          [viewType]=\"viewType\" [locale]=\"locale\"></teta-date-calendar>\n    </ng-container>\n\n  </div>\n</teta-dropdown>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatePipe }]; }, propDecorators: { date: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], showTime: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], verticalAlign: [{
-                type: Input
-            }], viewType: [{
-                type: Input
-            }], appendToBody: [{
-                type: Input
-            }], backdrop: [{
-                type: Input
-            }], allowNull: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], disabledPeriods: [{
-                type: Input
-            }], disabledDays: [{
-                type: Input
-            }], minYearDate: [{
-                type: Input
-            }], maxYearDate: [{
-                type: Input
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
-            }], selectDate: [{
-                type: Output
-            }], classDatepicker: [{
-                type: HostBinding,
-                args: ['class.datepicker']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['tabindex']
-            }] } });
-
-class DropdownDirective extends DropdownBase {
-    _cdr;
-    _document;
-    _elementRef;
-    _zone;
-    _renderer;
-    constructor(_cdr, _document, _elementRef, _zone, _renderer) {
-        super(_cdr, _document, _elementRef, _zone, _renderer);
-        this._cdr = _cdr;
-        this._document = _document;
-        this._elementRef = _elementRef;
-        this._zone = _zone;
-        this._renderer = _renderer;
-    }
-    ngOnInit() {
-    }
-    ngOnDestroy() {
-        this.closeDropdown();
-        this.removeScrollListener();
-        this._alive = false;
-    }
-    ngAfterViewInit() {
-        if (this._content) {
-            this._renderer.removeChild(this._content.nativeElement.parentNode, this._content.nativeElement);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: DropdownDirective, selector: "[tetaDropdown]", usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaDropdown]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });
-
-class DropdownModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent,
-            DropdownHeadDirective,
-            DropdownContentDirective,
-            DropdownDirective], imports: [CommonModule], exports: [DropdownComponent,
-            DropdownHeadDirective,
-            DropdownContentDirective,
-            DropdownDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DropdownComponent,
-                        DropdownHeadDirective,
-                        DropdownContentDirective,
-                        DropdownDirective
-                    ],
-                    exports: [
-                        DropdownComponent,
-                        DropdownHeadDirective,
-                        DropdownContentDirective,
-                        DropdownDirective
-                    ],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
-class OnlyNumberDirective {
+class OnlyNumberDirective {
     _elementRef;
     _control;
     tetaOnlyNumber = true;
@@ -2696,429 +2082,1099 @@ class OnlyNumberDirective {
         if (value === null || value === undefined || value === '') {
             return;
         }
-        const valid = new RegExp(regex).test(value.toString());
-        if (valid) {
-            this._control.control.patchValue(parseFloat(value));
+        const valid = new RegExp(regex).test(value.toString());
+        if (valid) {
+            this._control.control.patchValue(parseFloat(value));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }, { token: i3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: { tetaOnlyNumber: "tetaOnlyNumber", allowDecimals: "allowDecimals", allowSign: "allowSign", decimalSeparator: "decimalSeparator", commaSeparator: "commaSeparator" }, host: { listeners: { "change": "onChange($event)", "dblclick": "dblclick($event)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaOnlyNumber]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.NgControl }]; }, propDecorators: { tetaOnlyNumber: [{
+                type: Input
+            }], allowDecimals: [{
+                type: Input
+            }], allowSign: [{
+                type: Input
+            }], decimalSeparator: [{
+                type: Input
+            }], commaSeparator: [{
+                type: Input
+            }], onChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], dblclick: [{
+                type: HostListener,
+                args: ['dblclick', ['$event']]
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+const getPrecision = (a) => {
+    if (!isFinite(a)) {
+        return 0;
+    }
+    let e = 1;
+    let p = 0;
+    while (Math.round(a * e) / e !== a) {
+        e *= 10;
+        p++;
+    }
+    return p;
+};
+const formatNumber = (value, decimalLength, chunkDelimiter, decimalDelimiter, chunkLength) => {
+    const abs = Math.abs(value);
+    if (0 < abs && 1 > abs) {
+        const firstDigitIndex = Math.floor(Math.abs(Math.log10(abs)));
+        decimalLength += firstDigitIndex;
+    }
+    const precision = Math.min(getPrecision(value), Math.floor(decimalLength));
+    const result = '\\d(?=(\\d{' + chunkLength + '})+' + (precision > 0 ? '\\D' : '$') + ')';
+    const num = value.toFixed(precision);
+    return (decimalDelimiter ? num.replace('.', decimalDelimiter) : num).replace(new RegExp(result, 'g'), '$&' + chunkDelimiter);
+};
+const prependZero = (input, length) => ('0'.repeat(length) + input).slice(-length);
+
+class NumberPipe {
+    transform(value, decimalLength = 2, chunkDelimiter = '', decimalDelimiter = '.', chunkLength = 3) {
+        if (value === null || value === undefined || value === '') {
+            return '';
+        }
+        if (typeof value === 'string' && isNaN(parseFloat(value))) {
+            return value.toString();
+        }
+        if (decimalLength === null) {
+            return value.toString();
+        }
+        value = Number(value);
+        return formatNumber(value, decimalLength, chunkDelimiter, decimalDelimiter, chunkLength);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: NumberPipe, name: "tetaNumber" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'tetaNumber'
+                }]
+        }] });
+
+class TextFieldComponent {
+    _cdr;
+    placeholder = '';
+    leftIconName;
+    disabled = false;
+    onlyNumber = false;
+    decimalPart;
+    invalid;
+    input;
+    inputFocused;
+    textField = true;
+    value = '';
+    constructor(_cdr) {
+        this._cdr = _cdr;
+    }
+    onFocus() {
+        if (this.disabled) {
+            return;
+        }
+        this.input.nativeElement.focus();
+    }
+    keyPress(event) {
+        if (event.key === 'Enter' || event.keyCode === 13) {
+            this.emitBlur();
+        }
+    }
+    emitBlur() {
+        this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this._cdr.markForCheck();
+    }
+    writeValue(input) {
+        this.value = input;
+        this._cdr.detectChanges();
+    }
+    onChange(input) { }
+    onTouched() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: TextFieldComponent, selector: "teta-text-field", inputs: { placeholder: "placeholder", leftIconName: "leftIconName", disabled: "disabled", onlyNumber: "onlyNumber", decimalPart: "decimalPart", invalid: "invalid" }, host: { listeners: { "click": "onFocus()" }, properties: { "class.text-field_disabled": "this.disabled", "class.text-field_invalid": "this.invalid", "class.text-field": "this.textField" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextFieldComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf='leftIconName' [name]='leftIconName' [palette]=\"'text'\"></teta-icon>\n<input\n  #input\n  [ngModel]='value | tetaNumber : !onlyNumber ? null : inputFocused ? 1000 : decimalPart'\n  [tetaOnlyNumber]='onlyNumber'\n  (ngModelChange)='value = $event; onChange($event);'\n  [placeholder]='placeholder'\n  [disabled]='disabled'\n  [ngClass]=\"{'color-text-40':disabled}\"\n  (focus)='inputFocused = true'\n  (blur)='inputFocused = false;emitBlur()'\n  (keydown)='keyPress($event)'\n  type='text'\n/>\n<teta-icon\n  *ngIf='value && !disabled'\n  class='close-icon'\n  [name]=\"'closeCircle'\"\n  [palette]=\"'text'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\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: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { 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: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-text-field', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextFieldComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon *ngIf='leftIconName' [name]='leftIconName' [palette]=\"'text'\"></teta-icon>\n<input\n  #input\n  [ngModel]='value | tetaNumber : !onlyNumber ? null : inputFocused ? 1000 : decimalPart'\n  [tetaOnlyNumber]='onlyNumber'\n  (ngModelChange)='value = $event; onChange($event);'\n  [placeholder]='placeholder'\n  [disabled]='disabled'\n  [ngClass]=\"{'color-text-40':disabled}\"\n  (focus)='inputFocused = true'\n  (blur)='inputFocused = false;emitBlur()'\n  (keydown)='keyPress($event)'\n  type='text'\n/>\n<teta-icon\n  *ngIf='value && !disabled'\n  class='close-icon'\n  [name]=\"'closeCircle'\"\n  [palette]=\"'text'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], leftIconName: [{
+                type: Input
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.text-field_disabled']
+            }, {
+                type: Input
+            }], onlyNumber: [{
+                type: Input
+            }], decimalPart: [{
+                type: Input
+            }], invalid: [{
+                type: HostBinding,
+                args: ['class.text-field_invalid']
+            }, {
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], textField: [{
+                type: HostBinding,
+                args: ['class.text-field']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class OnlyNumberModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberModule, declarations: [OnlyNumberDirective], imports: [CommonModule], exports: [OnlyNumberDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [OnlyNumberDirective],
+                    exports: [OnlyNumberDirective],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+class FormGroupTitleComponent {
+    className = true;
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FormGroupTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: FormGroupTitleComponent, selector: "teta-form-group-title", host: { properties: { "class.form-group-title": "this.className" } }, ngImport: i0, template: "<div class=\"font-overline form-group-title-text\">\n  <ng-content></ng-content>\n</div>\n<div class=\"form-group-title-line\"></div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FormGroupTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-form-group-title', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"font-overline form-group-title-text\">\n  <ng-content></ng-content>\n</div>\n<div class=\"form-group-title-line\"></div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.form-group-title']
+            }] } });
+
+class DynamicComponentModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: DynamicComponentModule, declarations: [PopupContentComponent], imports: [CommonModule], exports: [PopupContentComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DynamicComponentModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DynamicComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PopupContentComponent],
+                    exports: [PopupContentComponent],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class HintModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: HintModule, declarations: [HintDirective], imports: [CommonModule,
+            DynamicComponentModule], exports: [HintDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: HintModule, imports: [CommonModule,
+            DynamicComponentModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: HintModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HintDirective],
+                    exports: [HintDirective],
+                    imports: [
+                        CommonModule,
+                        DynamicComponentModule
+                    ]
+                }]
+        }] });
+
+class ColorInputComponent {
+    _cdr;
+    disabled = false;
+    input;
+    value = '';
+    constructor(_cdr) {
+        this._cdr = _cdr;
+    }
+    onFocus() {
+        if (this.disabled) {
+            return;
+        }
+        this.input.nativeElement.focus();
+    }
+    emitBlur() {
+        this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this._cdr.markForCheck();
+    }
+    writeValue(input) {
+        this.value = input;
+        this._cdr.detectChanges();
+    }
+    onChange(input) { }
+    onTouched() { }
+    getHexColor(color) {
+        if (color && color.startsWith('rgb')) {
+            const value = color.substring(color.indexOf('(') + 1, color.lastIndexOf(')'));
+            const colorArray = value.split(',');
+            color = `#${('00' + parseInt(colorArray[0], 10).toString(16)).slice(-2)}${('00' + parseInt(colorArray[1], 10).toString(16)).slice(-2)}${('00' + parseInt(colorArray[2], 10).toString(16)).slice(-2)}`;
+        }
+        return color;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ColorInputComponent, selector: "teta-color-input", inputs: { disabled: "disabled" }, host: { listeners: { "click": "onFocus()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorInputComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input type='color'\n       #input\n       [disabled]='disabled'\n       (blur)='emitBlur();'\n       [ngModel]=\"getHexColor(value)\"\n       (ngModelChange)=\"value = $event;onChange($event)\"\n       [ngModelOptions]='{updateOn: \"blur\"}'/>\n", styles: [":host{display:inline-flex;align-items:center}input[type=color]{height:12px;width:12px;padding:0;border:0}input[type=color]::-webkit-color-swatch,input[type=color]::-webkit-color-swatch-wrapper{border:0;padding:0}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ColorInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-color-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorInputComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input type='color'\n       #input\n       [disabled]='disabled'\n       (blur)='emitBlur();'\n       [ngModel]=\"getHexColor(value)\"\n       (ngModelChange)=\"value = $event;onChange($event)\"\n       [ngModelOptions]='{updateOn: \"blur\"}'/>\n", styles: [":host{display:inline-flex;align-items:center}input[type=color]{height:12px;width:12px;padding:0;border:0}input[type=color]::-webkit-color-swatch,input[type=color]::-webkit-color-swatch-wrapper{border:0;padding:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], onFocus: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class NumberPipeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: NumberPipeModule, declarations: [NumberPipe], imports: [CommonModule], exports: [NumberPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipeModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NumberPipe],
+                    exports: [
+                        NumberPipe
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class InputModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: InputModule, declarations: [InputComponent, TextFieldComponent, FormGroupTitleComponent, ColorInputComponent], imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule, NumberPipeModule], exports: [InputComponent, TextFieldComponent, FormGroupTitleComponent, ColorInputComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: InputModule, imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule, NumberPipeModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: InputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [InputComponent, TextFieldComponent, FormGroupTitleComponent, ColorInputComponent],
+                    exports: [InputComponent, TextFieldComponent, FormGroupTitleComponent, ColorInputComponent],
+                    imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule, NumberPipeModule],
+                }]
+        }] });
+
+class DayModel {
+    disabled;
+    isCurrentMonth;
+    today;
+    selected;
+    date;
+    weekend;
+    constructor(options) {
+        if (options) {
+            this.disabled = options.disabled;
+            this.isCurrentMonth = options.isCurrentMonth;
+            this.today = options.today;
+            this.selected = options.selected;
+            this.date = options.date;
+            this.weekend = options.weekend;
+        }
+    }
+}
+
+class BaseCalendar {
+    _cdr;
+    currentMonth = new ReplaySubject(1);
+    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;
+    }
+    generateCalendar(selectedDate, year, month, minMax) {
+        const calendarStartDay = selectedDate
+            .set('year', year)
+            .set('month', month)
+            .set('date', 1)
+            .startOf('week');
+        const calendar = new Array(42).fill(1).map((v, i) => {
+            return calendarStartDay.add(i, 'day');
+        });
+        return calendar.map(d => {
+            return new DayModel({
+                date: new Date(d.toDate()),
+                isCurrentMonth: month === d.month(),
+                disabled: !this.isSuitableMinDate(d.toDate(), minMax.min) ||
+                    !this.isSuitableMaxDate(d.toDate(), minMax.max),
+                selected: this.isSelected(d.toDate(), selectedDate.toDate()),
+            });
+        });
+    }
+    isSuitableMinDate(d, minDate) {
+        return (dayjs(new Date(minDate)).startOf('date').toDate() <= new Date(d) ||
+            minDate === null);
+    }
+    isSuitableMaxDate(d, maxDate) {
+        return (new Date(d) < dayjs(new Date(maxDate)).endOf('date').toDate() ||
+            maxDate === null);
+    }
+    isSelected(date, selectedDate) {
+        const isSelectedDate = date.getDate() === selectedDate?.getDate();
+        const isSelectedYear = date.getFullYear() === selectedDate?.getFullYear();
+        const isSelectedMonth = date.getMonth() === selectedDate?.getMonth();
+        return (isSelectedDate && isSelectedMonth && isSelectedYear && !this.isDateNull);
+    }
+    ngOnDestroy() {
+        this.alive = false;
+    }
+    selectPicker(entity) {
+        this.selectedPicker.next(entity);
+    }
+    selectMonth(month) {
+        this.currentMonth.next(month);
+        this.selectPicker('day');
+    }
+    selectYear(year) {
+        this.setYear(year);
+        this.selectPicker('day');
+    }
+    ngOnChanges(changes) {
+        this.changeCalendarData(this.selectedDate);
+    }
+    changeCalendarData(selectedDate) {
+        const date = new Date(selectedDate || 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 });
+    }
+    setYear(year) {
+        this.currentYear.next(year);
+    }
+    changeMonth(month, year) {
+        const { availableYear, availableMonth } = this.getAvailableMonthYear(month, year);
+        this.currentMonth.next(availableMonth);
+        this.currentYear.next(availableYear);
+    }
+    getAvailableMonthYear(month, year) {
+        if (month > 11) {
+            return { availableMonth: month - 12, availableYear: year + 1 };
+        }
+        if (month < 0) {
+            return { availableMonth: 12 + month, availableYear: year - 1 };
         }
+        return { availableMonth: month, availableYear: year };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }, { token: i3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: { tetaOnlyNumber: "tetaOnlyNumber", allowDecimals: "allowDecimals", allowSign: "allowSign", decimalSeparator: "decimalSeparator", commaSeparator: "commaSeparator" }, host: { listeners: { "change": "onChange($event)", "dblclick": "dblclick($event)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+    getMothName(month) {
+        return this.localeMonths.get(this.locale)[month];
+    }
+    selectDate(date) {
+        this.setDate.emit(date);
+    }
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseCalendar, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[tetaOnlyNumber]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.NgControl }]; }, propDecorators: { tetaOnlyNumber: [{
-                type: Input
-            }], allowDecimals: [{
-                type: Input
-            }], allowSign: [{
-                type: Input
-            }], decimalSeparator: [{
-                type: Input
-            }], commaSeparator: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class DayItemComponent {
+    day;
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DayItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DayItemComponent, selector: "teta-day-item", inputs: { day: "day" }, ngImport: i0, template: "<p>{{day.date.getDate()}}</p>\n\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DayItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-day-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>{{day.date.getDate()}}</p>\n\n" }]
+        }], propDecorators: { day: [{
                 type: Input
-            }], onChange: [{
-                type: HostListener,
-                args: ['change', ['$event']]
-            }], dblclick: [{
-                type: HostListener,
-                args: ['dblclick', ['$event']]
-            }], onPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
-const getPrecision = (a) => {
-    if (!isFinite(a)) {
-        return 0;
+class DayPickerComponent {
+    date = new Date();
+    calendar;
+    viewType;
+    range;
+    min;
+    max;
+    locale;
+    hoveredDate;
+    hoveredDateChange = new EventEmitter();
+    selectDate = new EventEmitter();
+    daysOfWeek = new Map().set('ru', ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']).set('en', ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
+    constructor() {
     }
-    let e = 1;
-    let p = 0;
-    while (Math.round(a * e) / e !== a) {
-        e *= 10;
-        p++;
+    isInRange(day, from, to) {
+        const matchesMinDate = dayjs(new Date(from)).startOf('date').toDate() <= day.date;
+        const matchesMaxDate = day.date < dayjs(new Date(to)).endOf('date').toDate();
+        return matchesMinDate && matchesMaxDate;
     }
-    return p;
-};
-const formatNumber = (value, decimalLength, chunkDelimiter, decimalDelimiter, chunkLength) => {
-    const abs = Math.abs(value);
-    if (0 < abs && 1 > abs) {
-        const firstDigitIndex = Math.floor(Math.abs(Math.log10(abs)));
-        decimalLength += firstDigitIndex;
+    isHoveredRange(day) {
+        if (!this.range?.to && this.range?.from) {
+            return this.isInRange(day, this.range.from, this.hoveredDate) || this.isInRange(day, this.hoveredDate, this.range.from);
+        }
+        return false;
     }
-    const precision = Math.min(getPrecision(value), Math.floor(decimalLength));
-    const result = '\\d(?=(\\d{' + chunkLength + '})+' + (precision > 0 ? '\\D' : '$') + ')';
-    const num = value.toFixed(precision);
-    return (decimalDelimiter ? num.replace('.', decimalDelimiter) : num).replace(new RegExp(result, 'g'), '$&' + chunkDelimiter);
-};
-const prependZero = (input, length) => ('0'.repeat(length) + input).slice(-length);
-
-class NumberPipe {
-    transform(value, decimalLength = 2, chunkDelimiter = '', decimalDelimiter = '.', chunkLength = 3) {
-        if (value === null || value === undefined || value === '') {
-            return '';
+    isActiveRange(day) {
+        if (this.range?.from && this.range?.to) {
+            return this.isInRange(day, this.range.from, this.range.to);
         }
-        if (typeof value === 'string' && isNaN(parseFloat(value))) {
-            return value.toString();
+        return false;
+    }
+    pickDate(day) {
+        if (!day.disabled) {
+            this.selectDate.emit(day.date);
         }
-        if (decimalLength === null) {
-            return value.toString();
+    }
+    getRangeActiveClass(d) {
+        if (this.range && new Date(this.range?.from).getTime() !== new Date(this.range?.to).getTime()) {
+            if (this.range.to) {
+                return this.getClassStaticItem(d);
+            }
+            else {
+                if (this.hoveredDate.getTime() === d.date.getTime()) {
+                    return this.getClassHoveredItem();
+                }
+                else {
+                    return this.getClassSelectedItem(d);
+                }
+            }
         }
-        value = Number(value);
-        return formatNumber(value, decimalLength, chunkDelimiter, decimalDelimiter, chunkLength);
+        return '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: NumberPipe, name: "tetaNumber" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'tetaNumber'
-                }]
-        }] });
-
-class TextFieldComponent {
-    _cdr;
-    placeholder = '';
-    leftIconName;
-    disabled = false;
-    onlyNumber = false;
-    decimalPart;
-    invalid;
-    input;
-    inputFocused;
-    textField = true;
-    value = '';
-    constructor(_cdr) {
-        this._cdr = _cdr;
+    hover(date) {
+        if (date?.getTime() !== this.hoveredDate?.getTime()) {
+            this.hoveredDate = date;
+            this.hoveredDateChange.emit(date);
+        }
     }
-    onFocus() {
-        if (this.disabled) {
-            return;
+    getClassStaticItem(d) {
+        const from = dayjs(new Date(this.range.from)).startOf("day").toDate();
+        const to = dayjs(new Date(this.range.to)).startOf("day").toDate();
+        const itemDate = dayjs(new Date(d.date)).startOf("day").toDate();
+        if (from.getTime() === itemDate.getTime()) {
+            return 'datepicker-date_active-first';
         }
-        this.input.nativeElement.focus();
+        if (to.getTime() === itemDate.getTime()) {
+            return 'datepicker-date_active-second';
+        }
+        return '';
     }
-    keyPress(event) {
-        if (event.key === 'Enter' || event.keyCode === 13) {
-            this.emitBlur();
+    getClassHoveredItem() {
+        if (new Date(this.range.from) > this.hoveredDate) {
+            return 'datepicker-date_active-first';
+        }
+        if (new Date(this.range.from) < this.hoveredDate) {
+            return 'datepicker-date_active-second';
         }
     }
-    emitBlur() {
-        this.onTouched();
+    getClassSelectedItem(d) {
+        if (d.selected && d.date < this.hoveredDate) {
+            return 'datepicker-date_active-first';
+        }
+        if (d.selected && d.date > this.hoveredDate) {
+            return 'datepicker-date_active-second';
+        }
+        return '';
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    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 });
+}
+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" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { date: [{
+                type: Input
+            }], calendar: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], range: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], hoveredDate: [{
+                type: Input
+            }], hoveredDateChange: [{
+                type: Output
+            }], selectDate: [{
+                type: Output
+            }] } });
+
+class MonthPickerComponent {
+    locale;
+    selectedMonth = 1;
+    viewType;
+    currentYear;
+    localeMoths;
+    selectMonth = new EventEmitter();
+    changeYear = new EventEmitter();
+    months = [];
+    constructor() {
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    pickMonth(monthId) {
+        this.selectMonth.emit(monthId);
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this._cdr.markForCheck();
+    pickYear(year) {
+        this.changeYear.emit(year);
     }
-    writeValue(input) {
-        this.value = input;
-        this._cdr.detectChanges();
+    ngOnInit() {
+        this.months = this.localeMoths.get(this.locale).map((m, i) => {
+            return {
+                id: i,
+                name: m,
+                isSelected: this.selectedMonth === i
+            };
+        });
     }
-    onChange(input) { }
-    onTouched() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: TextFieldComponent, selector: "teta-text-field", inputs: { placeholder: "placeholder", leftIconName: "leftIconName", disabled: "disabled", onlyNumber: "onlyNumber", decimalPart: "decimalPart", invalid: "invalid" }, host: { listeners: { "click": "onFocus()" }, properties: { "class.text-field_disabled": "this.disabled", "class.text-field_invalid": "this.invalid", "class.text-field": "this.textField" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TextFieldComponent),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf='leftIconName' [name]='leftIconName' [palette]=\"'text'\"></teta-icon>\n<input\n  #input\n  [ngModel]='value | tetaNumber : !onlyNumber ? null : inputFocused ? 1000 : decimalPart'\n  [tetaOnlyNumber]='onlyNumber'\n  (ngModelChange)='value = $event; onChange($event);'\n  [placeholder]='placeholder'\n  [disabled]='disabled'\n  [ngClass]=\"{'color-text-40':disabled}\"\n  (focus)='inputFocused = true'\n  (blur)='inputFocused = false;emitBlur()'\n  (keydown)='keyPress($event)'\n  type='text'\n/>\n<teta-icon\n  *ngIf='value && !disabled'\n  class='close-icon'\n  [name]=\"'closeCircle'\"\n  [palette]=\"'text'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\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: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { 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: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: MonthPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-text-field', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TextFieldComponent),
-                            multi: true,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon *ngIf='leftIconName' [name]='leftIconName' [palette]=\"'text'\"></teta-icon>\n<input\n  #input\n  [ngModel]='value | tetaNumber : !onlyNumber ? null : inputFocused ? 1000 : decimalPart'\n  [tetaOnlyNumber]='onlyNumber'\n  (ngModelChange)='value = $event; onChange($event);'\n  [placeholder]='placeholder'\n  [disabled]='disabled'\n  [ngClass]=\"{'color-text-40':disabled}\"\n  (focus)='inputFocused = true'\n  (blur)='inputFocused = false;emitBlur()'\n  (keydown)='keyPress($event)'\n  type='text'\n/>\n<teta-icon\n  *ngIf='value && !disabled'\n  class='close-icon'\n  [name]=\"'closeCircle'\"\n  [palette]=\"'text'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
-                type: Input
-            }], leftIconName: [{
+            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
-            }], disabled: [{
-                type: HostBinding,
-                args: ['class.text-field_disabled']
-            }, {
+            }], selectedMonth: [{
                 type: Input
-            }], onlyNumber: [{
+            }], viewType: [{
                 type: Input
-            }], decimalPart: [{
+            }], currentYear: [{
                 type: Input
-            }], invalid: [{
-                type: HostBinding,
-                args: ['class.text-field_invalid']
-            }, {
+            }], localeMoths: [{
                 type: Input
-            }], input: [{
-                type: ViewChild,
-                args: ['input', { static: false }]
-            }], textField: [{
-                type: HostBinding,
-                args: ['class.text-field']
-            }], onFocus: [{
-                type: HostListener,
-                args: ['click']
+            }], selectMonth: [{
+                type: Output
+            }], changeYear: [{
+                type: Output
             }] } });
 
-class OnlyNumberModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberModule, declarations: [OnlyNumberDirective], imports: [CommonModule], exports: [OnlyNumberDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberModule, imports: [CommonModule] });
+class ScrollToSelectedYearDirective {
+    el;
+    alive = true;
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnDestroy() {
+        this.alive = false;
+    }
+    ngAfterViewInit() {
+        this.el.nativeElement.scrollIntoView({ inline: "center", block: "center" });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollToSelectedYearDirective, deps: [{ token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: ScrollToSelectedYearDirective, selector: "[tetaScrollToSelectedYear]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OnlyNumberModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollToSelectedYearDirective, decorators: [{
+            type: Directive,
             args: [{
-                    declarations: [OnlyNumberDirective],
-                    exports: [OnlyNumberDirective],
-                    imports: [CommonModule],
+                    selector: '[tetaScrollToSelectedYear]'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }]; } });
 
-class FormGroupTitleComponent {
-    className = true;
-    constructor() { }
-    ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FormGroupTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: FormGroupTitleComponent, selector: "teta-form-group-title", host: { properties: { "class.form-group-title": "this.className" } }, ngImport: i0, template: "<div class=\"font-overline form-group-title-text\">\n  <ng-content></ng-content>\n</div>\n<div class=\"form-group-title-line\"></div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class YearPickerComponent {
+    selectedYear;
+    viewType;
+    minMax;
+    locale;
+    selectYear = new EventEmitter();
+    yearPickerDictionary = new Map().set('ru', 'Выберете год').set('en', 'Select year');
+    alive = true;
+    years;
+    constructor() {
+    }
+    pickYear(year, disabled) {
+        if (!disabled) {
+            this.selectYear.emit(year);
+        }
+    }
+    ngOnInit() {
+        this.years = new Array(100).fill(1).map((v, i) => {
+            const year = new Date().getFullYear() + (i - 50);
+            return { id: year, isSelected: year === this.selectedYear, disabled: this.isDisabled(year) };
+        });
+    }
+    isDisabled(year) {
+        if (this.minMax) {
+            const isSuitableMax = dayjs(new Date().setFullYear(year)).startOf('year').isAfter(new Date(this.minMax.max)) && this.minMax.max !== null;
+            const isSuitableMin = dayjs(new Date().setFullYear(year)).endOf('year').isBefore(new Date(this.minMax.min)) && this.minMax.min !== null;
+            return isSuitableMax || isSuitableMin;
+        }
+        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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FormGroupTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: YearPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-form-group-title', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"font-overline form-group-title-text\">\n  <ng-content></ng-content>\n</div>\n<div class=\"form-group-title-line\"></div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.form-group-title']
+            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" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { selectedYear: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], minMax: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], selectYear: [{
+                type: Output
             }] } });
 
-class DynamicComponentModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: DynamicComponentModule, declarations: [PopupContentComponent], imports: [CommonModule], exports: [PopupContentComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DynamicComponentModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DynamicComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [PopupContentComponent],
-                    exports: [PopupContentComponent],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
-class HintModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: HintModule, declarations: [HintDirective], imports: [CommonModule,
-            DynamicComponentModule], exports: [HintDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: HintModule, imports: [CommonModule,
-            DynamicComponentModule] });
+class DateCalendarComponent extends BaseCalendar {
+    _cdr;
+    selectedDate = new Date();
+    locale;
+    open;
+    viewType;
+    min;
+    isDateNull;
+    max;
+    setDate = new EventEmitter();
+    calendar = [];
+    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);
+        }))
+            .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\">\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: HintModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [HintDirective],
-                    exports: [HintDirective],
-                    imports: [
-                        CommonModule,
-                        DynamicComponentModule
-                    ]
-                }]
-        }] });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedDate: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], isDateNull: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], setDate: [{
+                type: Output
+            }] } });
 
-class ColorInputComponent {
+class BasePicker {
+    _elementRef;
     _cdr;
-    disabled = false;
-    input;
-    value = '';
-    constructor(_cdr) {
+    datePipe;
+    open = false;
+    placeholder = '';
+    inputText;
+    maskitoOptions;
+    constructor(_elementRef, _cdr, datePipe) {
+        this._elementRef = _elementRef;
         this._cdr = _cdr;
+        this.datePipe = datePipe;
+        this.inputText = this.checkNull();
+    }
+    changeInput(v) {
+        this.changePlaceholder(v);
+    }
+    changePlaceholder(value) {
+        const val = this.mask.split('');
+        for (let i = 0; value.length > i; i++) {
+            val.splice(i, 1, value[i]);
+        }
+        this.placeholder = val.join('');
+    }
+    openChange(e) {
+        if (!e) {
+            this.onBlur();
+        }
+        this.open = e;
+    }
+    checkNull() {
+        if (!this.date && this.allowNull) {
+            return null;
+        }
+        return this.datePipe.transform(new Date(), 'dd.MM.yyyy, HH:mm');
     }
-    onFocus() {
+    openPicker = (show) => {
         if (this.disabled) {
             return;
         }
-        this.input.nativeElement.focus();
+        this.open = show;
+        this._cdr.markForCheck();
+    };
+    changeSelectedDate(date, selectedDate) {
+        this.setDate(date);
+        this.emitValue(date);
+        this.open = false;
     }
-    emitBlur() {
-        this.onTouched();
+    emitValue(value) {
+        if (this.isValueChange(value)) {
+            this.date = value;
+            this.selectDate.emit(value);
+            this.onChange(value);
+        }
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    isValueChange(value) {
+        return new Date(value).getTime() !== new Date(this.date).getTime();
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    checkEnter(e) {
+        if (e.key === 'Enter') {
+            this.inputText = e.target.value;
+            this.onBlur();
+        }
+        if (e.key === '-') {
+            e.preventDefault();
+        }
+        this.open = true;
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this._cdr.markForCheck();
+    isAvailableLength(val, length) {
+        if (val?.length) {
+            return val.length === length;
+        }
+        return false;
     }
-    writeValue(input) {
-        this.value = input;
-        this._cdr.detectChanges();
+    getDateFromStr(str, separator = '.') {
+        const date = str?.split(separator);
+        const day = this.isAvailableLength(date?.[0], 2) ? Number(date[0]) : null;
+        const month = this.isAvailableLength(date?.[1], 2) ? Number(date[1]) : null;
+        const year = this.isAvailableLength(date?.[2], 4) ? Number(date[2]) : null;
+        return { day, month, year };
     }
-    onChange(input) { }
-    onTouched() { }
-    getHexColor(color) {
-        if (color && color.startsWith('rgb')) {
-            const value = color.substring(color.indexOf('(') + 1, color.lastIndexOf(')'));
-            const colorArray = value.split(',');
-            color = `#${('00' + parseInt(colorArray[0], 10).toString(16)).slice(-2)}${('00' + parseInt(colorArray[1], 10).toString(16)).slice(-2)}${('00' + parseInt(colorArray[2], 10).toString(16)).slice(-2)}`;
+    getTimeFromStr(str, separator = ':') {
+        const time = str?.trim().split(separator);
+        const hours = this.isAvailableLength(time?.[0], 2) ? Number(time[0]) : null;
+        const mins = this.isAvailableLength(time?.[1], 2) ? Number(time[1]) : null;
+        return { hours, mins };
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    getLocaleString(date) {
+        return new Date(date).toLocaleString([], {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: this.showTime ? '2-digit' : undefined,
+            minute: this.showTime ? '2-digit' : undefined,
+        });
+    }
+    getAvailableDate(min, max, date) {
+        const minDate = dayjs(new Date(min)).startOf('day').toDate();
+        const maxDate = dayjs(new Date(max)).endOf('day').toDate();
+        if (min && minDate.getTime() >= new Date(date).getTime()) {
+            return new Date();
         }
-        return color;
+        if (max && maxDate.getTime() <= new Date(date).getTime()) {
+            return maxDate;
+        }
+        return new Date(date);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ColorInputComponent, selector: "teta-color-input", inputs: { disabled: "disabled" }, host: { listeners: { "click": "onFocus()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ColorInputComponent),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input type='color'\n       #input\n       [disabled]='disabled'\n       (blur)='emitBlur();'\n       [ngModel]=\"getHexColor(value)\"\n       (ngModelChange)=\"value = $event;onChange($event)\"\n       [ngModelOptions]='{updateOn: \"blur\"}'/>\n", styles: [":host{display:inline-flex;align-items:center}input[type=color]{height:12px;width:12px;padding:0;border:0}input[type=color]::-webkit-color-swatch,input[type=color]::-webkit-color-swatch-wrapper{border:0;padding:0}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ColorInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-color-input', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ColorInputComponent),
-                            multi: true,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input type='color'\n       #input\n       [disabled]='disabled'\n       (blur)='emitBlur();'\n       [ngModel]=\"getHexColor(value)\"\n       (ngModelChange)=\"value = $event;onChange($event)\"\n       [ngModelOptions]='{updateOn: \"blur\"}'/>\n", styles: [":host{display:inline-flex;align-items:center}input[type=color]{height:12px;width:12px;padding:0;border:0}input[type=color]::-webkit-color-swatch,input[type=color]::-webkit-color-swatch-wrapper{border:0;padding:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], input: [{
-                type: ViewChild,
-                args: ['input', { static: false }]
-            }], onFocus: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class NumberPipeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: NumberPipeModule, declarations: [NumberPipe], imports: [CommonModule], exports: [NumberPipe] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipeModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: NumberPipeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NumberPipe],
-                    exports: [
-                        NumberPipe
-                    ],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
-class InputModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: InputModule, declarations: [InputComponent, TextFieldComponent, FormGroupTitleComponent, ColorInputComponent], imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule, NumberPipeModule], exports: [InputComponent, TextFieldComponent, FormGroupTitleComponent, ColorInputComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: InputModule, imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule, NumberPipeModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: InputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [InputComponent, TextFieldComponent, FormGroupTitleComponent, ColorInputComponent],
-                    exports: [InputComponent, TextFieldComponent, FormGroupTitleComponent, ColorInputComponent],
-                    imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule, NumberPipeModule],
-                }]
-        }] });
 
-class ClickOutsideDirective {
+const DATE_PICKER_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DatePickerComponent),
+    multi: true,
+};
+class DatePickerComponent extends BasePicker {
     _elementRef;
-    _ngZone;
-    clickOutside = new EventEmitter();
-    rightClick = false;
-    _handleEvents = false;
-    set tetaClickOutside(val) {
-        this._handleEvents = val;
-        if (this._handleEvents) {
-            this._ngZone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    this.addListener(this.rightClick);
-                });
-            });
+    _cdr;
+    datePipe;
+    date = null;
+    locale = 'ru';
+    showTime = false;
+    minDate = null;
+    maxDate = null;
+    invalid = false;
+    disabled = false;
+    align = Align.left;
+    verticalAlign = VerticalAlign.auto;
+    viewType = 'rounded';
+    appendToBody;
+    backdrop = false;
+    allowNull = true;
+    firstDayOfWeek = 1;
+    disabledDates;
+    disabledPeriods;
+    disabledDays;
+    minYearDate;
+    maxYearDate;
+    input;
+    selectDate = new EventEmitter();
+    selectedDate = new ReplaySubject(1);
+    mask = '';
+    classDatepicker = true;
+    tabindex = 0;
+    constructor(_elementRef, _cdr, datePipe) {
+        super(_elementRef, _cdr, datePipe);
+        this._elementRef = _elementRef;
+        this._cdr = _cdr;
+        this.datePipe = datePipe;
+    }
+    ngOnInit() {
+        if (!this.date) {
+            this.setDate(this.allowNull ? null : new Date());
+            this.date = this.allowNull ? null : new Date();
         }
         else {
-            this.removeListener();
+            this.setDate(new Date(this.date));
+        }
+        this.prepareInput();
+    }
+    prepareInput() {
+        const str = this.date ? this.getLocaleString(this.date) : '';
+        let option;
+        const setMinMax = () => {
+            if (this.minDate) {
+                option.min = dayjs(new Date(this.minDate)).startOf('day');
+            }
+            if (this.maxDate) {
+                option.max = dayjs(new Date(this.maxDate)).endOf('day');
+            }
+        };
+        if (this.showTime) {
+            this.mask = 'dd.mm.yyyy, hh:mm';
+            option = {
+                dateMode: 'dd/mm/yyyy',
+                timeMode: 'HH:MM',
+                dateSeparator: '.',
+            };
+            setMinMax();
+            this.maskitoOptions = maskitoDateTimeOptionsGenerator(option);
+        }
+        else {
+            this.mask = 'dd.mm.yyyy';
+            option = {
+                mode: 'dd/mm/yyyy',
+                separator: '.',
+            };
+            setMinMax();
+            this.maskitoOptions = maskitoDateOptionsGenerator(option);
+        }
+        this.changePlaceholder(str);
+    }
+    onBlur() {
+        if (this.allowNull && this.inputText.trim() === '') {
+            this.setDate(null);
+            this.emitValue(null);
+        }
+        else {
+            const val = this.inputText.split(',');
+            const { day, year, month } = this.getDateFromStr(val[0]);
+            const { mins, hours } = this.getTimeFromStr(val[1]);
+            if (day && year && month) {
+                let date = new Date(year, month - 1, day);
+                if (this.showTime) {
+                    date = new Date(date.setHours(hours || 0, mins || 0));
+                }
+                this.changeSelectedDate(this.getAvailableDate(this.minDate, this.maxDate, date));
+            }
+            else {
+                this.setDate(this.date);
+            }
         }
     }
-    get tetaClickOutside() {
-        return this._handleEvents;
-    }
-    constructor(_elementRef, _ngZone) {
-        this._elementRef = _elementRef;
-        this._ngZone = _ngZone;
-    }
-    ngOnDestroy() {
-        this.removeListener();
-    }
-    addListener(handleRightClick) {
-        window.addEventListener('click', this.listener);
-        if (handleRightClick) {
-            window.addEventListener('contextmenu', this.listener);
+    setDate(date) {
+        if (!date && this.allowNull) {
+            this.inputText = '';
+            this.changePlaceholder('');
+            this.selectedDate.next(new Date(this.minDate || new Date()));
+        }
+        else {
+            this.inputText = this.getLocaleString(date);
+            this.changePlaceholder(this.getLocaleString(date));
+            this.selectedDate.next(date);
         }
     }
-    removeListener() {
-        window.removeEventListener('click', this.listener);
-        window.removeEventListener('contextmenu', this.listener);
+    onChange(date) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    listener = (click) => {
-        if (!this._handleEvents) {
-            return;
+    registerOnTouched(fn) { }
+    writeValue(obj) {
+        if (obj) {
+            this.date = new Date(obj);
+            this.setDate(new Date(this.date));
         }
-        const clickedInside = DomUtil.clickedInside(this._elementRef.nativeElement, click);
-        if (!clickedInside) {
-            this.clickOutside.emit(click);
+        else {
+            if (this.allowNull) {
+                this.date = null;
+                this.selectedDate.next(null);
+            }
+            else {
+                this.date = this.minDate || new Date();
+                this.selectedDate.next(this.minDate || new Date());
+            }
         }
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: ClickOutsideDirective, selector: "[tetaClickOutside]", inputs: { rightClick: "rightClick", tetaClickOutside: "tetaClickOutside" }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
+    }
+    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 }], 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", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: 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          <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='top:-0.3px;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    <!--    <ng-container *ngIf='open'>-->\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    <!--    </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: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaClickOutside]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { clickOutside: [{
-                type: Output
-            }], rightClick: [{
+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          <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='top:-0.3px;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    <!--    <ng-container *ngIf='open'>-->\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    <!--    </ng-container>-->\n  </div>\n</teta-dropdown>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatePipe }]; }, propDecorators: { date: [{
                 type: Input
-            }], tetaClickOutside: [{
+            }], locale: [{
+                type: Input
+            }], showTime: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], verticalAlign: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], appendToBody: [{
+                type: Input
+            }], backdrop: [{
+                type: Input
+            }], allowNull: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], disabledPeriods: [{
                 type: Input
+            }], disabledDays: [{
+                type: Input
+            }], minYearDate: [{
+                type: Input
+            }], maxYearDate: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], selectDate: [{
+                type: Output
+            }], classDatepicker: [{
+                type: HostBinding,
+                args: ['class.datepicker']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['tabindex']
             }] } });
 
-class ClickOutsideModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideModule, declarations: [ClickOutsideDirective], imports: [CommonModule], exports: [ClickOutsideDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ClickOutsideModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ClickOutsideDirective],
-                    exports: [ClickOutsideDirective],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
 class RangeCalendarComponent extends BaseCalendar {
     _cdr;
     locale;
@@ -3146,7 +3202,7 @@ class RangeCalendarComponent extends BaseCalendar {
         this._cdr = _cdr;
         dayjs().locale('ru', { weekStart: 1 });
         combineLatest([this.currentYear, this.currentMonth, this.minMax])
-            .pipe(takeWhile(() => this.alive), shareReplay({ bufferSize: 1, refCount: false }), filter(([currentYear, currentMonth]) => currentMonth !== null && currentYear !== null), map$1(([year, month, 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),
@@ -3439,64 +3495,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 type: Output
             }] } });
 
-class ScrollIntoViewDirective {
-    platformId;
-    elementRef;
-    tetaScrollIntoView;
-    behavior = 'smooth';
-    block = 'end';
-    constructor(platformId, elementRef) {
-        this.platformId = platformId;
-        this.elementRef = elementRef;
-    }
-    ngOnChanges(simpleChange) {
-        if (isPlatformBrowser(this.platformId)) {
-            if (coerceBooleanProperty(this.tetaScrollIntoView)) {
-                this.elementRef.nativeElement.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start'
-                });
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: ScrollIntoViewDirective, selector: "[tetaScrollIntoView]", inputs: { tetaScrollIntoView: "tetaScrollIntoView", behavior: "behavior", block: "block" }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaScrollIntoView]'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { tetaScrollIntoView: [{
-                type: Input
-            }], behavior: [{
-                type: Input
-            }], block: [{
-                type: Input
-            }] } });
-
-class ScrollIntoViewModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewModule, declarations: [ScrollIntoViewDirective], imports: [CommonModule], exports: [ScrollIntoViewDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollIntoViewModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ScrollIntoViewDirective
-                    ], exports: [
-                        ScrollIntoViewDirective
-                    ],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
 class DatePickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: DatePickerModule, declarations: [DateCalendarComponent,
@@ -3510,12 +3508,27 @@ class DatePickerModule {
             ScrollToSelectedYearDirective,
             DateRangeComponent], imports: [CommonModule,
             DropdownModule,
-            ButtonModule, FormsModule, MaskitoModule,
-            IconModule, InputModule, ScrollIntoViewModule, ClickOutsideModule, ReactiveFormsModule], exports: [DatePickerComponent, DateCalendarComponent, RangeCalendarComponent, DateRangeComponent] });
+            ButtonModule,
+            FormsModule,
+            MaskitoModule,
+            IconModule,
+            InputModule,
+            ScrollIntoViewModule,
+            ClickOutsideModule,
+            ReactiveFormsModule], exports: [DatePickerComponent,
+            DateCalendarComponent,
+            RangeCalendarComponent,
+            DateRangeComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DatePickerModule, imports: [CommonModule,
             DropdownModule,
-            ButtonModule, FormsModule, MaskitoModule,
-            IconModule, InputModule, ScrollIntoViewModule, ClickOutsideModule, ReactiveFormsModule] });
+            ButtonModule,
+            FormsModule,
+            MaskitoModule,
+            IconModule,
+            InputModule,
+            ScrollIntoViewModule,
+            ClickOutsideModule,
+            ReactiveFormsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
@@ -3530,15 +3543,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                         ScrollToSelectedYearDirective,
                         YearPickerComponent,
                         ScrollToSelectedYearDirective,
-                        DateRangeComponent
+                        DateRangeComponent,
                     ],
                     imports: [
                         CommonModule,
                         DropdownModule,
-                        ButtonModule, FormsModule, MaskitoModule,
-                        IconModule, InputModule, ScrollIntoViewModule, ClickOutsideModule, ReactiveFormsModule,
+                        ButtonModule,
+                        FormsModule,
+                        MaskitoModule,
+                        IconModule,
+                        InputModule,
+                        ScrollIntoViewModule,
+                        ClickOutsideModule,
+                        ReactiveFormsModule,
+                    ],
+                    exports: [
+                        DatePickerComponent,
+                        DateCalendarComponent,
+                        RangeCalendarComponent,
+                        DateRangeComponent,
                     ],
-                    exports: [DatePickerComponent, DateCalendarComponent, RangeCalendarComponent, DateRangeComponent]
                 }]
         }] });
 
@@ -4449,7 +4473,7 @@ class ScrollableComponent {
             this._container = this._scrollDirective;
         }
         fromEvent(this._container.nativeElement, 'scroll')
-            .pipe(takeWhile$1(() => this._alive), tap((event) => {
+            .pipe(takeWhile(() => this._alive), tap((event) => {
             this._scrollbarHorizontal.nativeElement.scrollLeft = event.target.scrollLeft;
             this._scrollbarVertical.nativeElement.scrollTop = event.target.scrollTop;
             // this._elementRef.nativeElement.dispatchEvent(event);
@@ -5129,7 +5153,7 @@ class FilterHostComponent {
         this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
         this._init = true;
         this._componentRef.instance.filterChanged
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((filter) => {
             this.filterChanged.emit(filter);
         });
@@ -6128,7 +6152,7 @@ class MessageHostComponent {
     }
     ngOnInit() {
         this._svc.message
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((messages) => {
             if (messages) {
                 if (!this.messages) {
@@ -6139,7 +6163,7 @@ class MessageHostComponent {
             this._cdr.markForCheck();
         });
         this._svc.clear
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((x) => {
             if (!x) {
                 this.messages = [];
@@ -7185,7 +7209,7 @@ class PropertyGridItemComponent {
             this.formGroup.registerControl(this.column.name, FormsUtil.initControlFromColumn(this.column, this.item));
             this._formSub?.unsubscribe();
             this._formSub = this.formGroup?.controls[this.column.name]?.valueChanges
-                .pipe(takeWhile$1(() => this._alive))
+                .pipe(takeWhile(() => this._alive))
                 .subscribe((_) => {
                 this.controlValueChange.emit({
                     id: _,
@@ -7556,7 +7580,7 @@ class SwitchComponent {
         this.svc = svc;
         this.cdr = cdr;
         this.svc.value
-            .pipe(takeWhile$1((_) => this._alive), filter$1((_) => _ !== this._value))
+            .pipe(takeWhile((_) => this._alive), filter((_) => _ !== this._value))
             .subscribe((_) => {
             this.onChange(_);
             this._value = _;
@@ -7616,7 +7640,7 @@ class SwitchButtonComponent {
     constructor(svc, cdr) {
         this.svc = svc;
         this.cdr = cdr;
-        this.svc.value.pipe(takeWhile$1((_) => this._alive)).subscribe((_) => {
+        this.svc.value.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
             this.svcValue = _;
             this.cdr.markForCheck();
         });
@@ -9804,7 +9828,7 @@ class TreeItemComponent {
     }
     ngOnInit() {
         this.service.openItems
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((_) => {
             const found = _?.find((x) => this.service.compareItems(x) ===
                 this.service.compareItems(this.item));
@@ -9894,7 +9918,7 @@ class TreeComponent {
         this._cdr = _cdr;
         this._zone = _zone;
         this._service.openItems
-            .pipe(takeWhile$1((_) => this._alive), filter$1((_) => this._openItems !== _))
+            .pipe(takeWhile((_) => this._alive), filter((_) => this._openItems !== _))
             .subscribe((_) => {
             this._openItems = _;
             this.displayData = this.getDisplayData(this._data, 0);
@@ -9923,7 +9947,7 @@ class TreeComponent {
         this.removeResizeObserver();
     }
     ngAfterViewInit() {
-        this._service.scrollToIndex.pipe(takeWhile$1(() => this._alive)).subscribe((index) => {
+        this._service.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
             this._zone.runOutsideAngular(() => {
                 setTimeout(() => {
                     this.viewport?.scrollToIndex(index, 'smooth');
@@ -10056,7 +10080,7 @@ class VisibilityDropdownTabComponent {
         this._cdr = _cdr;
         this.locale = this._config.locale;
         this._svc.hiddenColumns
-            .pipe(takeWhile$1((_) => this._alive), map((_) => [..._]))
+            .pipe(takeWhile((_) => this._alive), map((_) => [..._]))
             .subscribe((_) => {
             this.hiddenColumns = _;
         });
@@ -10385,7 +10409,7 @@ class TableHeadGroupComponent {
         this._svc = _svc;
         this._cdr = _cdr;
         this._svc.hiddenColumns
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((_) => {
             this._hiddenColumns = _;
             this._cdr.markForCheck();
@@ -10444,7 +10468,7 @@ class SelectionHeadCellComponent {
     }
     ngOnInit() {
         this._svc.selectedRows
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((_) => {
             this._cdr.markForCheck();
         });
@@ -10499,7 +10523,7 @@ class TableHeadComponent {
     }
     ngOnInit() {
         combineLatest([this._svc.columns, this._svc.hiddenColumns])
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((values) => {
             const [columns, hiddenColumns] = values;
             this._hiddenColumns = hiddenColumns;
@@ -10510,11 +10534,11 @@ class TableHeadComponent {
             this.lockedWidth = locked.reduce((prev, curr) => prev + curr.width, startWidth);
             this._cdr.markForCheck();
         });
-        this._svc.state.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._svc.state.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             this.state = _;
             this._cdr.markForCheck();
         });
-        this._svc.displayData.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._svc.displayData.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             this.data = _.map(_ => _.data);
             this._cdr.markForCheck();
         });
@@ -10615,7 +10639,7 @@ class CellComponentBase {
     ngOnInit() {
         this.init();
         this.formGroup?.controls[this.column.name]?.valueChanges
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe(value => {
             this.formGroup.updateValueAndValidity();
             this.row.valid = this.formGroup?.valid;
@@ -10628,7 +10652,7 @@ class CellComponentBase {
     }
     init() {
         this.svc.editRowStart
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((cell) => {
             if (this.index === cell?.row && !this._edit) {
                 this.start(cell, 'row');
@@ -10638,7 +10662,7 @@ class CellComponentBase {
             }
         });
         this.svc.editCellStart
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((cell) => {
             if (this.index === cell?.row &&
                 this.column.name === cell?.column &&
@@ -10651,7 +10675,7 @@ class CellComponentBase {
             }
         });
         this.svc.valueSet
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((cellValue) => {
             if (this.index === cellValue.row &&
                 this.column.name === cellValue.column) {
@@ -11003,7 +11027,7 @@ class SelectionCellComponent {
     }
     ngOnInit() {
         this._svc.selectedRows
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((_) => {
             this.selectedRows = _;
             this._cdr.markForCheck();
@@ -11090,24 +11114,24 @@ class TableBodyComponent {
     ngOnInit() {
         this.locale = this._config.locale;
         combineLatest([this._svc.columns, this._svc.hiddenColumns])
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((values) => {
             const [columns, hiddenColumns] = values;
             this._hiddenColumns = hiddenColumns;
             this.columns = ArrayUtil.flatten(columns, 'columns', true).filter(_ => this._hiddenColumns.indexOf(_.name) < 0);
             this._cdr.markForCheck();
         });
-        this._svc.displayData.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._svc.displayData.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             this.data = _;
             this._cdr.markForCheck();
             this.viewport?.checkViewportSize();
         });
-        this._svc.dict.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._svc.dict.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             this.dict = _;
             this._cdr.markForCheck();
         });
         this._svc.scrollIndex
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe(async (index) => {
             if (this.viewport) {
                 this.viewport.scrollToIndex(index, 'auto');
@@ -11118,7 +11142,7 @@ class TableBodyComponent {
             }
             this._cdr.markForCheck();
         });
-        this._svc.activeRow.pipe(takeWhile$1(_ => this._alive)).subscribe(async (_) => {
+        this._svc.activeRow.pipe(takeWhile(_ => this._alive)).subscribe(async (_) => {
             this.activeRow = _;
             this._cdr.markForCheck();
         });
@@ -11288,34 +11312,34 @@ class TableComponent {
         this._svc = _svc;
         this._elementRef = _elementRef;
         this._svc.state
-            .pipe(takeWhile$1(() => this._alive), filter$1(state => state !== this._state))
+            .pipe(takeWhile(() => this._alive), filter(state => state !== this._state))
             .subscribe((state) => this.stateChange.next(state));
         this._svc.editCellStart
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => this.cellEditStart.emit(this._svc.getCellInstance(item)));
         this._svc.editCellStop
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => this.cellEditEnd.emit(this._svc.getCellInstance(item)));
         this._svc.editRowStart
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => this.rowEditStart.emit(this._svc.getCellInstance(item)));
         this._svc.editRowStop
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => this.rowEditEnd.emit(this._svc.getRowByIndex(item?.row)));
         this._svc.selectedRows
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((items) => {
             this.selectedRowsList = items;
             this.selectedRowsChange.emit(items);
         });
         this._svc.activeRow
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => {
             this.activeRow = item;
             this.activeRowChange.emit(item);
         });
         this._svc.valueChanged
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((coordinates) => {
             this.valueChange.emit(this._svc.getCellInstance(coordinates));
         });
@@ -11794,11 +11818,11 @@ 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' #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", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateTimeCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-time-cell', changeDetection: ChangeDetectionStrategy.OnPush, 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' #input\n                  *ngIf='edit'\n                  [appendToBody]='true'\n                  [showTime]='true'\n                  [formControl]='control'\n></teta-date-picker>\n" }]
+            args: [{ selector: 'teta-date-time-cell', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
@@ -12066,16 +12090,12 @@ class Chart3dService {
     minMax;
     data;
     scales;
-    minMax$ = new ReplaySubject(1);
     data$ = new ReplaySubject(1);
     constructor() {
         this.data = this.data$.asObservable();
-        this.minMax = this.minMax$.asObservable();
-        this.data
-            .pipe(tap$1(_ => {
-            this.minMax$.next(this.getAxesMinMax(_));
-        }))
-            .subscribe();
+        this.minMax = this.data.pipe(map$1(_ => {
+            return this.getAxesMinMax(_);
+        }));
         this.scales = this.minMax.pipe(map$1(minMax => {
             return this.getScales(minMax);
         }), shareReplay(1));
@@ -12253,18 +12273,18 @@ class Axes3dComponent {
         this.axes = combineLatest([
             this.chartService.scales,
             this.chartService.minMax,
-        ]).pipe(takeWhile(() => this._alive), map$1(([scales, minMax]) => {
+        ]).pipe(takeWhile$1(() => this._alive), map$1(([scales, minMax]) => {
             return this.createAxes(scales, minMax);
         }));
     }
     createAxes(scales, minMax) {
-        const axisZ = this.generateTicks(minMax.z, 12).map((_) => {
+        const axisZ = this.generateTicks(minMax.z, 12).map(_ => {
             return { value: _.toFixed(1), position: scales.z(_) };
         });
-        const axisY = this.generateTicks(minMax.y, 12).map((_) => {
+        const axisY = this.generateTicks(minMax.y, 12).map(_ => {
             return { value: _.toFixed(1), position: scales.y(_) };
         });
-        const axisX = this.generateTicks(minMax.x, 4).map((_) => {
+        const axisX = this.generateTicks(minMax.x, 4).map(_ => {
             return { value: _.toFixed(1), position: scales.x(_) };
         });
         return { z: axisZ, y: axisY, x: axisX };
@@ -12274,18 +12294,21 @@ class Axes3dComponent {
         const tickStep = (max - min) / count;
         const ticks = d3
             .range(min, max + tickStep, tickStep)
-            .filter((step) => step <= max);
+            .filter(step => step <= max);
         return ticks;
     }
+    trackBy(i) {
+        return i;
+    }
     ngOnDestroy() {
         this._alive = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index; trackBy: trackBy\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index; trackBy: trackBy\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n" }]
+            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index; trackBy: trackBy\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index; trackBy: trackBy\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { rotation: [{
                 type: Input
             }] } });
@@ -12301,7 +12324,7 @@ class Block3dComponent extends Base3dSeriesComponent {
         super(svc, ngtStore);
         this.svc = svc;
         this.ngtStore = ngtStore;
-        this.blocks = this.svc.scales.pipe(takeWhile(() => this._alive), map$1(scales => {
+        this.blocks = this.svc.scales.pipe(takeWhile$1(() => this._alive), map$1(scales => {
             return this.series?.data?.map(_ => {
                 return this.createSVGTexture(scales.y(_?.y), scales.y(_?.y1), _?.iconId);
             });
@@ -12367,7 +12390,7 @@ class Line3dComponent extends Base3dSeriesComponent {
         super(svc, ngtStore);
         this.svc = svc;
         this.ngtStore = ngtStore;
-        this.points = this.svc.scales.pipe(takeWhile(() => this._alive), map$1(scales => {
+        this.points = this.svc.scales.pipe(takeWhile$1(() => this._alive), map$1(scales => {
             return this.getPoints(scales);
         }));
     }
@@ -12455,7 +12478,7 @@ class SceneComponent {
         this.rotation = this.store.get('camera').rotation;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data.series\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n", dependencies: [{ kind: "component", type: NgtsOrbitControls, selector: "ngts-orbit-controls", inputs: ["controlsRef", "camera", "domElement", "makeDefault", "regress", "target", "enableDamping"], outputs: ["change", "start", "end"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: Area3dComponent, selector: "teta-area-3d" }, { kind: "component", type: Axes3dComponent, selector: "teta-axes-3d", inputs: ["rotation"] }, { kind: "component", type: Series3dHost, selector: "[teta-series-3d-host]", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data?.series;\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n", dependencies: [{ kind: "component", type: NgtsOrbitControls, selector: "ngts-orbit-controls", inputs: ["controlsRef", "camera", "domElement", "makeDefault", "regress", "target", "enableDamping"], outputs: ["change", "start", "end"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: Area3dComponent, selector: "teta-area-3d" }, { kind: "component", type: Axes3dComponent, selector: "teta-axes-3d", inputs: ["rotation"] }, { kind: "component", type: Series3dHost, selector: "[teta-series-3d-host]", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SceneComponent, decorators: [{
             type: Component,
@@ -12467,15 +12490,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                         Axes3dComponent,
                         Block3dComponent,
                         Series3dHost,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data.series\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data?.series;\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n" }]
         }], ctorParameters: function () { return []; } });
 
+class CanvasComponent {
+    scene;
+    camera;
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: CanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: CanvasComponent, isStandalone: true, selector: "teta-canvas", inputs: { scene: "scene", camera: "camera", data: "data" }, providers: [NgtStore], ngImport: i0, template: "<ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n            [camera]=\"camera\">\n</ngt-canvas>\n<ng-template #noData>\n  <p>{{data?.noDataText || 'no data'}}</p>\n</ng-template>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgtCanvas, selector: "ngt-canvas", inputs: ["sceneGraph", "sceneGraphInputs", "compoundPrefixes", "linear", "legacy", "flat", "orthographic", "frameloop", "dpr", "raycaster", "shadows", "camera", "gl", "eventSource", "eventPrefix", "lookAt", "performance"], outputs: ["created", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: CanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-canvas', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule], template: "<ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n            [camera]=\"camera\">\n</ngt-canvas>\n<ng-template #noData>\n  <p>{{data?.noDataText || 'no data'}}</p>\n</ng-template>\n", styles: [":host{width:100%;height:100%}\n"] }]
+        }], propDecorators: { scene: [{
+                type: Input
+            }], camera: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class Canvas3dHost {
+    viewContainerRef;
+    scene;
+    camera;
+    data;
+    _init = false;
+    _componentRef;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.createCanvas();
+        this._init = true;
+    }
+    ngOnChanges() {
+        if (this._init) {
+            this.createCanvas();
+            this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
+        }
+    }
+    createCanvas() {
+        this.viewContainerRef.clear();
+        this._componentRef = this.viewContainerRef.createComponent(CanvasComponent);
+        this._componentRef.instance.scene = this.scene;
+        this._componentRef.instance.camera = this.camera;
+        this._componentRef.instance.data = this.data;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Canvas3dHost, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Canvas3dHost, isStandalone: true, selector: "[teta-canvas-3d-host]", inputs: { scene: "scene", camera: "camera", data: "data" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Canvas3dHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[teta-canvas-3d-host]',
+                    template: '',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { scene: [{
+                type: Input
+            }], camera: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
 extend(THREE);
 class ThreeChartComponent {
     data;
     scene;
     camera;
     chartService = inject(Chart3dService);
+    store = inject(NgtStore);
+    cdr = inject(ChangeDetectorRef);
     ngOnInit() {
         this.scene = SceneComponent;
         this.camera = new OrthographicCamera(20, 20, 20, 20, 0.1, 1000);
@@ -12489,11 +12578,11 @@ class ThreeChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ThreeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ThreeChartComponent, isStandalone: true, selector: "teta-three-chart", inputs: { data: "data" }, providers: [NgtStore], usesOnChanges: true, ngImport: i0, template: "<div class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n              [camera]=\"camera\">\n  </ngt-canvas>\n  <ng-template #noData>\n    <p>{{data?.noDataText||'no data'}}</p>\n  </ng-template>\n</div>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgtCanvas, selector: "ngt-canvas", inputs: ["sceneGraph", "sceneGraphInputs", "compoundPrefixes", "linear", "legacy", "flat", "orthographic", "frameloop", "dpr", "raycaster", "shadows", "camera", "gl", "eventSource", "eventPrefix", "lookAt", "performance"], outputs: ["created", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ThreeChartComponent, isStandalone: true, selector: "teta-three-chart", inputs: { data: "data" }, providers: [NgtStore], usesOnChanges: true, ngImport: i0, template: "<div  class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <div teta-canvas-3d-host [camera]=\"camera\" [data]=\"data\" [scene]=\"scene\"></div>\n</div>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Canvas3dHost, selector: "[teta-canvas-3d-host]", inputs: ["scene", "camera", "data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ThreeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule], template: "<div class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n              [camera]=\"camera\">\n  </ngt-canvas>\n  <ng-template #noData>\n    <p>{{data?.noDataText||'no data'}}</p>\n  </ng-template>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
+            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule, CanvasComponent, Canvas3dHost], template: "<div  class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <div teta-canvas-3d-host [camera]=\"camera\" [data]=\"data\" [scene]=\"scene\"></div>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -12530,7 +12619,7 @@ class Chart3dComponent {
     }
     ngOnInit() {
         this._themeService.theme
-            .pipe(takeWhile$1((_) => this._alive), tap$1((_) => {
+            .pipe(takeWhile((_) => this._alive), tap$1((_) => {
             this.gridColor = _ ? '#5d6a73' : '#bdbdc6';
             this.axesColor = _ ? '#8e8f9d' : '#7d8f9a';
             this.init();
@@ -13001,7 +13090,7 @@ class AutoPositionDirective {
     }
     ngAfterViewInit() {
         this.setPosition();
-        this._zone.onStable.pipe(takeWhile$1(() => this._alive)).subscribe(() => {
+        this._zone.onStable.pipe(takeWhile(() => this._alive)).subscribe(() => {
             this.setPosition();
         });
     }
@@ -13165,7 +13254,7 @@ class DragDropService {
         this._renderer = this._rendererFactory.createRenderer(null, null);
         this.dropTarget = this.dropTarget$.asObservable();
         this.dropped = this.dropped$.asObservable();
-        merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'touchmove')).pipe(filter$1(() => {
+        merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'touchmove')).pipe(filter(() => {
             return this.startPosition != null;
         })).subscribe((event) => {
             if (!this.dragProcess && this.getDelta(event) > this._delta) {
@@ -13334,12 +13423,12 @@ class DragContainerDirective {
             previewTemplate: this._previewTemplate?.templateRef,
             viewContainer: this._viewContainerRef
         });
-        this._dragService.dropTarget.pipe(takeWhile$1(() => this._alive))
+        this._dragService.dropTarget.pipe(takeWhile(() => this._alive))
             .subscribe((target) => {
             this.dropTarget = target;
             this._cdr.detectChanges();
         });
-        this._dragService.dropped.pipe(takeWhile$1(() => this._alive))
+        this._dragService.dropped.pipe(takeWhile(() => this._alive))
             .subscribe((event) => {
             this.tetaDrop.emit(event);
         });
@@ -13455,7 +13544,7 @@ class DragDirective {
             data: this.data,
         });
         this._dragService.dropTarget
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe(target => {
             this.dropTarget = target;
             if (target === this.instance) {
@@ -13465,8 +13554,8 @@ class DragDirective {
             this._cdr.markForCheck();
         });
         this._dragService.dropped
-            .pipe(takeWhile$1(() => this._alive))
-            .pipe(filter$1((event) => {
+            .pipe(takeWhile(() => this._alive))
+            .pipe(filter((event) => {
             return event.target === this.instance;
         }))
             .subscribe(event => {
@@ -13800,7 +13889,7 @@ class LoaderDirective {
         this._document = _document;
         this._zone = _zone;
         this._element = this._elementRef.nativeElement;
-        this._zone.onStable.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._zone.onStable.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             if (this._loading && this._loader) {
                 this.setPosition();
             }
@@ -13907,7 +13996,7 @@ class TooltipDirective extends DynamicContentBaseDirective {
     }
     ngOnInit() {
         merge(this._click.click, this._click.contextMenu)
-            .pipe(takeWhile$1(() => this._alive), filter$1(() => this._open), filter$1(() => this._componentRef != null), filter$1((event) => !DomUtil.clickedInside(this._elementRef.nativeElement, event)), filter$1((event) => !DomUtil.clickedInside(this._componentRef?.location.nativeElement, event)), tap$1(_ => this.destroyContentRef()))
+            .pipe(takeWhile(() => this._alive), filter(() => this._open), filter(() => this._componentRef != null), filter((event) => !DomUtil.clickedInside(this._elementRef.nativeElement, event)), filter((event) => !DomUtil.clickedInside(this._componentRef?.location.nativeElement, event)), tap$1(_ => this.destroyContentRef()))
             .subscribe();
     }
     setPosition() {
@@ -14182,5 +14271,5 @@ const ruLocale = {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_FRAME, AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, Area3dComponent, ArrayUtil, AutoPositionDirective, AutoPositionModule, AutocompleteComponent, AutocompleteModule, AvatarComponent, AvatarModule, Axes3dComponent, Base3dSeriesComponent, Block3dComponent, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColorInputComponent, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, CustomSeriesComponent, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DATE_Range_CONTROL_VALUE_ACCESSOR, DateCalendarComponent, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerMode, DatePickerModule, DateRangeComponent, DateTimeCellComponent, DateUtil, DayModel, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DividerComponent, DividerModule, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropModule, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandCardModule, ExpandItemComponent, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, ExportType, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconFileComponent, IconFileModule, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, Line3dComponent, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridItemDescriptionDirective, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, RangeCalendarComponent, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, SceneComponent, ScrollIntoViewDirective, ScrollIntoViewModule, ScrollableComponent, ScrollableDirective, ScrollableModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, Series3dHost, Series3dType, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaDatePipe, TetaDatePipeModule, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ThreeChartComponent, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, WINDOW, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
+export { ANIMATION_FRAME, AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, Area3dComponent, ArrayUtil, AutoPositionDirective, AutoPositionModule, AutocompleteComponent, AutocompleteModule, AvatarComponent, AvatarModule, Axes3dComponent, Base3dSeriesComponent, Block3dComponent, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, Canvas3dHost, CanvasComponent, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColorInputComponent, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, CustomSeriesComponent, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DATE_Range_CONTROL_VALUE_ACCESSOR, DateCalendarComponent, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerMode, DatePickerModule, DateRangeComponent, DateTimeCellComponent, DateUtil, DayModel, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DividerComponent, DividerModule, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropModule, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandCardModule, ExpandItemComponent, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, ExportType, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconFileComponent, IconFileModule, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, Line3dComponent, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridItemDescriptionDirective, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, RangeCalendarComponent, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, SceneComponent, ScrollIntoViewDirective, ScrollIntoViewModule, ScrollableComponent, ScrollableDirective, ScrollableModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, Series3dHost, Series3dType, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaDatePipe, TetaDatePipeModule, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ThreeChartComponent, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, WINDOW, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
 //# sourceMappingURL=tetacom-ng-components.mjs.map