@tetacom/ng-components 1.1.35 → 1.1.37

package/fesm2022/tetacom-ng-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 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, ViewEncapsulation, ChangeDetectorRef, ViewContainerRef, ContentChildren, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf, InjectionToken } 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, ViewContainerRef, ViewEncapsulation, ChangeDetectorRef, ContentChildren, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
@@ -12,7 +12,7 @@ import { MaskitoModule } from '@maskito/angular';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { trigger, transition, style, animate } from '@angular/animations';
 import dayjs from 'dayjs';
-import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, lastValueFrom, take, shareReplay, fromEvent, tap, Subject, merge, Observable, pipe, share } from 'rxjs';
+import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, lastValueFrom, take, shareReplay, Subject, animationFrameScheduler, fromEvent, tap, merge, Observable, pipe, share } from 'rxjs';
 import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import * as i1$2 from '@ngneat/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
@@ -4373,8 +4373,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 args: ['class.scrollable_hide_scroll']
             }] } });
 
+class LetDirective {
+    tetaLet;
+    constructor(viewContainer, templateRef) {
+        viewContainer.createEmbeddedView(templateRef, new LetContext(this));
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: LetDirective, selector: "[tetaLet]", inputs: { tetaLet: "tetaLet" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaLet]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef, decorators: [{
+                    type: Inject,
+                    args: [ViewContainerRef]
+                }] }, { type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }]; }, propDecorators: { tetaLet: [{
+                type: Input
+            }] } });
+class LetContext {
+    internalDirectiveInstance;
+    constructor(internalDirectiveInstance) {
+        this.internalDirectiveInstance = internalDirectiveInstance;
+    }
+    get $implicit() {
+        return this.internalDirectiveInstance.tetaLet;
+    }
+    get tetaLet() {
+        return this.internalDirectiveInstance.tetaLet;
+    }
+}
+
 class ScrollableComponent {
-    _cdr;
     _scrollDirective;
     _scrollableWrapper;
     _scrollbarVertical;
@@ -4383,22 +4420,27 @@ class ScrollableComponent {
     showScrollbars = false;
     contentClass;
     scroll = new EventEmitter();
+    _scrollSize = new Subject();
     scrollSize;
     _container;
     _alive = true;
     _observer;
-    constructor(_cdr) {
-        this._cdr = _cdr;
+    constructor() {
+        this.scrollSize = this._scrollSize.asObservable().pipe(throttleTime(100, animationFrameScheduler), map(() => {
+            return {
+                scrollHeight: this._container.nativeElement.scrollHeight,
+                scrollWidth: this._container.nativeElement.scrollWidth,
+                clientHeight: this._container.nativeElement.clientHeight,
+                clientWidth: this._container.nativeElement.clientWidth,
+            };
+        }), shareReplay({
+            refCount: true,
+            bufferSize: 1,
+        }));
         this._observer = new ResizeObserver(this._observe);
     }
     _observe = () => {
-        this.scrollSize = {
-            scrollHeight: this._container.nativeElement.scrollHeight,
-            scrollWidth: this._container.nativeElement.scrollWidth,
-            clientHeight: this._container.nativeElement.clientHeight,
-            clientWidth: this._container.nativeElement.clientWidth,
-        };
-        this._cdr.detectChanges();
+        this._scrollSize.next();
     };
     scrollVertical(event) {
         this._container.nativeElement.scrollTop = event.target.scrollTop;
@@ -4427,13 +4469,16 @@ class ScrollableComponent {
         this._observer.unobserve(this._container.nativeElement);
         this._observer.disconnect();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ScrollableComponent, selector: "teta-scrollable", inputs: { direction: "direction", showScrollbars: "showScrollbars", contentClass: "contentClass" }, outputs: { scroll: "scroll" }, host: { properties: { "class.show-scrollbars": "this.showScrollbars" } }, queries: [{ propertyName: "_scrollDirective", first: true, predicate: ScrollableDirective, descendants: true, read: ElementRef, static: true }], viewQueries: [{ propertyName: "_scrollableWrapper", first: true, predicate: ["scrollableWrapper"], descendants: true, static: true }, { propertyName: "_scrollbarVertical", first: true, predicate: ["scrollbarVertical"], descendants: true, static: true }, { propertyName: "_scrollbarHorizontal", first: true, predicate: ["scrollbarHorizontal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"scroll-controls\">\n  <div #scrollbarVertical\n       [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n       class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n       (scroll)=\"scrollVertical($event)\">\n    <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px;\"></div>\n  </div>\n  <div #scrollbarHorizontal\n       [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n       class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n       (scroll)=\"scrollHorizontal($event)\">\n    <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px;\"></div>\n  </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!--  <div class=\"scroll-content\"-->\n<!--       [class.column]=\"direction === 'column'\">-->\n<!--    &lt;!&ndash;  <div class=\"scroll-content\">&ndash;&gt;-->\n<!--    <ng-content></ng-content>-->\n<!--  </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n     [ngClass]=\"contentClass\"\n     [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ngAfterContentChecked() {
+        this._observe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ScrollableComponent, selector: "teta-scrollable", inputs: { direction: "direction", showScrollbars: "showScrollbars", contentClass: "contentClass" }, outputs: { scroll: "scroll" }, host: { properties: { "class.show-scrollbars": "this.showScrollbars" } }, queries: [{ propertyName: "_scrollDirective", first: true, predicate: ScrollableDirective, descendants: true, read: ElementRef, static: true }], viewQueries: [{ propertyName: "_scrollableWrapper", first: true, predicate: ["scrollableWrapper"], descendants: true, static: true }, { propertyName: "_scrollbarVertical", first: true, predicate: ["scrollbarVertical"], descendants: true, static: true }, { propertyName: "_scrollbarHorizontal", first: true, predicate: ["scrollbarHorizontal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"scroll-controls\" *tetaLet='scrollSize | async as scrollSize'>\n  <div #scrollbarVertical\n       [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n       class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n       (scroll)=\"scrollVertical($event)\">\n    <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px;\"></div>\n  </div>\n  <div #scrollbarHorizontal\n       [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n       class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n       (scroll)=\"scrollHorizontal($event)\">\n    <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px;\"></div>\n  </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!--  <div class=\"scroll-content\"-->\n<!--       [class.column]=\"direction === 'column'\">-->\n<!--    &lt;!&ndash;  <div class=\"scroll-content\">&ndash;&gt;-->\n<!--    <ng-content></ng-content>-->\n<!--  </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n     [ngClass]=\"contentClass\"\n     [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroll-controls\">\n  <div #scrollbarVertical\n       [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n       class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n       (scroll)=\"scrollVertical($event)\">\n    <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px;\"></div>\n  </div>\n  <div #scrollbarHorizontal\n       [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n       class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n       (scroll)=\"scrollHorizontal($event)\">\n    <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px;\"></div>\n  </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!--  <div class=\"scroll-content\"-->\n<!--       [class.column]=\"direction === 'column'\">-->\n<!--    &lt;!&ndash;  <div class=\"scroll-content\">&ndash;&gt;-->\n<!--    <ng-content></ng-content>-->\n<!--  </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n     [ngClass]=\"contentClass\"\n     [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _scrollDirective: [{
+            args: [{ selector: 'teta-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroll-controls\" *tetaLet='scrollSize | async as scrollSize'>\n  <div #scrollbarVertical\n       [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n       class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n       (scroll)=\"scrollVertical($event)\">\n    <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px;\"></div>\n  </div>\n  <div #scrollbarHorizontal\n       [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n       class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n       (scroll)=\"scrollHorizontal($event)\">\n    <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px;\"></div>\n  </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!--  <div class=\"scroll-content\"-->\n<!--       [class.column]=\"direction === 'column'\">-->\n<!--    &lt;!&ndash;  <div class=\"scroll-content\">&ndash;&gt;-->\n<!--    <ng-content></ng-content>-->\n<!--  </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n     [ngClass]=\"contentClass\"\n     [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _scrollDirective: [{
                 type: ContentChild,
                 args: [ScrollableDirective, {
                         static: true,
@@ -5221,44 +5266,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 type: Input
             }] } });
 
-class LetDirective {
-    tetaLet;
-    constructor(viewContainer, templateRef) {
-        viewContainer.createEmbeddedView(templateRef, new LetContext(this));
-    }
-    static ngTemplateContextGuard(_dir, _ctx) {
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: LetDirective, selector: "[tetaLet]", inputs: { tetaLet: "tetaLet" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaLet]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef, decorators: [{
-                    type: Inject,
-                    args: [ViewContainerRef]
-                }] }, { type: i0.TemplateRef, decorators: [{
-                    type: Inject,
-                    args: [TemplateRef]
-                }] }]; }, propDecorators: { tetaLet: [{
-                type: Input
-            }] } });
-class LetContext {
-    internalDirectiveInstance;
-    constructor(internalDirectiveInstance) {
-        this.internalDirectiveInstance = internalDirectiveInstance;
-    }
-    get $implicit() {
-        return this.internalDirectiveInstance.tetaLet;
-    }
-    get tetaLet() {
-        return this.internalDirectiveInstance.tetaLet;
-    }
-}
-
 class SelectComponent {
     _cdr;
     _elementRef;
@@ -7001,6 +7008,9 @@ class FormsUtil {
         if (column.maxValue != null) {
             validators.push(Validators.max(column.maxValue));
         }
+        if (column.maxLength != null) {
+            validators.push(Validators.maxLength(column.maxLength));
+        }
         if (column.validators?.length > 0) {
             validators.push(...column.validators);
         }
@@ -7197,6 +7207,11 @@ class PropertyGridItemComponent {
                 value: column.maxValue,
             });
         }
+        if (control?.hasError('maxlength')) {
+            return this._transloco.translate('errors.max_length', {
+                value: column.maxLength,
+            });
+        }
     }
     ngOnDestroy() {
         this._alive = false;
@@ -8038,6 +8053,10 @@ class TableColumn extends FilterItem {
      * Значение по умолчанию при создании записи
      */
     minValue;
+    /**
+     * Максимальная длина
+     */
+    maxLength;
     /**
      * Поле обязательно для заполнения
      */
@@ -8069,6 +8088,7 @@ class TableColumn extends FilterItem {
         this.defaultValue = options?.defaultValue;
         this.maxValue = options?.maxValue;
         this.minValue = options?.minValue;
+        this.maxLength = options?.maxLength;
         this.required = options?.required;
         this.columns = options?.columns?.map(x => new TableColumn(x)) ?? [];
         this.validators = options?.validators;