@tetacom/ng-components 1.6.6 → 1.6.8

package/fesm2022/tetacom-ng-components.mjs

@@ -4608,7 +4608,8 @@ var FilterType;
     FilterType[FilterType["date"] = 2] = "date";
     FilterType[FilterType["list"] = 3] = "list";
     FilterType[FilterType["boolean"] = 4] = "boolean";
-    FilterType[FilterType["custom"] = 5] = "custom";
+    FilterType[FilterType["color"] = 5] = "color";
+    FilterType[FilterType["custom"] = 6] = "custom";
 })(FilterType || (FilterType = {}));
 
 const filterComponentsMap = new Map()
@@ -4617,6 +4618,7 @@ const filterComponentsMap = new Map()
     .set(FilterType.list, ListFilterComponent)
     .set(FilterType.string, StringFilterComponent)
     .set(FilterType.boolean, BooleanFilterComponent)
+    .set(FilterType.color, StringFilterComponent)
     .set(FilterType.custom, StringFilterComponent);
 const getFilterComponent = (item) => filterComponentsMap.has(item.filterType) ? filterComponentsMap.get(item.filterType) : StringFilterComponent;
 
@@ -4655,7 +4657,7 @@ class FilterHostComponent {
         this._alive = true;
     }
     ngOnInit() {
-        if (!FilterComponentBase.isPrototypeOf(this._column.filterComponent)) {
+        if (!Object.prototype.isPrototypeOf.call(FilterComponentBase, this._column.filterComponent)) {
             this._column.filterComponent = getFilterComponent(this._column);
         }
         this._componentRef = this.viewContainerRef.createComponent(this._column.filterComponent);
@@ -4771,7 +4773,7 @@ class ColorInputComponent {
                 useExisting: forwardRef(() => ColorInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n  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/>\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: "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 }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n  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/>\n", styles: [":host{display:inline-flex;align-items: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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -4781,7 +4783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => ColorInputComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<input\n  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/>\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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<input\n  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/>\n", styles: [":host{display:inline-flex;align-items: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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
             }], input: [{
@@ -5925,6 +5927,9 @@ class SelectComponent {
         this._cdr.detectChanges();
     }
     clickOption(option, event) {
+        if (option.disabled === true) {
+            return;
+        }
         if (this.multiple === true) {
             if (!this.value?.length) {
                 this.value = [];
@@ -6034,7 +6039,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "@if (locale | async; as loc) {\n  <teta-dropdown\n    [align]=\"align\"\n    [verticalAlign]=\"verticalAlign\"\n    [autoClose]=\"autoClose\"\n    [autoCloseIgnore]=\"autoCloseIgnore\"\n    [(open)]=\"open\"\n    [appendToBody]=\"appendToBody\"\n    [disabled]=\"disabled\"\n    [viewType]=\"viewType\"\n    class=\"row row_auto\"\n  >\n    <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n      <div class=\"row_auto flex align-center\">\n        @if (icon) {\n          <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n        }\n        @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n          <span class=\"placeholder\">\n            {{ placeholder || loc.notSelected }}\n          </span>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            valueDirective ? valueDirective.template : valueDefault;\n            context: { $implicit: value, value: value }\n          \"\n        ></ng-container>\n      </div>\n      <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    @if (options?.length) {\n      <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n        @if (searchRef) {\n          <div class=\"select-search padding-h-2 padding-top-2\">\n            <teta-text-field\n              [ngModel]=\"searchText\"\n              [class]=\"'select_' + viewType\"\n              (ngModelChange)=\"search($event)\"\n              [placeholder]=\"loc.search\"\n              [leftIconName]=\"'search'\"\n            ></teta-text-field>\n          </div>\n        }\n        @if (visibleOptions?.length) {\n          @if (!multiple && allowNull) {\n            <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n              {{ loc.notSelected }}\n            </div>\n            <div class=\"list-divider margin-bottom-0\"></div>\n          }\n          @if (virtual) {\n            <div class=\"column column_auto padding-v-2\" style=\"height: 10000px;\">\n              <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n                <cdk-virtual-scroll-viewport\n                  tetaScrollable\n                  [itemSize]=\"28\"\n                  minBufferPx=\"200\"\n                  maxBufferPx=\"600\"\n                  style=\"flex-grow: 1;\">\n                  <div [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n                       style=\"display: flex;\"\n                       *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n                       [class.list-item_active]=\"itemSelected(option)\"\n                       [tetaHighlight]=\"searchText\"\n                       (click)=\"clickOption(option, $event)\">\n                    <div [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault;context: { $implicit: option, option: option }\"\n                      >\n                      </ng-container>\n                    </div>\n                    @if (itemSelected(option)) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n                    }\n                  </div>\n                </cdk-virtual-scroll-viewport>\n              </teta-scrollable>\n            </div>\n          } @else {\n            <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n              <div class=\"list\">\n                @for (option of visibleOptions; track option) {\n                  <div\n                    [class]=\"'list-item list-item_interactive justify-content-between  select_' + viewType\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <span [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </span>\n                    @if (itemSelected(option) && multiple) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n                    }\n                  </div>\n                }\n              </div>\n            </teta-scrollable>\n          }\n        } @else {\n          <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n            {{ notFoundText || loc.notFound }}\n          </p>\n        }\n        @if (multiple && value?.length) {\n          <div class=\"row row_auto select-chip-field flex-wrap\">\n            @for (item of value; track item) {\n              <div class=\"tag\">\n                <p>{{ getText(item) }}</p>\n                <teta-icon\n                  class=\"cursor-pointer\"\n                  [palette]=\"'text'\"\n                  [name]=\"'closeCircle'\"\n                  (click)=\"removeItemClick(item, $event)\"\n                ></teta-icon>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n      {{ notFoundText || loc.notFound }}\n    </p>\n  </ng-template>\n  <ng-template #optionDefault let-option>\n    {{ getText(option) }}\n  </ng-template>\n  <ng-template #valueDefault let-value>\n    @if (multiple) {\n      <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n        {{ loc.selected + ' ' + value?.length }}\n      </div>\n    }\n    @if (!multiple) {\n      <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n    }\n  </ng-template>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "@if (locale | async; as loc) {\n  <teta-dropdown\n    [align]=\"align\"\n    [verticalAlign]=\"verticalAlign\"\n    [autoClose]=\"autoClose\"\n    [autoCloseIgnore]=\"autoCloseIgnore\"\n    [(open)]=\"open\"\n    [appendToBody]=\"appendToBody\"\n    [disabled]=\"disabled\"\n    [viewType]=\"viewType\"\n    class=\"row row_auto\"\n  >\n    <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n      <div class=\"row_auto flex align-center\">\n        @if (icon) {\n          <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n        }\n        @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n          <span class=\"placeholder\">\n            {{ placeholder || loc.notSelected }}\n          </span>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            valueDirective ? valueDirective.template : valueDefault;\n            context: { $implicit: value, value: value }\n          \"\n        ></ng-container>\n      </div>\n      <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    @if (options?.length) {\n      <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n        @if (searchRef) {\n          <div class=\"select-search padding-h-2 padding-top-2\">\n            <teta-text-field\n              [ngModel]=\"searchText\"\n              [class]=\"'select_' + viewType\"\n              (ngModelChange)=\"search($event)\"\n              [placeholder]=\"loc.search\"\n              [leftIconName]=\"'search'\"\n            ></teta-text-field>\n          </div>\n        }\n        @if (visibleOptions?.length) {\n          @if (!multiple && allowNull) {\n            <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n              {{ loc.notSelected }}\n            </div>\n            <div class=\"list-divider margin-bottom-0\"></div>\n          }\n          @if (virtual) {\n            <div class=\"column column_auto padding-v-2\" style=\"height: 50vh\">\n              <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n                <cdk-virtual-scroll-viewport\n                  tetaScrollable\n                  [itemSize]=\"28\"\n                  minBufferPx=\"200\"\n                  maxBufferPx=\"600\"\n                  style=\"flex-grow: 1\"\n                >\n                  <div\n                    [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n                    style=\"display: flex\"\n                    *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    [class.list-item_disabled]=\"option.disabled === true\"\n                    [tetaHighlight]=\"searchText\"\n                    [style.height.px]=\"28\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <div [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </div>\n                    @if (itemSelected(option)) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n                    }\n                  </div>\n                </cdk-virtual-scroll-viewport>\n              </teta-scrollable>\n            </div>\n          } @else {\n            <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n              <div class=\"list\">\n                @for (option of visibleOptions; track option) {\n                  <div\n                    [class]=\"'list-item list-item_interactive justify-content-between  select_' + viewType\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    [class.list-item_disabled]=\"option.disabled === true\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <span [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </span>\n                    @if (itemSelected(option) && multiple) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n                    }\n                  </div>\n                }\n              </div>\n            </teta-scrollable>\n          }\n        } @else {\n          <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n            {{ notFoundText || loc.notFound }}\n          </p>\n        }\n        @if (multiple && value?.length) {\n          <div class=\"row row_auto select-chip-field flex-wrap\">\n            @for (item of value; track item) {\n              <div class=\"tag\">\n                <p>{{ getText(item) }}</p>\n                <teta-icon\n                  class=\"cursor-pointer\"\n                  [palette]=\"'text'\"\n                  [name]=\"'closeCircle'\"\n                  (click)=\"removeItemClick(item, $event)\"\n                ></teta-icon>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n      {{ notFoundText || loc.notFound }}\n    </p>\n  </ng-template>\n  <ng-template #optionDefault let-option>\n    {{ getText(option) }}\n  </ng-template>\n  <ng-template #valueDefault let-value>\n    @if (multiple) {\n      <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n        {{ loc.selected + ' ' + value?.length }}\n      </div>\n    }\n    @if (!multiple) {\n      <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n    }\n  </ng-template>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -6060,7 +6065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         CdkVirtualForOf,
                         HighlightDirective,
                         AsyncPipe,
-                    ], template: "@if (locale | async; as loc) {\n  <teta-dropdown\n    [align]=\"align\"\n    [verticalAlign]=\"verticalAlign\"\n    [autoClose]=\"autoClose\"\n    [autoCloseIgnore]=\"autoCloseIgnore\"\n    [(open)]=\"open\"\n    [appendToBody]=\"appendToBody\"\n    [disabled]=\"disabled\"\n    [viewType]=\"viewType\"\n    class=\"row row_auto\"\n  >\n    <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n      <div class=\"row_auto flex align-center\">\n        @if (icon) {\n          <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n        }\n        @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n          <span class=\"placeholder\">\n            {{ placeholder || loc.notSelected }}\n          </span>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            valueDirective ? valueDirective.template : valueDefault;\n            context: { $implicit: value, value: value }\n          \"\n        ></ng-container>\n      </div>\n      <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    @if (options?.length) {\n      <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n        @if (searchRef) {\n          <div class=\"select-search padding-h-2 padding-top-2\">\n            <teta-text-field\n              [ngModel]=\"searchText\"\n              [class]=\"'select_' + viewType\"\n              (ngModelChange)=\"search($event)\"\n              [placeholder]=\"loc.search\"\n              [leftIconName]=\"'search'\"\n            ></teta-text-field>\n          </div>\n        }\n        @if (visibleOptions?.length) {\n          @if (!multiple && allowNull) {\n            <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n              {{ loc.notSelected }}\n            </div>\n            <div class=\"list-divider margin-bottom-0\"></div>\n          }\n          @if (virtual) {\n            <div class=\"column column_auto padding-v-2\" style=\"height: 10000px;\">\n              <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n                <cdk-virtual-scroll-viewport\n                  tetaScrollable\n                  [itemSize]=\"28\"\n                  minBufferPx=\"200\"\n                  maxBufferPx=\"600\"\n                  style=\"flex-grow: 1;\">\n                  <div [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n                       style=\"display: flex;\"\n                       *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n                       [class.list-item_active]=\"itemSelected(option)\"\n                       [tetaHighlight]=\"searchText\"\n                       (click)=\"clickOption(option, $event)\">\n                    <div [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault;context: { $implicit: option, option: option }\"\n                      >\n                      </ng-container>\n                    </div>\n                    @if (itemSelected(option)) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n                    }\n                  </div>\n                </cdk-virtual-scroll-viewport>\n              </teta-scrollable>\n            </div>\n          } @else {\n            <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n              <div class=\"list\">\n                @for (option of visibleOptions; track option) {\n                  <div\n                    [class]=\"'list-item list-item_interactive justify-content-between  select_' + viewType\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <span [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </span>\n                    @if (itemSelected(option) && multiple) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n                    }\n                  </div>\n                }\n              </div>\n            </teta-scrollable>\n          }\n        } @else {\n          <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n            {{ notFoundText || loc.notFound }}\n          </p>\n        }\n        @if (multiple && value?.length) {\n          <div class=\"row row_auto select-chip-field flex-wrap\">\n            @for (item of value; track item) {\n              <div class=\"tag\">\n                <p>{{ getText(item) }}</p>\n                <teta-icon\n                  class=\"cursor-pointer\"\n                  [palette]=\"'text'\"\n                  [name]=\"'closeCircle'\"\n                  (click)=\"removeItemClick(item, $event)\"\n                ></teta-icon>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n      {{ notFoundText || loc.notFound }}\n    </p>\n  </ng-template>\n  <ng-template #optionDefault let-option>\n    {{ getText(option) }}\n  </ng-template>\n  <ng-template #valueDefault let-value>\n    @if (multiple) {\n      <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n        {{ loc.selected + ' ' + value?.length }}\n      </div>\n    }\n    @if (!multiple) {\n      <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n    }\n  </ng-template>\n}\n" }]
+                    ], template: "@if (locale | async; as loc) {\n  <teta-dropdown\n    [align]=\"align\"\n    [verticalAlign]=\"verticalAlign\"\n    [autoClose]=\"autoClose\"\n    [autoCloseIgnore]=\"autoCloseIgnore\"\n    [(open)]=\"open\"\n    [appendToBody]=\"appendToBody\"\n    [disabled]=\"disabled\"\n    [viewType]=\"viewType\"\n    class=\"row row_auto\"\n  >\n    <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n      <div class=\"row_auto flex align-center\">\n        @if (icon) {\n          <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n        }\n        @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n          <span class=\"placeholder\">\n            {{ placeholder || loc.notSelected }}\n          </span>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            valueDirective ? valueDirective.template : valueDefault;\n            context: { $implicit: value, value: value }\n          \"\n        ></ng-container>\n      </div>\n      <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    @if (options?.length) {\n      <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n        @if (searchRef) {\n          <div class=\"select-search padding-h-2 padding-top-2\">\n            <teta-text-field\n              [ngModel]=\"searchText\"\n              [class]=\"'select_' + viewType\"\n              (ngModelChange)=\"search($event)\"\n              [placeholder]=\"loc.search\"\n              [leftIconName]=\"'search'\"\n            ></teta-text-field>\n          </div>\n        }\n        @if (visibleOptions?.length) {\n          @if (!multiple && allowNull) {\n            <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n              {{ loc.notSelected }}\n            </div>\n            <div class=\"list-divider margin-bottom-0\"></div>\n          }\n          @if (virtual) {\n            <div class=\"column column_auto padding-v-2\" style=\"height: 50vh\">\n              <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n                <cdk-virtual-scroll-viewport\n                  tetaScrollable\n                  [itemSize]=\"28\"\n                  minBufferPx=\"200\"\n                  maxBufferPx=\"600\"\n                  style=\"flex-grow: 1\"\n                >\n                  <div\n                    [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n                    style=\"display: flex\"\n                    *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    [class.list-item_disabled]=\"option.disabled === true\"\n                    [tetaHighlight]=\"searchText\"\n                    [style.height.px]=\"28\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <div [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </div>\n                    @if (itemSelected(option)) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n                    }\n                  </div>\n                </cdk-virtual-scroll-viewport>\n              </teta-scrollable>\n            </div>\n          } @else {\n            <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n              <div class=\"list\">\n                @for (option of visibleOptions; track option) {\n                  <div\n                    [class]=\"'list-item list-item_interactive justify-content-between  select_' + viewType\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    [class.list-item_disabled]=\"option.disabled === true\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <span [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </span>\n                    @if (itemSelected(option) && multiple) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n                    }\n                  </div>\n                }\n              </div>\n            </teta-scrollable>\n          }\n        } @else {\n          <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n            {{ notFoundText || loc.notFound }}\n          </p>\n        }\n        @if (multiple && value?.length) {\n          <div class=\"row row_auto select-chip-field flex-wrap\">\n            @for (item of value; track item) {\n              <div class=\"tag\">\n                <p>{{ getText(item) }}</p>\n                <teta-icon\n                  class=\"cursor-pointer\"\n                  [palette]=\"'text'\"\n                  [name]=\"'closeCircle'\"\n                  (click)=\"removeItemClick(item, $event)\"\n                ></teta-icon>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n      {{ notFoundText || loc.notFound }}\n    </p>\n  </ng-template>\n  <ng-template #optionDefault let-option>\n    {{ getText(option) }}\n  </ng-template>\n  <ng-template #valueDefault let-value>\n    @if (multiple) {\n      <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n        {{ loc.selected + ' ' + value?.length }}\n      </div>\n    }\n    @if (!multiple) {\n      <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n    }\n  </ng-template>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TetaConfigService }], propDecorators: { multiple: [{
                 type: HostBinding,
                 args: ['class.select_multiple']
@@ -6256,7 +6261,7 @@ class PropertyGridItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertyGridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PropertyGridItemComponent, isStandalone: true, selector: "teta-property-grid-item", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, hideNonEditable: { classPropertyName: "hideNonEditable", publicName: "hideNonEditable", isSignal: true, isRequired: false, transformFunction: null }, dict: { classPropertyName: "dict", publicName: "dict", isSignal: true, isRequired: false, transformFunction: null }, decimalPart: { classPropertyName: "decimalPart", publicName: "decimalPart", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, itemTemplates: { classPropertyName: "itemTemplates", publicName: "itemTemplates", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { controlValueChange: "controlValueChange" }, usesOnChanges: true, ngImport: i0, template: "@if (editable() || !hideNonEditable()) {\n  <teta-input\n    [label]=\"caption()\"\n    [hint]=\"hint()\"\n    [formGroup]=\"formGroup\"\n    [horizontal]=\"horizontal()\"\n    [required]=\"column().required\"\n  >\n    @if (template()) {\n      <ng-container\n        *ngTemplateOutlet=\"template().template; context: { $implicit: formGroup?.get(column().name) }\"\n      ></ng-container>\n    } @else {\n      @if (formGroup?.get(column().name)) {\n        @switch (column().filterType) {\n          @case (filterTypeEnum.list) {\n            <teta-select\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\n              [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n              [allowNull]=\"!column().required\"\n              [appendToBody]=\"true\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n              [options]=\"getDict()\"\n              [valueRef]=\"'id'\"\n              [textRef]=\"'name'\"\n              [multiple]=\"false\"\n            ></teta-select>\n          }\n          @case (filterTypeEnum.date) {\n            <teta-date-picker\n              class=\"row_auto\"\n              [appendToBody]=\"true\"\n              [tetaDisableControl]=\"!editable()\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n            ></teta-date-picker>\n          }\n          @case (filterTypeEnum.boolean) {\n            <teta-toggle\n              [tetaDisableControl]=\"!editable()\"\n              [formControlName]=\"column().name\"\n              [tetaHint]=\"hint()\"\n              [align]=\"align.left\"\n            >\n              {{ column().caption }}\n            </teta-toggle>\n          }\n          @default {\n            <teta-text-field\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\n              [decimalPart]=\"column().filterType === filterTypeEnum.number ? decimalPart() : null\"\n              [onlyNumber]=\"column().filterType === filterTypeEnum.number\"\n              [placeholder]=\"column().caption\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n            ></teta-text-field>\n          }\n        }\n      }\n    }\n    @if (controlIsInvalid(column().name)) {\n      <div ngProjectAs=\"message\" class=\"color-red-50\">\n        {{ getError(column()) }}\n      </div>\n    }\n  </teta-input>\n}\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "component", type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: DisableControlDirective, selector: "[tetaDisableControl]", inputs: ["tetaDisableControl"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "viewType", "overflownOnly"] }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PropertyGridItemComponent, isStandalone: true, selector: "teta-property-grid-item", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, hideNonEditable: { classPropertyName: "hideNonEditable", publicName: "hideNonEditable", isSignal: true, isRequired: false, transformFunction: null }, dict: { classPropertyName: "dict", publicName: "dict", isSignal: true, isRequired: false, transformFunction: null }, decimalPart: { classPropertyName: "decimalPart", publicName: "decimalPart", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, itemTemplates: { classPropertyName: "itemTemplates", publicName: "itemTemplates", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { controlValueChange: "controlValueChange" }, usesOnChanges: true, ngImport: i0, template: "@if (editable() || !hideNonEditable()) {\n  @if (template()) {\n    <ng-container\n      *ngTemplateOutlet=\"template().template; context: {\n        $implicit: formGroup?.get(column().name),\n        control:formGroup?.get(column().name),\n        column: column()\n      }\"\n    ></ng-container>\n  } @else {\n    @if (formGroup?.get(column().name)) {\n      <teta-input [label]=\"caption()\"\n                  [hint]=\"hint()\"\n                  [formGroup]=\"formGroup\"\n                  [horizontal]=\"horizontal() || column().filterType === filterTypeEnum.color\"\n                  [required]=\"column().required\">\n        @switch (column().filterType) {\n          @case (filterTypeEnum.list) {\n            <teta-select\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\n              [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n              [allowNull]=\"!column().required\"\n              [appendToBody]=\"true\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n              [options]=\"getDict()\"\n              [valueRef]=\"'id'\"\n              [textRef]=\"'name'\"\n              [multiple]=\"false\"\n            ></teta-select>\n          }\n          @case (filterTypeEnum.date) {\n            <teta-date-picker\n              class=\"row_auto\"\n              [appendToBody]=\"true\"\n              [tetaDisableControl]=\"!editable()\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n            ></teta-date-picker>\n          }\n          @case (filterTypeEnum.boolean) {\n            <teta-toggle\n              [tetaDisableControl]=\"!editable()\"\n              [formControlName]=\"column().name\"\n              [tetaHint]=\"hint()\"\n              [align]=\"align.left\"\n            >\n              {{ column().caption }}\n            </teta-toggle>\n          }\n          @case (filterTypeEnum.color) {\n            <teta-color-input\n              class=\"border border-text-20 border-radius-4 padding-1\"\n              [tetaDisableControl]=\"!editable()\"\n              [formControlName]=\"column().name\">\n            </teta-color-input>\n          }\n          @default {\n            <teta-text-field\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\n              [decimalPart]=\"column().filterType === filterTypeEnum.number ? decimalPart() : null\"\n              [onlyNumber]=\"column().filterType === filterTypeEnum.number\"\n              [placeholder]=\"column().caption\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n            ></teta-text-field>\n          }\n        }\n        @if (controlIsInvalid(column().name)) {\n          <div ngProjectAs=\"message\" class=\"color-red-50\">\n            {{ getError(column()) }}\n          </div>\n        }\n      </teta-input>\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "component", type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: DisableControlDirective, selector: "[tetaDisableControl]", inputs: ["tetaDisableControl"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "viewType", "overflownOnly"] }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertyGridItemComponent, decorators: [{
             type: Component,
@@ -6271,7 +6276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         TextFieldComponent,
                         DisableControlDirective,
                         HintDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (editable() || !hideNonEditable()) {\n  <teta-input\n    [label]=\"caption()\"\n    [hint]=\"hint()\"\n    [formGroup]=\"formGroup\"\n    [horizontal]=\"horizontal()\"\n    [required]=\"column().required\"\n  >\n    @if (template()) {\n      <ng-container\n        *ngTemplateOutlet=\"template().template; context: { $implicit: formGroup?.get(column().name) }\"\n      ></ng-container>\n    } @else {\n      @if (formGroup?.get(column().name)) {\n        @switch (column().filterType) {\n          @case (filterTypeEnum.list) {\n            <teta-select\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\n              [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n              [allowNull]=\"!column().required\"\n              [appendToBody]=\"true\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n              [options]=\"getDict()\"\n              [valueRef]=\"'id'\"\n              [textRef]=\"'name'\"\n              [multiple]=\"false\"\n            ></teta-select>\n          }\n          @case (filterTypeEnum.date) {\n            <teta-date-picker\n              class=\"row_auto\"\n              [appendToBody]=\"true\"\n              [tetaDisableControl]=\"!editable()\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n            ></teta-date-picker>\n          }\n          @case (filterTypeEnum.boolean) {\n            <teta-toggle\n              [tetaDisableControl]=\"!editable()\"\n              [formControlName]=\"column().name\"\n              [tetaHint]=\"hint()\"\n              [align]=\"align.left\"\n            >\n              {{ column().caption }}\n            </teta-toggle>\n          }\n          @default {\n            <teta-text-field\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\n              [decimalPart]=\"column().filterType === filterTypeEnum.number ? decimalPart() : null\"\n              [onlyNumber]=\"column().filterType === filterTypeEnum.number\"\n              [placeholder]=\"column().caption\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n            ></teta-text-field>\n          }\n        }\n      }\n    }\n    @if (controlIsInvalid(column().name)) {\n      <div ngProjectAs=\"message\" class=\"color-red-50\">\n        {{ getError(column()) }}\n      </div>\n    }\n  </teta-input>\n}\n" }]
+                        ColorInputComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (editable() || !hideNonEditable()) {\n  @if (template()) {\n    <ng-container\n      *ngTemplateOutlet=\"template().template; context: {\n        $implicit: formGroup?.get(column().name),\n        control:formGroup?.get(column().name),\n        column: column()\n      }\"\n    ></ng-container>\n  } @else {\n    @if (formGroup?.get(column().name)) {\n      <teta-input [label]=\"caption()\"\n                  [hint]=\"hint()\"\n                  [formGroup]=\"formGroup\"\n                  [horizontal]=\"horizontal() || column().filterType === filterTypeEnum.color\"\n                  [required]=\"column().required\">\n        @switch (column().filterType) {\n          @case (filterTypeEnum.list) {\n            <teta-select\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\n              [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n              [allowNull]=\"!column().required\"\n              [appendToBody]=\"true\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n              [options]=\"getDict()\"\n              [valueRef]=\"'id'\"\n              [textRef]=\"'name'\"\n              [multiple]=\"false\"\n            ></teta-select>\n          }\n          @case (filterTypeEnum.date) {\n            <teta-date-picker\n              class=\"row_auto\"\n              [appendToBody]=\"true\"\n              [tetaDisableControl]=\"!editable()\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n            ></teta-date-picker>\n          }\n          @case (filterTypeEnum.boolean) {\n            <teta-toggle\n              [tetaDisableControl]=\"!editable()\"\n              [formControlName]=\"column().name\"\n              [tetaHint]=\"hint()\"\n              [align]=\"align.left\"\n            >\n              {{ column().caption }}\n            </teta-toggle>\n          }\n          @case (filterTypeEnum.color) {\n            <teta-color-input\n              class=\"border border-text-20 border-radius-4 padding-1\"\n              [tetaDisableControl]=\"!editable()\"\n              [formControlName]=\"column().name\">\n            </teta-color-input>\n          }\n          @default {\n            <teta-text-field\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\n              [decimalPart]=\"column().filterType === filterTypeEnum.number ? decimalPart() : null\"\n              [onlyNumber]=\"column().filterType === filterTypeEnum.number\"\n              [placeholder]=\"column().caption\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"\n            ></teta-text-field>\n          }\n        }\n        @if (controlIsInvalid(column().name)) {\n          <div ngProjectAs=\"message\" class=\"color-red-50\">\n            {{ getError(column()) }}\n          </div>\n        }\n      </teta-input>\n    }\n  }\n}\n" }]
         }] });
 
 class PropertyGridGroupComponent {
@@ -7974,12 +7980,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: ['input', { static: false }]
             }] } });
 
+class ColorUtil {
+    static 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;
+    }
+}
+
+class ColorCellComponent extends CellComponentBase {
+    focus(event) {
+        this.svc.startEditCell({
+            row: this.index,
+            column: this.column.name,
+            event: event,
+        });
+    }
+    constructor(svc, cdr) {
+        super(svc, cdr);
+        this.svc = svc;
+        this.cdr = cdr;
+        this.tabindex = 0;
+    }
+    setValue() {
+        this.svc.startEditCell(null);
+    }
+    startEdit(initiator, type) {
+        if (initiator?.column === this.column.name) {
+            this.cdr.detectChanges();
+            this.input.nativeElement?.focus();
+            this.input.nativeElement?.click();
+        }
+    }
+    stopEdit() {
+        this.cdr.detectChanges();
+    }
+    getHexColor(color) {
+        return ColorUtil.getHexColor(color);
+    }
+    ngOnInit() {
+        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 }); }
+}
+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"] }]
+        }], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], focus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }] } });
+
 const cellComponentsMap = new Map()
     .set(FilterType.number, NumericCellComponent)
     .set(FilterType.date, DateCellComponent)
     .set(FilterType.list, ListCellComponent)
     .set(FilterType.string, StringCellComponent)
     .set(FilterType.boolean, BooleanCellComponent)
+    .set(FilterType.color, ColorCellComponent)
     .set(FilterType.custom, StringCellComponent);
 const getCellComponent = (column) => cellComponentsMap.has(column.filterType) ? cellComponentsMap.get(column.filterType) : StringCellComponent;
 
@@ -11627,5 +11698,5 @@ function tetaZoneOptimized(ngZone) {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_FRAME, AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AggregationType, Align, ArrayUtil, AutoPositionDirective, AutocompleteComponent, AvatarComponent, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dOptions, CheckboxComponent, ClickOutsideDirective, ClickService, ColorInputComponent, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DATE_Range_CONTROL_VALUE_ACCESSOR, DateCalendarComponent, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerMode, DateRangeComponent, DateTimeCellComponent, DateUtil, DayModel, DelimiterComponent, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DividerComponent, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandItemComponent, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExportType, FileItemComponent, FileUploadAreaComponent, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HintDirective, IconComponent, IconFileComponent, IconService, IconSpriteDirective, InputComponent, LetContext, LetDirective, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, Message, MessageComponent, MessageHostComponent, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, NoAutofillDirective, NumberPipe, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OverlayContainerService, PagerComponent, PagerState, PagerUtil, PanelComponent, PopupContentComponent, PositionUtil, PrependZeroPipe, ProgressBarComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridItemDescriptionDirective, RadioButtonComponent, RadioComponent, RangeCalendarComponent, ResizeDragDirective, ResizePanelComponent, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollableComponent, ScrollableDirective, SelectComponent, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarPosition, SortEvent, SortParam, StateUtil, StepperComponent, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableRow, TableRowComponent, TableService, TableUtil, TabsComponent, TetaConfigService, TetaContentRef, TetaDatePipe, TetaSize, TetaTemplateDirective, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchService, ToggleComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeItemToggleComponent, TreeService, VerticalAlign, WINDOW, boolOrFuncCallback, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, isFunction, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
+export { ANIMATION_FRAME, AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AggregationType, Align, ArrayUtil, AutoPositionDirective, AutocompleteComponent, AvatarComponent, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dOptions, CheckboxComponent, ClickOutsideDirective, ClickService, ColorCellComponent, ColorInputComponent, ColorUtil, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DATE_Range_CONTROL_VALUE_ACCESSOR, DateCalendarComponent, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerMode, DateRangeComponent, DateTimeCellComponent, DateUtil, DayModel, DelimiterComponent, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DividerComponent, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandItemComponent, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExportType, FileItemComponent, FileUploadAreaComponent, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HintDirective, IconComponent, IconFileComponent, IconService, IconSpriteDirective, InputComponent, LetContext, LetDirective, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, Message, MessageComponent, MessageHostComponent, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, NoAutofillDirective, NumberPipe, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OverlayContainerService, PagerComponent, PagerState, PagerUtil, PanelComponent, PopupContentComponent, PositionUtil, PrependZeroPipe, ProgressBarComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridItemDescriptionDirective, RadioButtonComponent, RadioComponent, RangeCalendarComponent, ResizeDragDirective, ResizePanelComponent, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollableComponent, ScrollableDirective, SelectComponent, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarPosition, SortEvent, SortParam, StateUtil, StepperComponent, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableRow, TableRowComponent, TableService, TableUtil, TabsComponent, TetaConfigService, TetaContentRef, TetaDatePipe, TetaSize, TetaTemplateDirective, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchService, ToggleComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeItemToggleComponent, TreeService, VerticalAlign, WINDOW, boolOrFuncCallback, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, isFunction, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
 //# sourceMappingURL=tetacom-ng-components.mjs.map