@dropi/ui 0.1.20 → 0.1.21

package/dist/collection/components/dropi-tooltip/dropi-tooltip.js

@@ -1,41 +1,15 @@
 import { h } from "@stencil/core";
 /**
  * @component dropi-tooltip
- * Wraps content and shows a tooltip bubble on hover/focus.
- *
- * @example
- * <dropi-tooltip text="Más información" position="top">
- *   <dropi-button text="Hover" />
- * </dropi-tooltip>
+ * Simple tooltip (Legacy version).
  */
 export class DropiTooltip {
     /** Tooltip text */
     text = '';
-    /** Position: top | bottom | left | right */
-    position = 'top';
-    /** Max CSS width of the bubble */
-    maxWidth = '280px';
-    /** Delay in ms before showing */
-    showDelay = 0;
-    visible = false;
-    showTimer = null;
-    show = () => {
-        if (this.showDelay > 0) {
-            this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);
-        }
-        else {
-            this.visible = true;
-        }
-    };
-    hide = () => {
-        if (this.showTimer) {
-            clearTimeout(this.showTimer);
-            this.showTimer = null;
-        }
-        this.visible = false;
-    };
+    /** Whether the tooltip has an outline style (matches Angular `outlined`) */
+    outlined = false;
     render() {
-        return (h("div", { key: '9f328904e1954d08cf18d51ca765f07ec8b9d3c1', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("slot", { key: '697ebc090a9b3d7db25666b6ae8726bc9c389d3c' }), this.text && (h("div", { key: 'f82c4ad44cd13b3eb7fd3bbfa54bb598166fba1c', class: { 'tooltip-bubble': true, [`tooltip-bubble--${this.position}`]: true, 'tooltip-bubble--visible': this.visible }, style: { maxWidth: this.maxWidth }, role: "tooltip" }, this.text, h("span", { key: 'f850e6f1b5a66a686e9741b3d5e9df3bd5b81e95', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+        return (h("div", { key: '82c2b45a441ae85a0aa7885cde0fcbe1ea553cfa', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: '7fc4ab29a90e329131cd201a953d72c53b364f3f' }), this.text && (h("div", { key: '7de66eff9510747a524bdbccd598071c3f729448', class: "tooltip-simple-bubble" }, this.text))));
     }
     static get is() { return "dropi-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -71,77 +45,26 @@ export class DropiTooltip {
                 "attribute": "text",
                 "defaultValue": "''"
             },
-            "position": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "TooltipPosition",
-                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-                    "references": {
-                        "TooltipPosition": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tooltip/dropi-tooltip.tsx",
-                            "id": "src/components/dropi-tooltip/dropi-tooltip.tsx::TooltipPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Position: top | bottom | left | right"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "position",
-                "defaultValue": "'top'"
-            },
-            "maxWidth": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Max CSS width of the bubble"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-width",
-                "defaultValue": "'280px'"
-            },
-            "showDelay": {
-                "type": "number",
+            "outlined": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Delay in ms before showing"
+                    "text": "Whether the tooltip has an outline style (matches Angular `outlined`)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-delay",
-                "defaultValue": "0"
+                "attribute": "outlined",
+                "defaultValue": "false"
             }
         };
     }
-    static get states() {
-        return {
-            "visible": {}
-        };
-    }
 }

package/dist/collection/components/dropi-tooltip-v2/dropi-tooltip.css

@@ -0,0 +1,67 @@
+:host { display: inline-block; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
+
+.tooltip-bubble {
+  position: absolute; z-index: 9999;
+  background: var(--Gray-Gray-800); color: var(--Neutral-White, #ffffff);
+  font-size: var(--font-size-s,14px); line-height: 1.5;
+  padding: 8px 12px; border-radius: 8px;
+  white-space: normal; pointer-events: none;
+  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
+  word-break: break-word;
+  box-shadow: var(--Shadow-medium);
+  text-align: left;
+  width: max-content;
+}
+.tooltip-bubble--visible { opacity: 1; }
+
+.tooltip-bubble--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
+.tooltip-bubble--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%); }
+.tooltip-bubble--left   { right: calc(100% + 12px);  top: 50%;  transform: translateY(-50%); }
+.tooltip-bubble--right  { left: calc(100% + 12px);   top: 50%;  transform: translateY(-50%); }
+
+.tooltip-arrow { position: absolute; width: 12px; height: 6px; }
+.tooltip-arrow::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.tooltip-arrow--top {
+  top: 100%; left: 50%; transform: translateX(-50%);
+}
+.tooltip-arrow--top::before {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--bottom {
+  bottom: 100%; left: 50%; transform: translateX(-50%);
+}
+.tooltip-arrow--bottom::before {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--left {
+  left: 100%; top: 50%; transform: translateY(-50%);
+}
+.tooltip-arrow--left::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--right {
+  right: 100%; top: 50%; transform: translateY(-50%);
+}
+.tooltip-arrow--right::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid var(--Gray-Gray-800);
+}

package/dist/collection/components/dropi-tooltip-v2/dropi-tooltip.js

@@ -0,0 +1,468 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tooltip
+ * Wraps content and shows a tooltip bubble on hover/focus.
+ *
+ * @example
+ * <dropi-tooltip-v2 text="Más información" position="top">
+ *   <dropi-button text="Hover" />
+ * </dropi-tooltip-v2>
+ */
+export class DropiTooltipV2 {
+    /** Tooltip text */
+    text = '';
+    /** Tooltip title (bold, shown with label) */
+    title = '';
+    /** Tooltip label (shown below title) */
+    label = '';
+    /** Position: top | bottom | left | right */
+    position = 'bottom';
+    /** Position of the arrow: start | center | end (matches Angular `arrowPosition`) */
+    arrowPosition = 'center';
+    /** Trigger: hover | click | focus | timeout | static | hidden */
+    trigger = 'hover';
+    /** Max CSS width of the bubble */
+    maxWidth = '280px';
+    /** Min CSS width of the bubble (matches Angular `minWidth`) */
+    minWidth = '300px';
+    /** Delay in ms before showing */
+    showDelay = 0;
+    /** Disable the tooltip completely (matches Angular `disabled`) */
+    disabled = false;
+    /** Show the trigger icon (matches Angular `showIcon`) */
+    showIcon = true;
+    /** Show the close (X) button inside the bubble (matches Angular `showX`) */
+    showX = false;
+    /** Icon name from the dropi-icon sprite (matches Angular `iconName`) */
+    iconName = 'Tooltip';
+    /** Icon color token or hex (matches Angular `iconColor`) */
+    iconColor = '#7B8190';
+    /** Icon size in px without unit (matches Angular `iconSize`) */
+    iconSize = '14';
+    visible = false;
+    showTimer = null;
+    timeoutTimer = null;
+    componentDidLoad() {
+        if (this.trigger === 'static')
+            this.show();
+        if (this.trigger === 'timeout')
+            this.showWithTimeout();
+    }
+    show = () => {
+        if (this.disabled || this.trigger === 'hidden')
+            return;
+        const content = this.text || this.title || this.label;
+        if (!content.trim())
+            return;
+        if (this.showDelay > 0) {
+            this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);
+        }
+        else {
+            this.visible = true;
+        }
+    };
+    hide = () => {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (this.timeoutTimer) {
+            clearTimeout(this.timeoutTimer);
+            this.timeoutTimer = null;
+        }
+        this.visible = false;
+    };
+    showWithTimeout() {
+        this.show();
+        this.timeoutTimer = setTimeout(() => this.hide(), 6000);
+    }
+    handleMouseEnter = () => {
+        if (this.trigger !== 'hover')
+            return;
+        this.show();
+    };
+    handleMouseLeave = () => {
+        if (this.trigger !== 'hover')
+            return;
+        setTimeout(() => this.hide(), 10);
+    };
+    handleClick = () => {
+        if (this.trigger !== 'click')
+            return;
+        this.visible ? this.hide() : this.show();
+    };
+    handleFocusin = () => {
+        if (this.trigger !== 'focus')
+            return;
+        this.show();
+    };
+    handleFocusout = () => {
+        if (this.trigger !== 'focus')
+            return;
+        this.hide();
+    };
+    handleClose = () => {
+        if (this.trigger === 'static') {
+            this.trigger = 'hover';
+            this.showX = false;
+        }
+        this.hide();
+    };
+    get displayContent() {
+        if (this.text)
+            return this.text;
+        if (this.title && this.label)
+            return `${this.title}\n${this.label}`;
+        return this.title || this.label || '';
+    }
+    render() {
+        const bubbleStyle = { maxWidth: this.maxWidth };
+        if (this.minWidth)
+            bubbleStyle.minWidth = this.minWidth;
+        return (h("div", { key: '0f552323b1917d2324a696ded87fbd8251c7b23f', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (h("dropi-icon", { key: '201d20c6db44099221999ccc7673d5b0c2392f71', name: this.iconName, width: `${this.iconSize}px`, height: `${this.iconSize}px`, color: this.iconColor })), h("slot", { key: '1e1848442f4ba714a9720def95e6efda2d0959bd' }), this.displayContent && (h("div", { key: '4697b41f9216d331c3b7fbb3cb26463b419c8530', class: {
+                'tooltip-bubble': true,
+                [`tooltip-bubble--${this.position}`]: true,
+                [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,
+                'tooltip-bubble--visible': this.visible,
+            }, style: bubbleStyle, role: "tooltip" }, this.showX && (h("button", { key: '1aa1de98457fb9812c4df9b6ae44366accec8752', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, h("dropi-icon", { key: '964ebde1dab86620b6f6fb5b59626900a815c5f2', name: "Close-small", width: "12px", height: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && h("strong", { key: 'c7e321fbe9753bd98d49de552d12d4477e382cf3', class: "tooltip-title" }, this.title), this.label && !this.text && h("span", { key: '6aad3847605402622d37579d71a85163e17dbeec', class: "tooltip-label" }, this.label), this.text && h("span", { key: 'd688e80849a8156c243c9a6b642cc9e5976bcce9' }, this.text), h("span", { key: 'c9ce48f1499360f14e797dc006227b76baad4213', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+    }
+    static get is() { return "dropi-tooltip-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip title (bold, shown with label)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip label (shown below title)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "TooltipPosition": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tooltip-v2/dropi-tooltip.tsx",
+                            "id": "src/components/dropi-tooltip-v2/dropi-tooltip.tsx::TooltipPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position: top | bottom | left | right"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom'"
+            },
+            "arrowPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ArrowPosition",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "ArrowPosition": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tooltip-v2/dropi-tooltip.tsx",
+                            "id": "src/components/dropi-tooltip-v2/dropi-tooltip.tsx::ArrowPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the arrow: start | center | end (matches Angular `arrowPosition`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow-position",
+                "defaultValue": "'center'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "TooltipTrigger",
+                    "resolved": "\"click\" | \"focus\" | \"hidden\" | \"hover\" | \"static\" | \"timeout\"",
+                    "references": {
+                        "TooltipTrigger": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tooltip-v2/dropi-tooltip.tsx",
+                            "id": "src/components/dropi-tooltip-v2/dropi-tooltip.tsx::TooltipTrigger"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger: hover | click | focus | timeout | static | hidden"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "defaultValue": "'hover'"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max CSS width of the bubble"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'280px'"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Min CSS width of the bubble (matches Angular `minWidth`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-width",
+                "defaultValue": "'300px'"
+            },
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay in ms before showing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delay",
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the tooltip completely (matches Angular `disabled`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the trigger icon (matches Angular `showIcon`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "true"
+            },
+            "showX": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the close (X) button inside the bubble (matches Angular `showX`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-x",
+                "defaultValue": "false"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name from the dropi-icon sprite (matches Angular `iconName`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-name",
+                "defaultValue": "'Tooltip'"
+            },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon color token or hex (matches Angular `iconColor`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-color",
+                "defaultValue": "'#7B8190'"
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon size in px without unit (matches Angular `iconSize`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size",
+                "defaultValue": "'14'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+}