@tetacom/ng-components 1.1.14 → 1.1.16

package/fesm2022/tetacom-ng-components.mjs

@@ -1649,7 +1649,7 @@ class DropdownBase {
     }
     setPosition(container, target) {
         const containerPosition = container.getBoundingClientRect();
-        // target.style.maxHeight = null;
+        target.style.maxHeight = null;
         const targetPosition = target.getBoundingClientRect();
         const rect = {
             bottom: containerPosition.bottom,
@@ -12072,11 +12072,11 @@ class Chart3dService {
         this.data = this.data$.asObservable();
         this.minMax = this.minMax$.asObservable();
         this.data
-            .pipe(tap$1((_) => {
+            .pipe(tap$1(_ => {
             this.minMax$.next(this.getAxesMinMax(_));
         }))
             .subscribe();
-        this.scales = this.minMax.pipe(map$1((minMax) => {
+        this.scales = this.minMax.pipe(map$1(minMax => {
             return this.getScales(minMax);
         }), shareReplay(1));
     }
@@ -12085,20 +12085,29 @@ class Chart3dService {
     }
     getAxesMinMax(data) {
         const zArr = data.series
-            .map((_) => {
-            return _.data.map((d) => d.z);
+            .map(_ => {
+            return _?.data?.map(d => d?.z);
         })
-            .flat();
+            .flat()
+            .filter(_ => {
+            return _ !== null && _ !== undefined;
+        });
         const xArr = data.series
-            .map((_) => {
-            return _.data.map((d) => d.x);
+            .map(_ => {
+            return _?.data?.map(d => d?.x);
         })
-            .flat();
+            .flat()
+            .filter(_ => {
+            return _ !== null && _ !== undefined;
+        });
         const yArr = data.series
-            .map((_) => {
-            return _.data.map((d) => d.y);
+            .map(_ => {
+            return _?.data?.map(d => d?.y);
         })
-            .flat();
+            .flat()
+            .filter(_ => {
+            return _ !== null && _ !== undefined;
+        });
         const ZMinMaxVal = [Math.min(...zArr), Math.max(...zArr)];
         const XMinMaxVal = [Math.min(...xArr), Math.max(...xArr)];
         const YMinMaxVal = [Math.min(...yArr), Math.max(...yArr)];
@@ -12272,11 +12281,11 @@ class Axes3dComponent {
         this._alive = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes.y;let i=index\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes.z;let i=index\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes.y;let i=index\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes.z;let i=index\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n" }]
+            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { rotation: [{
                 type: Input
             }] } });
@@ -12293,22 +12302,21 @@ class Block3dComponent extends Base3dSeriesComponent {
         this.svc = svc;
         this.ngtStore = ngtStore;
         this.blocks = this.svc.scales.pipe(takeWhile(() => this._alive), map$1(scales => {
-            return this.series?.data.map(_ => {
-                return this.createSVGTexture(scales.y(_.y), scales.y(_.y1), _.iconId);
+            return this.series?.data?.map(_ => {
+                return this.createSVGTexture(scales.y(_?.y), scales.y(_?.y1), _?.iconId);
             });
         }));
     }
-    // ngOnInit(): void {}
     createSVGTexture(y, y1, iconId) {
         const max = Math.max(y, y1);
         const min = Math.min(y, y1);
         const height = Math.abs(max - min);
-        const icon = document.querySelector(`#${iconId}`);
-        const svgString = `<svg width='100' height='100' viewBox='0 0 16 16' fill='none'  xmlns='http://www.w3.org/2000/svg'>${icon.innerHTML}</svg>`;
+        const icon = iconId ? document.querySelector(`#${iconId}`) : null;
+        const svgString = icon ? `<svg width='100' height='100' viewBox='0 0 16 16' fill='none'  xmlns='http://www.w3.org/2000/svg'>${icon?.innerHTML}</svg>` : null;
         const loader = new THREE.TextureLoader();
         const texture = loader.load(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`);
-        const plane = this.createTexturedPlane(texture, 100, height);
-        const plane1 = this.createTexturedPlane(texture, 25, height);
+        const plane = this.createTexturedPlane(texture, 100, height, !!icon);
+        const plane1 = this.createTexturedPlane(texture, 25, height, !!icon);
         plane.rotation.set(0, Math.PI / 2, 0);
         plane.position.set(0.17, min + height / 2, 0);
         plane1.position.set(25 / 2, min + height / 2, -50 + 0.17);
@@ -12317,22 +12325,22 @@ class Block3dComponent extends Base3dSeriesComponent {
             { component: plane1, position: min + height / 2 },
         ];
     }
-    createTexturedPlane(texture, width, height) {
+    createTexturedPlane(texture, width, height, visible) {
         texture.wrapS = THREE.RepeatWrapping;
         texture.wrapT = THREE.RepeatWrapping;
-        texture.repeat.set(10, 9);
-        const material = new THREE.MeshBasicMaterial({ map: texture });
+        texture.repeat.set(10, height / 9);
+        const material = new THREE.MeshBasicMaterial({ map: texture, visible });
         const geometry = new THREE.PlaneGeometry(width, height, 1, 1);
         const uvs = geometry.attributes['uv'].array;
         const newUvs = new Float32Array(uvs);
         newUvs[0] = 0;
-        newUvs[1] = 0;
+        newUvs[1] = 1;
         newUvs[2] = width / 100;
-        newUvs[3] = 0;
+        newUvs[3] = 1;
         newUvs[4] = 0;
-        newUvs[5] = height / 100;
+        newUvs[5] = 0;
         newUvs[6] = width / 100;
-        newUvs[7] = height / 100;
+        newUvs[7] = 0;
         geometry.attributes['uv'].needsUpdate = true;
         geometry.setAttribute('uv', new THREE.BufferAttribute(newUvs, 2));
         return new THREE.Mesh(geometry, material);
@@ -12359,26 +12367,24 @@ class Line3dComponent extends Base3dSeriesComponent {
         super(svc, ngtStore);
         this.svc = svc;
         this.ngtStore = ngtStore;
-        this.points = this.svc.scales.pipe(takeWhile(() => this._alive), map$1((scales) => {
+        this.points = this.svc.scales.pipe(takeWhile(() => this._alive), map$1(scales => {
             return this.getPoints(scales);
         }));
     }
     getPoints(scales) {
-        return this.series.data
-            .map((_) => {
-            return [scales.x(_.x), scales.y(_.y), scales.z(_.z)];
-        })
-            .flat();
+        return this.series?.data?.map(_ => {
+            return [scales.x(_?.x), scales.y(_?.y), scales.z(_?.z)];
+        });
     }
     ngOnDestroy() {
         this._alive = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Line3dComponent, deps: [{ token: Chart3dService }, { token: i2.NgtStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Line3dComponent, isStandalone: true, selector: "teta-line-3d", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{points:points|async}as data\">\n  <ngt-mesh>\n    <ngts-line [color]=\"series.color\" [lineWidth]=\"2\" [points]=\"data.points\"></ngts-line>\n    <ngt-line-basic-material></ngt-line-basic-material>\n  </ngt-mesh>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Line3dComponent, isStandalone: true, selector: "teta-line-3d", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{points:points|async}as data\">\n  <ngt-mesh *ngIf=\"data?.points?.length\">\n    <ngts-line [color]=\"series.color\" [lineWidth]=\"2\" [points]=\"data.points\"></ngts-line>\n    <ngt-line-basic-material></ngt-line-basic-material>\n  </ngt-mesh>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Line3dComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-line-3d', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, NgtsLine, NgtArgs], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"{points:points|async}as data\">\n  <ngt-mesh>\n    <ngts-line [color]=\"series.color\" [lineWidth]=\"2\" [points]=\"data.points\"></ngts-line>\n    <ngt-line-basic-material></ngt-line-basic-material>\n  </ngt-mesh>\n</ng-container>\n" }]
+            args: [{ selector: 'teta-line-3d', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, NgtsLine, NgtArgs], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"{points:points|async}as data\">\n  <ngt-mesh *ngIf=\"data?.points?.length\">\n    <ngts-line [color]=\"series.color\" [lineWidth]=\"2\" [points]=\"data.points\"></ngts-line>\n    <ngt-line-basic-material></ngt-line-basic-material>\n  </ngt-mesh>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: Chart3dService }, { type: i2.NgtStore }]; } });
 
 var Series3dType;
@@ -12483,11 +12489,11 @@ class ThreeChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ThreeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ThreeChartComponent, isStandalone: true, selector: "teta-three-chart", inputs: { data: "data" }, providers: [NgtStore], usesOnChanges: true, ngImport: i0, template: "<div class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n              [camera]=\"camera\">\n  </ngt-canvas>\n  <ng-template #noData>\n    <p>{{data.noDataText}}</p>\n  </ng-template>\n</div>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgtCanvas, selector: "ngt-canvas", inputs: ["sceneGraph", "sceneGraphInputs", "compoundPrefixes", "linear", "legacy", "flat", "orthographic", "frameloop", "dpr", "raycaster", "shadows", "camera", "gl", "eventSource", "eventPrefix", "lookAt", "performance"], outputs: ["created", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ThreeChartComponent, isStandalone: true, selector: "teta-three-chart", inputs: { data: "data" }, providers: [NgtStore], usesOnChanges: true, ngImport: i0, template: "<div class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n              [camera]=\"camera\">\n  </ngt-canvas>\n  <ng-template #noData>\n    <p>{{data?.noDataText||'no data'}}</p>\n  </ng-template>\n</div>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgtCanvas, selector: "ngt-canvas", inputs: ["sceneGraph", "sceneGraphInputs", "compoundPrefixes", "linear", "legacy", "flat", "orthographic", "frameloop", "dpr", "raycaster", "shadows", "camera", "gl", "eventSource", "eventPrefix", "lookAt", "performance"], outputs: ["created", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ThreeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule], template: "<div class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n              [camera]=\"camera\">\n  </ngt-canvas>\n  <ng-template #noData>\n    <p>{{data.noDataText}}</p>\n  </ng-template>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
+            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule], template: "<div class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n              [camera]=\"camera\">\n  </ngt-canvas>\n  <ng-template #noData>\n    <p>{{data?.noDataText||'no data'}}</p>\n  </ng-template>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });