@tetacom/ng-components 1.5.1 → 1.5.2

package/component/input/color-input/color-input.component.d.ts

@@ -3,6 +3,7 @@ import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class ColorInputComponent implements ControlValueAccessor {
     private _cdr;
+    private elementRef;
     disabled: boolean;
     input: ElementRef;
     value: string;

package/directive/scrollable/scrollable/scrollable.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentChecked, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 type ScrollDimensions = {
@@ -7,7 +7,7 @@ type ScrollDimensions = {
     scrollHeight: number;
     scrollWidth: number;
 };
-export declare class ScrollableComponent implements OnInit, OnDestroy, AfterContentChecked {
+export declare class ScrollableComponent implements OnInit, OnDestroy {
     private _scrollDirective;
     private _scrollableWrapper;
     private _scrollbarVertical;
@@ -20,14 +20,14 @@ export declare class ScrollableComponent implements OnInit, OnDestroy, AfterCont
     scrollSize: Observable<ScrollDimensions>;
     private _container;
     private _alive;
-    private _observer;
+    private resizeObserver;
+    private mutationObserver;
     constructor();
     private _observe;
     scrollVertical(event: any): void;
     scrollHorizontal(event: any): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
-    ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScrollableComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ScrollableComponent, "teta-scrollable", never, { "direction": { "alias": "direction"; "required": false; }; "showScrollbars": { "alias": "showScrollbars"; "required": false; }; "contentClass": { "alias": "contentClass"; "required": false; }; }, { "scroll": "scroll"; }, ["_scrollDirective"], ["*"], true, never>;
 }

package/fesm2022/tetacom-ng-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Injectable, Host, HostListener, ViewChild, forwardRef, ElementRef, EventEmitter, Output, TemplateRef, Injector, ViewContainerRef, Pipe, ViewEncapsulation, ChangeDetectorRef, NgModule, inject, input, computed, output, contentChildren, effect, ContentChildren, 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, inject, NgModule, input, computed, output, contentChildren, effect, ContentChildren, 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';
@@ -7,7 +7,7 @@ import { HttpClient } from '@angular/common/http';
 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 { BehaviorSubject, ReplaySubject, combineLatest, takeWhile as takeWhile$1, filter, map as map$1, lastValueFrom, take, shareReplay, Subject, debounceTime, animationFrameScheduler, distinctUntilChanged, 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, FormGroup, NgForm, ReactiveFormsModule } from '@angular/forms';
@@ -3649,18 +3649,25 @@ class ScrollableComponent {
         this._observe = () => {
             this._scrollSize.next();
         };
-        this.scrollSize = this._scrollSize.asObservable().pipe(throttleTime(100, animationFrameScheduler), map(() => {
+        this.scrollSize = this._scrollSize.asObservable().pipe(debounceTime(100, animationFrameScheduler), map(() => {
+            const { scrollHeight, clientHeight, scrollWidth, clientWidth } = this._container.nativeElement;
             return {
-                scrollHeight: this._container.nativeElement.scrollHeight,
-                scrollWidth: this._container.nativeElement.scrollWidth,
-                clientHeight: this._container.nativeElement.clientHeight,
-                clientWidth: this._container.nativeElement.clientWidth,
+                scrollHeight,
+                clientHeight,
+                scrollWidth,
+                clientWidth,
             };
+        }), distinctUntilChanged((previous, current) => {
+            return (previous.scrollHeight === current.scrollHeight &&
+                previous.clientHeight === current.clientHeight &&
+                previous.scrollWidth === current.scrollWidth &&
+                previous.clientWidth === current.clientWidth);
         }), shareReplay({
             refCount: true,
             bufferSize: 1,
         }));
-        this._observer = new ResizeObserver(this._observe);
+        this.resizeObserver = new ResizeObserver(this._observe);
+        this.mutationObserver = new MutationObserver(this._observe);
     }
     scrollVertical(event) {
         this._container.nativeElement.scrollTop = event.target.scrollTop;
@@ -3680,15 +3687,18 @@ class ScrollableComponent {
             this.scroll.emit(event);
         }))
             .subscribe();
-        this._observer.observe(this._container.nativeElement);
+        this.resizeObserver.observe(this._container.nativeElement);
+        this.mutationObserver.observe(this._container.nativeElement, {
+            attributes: false,
+            childList: true,
+            subtree: true,
+        });
     }
     ngOnDestroy() {
         this._alive = false;
-        this._observer.unobserve(this._container.nativeElement);
-        this._observer.disconnect();
-    }
-    ngAfterContentChecked() {
-        this._observe();
+        this.resizeObserver.unobserve(this._container.nativeElement);
+        this.resizeObserver.disconnect();
+        this.mutationObserver.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScrollableComponent, isStandalone: true, selector: "teta-scrollable", inputs: { direction: "direction", showScrollbars: "showScrollbars", contentClass: "contentClass" }, outputs: { scroll: "scroll" }, host: { properties: { "class.show-scrollbars": "this.showScrollbars" } }, queries: [{ propertyName: "_scrollDirective", first: true, predicate: ScrollableDirective, descendants: true, read: ElementRef, static: true }], viewQueries: [{ propertyName: "_scrollableWrapper", first: true, predicate: ["scrollableWrapper"], descendants: true, static: true }, { propertyName: "_scrollbarVertical", first: true, predicate: ["scrollbarVertical"], descendants: true, static: true }, { propertyName: "_scrollbarHorizontal", first: true, predicate: ["scrollbarHorizontal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"scroll-controls\" *tetaLet=\"scrollSize | async as scrollSize\">\n  <div\n    #scrollbarVertical\n    [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n    class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n    (scroll)=\"scrollVertical($event)\"\n  >\n    <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px\"></div>\n  </div>\n  <div\n    #scrollbarHorizontal\n    [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n    class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n    (scroll)=\"scrollHorizontal($event)\"\n  >\n    <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px\"></div>\n  </div>\n</div>\n\n<div #scrollableWrapper class=\"scroll-content-wrapper\" [ngClass]=\"contentClass\" [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -4708,6 +4718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ColorInputComponent {
     constructor(_cdr) {
         this._cdr = _cdr;
+        this.elementRef = inject(ElementRef);
         this.disabled = false;
         this.value = '';
     }
@@ -4737,6 +4748,13 @@ class ColorInputComponent {
     onChange(input) { }
     onTouched() { }
     getHexColor(color) {
+        if (color && color.startsWith('var')) {
+            const value = color.substring(color.indexOf('(') + 1, color.lastIndexOf(')'));
+            const varColor = getComputedStyle(this.elementRef.nativeElement).getPropertyValue(value).trim();
+            if (varColor) {
+                color = varColor;
+            }
+        }
         if (color && color.startsWith('rgb')) {
             const value = color.substring(color.indexOf('(') + 1, color.lastIndexOf(')'));
             const colorArray = value.split(',');