@tetacom/ng-components 1.2.5 → 1.2.7

package/fesm2022/tetacom-ng-components.mjs

@@ -1,15 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Injectable, Host, HostListener, forwardRef, ElementRef, EventEmitter, Output, TemplateRef, Injector, ViewChild, ViewContainerRef, Pipe, ViewEncapsulation, ChangeDetectorRef, NgModule, ContentChildren, inject, SkipSelf, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Injectable, Host, HostListener, ViewChild, forwardRef, ElementRef, EventEmitter, Output, TemplateRef, Injector, ViewContainerRef, Pipe, ViewEncapsulation, ChangeDetectorRef, NgModule, ContentChildren, inject, SkipSelf, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, DatePipe, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
-import { map, takeWhile as takeWhile$1, filter as filter$1, throttleTime, tap as tap$1, withLatestFrom } from 'rxjs/operators';
+import { map, takeWhile, tap, filter as filter$1, throttleTime, withLatestFrom } from 'rxjs/operators';
+import * as THREE from 'three';
+import * as d3 from 'd3';
+import { BehaviorSubject, ReplaySubject, combineLatest, takeWhile as takeWhile$1, filter, map as map$1, lastValueFrom, take, shareReplay, Subject, animationFrameScheduler, fromEvent, tap as tap$1, merge, Observable, share, pipe } from 'rxjs';
+import { OrbitControls } from 'three-stdlib';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, UntypedFormGroup, Validators, ControlContainer, NgForm, NgModelGroup, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import dayjs from 'dayjs';
-import { BehaviorSubject, ReplaySubject, combineLatest, takeWhile, filter, map as map$1, lastValueFrom, take, shareReplay, Subject, animationFrameScheduler, fromEvent, tap, merge, Observable, share, pipe } from 'rxjs';
 import * as i4 from '@maskito/angular';
 import { MaskitoModule } from '@maskito/angular';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -17,9 +20,6 @@ import * as i1$2 from '@ngneat/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import objectHash from 'object-hash';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import * as d3 from 'd3';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import isLeapYear from 'dayjs/plugin/isLeapYear';
 import utc from 'dayjs/plugin/utc';
@@ -416,119 +416,402 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 args: ['class']
             }] } });
 
-const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => CheckboxComponent),
-    multi: true,
-};
-class CheckboxComponent {
-    get getClass() {
-        const result = [this.class, 'checkbox'];
-        if (this.palette) {
-            result.push(`checkbox-${this.palette}`);
+class Chart3dOptions {
+    constructor(options) {
+        this.axes = { ...options?.axes };
+        this.series = options?.series || [];
+    }
+}
+
+class ThemeSwitchService {
+    constructor() {
+        const value = this.restoreTheme();
+        this.theme$ = new BehaviorSubject(value);
+        this.theme = this.theme$.asObservable();
+    }
+    switchTheme() {
+        const value = !this.theme$.value;
+        this.saveTheme(value);
+        this.theme$.next(value);
+    }
+    saveTheme(value) {
+        localStorage.setItem('theme', value.toString());
+    }
+    restoreTheme() {
+        const theme = localStorage.getItem('theme');
+        if (theme) {
+            return JSON.parse(theme);
         }
-        return result.join(' ');
+        return true;
     }
-    get model() {
-        return this.model$;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ThemeSwitchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ThemeSwitchService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ThemeSwitchService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class Chart3dComponent {
+    constructor(_elementRef, _themeService) {
+        this._elementRef = _elementRef;
+        this._themeService = _themeService;
+        this.SIDE_SIZE = 100;
+        this._alive = true;
     }
-    set model(v) {
-        if (v !== this.model$) {
-            this.model$ = v;
-            this.onChange(v);
+    set config(config) {
+        if (config) {
+            this._config = config;
+            this.init();
         }
     }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.tabindex = 0;
-        this.palette = 'primary';
-        this.labelPosition = 'right';
-        /**
-         * Значение
-         */
-        this.model$ = null;
+    get config() {
+        return this._config;
     }
-    changeValue() {
-        if (this.disabled) {
+    get canvas() {
+        return this.canvasRef.nativeElement;
+    }
+    ngOnInit() {
+        this._themeService.theme
+            .pipe(takeWhile(_ => this._alive), tap(_ => {
+            this.gridColor = _ ? '#5d6a73' : '#bdbdc6';
+            this.axesColor = _ ? '#8e8f9d' : '#7d8f9a';
+            this.init();
+        }))
+            .subscribe();
+    }
+    ngAfterViewInit() {
+        this.addResizeObserver();
+        this.createScene();
+        this.startRenderingLoop();
+        this.init();
+    }
+    ngOnDestroy() {
+        this._alive = false;
+        this.removeResizeObserver();
+    }
+    init() {
+        if (!this._scene) {
             return;
         }
-        if (this.binary) {
-            this.model = !this.model;
-        }
-        else {
-            if (!this.isChecked()) {
-                this.addValue();
-            }
-            else {
-                this.removeValue();
-            }
-        }
-        this.checked = this.isChecked();
-    }
-    writeValue(model) {
-        if (this.binary) {
-            this.model$ = model;
+        while (this._scene.children.length > 0) {
+            this._scene.remove(this._scene.children[0]);
         }
-        else {
-            if (model && model instanceof Array) {
-                this.model$ = model;
-            }
-            else {
-                this.model$ = [];
+        const { x, y, z } = this.getScales(this._config.series);
+        this.config.series.forEach((data, idx) => {
+            if (!data.points?.length) {
+                return;
             }
+            const points = data.points.map(_ => new THREE.Vector3(x(_.x), y(_.y), z(_.z)));
+            const color = d3.scaleOrdinal(d3.schemeTableau10);
+            const material = new THREE.LineBasicMaterial({
+                color: data?.color ?? color(idx.toString()),
+            });
+            const tubeGeometry = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(points), 1024, 0.5, 20, false);
+            let tube = new THREE.Line(tubeGeometry, material);
+            this._scene.add(tube);
+        });
+        const circles = x.ticks(this.SIDE_SIZE / 10);
+        const material = new THREE.LineBasicMaterial({ color: this.axesColor });
+        const pointsLines = [];
+        pointsLines.push(new THREE.Vector3(0, 0, 0));
+        pointsLines.push(new THREE.Vector3(0, 0, z(-z.domain()[1])));
+        pointsLines.push(new THREE.Vector3(0, 0, 0));
+        pointsLines.push(new THREE.Vector3(x(-x.domain()[1]), 0, 0));
+        const geometryLines = new THREE.BufferGeometry().setFromPoints(pointsLines);
+        const line = new THREE.Line(geometryLines, material);
+        this._scene.add(line);
+        circles.forEach(r => {
+            const material = new THREE.LineDashedMaterial({
+                color: this.gridColor,
+                dashSize: 1,
+                gapSize: 3,
+            });
+            const circleGeometry = new THREE.BufferGeometry().setFromPoints(new THREE.Path()
+                .absarc(0, 0, x(r), 0, Math.PI * 2, false)
+                .getSpacedPoints(100));
+            const circle = new THREE.LineSegments(circleGeometry, material);
+            circle.geometry.rotateX(-Math.PI / 2);
+            this._scene.add(circle);
+        });
+        this.drawTicks(x, y, z);
+        if (!this._controls) {
+            this._controls = new OrbitControls(this._camera, this._renderer.domElement);
+            this._controls.enableDamping = true;
+            this._controls.enablePan = true;
+            this._controls.dampingFactor = 0.25;
+            this._controls.screenSpacePanning = true;
+            this._controls.minDistance = 0;
+            this._controls.maxDistance = 10000;
+            this._controls.maxPolarAngle = Math.PI / 2;
+            this._controls.enableZoom = true;
         }
-        this.checked = this.isChecked();
-        this.cdr.detectChanges();
     }
-    isChecked() {
-        if (this.binary) {
-            return this.allowNull ? this.model : !!this.model;
-        }
-        else {
-            return this.model && this.model.indexOf(this.value) >= 0;
-        }
+    createScene() {
+        this._scene = new THREE.Scene();
+        const aspectRatio = this._elementRef.nativeElement.clientWidth /
+            this._elementRef.nativeElement.clientHeight;
+        const fieldOfView = 10;
+        const nearClippingPane = 1;
+        const farClippingPane = 10000;
+        this._camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearClippingPane, farClippingPane);
+        this._camera.position.set(1300, 1300, 1300).setLength(1300);
+        this._scene.add(this._camera);
     }
-    removeValue() {
-        this.model = this.model.filter((val) => val !== this.value);
+    setSize(width, height) {
+        this._camera.aspect = width / height;
+        this._renderer.setSize(width, height);
+        this._camera.updateProjectionMatrix();
     }
-    addValue() {
-        if (this.model) {
-            this.model = [...this.model, this.value];
-        }
-        else {
-            this.model = [this.value];
-        }
+    render() {
+        this._renderer.render(this._scene, this._camera);
     }
-    ngOnInit() { }
-    onChange(_) { }
-    onTouched() { }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    startRenderingLoop() {
+        this._renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            canvas: this.canvas,
+            alpha: true,
+            preserveDrawingBuffer: true,
+        });
+        const animate = () => {
+            requestAnimationFrame(animate);
+            this._controls?.update();
+            this.render();
+        };
+        animate();
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    addResizeObserver() {
+        this._obs = new ResizeObserver(_ => {
+            this.setSize(_[0]?.contentRect.width, _[0]?.contentRect.height);
+        });
+        this._obs.observe(this._elementRef.nativeElement);
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.detectChanges();
+    removeResizeObserver() {
+        this._obs.unobserve(this._elementRef.nativeElement);
+        this._obs.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: CheckboxComponent, isStandalone: true, selector: "teta-checkbox", inputs: { class: "class", palette: "palette", noLabel: "noLabel", disabled: "disabled", value: "value", binary: "binary", labelPosition: "labelPosition", allowNull: "allowNull" }, host: { listeners: { "click": "changeValue()" }, properties: { "attr.tabindex": "this.tabindex", "class": "this.getClass", "class.checkbox_disabled": "this.disabled" } }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "@if (labelPosition==='right') {\n  <div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n    <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n  </div>\n  @if (!noLabel) {\n    <span class=\"font-body-3\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n  }\n}\n@if (labelPosition==='left') {\n  @if (!noLabel) {\n    <span class=\"font-body-3\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n  }\n  <div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n    <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n  </div>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-checkbox', providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, NgTemplateOutlet], template: "@if (labelPosition==='right') {\n  <div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n    <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n  </div>\n  @if (!noLabel) {\n    <span class=\"font-body-3\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n  }\n}\n@if (labelPosition==='left') {\n  @if (!noLabel) {\n    <span class=\"font-body-3\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n  }\n  <div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n    <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n  </div>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], class: [{
-                type: Input
-            }], getClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], palette: [{
-                type: Input
-            }], noLabel: [{
+    makeSprite(text, opts) {
+        const fontSize = 20;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const textWidth = text.length * 50;
+        canvas.height = 50;
+        canvas.width = 50;
+        if (ctx) {
+            ctx.font = `${fontSize}px Arial`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = '#A0A0A0';
+            ctx.fillText(text, 25, 25);
+        }
+        const texture = new THREE.Texture(canvas);
+        texture.minFilter = THREE.LinearFilter;
+        texture.needsUpdate = true;
+        const spriteMaterial = new THREE.SpriteMaterial({
+            map: texture,
+        });
+        const sprite = new THREE.Sprite(spriteMaterial);
+        sprite.scale.set(0.4 * fontSize, 0.4 * fontSize, 0.4 * fontSize);
+        return sprite;
+    }
+    drawTicks(x, y, z) {
+        const ticks = new THREE.Object3D();
+        const scalesExtrems = [];
+        [x, y, z].forEach((scale, idx) => {
+            const generatedTicks = scale.ticks(this.SIDE_SIZE / 10);
+            scalesExtrems.push(d3.max(generatedTicks));
+            generatedTicks.forEach((_) => {
+                const sprite = this.makeSprite(_);
+                if (idx === 0) {
+                    sprite.position.set(x(_), y(y.domain()[1]), 0);
+                }
+                if (idx === 1) {
+                    sprite.position.set(-10, y(_), 0);
+                }
+                if (idx === 2) {
+                    sprite.position.set(0, y(y.domain()[1]), z(_));
+                }
+                ticks.add(sprite);
+            });
+        });
+        const northLabel = this.makeSprite('X', { fontSize: 28 });
+        const westLabel = this.makeSprite('Y', { fontSize: 28 });
+        const tvdLabel = this.makeSprite('TVD', { fontSize: 28 });
+        northLabel.position.set(x(x.domain()[1]) + 5, 0, 0);
+        westLabel.position.set(0, 0, y(y.domain()[0]) + 5);
+        tvdLabel.position.set(0, z(z.domain()[1]) + 5, 0);
+        ticks.add(northLabel, westLabel, tvdLabel);
+        const axesHelper = new THREE.AxesHelper(this.SIDE_SIZE);
+        axesHelper.setColors(this.axesColor, this.axesColor, this.axesColor);
+        this._scene.add(axesHelper);
+        this._scene.add(ticks);
+    }
+    getScales(series) {
+        const extrems = series.map(_ => ({
+            x: d3.extent(_.points, (p) => p.x),
+            y: d3.extent(_.points, (p) => p.y),
+            z: d3.extent(_.points, (p) => p.z),
+        }));
+        const flattenExtrems = extrems.reduce((acc, _) => {
+            acc.x = acc.x.concat(_.x);
+            acc.y = acc.y.concat(_.y);
+            acc.z = acc.z.concat(_.z);
+            return acc;
+        }, { x: [], y: [], z: [] });
+        const x = d3
+            .scaleLinear()
+            .domain([
+            0,
+            this._config?.axes?.max == null
+                ? parseInt(d3.max(flattenExtrems.x))
+                : this._config.axes.max,
+        ])
+            .range([0, this.SIDE_SIZE])
+            .nice();
+        const y = d3
+            .scaleLinear()
+            .domain([0, parseInt(d3.max(flattenExtrems.y), 10)])
+            .range([this.SIDE_SIZE, 0]);
+        const z = d3
+            .scaleLinear()
+            .domain([
+            0,
+            this._config?.axes?.max == null
+                ? parseInt(d3.max(flattenExtrems.z))
+                : this._config.axes.max,
+        ])
+            .range([0, this.SIDE_SIZE])
+            .nice();
+        return { x, y, z };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: Chart3dComponent, deps: [{ token: i0.ElementRef }, { token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: Chart3dComponent, isStandalone: true, selector: "teta-chart3d", inputs: { config: "config" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: Chart3dComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-chart3d', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ThemeSwitchService }], propDecorators: { canvasRef: [{
+                type: ViewChild,
+                args: ['canvas']
+            }], config: [{
+                type: Input
+            }] } });
+
+const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CheckboxComponent),
+    multi: true,
+};
+class CheckboxComponent {
+    get getClass() {
+        const result = [this.class, 'checkbox'];
+        if (this.palette) {
+            result.push(`checkbox-${this.palette}`);
+        }
+        return result.join(' ');
+    }
+    get model() {
+        return this.model$;
+    }
+    set model(v) {
+        if (v !== this.model$) {
+            this.model$ = v;
+            this.onChange(v);
+        }
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.tabindex = 0;
+        this.palette = 'primary';
+        this.labelPosition = 'right';
+        /**
+         * Значение
+         */
+        this.model$ = null;
+    }
+    changeValue() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.binary) {
+            this.model = !this.model;
+        }
+        else {
+            if (!this.isChecked()) {
+                this.addValue();
+            }
+            else {
+                this.removeValue();
+            }
+        }
+        this.checked = this.isChecked();
+    }
+    writeValue(model) {
+        if (this.binary) {
+            this.model$ = model;
+        }
+        else {
+            if (model && model instanceof Array) {
+                this.model$ = model;
+            }
+            else {
+                this.model$ = [];
+            }
+        }
+        this.checked = this.isChecked();
+        this.cdr.detectChanges();
+    }
+    isChecked() {
+        if (this.binary) {
+            return this.allowNull ? this.model : !!this.model;
+        }
+        else {
+            return this.model && this.model.indexOf(this.value) >= 0;
+        }
+    }
+    removeValue() {
+        this.model = this.model.filter((val) => val !== this.value);
+    }
+    addValue() {
+        if (this.model) {
+            this.model = [...this.model, this.value];
+        }
+        else {
+            this.model = [this.value];
+        }
+    }
+    ngOnInit() { }
+    onChange(_) { }
+    onTouched() { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: CheckboxComponent, isStandalone: true, selector: "teta-checkbox", inputs: { class: "class", palette: "palette", noLabel: "noLabel", disabled: "disabled", value: "value", binary: "binary", labelPosition: "labelPosition", allowNull: "allowNull" }, host: { listeners: { "click": "changeValue()" }, properties: { "attr.tabindex": "this.tabindex", "class": "this.getClass", "class.checkbox_disabled": "this.disabled" } }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "@if (labelPosition==='right') {\n  <div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n    <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n  </div>\n  @if (!noLabel) {\n    <span class=\"font-body-3\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n  }\n}\n@if (labelPosition==='left') {\n  @if (!noLabel) {\n    <span class=\"font-body-3\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n  }\n  <div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n    <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n  </div>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-checkbox', providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, NgTemplateOutlet], template: "@if (labelPosition==='right') {\n  <div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n    <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n  </div>\n  @if (!noLabel) {\n    <span class=\"font-body-3\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n  }\n}\n@if (labelPosition==='left') {\n  @if (!noLabel) {\n    <span class=\"font-body-3\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n  }\n  <div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n    <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n  </div>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], class: [{
+                type: Input
+            }], getClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], palette: [{
+                type: Input
+            }], noLabel: [{
                 type: Input
             }], disabled: [{
                 type: HostBinding,
@@ -1139,7 +1422,7 @@ class DateCalendarComponent extends BaseCalendar {
         this.setDate = new EventEmitter();
         this.calendar = [];
         combineLatest([this.currentYear, this.currentMonth, this.minMax])
-            .pipe(takeWhile(() => this.alive), filter(([currentYear, currentMonth]) => currentMonth !== null && currentYear !== null), map$1(([year, month, minMax]) => {
+            .pipe(takeWhile$1(() => this.alive), filter(([currentYear, currentMonth]) => currentMonth !== null && currentYear !== null), map$1(([year, month, minMax]) => {
             return this.generateCalendar(dayjs(new Date(this.selectedDate)).locale('ru', { weekStart: 1 }), year, month, minMax);
         }))
             .subscribe(_ => {
@@ -1664,7 +1947,7 @@ class DynamicContentBaseDirective {
         this._alive = true;
         this._open = false;
         this._zone.onStable
-            .pipe(takeWhile$1(_ => this._alive), filter$1(_ => this._open))
+            .pipe(takeWhile(_ => this._alive), filter$1(_ => this._open))
             .subscribe(_ => {
             this.setPosition();
         });
@@ -1907,7 +2190,7 @@ class DropdownBase {
             }
         };
         this._zone.onStable
-            .pipe(takeWhile$1(_ => this._alive), throttleTime(10, undefined, { trailing: true }))
+            .pipe(takeWhile(_ => this._alive), throttleTime(10, undefined, { trailing: true }))
             .subscribe(_ => {
             if (this._head?.nativeElement && this._body) {
                 setTimeout(() => {
@@ -2336,7 +2619,7 @@ class RangeCalendarComponent extends BaseCalendar {
         this.setDate = new EventEmitter();
         this._hoveredDate = null;
         combineLatest([this.currentYear, this.currentMonth, this.minMax])
-            .pipe(takeWhile(() => this.alive), shareReplay({ bufferSize: 1, refCount: false }), filter(([currentYear, currentMonth]) => currentMonth !== null && currentYear !== null), map$1(([year, month, minMax]) => {
+            .pipe(takeWhile$1(() => this.alive), shareReplay({ bufferSize: 1, refCount: false }), filter(([currentYear, currentMonth]) => currentMonth !== null && currentYear !== null), map$1(([year, month, minMax]) => {
             const { availableYear, availableMonth } = this.getAvailableMonthYear(month + 1, year);
             return {
                 currentMonth: this.generateCalendar(dayjs(new Date(this.selectedDate.from || new Date())).locale('ru', { weekStart: 1 }), year, month, minMax),
@@ -3455,7 +3738,7 @@ class ScrollableComponent {
             this._container = this._scrollDirective;
         }
         fromEvent(this._container.nativeElement, 'scroll')
-            .pipe(takeWhile$1(() => this._alive), tap((event) => {
+            .pipe(takeWhile(() => this._alive), tap$1((event) => {
             this._scrollbarHorizontal.nativeElement.scrollLeft =
                 event.target.scrollLeft;
             this._scrollbarVertical.nativeElement.scrollTop =
@@ -4478,7 +4761,7 @@ class FilterHostComponent {
         this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
         this._init = true;
         this._componentRef.instance.filterChanged
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((filter) => {
             this.filterChanged.emit(filter);
         });
@@ -4772,7 +5055,7 @@ class MessageHostComponent {
     }
     ngOnInit() {
         this._svc.message
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((messages) => {
             if (messages) {
                 if (!this.messages) {
@@ -4783,7 +5066,7 @@ class MessageHostComponent {
             this._cdr.markForCheck();
         });
         this._svc.clear
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((x) => {
             if (!x) {
                 this.messages = [];
@@ -6091,7 +6374,7 @@ class PropertyGridItemComponent {
             this.formGroup.registerControl(this.column.name, FormsUtil.initControlFromColumn(this.column, this.item));
             this._formSub?.unsubscribe();
             this._formSub = this.formGroup?.controls[this.column.name]?.valueChanges
-                .pipe(takeWhile$1(() => this._alive))
+                .pipe(takeWhile(() => this._alive))
                 .subscribe(_ => {
                 this.controlValueChange.emit({
                     id: _,
@@ -6417,7 +6700,7 @@ class SwitchComponent {
         this.switchClass = true;
         this._alive = true;
         this.svc.value
-            .pipe(takeWhile$1((_) => this._alive), filter$1((_) => _ !== this._value))
+            .pipe(takeWhile((_) => this._alive), filter$1((_) => _ !== this._value))
             .subscribe((_) => {
             this.onChange(_);
             this._value = _;
@@ -6472,7 +6755,7 @@ class SwitchButtonComponent {
         this.svc = svc;
         this.cdr = cdr;
         this._alive = true;
-        this.svc.value.pipe(takeWhile$1((_) => this._alive)).subscribe((_) => {
+        this.svc.value.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
             this.svcValue = _;
             this.cdr.markForCheck();
         });
@@ -7650,7 +7933,7 @@ class CellComponentBase {
     ngOnInit() {
         this.init();
         this.formGroup?.controls[this.column.name]?.valueChanges
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe(value => {
             this.formGroup.updateValueAndValidity();
             this.row.valid = this.formGroup?.valid;
@@ -7663,7 +7946,7 @@ class CellComponentBase {
     }
     init() {
         this.svc.editRowStart
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((cell) => {
             if (this.index === cell?.row && !this._edit) {
                 this.start(cell, 'row');
@@ -7673,7 +7956,7 @@ class CellComponentBase {
             }
         });
         this.svc.editCellStart
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((cell) => {
             if (this.index === cell?.row &&
                 this.column.name === cell?.column &&
@@ -7686,7 +7969,7 @@ class CellComponentBase {
             }
         });
         this.svc.valueSet
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((cellValue) => {
             if (this.index === cellValue.row &&
                 this.column.name === cellValue.column) {
@@ -8046,7 +8329,7 @@ class SelectionCellComponent {
     }
     ngOnInit() {
         this._svc.selectedRows
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((_) => {
             this.selectedRows = _;
             this._cdr.markForCheck();
@@ -8115,24 +8398,24 @@ class TableBodyComponent {
     ngOnInit() {
         this.locale = this._config.locale;
         combineLatest([this._svc.columns, this._svc.hiddenColumns])
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((values) => {
             const [columns, hiddenColumns] = values;
             this._hiddenColumns = hiddenColumns;
             this.columns = ArrayUtil.flatten(columns, 'columns', true).filter(_ => this._hiddenColumns.indexOf(_.name) < 0);
             this._cdr.markForCheck();
         });
-        this._svc.displayData.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._svc.displayData.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             this.data = _;
             this._cdr.markForCheck();
             this.viewport?.checkViewportSize();
         });
-        this._svc.dict.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._svc.dict.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             this.dict = _;
             this._cdr.markForCheck();
         });
         this._svc.scrollIndex
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe(async (index) => {
             if (this.viewport) {
                 this.viewport.scrollToIndex(index, 'auto');
@@ -8143,7 +8426,7 @@ class TableBodyComponent {
             }
             this._cdr.markForCheck();
         });
-        this._svc.activeRow.pipe(takeWhile$1(_ => this._alive)).subscribe(async (_) => {
+        this._svc.activeRow.pipe(takeWhile(_ => this._alive)).subscribe(async (_) => {
             this.activeRow = _;
             this._cdr.markForCheck();
         });
@@ -8626,7 +8909,7 @@ class TreeItemComponent {
     }
     ngOnInit() {
         this.service.openItems
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((_) => {
             const found = _?.find((x) => this.service.compareItems(x) ===
                 this.service.compareItems(this.item));
@@ -8711,7 +8994,7 @@ class TreeComponent {
             return index;
         };
         this._service.openItems
-            .pipe(takeWhile$1((_) => this._alive), filter$1((_) => this._openItems !== _))
+            .pipe(takeWhile((_) => this._alive), filter$1((_) => this._openItems !== _))
             .subscribe((_) => {
             this._openItems = _;
             this.displayData = this.getDisplayData(this._data, 0);
@@ -8739,7 +9022,7 @@ class TreeComponent {
         this.removeResizeObserver();
     }
     ngAfterViewInit() {
-        this._service.scrollToIndex.pipe(takeWhile$1(() => this._alive)).subscribe((index) => {
+        this._service.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
             this._zone.runOutsideAngular(() => {
                 setTimeout(() => {
                     this.viewport?.scrollToIndex(index, 'smooth');
@@ -8857,7 +9140,7 @@ class VisibilityDropdownTabComponent {
         };
         this.locale = this._config.locale;
         this._svc.hiddenColumns
-            .pipe(takeWhile$1(_ => this._alive), map(_ => [..._]))
+            .pipe(takeWhile(_ => this._alive), map(_ => [..._]))
             .subscribe(_ => {
             this.hiddenColumns = _;
         });
@@ -9217,8 +9500,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }] } });
 
 class TabsComponent {
+    get verticalClassTabs() {
+        return this.direction === 'vertical';
+    }
     constructor() {
         this.classTabs = true;
+        /**
+         * Tabs direction
+         */
+        this.direction = 'horizontal';
+        /**
+         * Tabs size
+         */
+        this.size = 'm';
         /**
          * Whether the closed tabs should be hidden without destroying them
          */
@@ -9234,9 +9528,7 @@ class TabsComponent {
      */
     select(tabId) {
         const selectedTab = this._getTabById(tabId);
-        if (selectedTab &&
-            !selectedTab.disabled &&
-            this.activeId !== selectedTab.id) {
+        if (selectedTab && !selectedTab.disabled && this.activeId !== selectedTab.id) {
             let defaultPrevented = false;
             this.tabChange.emit({
                 activeId: this.activeId,
@@ -9252,27 +9544,30 @@ class TabsComponent {
     }
     ngAfterContentChecked() {
         const activeTab = this._getTabById(this.activeId);
-        this.activeId = activeTab
-            ? activeTab.id
-            : this.tabs.length
-                ? this.tabs.first.id
-                : null;
+        this.activeId = activeTab ? activeTab.id : this.tabs.length ? this.tabs.first.id : null;
     }
     _getTabById(id) {
         const tabsWithId = this.tabs.filter((tab) => tab.id === id);
         return tabsWithId.length ? tabsWithId[0] : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TabsComponent, isStandalone: true, selector: "teta-tabs", inputs: { activeId: "activeId", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"tabs-head\" role=\"tablist\">\n  @for (tab of tabs; track tab) {\n    <div class=\"tabs-head-item\"\n      (click)=\"select(tab.id);\"\n      [class.tabs-head-item_active]=\"tab.id === activeId\"\n      [class.tabs-head-item_disabled]=\"tab.disabled\">\n      <span [id]=\"tab.id\" class=\"tabs-title\"\n        role=\"tab\"\n        [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n        [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n        [attr.aria-expanded]=\"tab.id === activeId\"\n        [attr.aria-disabled]=\"tab.disabled\">\n        {{tab.title}}\n        <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n      </span>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n<div class=\"tabs-content\">\n  @for (tab of tabs; track tab) {\n    @if (!destroyOnHide || tab.id === activeId) {\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TabsComponent, isStandalone: true, selector: "teta-tabs", inputs: { activeId: "activeId", direction: "direction", size: "size", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs", "class.tabs_vertical": "this.verticalClassTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div role=\"tablist\" class=\"tabs-head\" [class.tabs-head_small]=\"size === 's'\">\n  @for (tab of tabs; track tab) {\n  <button\n    type=\"button\"\n    class=\"tabs-head-item\"\n    (click)=\"select(tab.id)\"\n    [class.tabs-head-item_active]=\"tab.id === activeId\"\n    [disabled]=\"tab.disabled\"\n  >\n    <span\n      [id]=\"tab.id\"\n      class=\"tabs-title\"\n      role=\"tab\"\n      [attr.tabindex]=\"tab.disabled ? '-1' : undefined\"\n      [attr.aria-controls]=\"!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null\"\n      [attr.aria-expanded]=\"tab.id === activeId\"\n      [attr.aria-disabled]=\"tab.disabled\"\n    >\n      {{ tab.title }}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </button>\n  }\n</div>\n<div class=\"tabs-content\">\n  @for (tab of tabs; track tab) { @if (!destroyOnHide || tab.id === activeId) {\n  <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tabs', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"tabs-head\" role=\"tablist\">\n  @for (tab of tabs; track tab) {\n    <div class=\"tabs-head-item\"\n      (click)=\"select(tab.id);\"\n      [class.tabs-head-item_active]=\"tab.id === activeId\"\n      [class.tabs-head-item_disabled]=\"tab.disabled\">\n      <span [id]=\"tab.id\" class=\"tabs-title\"\n        role=\"tab\"\n        [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n        [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n        [attr.aria-expanded]=\"tab.id === activeId\"\n        [attr.aria-disabled]=\"tab.disabled\">\n        {{tab.title}}\n        <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n      </span>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n<div class=\"tabs-content\">\n  @for (tab of tabs; track tab) {\n    @if (!destroyOnHide || tab.id === activeId) {\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'teta-tabs', standalone: true, imports: [NgTemplateOutlet], template: "<div role=\"tablist\" class=\"tabs-head\" [class.tabs-head_small]=\"size === 's'\">\n  @for (tab of tabs; track tab) {\n  <button\n    type=\"button\"\n    class=\"tabs-head-item\"\n    (click)=\"select(tab.id)\"\n    [class.tabs-head-item_active]=\"tab.id === activeId\"\n    [disabled]=\"tab.disabled\"\n  >\n    <span\n      [id]=\"tab.id\"\n      class=\"tabs-title\"\n      role=\"tab\"\n      [attr.tabindex]=\"tab.disabled ? '-1' : undefined\"\n      [attr.aria-controls]=\"!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null\"\n      [attr.aria-expanded]=\"tab.id === activeId\"\n      [attr.aria-disabled]=\"tab.disabled\"\n    >\n      {{ tab.title }}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </button>\n  }\n</div>\n<div class=\"tabs-content\">\n  @for (tab of tabs; track tab) { @if (!destroyOnHide || tab.id === activeId) {\n  <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n  } }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { classTabs: [{
                 type: HostBinding,
                 args: ['class.tabs']
+            }], verticalClassTabs: [{
+                type: HostBinding,
+                args: ['class.tabs_vertical']
             }], activeId: [{
                 type: Input
+            }], direction: [{
+                type: Input
+            }], size: [{
+                type: Input
             }], destroyOnHide: [{
                 type: Input
             }], tabChange: [{
@@ -9297,7 +9592,7 @@ class HeadCellDropdownComponent {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HeadCellDropdownComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: HeadCellDropdownComponent, isStandalone: true, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", data: "data", tabTemplates: "tabTemplates", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange" }, ngImport: i0, template: "@if (dropDownOpen) {\n  <teta-tabs class=\"column_auto\">\n    @for (tab of tabTemplates; track trackIndex($index)) {\n      @if (tab.showTab(column)) {\n        <teta-tab>\n          <ng-template tetaTabTitle>\n            @if (tab.icon) {\n              <teta-icon [name]=\"tab.icon\" [palette]=\"'text'\"></teta-icon>\n            }\n          </ng-template>\n          <ng-template tetaTabContent>\n            <ng-container\n          *ngTemplateOutlet=\"tab.template; context: {\n            column: column,\n            columns: columns,\n            data: data,\n            state: state,\n            close: closeDropdown\n          }\"></ng-container>\n          </ng-template>\n        </teta-tab>\n      }\n    }\n  </teta-tabs>\n}\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"], dependencies: [{ kind: "component", type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "destroyOnHide"], outputs: ["tabChange"] }, { kind: "component", type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { kind: "directive", type: TabTitleDirective, selector: "[tetaTabTitle]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: TabContentDirective, selector: "[tetaTabContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: HeadCellDropdownComponent, isStandalone: true, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", data: "data", tabTemplates: "tabTemplates", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange" }, ngImport: i0, template: "@if (dropDownOpen) {\n  <teta-tabs class=\"column_auto\">\n    @for (tab of tabTemplates; track trackIndex($index)) {\n      @if (tab.showTab(column)) {\n        <teta-tab>\n          <ng-template tetaTabTitle>\n            @if (tab.icon) {\n              <teta-icon [name]=\"tab.icon\" [palette]=\"'text'\"></teta-icon>\n            }\n          </ng-template>\n          <ng-template tetaTabContent>\n            <ng-container\n          *ngTemplateOutlet=\"tab.template; context: {\n            column: column,\n            columns: columns,\n            data: data,\n            state: state,\n            close: closeDropdown\n          }\"></ng-container>\n          </ng-template>\n        </teta-tab>\n      }\n    }\n  </teta-tabs>\n}\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"], dependencies: [{ kind: "component", type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "direction", "size", "destroyOnHide"], outputs: ["tabChange"] }, { kind: "component", type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { kind: "directive", type: TabTitleDirective, selector: "[tetaTabTitle]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: TabContentDirective, selector: "[tetaTabContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HeadCellDropdownComponent, decorators: [{
             type: Component,
@@ -9651,7 +9946,7 @@ class TableHeadGroupComponent {
         this._cdr = _cdr;
         this._alive = true;
         this._svc.hiddenColumns
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((_) => {
             this._hiddenColumns = _;
             this._cdr.markForCheck();
@@ -9708,7 +10003,7 @@ class SelectionHeadCellComponent {
     }
     ngOnInit() {
         this._svc.selectedRows
-            .pipe(takeWhile$1((_) => this._alive))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((_) => {
             this._cdr.markForCheck();
         });
@@ -9755,7 +10050,7 @@ class TableHeadComponent {
     }
     ngOnInit() {
         combineLatest([this._svc.columns, this._svc.hiddenColumns])
-            .pipe(takeWhile$1(_ => this._alive))
+            .pipe(takeWhile(_ => this._alive))
             .subscribe((values) => {
             const [columns, hiddenColumns] = values;
             this._hiddenColumns = hiddenColumns;
@@ -9766,11 +10061,11 @@ class TableHeadComponent {
             this.lockedWidth = locked.reduce((prev, curr) => prev + curr.width, startWidth);
             this._cdr.markForCheck();
         });
-        this._svc.state.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._svc.state.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             this.state = _;
             this._cdr.markForCheck();
         });
-        this._svc.displayData.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._svc.displayData.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             this.data = _.map(_ => _.data);
             this._cdr.markForCheck();
         });
@@ -9842,34 +10137,34 @@ class TableComponent {
             this._headElement.scrollLeft = event.target.scrollLeft;
         };
         this._svc.state
-            .pipe(takeWhile$1(() => this._alive), filter$1(state => state !== this._state))
+            .pipe(takeWhile(() => this._alive), filter$1(state => state !== this._state))
             .subscribe((state) => this.stateChange.next(state));
         this._svc.editCellStart
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => this.cellEditStart.emit(this._svc.getCellInstance(item)));
         this._svc.editCellStop
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => this.cellEditEnd.emit(this._svc.getCellInstance(item)));
         this._svc.editRowStart
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => this.rowEditStart.emit(this._svc.getCellInstance(item)));
         this._svc.editRowStop
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => this.rowEditEnd.emit(this._svc.getRowByIndex(item?.row)));
         this._svc.selectedRows
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((items) => {
             this.selectedRowsList = items;
             this.selectedRowsChange.emit(items);
         });
         this._svc.activeRow
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((item) => {
             this.activeRow = item;
             this.activeRowChange.emit(item);
         });
         this._svc.valueChanged
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe((coordinates) => {
             this.valueChange.emit(this._svc.getCellInstance(coordinates));
         });
@@ -10306,47 +10601,16 @@ class DetailComponentBase {
  * Components
  */
 
-class ThemeSwitchService {
-    constructor() {
-        const value = this.restoreTheme();
-        this.theme$ = new BehaviorSubject(value);
-        this.theme = this.theme$.asObservable();
+class ThemeSwitchComponent {
+    constructor(_svc) {
+        this._svc = _svc;
+        this.palette = 'text';
+        this.view = 'ghost';
+        this.theme = this._svc.theme;
     }
+    ngOnInit() { }
     switchTheme() {
-        const value = !this.theme$.value;
-        this.saveTheme(value);
-        this.theme$.next(value);
-    }
-    saveTheme(value) {
-        localStorage.setItem('theme', value.toString());
-    }
-    restoreTheme() {
-        const theme = localStorage.getItem('theme');
-        if (theme) {
-            return JSON.parse(theme);
-        }
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ThemeSwitchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ThemeSwitchService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ThemeSwitchService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class ThemeSwitchComponent {
-    constructor(_svc) {
-        this._svc = _svc;
-        this.palette = 'text';
-        this.view = 'ghost';
-        this.theme = this._svc.theme;
-    }
-    ngOnInit() { }
-    switchTheme() {
-        this._svc.switchTheme();
+        this._svc.switchTheme();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ThemeSwitchComponent, deps: [{ token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: ThemeSwitchComponent, isStandalone: true, selector: "teta-theme-switch", inputs: { palette: "palette", view: "view" }, ngImport: i0, template: "<button type=\"button\" teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n  <teta-icon [name]=\"(theme | async) ? 'lightMode' : 'darkMode'\" [palette]=\"'text'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -10364,258 +10628,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
  * Components
  */
 
-class Chart3dOptions {
-    constructor(options) {
-        this.axes = { ...options?.axes };
-        this.series = options?.series || [];
-    }
-}
-
-class Chart3dComponent {
-    constructor(_elementRef, _themeService) {
-        this._elementRef = _elementRef;
-        this._themeService = _themeService;
-        this.SIDE_SIZE = 100;
-        this._alive = true;
-    }
-    set config(config) {
-        if (config) {
-            this._config = config;
-            this.init();
-        }
-    }
-    get config() {
-        return this._config;
-    }
-    get canvas() {
-        return this.canvasRef.nativeElement;
-    }
-    ngOnInit() {
-        this._themeService.theme
-            .pipe(takeWhile$1(_ => this._alive), tap$1(_ => {
-            this.gridColor = _ ? '#5d6a73' : '#bdbdc6';
-            this.axesColor = _ ? '#8e8f9d' : '#7d8f9a';
-            this.init();
-        }))
-            .subscribe();
-    }
-    ngAfterViewInit() {
-        this.addResizeObserver();
-        this.createScene();
-        this.startRenderingLoop();
-        this.init();
-    }
-    ngOnDestroy() {
-        this._alive = false;
-        this.removeResizeObserver();
-    }
-    init() {
-        if (!this._scene) {
-            return;
-        }
-        while (this._scene.children.length > 0) {
-            this._scene.remove(this._scene.children[0]);
-        }
-        const { x, y, z } = this.getScales(this._config.series);
-        this.config.series.forEach((data, idx) => {
-            if (!data.points?.length) {
-                return;
-            }
-            const points = data.points.map(_ => new THREE.Vector3(x(_.x), y(_.y), z(_.z)));
-            const color = d3.scaleOrdinal(d3.schemeTableau10);
-            const material = new THREE.LineBasicMaterial({
-                color: data?.color ?? color(idx.toString()),
-            });
-            const tubeGeometry = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(points), 1024, 0.5, 20, false);
-            let tube = new THREE.Line(tubeGeometry, material);
-            this._scene.add(tube);
-        });
-        const circles = x.ticks(this.SIDE_SIZE / 10);
-        const material = new THREE.LineBasicMaterial({ color: this.axesColor });
-        const pointsLines = [];
-        pointsLines.push(new THREE.Vector3(0, 0, 0));
-        pointsLines.push(new THREE.Vector3(0, 0, z(-z.domain()[1])));
-        pointsLines.push(new THREE.Vector3(0, 0, 0));
-        pointsLines.push(new THREE.Vector3(x(-x.domain()[1]), 0, 0));
-        const geometryLines = new THREE.BufferGeometry().setFromPoints(pointsLines);
-        const line = new THREE.Line(geometryLines, material);
-        this._scene.add(line);
-        circles.forEach(r => {
-            const material = new THREE.LineDashedMaterial({
-                color: this.gridColor,
-                dashSize: 1,
-                gapSize: 3,
-            });
-            const circleGeometry = new THREE.BufferGeometry().setFromPoints(new THREE.Path()
-                .absarc(0, 0, x(r), 0, Math.PI * 2, false)
-                .getSpacedPoints(100));
-            const circle = new THREE.LineSegments(circleGeometry, material);
-            circle.geometry.rotateX(-Math.PI / 2);
-            this._scene.add(circle);
-        });
-        this.drawTicks(x, y, z);
-        if (!this._controls) {
-            this._controls = new OrbitControls(this._camera, this._renderer.domElement);
-            this._controls.enableDamping = true;
-            this._controls.enablePan = true;
-            this._controls.dampingFactor = 0.25;
-            this._controls.screenSpacePanning = true;
-            this._controls.minDistance = 0;
-            this._controls.maxDistance = 10000;
-            this._controls.maxPolarAngle = Math.PI / 2;
-            this._controls.enableZoom = true;
-        }
-    }
-    createScene() {
-        this._scene = new THREE.Scene();
-        const aspectRatio = this._elementRef.nativeElement.clientWidth /
-            this._elementRef.nativeElement.clientHeight;
-        const fieldOfView = 10;
-        const nearClippingPane = 1;
-        const farClippingPane = 10000;
-        this._camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearClippingPane, farClippingPane);
-        this._camera.position.set(1300, 1300, 1300).setLength(1300);
-        this._scene.add(this._camera);
-    }
-    setSize(width, height) {
-        this._camera.aspect = width / height;
-        this._renderer.setSize(width, height);
-        this._camera.updateProjectionMatrix();
-    }
-    render() {
-        this._renderer.render(this._scene, this._camera);
-    }
-    startRenderingLoop() {
-        this._renderer = new THREE.WebGLRenderer({
-            antialias: true,
-            canvas: this.canvas,
-            alpha: true,
-            preserveDrawingBuffer: true,
-        });
-        const animate = () => {
-            requestAnimationFrame(animate);
-            this._controls?.update();
-            this.render();
-        };
-        animate();
-    }
-    addResizeObserver() {
-        this._obs = new ResizeObserver(_ => {
-            this.setSize(_[0]?.contentRect.width, _[0]?.contentRect.height);
-        });
-        this._obs.observe(this._elementRef.nativeElement);
-    }
-    removeResizeObserver() {
-        this._obs.unobserve(this._elementRef.nativeElement);
-        this._obs.disconnect();
-    }
-    makeSprite(text, opts) {
-        const fontSize = 20;
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        const textWidth = text.length * 50;
-        canvas.height = 50;
-        canvas.width = 50;
-        if (ctx) {
-            ctx.font = `${fontSize}px Arial`;
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillStyle = '#A0A0A0';
-            ctx.fillText(text, 25, 25);
-        }
-        const texture = new THREE.Texture(canvas);
-        texture.minFilter = THREE.LinearFilter;
-        texture.needsUpdate = true;
-        const spriteMaterial = new THREE.SpriteMaterial({
-            map: texture,
-        });
-        const sprite = new THREE.Sprite(spriteMaterial);
-        sprite.scale.set(0.4 * fontSize, 0.4 * fontSize, 0.4 * fontSize);
-        return sprite;
-    }
-    drawTicks(x, y, z) {
-        const ticks = new THREE.Object3D();
-        const scalesExtrems = [];
-        [x, y, z].forEach((scale, idx) => {
-            const generatedTicks = scale.ticks(this.SIDE_SIZE / 10);
-            scalesExtrems.push(d3.max(generatedTicks));
-            generatedTicks.forEach((_) => {
-                const sprite = this.makeSprite(_);
-                if (idx === 0) {
-                    sprite.position.set(x(_), y(y.domain()[1]), 0);
-                }
-                if (idx === 1) {
-                    sprite.position.set(-10, y(_), 0);
-                }
-                if (idx === 2) {
-                    sprite.position.set(0, y(y.domain()[1]), z(_));
-                }
-                ticks.add(sprite);
-            });
-        });
-        const northLabel = this.makeSprite('X', { fontSize: 28 });
-        const westLabel = this.makeSprite('Y', { fontSize: 28 });
-        const tvdLabel = this.makeSprite('TVD', { fontSize: 28 });
-        northLabel.position.set(x(x.domain()[1]) + 5, 0, 0);
-        westLabel.position.set(0, 0, y(y.domain()[0]) + 5);
-        tvdLabel.position.set(0, z(z.domain()[1]) + 5, 0);
-        ticks.add(northLabel, westLabel, tvdLabel);
-        const axesHelper = new THREE.AxesHelper(this.SIDE_SIZE);
-        axesHelper.setColors(this.axesColor, this.axesColor, this.axesColor);
-        this._scene.add(axesHelper);
-        this._scene.add(ticks);
-    }
-    getScales(series) {
-        const extrems = series.map(_ => ({
-            x: d3.extent(_.points, (p) => p.x),
-            y: d3.extent(_.points, (p) => p.y),
-            z: d3.extent(_.points, (p) => p.z),
-        }));
-        const flattenExtrems = extrems.reduce((acc, _) => {
-            acc.x = acc.x.concat(_.x);
-            acc.y = acc.y.concat(_.y);
-            acc.z = acc.z.concat(_.z);
-            return acc;
-        }, { x: [], y: [], z: [] });
-        const x = d3
-            .scaleLinear()
-            .domain([
-            0,
-            this._config?.axes?.max == null
-                ? parseInt(d3.max(flattenExtrems.x))
-                : this._config.axes.max,
-        ])
-            .range([0, this.SIDE_SIZE])
-            .nice();
-        const y = d3
-            .scaleLinear()
-            .domain([0, parseInt(d3.max(flattenExtrems.y), 10)])
-            .range([this.SIDE_SIZE, 0]);
-        const z = d3
-            .scaleLinear()
-            .domain([
-            0,
-            this._config?.axes?.max == null
-                ? parseInt(d3.max(flattenExtrems.z))
-                : this._config.axes.max,
-        ])
-            .range([0, this.SIDE_SIZE])
-            .nice();
-        return { x, y, z };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: Chart3dComponent, deps: [{ token: i0.ElementRef }, { token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: Chart3dComponent, isStandalone: true, selector: "teta-chart3d", inputs: { config: "config" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: Chart3dComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-chart3d', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ThemeSwitchService }], propDecorators: { canvasRef: [{
-                type: ViewChild,
-                args: ['canvas']
-            }], config: [{
-                type: Input
-            }] } });
-
 class DividerComponent {
     constructor() { }
     ngOnInit() { }
@@ -10809,7 +10821,7 @@ class AutoPositionDirective {
     }
     ngAfterViewInit() {
         this.setPosition();
-        this._zone.onStable.pipe(takeWhile$1(() => this._alive)).subscribe(() => {
+        this._zone.onStable.pipe(takeWhile(() => this._alive)).subscribe(() => {
             this.setPosition();
         });
     }
@@ -11147,12 +11159,12 @@ class DragContainerDirective {
             previewTemplate: this._previewTemplate?.templateRef,
             viewContainer: this._viewContainerRef
         });
-        this._dragService.dropTarget.pipe(takeWhile$1(() => this._alive))
+        this._dragService.dropTarget.pipe(takeWhile(() => this._alive))
             .subscribe((target) => {
             this.dropTarget = target;
             this._cdr.detectChanges();
         });
-        this._dragService.dropped.pipe(takeWhile$1(() => this._alive))
+        this._dragService.dropped.pipe(takeWhile(() => this._alive))
             .subscribe((event) => {
             this.tetaDrop.emit(event);
         });
@@ -11259,7 +11271,7 @@ class DragDirective {
             data: this.data,
         });
         this._dragService.dropTarget
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .subscribe(target => {
             this.dropTarget = target;
             if (target === this.instance) {
@@ -11269,7 +11281,7 @@ class DragDirective {
             this._cdr.markForCheck();
         });
         this._dragService.dropped
-            .pipe(takeWhile$1(() => this._alive))
+            .pipe(takeWhile(() => this._alive))
             .pipe(filter$1((event) => {
             return event.target === this.instance;
         }))
@@ -11550,7 +11562,7 @@ class LoaderDirective {
         this._alive = true;
         this._loading = false;
         this._element = this._elementRef.nativeElement;
-        this._zone.onStable.pipe(takeWhile$1(_ => this._alive)).subscribe(_ => {
+        this._zone.onStable.pipe(takeWhile(_ => this._alive)).subscribe(_ => {
             if (this._loading && this._loader) {
                 this.setPosition();
             }
@@ -11634,7 +11646,7 @@ class TooltipDirective extends DynamicContentBaseDirective {
     }
     ngOnInit() {
         merge(this._click.click, this._click.contextMenu)
-            .pipe(takeWhile$1(() => this._alive), filter$1(() => this._open), filter$1(() => this._componentRef != null), filter$1((event) => !DomUtil.clickedInside(this._elementRef.nativeElement, event)), filter$1((event) => !DomUtil.clickedInside(this._componentRef?.location.nativeElement, event)), tap$1(_ => this.destroyContentRef()))
+            .pipe(takeWhile(() => this._alive), filter$1(() => this._open), filter$1(() => this._componentRef != null), filter$1((event) => !DomUtil.clickedInside(this._elementRef.nativeElement, event)), filter$1((event) => !DomUtil.clickedInside(this._componentRef?.location.nativeElement, event)), tap(_ => this.destroyContentRef()))
             .subscribe();
     }
     setPosition() {