cps-ui-kit 0.28.0 → 0.29.0

package/fesm2020/cps-ui-kit.mjs

@@ -145,6 +145,7 @@ const iconNames = [
     'heart',
     'help-circle',
     'home',
+    'info-circle',
     'insight',
     'issues',
     'jpeg',
@@ -2208,6 +2209,244 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['treeAutocompleteList']
             }] } });
 
+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)
+                return;
+            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 = (event = undefined) => {
+            const removeFromDOM = () => {
+                this._popup?.remove();
+                this._popup = undefined;
+            };
+            window.removeEventListener('scroll', this._destroyTooltip, true);
+            if (!this._popup)
+                return;
+            this._popup.removeEventListener('click', this._destroyTooltip);
+            const noAnimation = ['scroll', 'resize'].includes(event?.type);
+            if (noAnimation) {
+                removeFromDOM();
+            }
+            else {
+                const popup = this._popup;
+                requestAnimationFrame(function () {
+                    popup.style.opacity = '0';
+                });
+                setTimeout(() => {
+                    removeFromDOM();
+                }, 200);
+            }
+        };
+    }
+    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);
+        requestAnimationFrame(function () {
+            popup.style.opacity = '1';
+        });
+        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);
+        }
+    }
+    onDocumentClick(target) {
+        if (this.tooltipPersistent && this._popup) {
+            if (!target?.isConnected) {
+                return;
+            }
+            const clickedInside = this._elementRef?.nativeElement?.contains(target);
+            if (!clickedInside) {
+                this._destroyTooltip();
+            }
+        }
+    }
+    onPageResize(event) {
+        if (this._popup)
+            this._destroyTooltip(event);
+    }
+}
+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()", "document:click": "onDocumentClick($event.target)", "window:resize": "onPageResize($event)" } }, 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']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }], onPageResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class CpsInfoCircleComponent {
+    constructor() {
+        this.size = 'small';
+        this.tooltipText = '';
+        this.tooltipPosition = 'top';
+    }
+}
+CpsInfoCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInfoCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CpsInfoCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInfoCircleComponent, isStandalone: true, selector: "cps-info-circle", inputs: { size: "size", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<cps-icon\n  icon=\"info-circle\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInfoCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cps-info-circle', standalone: true, imports: [CpsIconComponent, CpsTooltipDirective], template: "<cps-icon\n  icon=\"info-circle\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }] } });
+
 class CpsProgressCircularComponent {
     constructor() {
         this.diameter = 40;
@@ -3348,204 +3587,6 @@ 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;
@@ -3660,5 +3701,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, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
+export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTableColumnSortableDirective, CpsTableComponent, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
 //# sourceMappingURL=cps-ui-kit.mjs.map