@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,468 +0,0 @@
-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": {}
-        };
-    }
-}

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

@@ -1,95 +0,0 @@
-: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);
-}