@dropi/ui 0.1.52 → 0.1.54

package/dist/dropi-ui/dropi-ilustration-icon.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
 
-const dropiIlustrationIconCss = () => `:host{display:inline-flex}.dropi-ilustration{display:inline-flex;align-items:center;justify-content:center}.dropi-ilustration__image,.dropi-ilustration-insignia{margin:0;display:flex;align-items:center;justify-content:center}.dropi-ilustration__image img{max-width:100%;height:auto}.dropi-ilustration__image-mb{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0}.dropi-ilustration__image-mb.success{background:var(--Success-Success-500, #22c55e)}.dropi-ilustration__image-mb.error{background:var(--Error-Error-500, #ef4444)}.dropi-ilustration__image-mb.info{background:var(--Info-Info-500, #3b82f6)}.dropi-ilustration__image-mb.warning{background:url('assets/icons/ilustration/bg-warning.svg') no-repeat center;background-size:contain;border-radius:0}.dropi-ilustration-insignia-tag{display:flex;align-items:center;margin:0}.dropi-ilustration-insignia-tag img{position:relative;z-index:2;height:32px;width:auto}.tag{border-radius:32px;color:var(--Neutral-White, #ffffff);text-transform:capitalize;margin:0 0 0 -20px;display:flex;align-items:center;justify-content:flex-start}.tag span{color:var(--Neutral-White, #ffffff);padding:4px 8px 4px 18px;font-size:var(--font-size-xxs)}.tag--verified{background:linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%)}.tag--premium{background:linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%)}.tag--exclusive{background:linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%)}`;
+const dropiIlustrationIconCss = () => `:host{display:inline-flex;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.dropi-ilustration{display:inline-flex;align-items:center;justify-content:center}.dropi-ilustration__image,.dropi-ilustration-insignia{margin:0;display:flex;align-items:center;justify-content:center}.dropi-ilustration__image img{max-width:100%;height:auto}.dropi-ilustration__image-mb{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0}.dropi-ilustration__image-mb.success{background:var(--Success-Success-500, #22c55e)}.dropi-ilustration__image-mb.error{background:var(--Error-Error-500, #ef4444)}.dropi-ilustration__image-mb.info{background:var(--Info-Info-500, #3b82f6)}.dropi-ilustration__image-mb.warning{background:url('assets/icons/ilustration/bg-warning.svg') no-repeat center;background-size:contain;border-radius:0}.dropi-ilustration-insignia-tag{display:flex;align-items:center;margin:0}.dropi-ilustration-insignia-tag img{position:relative;z-index:2;height:32px;width:auto}.tag{border-radius:32px;color:var(--Neutral-White, #ffffff);text-transform:capitalize;margin:0 0 0 -20px;display:flex;align-items:center;justify-content:flex-start}.tag span{color:var(--Neutral-White, #ffffff);padding:4px 8px 4px 18px;font-size:var(--font-size-xxs)}.tag--verified{background:linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%)}.tag--premium{background:linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%)}.tag--exclusive{background:linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%)}`;
 
 const DropiIlustrationIcon = class {
     constructor(hostRef) {
@@ -16,13 +16,11 @@ const DropiIlustrationIcon = class {
     tagProduct = false;
     /** Base path for illustration assets. Override if assets are served from a different location. */
     basePath = '/node_modules/@dropi/ui/assets/icons/ilustration';
-    get insigniaIcons() {
-        return {
-            verified: `${this.basePath}/verified-new.svg`,
-            premium: `${this.basePath}/premium-new.svg`,
-            exclusive: `${this.basePath}/exclusive.svg`,
-        };
-    }
+    insigniaIcons = {
+        verified: '/assets/icons/ilustration/verified-new.svg',
+        premium: '/assets/icons/ilustration/premium-new.svg',
+        exclusive: '/assets/icons/ilustration/exclusive.svg',
+    };
     getIconName(state) {
         const map = {
             success: 'Check-circle',
@@ -33,7 +31,7 @@ const DropiIlustrationIcon = class {
         return map[state] || 'Comment-round_info';
     }
     render() {
-        return (h("div", { key: '452266c0500ed2426ae0b0d7552a735c0022500b', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '4ac1e8e482b5b80df9dceaa93630308b52d5db0d', class: "dropi-ilustration__image" }, h("img", { key: '019a5c80798fc898a08ce851ab69b381d784e3f9', src: `${this.basePath}/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }))), this.type === 'mb' && (h("figure", { key: 'e7416f766fe3c0d633379bd9172ecfbb4b7f2a43', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: 'c0fdd2564c0c0f821987cb13a519837a71afddbc', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: '8f1f4ace45532d06dbc38d34b3e1e32317d542b7', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '0d114a0b12bb3d31c222a34b09a47bd6a42e1dba', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia, onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }), this.tagProduct && (h("p", { key: 'd1ef34a4fd92ee7b97a5a224d9a21b9e54976989', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '72ea7cef3bbc86f6330abb9c4f34c89e62ac3417', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        return (h("div", { key: 'a8c51508251be4a888f9f6f1c1db72e8932548b1', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '53f76a6a979434ce90fe24b7c13e290020e1d65f', class: "dropi-ilustration__image" }, h("img", { key: '00336310a6a9c67449766750dbf6fa92275cf104', src: `/assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = '/assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: '37b4bfaa0412b007d06904e093df1d2e96337664', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '91e298e9859daf6fe925a72beb7ff400cbaebd7e', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: 'f058946d29757e0821db6346c4103041a94010d6', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '45ad72672636b5c145cafd249ae8029c10872bf9', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia, onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }), this.tagProduct && (h("p", { key: '6522dff159ade1d55fac7921e318524dede1c2a5', class: `tag tag--${this.stateInsignia}` }, h("span", { key: 'aaa5af130374e4f4632a81840fb39ea768d74bb6', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
 };
 DropiIlustrationIcon.style = dropiIlustrationIconCss();

package/dist/dropi-ui/dropi-ilustration-icon.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-ilustration-icon.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-ilustration-icon/dropi-ilustration-icon.css?tag=dropi-ilustration-icon&encapsulation=shadow","src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n.dropi-ilustration {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-ilustration__image,\n.dropi-ilustration-insignia {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-ilustration__image img {\n  max-width: 100%;\n  height: auto;\n}\n\n.dropi-ilustration__image-mb {\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin: 0;\n}\n\n.dropi-ilustration__image-mb.success {\n  background: var(--Success-Success-500, #22c55e);\n}\n\n.dropi-ilustration__image-mb.error {\n  background: var(--Error-Error-500, #ef4444);\n}\n\n.dropi-ilustration__image-mb.info {\n  background: var(--Info-Info-500, #3b82f6);\n}\n\n.dropi-ilustration__image-mb.warning {\n  background: url('assets/icons/ilustration/bg-warning.svg') no-repeat center;\n  background-size: contain;\n  border-radius: 0;\n}\n\n.dropi-ilustration-insignia-tag {\n  display: flex;\n  align-items: center;\n  margin: 0;\n}\n\n.dropi-ilustration-insignia-tag img {\n  position: relative;\n  z-index: 2;\n  height: 32px;\n  width: auto;\n}\n\n.tag {\n  border-radius: 32px;\n  color: var(--Neutral-White, #ffffff);\n  text-transform: capitalize;\n  margin: 0 0 0 -20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.tag span {\n  color: var(--Neutral-White, #ffffff);\n  padding: 4px 8px 4px 18px;\n  font-size: var(--font-size-xxs);\n}\n\n.tag--verified {\n  background: linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%);\n}\n\n.tag--premium {\n  background: linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%);\n}\n\n.tag--exclusive {\n  background: linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type IlustrationType = 'dropi' | 'mb' | 'insignia';\nexport type IlustrationState = 'success' | 'error' | 'warning' | 'info' | 'default' | 'loading' | 'sorry' | 'love';\nexport type InsigniaState = 'verified' | 'premium' | 'exclusive';\n\n/**\n * @component dropi-ilustration-icon\n * Illustration icon with three modes: dropi (SVG asset), mb (colored circle), insignia (badge).\n *\n * @example\n * <dropi-ilustration-icon type=\"dropi\" state=\"success\"></dropi-ilustration-icon>\n * <dropi-ilustration-icon type=\"insignia\" state-insignia=\"premium\" tag-product></dropi-ilustration-icon>\n */\n@Component({\n  tag: 'dropi-ilustration-icon',\n  styleUrl: 'dropi-ilustration-icon.css',\n  shadow: true,\n})\nexport class DropiIlustrationIcon {\n  /** Display mode */\n  @Prop() type: IlustrationType = 'dropi';\n  /** State for dropi/mb types */\n  @Prop() state: IlustrationState = 'default';\n  /** Insignia variant */\n  @Prop() stateInsignia: InsigniaState = 'verified';\n  /** Show insignia as tag with label (for product cards) */\n  @Prop() tagProduct: boolean = false;\n  /** Base path for illustration assets. Override if assets are served from a different location. */\n  @Prop() basePath: string = '/node_modules/@dropi/ui/assets/icons/ilustration';\n\n  private get insigniaIcons(): Record<InsigniaState, string> {\n    return {\n      verified: `${this.basePath}/verified-new.svg`,\n      premium:  `${this.basePath}/premium-new.svg`,\n      exclusive:`${this.basePath}/exclusive.svg`,\n    };\n  }\n\n  private getIconName(state: string): string {\n    const map: Record<string, string> = {\n      success: 'Check-circle',\n      error:   'Cross-circle',\n      info:    'Comment-round_info',\n      warning: 'Comment-round_info',\n    };\n    return map[state] || 'Comment-round_info';\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-ilustration\">\n        {this.type === 'dropi' && (\n          <figure class=\"dropi-ilustration__image\">\n            <img\n              src={`${this.basePath}/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`}\n              alt={this.state ?? 'default'}\n              onError={(e) => { (e.target as HTMLImageElement).src = `${this.basePath}/default.svg`; }}\n            />\n          </figure>\n        )}\n\n        {this.type === 'mb' && (\n          <figure class={`dropi-ilustration__image-mb ${this.state}`}>\n            {['success', 'error', 'info', 'warning'].includes(this.state) && (\n              <dropi-icon\n                name={this.getIconName(this.state)}\n                iconWidth=\"24px\"\n                iconHeight=\"24px\"\n                color=\"Neutral-White\"\n              />\n            )}\n          </figure>\n        )}\n\n        {this.type === 'insignia' && (\n          <figure class={this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia'}>\n            <img src={this.insigniaIcons[this.stateInsignia]} alt={this.stateInsignia} onError={(e) => { (e.target as HTMLImageElement).src = `${this.basePath}/default.svg`; }} />\n            {this.tagProduct && (\n              <p class={`tag tag--${this.stateInsignia}`}>\n                <span class=\"Caption-S\">\n                  {this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1)}\n                </span>\n              </p>\n            )}\n          </figure>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-ilustration-icon.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-ilustration-icon/dropi-ilustration-icon.css?tag=dropi-ilustration-icon&encapsulation=shadow","src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: inline-flex;\n}\n\n.dropi-ilustration {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-ilustration__image,\n.dropi-ilustration-insignia {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-ilustration__image img {\n  max-width: 100%;\n  height: auto;\n}\n\n.dropi-ilustration__image-mb {\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin: 0;\n}\n\n.dropi-ilustration__image-mb.success {\n  background: var(--Success-Success-500, #22c55e);\n}\n\n.dropi-ilustration__image-mb.error {\n  background: var(--Error-Error-500, #ef4444);\n}\n\n.dropi-ilustration__image-mb.info {\n  background: var(--Info-Info-500, #3b82f6);\n}\n\n.dropi-ilustration__image-mb.warning {\n  background: url('assets/icons/ilustration/bg-warning.svg') no-repeat center;\n  background-size: contain;\n  border-radius: 0;\n}\n\n.dropi-ilustration-insignia-tag {\n  display: flex;\n  align-items: center;\n  margin: 0;\n}\n\n.dropi-ilustration-insignia-tag img {\n  position: relative;\n  z-index: 2;\n  height: 32px;\n  width: auto;\n}\n\n.tag {\n  border-radius: 32px;\n  color: var(--Neutral-White, #ffffff);\n  text-transform: capitalize;\n  margin: 0 0 0 -20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.tag span {\n  color: var(--Neutral-White, #ffffff);\n  padding: 4px 8px 4px 18px;\n  font-size: var(--font-size-xxs);\n}\n\n.tag--verified {\n  background: linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%);\n}\n\n.tag--premium {\n  background: linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%);\n}\n\n.tag--exclusive {\n  background: linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type IlustrationType = 'dropi' | 'mb' | 'insignia';\nexport type IlustrationState = 'success' | 'error' | 'warning' | 'info' | 'default' | 'loading' | 'sorry' | 'love';\nexport type InsigniaState = 'verified' | 'premium' | 'exclusive';\n\n/**\n * @component dropi-ilustration-icon\n * Illustration icon with three modes: dropi (SVG asset), mb (colored circle), insignia (badge).\n *\n * @example\n * <dropi-ilustration-icon type=\"dropi\" state=\"success\"></dropi-ilustration-icon>\n * <dropi-ilustration-icon type=\"insignia\" state-insignia=\"premium\" tag-product></dropi-ilustration-icon>\n */\n@Component({\n  tag: 'dropi-ilustration-icon',\n  styleUrl: 'dropi-ilustration-icon.css',\n  shadow: true,\n})\nexport class DropiIlustrationIcon {\n  /** Display mode */\n  @Prop() type: IlustrationType = 'dropi';\n  /** State for dropi/mb types */\n  @Prop() state: IlustrationState = 'default';\n  /** Insignia variant */\n  @Prop() stateInsignia: InsigniaState = 'verified';\n  /** Show insignia as tag with label (for product cards) */\n  @Prop() tagProduct: boolean = false;\n  /** Base path for illustration assets. Override if assets are served from a different location. */\n  @Prop() basePath: string = '/node_modules/@dropi/ui/assets/icons/ilustration';\n\n  private readonly insigniaIcons: Record<InsigniaState, string> = {\n    verified: '/assets/icons/ilustration/verified-new.svg',\n    premium:  '/assets/icons/ilustration/premium-new.svg',\n    exclusive:'/assets/icons/ilustration/exclusive.svg',\n  };\n\n  private getIconName(state: string): string {\n    const map: Record<string, string> = {\n      success: 'Check-circle',\n      error:   'Cross-circle',\n      info:    'Comment-round_info',\n      warning: 'Comment-round_info',\n    };\n    return map[state] || 'Comment-round_info';\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-ilustration\">\n        {this.type === 'dropi' && (\n          <figure class=\"dropi-ilustration__image\">\n            <img\n              src={`/assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`}\n              alt={this.state ?? 'default'}\n              onError={(e) => { (e.target as HTMLImageElement).src = '/assets/icons/ilustration/default.svg'; }}\n            />\n          </figure>\n        )}\n\n        {this.type === 'mb' && (\n          <figure class={`dropi-ilustration__image-mb ${this.state}`}>\n            {['success', 'error', 'info', 'warning'].includes(this.state) && (\n              <dropi-icon\n                name={this.getIconName(this.state)}\n                iconWidth=\"24px\"\n                iconHeight=\"24px\"\n                color=\"Neutral-White\"\n              />\n            )}\n          </figure>\n        )}\n\n        {this.type === 'insignia' && (\n          <figure class={this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia'}>\n            <img src={this.insigniaIcons[this.stateInsignia]} alt={this.stateInsignia} onError={(e) => { (e.target as HTMLImageElement).src = `${this.basePath}/default.svg`; }} />\n            {this.tagProduct && (\n              <p class={`tag tag--${this.stateInsignia}`}>\n                <span class=\"Caption-S\">\n                  {this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1)}\n                </span>\n              </p>\n            )}\n          </figure>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-image-miniature.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
 
-const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.miniature__label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:var(--Size-2, 8px)}.miniature__grid{display:flex;flex-wrap:wrap;gap:var(--Size-2, 8px)}.miniature__item{position:relative;border-radius:var(--Border-2, 8px);overflow:hidden;cursor:pointer;flex-shrink:0}.miniature__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}.miniature__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity 0.2s}.miniature__item:hover img{transform:scale(1.05)}.miniature__item:hover .miniature__zoom{opacity:1}`;
+const dropiImageMiniatureCss = () => `:host{display:block;font-family:var(--font-family-01, 'Inter', sans-serif)}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.miniature__label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:var(--Size-2, 8px)}.miniature__grid{display:flex;flex-wrap:wrap;gap:var(--Size-2, 8px)}.miniature__item{position:relative;border-radius:var(--Border-2, 8px);overflow:hidden;cursor:pointer;flex-shrink:0}.miniature__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}.miniature__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity 0.2s}.miniature__item:hover img{transform:scale(1.05)}.miniature__item:hover .miniature__zoom{opacity:1}`;
 
 const DropiImageMiniature = class {
     constructor(hostRef) {
@@ -34,7 +34,7 @@ const DropiImageMiniature = class {
     }
     render() {
         const imgs = this.parsedImages;
-        return (h("div", { key: 'ffb7d494f423b04f5fe0a579489d9efb2226316a', class: "miniature" }, this.label && h("span", { key: 'fcc751f9aa7e9c7ae661da0edd88416a6664a327', class: "miniature__label" }, this.label), h("div", { key: '3b55211d9ea59589841fc91138cb73737aa04287', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
+        return (h("div", { key: '7c0349371e809443bf0c4c22101ada910a919f40', class: "miniature" }, this.label && h("span", { key: 'ad3ef53f26d762b99df0438cb43cd7be2d008d71', class: "miniature__label" }, this.label), h("div", { key: '266c8d550e59b3e0ed05c370c725e4357fb7f8e5', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
     }
 };
 DropiImageMiniature.style = dropiImageMiniatureCss();

package/dist/dropi-ui/dropi-image-miniature.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-image-miniature.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,uuBAAuuB,CAAC;;MCWjwB,mBAAmB,GAAA,MAAA;;;;;;IAEtB,KAAK,GAAW,EAAE;;IAElB,MAAM,GAAsB,EAAE;;IAE9B,KAAK,GAAW,MAAM;;IAEtB,MAAM,GAAW,MAAM;;AAGtB,IAAA,eAAe;AAExB,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;AACnC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAE3D,QAAA,OAAO,IAAI,CAAC,MAAM,IAAI,EAAE;;AAGlB,IAAA,WAAW,CAAC,CAAQ,EAAA;QACzB,CAAC,CAAC,MAA2B,CAAC,GAAG;AAChC,YAAA,CAAA,sSAAA,CAAwS;;IAG5S,MAAM,GAAA;AACJ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY;QAE9B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACnB,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kBAAkB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACjE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,MACf,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EACjD,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAA,EAEpE,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA,OAAA,EAAU,CAAC,GAAG,CAAC,CAAA,CAAE,EAAE,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CAAI,EAC7F,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACjF,CACF,CACP,CAAC,CACE,CACF;;;;;;;","names":[],"sources":["src/components/dropi-image-miniature/dropi-image-miniature.css?tag=dropi-image-miniature&encapsulation=shadow","src/components/dropi-image-miniature/dropi-image-miniature.tsx"],"sourcesContent":[":host { display: block; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.miniature__label {\n  display: block;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: var(--Size-2, 8px);\n}\n\n.miniature__grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--Size-2, 8px);\n}\n\n.miniature__item {\n  position: relative;\n  border-radius: var(--Border-2, 8px);\n  overflow: hidden;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.miniature__item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.2s;\n}\n\n.miniature__zoom {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0,0,0,0.35);\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.miniature__item:hover img { transform: scale(1.05); }\n.miniature__item:hover .miniature__zoom { opacity: 1; }\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-image-miniature\n * Grid of image thumbnails with zoom-on-hover overlay trigger.\n */\n@Component({\n  tag: 'dropi-image-miniature',\n  styleUrl: 'dropi-image-miniature.css',\n  shadow: true,\n})\nexport class DropiImageMiniature {\n  /** Optional label above the grid */\n  @Prop() label: string = '';\n  /** Array of image URLs. Pass as JSON string or array */\n  @Prop() images: string[] | string = [];\n  /** Thumbnail width (CSS value) */\n  @Prop() width: string = '88px';\n  /** Thumbnail height (CSS value) */\n  @Prop() height: string = '88px';\n\n  /** Emitted when a thumbnail is clicked. e.detail = { images, index } */\n  @Event() dropiImageClick: EventEmitter<{ images: string[]; index: number }>;\n\n  private get parsedImages(): string[] {\n    if (typeof this.images === 'string') {\n      try { return JSON.parse(this.images); } catch { return []; }\n    }\n    return this.images || [];\n  }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src =\n      `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;\n  }\n\n  render() {\n    const imgs = this.parsedImages;\n\n    return (\n      <div class=\"miniature\">\n        {this.label && <span class=\"miniature__label\">{this.label}</span>}\n        <div class=\"miniature__grid\">\n          {imgs.map((src, i) => (\n            <div\n              class=\"miniature__item\"\n              style={{ width: this.width, height: this.height }}\n              key={i}\n              onClick={() => this.dropiImageClick.emit({ images: imgs, index: i })}\n            >\n              <img src={src} alt={`imagen ${i + 1}`} loading=\"lazy\" onError={(e) => this.handleError(e)} />\n              <div class=\"miniature__zoom\">\n                <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Neutral-White\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-image-miniature.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,k3BAAk3B,CAAC;;MCW54B,mBAAmB,GAAA,MAAA;;;;;;IAEtB,KAAK,GAAW,EAAE;;IAElB,MAAM,GAAsB,EAAE;;IAE9B,KAAK,GAAW,MAAM;;IAEtB,MAAM,GAAW,MAAM;;AAGtB,IAAA,eAAe;AAExB,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;AACnC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAE3D,QAAA,OAAO,IAAI,CAAC,MAAM,IAAI,EAAE;;AAGlB,IAAA,WAAW,CAAC,CAAQ,EAAA;QACzB,CAAC,CAAC,MAA2B,CAAC,GAAG;AAChC,YAAA,CAAA,sSAAA,CAAwS;;IAG5S,MAAM,GAAA;AACJ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY;QAE9B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACnB,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kBAAkB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACjE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,MACf,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EACjD,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAA,EAEpE,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA,OAAA,EAAU,CAAC,GAAG,CAAC,CAAA,CAAE,EAAE,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CAAI,EAC7F,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACjF,CACF,CACP,CAAC,CACE,CACF;;;;;;;","names":[],"sources":["src/components/dropi-image-miniature/dropi-image-miniature.css?tag=dropi-image-miniature&encapsulation=shadow","src/components/dropi-image-miniature/dropi-image-miniature.tsx"],"sourcesContent":[":host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n*, *::before, *::after { box-sizing: border-box; }\n\n.miniature__label {\n  display: block;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: var(--Size-2, 8px);\n}\n\n.miniature__grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--Size-2, 8px);\n}\n\n.miniature__item {\n  position: relative;\n  border-radius: var(--Border-2, 8px);\n  overflow: hidden;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.miniature__item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.2s;\n}\n\n.miniature__zoom {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0,0,0,0.35);\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.miniature__item:hover img { transform: scale(1.05); }\n.miniature__item:hover .miniature__zoom { opacity: 1; }\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-image-miniature\n * Grid of image thumbnails with zoom-on-hover overlay trigger.\n */\n@Component({\n  tag: 'dropi-image-miniature',\n  styleUrl: 'dropi-image-miniature.css',\n  shadow: true,\n})\nexport class DropiImageMiniature {\n  /** Optional label above the grid */\n  @Prop() label: string = '';\n  /** Array of image URLs. Pass as JSON string or array */\n  @Prop() images: string[] | string = [];\n  /** Thumbnail width (CSS value) */\n  @Prop() width: string = '88px';\n  /** Thumbnail height (CSS value) */\n  @Prop() height: string = '88px';\n\n  /** Emitted when a thumbnail is clicked. e.detail = { images, index } */\n  @Event() dropiImageClick: EventEmitter<{ images: string[]; index: number }>;\n\n  private get parsedImages(): string[] {\n    if (typeof this.images === 'string') {\n      try { return JSON.parse(this.images); } catch { return []; }\n    }\n    return this.images || [];\n  }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src =\n      `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;\n  }\n\n  render() {\n    const imgs = this.parsedImages;\n\n    return (\n      <div class=\"miniature\">\n        {this.label && <span class=\"miniature__label\">{this.label}</span>}\n        <div class=\"miniature__grid\">\n          {imgs.map((src, i) => (\n            <div\n              class=\"miniature__item\"\n              style={{ width: this.width, height: this.height }}\n              key={i}\n              onClick={() => this.dropiImageClick.emit({ images: imgs, index: i })}\n            >\n              <img src={src} alt={`imagen ${i + 1}`} loading=\"lazy\" onError={(e) => this.handleError(e)} />\n              <div class=\"miniature__zoom\">\n                <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Neutral-White\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-image-overlay.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
 
-const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fade-in 0.3s ease-out}.overlay__close{position:absolute;top:24px;right:24px;background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10010;transition:background 0.15s}.overlay__close:hover{background:rgba(255, 255, 255, 0.2)}.overlay__body{display:flex;width:90%;height:80%;max-width:1200px;gap:32px;align-items:center}.overlay__body--single{justify-content:center}.overlay__thumbs{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto;padding-right:8px;width:100px;flex-shrink:0}.overlay__thumbs::-webkit-scrollbar{width:4px}.overlay__thumbs::-webkit-scrollbar-thumb{background:var(--Gray-Gray-600);border-radius:4px}.overlay__thumb-box{width:80px;height:80px;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;flex-shrink:0;transition:border-color 0.2s}.overlay__thumb-box--active{border-color:var(--Primary-Primary-500, #f49a3d)}.overlay__thumb-img{width:100%;height:100%;object-fit:cover}.overlay__content{flex:1;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.overlay__main-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);animation:scale-up 0.3s ease-out}.overlay__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s;z-index:5}.overlay__nav:hover{background:rgba(255, 255, 255, 0.2)}.overlay__nav--prev{left:-24px}.overlay__nav--next{right:-24px;background:var(--Neutral-White)}.overlay__nav--next:hover{background:var(--Neutral-White)}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes scale-up{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}`;
+const dropiImageOverlayCss = () => `:host{display:block;font-family:var(--font-family-01, 'Inter', sans-serif)}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fade-in 0.3s ease-out}.overlay__close{position:absolute;top:24px;right:24px;background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10010;transition:background 0.15s}.overlay__close:hover{background:rgba(255, 255, 255, 0.2)}.overlay__body{display:flex;width:90%;height:80%;max-width:1200px;gap:32px;align-items:center}.overlay__body--single{justify-content:center}.overlay__thumbs{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto;padding-right:8px;width:100px;flex-shrink:0}.overlay__thumbs::-webkit-scrollbar{width:4px}.overlay__thumbs::-webkit-scrollbar-thumb{background:var(--Gray-Gray-600);border-radius:4px}.overlay__thumb-box{width:80px;height:80px;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;flex-shrink:0;transition:border-color 0.2s}.overlay__thumb-box--active{border-color:var(--Primary-Primary-500, #f49a3d)}.overlay__thumb-img{width:100%;height:100%;object-fit:cover}.overlay__content{flex:1;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.overlay__main-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);animation:scale-up 0.3s ease-out}.overlay__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s;z-index:5}.overlay__nav:hover{background:rgba(255, 255, 255, 0.2)}.overlay__nav--prev{left:-24px}.overlay__nav--next{right:-24px;background:var(--Neutral-White)}.overlay__nav--next:hover{background:var(--Neutral-White)}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes scale-up{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}`;
 
 const DropiImageOverlay = class {
     constructor(hostRef) {

package/dist/dropi-ui/dropi-image-overlay.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-image-overlay.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-image-overlay/dropi-image-overlay.css?tag=dropi-image-overlay&encapsulation=shadow","src/components/dropi-image-overlay/dropi-image-overlay.tsx"],"sourcesContent":[":host { display: block; }\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.92);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 9999;\n  animation: fade-in 0.3s ease-out;\n}\n\n.overlay__close {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  background: rgba(255, 255, 255, 0.1);\n  border: none;\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 10010;\n  transition: background 0.15s;\n}\n.overlay__close:hover { background: rgba(255, 255, 255, 0.2); }\n\n.overlay__body {\n  display: flex;\n  width: 90%;\n  height: 80%;\n  max-width: 1200px;\n  gap: 32px;\n  align-items: center;\n}\n\n.overlay__body--single {\n  justify-content: center;\n}\n\n/* ── Thumbnails (Left Column) ─────────────────────────── */\n.overlay__thumbs {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  height: 100%;\n  overflow-y: auto;\n  padding-right: 8px;\n  width: 100px;\n  flex-shrink: 0;\n}\n\n/* Hide scrollbar but keep functionality */\n.overlay__thumbs::-webkit-scrollbar { width: 4px; }\n.overlay__thumbs::-webkit-scrollbar-thumb { background: var(--Gray-Gray-600); border-radius: 4px; }\n\n.overlay__thumb-box {\n  width: 80px;\n  height: 80px;\n  border: 2px solid transparent;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: border-color 0.2s;\n}\n\n.overlay__thumb-box--active {\n  border-color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.overlay__thumb-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* ── Main Content (Right Area) ─────────────────────────── */\n.overlay__content {\n  flex: 1;\n  height: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.overlay__main-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: 12px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n  animation: scale-up 0.3s ease-out;\n}\n\n.overlay__nav {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  background: rgba(255, 255, 255, 0.1);\n  border: none;\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.2s;\n  z-index: 5;\n}\n\n.overlay__nav:hover { background: rgba(255, 255, 255, 0.2); }\n.overlay__nav--prev { left: -24px; }\n.overlay__nav--next {\n  right: -24px;\n  background: var(--Neutral-White);\n}\n.overlay__nav--next:hover { background: var(--Neutral-White); }\n\n@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes scale-up { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\n/**\n * @component dropi-image-overlay\n * Full-screen image lightbox with prev/next navigation and thumbnails.\n */\n@Component({\n  tag: 'dropi-image-overlay',\n  styleUrl: 'dropi-image-overlay.css',\n  shadow: true,\n})\nexport class DropiImageOverlay {\n  /** Whether the overlay is visible */\n  @Prop({ mutable: true }) visible: any = false;\n  /** Images array or JSON string */\n  @Prop() images: string[] | string = [];\n  /** Initially active image index */\n  @Prop({ mutable: true }) activeIndex: number = 0;\n\n  @State() private current: number = 0;\n  @State() private parsedImages: string[] = [];\n\n  /** Emitted when overlay closes */\n  @Event() dropiClose: EventEmitter<void>;\n\n  @Watch('images')\n  imagesChanged(val: string[] | string) {\n    this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  @Watch('activeIndex')\n  indexChanged(val: number) { this.current = val; }\n\n  @Watch('visible')\n  visibleChanged(val: boolean) { if (val) this.current = this.activeIndex; }\n\n  componentWillLoad() {\n    this.imagesChanged(this.images);\n    this.current = this.activeIndex;\n  }\n\n  private close() { this.visible = false; this.dropiClose.emit(); }\n  private prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }\n  private next() { this.current = (this.current + 1) % this.parsedImages.length; }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src =\n      `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;\n  }\n\n  render() {\n    const isVisible = this.visible === true || String(this.visible) === 'true';\n    if (!isVisible) return null;\n    const imgs = this.parsedImages;\n    const multi = imgs.length > 1;\n\n    return (\n      <div class=\"overlay\" onClick={() => this.close()}>\n        <button class=\"overlay__close\" onClick={(e) => { e.stopPropagation(); this.close(); }} aria-label=\"Cerrar\">\n          <dropi-icon name=\"Close-large\" iconWidth=\"24px\" iconHeight=\"24px\" color=\"Neutral-White\" />\n        </button>\n\n        <div class={{ 'overlay__body': true, 'overlay__body--single': !multi }} onClick={(e) => e.stopPropagation()}>\n          {multi && (\n            <div class=\"overlay__thumbs\">\n              {imgs.map((src, i) => (\n                <div\n                  key={i}\n                  class={{ 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }}\n                  onClick={() => this.current = i}\n                >\n                  <img\n                    src={src}\n                    alt={`miniatura ${i + 1}`}\n                    class=\"overlay__thumb-img\"\n                    onError={(e) => this.handleError(e)}\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n\n          <div class=\"overlay__content\">\n            {multi && (\n              <button class=\"overlay__nav overlay__nav--prev\" onClick={() => this.prev()} aria-label=\"Anterior\">\n                <dropi-icon name=\"Dropdown-left\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n              </button>\n            )}\n\n            <img\n              class=\"overlay__main-image\"\n              src={imgs[this.current]}\n              alt={`imagen ${this.current + 1}`}\n              onError={(e) => this.handleError(e)}\n            />\n\n            {multi && (\n              <button class=\"overlay__nav overlay__nav--next\" onClick={() => this.next()} aria-label=\"Siguiente\">\n                <dropi-icon name=\"Dropdown-Right\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-image-overlay.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-image-overlay/dropi-image-overlay.css?tag=dropi-image-overlay&encapsulation=shadow","src/components/dropi-image-overlay/dropi-image-overlay.tsx"],"sourcesContent":[":host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.92);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 9999;\n  animation: fade-in 0.3s ease-out;\n}\n\n.overlay__close {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  background: rgba(255, 255, 255, 0.1);\n  border: none;\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 10010;\n  transition: background 0.15s;\n}\n.overlay__close:hover { background: rgba(255, 255, 255, 0.2); }\n\n.overlay__body {\n  display: flex;\n  width: 90%;\n  height: 80%;\n  max-width: 1200px;\n  gap: 32px;\n  align-items: center;\n}\n\n.overlay__body--single {\n  justify-content: center;\n}\n\n/* ── Thumbnails (Left Column) ─────────────────────────── */\n.overlay__thumbs {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  height: 100%;\n  overflow-y: auto;\n  padding-right: 8px;\n  width: 100px;\n  flex-shrink: 0;\n}\n\n/* Hide scrollbar but keep functionality */\n.overlay__thumbs::-webkit-scrollbar { width: 4px; }\n.overlay__thumbs::-webkit-scrollbar-thumb { background: var(--Gray-Gray-600); border-radius: 4px; }\n\n.overlay__thumb-box {\n  width: 80px;\n  height: 80px;\n  border: 2px solid transparent;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: border-color 0.2s;\n}\n\n.overlay__thumb-box--active {\n  border-color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.overlay__thumb-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* ── Main Content (Right Area) ─────────────────────────── */\n.overlay__content {\n  flex: 1;\n  height: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.overlay__main-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: 12px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n  animation: scale-up 0.3s ease-out;\n}\n\n.overlay__nav {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  background: rgba(255, 255, 255, 0.1);\n  border: none;\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.2s;\n  z-index: 5;\n}\n\n.overlay__nav:hover { background: rgba(255, 255, 255, 0.2); }\n.overlay__nav--prev { left: -24px; }\n.overlay__nav--next {\n  right: -24px;\n  background: var(--Neutral-White);\n}\n.overlay__nav--next:hover { background: var(--Neutral-White); }\n\n@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes scale-up { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\n/**\n * @component dropi-image-overlay\n * Full-screen image lightbox with prev/next navigation and thumbnails.\n */\n@Component({\n  tag: 'dropi-image-overlay',\n  styleUrl: 'dropi-image-overlay.css',\n  shadow: true,\n})\nexport class DropiImageOverlay {\n  /** Whether the overlay is visible */\n  @Prop({ mutable: true }) visible: any = false;\n  /** Images array or JSON string */\n  @Prop() images: string[] | string = [];\n  /** Initially active image index */\n  @Prop({ mutable: true }) activeIndex: number = 0;\n\n  @State() private current: number = 0;\n  @State() private parsedImages: string[] = [];\n\n  /** Emitted when overlay closes */\n  @Event() dropiClose: EventEmitter<void>;\n\n  @Watch('images')\n  imagesChanged(val: string[] | string) {\n    this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  @Watch('activeIndex')\n  indexChanged(val: number) { this.current = val; }\n\n  @Watch('visible')\n  visibleChanged(val: boolean) { if (val) this.current = this.activeIndex; }\n\n  componentWillLoad() {\n    this.imagesChanged(this.images);\n    this.current = this.activeIndex;\n  }\n\n  private close() { this.visible = false; this.dropiClose.emit(); }\n  private prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }\n  private next() { this.current = (this.current + 1) % this.parsedImages.length; }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src =\n      `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;\n  }\n\n  render() {\n    const isVisible = this.visible === true || String(this.visible) === 'true';\n    if (!isVisible) return null;\n    const imgs = this.parsedImages;\n    const multi = imgs.length > 1;\n\n    return (\n      <div class=\"overlay\" onClick={() => this.close()}>\n        <button class=\"overlay__close\" onClick={(e) => { e.stopPropagation(); this.close(); }} aria-label=\"Cerrar\">\n          <dropi-icon name=\"Close-large\" iconWidth=\"24px\" iconHeight=\"24px\" color=\"Neutral-White\" />\n        </button>\n\n        <div class={{ 'overlay__body': true, 'overlay__body--single': !multi }} onClick={(e) => e.stopPropagation()}>\n          {multi && (\n            <div class=\"overlay__thumbs\">\n              {imgs.map((src, i) => (\n                <div\n                  key={i}\n                  class={{ 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }}\n                  onClick={() => this.current = i}\n                >\n                  <img\n                    src={src}\n                    alt={`miniatura ${i + 1}`}\n                    class=\"overlay__thumb-img\"\n                    onError={(e) => this.handleError(e)}\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n\n          <div class=\"overlay__content\">\n            {multi && (\n              <button class=\"overlay__nav overlay__nav--prev\" onClick={() => this.prev()} aria-label=\"Anterior\">\n                <dropi-icon name=\"Dropdown-left\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n              </button>\n            )}\n\n            <img\n              class=\"overlay__main-image\"\n              src={imgs[this.current]}\n              alt={`imagen ${this.current + 1}`}\n              onError={(e) => this.handleError(e)}\n            />\n\n            {multi && (\n              <button class=\"overlay__nav overlay__nav--next\" onClick={() => this.next()} aria-label=\"Siguiente\">\n                <dropi-icon name=\"Dropdown-Right\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-input.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
 
-const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:40px}.input-container--has-icon label.label-bottom{left:40px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
+const dropiInputCss = () => `:host{display:block;width:100%;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:40px}.input-container--has-icon label.label-bottom{left:40px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
 const DropiInput = class {
     constructor(hostRef) {
@@ -235,14 +235,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: 'a16b56b6be24372be1fc0a16e65d13bfea3dcf0f', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("label", { key: '0030ccbc829d16aa17a954624933106752f972bc', class: "input-label Body-S-Regular", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'f1476695b9778aa767e121f5d5ace0e36b4fb9a0', class: "asterisk" }, " *"))), h("div", { key: '1e3dee560139338f206dd4c94fa52e1c248e6da6', class: "form-group" }, h("div", { key: '7c1a2754de046eac9c39a005495fa391a7b7b02e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: 'e2ba6416f090d563206e3d98e9f3ab76f197df20', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: 'bf2b58fa9cf0d3dbb470fb3bb4466545d4bc6a75', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '51a1de81d4200c79f46b61afef165fdad0ebb061', id: this.resolvedId, class: {
+        return (h("div", { key: 'b72b45a9f0a400a09fde388f41d06bacd308fa7d', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("label", { key: '9381114b6188475d0c71d17ef4dff52811f4cad8', class: "input-label Body-S-Regular", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'b85900a3a6d0c39f7a4aeb7a30dcb9be0a6b5c5b', class: "asterisk" }, " *"))), h("div", { key: '26240513e57c894ce840895bc9492c6c2a6818f0', class: "form-group" }, h("div", { key: 'c5dd44d4b6e02dc37bccb99b30c8f0673c08743c', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '54fd55147d5354bcc7002ff27c40bba21097bf0e', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '818e11d8674c1ebc48ace50038b422c5c533d998', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '782d8ba72bd59a127b6da4bf54f54955a60bae5e', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, autoComplete: this.autocomplete, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '38b78f85551b8c9f6dee1c85e48fa67149f58e29', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'd23e87d325e6c051c04a0eb0671a53d8cec05b41', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '84e228278687d583ffa056c4540da63356aeaa1f', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f26a6e681a262c2f348412e4bf9055e417e76261', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '9e0376883c4727d84aec3f4c7da7d76196639740', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, autoComplete: this.autocomplete, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '4d84150f83856508a63785a31543ed1b3c65eff3', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'c6f1b61254851d52d4fbbdd9f71bff57ad4b43fa', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'ed45a1e3adcf7d2063a6d212a4250a07d9cc274a', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '1406953e6665b9a4e8ee2527c0f247ef2c52882a', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'ce1ee3a839856c408b58f737ac7fae63bad779e6', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));

package/dist/dropi-ui/dropi-input.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-input.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,k+FAAk+F,CAAC;;MCyBn/F,UAAU,GAAA,MAAA;;;;;;;;;;;;;;;AACF,IAAA,SAAS;;;AAIH,IAAA,OAAO;;AAEP,IAAA,IAAI;;;IAIJ,KAAK,GAAW,EAAE;;IAElB,WAAW,GAAW,GAAG;;IAEzB,KAAK,GAAW,EAAE;;AAElB,IAAA,SAAS;;;IAIT,QAAQ,GAAY,KAAK;;IAEzB,QAAQ,GAAY,KAAK;;IAEzB,sBAAsB,GAAY,IAAI;;IAEvD,UAAU,GAAY,KAAK;;IAEV,SAAS,GAAc,MAAM;;;IAI7B,aAAa,GAAY,KAAK;;IAE9B,YAAY,GAAY,KAAK;;IAE7B,mBAAmB,GAAY,KAAK;;IAEpC,cAAc,GAAY,KAAK;;IAE/B,aAAa,GAAY,KAAK;;IAE9B,aAAa,GAAY,KAAK;;IAE/C,YAAY,GAAW,IAAI;;;IAIV,IAAI,GAAW,EAAE;;IAEjB,SAAS,GAAW,eAAe;;;IAInC,QAAQ,GAAY,KAAK;;IAEzB,UAAU,GAAW,EAAE;;IAEvB,qBAAqB,GAAY,KAAK;;AAG/D;;;;;;;AAOG;IACK,eAAe,GAAQ,IAAI;;IAGlB,YAAY,GAAY,KAAK;IAC7B,OAAO,GAAY,KAAK;;;AAIhC,IAAA,UAAU;;AAEV,IAAA,WAAW;;AAEX,IAAA,UAAU;;AAEV,IAAA,SAAS;AAGlB,IAAA,sBAAsB,CAAC,GAAQ,EAAA;AAC7B,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI,GAAG,CAAC,EAAE,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,EAAE;AAC/C,QAAA,IAAI,GAAG,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO;AACzD,QAAA,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK;AACnD,QAAA,IAAI,GAAG,CAAC,WAAW,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW;AACrE,QAAA,IAAI,GAAG,CAAC,SAAS,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,SAAS;AAC/D,QAAA,IAAI,GAAG,CAAC,UAAU,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,UAAU;AAClE,QAAA,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,aAAa;AAC3E,QAAA,IAAI,GAAG,CAAC,eAAe,KAAK,SAAS;YAAE,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,eAAe,CAAC;AAChF,QAAA,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI;AAChD,QAAA,IAAI,GAAG,CAAC,SAAS,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,SAAS;AAC/D,QAAA,IAAI,GAAG,CAAC,YAAY,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,YAAY;AACxE,QAAA,IAAI,GAAG,CAAC,sBAAsB,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,sBAAsB,GAAG,GAAG,CAAC,sBAAsB;AACtG,QAAA,IAAI,GAAG,CAAC,cAAc,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC,cAAc;AAC9E,QAAA,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,aAAa;AAC3E,QAAA,IAAI,GAAG,CAAC,mBAAmB,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,mBAAmB,GAAG,GAAG,CAAC,mBAAmB;AAC7F,QAAA,IAAI,GAAG,CAAC,qBAAqB,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,qBAAqB,GAAG,GAAG,CAAC,qBAAqB;AACnG,QAAA,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,aAAa;AAC3E,QAAA,IAAI,GAAG,CAAC,SAAS,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,SAAS;;AAIjE,IAAA,YAAY,CAAC,GAAW,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC;;AAIlC,IAAA,eAAe,CAAC,GAAY,EAAA;AAC1B,QAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,GAAG,GAAG,mBAAmB,GAAG,EAAE,CAAC;;IAG9F,iBAAiB,GAAA;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAC7C,IAAI,IAAI,CAAC,eAAe;AAAE,YAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;;;AAKrE,IAAA,WAAW,CAAC,CAAa,EAAA;AAC/B,QAAA,IAAI,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;QAE9C,IAAI,IAAI,CAAC,cAAc;AAAE,YAAA,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;QACtD,IAAI,IAAI,CAAC,aAAa;AAAE,YAAA,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;AACrD,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,mBAAmB;YAAE,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC;AAErG,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;AAChB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC;AAChC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGpB,IAAA,aAAa,CAAC,CAAgB,EAAA;QACpC,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,mBAAmB,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;YACzG,CAAC,CAAC,cAAc,EAAE;;AAEpB,QAAA,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;YACrD,CAAC,CAAC,cAAc,EAAE;;;IAId,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;IAGhB,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;IAGf,cAAc,GAAA;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;;;AAKhC,IAAA,aAAa,CAAC,GAAW,EAAA;AAC/B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,GAAG,UAAU,GAAG,SAAS;QAC3D,OAAO,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;;AAGzB,IAAA,aAAa,CAAC,GAAW,EAAA;QAC/B,OAAO,GAAG,CAAC,OAAO,CAAC,4BAA4B,EAAE,EAAE,CAAC;;AAG9C,IAAA,kBAAkB,CAAC,CAAgB,EAAA;AACzC,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC;AACjG,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;AAAE,YAAA,OAAO,IAAI;AACxC,QAAA,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;AACxC,QAAA,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;AAAE,YAAA,OAAO,IAAI;QACtC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;AAAE,YAAA,OAAO,IAAI;AACpD,QAAA,OAAO,KAAK;;AAGN,IAAA,kBAAkB,CAAC,CAAgB,EAAA;QACzC,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC;AACtG,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;AAAE,YAAA,OAAO,IAAI;AACxC,QAAA,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;QACvC,OAAO,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;;IAGvC,eAAe,CAAC,GAAW,EAAE,YAAqB,EAAA;QACxD,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;AACvC,QAAA,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;QACzC,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC;AAC/D,QAAA,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,GAAG,CAAA,EAAG,SAAS,IAAI,OAAO,CAAA,CAAE,GAAG,SAAS;QAC5E,OAAO,YAAY,GAAG,CAAA,CAAA,EAAI,MAAM,CAAA,CAAE,GAAG,MAAM;;;AAK7C,IAAA,IAAY,UAAU,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI;;AAGlC,IAAA,IAAY,SAAS,GAAA;QACnB,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,UAAU;AACtE,QAAA,OAAO,MAAM;;AAGf,IAAA,IAAY,UAAU,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,KAAK;QAClC,IAAI,IAAI,CAAC,qBAAqB;AAAE,YAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;AACpE,QAAA,OAAO,IAAI;;AAGb,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;;;IAKtC,MAAM,GAAA;AACJ,QAAA,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,QAAQ;AAC7F,QAAA,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;QAElC,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAErD,IAAI,CAAC,UAAU,KACd,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAA,EAC/D,IAAI,CAAC,KAAK,EACV,sBAAsB,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAA,EAAA,IAAA,CAAU,CACrD,CACT,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,2BAA2B,EAAE,cAAc,EAAE,EAAA,EAEjF,cAAc,KACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CACvJ,EAGA,IAAI,CAAC,aAAa,KACjB,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,YAAY,GAAG,KAAK,GAAG,aAAa,EAC/C,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACxC,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAA,CACpC,CACH,EAGD,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,oBAAoB,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;gBACrE,sBAAsB,EAAE,IAAI,CAAC,SAAS;AACtC,gBAAA,cAAc,EAAE,cAAc;gBAC9B,eAAe,EAAE,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,YAAY;gBACzD,mBAAmB,EAAE,IAAI,CAAC,UAAU;aACrC,EACD,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,EACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAA,SAAA,EACtB,SAAS,EAClB,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAe,CAAC,EAC/C,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAkB,CAAC,EACtD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAA,CAC/B,EAGD,CAAC,IAAI,CAAC,UAAU,KACf,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAA,EAChE,IAAI,CAAC,KAAK,EACV,sBAAsB,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAA,EAAA,IAAA,CAAU,CACrD,CACT,EAGA,IAAI,CAAC,UAAU,KACd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC7B,IAAI,CAAC,SAAS,IAAI,mEAAY,IAAI,EAAC,gBAAgB,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB,EAAA,CAAG,EAClH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI,CAAC,QAAQ;gBAChC,eAAe,EAAE,IAAI,CAAC,SAAS;aAChC,EAAA,EAEA,IAAI,CAAC,UAAU,CACX,CACH,CACP,CACG,CACF,CACF;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-input/dropi-input.css?tag=dropi-input&encapsulation=shadow","src/components/dropi-input/dropi-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* ── Fixed label layout ────────────────────────────────────── */\n.fixed-label-container {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.input-label {\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-regular, 400);\n  text-align: left;\n}\n\n.asterisk {\n  color: var(--Error-Error-500, #f46a6b);\n}\n\n/* ── Form group / container ────────────────────────────────── */\n.form-group {\n  position: relative;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n}\n\n/* ── Icons ─────────────────────────────────────────────────── */\n.icon-input {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  transform: translateY(-50%);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-input-password {\n  position: absolute;\n  top: 50%;\n  right: 13px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ── Base input ─────────────────────────────────────────────── */\n.form-control {\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--Size-2, 8px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  outline: none;\n  appearance: none;\n  text-align: left;\n}\n\n.form-control::placeholder {\n  color: transparent;\n  transition: color 0.2s ease-in-out;\n}\n\n/* Show placeholder only on focus or in fixedLabel mode */\n.form-control:focus::placeholder,\n.fixed-label-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.form-control-valid {\n  border-color: var(--Gray-Gray-400, #858ea6) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.padding-icon {\n  padding-left: 40px;\n}\n\n/* When icon is always visible, shift the floating label right to avoid overlap */\n.input-container--has-icon label.label-bottom {\n  left: 40px;\n}\n\n/* When focused or has value, float up to left: 0 regardless */\n.input-container--has-icon .form-control:focus + label.label-bottom,\n.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {\n  left: 0;\n}\n\n/* Password: hide characters via CSS (no type=password needed for font trick) */\n.text-password {\n  -webkit-text-security: disc;\n  text-security: disc;\n}\n\n/* ── Floating label ─────────────────────────────────────────── */\nlabel.label-bottom {\n  position: absolute;\n  font-weight: var(--font-weight-regular, 400);\n  top: 10px;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-500, #69738c);\n  left: 10px;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n  overflow: hidden;\n  width: 90%;\n  white-space: nowrap;\n}\n\n/* Float up when focused or has value */\n.form-control:focus+label.label-bottom,\n.form-control:not(:placeholder-shown)+label.label-bottom {\n  top: -22px;\n  left: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  width: unset;\n}\n\n.form-control:disabled+label.label-bottom {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n/* ── Helper text ────────────────────────────────────────────── */\n.form-control-helper {\n  display: flex;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  gap: 4px;\n  align-items: center;\n  margin-top: 4px;\n}\n\n.form-control-helper span {\n  display: block;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';\n\n/**\n * @component dropi-input\n * Text input with floating label, validation states, password toggle,\n * number/letter restrictions, thousand separator, and native form association.\n *\n * ## Form usage (native HTML form)\n * ```html\n * <form>\n *   <dropi-input name=\"email\" label=\"Email\" required></dropi-input>\n * </form>\n * ```\n *\n * ## Controlled usage (React / Vue / Angular)\n * Pass `value` and listen to `dropiInput` to update.\n */\n@Component({\n  tag: 'dropi-input',\n  styleUrl: 'dropi-input.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiInput {\n  @AttachInternals() internals: ElementInternals;\n\n  // ── Identification ──────────────────────────────────────────\n  /** Input id. Defaults to label label. */\n  @Prop({ mutable: true }) inputId!: string;\n  /** Name attribute for native form submission */\n  @Prop({ reflect: true }) name!: string;\n\n  // ── Content ─────────────────────────────────────────────────\n  /** Floating or fixed label text */\n  @Prop({ mutable: true }) label: string = '';\n  /** Placeholder text (visible in fixedLabel mode or on focus) */\n  @Prop({ mutable: true }) placeholder: string = ' ';\n  /** Current value (controlled) */\n  @Prop({ mutable: true }) value: string = '';\n  /** Max character length */\n  @Prop({ mutable: true }) maxLength: number;\n\n  // ── Behavior ────────────────────────────────────────────────\n  /** Disable the input */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Show the required asterisk on the label */\n  @Prop({ mutable: true }) showObligatoryAsterisk: boolean = true;\n  /** Show label above the input (fixed), instead of floating inside */\n  @Prop() fixedLabel: boolean = false;\n  /** Keyboard input mode hint */\n  @Prop({ mutable: true }) inputMode: InputMode = 'text';\n\n  // ── Input type modifiers ────────────────────────────────────\n  /** Show password visibility toggle (renders as password field) */\n  @Prop({ mutable: true }) passwordInput: boolean = false;\n  /** Apply thousand separator formatting (e.g. 1,000,000) */\n  @Prop({ mutable: true }) isMoneyInput: boolean = false;\n  /** Apply thousand separator without currency symbol */\n  @Prop({ mutable: true }) isThousandSeparator: boolean = false;\n  /** Only allow numeric characters */\n  @Prop({ mutable: true }) isNumericInput: boolean = false;\n  /** Allow decimal point when isNumericInput is true */\n  @Prop({ mutable: true }) allowDecimals: boolean = false;\n  /** Only allow letter characters */\n  @Prop({ mutable: true }) isLettersOnly: boolean = false;\n  /** HTML autocomplete attribute value */\n  @Prop() autocomplete: string = 'on';\n\n  // ── Icon ────────────────────────────────────────────────────\n  /** Icon name shown inside the input (only visible when value is not empty) */\n  @Prop({ mutable: true }) icon: string = '';\n  /** Color token for the icon */\n  @Prop({ mutable: true }) iconColor: string = 'Gray-Gray-400';\n\n  // ── Validation ──────────────────────────────────────────────\n  /** Mark the field as invalid (consumer-controlled) */\n  @Prop({ mutable: true }) hasError: boolean = false;\n  /** Helper / error text shown below the field */\n  @Prop({ mutable: true }) textHelper: string = '';\n  /** Only show textHelper when the field is invalid */\n  @Prop({ mutable: true }) showHelperOnlyOnError: boolean = false;\n\n  // ── Angular-parity ──────────────────────────────────────────\n  /**\n   * Convenience object prop — matches Angular `inputProperties: InputProperties`.\n   * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,\n   * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\n   * allowDecimals, isThousandSeparator, showHelperOnlyOnError,\n   * isLettersOnly, inputMode.\n   * Note: `formControl` is not supported; use `value` + onInput event instead.\n   */\n  @Prop() inputProperties: any = null;\n\n  // ── Internal state ──────────────────────────────────────────\n  @State() private showPassword: boolean = false;\n  @State() private touched: boolean = false;\n\n  // ── Events ──────────────────────────────────────────────────\n  /** Emitted on every keystroke with the current value */\n  @Event() dropiInput: EventEmitter<string>;\n  /** Emitted on blur with the final value */\n  @Event() dropiChange: EventEmitter<string>;\n  /** Emitted on focus */\n  @Event() dropiFocus: EventEmitter<void>;\n  /** Emitted on blur */\n  @Event() dropiBlur: EventEmitter<void>;\n\n  @Watch('inputProperties')\n  inputPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.id !== undefined) this.inputId = val.id;\n    if (val.inputId !== undefined) this.inputId = val.inputId;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.passwordInput !== undefined) this.passwordInput = val.passwordInput;\n    if (val.isPasswordInput !== undefined) this.passwordInput = val.isPasswordInput; // Fallback\n    if (val.icon !== undefined) this.icon = val.icon;\n    if (val.iconColor !== undefined) this.iconColor = val.iconColor;\n    if (val.isMoneyInput !== undefined) this.isMoneyInput = val.isMoneyInput;\n    if (val.showObligatoryAsterisk !== undefined) this.showObligatoryAsterisk = val.showObligatoryAsterisk;\n    if (val.isNumericInput !== undefined) this.isNumericInput = val.isNumericInput;\n    if (val.allowDecimals !== undefined) this.allowDecimals = val.allowDecimals;\n    if (val.isThousandSeparator !== undefined) this.isThousandSeparator = val.isThousandSeparator;\n    if (val.showHelperOnlyOnError !== undefined) this.showHelperOnlyOnError = val.showHelperOnlyOnError;\n    if (val.isLettersOnly !== undefined) this.isLettersOnly = val.isLettersOnly;\n    if (val.inputMode !== undefined) this.inputMode = val.inputMode;\n  }\n\n  @Watch('value')\n  valueChanged(val: string) {\n    this.internals.setFormValue(val);\n  }\n\n  @Watch('disabled')\n  disabledChanged(val: boolean) {\n    this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value ?? '');\n    if (this.inputProperties) this.inputPropertiesChanged(this.inputProperties);\n  }\n\n  // ── Handlers ────────────────────────────────────────────────\n\n  private handleInput(e: InputEvent) {\n    let val = (e.target as HTMLInputElement).value;\n\n    if (this.isNumericInput) val = this.filterNumbers(val);\n    if (this.isLettersOnly) val = this.filterLetters(val);\n    if (this.isMoneyInput || this.isThousandSeparator) val = this.formatThousands(val, this.isMoneyInput);\n\n    this.value = val;\n    this.internals.setFormValue(val);\n    this.dropiInput.emit(val);\n    this.dropiChange.emit(val);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {\n      e.preventDefault();\n    }\n    if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {\n      e.preventDefault();\n    }\n  }\n\n  private handleFocus() {\n    this.dropiFocus.emit();\n  }\n\n  private handleBlur() {\n    this.touched = true;\n    this.dropiBlur.emit();\n  }\n\n  private togglePassword() {\n    if (this.disabled) return;\n    this.showPassword = !this.showPassword;\n  }\n\n  // ── Helpers ─────────────────────────────────────────────────\n\n  private filterNumbers(val: string): string {\n    const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;\n    return val.replace(pattern, '');\n  }\n\n  private filterLetters(val: string): string {\n    return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\\s]/g, '');\n  }\n\n  private isAllowedNumberKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true; // copy/paste/select-all\n    if (/^[0-9]$/.test(e.key)) return true;\n    if (this.allowDecimals && e.key === '.') return true;\n    return false;\n  }\n\n  private isAllowedLetterKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true;\n    return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);\n  }\n\n  private formatThousands(val: string, withCurrency: boolean): string {\n    const raw = val.replace(/[^0-9.]/g, '');\n    const [integer, decimal] = raw.split('.');\n    const formatted = integer.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n    const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;\n    return withCurrency ? `$${result}` : result;\n  }\n\n  // ── Computed ─────────────────────────────────────────────────\n\n  private get resolvedId(): string {\n    return this.inputId || this.name;\n  }\n\n  private get inputType(): string {\n    if (this.passwordInput) return this.showPassword ? 'text' : 'password';\n    return 'text';\n  }\n\n  private get showHelper(): boolean {\n    if (!this.textHelper) return false;\n    if (this.showHelperOnlyOnError) return this.hasError && this.touched;\n    return true;\n  }\n\n  private get isInvalid(): boolean {\n    return this.hasError && this.touched;\n  }\n\n  // ── Render ───────────────────────────────────────────────────\n\n  render() {\n    const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n    const showIconInline = !!this.icon;\n\n    return (\n      <div class={{ 'fixed-label-container': this.fixedLabel }}>\n        {/* Fixed label above input */}\n        {this.fixedLabel && (\n          <label class=\"input-label Body-S-Regular\" htmlFor={this.resolvedId}>\n            {this.label}\n            {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n          </label>\n        )}\n\n        <div class=\"form-group\">\n          <div class={{ 'input-container': true, 'input-container--has-icon': showIconInline }}>\n            {/* Inline icon (left) */}\n            {showIconInline && (\n              <dropi-icon class=\"icon-input\" name={this.icon} color={this.iconColor} iconWidth=\"20px\" iconHeight=\"20px\" style={{ width: '20px', height: '20px' }} />\n            )}\n\n            {/* Password toggle (right) */}\n            {this.passwordInput && (\n              <dropi-icon\n                class=\"icon-input-password\"\n                name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n                color=\"Gray-Gray-500\"\n                onClick={() => this.togglePassword()}\n              />\n            )}\n\n            {/* Native input */}\n            <input\n              id={this.resolvedId}\n              class={{\n                'form-control': true,\n                'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n                'form-control-invalid': this.isInvalid,\n                'padding-icon': showIconInline,\n                'text-password': this.passwordInput && !this.showPassword,\n                'fixed-label-input': this.fixedLabel,\n              }}\n              type={this.inputType}\n              value={this.value}\n              placeholder={this.fixedLabel ? this.placeholder : ' '}\n              disabled={this.disabled}\n              required={this.required}\n              maxLength={this.maxLength}\n              inputMode={this.inputMode}\n              autoComplete={this.autocomplete}\n              data-cy={undefined}\n              onInput={e => this.handleInput(e as InputEvent)}\n              onKeyDown={e => this.handleKeyDown(e as KeyboardEvent)}\n              onFocus={() => this.handleFocus()}\n              onBlur={() => this.handleBlur()}\n            />\n\n            {/* Floating label (only when not fixedLabel) */}\n            {!this.fixedLabel && (\n              <label class=\"Body-S-Regular label-bottom\" htmlFor={this.resolvedId}>\n                {this.label}\n                {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n              </label>\n            )}\n\n            {/* Helper / error text */}\n            {this.showHelper && (\n              <div class=\"form-control-helper\">\n                {this.isInvalid && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n                <span\n                  class={{\n                    'disabled-helper': this.disabled,\n                    'invalid-color': this.isInvalid,\n                  }}\n                >\n                  {this.textHelper}\n                </span>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-input/dropi-input.css?tag=dropi-input&encapsulation=shadow","src/components/dropi-input/dropi-input.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: block;\n  width: 100%;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* ── Fixed label layout ────────────────────────────────────── */\n.fixed-label-container {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.input-label {\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-regular, 400);\n  text-align: left;\n}\n\n.asterisk {\n  color: var(--Error-Error-500, #f46a6b);\n}\n\n/* ── Form group / container ────────────────────────────────── */\n.form-group {\n  position: relative;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n}\n\n/* ── Icons ─────────────────────────────────────────────────── */\n.icon-input {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  transform: translateY(-50%);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-input-password {\n  position: absolute;\n  top: 50%;\n  right: 13px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ── Base input ─────────────────────────────────────────────── */\n.form-control {\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--Size-2, 8px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  color: var(--Gray-Gray-700, #32394d);\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  outline: none;\n  appearance: none;\n  text-align: left;\n}\n\n.form-control::placeholder {\n  color: transparent;\n  transition: color 0.2s ease-in-out;\n}\n\n/* Show placeholder only on focus or in fixedLabel mode */\n.form-control:focus::placeholder,\n.fixed-label-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.form-control-valid {\n  border-color: var(--Gray-Gray-400, #858ea6) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.padding-icon {\n  padding-left: 40px;\n}\n\n/* When icon is always visible, shift the floating label right to avoid overlap */\n.input-container--has-icon label.label-bottom {\n  left: 40px;\n}\n\n/* When focused or has value, float up to left: 0 regardless */\n.input-container--has-icon .form-control:focus + label.label-bottom,\n.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {\n  left: 0;\n}\n\n/* Password: hide characters via CSS (no type=password needed for font trick) */\n.text-password {\n  -webkit-text-security: disc;\n  text-security: disc;\n}\n\n/* ── Floating label ─────────────────────────────────────────── */\nlabel.label-bottom {\n  position: absolute;\n  font-weight: var(--font-weight-regular, 400);\n  top: 10px;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-500, #69738c);\n  left: 10px;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n  overflow: hidden;\n  width: 90%;\n  white-space: nowrap;\n}\n\n/* Float up when focused or has value */\n.form-control:focus+label.label-bottom,\n.form-control:not(:placeholder-shown)+label.label-bottom {\n  top: -22px;\n  left: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  width: unset;\n}\n\n.form-control:disabled+label.label-bottom {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n/* ── Helper text ────────────────────────────────────────────── */\n.form-control-helper {\n  display: flex;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  gap: 4px;\n  align-items: center;\n  margin-top: 4px;\n}\n\n.form-control-helper span {\n  display: block;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';\n\n/**\n * @component dropi-input\n * Text input with floating label, validation states, password toggle,\n * number/letter restrictions, thousand separator, and native form association.\n *\n * ## Form usage (native HTML form)\n * ```html\n * <form>\n *   <dropi-input name=\"email\" label=\"Email\" required></dropi-input>\n * </form>\n * ```\n *\n * ## Controlled usage (React / Vue / Angular)\n * Pass `value` and listen to `dropiInput` to update.\n */\n@Component({\n  tag: 'dropi-input',\n  styleUrl: 'dropi-input.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiInput {\n  @AttachInternals() internals: ElementInternals;\n\n  // ── Identification ──────────────────────────────────────────\n  /** Input id. Defaults to label label. */\n  @Prop({ mutable: true }) inputId!: string;\n  /** Name attribute for native form submission */\n  @Prop({ reflect: true }) name!: string;\n\n  // ── Content ─────────────────────────────────────────────────\n  /** Floating or fixed label text */\n  @Prop({ mutable: true }) label: string = '';\n  /** Placeholder text (visible in fixedLabel mode or on focus) */\n  @Prop({ mutable: true }) placeholder: string = ' ';\n  /** Current value (controlled) */\n  @Prop({ mutable: true }) value: string = '';\n  /** Max character length */\n  @Prop({ mutable: true }) maxLength: number;\n\n  // ── Behavior ────────────────────────────────────────────────\n  /** Disable the input */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Show the required asterisk on the label */\n  @Prop({ mutable: true }) showObligatoryAsterisk: boolean = true;\n  /** Show label above the input (fixed), instead of floating inside */\n  @Prop() fixedLabel: boolean = false;\n  /** Keyboard input mode hint */\n  @Prop({ mutable: true }) inputMode: InputMode = 'text';\n\n  // ── Input type modifiers ────────────────────────────────────\n  /** Show password visibility toggle (renders as password field) */\n  @Prop({ mutable: true }) passwordInput: boolean = false;\n  /** Apply thousand separator formatting (e.g. 1,000,000) */\n  @Prop({ mutable: true }) isMoneyInput: boolean = false;\n  /** Apply thousand separator without currency symbol */\n  @Prop({ mutable: true }) isThousandSeparator: boolean = false;\n  /** Only allow numeric characters */\n  @Prop({ mutable: true }) isNumericInput: boolean = false;\n  /** Allow decimal point when isNumericInput is true */\n  @Prop({ mutable: true }) allowDecimals: boolean = false;\n  /** Only allow letter characters */\n  @Prop({ mutable: true }) isLettersOnly: boolean = false;\n  /** HTML autocomplete attribute value */\n  @Prop() autocomplete: string = 'on';\n\n  // ── Icon ────────────────────────────────────────────────────\n  /** Icon name shown inside the input (only visible when value is not empty) */\n  @Prop({ mutable: true }) icon: string = '';\n  /** Color token for the icon */\n  @Prop({ mutable: true }) iconColor: string = 'Gray-Gray-400';\n\n  // ── Validation ──────────────────────────────────────────────\n  /** Mark the field as invalid (consumer-controlled) */\n  @Prop({ mutable: true }) hasError: boolean = false;\n  /** Helper / error text shown below the field */\n  @Prop({ mutable: true }) textHelper: string = '';\n  /** Only show textHelper when the field is invalid */\n  @Prop({ mutable: true }) showHelperOnlyOnError: boolean = false;\n\n  // ── Angular-parity ──────────────────────────────────────────\n  /**\n   * Convenience object prop — matches Angular `inputProperties: InputProperties`.\n   * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,\n   * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\n   * allowDecimals, isThousandSeparator, showHelperOnlyOnError,\n   * isLettersOnly, inputMode.\n   * Note: `formControl` is not supported; use `value` + onInput event instead.\n   */\n  @Prop() inputProperties: any = null;\n\n  // ── Internal state ──────────────────────────────────────────\n  @State() private showPassword: boolean = false;\n  @State() private touched: boolean = false;\n\n  // ── Events ──────────────────────────────────────────────────\n  /** Emitted on every keystroke with the current value */\n  @Event() dropiInput: EventEmitter<string>;\n  /** Emitted on blur with the final value */\n  @Event() dropiChange: EventEmitter<string>;\n  /** Emitted on focus */\n  @Event() dropiFocus: EventEmitter<void>;\n  /** Emitted on blur */\n  @Event() dropiBlur: EventEmitter<void>;\n\n  @Watch('inputProperties')\n  inputPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.id !== undefined) this.inputId = val.id;\n    if (val.inputId !== undefined) this.inputId = val.inputId;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.passwordInput !== undefined) this.passwordInput = val.passwordInput;\n    if (val.isPasswordInput !== undefined) this.passwordInput = val.isPasswordInput; // Fallback\n    if (val.icon !== undefined) this.icon = val.icon;\n    if (val.iconColor !== undefined) this.iconColor = val.iconColor;\n    if (val.isMoneyInput !== undefined) this.isMoneyInput = val.isMoneyInput;\n    if (val.showObligatoryAsterisk !== undefined) this.showObligatoryAsterisk = val.showObligatoryAsterisk;\n    if (val.isNumericInput !== undefined) this.isNumericInput = val.isNumericInput;\n    if (val.allowDecimals !== undefined) this.allowDecimals = val.allowDecimals;\n    if (val.isThousandSeparator !== undefined) this.isThousandSeparator = val.isThousandSeparator;\n    if (val.showHelperOnlyOnError !== undefined) this.showHelperOnlyOnError = val.showHelperOnlyOnError;\n    if (val.isLettersOnly !== undefined) this.isLettersOnly = val.isLettersOnly;\n    if (val.inputMode !== undefined) this.inputMode = val.inputMode;\n  }\n\n  @Watch('value')\n  valueChanged(val: string) {\n    this.internals.setFormValue(val);\n  }\n\n  @Watch('disabled')\n  disabledChanged(val: boolean) {\n    this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value ?? '');\n    if (this.inputProperties) this.inputPropertiesChanged(this.inputProperties);\n  }\n\n  // ── Handlers ────────────────────────────────────────────────\n\n  private handleInput(e: InputEvent) {\n    let val = (e.target as HTMLInputElement).value;\n\n    if (this.isNumericInput) val = this.filterNumbers(val);\n    if (this.isLettersOnly) val = this.filterLetters(val);\n    if (this.isMoneyInput || this.isThousandSeparator) val = this.formatThousands(val, this.isMoneyInput);\n\n    this.value = val;\n    this.internals.setFormValue(val);\n    this.dropiInput.emit(val);\n    this.dropiChange.emit(val);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {\n      e.preventDefault();\n    }\n    if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {\n      e.preventDefault();\n    }\n  }\n\n  private handleFocus() {\n    this.dropiFocus.emit();\n  }\n\n  private handleBlur() {\n    this.touched = true;\n    this.dropiBlur.emit();\n  }\n\n  private togglePassword() {\n    if (this.disabled) return;\n    this.showPassword = !this.showPassword;\n  }\n\n  // ── Helpers ─────────────────────────────────────────────────\n\n  private filterNumbers(val: string): string {\n    const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;\n    return val.replace(pattern, '');\n  }\n\n  private filterLetters(val: string): string {\n    return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\\s]/g, '');\n  }\n\n  private isAllowedNumberKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true; // copy/paste/select-all\n    if (/^[0-9]$/.test(e.key)) return true;\n    if (this.allowDecimals && e.key === '.') return true;\n    return false;\n  }\n\n  private isAllowedLetterKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true;\n    return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);\n  }\n\n  private formatThousands(val: string, withCurrency: boolean): string {\n    const raw = val.replace(/[^0-9.]/g, '');\n    const [integer, decimal] = raw.split('.');\n    const formatted = integer.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n    const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;\n    return withCurrency ? `$${result}` : result;\n  }\n\n  // ── Computed ─────────────────────────────────────────────────\n\n  private get resolvedId(): string {\n    return this.inputId || this.name;\n  }\n\n  private get inputType(): string {\n    if (this.passwordInput) return this.showPassword ? 'text' : 'password';\n    return 'text';\n  }\n\n  private get showHelper(): boolean {\n    if (!this.textHelper) return false;\n    if (this.showHelperOnlyOnError) return this.hasError && this.touched;\n    return true;\n  }\n\n  private get isInvalid(): boolean {\n    return this.hasError && this.touched;\n  }\n\n  // ── Render ───────────────────────────────────────────────────\n\n  render() {\n    const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n    const showIconInline = !!this.icon;\n\n    return (\n      <div class={{ 'fixed-label-container': this.fixedLabel }}>\n        {/* Fixed label above input */}\n        {this.fixedLabel && (\n          <label class=\"input-label Body-S-Regular\" htmlFor={this.resolvedId}>\n            {this.label}\n            {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n          </label>\n        )}\n\n        <div class=\"form-group\">\n          <div class={{ 'input-container': true, 'input-container--has-icon': showIconInline }}>\n            {/* Inline icon (left) */}\n            {showIconInline && (\n              <dropi-icon class=\"icon-input\" name={this.icon} color={this.iconColor} iconWidth=\"20px\" iconHeight=\"20px\" style={{ width: '20px', height: '20px' }} />\n            )}\n\n            {/* Password toggle (right) */}\n            {this.passwordInput && (\n              <dropi-icon\n                class=\"icon-input-password\"\n                name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n                color=\"Gray-Gray-500\"\n                onClick={() => this.togglePassword()}\n              />\n            )}\n\n            {/* Native input */}\n            <input\n              id={this.resolvedId}\n              class={{\n                'form-control': true,\n                'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n                'form-control-invalid': this.isInvalid,\n                'padding-icon': showIconInline,\n                'text-password': this.passwordInput && !this.showPassword,\n                'fixed-label-input': this.fixedLabel,\n              }}\n              type={this.inputType}\n              value={this.value}\n              placeholder={this.fixedLabel ? this.placeholder : ' '}\n              disabled={this.disabled}\n              required={this.required}\n              maxLength={this.maxLength}\n              inputMode={this.inputMode}\n              autoComplete={this.autocomplete}\n              data-cy={undefined}\n              onInput={e => this.handleInput(e as InputEvent)}\n              onKeyDown={e => this.handleKeyDown(e as KeyboardEvent)}\n              onFocus={() => this.handleFocus()}\n              onBlur={() => this.handleBlur()}\n            />\n\n            {/* Floating label (only when not fixedLabel) */}\n            {!this.fixedLabel && (\n              <label class=\"Body-S-Regular label-bottom\" htmlFor={this.resolvedId}>\n                {this.label}\n                {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n              </label>\n            )}\n\n            {/* Helper / error text */}\n            {this.showHelper && (\n              <div class=\"form-control-helper\">\n                {this.isInvalid && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n                <span\n                  class={{\n                    'disabled-helper': this.disabled,\n                    'invalid-color': this.isInvalid,\n                  }}\n                >\n                  {this.textHelper}\n                </span>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-languages-selector.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
 
-const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:relative}*,*::before,*::after{box-sizing:border-box}.custom-dropdown{position:relative;cursor:pointer;user-select:none}.custom-dropdown.open dropi-icon{transform:rotate(180deg)}.selected-option{display:flex;height:38px;padding:var(--Size-2, 8px) var(--Size-3, 12px);align-items:center;gap:var(--Size-2, 8px);border-radius:4px;border:1px solid var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:6px;margin-top:4px;z-index:1000;overflow-y:auto;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0;list-style:none;height:0;opacity:0;visibility:hidden;transition:height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;max-height:0}.dropdown-options.dropdown-open{max-height:300px;height:auto;opacity:1;visibility:visible}.dropdown-options li{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options li:hover,.dropdown-options li.active{background:var(--Gray-Gray-50, #f7f8fa)}@media screen and (max-width: 720px){.selected-option span,.dropdown-options li span{display:none}}`;
+const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:relative}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.custom-dropdown{position:relative;cursor:pointer;user-select:none}.custom-dropdown.open dropi-icon{transform:rotate(180deg)}.selected-option{display:flex;height:40px;padding:var(--Size-2, 8px) var(--Size-3, 12px);align-items:center;gap:var(--Size-2, 8px);border-radius:4px;border:1px solid var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:6px;margin-top:4px;z-index:1000;overflow-y:auto;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0;list-style:none;height:0;opacity:0;visibility:hidden;transition:height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;max-height:0}.dropdown-options.dropdown-open{max-height:300px;height:auto;opacity:1;visibility:visible}.dropdown-options li{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options li:hover,.dropdown-options li.active{background:var(--Gray-Gray-50, #f7f8fa)}@media screen and (max-width: 720px){.selected-option span,.dropdown-options li span{display:none}}`;
 
 const DropiLanguagesSelector = class {
     constructor(hostRef) {

package/dist/dropi-ui/dropi-languages-selector.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-languages-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-languages-selector/dropi-languages-selector.css?tag=dropi-languages-selector&encapsulation=shadow","src/components/dropi-languages-selector/dropi-languages-selector.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.custom-dropdown {\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n\n.custom-dropdown.open dropi-icon {\n  transform: rotate(180deg);\n}\n\n.selected-option {\n  display: flex;\n  height: 38px;\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  border-radius: 4px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.dropdown-options {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: white;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 6px;\n  margin-top: 4px;\n  z-index: 1000;\n  overflow-y: auto;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 0;\n  list-style: none;\n  height: 0;\n  opacity: 0;\n  visibility: hidden;\n  transition: height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;\n  max-height: 0;\n}\n\n.dropdown-options.dropdown-open {\n  max-height: 300px;\n  height: auto;\n  opacity: 1;\n  visibility: visible;\n}\n\n.dropdown-options li {\n  padding: 8px 12px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.dropdown-options li:hover,\n.dropdown-options li.active {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n@media screen and (max-width: 720px) {\n  .selected-option span,\n  .dropdown-options li span {\n    display: none;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h } from '@stencil/core';\n\nexport interface LanguageOption {\n  code: string;\n  label: string;\n  /** ISO country code for the flag (e.g. \"CO\", \"US\") */\n  flag: string;\n}\n\n/**\n * @component dropi-languages-selector\n * Dropdown to switch between languages, showing country flag + label.\n *\n * @example\n * <dropi-languages-selector\n *   languages='[{\"code\":\"es\",\"label\":\"Español\",\"flag\":\"CO\"},{\"code\":\"en\",\"label\":\"English\",\"flag\":\"US\"}]'\n * ></dropi-languages-selector>\n */\n@Component({\n  tag: 'dropi-languages-selector',\n  styleUrl: 'dropi-languages-selector.css',\n  shadow: true,\n})\nexport class DropiLanguagesSelector {\n  /** Language options (array or JSON string) */\n  @Prop() languages: LanguageOption[] | string = [];\n  /** Currently selected language (LanguageOption or JSON string) */\n  @Prop({ mutable: true }) selectedLang: LanguageOption | string | null = null;\n\n  @Event() dropiLanguageChange: EventEmitter<LanguageOption>;\n\n  @State() private isOpen: boolean = false;\n  @State() private parsedLanguages: LanguageOption[] = [];\n  @State() private currentLang: LanguageOption | null = null;\n\n  @Watch('languages')\n  languagesChanged(val: LanguageOption[] | string) {\n    if (val == null) { this.parsedLanguages = []; return; }\n    this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : ((val as LanguageOption[]) ?? []);\n    if (!this.currentLang && this.parsedLanguages.length > 0) {\n      this.currentLang = this.parsedLanguages[0];\n    }\n  }\n\n  @Watch('selectedLang')\n  selectedLangChanged(val: LanguageOption | string | null) {\n    if (!val) return;\n    this.currentLang = typeof val === 'string' ? JSON.parse(val) : (val as LanguageOption);\n  }\n\n  componentWillLoad() {\n    this.languagesChanged(this.languages);\n    if (this.selectedLang) this.selectedLangChanged(this.selectedLang);\n  }\n\n  private select(lang: LanguageOption) {\n    this.currentLang = lang;\n    this.isOpen = false;\n    this.dropiLanguageChange.emit(lang);\n  }\n\n  render() {\n    if (!this.currentLang) return null;\n    return (\n      <div class={`custom-dropdown${this.isOpen ? ' open' : ''}`}>\n        <div class=\"selected-option\" onClick={() => { this.isOpen = !this.isOpen; }}>\n          <dropi-country-flags country={this.currentLang.flag} flag-style=\"rectangle\" width=\"20\" height=\"15\" />\n          <span class=\"Body-S-Regular\">{this.currentLang.label}</span>\n          <dropi-icon name=\"Caret-down\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-500\" />\n        </div>\n        <ul class={`dropdown-options${this.isOpen ? ' dropdown-open' : ''}`}>\n          {this.parsedLanguages.map(lang => (\n            <li\n              key={lang.code}\n              class={lang.code === this.currentLang?.code ? 'active' : ''}\n              onClick={() => this.select(lang)}\n            >\n              <dropi-country-flags country={lang.flag} flag-style=\"rectangle\" width=\"20\" height=\"15\" />\n              <span class=\"Body-S-Regular\">{lang.label}</span>\n            </li>\n          ))}\n        </ul>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-languages-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-languages-selector/dropi-languages-selector.css?tag=dropi-languages-selector&encapsulation=shadow","src/components/dropi-languages-selector/dropi-languages-selector.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.custom-dropdown {\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n\n.custom-dropdown.open dropi-icon {\n  transform: rotate(180deg);\n}\n\n.selected-option {\n  display: flex;\n  height: 40px;\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  border-radius: 4px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.dropdown-options {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: white;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 6px;\n  margin-top: 4px;\n  z-index: 1000;\n  overflow-y: auto;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 0;\n  list-style: none;\n  height: 0;\n  opacity: 0;\n  visibility: hidden;\n  transition: height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;\n  max-height: 0;\n}\n\n.dropdown-options.dropdown-open {\n  max-height: 300px;\n  height: auto;\n  opacity: 1;\n  visibility: visible;\n}\n\n.dropdown-options li {\n  padding: 8px 12px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.dropdown-options li:hover,\n.dropdown-options li.active {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n@media screen and (max-width: 720px) {\n  .selected-option span,\n  .dropdown-options li span {\n    display: none;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h } from '@stencil/core';\n\nexport interface LanguageOption {\n  code: string;\n  label: string;\n  /** ISO country code for the flag (e.g. \"CO\", \"US\") */\n  flag: string;\n}\n\n/**\n * @component dropi-languages-selector\n * Dropdown to switch between languages, showing country flag + label.\n *\n * @example\n * <dropi-languages-selector\n *   languages='[{\"code\":\"es\",\"label\":\"Español\",\"flag\":\"CO\"},{\"code\":\"en\",\"label\":\"English\",\"flag\":\"US\"}]'\n * ></dropi-languages-selector>\n */\n@Component({\n  tag: 'dropi-languages-selector',\n  styleUrl: 'dropi-languages-selector.css',\n  shadow: true,\n})\nexport class DropiLanguagesSelector {\n  /** Language options (array or JSON string) */\n  @Prop() languages: LanguageOption[] | string = [];\n  /** Currently selected language (LanguageOption or JSON string) */\n  @Prop({ mutable: true }) selectedLang: LanguageOption | string | null = null;\n\n  @Event() dropiLanguageChange: EventEmitter<LanguageOption>;\n\n  @State() private isOpen: boolean = false;\n  @State() private parsedLanguages: LanguageOption[] = [];\n  @State() private currentLang: LanguageOption | null = null;\n\n  @Watch('languages')\n  languagesChanged(val: LanguageOption[] | string) {\n    if (val == null) { this.parsedLanguages = []; return; }\n    this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : ((val as LanguageOption[]) ?? []);\n    if (!this.currentLang && this.parsedLanguages.length > 0) {\n      this.currentLang = this.parsedLanguages[0];\n    }\n  }\n\n  @Watch('selectedLang')\n  selectedLangChanged(val: LanguageOption | string | null) {\n    if (!val) return;\n    this.currentLang = typeof val === 'string' ? JSON.parse(val) : (val as LanguageOption);\n  }\n\n  componentWillLoad() {\n    this.languagesChanged(this.languages);\n    if (this.selectedLang) this.selectedLangChanged(this.selectedLang);\n  }\n\n  private select(lang: LanguageOption) {\n    this.currentLang = lang;\n    this.isOpen = false;\n    this.dropiLanguageChange.emit(lang);\n  }\n\n  render() {\n    if (!this.currentLang) return null;\n    return (\n      <div class={`custom-dropdown${this.isOpen ? ' open' : ''}`}>\n        <div class=\"selected-option\" onClick={() => { this.isOpen = !this.isOpen; }}>\n          <dropi-country-flags country={this.currentLang.flag} flag-style=\"rectangle\" width=\"20\" height=\"15\" />\n          <span class=\"Body-S-Regular\">{this.currentLang.label}</span>\n          <dropi-icon name=\"Caret-down\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-500\" />\n        </div>\n        <ul class={`dropdown-options${this.isOpen ? ' dropdown-open' : ''}`}>\n          {this.parsedLanguages.map(lang => (\n            <li\n              key={lang.code}\n              class={lang.code === this.currentLang?.code ? 'active' : ''}\n              onClick={() => this.select(lang)}\n            >\n              <dropi-country-flags country={lang.flag} flag-style=\"rectangle\" width=\"20\" height=\"15\" />\n              <span class=\"Body-S-Regular\">{lang.label}</span>\n            </li>\n          ))}\n        </ul>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-logo.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as getElement, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, a as getElement, h } from './index-BKkSRXlb.js';
 
-const dropiLogoCss = () => `:host{display:inline-block}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
+const dropiLogoCss = () => `:host{display:inline-block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
 
 const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
 const DropiLogo = class {
@@ -27,7 +27,7 @@ const DropiLogo = class {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: 'ffc84dfe1d9c05aae33977c3f5595da0aa9f464d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '629a57526d4e99e5325ab8b684234616ce27f199', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: 'bd2383909e65f976a8a85a4b2f58d1d9f271799c', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '1aaaf412c2991db5b92180bce8528deef2c5914e', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
 };
 DropiLogo.style = dropiLogoCss();

package/dist/dropi-ui/dropi-logo.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-logo.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,+PAA+P,CAAC;;ACE5R,MAAM,YAAY,GAAG,CAAA,8NAAA,CAAgO;MAWxO,SAAS,GAAA,MAAA;;;;;;IAIZ,OAAO,GAAW,EAAE;;IAEpB,IAAI,GAAsB,OAAO;;IAEjC,KAAK,GAAqB,OAAO;IAEzC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,IAAI,CAAC,OAAO;AACV,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;AAC/B,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;AAChC,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;AAC/B,oBAAA,EAAE;;;AAIA,IAAA,WAAW,CAAC,CAAQ,EAAA;AACzB,QAAA,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,YAAY;;IAGnD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACvE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,OAAO,IAAI,YAAY,EACjC,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CACnC,CACK;;;;;;;","names":[],"sources":["src/components/dropi-logo/dropi-logo.css?tag=dropi-logo&encapsulation=shadow","src/components/dropi-logo/dropi-logo.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.dropi-logo {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-logo img {\n  display: block;\n  object-fit: contain;\n}\n\n.dropi-logo--large img {\n  width: 256px;\n  height: 84px;\n}\n\n.dropi-logo--small img {\n  width: 86px;\n  height: 81px;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\nconst FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;\n\n/**\n * @component dropi-logo\n * Displays the Dropi brand logo with size variants.\n */\n@Component({\n  tag: 'dropi-logo',\n  styleUrl: 'dropi-logo.css',\n  shadow: true,\n})\nexport class DropiLogo {\n  @Element() el: HTMLElement;\n\n  /** Logo image URL */\n  @Prop() urlLogo: string = '';\n  /** Size variant */\n  @Prop() size: 'small' | 'large' = 'large';\n  /** Theme (reserved for future use) */\n  @Prop() theme: 'dark' | 'light' = 'light';\n\n  componentWillLoad() {\n    if (!this.urlLogo) {\n      this.urlLogo = \n        this.el.getAttribute('urlLogo') || \n        this.el.getAttribute('url-logo') || \n        this.el.getAttribute('urllogo') || \n        '';\n    }\n  }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src = FALLBACK_SVG;\n  }\n\n  render() {\n    return (\n      <figure class={{ 'dropi-logo': true, [`dropi-logo--${this.size}`]: true }}>\n        <img\n          src={this.urlLogo || FALLBACK_SVG}\n          alt=\"Dropi logo\"\n          onError={(e) => this.handleError(e)}\n        />\n      </figure>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-logo.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,oVAAoV,CAAC;;ACEjX,MAAM,YAAY,GAAG,CAAA,8NAAA,CAAgO;MAWxO,SAAS,GAAA,MAAA;;;;;;IAIZ,OAAO,GAAW,EAAE;;IAEpB,IAAI,GAAsB,OAAO;;IAEjC,KAAK,GAAqB,OAAO;IAEzC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,IAAI,CAAC,OAAO;AACV,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;AAC/B,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;AAChC,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;AAC/B,oBAAA,EAAE;;;AAIA,IAAA,WAAW,CAAC,CAAQ,EAAA;AACzB,QAAA,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,YAAY;;IAGnD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACvE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,OAAO,IAAI,YAAY,EACjC,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CACnC,CACK;;;;;;;","names":[],"sources":["src/components/dropi-logo/dropi-logo.css?tag=dropi-logo&encapsulation=shadow","src/components/dropi-logo/dropi-logo.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: inline-block;\n}\n\n.dropi-logo {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-logo img {\n  display: block;\n  object-fit: contain;\n}\n\n.dropi-logo--large img {\n  width: 256px;\n  height: 84px;\n}\n\n.dropi-logo--small img {\n  width: 86px;\n  height: 81px;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\nconst FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;\n\n/**\n * @component dropi-logo\n * Displays the Dropi brand logo with size variants.\n */\n@Component({\n  tag: 'dropi-logo',\n  styleUrl: 'dropi-logo.css',\n  shadow: true,\n})\nexport class DropiLogo {\n  @Element() el: HTMLElement;\n\n  /** Logo image URL */\n  @Prop() urlLogo: string = '';\n  /** Size variant */\n  @Prop() size: 'small' | 'large' = 'large';\n  /** Theme (reserved for future use) */\n  @Prop() theme: 'dark' | 'light' = 'light';\n\n  componentWillLoad() {\n    if (!this.urlLogo) {\n      this.urlLogo = \n        this.el.getAttribute('urlLogo') || \n        this.el.getAttribute('url-logo') || \n        this.el.getAttribute('urllogo') || \n        '';\n    }\n  }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src = FALLBACK_SVG;\n  }\n\n  render() {\n    return (\n      <figure class={{ 'dropi-logo': true, [`dropi-logo--${this.size}`]: true }}>\n        <img\n          src={this.urlLogo || FALLBACK_SVG}\n          alt=\"Dropi logo\"\n          onError={(e) => this.handleError(e)}\n        />\n      </figure>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-lottie-loader.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
 
-const dropiLottieLoaderCss = () => `:host{display:block}.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.85);z-index:9999}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.lottie-animation{display:flex;align-items:center;justify-content:center;width:300px;height:300px}.lottie-animation lottie-player{display:block;width:300px !important;height:300px !important}.loader-text{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);text-align:center}.loader-title{margin:0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.loader-message{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-500, #69738c)}`;
+const dropiLottieLoaderCss = () => `:host{display:block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.85);z-index:9999}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.lottie-animation{display:flex;align-items:center;justify-content:center;width:300px;height:300px}.lottie-animation lottie-player{display:block;width:300px !important;height:300px !important}.loader-text{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);text-align:center}.loader-title{margin:0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.loader-message{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-500, #69738c)}`;
 
 const DropiLottieLoader = class {
     constructor(hostRef) {

package/dist/dropi-ui/dropi-lottie-loader.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-lottie-loader.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,k0BAAk0B,CAAC;;MCW11B,iBAAiB,GAAA,MAAA;;;;;IAEpB,OAAO,GAAY,IAAI;;IAEvB,gBAAgB,GAAW,0DAA0D;;IAErF,KAAK,GAAW,aAAa;;IAE7B,OAAO,GAAW,8BAA8B;IAExD,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,UAAU,EAAC,aAAa,EACxB,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAC1C,IAAI,EAAA,IAAA,EACJ,QAAQ,SACR,CACE,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,MAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EACxD,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzD,CACP,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-lottie-loader/dropi-lottie-loader.css?tag=dropi-lottie-loader&encapsulation=shadow","src/components/dropi-lottie-loader/dropi-lottie-loader.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.loader-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.85);\n  z-index: 9999;\n}\n\n.loader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-4, 16px);\n}\n\n.lottie-animation {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 300px;\n  height: 300px;\n}\n\n.lottie-animation lottie-player {\n  display: block;\n  width: 300px !important;\n  height: 300px !important;\n}\n\n.loader-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  text-align: center;\n}\n\n.loader-title {\n  margin: 0;\n  font-size: var(--font-size-m, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.loader-message {\n  margin: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-lottie-loader\n * Full-screen or inline loading overlay with a Lottie animation.\n */\n@Component({\n  tag: 'dropi-lottie-loader',\n  styleUrl: 'dropi-lottie-loader.css',\n  shadow: true,\n})\nexport class DropiLottieLoader {\n  /** Show or hide the loader */\n  @Prop() visible: boolean = true;\n  /** Path to the Lottie JSON animation file */\n  @Prop() loadingAnimation: string = '/node_modules/@dropi/ui/assets/lottie-files/loading.json';\n  /** Title shown below the animation */\n  @Prop() title: string = 'Cargando...';\n  /** Descriptive message below the title */\n  @Prop() message: string = 'Por favor, espere un momento';\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class=\"loader-overlay\">\n        <div class=\"loader-container\">\n          <div class=\"lottie-animation\">\n            <lottie-player\n              src={this.loadingAnimation}\n              background=\"transparent\"\n              speed=\"1\"\n              style={{ width: '300px', height: '300px' }}\n              loop\n              autoplay\n            />\n          </div>\n          {(this.title || this.message) && (\n            <div class=\"loader-text\">\n              {this.title && <h3 class=\"loader-title\">{this.title}</h3>}\n              {this.message && <p class=\"loader-message\">{this.message}</p>}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-lottie-loader.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,u5BAAu5B,CAAC;;MCW/6B,iBAAiB,GAAA,MAAA;;;;;IAEpB,OAAO,GAAY,IAAI;;IAEvB,gBAAgB,GAAW,0DAA0D;;IAErF,KAAK,GAAW,aAAa;;IAE7B,OAAO,GAAW,8BAA8B;IAExD,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,UAAU,EAAC,aAAa,EACxB,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAC1C,IAAI,EAAA,IAAA,EACJ,QAAQ,SACR,CACE,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,MAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EACxD,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzD,CACP,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-lottie-loader/dropi-lottie-loader.css?tag=dropi-lottie-loader&encapsulation=shadow","src/components/dropi-lottie-loader/dropi-lottie-loader.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: block;\n}\n\n.loader-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.85);\n  z-index: 9999;\n}\n\n.loader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-4, 16px);\n}\n\n.lottie-animation {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 300px;\n  height: 300px;\n}\n\n.lottie-animation lottie-player {\n  display: block;\n  width: 300px !important;\n  height: 300px !important;\n}\n\n.loader-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  text-align: center;\n}\n\n.loader-title {\n  margin: 0;\n  font-size: var(--font-size-m, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.loader-message {\n  margin: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-lottie-loader\n * Full-screen or inline loading overlay with a Lottie animation.\n */\n@Component({\n  tag: 'dropi-lottie-loader',\n  styleUrl: 'dropi-lottie-loader.css',\n  shadow: true,\n})\nexport class DropiLottieLoader {\n  /** Show or hide the loader */\n  @Prop() visible: boolean = true;\n  /** Path to the Lottie JSON animation file */\n  @Prop() loadingAnimation: string = '/node_modules/@dropi/ui/assets/lottie-files/loading.json';\n  /** Title shown below the animation */\n  @Prop() title: string = 'Cargando...';\n  /** Descriptive message below the title */\n  @Prop() message: string = 'Por favor, espere un momento';\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class=\"loader-overlay\">\n        <div class=\"loader-container\">\n          <div class=\"lottie-animation\">\n            <lottie-player\n              src={this.loadingAnimation}\n              background=\"transparent\"\n              speed=\"1\"\n              style={{ width: '300px', height: '300px' }}\n              loop\n              autoplay\n            />\n          </div>\n          {(this.title || this.message) && (\n            <div class=\"loader-text\">\n              {this.title && <h3 class=\"loader-title\">{this.title}</h3>}\n              {this.message && <p class=\"loader-message\">{this.message}</p>}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}