@colijnit/corecomponents_v12 261.20.19 → 261.20.20

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Input, Injectable, HostBinding, ViewEncapsulation, Component, Directive, ElementRef, Pipe, EventEmitter, Output, ViewChildren, ViewContainerRef, HostListener, ViewChild, Optional, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, ContentChildren, LOCALE_ID, NO_ERRORS_SCHEMA, Injector, QueryList } from '@angular/core';
+import { Input, Injectable, HostBinding, ViewEncapsulation, Component, Directive, ElementRef, Pipe, EventEmitter, Output, ViewChildren, ViewContainerRef, HostListener, ViewChild, Optional, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, ContentChildren, LOCALE_ID, NO_ERRORS_SCHEMA, Injector, RendererStyleFlags2, QueryList } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { NgModel, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
@@ -18046,6 +18046,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+const ARROW_CENTER_PROPERTY = '--co-tooltip-arrow-center';
+const ARROW_EDGE_INSET_PX = 15;
+const VIEWPORT_MARGIN_PX = 5;
+const ORIENTATIONS = [CoDirection.Up, CoDirection.Down, CoDirection.Left, CoDirection.Right];
+const OPPOSITE_ORIENTATION = new Map([
+    [CoDirection.Up, CoDirection.Down],
+    [CoDirection.Down, CoDirection.Up],
+    [CoDirection.Left, CoDirection.Right],
+    [CoDirection.Right, CoDirection.Left]
+]);
 class TooltipComponent {
     _elementRef;
     _changeDetector;
@@ -18058,14 +18068,27 @@ class TooltipComponent {
         return this._hostElement;
     }
     toolTip;
+    orientation = CoDirection.Up;
     tooltipClosed = new EventEmitter();
     showClass() {
         return true;
     }
     top = -100;
     left = -100;
-    bottom = false;
+    get isTop() {
+        return this._resolvedOrientation === CoDirection.Up;
+    }
+    get isBottom() {
+        return this._resolvedOrientation === CoDirection.Down;
+    }
+    get isLeft() {
+        return this._resolvedOrientation === CoDirection.Left;
+    }
+    get isRight() {
+        return this._resolvedOrientation === CoDirection.Right;
+    }
     animate = true;
+    _resolvedOrientation = CoDirection.Up;
     _hostElement;
     _documentClickListener;
     constructor(_elementRef, _changeDetector, _renderer) {
@@ -18090,31 +18113,103 @@ class TooltipComponent {
         }
     }
     _positionTooltip() {
-        if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
-            const rect = this.hostElement.getBoundingClientRect();
-            const ownRect = this._elementRef.nativeElement.getBoundingClientRect();
-            let wantedLeft = rect.left;
-            let wantedTop = rect.top - ownRect.height;
-            if (wantedTop < 0) { // out of view, move to bottom
-                this.bottom = true;
-                wantedTop = rect.bottom;
-            }
-            else {
-                this.bottom = false;
-            }
-            this.left = wantedLeft;
-            this.top = wantedTop;
-            this._changeDetector.markForCheck();
-            this._changeDetector.detectChanges();
+        if (!this.hostElement || !this._elementRef || !this._elementRef.nativeElement) {
+            return;
+        }
+        const element = this._elementRef.nativeElement;
+        const hostRect = this.hostElement.getBoundingClientRect();
+        this._resolvedOrientation = this._resolveOrientation(hostRect, element.getBoundingClientRect());
+        // Apply the horizontal position first: it determines the available width, and therefore the height.
+        this.left = this._calculateLeft(hostRect, element.getBoundingClientRect());
+        this._changeDetector.detectChanges();
+        const ownRect = element.getBoundingClientRect();
+        this.top = this._calculateTop(hostRect, ownRect);
+        this._positionArrow(hostRect, ownRect);
+        this._changeDetector.markForCheck();
+        this._changeDetector.detectChanges();
+    }
+    _resolveOrientation(hostRect, ownRect) {
+        const preferred = ORIENTATIONS.indexOf(this.orientation) < 0 ? CoDirection.Up : this.orientation;
+        const opposite = OPPOSITE_ORIENTATION.get(preferred);
+        const candidates = [
+            preferred,
+            opposite,
+            ...ORIENTATIONS.filter((orientation) => orientation !== preferred && orientation !== opposite)
+        ];
+        const fitting = candidates.find((orientation) => this._fits(orientation, hostRect, ownRect));
+        if (fitting) {
+            return fitting;
+        }
+        // Nothing fits: fall back to the side with the most room, so the tooltip overlaps the host as little as possible.
+        return candidates.reduce((best, orientation) => this._availableSpace(orientation, hostRect) > this._availableSpace(best, hostRect) ? orientation : best, preferred);
+    }
+    _fits(orientation, hostRect, ownRect) {
+        switch (orientation) {
+            case CoDirection.Up:
+                return (hostRect.top - ownRect.height) >= VIEWPORT_MARGIN_PX;
+            case CoDirection.Down:
+                return (hostRect.bottom + ownRect.height) <= (document.documentElement.clientHeight - VIEWPORT_MARGIN_PX);
+            case CoDirection.Left:
+                return (hostRect.left - ownRect.width) >= VIEWPORT_MARGIN_PX;
+            default:
+                return (hostRect.right + ownRect.width) <= (document.documentElement.clientWidth - VIEWPORT_MARGIN_PX);
+        }
+    }
+    _availableSpace(orientation, hostRect) {
+        switch (orientation) {
+            case CoDirection.Up:
+                return hostRect.top;
+            case CoDirection.Down:
+                return document.documentElement.clientHeight - hostRect.bottom;
+            case CoDirection.Left:
+                return hostRect.left;
+            default:
+                return document.documentElement.clientWidth - hostRect.right;
+        }
+    }
+    _calculateLeft(hostRect, ownRect) {
+        let wantedLeft = hostRect.left; // aligned with the host for the vertical orientations
+        if (this._resolvedOrientation === CoDirection.Left) {
+            wantedLeft = hostRect.left - ownRect.width;
+        }
+        else if (this._resolvedOrientation === CoDirection.Right) {
+            wantedLeft = hostRect.right;
+        }
+        const maxLeft = document.documentElement.clientWidth - ownRect.width - VIEWPORT_MARGIN_PX;
+        return Math.max(VIEWPORT_MARGIN_PX, Math.min(wantedLeft, maxLeft));
+    }
+    _calculateTop(hostRect, ownRect) {
+        // Centred on the host for the horizontal orientations, so the arrow lands halfway up the edge
+        // instead of being clamped against the top corner by hosts that are shorter than the tooltip.
+        let wantedTop = hostRect.top + ((hostRect.height - ownRect.height) / 2);
+        if (this._resolvedOrientation === CoDirection.Up) {
+            wantedTop = hostRect.top - ownRect.height;
         }
+        else if (this._resolvedOrientation === CoDirection.Down) {
+            wantedTop = hostRect.bottom;
+        }
+        const maxTop = document.documentElement.clientHeight - ownRect.height - VIEWPORT_MARGIN_PX;
+        return Math.max(VIEWPORT_MARGIN_PX, Math.min(wantedTop, maxTop));
+    }
+    _positionArrow(hostRect, ownRect) {
+        const element = this._elementRef.nativeElement;
+        const alongVerticalEdge = this.isLeft || this.isRight;
+        const borderWidth = alongVerticalEdge ? element.clientTop : element.clientLeft;
+        const paddingBoxSize = (alongVerticalEdge ? ownRect.height : ownRect.width) - (2 * borderWidth);
+        const hostCenter = alongVerticalEdge
+            ? (hostRect.top + (hostRect.height / 2)) - this.top - borderWidth
+            : (hostRect.left + (hostRect.width / 2)) - this.left - borderWidth;
+        const maxCenter = Math.max(ARROW_EDGE_INSET_PX, paddingBoxSize - ARROW_EDGE_INSET_PX);
+        const arrowCenter = Math.min(Math.max(hostCenter, ARROW_EDGE_INSET_PX), maxCenter);
+        this._renderer.setStyle(element, ARROW_CENTER_PROPERTY, `${arrowCenter}px`, RendererStyleFlags2.DashCase);
     }
     closeTooltip() {
         this.tooltipClosed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TooltipComponent, isStandalone: false, selector: "co-tooltip", inputs: { hostElement: "hostElement", toolTip: "toolTip" }, outputs: { tooltipClosed: "tooltipClosed" }, host: { properties: { "class.co-tooltip": "this.showClass", "style.top.px": "this.top", "style.left.px": "this.left", "class.bottom": "this.bottom", "@showHide": "this.animate" } }, ngImport: i0, template: `
-    <div class="tooltip" [innerHTML]="toolTip"></div>
-  `, isInline: true, animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TooltipComponent, isStandalone: false, selector: "co-tooltip", inputs: { hostElement: "hostElement", toolTip: "toolTip", orientation: "orientation" }, outputs: { tooltipClosed: "tooltipClosed" }, host: { properties: { "class.co-tooltip": "this.showClass", "style.top.px": "this.top", "style.left.px": "this.left", "class.top": "this.isTop", "class.bottom": "this.isBottom", "class.left": "this.isLeft", "class.right": "this.isRight", "@showHide": "this.animate" } }, ngImport: i0, template: `
+      <div class="tooltip" [innerHTML]="toolTip"></div>
+    `, isInline: true, animations: [
             trigger("showHide", [
                 state("void", style({ opacity: 0 })),
                 state("*", style({ opacity: 1 })),
@@ -18127,8 +18222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     selector: 'co-tooltip',
                     template: `
-    <div class="tooltip" [innerHTML]="toolTip"></div>
-  `,
+      <div class="tooltip" [innerHTML]="toolTip"></div>
+    `,
                     animations: [
                         trigger("showHide", [
                             state("void", style({ opacity: 0 })),
@@ -18144,6 +18239,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], toolTip: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }], tooltipClosed: [{
                 type: Output
             }], showClass: [{
@@ -18155,14 +18252,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], left: [{
                 type: HostBinding,
                 args: ["style.left.px"]
-            }], bottom: [{
+            }], isTop: [{
+                type: HostBinding,
+                args: ["class.top"]
+            }], isBottom: [{
                 type: HostBinding,
                 args: ["class.bottom"]
+            }], isLeft: [{
+                type: HostBinding,
+                args: ["class.left"]
+            }], isRight: [{
+                type: HostBinding,
+                args: ["class.right"]
             }], animate: [{
                 type: HostBinding,
                 args: ['@showHide']
             }] } });
 
+const SHOW_DELAY_PROPERTY = '--co-tooltip-show-delay';
+const AUTO_HIDE_DELAY_PROPERTY = '--co-tooltip-auto-hide-delay';
+const DEFAULT_SHOW_DELAY_MS = 400;
+const DEFAULT_AUTO_HIDE_DELAY_MS = 10000;
 class TooltipDirective {
     _compFactoryResolver;
     _appRef;
@@ -18171,9 +18281,15 @@ class TooltipDirective {
     set tooltip(str) {
         this._tooltipMessage = str;
     }
+    orientation = CoDirection.Up;
     _elementRef;
     _tooltipMessage;
     _componentRef;
+    _showTimeoutId = undefined;
+    _autoHideTimeoutId = undefined;
+    _mouseEnterHandler = () => this._startShowTimeout();
+    _mouseLeaveHandler = () => this._removeTooltip();
+    _scrollHandler = () => this._handleScroll();
     constructor(elementRef, _compFactoryResolver, _appRef, _injector, _sanitizer) {
         this._compFactoryResolver = _compFactoryResolver;
         this._appRef = _appRef;
@@ -18182,37 +18298,79 @@ class TooltipDirective {
         this._elementRef = elementRef;
     }
     ngOnDestroy() {
+        this._removeTooltip();
         if (this._elementRef && this._elementRef.nativeElement) {
-            this._elementRef.nativeElement.removeEventListener('mouseenter', (event) => this._handleMouseMove(event));
-            this._elementRef.nativeElement.removeEventListener('mouseleave', () => this._removeTooltip());
+            this._elementRef.nativeElement.removeEventListener('mouseenter', this._mouseEnterHandler);
+            this._elementRef.nativeElement.removeEventListener('mouseleave', this._mouseLeaveHandler);
         }
-        window.removeEventListener("scroll", (event) => this._handleScroll);
+        window.removeEventListener("scroll", this._scrollHandler);
         this._elementRef = undefined;
     }
     ngOnInit() {
-        window.addEventListener("scroll", (event) => this._handleScroll);
+        window.addEventListener("scroll", this._scrollHandler);
         if (this._elementRef && this._elementRef.nativeElement) {
-            this._elementRef.nativeElement.addEventListener('mouseenter', (event) => this._handleMouseMove(event));
-            this._elementRef.nativeElement.addEventListener('mouseleave', () => this._removeTooltip());
+            this._elementRef.nativeElement.addEventListener('mouseenter', this._mouseEnterHandler);
+            this._elementRef.nativeElement.addEventListener('mouseleave', this._mouseLeaveHandler);
         }
     }
     _handleScroll() {
         this._removeTooltip();
     }
-    _handleMouseMove(event) {
-        this._showTooltip(event.clientY, event.clientX);
+    _startShowTimeout() {
+        this._clearShowTimeout();
+        this._showTimeoutId = window.setTimeout(() => {
+            this._showTimeoutId = undefined;
+            this._createTooltipComponent();
+        }, this._resolveDelay(SHOW_DELAY_PROPERTY, DEFAULT_SHOW_DELAY_MS));
     }
-    _showTooltip(top, left) {
-        this._createTooltipComponent(top, left);
+    // Delays come from custom properties, read from the host so a scoped override wins over the
+    // :root default; falls back when the stylesheet is absent. A bare number is read as milliseconds.
+    _resolveDelay(property, fallback) {
+        if (!this._elementRef || !this._elementRef.nativeElement) {
+            return fallback;
+        }
+        const raw = window.getComputedStyle(this._elementRef.nativeElement)
+            .getPropertyValue(property)
+            .trim();
+        const value = parseFloat(raw);
+        if (isNaN(value)) {
+            return fallback;
+        }
+        return Math.max(0, raw.endsWith('ms') || !raw.endsWith('s') ? value : value * 1000);
+    }
+    _clearShowTimeout() {
+        if (this._showTimeoutId !== undefined) {
+            window.clearTimeout(this._showTimeoutId);
+            this._showTimeoutId = undefined;
+        }
     }
     _removeTooltip() {
+        this._clearShowTimeout();
+        this._clearAutoHideTimeout();
         if (this._componentRef) {
             this._appRef.detachView(this._componentRef.hostView);
             this._componentRef.destroy();
             this._componentRef = undefined;
         }
     }
-    _createTooltipComponent(top, left) {
+    _startAutoHideTimeout() {
+        this._clearAutoHideTimeout();
+        const delay = this._resolveDelay(AUTO_HIDE_DELAY_PROPERTY, DEFAULT_AUTO_HIDE_DELAY_MS);
+        if (delay <= 0) { // guard switched off by the consumer
+            return;
+        }
+        this._autoHideTimeoutId = window.setTimeout(() => {
+            this._autoHideTimeoutId = undefined;
+            this._removeTooltip();
+        }, delay);
+    }
+    _clearAutoHideTimeout() {
+        if (this._autoHideTimeoutId !== undefined) {
+            window.clearTimeout(this._autoHideTimeoutId);
+            this._autoHideTimeoutId = undefined;
+        }
+    }
+    _createTooltipComponent() {
         if (!this._tooltipMessage) {
             return;
         }
@@ -18223,13 +18381,15 @@ class TooltipDirective {
             .resolveComponentFactory(TooltipComponent)
             .create(this._injector);
         this._componentRef.instance.hostElement = this._elementRef.nativeElement;
+        this._componentRef.instance.orientation = this.orientation;
         this._componentRef.instance.toolTip = this._sanitizer.bypassSecurityTrustHtml(this._tooltipMessage);
         this._appRef.attachView(this._componentRef.hostView);
         const domElem = this._componentRef.hostView.rootNodes[0];
         document.body.appendChild(domElem);
+        this._startAutoHideTimeout();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TooltipDirective, isStandalone: false, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TooltipDirective, isStandalone: false, selector: "[tooltip]", inputs: { tooltip: "tooltip", orientation: ["tooltipOrientation", "orientation"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -18240,6 +18400,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i1.DomSanitizer }], propDecorators: { tooltip: [{
                 type: Input,
                 args: ["tooltip"]
+            }], orientation: [{
+                type: Input,
+                args: ["tooltipOrientation"]
             }] } });
 
 class TooltipModule {