@dropi/ui 0.1.19 → 0.1.21

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": {}
+        };
+    }
+}

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

@@ -39,12 +39,12 @@
 }
 
 .v-step__circle--pending {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Gray-Gray-200, #c3c9d9);
 }
 
 .v-step__circle--current {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Primary-Primary-500, #f49a3d);
 }
 
@@ -86,7 +86,7 @@
 }
 
 .v-step__label--current {
-  color: var(--Gray-Gray-800, #1a2033);
+  color: var(--Gray-Gray-800, #1f2433);
   font-weight: var(--font-weight-bold, 700);
 }
 

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

@@ -13,7 +13,7 @@ export class DropiVerticalSteps {
     /** Show check icon inside completed step circles */
     showCheckIcon = true;
     /** Emitted when a step is clicked. e.detail = step number (1-based) */
-    dropiStepClick;
+    stepClick;
     get parsedSteps() {
         if (typeof this.steps === 'string') {
             try {
@@ -37,11 +37,11 @@ export class DropiVerticalSteps {
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: '4e23932cbc36257cf0f435735d95fc68be174cb7', class: "vertical-steps" }, steps.map((step, i) => {
+        return (h("div", { key: 'c73381c9db9f19ec7a7823c8301fd3dc5ebcd767', class: "vertical-steps" }, steps.map((step, i) => {
             const state = this.resolveState(i, step);
             const isLast = i === steps.length - 1;
             const isClickable = this.clickable && state === 'completed';
-            return (h("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.dropiStepClick.emit(i + 1) }, h("div", { class: "v-step__indicator" }, h("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (h("span", { class: "v-step__number" }, i + 1))), !isLast && h("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), h("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
+            return (h("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.stepClick.emit(i + 1) }, h("div", { class: "v-step__indicator" }, h("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (h("span", { class: "v-step__number" }, i + 1))), !isLast && h("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), h("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
         })));
     }
     static get is() { return "dropi-vertical-steps"; }
@@ -148,8 +148,8 @@ export class DropiVerticalSteps {
     }
     static get events() {
         return [{
-                "method": "dropiStepClick",
-                "name": "dropiStepClick",
+                "method": "stepClick",
+                "name": "stepClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.css

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  background: var(--Neutral-Black);
+  overflow: hidden;
+  border-radius: 12px;
+}
+
+.video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.thumbnail:hover img {
+  transform: scale(1.05);
+}
+
+.play-button {
+  position: absolute;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 70px;
+  height: 70px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  background: rgba(14, 17, 26, 0.6);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.play-button:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+@media screen and (max-width: 768px) {
+  .play-button {
+    width: 40px;
+    height: 40px;
+  }
+}