cps-ui-kit 0.27.0 → 0.28.0

package/fesm2020/cps-ui-kit.mjs

@@ -3348,6 +3348,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+class CpsTooltipDirective {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this.tooltipOpenDelay = 300;
+        this.tooltipCloseDelay = 300;
+        this.tooltipOpenOn = 'hover';
+        this.tooltipPosition = 'top';
+        this.tooltipPersistent = false;
+        this.tooltipDisabled = false;
+        this.tooltipMaxWidth = '100%';
+        this.tooltipContentClass = 'cps-tooltip-content';
+        this._createTooltip = () => {
+            if (this._popup)
+                this._destroyTooltip();
+            if (this.tooltipDisabled)
+                return;
+            this._popup = document.createElement('div');
+            this._constructElement(this._popup);
+            if (this.tooltipPersistent)
+                this._popup.addEventListener('click', this._destroyTooltip);
+            window.addEventListener('scroll', this._destroyTooltip, true);
+        };
+        this._destroyTooltip = () => {
+            window.removeEventListener('scroll', this._destroyTooltip, true);
+            this._popup?.removeEventListener('click', this._destroyTooltip);
+            this._popup?.remove();
+            this._popup = undefined;
+        };
+    }
+    ngOnDestroy() {
+        this._destroyTooltip();
+    }
+    _constructElement(popup) {
+        const popupContent = document.createElement('div');
+        popupContent.innerHTML = this.tooltip || 'Add your text to this tooltip';
+        popupContent.classList.add(this.tooltipContentClass);
+        popup.appendChild(popupContent);
+        popup.classList.add('cps-tooltip');
+        popup.style.maxWidth = convertSize(this.tooltipMaxWidth);
+        document.body.appendChild(popup);
+        const coords = this._getCoords();
+        if (!coords) {
+            this._destroyTooltip();
+            throw new Error('Not enough space on the screen for the tooltip!');
+        }
+        popup.style.left = coords.left.toString() + 'px';
+        popup.style.top = coords.top.toString() + 'px';
+    }
+    _getCoords() {
+        function isInsideScreen(coords) {
+            return (coords.top >= 0 &&
+                coords.left >= 0 &&
+                coords.left + popupRect.width <= window.innerWidth &&
+                coords.top + popupRect.height <= window.innerHeight);
+        }
+        let positions = ['top', 'bottom', 'left', 'right'];
+        positions = positions.filter((item) => item !== this.tooltipPosition);
+        positions.unshift(this.tooltipPosition);
+        const targetEl = this._elementRef.nativeElement;
+        const targetElRect = targetEl.getBoundingClientRect();
+        const popupRect = this._popup.getBoundingClientRect();
+        for (const pos of positions) {
+            const coords = this._getCoordsForPosition(pos, targetEl, targetElRect, popupRect);
+            if (isInsideScreen(coords)) {
+                return coords;
+            }
+        }
+        return undefined;
+    }
+    _getCoordsForPosition(position, targetEl, targetElRect, popupRect) {
+        switch (position) {
+            case 'bottom':
+                return {
+                    left: targetElRect.left +
+                        window.scrollX +
+                        (targetEl.offsetWidth - popupRect.width) / 2,
+                    top: targetElRect.bottom + window.scrollY + 8
+                };
+            case 'left':
+                return {
+                    left: targetElRect.left - window.scrollX - popupRect.width - 8,
+                    top: targetElRect.top +
+                        window.scrollY +
+                        (targetEl.offsetHeight - popupRect.height) / 2
+                };
+            case 'right':
+                return {
+                    left: targetElRect.right + window.scrollX + 8,
+                    top: targetElRect.top +
+                        window.scrollY +
+                        (targetEl.offsetHeight - popupRect.height) / 2
+                };
+            default:
+                return {
+                    left: targetElRect.left +
+                        window.scrollX +
+                        (targetEl.offsetWidth - popupRect.width) / 2,
+                    top: targetElRect.top + window.scrollY - popupRect.height - 8
+                };
+        }
+    }
+    onMouseEnter() {
+        if (this.tooltipOpenOn === 'hover') {
+            clearTimeout(this._hideTimeout);
+            this._showTimeout = setTimeout(this._createTooltip, this.tooltipOpenDelay);
+        }
+    }
+    onMouseLeave() {
+        clearTimeout(this._showTimeout);
+        if (!this.tooltipPersistent) {
+            this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay);
+        }
+    }
+    onFocus() {
+        if (this.tooltipOpenOn === 'focus') {
+            clearTimeout(this._hideTimeout);
+            this._showTimeout = setTimeout(this._createTooltip, this.tooltipOpenDelay);
+        }
+    }
+    onBlur() {
+        clearTimeout(this._showTimeout);
+        if (!this.tooltipPersistent && this.tooltipOpenOn === 'focus') {
+            this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay);
+        }
+    }
+    onClick() {
+        if (this.tooltipOpenOn === 'click') {
+            clearTimeout(this._hideTimeout);
+            this._showTimeout = setTimeout(this._createTooltip, 0);
+        }
+    }
+    onPageResize() {
+        if (this._popup)
+            this._destroyTooltip();
+    }
+    onDocumentClick(target) {
+        if (this.tooltipPersistent && this._popup) {
+            if (!target?.isConnected) {
+                return;
+            }
+            const clickedInside = this._elementRef?.nativeElement?.contains(target);
+            if (!clickedInside) {
+                this._destroyTooltip();
+            }
+        }
+    }
+}
+CpsTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+CpsTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: ["cpsTooltip", "tooltip"], tooltipOpenDelay: "tooltipOpenDelay", tooltipCloseDelay: "tooltipCloseDelay", tooltipOpenOn: "tooltipOpenOn", tooltipPosition: "tooltipPosition", tooltipPersistent: "tooltipPersistent", tooltipDisabled: "tooltipDisabled", tooltipMaxWidth: "tooltipMaxWidth", tooltipContentClass: "tooltipContentClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "window:resize": "onPageResize()", "document:click": "onDocumentClick($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cpsTooltip]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tooltip: [{
+                type: Input,
+                args: ['cpsTooltip']
+            }], tooltipOpenDelay: [{
+                type: Input
+            }], tooltipCloseDelay: [{
+                type: Input
+            }], tooltipOpenOn: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }], tooltipPersistent: [{
+                type: Input
+            }], tooltipDisabled: [{
+                type: Input
+            }], tooltipMaxWidth: [{
+                type: Input
+            }], tooltipContentClass: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onPageResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
 class CpsButtonToggleComponent {
     set value(value) {
         this._value = value;
@@ -3462,5 +3660,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTableColumnSortableDirective, CpsTableComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
+export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTableColumnSortableDirective, CpsTableComponent, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
 //# sourceMappingURL=cps-ui-kit.mjs.map