@dropi/ui 0.1.23 → 0.1.24

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: '85f49bcb2af567a8fb70cd92afab893a2e0bf567', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (h("dropi-icon", { key: 'f40ebe0c12bdfa251cbe6086f7ea432aed0124fa', name: this.iconName, width: `${this.iconSize}px`, height: `${this.iconSize}px`, color: this.iconColor })), h("slot", { key: '77d2aa944f57cc5f858bbff97f88dfda6e71e088' }), this.displayContent && (h("div", { key: '4fcbbbf1a3b163ad2992efd8c8dfbef695f4f422', 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: '48428c1dcdd6c52f8a0b26641a016a00cf04444d', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, h("dropi-icon", { key: '6c870fc88739ba5e09c1f77eda783d21af476f98', name: "Close-small", width: "12px", height: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && h("strong", { key: 'c501f266a5d3cc4250f9b205f8fa641c1f9be7ad', class: "tooltip-title" }, this.title), this.label && !this.text && h("span", { key: '6fb281665f9c84a7cb1f86bf8718da8ef5b95204', class: "tooltip-label" }, this.label), this.text && h("span", { key: '4d1a3445cb4b5361e8604404bfb970fc0e9ea289' }, this.text), h("span", { key: 'f7d0ac1b155d486c55cbeebc63cca32838e25811', 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": {}
+        };
+    }
+}

package/dist/collection/components/dropi-vertical-steps/dropi-vertical-steps.css

@@ -0,0 +1,95 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.vertical-steps {
+  display: flex;
+  flex-direction: column;
+}
+
+.v-step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-3, 12px);
+}
+
+.v-step--clickable {
+  cursor: pointer;
+}
+
+/* ── Left indicator column ──────────────────────────────── */
+.v-step__indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.v-step__circle {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.v-step__circle--pending {
+  background: var(--Neutral-White, #ffffff);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+}
+
+.v-step__circle--current {
+  background: var(--Neutral-White, #ffffff);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.v-step__circle--completed {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.v-step__number {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+.v-step__circle--current .v-step__number {
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Vertical connecting line ───────────────────────────── */
+.v-step__line {
+  flex: 1;
+  width: 2px;
+  min-height: 24px;
+  background: var(--Gray-Gray-200, #c3c9d9);
+  margin: 4px 0;
+  transition: background 0.2s;
+}
+
+.v-step__line--done {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Label ──────────────────────────────────────────────── */
+.v-step__label {
+  padding-top: 4px;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+  line-height: 1.4;
+}
+
+.v-step__label--current {
+  color: var(--Gray-Gray-800, #1f2433);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.v-step__label--completed {
+  color: var(--Gray-Gray-500, #69738c);
+}