@dropi/ui 0.1.37 → 0.1.42

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

@@ -0,0 +1,80 @@
+import { r as registerInstance, a as getElement, h } from './index-Cvp2LQOM.js';
+
+const dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor);overflow:hidden}svg{fill:inherit;stroke:var(--icon-fill, currentColor);stroke-width:var(--icon-stroke-width, 0);display:block;width:100%;height:100%;vertical-align:middle}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+
+const DropiIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Icon name matching the id in the SVG sprite */
+    name = '';
+    /** Width of the icon (CSS value) */
+    iconWidth = '20px';
+    iconHeight = '20px';
+    color = 'currentColor';
+    /** Stroke width for icons that use strokes */
+    strokeWidth = '';
+    widthChanged() {
+        this.updateHostStyles();
+    }
+    heightChanged() {
+        this.updateHostStyles();
+    }
+    colorChanged() {
+        this.applyColor();
+    }
+    strokeWidthChanged() {
+        this.applyStrokeWidth();
+    }
+    componentWillLoad() {
+        this.applyColor();
+        this.applyStrokeWidth();
+        this.updateHostStyles();
+    }
+    componentDidUpdate() {
+        this.updateHostStyles();
+    }
+    applyStrokeWidth() {
+        if (this.strokeWidth) {
+            this.el.style.setProperty('--icon-stroke-width', this.strokeWidth);
+        }
+    }
+    updateHostStyles() {
+        this.el.style.width = this.iconWidth;
+        this.el.style.height = this.iconHeight;
+    }
+    applyColor() {
+        if (!this.color)
+            return;
+        const fill = this.color.startsWith('#')
+            ? this.color
+            : this.color === 'currentColor'
+                ? 'currentColor'
+                : `var(--${this.color})`;
+        this.el.style.setProperty('--icon-fill', fill);
+    }
+    render() {
+        return (h("svg", { key: '99f511720c6654b3f97490c966061520ee17d27f', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '04792170d8c23b3606249d051f8cc903bd5d1211', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+    }
+    static get watchers() { return {
+        "iconWidth": [{
+                "widthChanged": 0
+            }],
+        "iconHeight": [{
+                "heightChanged": 0
+            }],
+        "color": [{
+                "colorChanged": 0
+            }],
+        "strokeWidth": [{
+                "strokeWidthChanged": 0
+            }]
+    }; }
+};
+DropiIcon.style = dropiIconCss();
+
+export { DropiIcon as dropi_icon };
+//# sourceMappingURL=dropi-icon.entry.esm.js.map
+
+//# sourceMappingURL=dropi-icon.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-icon.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,oYAAoY,CAAC;;MCYpZ,SAAS,GAAA,MAAA;;;;;;IAIZ,IAAI,GAAW,EAAE;;IAEjB,SAAS,GAAW,MAAM;IAC1B,UAAU,GAAW,MAAM;IAC3B,KAAK,GAAW,cAAc;;IAE9B,WAAW,GAAW,EAAE;IAGhC,YAAY,GAAA;QACV,IAAI,CAAC,gBAAgB,EAAE;;IAIzB,aAAa,GAAA;QACX,IAAI,CAAC,gBAAgB,EAAE;;IAIzB,YAAY,GAAA;QACV,IAAI,CAAC,UAAU,EAAE;;IAInB,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,iBAAiB,GAAA;QACf,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;;IAGjB,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,WAAW,CAAC;;;IAI9D,gBAAgB,GAAA;QACtB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS;QACpC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU;;IAGhC,UAAU,GAAA;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG;cAClC,IAAI,CAAC;AACP,cAAE,IAAI,CAAC,KAAK,KAAK;AACjB,kBAAE;AACF,kBAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,GAAG;QAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,MAAM,SAAS,EAAE,iBACpC,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAE,CAAA,wCAAA,EAA2C,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA,CAAE,EAAA,CAAI,CACvE;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-icon/dropi-icon.css?tag=dropi-icon&encapsulation=shadow","src/components/dropi-icon/dropi-icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  fill: var(--icon-fill, currentColor);\n  overflow: hidden;\n}\n\nsvg {\n  fill: inherit;\n  stroke: var(--icon-fill, currentColor);\n  stroke-width: var(--icon-stroke-width, 0);\n  display: block;\n  width: 100%;\n  height: 100%;\n  vertical-align: middle;\n}\n\n.spin {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, Prop, h, Watch, Element } from '@stencil/core';\n\n/**\n * @component dropi-icon\n * Renders an SVG icon from the Dropi sprite sheet.\n * The sprite must be available at `assets/icons/sprite.svg`.\n */\n@Component({\n  tag: 'dropi-icon',\n  styleUrl: 'dropi-icon.css',\n  shadow: true,\n})\nexport class DropiIcon {\n  @Element() el: HTMLElement;\n\n  /** Icon name matching the id in the SVG sprite */\n  @Prop() name: string = '';\n  /** Width of the icon (CSS value) */\n  @Prop() iconWidth: string = '20px';\n  @Prop() iconHeight: string = '20px';\n  @Prop() color: string = 'currentColor';\n  /** Stroke width for icons that use strokes */\n  @Prop() strokeWidth: string = '';\n\n  @Watch('iconWidth')\n  widthChanged() {\n    this.updateHostStyles();\n  }\n\n  @Watch('iconHeight')\n  heightChanged() {\n    this.updateHostStyles();\n  }\n\n  @Watch('color')\n  colorChanged() {\n    this.applyColor();\n  }\n\n  @Watch('strokeWidth')\n  strokeWidthChanged() {\n    this.applyStrokeWidth();\n  }\n\n  componentWillLoad() {\n    this.applyColor();\n    this.applyStrokeWidth();\n    this.updateHostStyles();\n  }\n\n  componentDidUpdate() {\n    this.updateHostStyles();\n  }\n\n  private applyStrokeWidth() {\n    if (this.strokeWidth) {\n      this.el.style.setProperty('--icon-stroke-width', this.strokeWidth);\n    }\n  }\n\n  private updateHostStyles() {\n    this.el.style.width = this.iconWidth;\n    this.el.style.height = this.iconHeight;\n  }\n\n  private applyColor() {\n    if (!this.color) return;\n    const fill = this.color.startsWith('#')\n      ? this.color\n      : this.color === 'currentColor'\n      ? 'currentColor'\n      : `var(--${this.color})`;\n    this.el.style.setProperty('--icon-fill', fill);\n  }\n\n  render() {\n    return (\n      <svg\n        width={this.iconWidth}\n        height={this.iconHeight}\n        class={{ spin: (this.name ?? '') === 'Spinner' }}\n        aria-hidden=\"true\"\n      >\n        <use href={`/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}`} />\n      </svg>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,40 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.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 DropiIlustrationIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Display mode */
+    type = 'dropi';
+    /** State for dropi/mb types */
+    state = 'default';
+    /** Insignia variant */
+    stateInsignia = 'verified';
+    /** Show insignia as tag with label (for product cards) */
+    tagProduct = false;
+    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',
+            error: 'Cross-circle',
+            info: 'Comment-round_info',
+            warning: 'Comment-round_info',
+        };
+        return map[state] || 'Comment-round_info';
+    }
+    render() {
+        return (h("div", { key: 'd7fa7fce7346d3496ae99c580dee9de5fea934b8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: 'faa5686e775ac3a373037b6e1f9bf32076cfb495', class: "dropi-ilustration__image" }, h("img", { key: '209017a72b774b3e14c8e34f7e3bface75ba592b', 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: '75c82f5356c427d4ed35db3e9697d232e7f1b132', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '86a371bef276d6c945959405d39cea3a8dcecde3', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: 'c1bef5162ba49d8493a1c8d6b16d886543215046', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '8d1313457cda0f356f278f095b42d75d960a1c27', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '303cce4a3a632e9e36f8c7e6d186b56cec9c5ed6', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '3c2b051198e41dcfc2944aa7b1f869ba30e56c2a', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+    }
+};
+DropiIlustrationIcon.style = dropiIlustrationIconCss();
+
+export { DropiIlustrationIcon as dropi_ilustration_icon };
+//# sourceMappingURL=dropi-ilustration-icon.entry.esm.js.map
+
+//# sourceMappingURL=dropi-ilustration-icon.entry.js.map

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

@@ -0,0 +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\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} />\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

@@ -0,0 +1,45 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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 DropiImageMiniature = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiImageClick = createEvent(this, "dropiImageClick", 7);
+    }
+    /** Optional label above the grid */
+    label = '';
+    /** Array of image URLs. Pass as JSON string or array */
+    images = [];
+    /** Thumbnail width (CSS value) */
+    width = '88px';
+    /** Thumbnail height (CSS value) */
+    height = '88px';
+    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
+    dropiImageClick;
+    get parsedImages() {
+        if (typeof this.images === 'string') {
+            try {
+                return JSON.parse(this.images);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.images || [];
+    }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        const imgs = this.parsedImages;
+        return (h("div", { key: 'aefd44eab41f586a8a5bf4bbc1675b6c9cc67124', class: "miniature" }, this.label && h("span", { key: 'f61ea53ad1dfa354a93781877e0f02c120e0f445', class: "miniature__label" }, this.label), h("div", { key: 'fbde49689bed4e93c63cab97e787e6d877a7fcb2', 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();
+
+export { DropiImageMiniature as dropi_image_miniature };
+//# sourceMappingURL=dropi-image-miniature.entry.esm.js.map
+
+//# sourceMappingURL=dropi-image-miniature.entry.js.map

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

@@ -0,0 +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}

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

@@ -0,0 +1,64 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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 DropiImageOverlay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiClose = createEvent(this, "dropiClose", 7);
+    }
+    /** Whether the overlay is visible */
+    visible = false;
+    /** Images array or JSON string */
+    images = [];
+    /** Initially active image index */
+    activeIndex = 0;
+    current = 0;
+    parsedImages = [];
+    /** Emitted when overlay closes */
+    dropiClose;
+    imagesChanged(val) {
+        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    indexChanged(val) { this.current = val; }
+    visibleChanged(val) {
+        if (val)
+            this.current = this.activeIndex;
+    }
+    componentWillLoad() {
+        this.imagesChanged(this.images);
+        this.current = this.activeIndex;
+    }
+    close() { this.visible = false; this.dropiClose.emit(); }
+    prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }
+    next() { this.current = (this.current + 1) % this.parsedImages.length; }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        const isVisible = this.visible === true || String(this.visible) === 'true';
+        if (!isVisible)
+            return null;
+        const imgs = this.parsedImages;
+        const multi = imgs.length > 1;
+        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-large", iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })), h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), h("div", { class: "overlay__content" }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))), h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" })))))));
+    }
+    static get watchers() { return {
+        "images": [{
+                "imagesChanged": 0
+            }],
+        "activeIndex": [{
+                "indexChanged": 0
+            }],
+        "visible": [{
+                "visibleChanged": 0
+            }]
+    }; }
+};
+DropiImageOverlay.style = dropiImageOverlayCss();
+
+export { DropiImageOverlay as dropi_image_overlay };
+//# sourceMappingURL=dropi-image-overlay.entry.esm.js.map
+
+//# sourceMappingURL=dropi-image-overlay.entry.js.map

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

@@ -0,0 +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}

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

@@ -0,0 +1,266 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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 DropiInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiInput = createEvent(this, "dropiInput", 7);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.dropiFocus = createEvent(this, "dropiFocus", 7);
+        this.dropiBlur = createEvent(this, "dropiBlur", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    // ── Identification ──────────────────────────────────────────
+    /** Input id. Defaults to label label. */
+    inputId = '';
+    /** Name attribute for native form submission */
+    name = '';
+    // ── Content ─────────────────────────────────────────────────
+    /** Floating or fixed label text */
+    label = '';
+    /** Placeholder text (visible in fixedLabel mode or on focus) */
+    placeholder = ' ';
+    /** Current value (controlled) */
+    value = '';
+    /** Max character length */
+    maxLength;
+    // ── Behavior ────────────────────────────────────────────────
+    /** Disable the input */
+    disabled = false;
+    /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */
+    required = false;
+    /** Show the required asterisk on the label */
+    showObligatoryAsterisk = true;
+    /** Show label above the input (fixed), instead of floating inside */
+    fixedLabel = false;
+    /** Keyboard input mode hint */
+    inputMode = 'text';
+    // ── Input type modifiers ────────────────────────────────────
+    /** Show password visibility toggle (renders as password field) */
+    passwordInput = false;
+    /** Apply thousand separator formatting (e.g. 1,000,000) */
+    isMoneyInput = false;
+    /** Apply thousand separator without currency symbol */
+    isThousandSeparator = false;
+    /** Only allow numeric characters */
+    isNumericInput = false;
+    /** Allow decimal point when isNumericInput is true */
+    allowDecimals = false;
+    /** Only allow letter characters */
+    isLettersOnly = false;
+    // ── Icon ────────────────────────────────────────────────────
+    /** Icon name shown inside the input (only visible when value is not empty) */
+    icon = '';
+    /** Color token for the icon */
+    iconColor = 'Gray-Gray-400';
+    // ── Validation ──────────────────────────────────────────────
+    /** Mark the field as invalid (consumer-controlled) */
+    hasError = false;
+    /** Helper / error text shown below the field */
+    textHelper = '';
+    /** Only show textHelper when the field is invalid */
+    showHelperOnlyOnError = false;
+    // ── Angular-parity ──────────────────────────────────────────
+    /**
+     * Convenience object prop — matches Angular `inputProperties: InputProperties`.
+     * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,
+     * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
+     * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
+     * isLettersOnly, inputMode.
+     * Note: `formControl` is not supported; use `value` + onInput event instead.
+     */
+    inputProperties = null;
+    // ── Internal state ──────────────────────────────────────────
+    showPassword = false;
+    touched = false;
+    // ── Events ──────────────────────────────────────────────────
+    /** Emitted on every keystroke with the current value */
+    dropiInput;
+    /** Emitted on blur with the final value */
+    dropiChange;
+    /** Emitted on focus */
+    dropiFocus;
+    /** Emitted on blur */
+    dropiBlur;
+    inputPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.id !== undefined)
+            this.inputId = val.id;
+        if (val.inputId !== undefined)
+            this.inputId = val.inputId;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.maxLength !== undefined)
+            this.maxLength = val.maxLength;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.passwordInput !== undefined)
+            this.passwordInput = val.passwordInput;
+        if (val.isPasswordInput !== undefined)
+            this.passwordInput = val.isPasswordInput; // Fallback
+        if (val.icon !== undefined)
+            this.icon = val.icon;
+        if (val.iconColor !== undefined)
+            this.iconColor = val.iconColor;
+        if (val.isMoneyInput !== undefined)
+            this.isMoneyInput = val.isMoneyInput;
+        if (val.showObligatoryAsterisk !== undefined)
+            this.showObligatoryAsterisk = val.showObligatoryAsterisk;
+        if (val.isNumericInput !== undefined)
+            this.isNumericInput = val.isNumericInput;
+        if (val.allowDecimals !== undefined)
+            this.allowDecimals = val.allowDecimals;
+        if (val.isThousandSeparator !== undefined)
+            this.isThousandSeparator = val.isThousandSeparator;
+        if (val.showHelperOnlyOnError !== undefined)
+            this.showHelperOnlyOnError = val.showHelperOnlyOnError;
+        if (val.isLettersOnly !== undefined)
+            this.isLettersOnly = val.isLettersOnly;
+        if (val.inputMode !== undefined)
+            this.inputMode = val.inputMode;
+    }
+    valueChanged(val) {
+        this.internals.setFormValue(val);
+    }
+    disabledChanged(val) {
+        this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.value ?? '');
+        if (this.inputProperties)
+            this.inputPropertiesChanged(this.inputProperties);
+    }
+    // ── Handlers ────────────────────────────────────────────────
+    handleInput(e) {
+        let val = e.target.value;
+        if (this.isNumericInput)
+            val = this.filterNumbers(val);
+        if (this.isLettersOnly)
+            val = this.filterLetters(val);
+        if (this.isMoneyInput || this.isThousandSeparator)
+            val = this.formatThousands(val, this.isMoneyInput);
+        this.value = val;
+        this.internals.setFormValue(val);
+        this.dropiInput.emit(val);
+    }
+    handleKeyDown(e) {
+        if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
+            e.preventDefault();
+        }
+        if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {
+            e.preventDefault();
+        }
+    }
+    handleFocus() {
+        this.dropiFocus.emit();
+    }
+    handleBlur() {
+        this.touched = true;
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
+    }
+    togglePassword() {
+        if (this.disabled)
+            return;
+        this.showPassword = !this.showPassword;
+    }
+    // ── Helpers ─────────────────────────────────────────────────
+    filterNumbers(val) {
+        const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;
+        return val.replace(pattern, '');
+    }
+    filterLetters(val) {
+        return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g, '');
+    }
+    isAllowedNumberKey(e) {
+        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];
+        if (allowed.includes(e.key))
+            return true;
+        if (e.ctrlKey || e.metaKey)
+            return true; // copy/paste/select-all
+        if (/^[0-9]$/.test(e.key))
+            return true;
+        if (this.allowDecimals && e.key === '.')
+            return true;
+        return false;
+    }
+    isAllowedLetterKey(e) {
+        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];
+        if (allowed.includes(e.key))
+            return true;
+        if (e.ctrlKey || e.metaKey)
+            return true;
+        return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);
+    }
+    formatThousands(val, withCurrency) {
+        const raw = val.replace(/[^0-9.]/g, '');
+        const [integer, decimal] = raw.split('.');
+        const formatted = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;
+        return withCurrency ? `$${result}` : result;
+    }
+    // ── Computed ─────────────────────────────────────────────────
+    get resolvedId() {
+        return this.inputId || this.label;
+    }
+    get inputType() {
+        if (this.passwordInput)
+            return this.showPassword ? 'text' : 'password';
+        return 'text';
+    }
+    get showHelper() {
+        if (!this.textHelper)
+            return false;
+        if (this.showHelperOnlyOnError)
+            return this.hasError && this.touched;
+        return true;
+    }
+    get isInvalid() {
+        return this.hasError && this.touched;
+    }
+    // ── Render ───────────────────────────────────────────────────
+    render() {
+        const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
+        const showIconInline = !!this.icon;
+        return (h("div", { key: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), h("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, h("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', 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: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', 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, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', class: {
+                'disabled-helper': this.disabled,
+                'invalid-color': this.isInvalid,
+            } }, this.textHelper)))))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "inputProperties": [{
+                "inputPropertiesChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }],
+        "disabled": [{
+                "disabledChanged": 0
+            }]
+    }; }
+};
+DropiInput.style = dropiInputCss();
+
+export { DropiInput as dropi_input };
+//# sourceMappingURL=dropi-input.entry.esm.js.map
+
+//# sourceMappingURL=dropi-input.entry.js.map