@c8y/ngx-components 1016.0.379 → 1016.0.383

package/fesm2020/c8y-ngx-components.mjs

@@ -3897,6 +3897,20 @@ class RealtimeService {
     get active() {
         return this.isActive.value;
     }
+    /**
+     * An observable emitting a value in case the realtime connection has been interrupted.
+     * Can be used to reload data of e.g. a datapoint graph that wasn't received while realtime was interrupted.
+     */
+    get reconnect$() {
+        return this.realtimeSubject.reconnect$;
+    }
+    /**
+     * An observable emitting either `connected` or `disconnected` depending on the state of the realtime connection.
+     * Can be used to e.g. inform the user about the interrupted realtime connection.
+     */
+    get connectionStatus$() {
+        return this.realtimeSubject.connectionStatus$;
+    }
     /**
      * Get an Observable of all realtime notifications.
      *
@@ -24227,6 +24241,13 @@ class RangeDisplayComponent {
         this.sanitizer = sanitizer;
         this.config = {};
         this.display = 'full';
+        this.currentRangeWidthChanged = new Subject();
+        // width of current range is changing within 150ms, see style declaration for .range-display__range__current
+        this.CURRENT_RANGE_WIDTH_TRANSITION_TIME = 150;
+        this.DEFAULT_TOOLTIP_SHIFT = '50%';
+        this.MIN_TOOLTIP_SHIFT = 10;
+        this.tooltipShift = this.DEFAULT_TOOLTIP_SHIFT;
+        this.destroyed$ = new Subject();
     }
     get inlineStyle() {
         this.config = this.config || {};
@@ -24242,6 +24263,8 @@ class RangeDisplayComponent {
         return this.sanitizer.bypassSecurityTrustStyle(`
           --range-min: ${this.config.min};
           --range-max: ${this.config.max};
+          --range-display-tooltip-translate: translate(${this.tooltipShift}, -56px);
+          --range-display-tooltip-bg: ${this.getTooltipBackground()};
           --full-range: ${this.config.max - this.config.min};
           --measurement-target: ${((this.config.target - this.config.min) * 100) / (this.config.max - this.config.min)}%;
           --measurement-current: ${((this.config.current - this.config.min) * 100) / (this.config.max - this.config.min)}%;
@@ -24255,6 +24278,20 @@ class RangeDisplayComponent {
             100}%;
         `);
     }
+    ngOnChanges() {
+        // It's necessary to handle tooltip shifting both in OnChanges and AfterViewInit. In case of Linear gauge widget, view is
+        // rendered first (so as elements needed for calculating shifting) and config orientation is set later on.
+        // In other cases it's possible that orientation is defined on initialization of class and view elements are rendered later.
+        this.setupTooltipShiftingIfPossible();
+    }
+    ngAfterViewInit() {
+        this.setupTooltipShiftingIfPossible();
+    }
+    ngOnDestroy() {
+        this.currentRangeWidthObserver?.disconnect();
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
     checkTarget() {
         return (this.config.target !== undefined &&
             this.config.target !== null &&
@@ -24282,12 +24319,64 @@ class RangeDisplayComponent {
     isRangeDisplayed(rangeMin, rangeMax) {
         return rangeMin === 0 || rangeMax === 0 || (rangeMin && rangeMax);
     }
+    setupTooltipShifting() {
+        this.currentRangeWidthObserver = new ResizeObserver(([val]) => {
+            if (getComputedStyle(val.target, null).display === 'block') {
+                this.currentRangeWidthChanged.next(val.target);
+            }
+        });
+        this.currentRangeWidthObserver.observe(this.currentRangeElement.nativeElement);
+        this.currentRangeWidthChanged
+            .pipe(debounceTime(this.CURRENT_RANGE_WIDTH_TRANSITION_TIME), map((rangeElement) => parseInt(getComputedStyle(rangeElement, null).width)), distinctUntilChanged(), takeUntil(this.destroyed$))
+            .subscribe(rangeElementWidth => {
+            this.setTooltipShiftValue(rangeElementWidth);
+        });
+    }
+    setTooltipShiftValue(rangeElementWidth) {
+        const tooltipWidth = parseInt(getComputedStyle(this.currentRangeElement.nativeElement, ':after').width);
+        const currentRangeWidth = rangeElementWidth;
+        const rangeDisplayWidth = parseInt(getComputedStyle(this.rangeDisplay.nativeElement, null).getPropertyValue('width'));
+        const rangeDisplayPaddingLeft = parseInt(getComputedStyle(this.rangeDisplay.nativeElement, null).getPropertyValue('padding-left'));
+        const tooltipOverflowsLeftEdge = tooltipWidth / 2 > rangeDisplayPaddingLeft + currentRangeWidth;
+        const tooltipOverflowsRightEdge = tooltipWidth / 2 > rangeDisplayWidth - rangeDisplayPaddingLeft - currentRangeWidth;
+        if (tooltipOverflowsLeftEdge) {
+            this.tooltipShift = `${tooltipWidth - this.MIN_TOOLTIP_SHIFT}px`;
+        }
+        else if (tooltipOverflowsRightEdge) {
+            this.tooltipShift = `${this.MIN_TOOLTIP_SHIFT}px`;
+        }
+        else {
+            this.tooltipShift = this.DEFAULT_TOOLTIP_SHIFT;
+        }
+    }
+    setupTooltipShiftingIfPossible() {
+        if (this.config?.orientation === 'horizontal' &&
+            !this.currentRangeWidthObserver &&
+            this.rangeDisplay &&
+            this.currentRangeElement) {
+            this.setupTooltipShifting();
+        }
+    }
+    getTooltipBackground() {
+        const current = this.config.current;
+        switch (true) {
+            case this.isValueInRange(current, this.config.redRangeMin, this.config.redRangeMax):
+                return 'var(--input-validation-error, #E0000E)';
+            case this.isValueInRange(current, this.config.yellowRangeMin, this.config.yellowRangeMax):
+                return 'var(--input-validation-warning, #FF801F)';
+            default:
+                return 'var(--gray-3, #394852)';
+        }
+    }
+    isValueInRange(value, min, max) {
+        return min != null && max != null && value >= min && value <= max;
+    }
 }
 RangeDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RangeDisplayComponent, deps: [{ token: i2$5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-RangeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: RangeDisplayComponent, selector: "c8y-range-display", inputs: { config: "config", display: "display" }, host: { properties: { "attr.style": "this.inlineStyle" } }, ngImport: i0, template: "<div [ngClass]=\"{ 'range-display--vertical': config.orientation === 'vertical',\n  'range-display--compact' : display ==='compact',\n  'range-display--inline' : display ==='inline' }\" \n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div class=\"range-display\">\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div *ngIf=\"isYellowRangeDisplayed()\" class=\"range-display__range__min\"></div>\n      <div *ngIf=\"isRedRangeDisplayed()\" class=\"range-display__range__max\"></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        *ngIf=\"\n          config.current != undefined &&\n          config.current >= config.min &&\n          config.current <= config.max\n        \"\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa; {{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div attr.data-label=\"{{ config.max || 100 | number }}\" class=\"range-display__tick\"></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
+RangeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: RangeDisplayComponent, selector: "c8y-range-display", inputs: { config: "config", display: "display" }, host: { properties: { "attr.style": "this.inlineStyle" } }, viewQueries: [{ propertyName: "rangeDisplay", first: true, predicate: ["rangeDisplay"], descendants: true }, { propertyName: "currentRangeElement", first: true, predicate: ["currentRangeElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'range-display--vertical': config.orientation === 'vertical',\n    'range-display--compact': display === 'compact',\n    'range-display--inline': display === 'inline'\n  }\"\n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div\n    class=\"range-display\"\n    #rangeDisplay\n  >\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div\n        *ngIf=\"isYellowRangeDisplayed()\"\n        class=\"range-display__range__min\"\n      ></div>\n      <div\n        *ngIf=\"isRedRangeDisplayed()\"\n        class=\"range-display__range__max\"\n      ></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        [ngStyle]=\"{\n          display:\n            config.current != undefined &&\n            config.current >= config.min &&\n            config.current <= config.max\n              ? 'block'\n              : 'none'\n        }\"\n        #currentRangeElement\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div\n        attr.data-label=\"{{ config.max || 100 | number }}\"\n        class=\"range-display__tick\"\n      ></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RangeDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-range-display', template: "<div [ngClass]=\"{ 'range-display--vertical': config.orientation === 'vertical',\n  'range-display--compact' : display ==='compact',\n  'range-display--inline' : display ==='inline' }\" \n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div class=\"range-display\">\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div *ngIf=\"isYellowRangeDisplayed()\" class=\"range-display__range__min\"></div>\n      <div *ngIf=\"isRedRangeDisplayed()\" class=\"range-display__range__max\"></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        *ngIf=\"\n          config.current != undefined &&\n          config.current >= config.min &&\n          config.current <= config.max\n        \"\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa; {{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div attr.data-label=\"{{ config.max || 100 | number }}\" class=\"range-display__tick\"></div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-range-display', template: "<div\n  [ngClass]=\"{\n    'range-display--vertical': config.orientation === 'vertical',\n    'range-display--compact': display === 'compact',\n    'range-display--inline': display === 'inline'\n  }\"\n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div\n    class=\"range-display\"\n    #rangeDisplay\n  >\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div\n        *ngIf=\"isYellowRangeDisplayed()\"\n        class=\"range-display__range__min\"\n      ></div>\n      <div\n        *ngIf=\"isRedRangeDisplayed()\"\n        class=\"range-display__range__max\"\n      ></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        [ngStyle]=\"{\n          display:\n            config.current != undefined &&\n            config.current >= config.min &&\n            config.current <= config.max\n              ? 'block'\n              : 'none'\n        }\"\n        #currentRangeElement\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div\n        attr.data-label=\"{{ config.max || 100 | number }}\"\n        class=\"range-display__tick\"\n      ></div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i2$5.DomSanitizer }]; }, propDecorators: { config: [{
                 type: Input
             }], display: [{
@@ -24295,6 +24384,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             }], inlineStyle: [{
                 type: HostBinding,
                 args: ['attr.style']
+            }], rangeDisplay: [{
+                type: ViewChild,
+                args: ['rangeDisplay', { static: false }]
+            }], currentRangeElement: [{
+                type: ViewChild,
+                args: ['currentRangeElement', { static: false }]
             }] } });
 
 /**
@@ -25555,6 +25650,8 @@ class RealtimeSubjectService {
     constructor(realtime) {
         this.realtime = realtime;
         this.subjects$ = new Map();
+        this.reconnect$ = this.createObservableForReconnect().pipe(share());
+        this.connectionStatus$ = this.createObservableForConnectionStatus().pipe(distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
     }
     getObservableForChannel(channel) {
         if (this.subjects$.has(channel)) {
@@ -25567,7 +25664,7 @@ class RealtimeSubjectService {
     }
     createObservableForChannel(channel, realtime) {
         return new Observable(observer => {
-            const realtimeSubscription = realtime.subscribe(channel, msg => {
+            let realtimeSubscription = realtime.subscribe(channel, msg => {
                 const data = {
                     channel: msg.channel,
                     data: msg.data.data,
@@ -25576,13 +25673,54 @@ class RealtimeSubjectService {
                 };
                 observer.next(data);
             });
+            /**
+             * In (rare) case of a re-handshake, resubscribe valid subscriptions.
+             * @see https://docs.cometd.org/current/reference/#_javascript_subscribe_resubscribe
+             */
+            const reconnectSubscription = this.reconnect$.subscribe(() => {
+                try {
+                    realtimeSubscription = this.realtime.resubscribe(realtimeSubscription);
+                }
+                catch (e) {
+                    console.warn(`Failed to resubscribe to channel: "${channel}" after reconnect.`, e);
+                    observer.error(e);
+                }
+            });
             return {
-                unsubscribe() {
+                unsubscribe: () => {
+                    reconnectSubscription.unsubscribe();
                     realtime.unsubscribe(realtimeSubscription);
                 }
             };
         });
     }
+    createObservableForReconnect() {
+        return new Observable(observer => {
+            const handle = this.realtime.addHandshakeListener(msg => {
+                if (msg.successful && msg.reestablish) {
+                    observer.next();
+                }
+            });
+            return {
+                unsubscribe: () => {
+                    this.realtime.removeListener(handle);
+                }
+            };
+        });
+    }
+    createObservableForConnectionStatus() {
+        return new Observable(observer => {
+            observer.next(!this.realtime.isDisconnected() ? 'connected' : 'disconnected');
+            const handle = this.realtime.addConnectListener(msg => {
+                observer.next(msg.successful ? 'connected' : 'disconnected');
+            });
+            return {
+                unsubscribe: () => {
+                    this.realtime.removeListener(handle);
+                }
+            };
+        });
+    }
 }
 RealtimeSubjectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RealtimeSubjectService, deps: [{ token: i1$2.Realtime }], target: i0.ɵɵFactoryTarget.Injectable });
 RealtimeSubjectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RealtimeSubjectService, providedIn: 'root' });