@tetacom/ng-components 1.6.17 → 1.6.19

package/README.md

@@ -1,7 +1,3 @@
 # components
 
 This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test components` to execute the unit tests.

package/component/date-picker/date-picker/date-picker.component.d.ts

@@ -46,7 +46,7 @@ export declare class DatePickerComponent extends BasePicker implements OnInit, C
     constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, datePipe: DatePipe, localeService: TetaConfigService);
     ngOnInit(): void;
     prepareInput(isFirstRender?: boolean): Promise<void>;
-    onBlur(): void;
+    onBlur(event?: FocusEvent): void;
     setDate(date: any): void;
     onChange(date: Date): void;
     registerOnChange(fn: (date: Date) => any): void;

package/fesm2022/tetacom-ng-components.mjs

@@ -2361,6 +2361,271 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     args: [DOCUMENT]
                 }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }] });
 
+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 DateUtil {
+    /**
+     * Вычесть n-дней
+     */
+    static subtractDays(date, days = 0) {
+        if (date && date instanceof Date) {
+            const dt = new Date(date.getTime());
+            dt.setDate(dt.getDate() - days);
+            return dt;
+        }
+        return null;
+    }
+    /**
+     * Добавить n-дней
+     */
+    static addDays(date, days = 0) {
+        if (date && date instanceof Date) {
+            const dt = new Date(date.getTime());
+            dt.setDate(dt.getDate() + days);
+            return dt;
+        }
+        return null;
+    }
+    /**
+     * Получить дату из строки
+     */
+    static parseString(dat) {
+        if (!dat || dat.length < 1) {
+            return null;
+        }
+        const parts = dat.split(' ');
+        const dtPart = parts[0].split('.');
+        const tPart = parts[1]?.split(':') ?? ['0', '0', '0'];
+        const parsedDate = new Date(parseInt(dtPart[2], 10), parseInt(dtPart[1], 10) - 1, parseInt(dtPart[0], 10), parseInt(tPart[0], 10), parseInt(tPart[1], 10), parseInt(tPart[2], 10));
+        if (isNaN(parsedDate.getTime())) {
+            return null;
+        }
+        return parsedDate;
+    }
+    /**
+     * Привести дату к строке
+     */
+    static toString(dat) {
+        if (!dat || !(dat instanceof Date)) {
+            return '';
+        }
+        const month = dat.getMonth() + 1;
+        return `${prependZero(dat.getDate(), 2)}.${prependZero(month, 2)}.${dat.getFullYear()} ${prependZero(dat.getHours(), 2)}:${prependZero(dat.getMinutes(), 2)}:${prependZero(dat.getSeconds(), 2)}`;
+    }
+    /**
+     * Привести дату к строке без часов и минут
+     */
+    static toShortString(dat) {
+        if (!dat || !(dat instanceof Date)) {
+            return '';
+        }
+        const month = dat.getMonth() + 1;
+        return `${prependZero(dat.getDate(), 2)}.${prependZero(month, 2)}.${dat.getFullYear()}`;
+    }
+    /**
+     * Подготовка даты к отправке на сервер, чтобы небыло смещения часов
+     */
+    static convertUTC2DateLocal(date) {
+        if (date && date instanceof Date) {
+            const timezoneOffsetMs = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTimezoneOffset() * 60000;
+            return new Date(date.getTime() - timezoneOffsetMs);
+        }
+        return null;
+    }
+    /**
+     * Подготовка даты к отправке на сервер, чтобы небыло смещения часов
+     */
+    static convertDateLocal2UTC(date) {
+        if (date && date instanceof Date) {
+            const timezoneOffsetMs = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTimezoneOffset() * 60000;
+            return date == null ? null : new Date(date.getTime() + timezoneOffsetMs);
+        }
+        return null;
+    }
+    static convertDateStringsToDates(input) {
+        const regexIso8601 = /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d+)?(([+-]\d\d:\d\d)|Z)?$/i;
+        if (typeof input === 'string' && regexIso8601.test(input)) {
+            return DateUtil.convertStringToLocalDate(input);
+        }
+        if (typeof input !== 'object' || !input) {
+            return input;
+        }
+        let res;
+        if (input instanceof Array) {
+            res = [];
+        }
+        else {
+            res = {};
+        }
+        return DateUtil.fillConvertDateStringsToDates(res, input);
+    }
+    static convertDates(input) {
+        if (typeof input !== 'object' || !input) {
+            return input;
+        }
+        if (input instanceof Date) {
+            return DateUtil.convertUTC2DateLocal(input);
+        }
+        let res;
+        if (input instanceof Array) {
+            res = [];
+        }
+        else {
+            res = {};
+        }
+        return DateUtil.fillConvertDates(res, input);
+    }
+    static getMonthDaysCount(date) {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    }
+    // Возвращает список месяцев между двумя датами
+    static getRangeOfMonths(start, end) {
+        if (start > end || !start || !end) {
+            return null;
+        }
+        const resDates = [];
+        let i = 0;
+        let dateTmp = new Date(start.getFullYear(), start.getMonth() + i, 1);
+        while (end >= dateTmp) {
+            resDates.push(dateTmp);
+            i++;
+            dateTmp = new Date(start.getFullYear(), start.getMonth() + i, 1);
+        }
+        return resDates;
+    }
+    static truncateToMonth(date) {
+        const res = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
+        return res;
+    }
+    static truncateToDay(date) {
+        const res = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
+        return res;
+    }
+    static truncateToHour(date) {
+        const res = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), 0, 0);
+        return res;
+    }
+    static toISOString(date) {
+        return new Date(date - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, -5) + 'Z';
+    }
+    static isValidDate(date) {
+        return date instanceof Date && !isNaN(date.getTime());
+    }
+    static millisecondToHumanFormat(milliSeconds, maxValue = 5000, showDays = false) {
+        const negative = milliSeconds < 0;
+        if (negative) {
+            milliSeconds = -milliSeconds;
+        }
+        let d;
+        if (showDays) {
+            d = Math.trunc(milliSeconds / (60000 * 60 * 24));
+            milliSeconds = milliSeconds - 60000 * 60 * 24 * d;
+        }
+        const h = Math.trunc(milliSeconds / (60000 * 60));
+        milliSeconds = milliSeconds - 60000 * 60 * h;
+        const m = Math.trunc(milliSeconds / 60000);
+        milliSeconds = milliSeconds - 60000 * m;
+        const s = Math.trunc(milliSeconds / 1000);
+        milliSeconds = milliSeconds - 1000 * s;
+        const frac = milliSeconds;
+        let result = m ? m + ' м ' : ''; // start with minutes
+        if (maxValue < 60000 * 60) {
+            if (s) {
+                result = result + s + ' с '; // add seconds value
+            }
+            if (s === 0 && !m) {
+                result = result + '0 c';
+            }
+        }
+        if (maxValue < 5000) {
+            result = frac ? result + frac + ' мс ' : result;
+        }
+        if (h) {
+            result = h + ' ч ' + result;
+        }
+        if (d) {
+            result = d + 'д ' + result;
+        }
+        if (negative) {
+            result = '-' + result;
+        }
+        return result.trim();
+    }
+    static fillConvertDates(result, input) {
+        for (const key in input) {
+            if (!input.hasOwnProperty || !input.hasOwnProperty(key)) {
+                continue;
+            }
+            if (input.hasOwnProperty(key)) {
+                let value = input[key];
+                if (value instanceof Date) {
+                    if (value !== null && value !== undefined) {
+                        value = DateUtil.convertUTC2DateLocal(value);
+                    }
+                    result[key] = value;
+                }
+                else if (typeof value === 'object') {
+                    result[key] = DateUtil.convertDates(value);
+                }
+                else {
+                    result[key] = value;
+                }
+            }
+        }
+        return result;
+    }
+    static fillConvertDateStringsToDates(result, input) {
+        const regexIso8601 = /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d+)?(([+-]\d\d:\d\d)|Z?)?$/i;
+        for (const key in input) {
+            if (!input.hasOwnProperty(key)) {
+                continue;
+            }
+            const value = input[key];
+            if (typeof value === 'string' && regexIso8601.test(value)) {
+                result[key] = DateUtil.convertStringToLocalDate(value);
+            }
+            else if (typeof value === 'object') {
+                result[key] = DateUtil.convertDateStringsToDates(value);
+            }
+            else {
+                result[key] = value;
+            }
+        }
+        return result;
+    }
+    static convertStringToLocalDate(dateString) {
+        const milliseconds = Date.parse(dateString);
+        if (!isNaN(milliseconds)) {
+            const dt = new Date(milliseconds);
+            return DateUtil.convertDateLocal2UTC(dt);
+        }
+        return null;
+    }
+}
+
 const DATE_PICKER_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => DatePickerComponent),
@@ -2439,7 +2704,10 @@ class DatePickerComponent extends BasePicker {
         }
         this.changePlaceholder(str);
     }
-    onBlur() {
+    onBlur(event) {
+        if (event?.target?.value === DateUtil.toShortString(this.date)) {
+            return;
+        }
         if (this.allowNull && this.inputText.trim() === '') {
             this.setDate(null);
             this.emitValue(null);
@@ -2527,7 +2795,7 @@ class DatePickerComponent extends BasePicker {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.DatePipe }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DatePickerComponent, isStandalone: true, selector: "teta-date-picker", inputs: { date: "date", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", open: "open", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minYearDate: "minYearDate", maxYearDate: "maxYearDate" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.datepicker": "this.classDatepicker", "class.datepicker-time": "this.dateTimeClass", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ({ selectedDate: selectedDate | async }; as data) {\n  <teta-dropdown\n    class=\"row row_auto\"\n    [appendToBody]=\"appendToBody\"\n    [backdrop]=\"backdrop\"\n    [open]=\"open\"\n    (openChange)=\"openChange($event)\"\n    [viewType]=\"viewType\"\n    [disabled]=\"disabled\"\n    [verticalAlign]=\"verticalAlign\"\n    [align]=\"align\"\n    [autoCloseIgnore]=\"['esc', 'inside', 'enter']\"\n  >\n    <div\n      tetaDropdownHead\n      [class]=\"'datepicker-head font-body-3 gap-8  datepicker_' + viewType\"\n      [ngClass]=\"{ 'datepicker-head_invalid': invalid, 'datepicker-head_disabled': disabled }\"\n    >\n      <teta-input class=\"row row_auto flex\">\n        <div [class]=\"'row_auto row datepicker_' + viewType\">\n          <div class=\"row row_auto position-relative font-body-3 align-center\">\n            <input\n              [ngClass]=\"{ 'color-text-90': !disabled }\"\n              [disabled]=\"disabled\"\n              #input\n              style=\"z-index: 1\"\n              class=\"row_auto border-0\"\n              (keydown)=\"checkEnter($event)\"\n              [(ngModel)]=\"inputText\"\n              (ngModelChange)=\"changeInput($event)\"\n              (blur)=\"onBlur()\"\n              [maskito]=\"maskitoOptions\"\n            />\n            @if (data.selectedDate || allowNull) {\n              <div\n                (click)=\"input.focus()\"\n                class=\"position-absolute color-text-10\"\n                style=\"cursor: text; user-select: none\"\n              >\n                {{ placeholder }}\n              </div>\n            }\n          </div>\n          <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n        </div>\n      </teta-input>\n    </div>\n    <div tetaDropdownContent (click)=\"$event.preventDefault()\">\n      <teta-date-calendar\n        [isDateNull]=\"data.selectedDate === null\"\n        [open]=\"open\"\n        [max]=\"maxDate\"\n        [min]=\"minDate\"\n        (setDate)=\"changeSelectedDate($event)\"\n        [selectedDate]=\"data.selectedDate\"\n        [viewType]=\"viewType\"\n        [locale]=\"locale | async\"\n      ></teta-date-calendar>\n    </div>\n  </teta-dropdown>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MaskitoModule }, { kind: "directive", type: i4.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i4.MaskitoCVA, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "open", "locale", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DatePickerComponent, isStandalone: true, selector: "teta-date-picker", inputs: { date: "date", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", open: "open", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minYearDate: "minYearDate", maxYearDate: "maxYearDate" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.datepicker": "this.classDatepicker", "class.datepicker-time": "this.dateTimeClass", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ({ selectedDate: selectedDate | async }; as data) {\n  <teta-dropdown\n    class=\"row row_auto\"\n    [appendToBody]=\"appendToBody\"\n    [backdrop]=\"backdrop\"\n    [open]=\"open\"\n    (openChange)=\"openChange($event)\"\n    [viewType]=\"viewType\"\n    [disabled]=\"disabled\"\n    [verticalAlign]=\"verticalAlign\"\n    [align]=\"align\"\n    [autoCloseIgnore]=\"['esc', 'inside', 'enter']\"\n  >\n    <div\n      tetaDropdownHead\n      [class]=\"'datepicker-head font-body-3 gap-8  datepicker_' + viewType\"\n      [ngClass]=\"{ 'datepicker-head_invalid': invalid, 'datepicker-head_disabled': disabled }\"\n    >\n      <teta-input class=\"row row_auto flex\">\n        <div [class]=\"'row_auto row datepicker_' + viewType\">\n          <div class=\"row row_auto position-relative font-body-3 align-center\">\n            <input\n              [ngClass]=\"{ 'color-text-90': !disabled }\"\n              [disabled]=\"disabled\"\n              #input\n              style=\"z-index: 1\"\n              class=\"row_auto border-0\"\n              (keydown)=\"checkEnter($event)\"\n              [(ngModel)]=\"inputText\"\n              (ngModelChange)=\"changeInput($event)\"\n              (blur)=\"onBlur($event)\"\n              [maskito]=\"maskitoOptions\"\n            />\n            @if (data.selectedDate || allowNull) {\n              <div\n                (click)=\"input.focus()\"\n                class=\"position-absolute color-text-10\"\n                style=\"cursor: text; user-select: none\"\n              >\n                {{ placeholder }}\n              </div>\n            }\n          </div>\n          <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n        </div>\n      </teta-input>\n    </div>\n    <div tetaDropdownContent (click)=\"$event.preventDefault()\">\n      <teta-date-calendar\n        [isDateNull]=\"data.selectedDate === null\"\n        [open]=\"open\"\n        [max]=\"maxDate\"\n        [min]=\"minDate\"\n        (setDate)=\"changeSelectedDate($event)\"\n        [selectedDate]=\"data.selectedDate\"\n        [viewType]=\"viewType\"\n        [locale]=\"locale | async\"\n      ></teta-date-calendar>\n    </div>\n  </teta-dropdown>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MaskitoModule }, { kind: "directive", type: i4.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i4.MaskitoCVA, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "open", "locale", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2542,7 +2810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         DropdownContentDirective,
                         DateCalendarComponent,
                         AsyncPipe,
-                    ], template: "@if ({ selectedDate: selectedDate | async }; as data) {\n  <teta-dropdown\n    class=\"row row_auto\"\n    [appendToBody]=\"appendToBody\"\n    [backdrop]=\"backdrop\"\n    [open]=\"open\"\n    (openChange)=\"openChange($event)\"\n    [viewType]=\"viewType\"\n    [disabled]=\"disabled\"\n    [verticalAlign]=\"verticalAlign\"\n    [align]=\"align\"\n    [autoCloseIgnore]=\"['esc', 'inside', 'enter']\"\n  >\n    <div\n      tetaDropdownHead\n      [class]=\"'datepicker-head font-body-3 gap-8  datepicker_' + viewType\"\n      [ngClass]=\"{ 'datepicker-head_invalid': invalid, 'datepicker-head_disabled': disabled }\"\n    >\n      <teta-input class=\"row row_auto flex\">\n        <div [class]=\"'row_auto row datepicker_' + viewType\">\n          <div class=\"row row_auto position-relative font-body-3 align-center\">\n            <input\n              [ngClass]=\"{ 'color-text-90': !disabled }\"\n              [disabled]=\"disabled\"\n              #input\n              style=\"z-index: 1\"\n              class=\"row_auto border-0\"\n              (keydown)=\"checkEnter($event)\"\n              [(ngModel)]=\"inputText\"\n              (ngModelChange)=\"changeInput($event)\"\n              (blur)=\"onBlur()\"\n              [maskito]=\"maskitoOptions\"\n            />\n            @if (data.selectedDate || allowNull) {\n              <div\n                (click)=\"input.focus()\"\n                class=\"position-absolute color-text-10\"\n                style=\"cursor: text; user-select: none\"\n              >\n                {{ placeholder }}\n              </div>\n            }\n          </div>\n          <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n        </div>\n      </teta-input>\n    </div>\n    <div tetaDropdownContent (click)=\"$event.preventDefault()\">\n      <teta-date-calendar\n        [isDateNull]=\"data.selectedDate === null\"\n        [open]=\"open\"\n        [max]=\"maxDate\"\n        [min]=\"minDate\"\n        (setDate)=\"changeSelectedDate($event)\"\n        [selectedDate]=\"data.selectedDate\"\n        [viewType]=\"viewType\"\n        [locale]=\"locale | async\"\n      ></teta-date-calendar>\n    </div>\n  </teta-dropdown>\n}\n" }]
+                    ], template: "@if ({ selectedDate: selectedDate | async }; as data) {\n  <teta-dropdown\n    class=\"row row_auto\"\n    [appendToBody]=\"appendToBody\"\n    [backdrop]=\"backdrop\"\n    [open]=\"open\"\n    (openChange)=\"openChange($event)\"\n    [viewType]=\"viewType\"\n    [disabled]=\"disabled\"\n    [verticalAlign]=\"verticalAlign\"\n    [align]=\"align\"\n    [autoCloseIgnore]=\"['esc', 'inside', 'enter']\"\n  >\n    <div\n      tetaDropdownHead\n      [class]=\"'datepicker-head font-body-3 gap-8  datepicker_' + viewType\"\n      [ngClass]=\"{ 'datepicker-head_invalid': invalid, 'datepicker-head_disabled': disabled }\"\n    >\n      <teta-input class=\"row row_auto flex\">\n        <div [class]=\"'row_auto row datepicker_' + viewType\">\n          <div class=\"row row_auto position-relative font-body-3 align-center\">\n            <input\n              [ngClass]=\"{ 'color-text-90': !disabled }\"\n              [disabled]=\"disabled\"\n              #input\n              style=\"z-index: 1\"\n              class=\"row_auto border-0\"\n              (keydown)=\"checkEnter($event)\"\n              [(ngModel)]=\"inputText\"\n              (ngModelChange)=\"changeInput($event)\"\n              (blur)=\"onBlur($event)\"\n              [maskito]=\"maskitoOptions\"\n            />\n            @if (data.selectedDate || allowNull) {\n              <div\n                (click)=\"input.focus()\"\n                class=\"position-absolute color-text-10\"\n                style=\"cursor: text; user-select: none\"\n              >\n                {{ placeholder }}\n              </div>\n            }\n          </div>\n          <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n        </div>\n      </teta-input>\n    </div>\n    <div tetaDropdownContent (click)=\"$event.preventDefault()\">\n      <teta-date-calendar\n        [isDateNull]=\"data.selectedDate === null\"\n        [open]=\"open\"\n        [max]=\"maxDate\"\n        [min]=\"minDate\"\n        (setDate)=\"changeSelectedDate($event)\"\n        [selectedDate]=\"data.selectedDate\"\n        [viewType]=\"viewType\"\n        [locale]=\"locale | async\"\n      ></teta-date-calendar>\n    </div>\n  </teta-dropdown>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.DatePipe }, { type: TetaConfigService }], propDecorators: { date: [{
                 type: Input
             }], showTime: [{
@@ -3771,31 +4039,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }] } });
 
-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 === '') {
@@ -6620,236 +6863,6 @@ var SelectType;
     SelectType[SelectType["mouse"] = 2] = "mouse";
 })(SelectType || (SelectType = {}));
 
-class DateUtil {
-    /**
-     * Вычесть n-дней
-     */
-    static subtractDays(date, days = 0) {
-        if (date && date instanceof Date) {
-            const dt = new Date(date.getTime());
-            dt.setDate(dt.getDate() - days);
-            return dt;
-        }
-        return null;
-    }
-    /**
-     * Добавить n-дней
-     */
-    static addDays(date, days = 0) {
-        if (date && date instanceof Date) {
-            const dt = new Date(date.getTime());
-            dt.setDate(dt.getDate() + days);
-            return dt;
-        }
-        return null;
-    }
-    /**
-     * Получить дату из строки
-     */
-    static parseString(dat) {
-        if (!dat || dat.length < 1) {
-            return null;
-        }
-        const parts = dat.split(' ');
-        const dtPart = parts[0].split('.');
-        const tPart = parts[1]?.split(':') ?? ['0', '0', '0'];
-        const parsedDate = new Date(parseInt(dtPart[2], 10), parseInt(dtPart[1], 10) - 1, parseInt(dtPart[0], 10), parseInt(tPart[0], 10), parseInt(tPart[1], 10), parseInt(tPart[2], 10));
-        if (isNaN(parsedDate.getTime())) {
-            return null;
-        }
-        return parsedDate;
-    }
-    /**
-     * Привести дату к строке
-     */
-    static toString(dat) {
-        if (!dat || !(dat instanceof Date)) {
-            return '';
-        }
-        const month = dat.getMonth() + 1;
-        return `${prependZero(dat.getDate(), 2)}.${prependZero(month, 2)}.${dat.getFullYear()} ${prependZero(dat.getHours(), 2)}:${prependZero(dat.getMinutes(), 2)}:${prependZero(dat.getSeconds(), 2)}`;
-    }
-    /**
-     * Подготовка даты к отправке на сервер, чтобы небыло смещения часов
-     */
-    static convertUTC2DateLocal(date) {
-        if (date && date instanceof Date) {
-            const timezoneOffsetMs = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTimezoneOffset() * 60000;
-            return new Date(date.getTime() - timezoneOffsetMs);
-        }
-        return null;
-    }
-    /**
-     * Подготовка даты к отправке на сервер, чтобы небыло смещения часов
-     */
-    static convertDateLocal2UTC(date) {
-        if (date && date instanceof Date) {
-            const timezoneOffsetMs = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTimezoneOffset() * 60000;
-            return date == null ? null : new Date(date.getTime() + timezoneOffsetMs);
-        }
-        return null;
-    }
-    static convertDateStringsToDates(input) {
-        const regexIso8601 = /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d+)?(([+-]\d\d:\d\d)|Z)?$/i;
-        if (typeof input === 'string' && regexIso8601.test(input)) {
-            return DateUtil.convertStringToLocalDate(input);
-        }
-        if (typeof input !== 'object' || !input) {
-            return input;
-        }
-        let res;
-        if (input instanceof Array) {
-            res = [];
-        }
-        else {
-            res = {};
-        }
-        return DateUtil.fillConvertDateStringsToDates(res, input);
-    }
-    static convertDates(input) {
-        if (typeof input !== 'object' || !input) {
-            return input;
-        }
-        if (input instanceof Date) {
-            return DateUtil.convertUTC2DateLocal(input);
-        }
-        let res;
-        if (input instanceof Array) {
-            res = [];
-        }
-        else {
-            res = {};
-        }
-        return DateUtil.fillConvertDates(res, input);
-    }
-    static getMonthDaysCount(date) {
-        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
-    }
-    // Возвращает список месяцев между двумя датами
-    static getRangeOfMonths(start, end) {
-        if (start > end || !start || !end) {
-            return null;
-        }
-        const resDates = [];
-        let i = 0;
-        let dateTmp = new Date(start.getFullYear(), start.getMonth() + i, 1);
-        while (end >= dateTmp) {
-            resDates.push(dateTmp);
-            i++;
-            dateTmp = new Date(start.getFullYear(), start.getMonth() + i, 1);
-        }
-        return resDates;
-    }
-    static truncateToMonth(date) {
-        const res = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
-        return res;
-    }
-    static truncateToDay(date) {
-        const res = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
-        return res;
-    }
-    static truncateToHour(date) {
-        const res = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), 0, 0);
-        return res;
-    }
-    static toISOString(date) {
-        return new Date(date - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, -5) + 'Z';
-    }
-    static isValidDate(date) {
-        return date instanceof Date && !isNaN(date.getTime());
-    }
-    static millisecondToHumanFormat(milliSeconds, maxValue = 5000, showDays = false) {
-        const negative = milliSeconds < 0;
-        if (negative) {
-            milliSeconds = -milliSeconds;
-        }
-        let d;
-        if (showDays) {
-            d = Math.trunc(milliSeconds / (60000 * 60 * 24));
-            milliSeconds = milliSeconds - 60000 * 60 * 24 * d;
-        }
-        const h = Math.trunc(milliSeconds / (60000 * 60));
-        milliSeconds = milliSeconds - 60000 * 60 * h;
-        const m = Math.trunc(milliSeconds / 60000);
-        milliSeconds = milliSeconds - 60000 * m;
-        const s = Math.trunc(milliSeconds / 1000);
-        milliSeconds = milliSeconds - 1000 * s;
-        const frac = milliSeconds;
-        let result = m ? m + ' м ' : ''; // start with minutes
-        if (maxValue < 60000 * 60) {
-            if (s) {
-                result = result + s + ' с '; // add seconds value
-            }
-            if (s === 0 && !m) {
-                result = result + '0 c';
-            }
-        }
-        if (maxValue < 5000) {
-            result = frac ? result + frac + ' мс ' : result;
-        }
-        if (h) {
-            result = h + ' ч ' + result;
-        }
-        if (d) {
-            result = d + 'д ' + result;
-        }
-        if (negative) {
-            result = '-' + result;
-        }
-        return result.trim();
-    }
-    static fillConvertDates(result, input) {
-        for (const key in input) {
-            if (!input.hasOwnProperty || !input.hasOwnProperty(key)) {
-                continue;
-            }
-            if (input.hasOwnProperty(key)) {
-                let value = input[key];
-                if (value instanceof Date) {
-                    if (value !== null && value !== undefined) {
-                        value = DateUtil.convertUTC2DateLocal(value);
-                    }
-                    result[key] = value;
-                }
-                else if (typeof value === 'object') {
-                    result[key] = DateUtil.convertDates(value);
-                }
-                else {
-                    result[key] = value;
-                }
-            }
-        }
-        return result;
-    }
-    static fillConvertDateStringsToDates(result, input) {
-        const regexIso8601 = /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d+)?(([+-]\d\d:\d\d)|Z?)?$/i;
-        for (const key in input) {
-            if (!input.hasOwnProperty(key)) {
-                continue;
-            }
-            const value = input[key];
-            if (typeof value === 'string' && regexIso8601.test(value)) {
-                result[key] = DateUtil.convertStringToLocalDate(value);
-            }
-            else if (typeof value === 'object') {
-                result[key] = DateUtil.convertDateStringsToDates(value);
-            }
-            else {
-                result[key] = value;
-            }
-        }
-        return result;
-    }
-    static convertStringToLocalDate(dateString) {
-        const milliseconds = Date.parse(dateString);
-        if (!isNaN(milliseconds)) {
-            const dt = new Date(milliseconds);
-            return DateUtil.convertDateLocal2UTC(dt);
-        }
-        return null;
-    }
-}
-
 class ColumnReorderEvent {
     constructor(source, target) {
         this.source = source;
@@ -8080,11 +8093,11 @@ class ColorCellComponent extends CellComponentBase {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColorCellComponent, isStandalone: true, selector: "teta-color-cell", host: { listeners: { "focus": "focus($event)", "focusin": "focus($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n  type=\"color\"\n  #input\n  [name]=\"column.name\"\n  [disabled]=\"!editable\"\n  (blur)=\"setValue()\"\n  [ngModel]=\"getHexColor(row.data[column.name])\"\n  (ngModelChange)=\"row.data[column.name] = $event\" />\n", styles: [":host{display:flex;align-items:center;justify-content:center}input[type=color]{height:16px;width:16px;padding:0;border:0}input[type=color]::-webkit-color-swatch,input[type=color]::-webkit-color-swatch-wrapper{border:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColorCellComponent, isStandalone: true, selector: "teta-color-cell", host: { listeners: { "focus": "focus($event)", "focusin": "focus($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n  type=\"color\"\n  #input\n  [name]=\"column.name\"\n  [disabled]=\"!editable\"\n  (blur)=\"setValue()\"\n  [ngModel]=\"getHexColor(row.data[column.name])\"\n  (ngModelChange)=\"row.data[column.name] = $event\" />\n", styles: [":host{display:flex;align-items:center;justify-content:center}input[type=color]{height:16px;width:16px;padding:0;border:0;&::-webkit-color-swatch,&::-webkit-color-swatch-wrapper{border:0;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-color-cell', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"color\"\n  #input\n  [name]=\"column.name\"\n  [disabled]=\"!editable\"\n  (blur)=\"setValue()\"\n  [ngModel]=\"getHexColor(row.data[column.name])\"\n  (ngModelChange)=\"row.data[column.name] = $event\" />\n", styles: [":host{display:flex;align-items:center;justify-content:center}input[type=color]{height:16px;width:16px;padding:0;border:0}input[type=color]::-webkit-color-swatch,input[type=color]::-webkit-color-swatch-wrapper{border:0;padding:0}\n"] }]
+            args: [{ selector: 'teta-color-cell', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"color\"\n  #input\n  [name]=\"column.name\"\n  [disabled]=\"!editable\"\n  (blur)=\"setValue()\"\n  [ngModel]=\"getHexColor(row.data[column.name])\"\n  (ngModelChange)=\"row.data[column.name] = $event\" />\n", styles: [":host{display:flex;align-items:center;justify-content:center}input[type=color]{height:16px;width:16px;padding:0;border:0;&::-webkit-color-swatch,&::-webkit-color-swatch-wrapper{border:0;padding:0}}\n"] }]
         }], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
@@ -11476,7 +11489,7 @@ class LoaderDirective {
             this._renderer.removeChild(this._loader.parentElement, this._loader);
         }
         if (this._mask && this._mask.parentElement) {
-            this._renderer.removeChild(this._loader.parentElement, this._mask);
+            this._renderer.removeChild(this._mask.parentElement, this._mask);
         }
     }
     setPosition() {