@dropi/ui 0.1.55 → 999.0.0

package/dist/dropi-ui/dropi-banner-external.entry.js

@@ -1,64 +0,0 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-
-const dropiBannerExternalCss = () => `:host{display:block;width:100%;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.dropi-banner-external{display:block;width:100%;position:relative;margin-bottom:16px;border-radius:var(--Border-2, 8px)}.dropi-banner-external a{display:block;text-decoration:none}.click-wrapper{cursor:pointer}.inner{position:relative;display:block}.inner img{display:block;width:100%;height:auto;border-radius:var(--Border-2, 8px);max-width:1220px;margin:auto}.close-btn{position:absolute;top:4px;right:4px;background:rgba(255, 255, 255, 0.8);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s ease}.close-btn:hover{background:rgba(255, 255, 255, 1)}`;
-
-const DropiBannerExternal = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bannerClick = createEvent(this, "bannerClick", 7);
-        this.isVisible = createEvent(this, "isVisible", 7);
-    }
-    /** Image URL to display */
-    imageUrl = '';
-    /** Optional click-through URL */
-    link = '';
-    /** Alt text for the image */
-    alt = '';
-    /** Background color behind the image */
-    backgroundColor = 'transparent';
-    /** Slug name (matches Angular `slugName`) */
-    slugName = '';
-    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
-    viewOnWhiteBrand = false;
-    /** Countries list to show (matches Angular `viewOnlyCountries`) */
-    viewOnlyCountries = [];
-    closed = false;
-    get el() { return getElement(this); }
-    componentWillLoad() {
-        if (!this.imageUrl) {
-            this.imageUrl =
-                this.el.getAttribute('imageUrl') ||
-                    this.el.getAttribute('image-url') ||
-                    this.el.getAttribute('imageurl') ||
-                    '';
-        }
-    }
-    /** Emitted when the banner is clicked (only when no link is set) */
-    bannerClick;
-    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
-    isVisible;
-    handleClick(e) {
-        if (!this.link) {
-            e.preventDefault();
-            this.bannerClick.emit();
-        }
-    }
-    closeBanner(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.closed = true;
-        this.isVisible.emit(false);
-    }
-    render() {
-        if (this.closed || !this.imageUrl)
-            return null;
-        const inner = (h("div", { class: "inner" }, h("img", { src: this.imageUrl, alt: this.alt }), h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, h("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }))));
-        return (h("div", { class: "dropi-banner-external", style: { background: this.backgroundColor } }, this.link ? (h("a", { href: this.link, target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.handleClick(e) }, inner)) : (h("div", { class: "click-wrapper", onClick: (e) => this.handleClick(e) }, inner))));
-    }
-};
-DropiBannerExternal.style = dropiBannerExternalCss();
-
-export { DropiBannerExternal as dropi_banner_external };
-//# sourceMappingURL=dropi-banner-external.entry.esm.js.map
-
-//# sourceMappingURL=dropi-banner-external.entry.js.map

package/dist/dropi-ui/dropi-banner-external.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-banner-external.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,ywBAAywB,CAAC;;MCkBnyB,mBAAmB,GAAA,MAAA;;;;;;;IAEtB,QAAQ,GAAW,EAAE;;IAErB,IAAI,GAAW,EAAE;;IAEjB,GAAG,GAAW,EAAE;;IAEhB,eAAe,GAAW,aAAa;;IAEvC,QAAQ,GAAW,EAAE;;IAErB,gBAAgB,GAAY,KAAK;;IAEjC,iBAAiB,GAAa,EAAE;IAEvB,MAAM,GAAY,KAAK;;IAIxC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,QAAQ;AACX,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;AAChC,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC;AACjC,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;AAChC,oBAAA,EAAE;;;;AAKC,IAAA,WAAW;;AAEX,IAAA,SAAS;AAEV,IAAA,WAAW,CAAC,CAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;;;AAInB,IAAA,WAAW,CAAC,CAAa,EAAA;QAC/B,CAAC,CAAC,cAAc,EAAE;QAClB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AAE9C,QAAA,MAAM,KAAK,IACT,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAA,CAAI,EAC1C,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,WAAW,gBAAY,eAAe,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,EACtF,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,GAAG,CACnF,CACL,CACP;QAED,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,eAAe,EAAE,EAAA,EAC3E,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,EAC9F,KAAK,CACJ,KAEJ,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,EAC3D,KAAK,CACF,CACP,CACG;;;;;;;","names":[],"sources":["src/components/dropi-banner-external/dropi-banner-external.css?tag=dropi-banner-external&encapsulation=shadow","src/components/dropi-banner-external/dropi-banner-external.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.dropi-banner-external {\n  display: block;\n  width: 100%;\n  position: relative;\n  margin-bottom: 16px;\n  border-radius: var(--Border-2, 8px);\n}\n\n.dropi-banner-external a {\n  display: block;\n  text-decoration: none;\n}\n\n.click-wrapper {\n  cursor: pointer;\n}\n\n.inner {\n  position: relative;\n  display: block;\n}\n\n.inner img {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: var(--Border-2, 8px);\n  max-width: 1220px;\n  margin: auto;\n}\n\n.close-btn {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  background: rgba(255, 255, 255, 0.8);\n  border: none;\n  border-radius: 50%;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0;\n  transition: background 0.15s ease;\n}\n\n.close-btn:hover {\n  background: rgba(255, 255, 255, 1);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, h } from '@stencil/core';\n\n/**\n * @component dropi-banner-external\n * External banner image with optional link and close button.\n * Pass imageUrl directly (the Angular version fetched from WordPress).\n *\n * @example\n * <dropi-banner-external\n *   image-url=\"https://example.com/banner.jpg\"\n *   link=\"https://dropi.co\"\n * ></dropi-banner-external>\n */\n@Component({\n  tag: 'dropi-banner-external',\n  styleUrl: 'dropi-banner-external.css',\n  shadow: true,\n})\nexport class DropiBannerExternal {\n  /** Image URL to display */\n  @Prop() imageUrl: string = '';\n  /** Optional click-through URL */\n  @Prop() link: string = '';\n  /** Alt text for the image */\n  @Prop() alt: string = '';\n  /** Background color behind the image */\n  @Prop() backgroundColor: string = 'transparent';\n  /** Slug name (matches Angular `slugName`) */\n  @Prop() slugName: string = '';\n  /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */\n  @Prop() viewOnWhiteBrand: boolean = false;\n  /** Countries list to show (matches Angular `viewOnlyCountries`) */\n  @Prop() viewOnlyCountries: string[] = [];\n\n  @State() private closed: boolean = false;\n  \n  @Element() el: HTMLElement;\n\n  componentWillLoad() {\n    if (!this.imageUrl) {\n      this.imageUrl = \n        this.el.getAttribute('imageUrl') || \n        this.el.getAttribute('image-url') || \n        this.el.getAttribute('imageurl') || \n        '';\n    }\n  }\n\n  /** Emitted when the banner is clicked (only when no link is set) */\n  @Event() bannerClick: EventEmitter<void>;\n  /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */\n  @Event() isVisible: EventEmitter<boolean>;\n\n  private handleClick(e: MouseEvent) {\n    if (!this.link) {\n      e.preventDefault();\n      this.bannerClick.emit();\n    }\n  }\n\n  private closeBanner(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    this.closed = true;\n    this.isVisible.emit(false);\n  }\n\n  render() {\n    if (this.closed || !this.imageUrl) return null;\n\n    const inner = (\n      <div class=\"inner\">\n        <img src={this.imageUrl} alt={this.alt} />\n        <button class=\"close-btn\" aria-label=\"Cerrar banner\" onClick={(e) => this.closeBanner(e)}>\n          <dropi-icon name=\"Close-small\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-600\" />\n        </button>\n      </div>\n    );\n\n    return (\n      <div class=\"dropi-banner-external\" style={{ background: this.backgroundColor }}>\n        {this.link ? (\n          <a href={this.link} target=\"_blank\" rel=\"noopener noreferrer\" onClick={(e) => this.handleClick(e)}>\n            {inner}\n          </a>\n        ) : (\n          <div class=\"click-wrapper\" onClick={(e) => this.handleClick(e)}>\n            {inner}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,49 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiBreadcrumbCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.breadcrumb{margin:0}.crumb-list{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.home-link{display:inline-flex;align-items:center;color:var(--Gray-Gray-500, #69738c);text-decoration:none;transition:color 0.2s ease}.home-link:hover{color:var(--Gray-Gray-700, #32394d)}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;text-decoration:none;transition:color 0.2s ease;font-size:var(--font-size-s, 12px)}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed;text-decoration:none}.current{color:var(--Gray-Gray-700, #32394d);cursor:default;font-size:var(--font-size-s, 12px)}`;
-
-const DropiBreadcrumb = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiNavigate = createEvent(this, "dropiNavigate", 7);
-    }
-    /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
-    items = [];
-    /** Home link href */
-    homeRoute = '/';
-    /** dropi-icon name for home */
-    homeIconName = 'Home';
-    /** Whether the last item is also clickable */
-    lastItemClickable = false;
-    /** Emitted when any item or home is clicked. Detail is the item or homeRoute string. */
-    dropiNavigate;
-    get parsedItems() {
-        if (typeof this.items === 'string') {
-            try {
-                return JSON.parse(this.items);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.items;
-    }
-    render() {
-        const items = this.parsedItems;
-        return (h("nav", { key: '7e83c4f056971f8e16e2daf7d04e6a59b6755bba', class: "breadcrumb", "aria-label": "Breadcrumb" }, h("div", { key: 'a9bd9428935da4fc49235fdbd068f4e8d402b9e9', class: "crumb-list" }, h("div", { key: '85fd0ed077fbc6819b7cda28c7241f4dc69c554c', class: "crumb-home" }, h("a", { key: '6b4ccdbb336077e0642b11f0c17950caa76804b6', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, h("dropi-icon", { key: '78325ca71257433a3d60b828a06622245067f961', name: this.homeIconName, iconWidth: "16px", color: "Gray-Gray-500" })), items.length > 0 && (h("dropi-icon", { key: '67af7cc3f0ff0b3bf0e7e647332084791bedaeae', name: "Dropdown-Right", iconWidth: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
-            const isLast = idx === items.length - 1;
-            const href = item.url || item.routerLink || '#';
-            return (h("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (h("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {
-                    e.preventDefault();
-                    if (!item.disabled)
-                        this.dropiNavigate.emit(item);
-                } }, item.label)) : (h("span", { class: "current Body-S-Regular", "aria-current": "page" }, item.label)), !isLast && (h("dropi-icon", { name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" }))));
-        }))));
-    }
-};
-DropiBreadcrumb.style = dropiBreadcrumbCss();
-
-export { DropiBreadcrumb as dropi_breadcrumb };
-//# sourceMappingURL=dropi-breadcrumb.entry.esm.js.map
-
-//# sourceMappingURL=dropi-breadcrumb.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"dropi-breadcrumb.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-breadcrumb/dropi-breadcrumb.css?tag=dropi-breadcrumb&encapsulation=shadow","src/components/dropi-breadcrumb/dropi-breadcrumb.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.breadcrumb {\n  margin: 0;\n}\n\n.crumb-list {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.crumb-home {\n  display: flex;\n  padding-right: 4px;\n  align-items: center;\n  gap: 4px;\n}\n\n.home-link {\n  display: inline-flex;\n  align-items: center;\n  color: var(--Gray-Gray-500, #69738c);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.home-link:hover {\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.crumb {\n  display: flex;\n  padding: 0 4px;\n  align-items: center;\n  gap: 8px;\n}\n\n.crumb-link {\n  color: var(--Gray-Gray-500, #69738c);\n  text-align: center;\n  cursor: pointer;\n  text-decoration: none;\n  transition: color 0.2s ease;\n  font-size: var(--font-size-s, 12px);\n}\n\n.crumb-link:hover {\n  color: var(--Gray-Gray-700, #32394d);\n  text-decoration: underline;\n}\n\n.crumb-link.disabled {\n  pointer-events: none;\n  color: var(--Gray-Gray-300, #a1a8b8);\n  cursor: not-allowed;\n  text-decoration: none;\n}\n\n.current {\n  color: var(--Gray-Gray-700, #32394d);\n  cursor: default;\n  font-size: var(--font-size-s, 12px);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n  label: string;\n  /** Internal route or external URL */\n  routerLink?: string;\n  url?: string;\n  disabled?: boolean;\n}\n\n/**\n * @component dropi-breadcrumb\n * Navigation breadcrumb with home icon and items.\n *\n * @example\n * <dropi-breadcrumb\n *   items='[{\"label\":\"Productos\",\"routerLink\":\"/products\"},{\"label\":\"Detalle\"}]'\n * ></dropi-breadcrumb>\n */\n@Component({\n  tag: 'dropi-breadcrumb',\n  styleUrl: 'dropi-breadcrumb.css',\n  shadow: true,\n})\nexport class DropiBreadcrumb {\n  /** Breadcrumb items (array or JSON string). Last item is rendered as current. */\n  @Prop() items: BreadcrumbItem[] | string = [];\n  /** Home link href */\n  @Prop() homeRoute: string = '/';\n  /** dropi-icon name for home */\n  @Prop() homeIconName: string = 'Home';\n  /** Whether the last item is also clickable */\n  @Prop() lastItemClickable: boolean = false;\n\n  /** Emitted when any item or home is clicked. Detail is the item or homeRoute string. */\n  @Event() dropiNavigate: EventEmitter<BreadcrumbItem | string>;\n\n  private get parsedItems(): BreadcrumbItem[] {\n    if (typeof this.items === 'string') {\n      try { return JSON.parse(this.items); } catch { return []; }\n    }\n    return this.items as BreadcrumbItem[];\n  }\n\n  render() {\n    const items = this.parsedItems;\n    return (\n      <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        <div class=\"crumb-list\">\n          <div class=\"crumb-home\">\n            <a\n              href={this.homeRoute}\n              class=\"home-link\"\n              aria-label=\"Inicio\"\n              onClick={(e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); }}\n            >\n              <dropi-icon name={this.homeIconName} iconWidth=\"16px\" color=\"Gray-Gray-500\" />\n            </a>\n            {items.length > 0 && (\n              <dropi-icon name=\"Dropdown-Right\" iconWidth=\"16px\" color=\"Gray-Gray-500\" />\n            )}\n          </div>\n\n          {items.map((item, idx) => {\n            const isLast = idx === items.length - 1;\n            const href = item.url || item.routerLink || '#';\n            return (\n              <div class=\"crumb\" key={idx}>\n                {(!isLast || this.lastItemClickable) ? (\n                  <a\n                    class={`crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`}\n                    href={href}\n                    onClick={(e) => { e.preventDefault(); if (!item.disabled) this.dropiNavigate.emit(item); }}\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <span class=\"current Body-S-Regular\" aria-current=\"page\">{item.label}</span>\n                )}\n                {!isLast && (\n                  <dropi-icon name=\"Dropdown-Right\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-500\" />\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,105 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiButtonCss = () => `:host{display:inline-block;border:0}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.btn{all:unset;font-family:var(--font-family-01, 'Inter', sans-serif);box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:none !important;box-shadow:none !important;color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{background:var(--Gray-Gray-50, #f5f6f8);box-shadow:none !important;color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:none !important;color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
-
-const DropiButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiClick = createEvent(this, "dropiClick", 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;
-    /** Visual color palette */
-    type = 'default';
-    /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */
-    severity = 'primary';
-    /** Button size */
-    size = 'normal';
-    /** Button state */
-    state = 'default';
-    /** Full width button */
-    fullWidth = false;
-    /** Icon name to show before the text */
-    preIcon = '';
-    /** Icon name to show after the text */
-    postIcon = '';
-    /** Custom icon color override */
-    customIconColor = '';
-    /** Button label */
-    text = '';
-    /** Native HTML button type (submit, reset, button) */
-    nativeType = 'button';
-    /** Emitted on click (not emitted when disabled or loading) */
-    dropiClick;
-    colorMap = {
-        default: 'Primary-Primary-',
-        success: 'Success-Success-',
-        error: 'Error-Error-',
-        info: 'Info-Info-',
-        legacy: 'Secondary-Secondary-',
-        warning: 'Warning-Warning-',
-        dropdown: 'Gray-Gray-',
-        'default-light': 'Gray-Gray-',
-    };
-    get iconSize() {
-        if (this.size === 'large')
-            return '24px';
-        if (this.size === 'small')
-            return '16px';
-        return '18px';
-    }
-    get color() {
-        const intensity = this.state === 'disabled' ? '300' : '500';
-        return (this.colorMap[this.type] ?? 'Primary-Primary-') + intensity;
-    }
-    get fontColor() {
-        if (this.severity === 'tertiary') {
-            return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;
-        }
-        if (this.severity === 'secondary')
-            return this.color;
-        return 'Neutral-White';
-    }
-    handleClick(e) {
-        if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.dropiClick.emit(e);
-            if (this.nativeType === 'submit') {
-                this.internals.form?.requestSubmit();
-            }
-            else if (this.nativeType === 'reset') {
-                this.internals.form?.reset();
-            }
-        }
-    }
-    renderLoadingSpinner() {
-        return (h("svg", { class: "spin", width: this.iconSize, height: this.iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z", fill: `var(--${this.fontColor})` })));
-    }
-    render() {
-        const isDisabled = this.state === 'disabled' || this.state === 'loading';
-        const hasText = (this.text ?? '') !== '';
-        const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';
-        const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');
-        return (h("button", { key: '7bf781bc530f7370e550996359ff50dc7d8b300c', class: {
-                btn: true,
-                'without-text': !hasText,
-                [this.severity ?? 'primary']: true,
-                [this.type ?? 'default']: true,
-                [this.size ?? 'normal']: true,
-                [this.state ?? 'default']: true,
-                'full-width': this.fullWidth,
-            }, type: this.nativeType, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '73cc799d7961e45abad88183a1d9240fbb46a741', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '469f4fc187b52836ea7bfe35b2e68074812a3841', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '16ed0f58aa5b8d40f2a7b64dbb74ed9d6e0bf0e5', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '1842cf726b9b9e64fe1ae18951375dd98c5afbb4' })));
-    }
-    static get formAssociated() { return true; }
-};
-DropiButton.style = dropiButtonCss();
-
-export { DropiButton as dropi_button };
-//# sourceMappingURL=dropi-button.entry.esm.js.map
-
-//# sourceMappingURL=dropi-button.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"dropi-button.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-button/dropi-button.css?tag=dropi-button&encapsulation=shadow","src/components/dropi-button/dropi-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  border: 0;\n}\n\n:host([full-width]) {\n  display: flex;\n  width: 100%;\n}\n:host([full-width]) .btn {\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.btn {\n  all: unset;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--Size-1, 4px);\n  border-radius: var(--Border-2, 8px);\n  font-weight: var(--font-weight-bold);\n  min-width: 33px;\n  line-height: 110%;\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    background 0.25s ease,\n    color 0.25s ease,\n    border-color 0.25s ease,\n    transform 0.25s ease;\n}\n\n.btn:active {\n  transition: transform 0.01s ease-out;\n  transform: scale(0.98);\n}\n\n.btn:hover:not(:active) {\n  transform: scale(1.01);\n}\n\n.btn.without-text {\n  gap: 0;\n}\n\n/* ── Sizes ─────────────────────────────────────────────────── */\n.btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }\n.btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }\n.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--font-size-s, 12px); height: 29px; }\n\n/* ── Disabled / Loading ─────────────────────────────────────── */\n.btn.disabled,\n.btn.loading {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ══════════════════════════════════════════════════════════════\n   PRIMARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #ffffff); }\n.btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }\n\n.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #ffffff); }\n.btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }\n\n.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #ffffff); }\n.btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }\n\n.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #ffffff); }\n.btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }\n\n.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #ffffff); }\n.btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }\n\n.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #ffffff); }\n.btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }\n\n/* Disabled primary */\n.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #ffffff); }\n\n/* ══════════════════════════════════════════════════════════════\n   SECONDARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.secondary {\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid;\n}\n\n.btn.secondary.default  { border-color: var(--Primary-Primary-500, #f49a3d); color: var(--Primary-Primary-500, #f49a3d); }\n.btn.secondary.default:hover { color: var(--Primary-Primary-600, #e58017); border-color: var(--Primary-Primary-600, #e58017); }\n\n.btn.secondary.success  { border-color: var(--Success-Success-500, #0abb87); color: var(--Success-Success-500, #0abb87); }\n.btn.secondary.success:hover { color: var(--Success-Success-600, #09aa7b); border-color: var(--Success-Success-600, #09aa7b); }\n\n.btn.secondary.info     { border-color: var(--Info-Info-500, #50a5f1); color: var(--Info-Info-500, #50a5f1); }\n.btn.secondary.info:hover { color: var(--Info-Info-600, #4996db); border-color: var(--Info-Info-600, #4996db); }\n\n.btn.secondary.error    { border-color: var(--Error-Error-500, #f46a6b); color: var(--Error-Error-500, #f46a6b); }\n.btn.secondary.error:hover { color: var(--Error-Error-600, #de6061); border-color: var(--Error-Error-600, #de6061); }\n\n.btn.secondary.warning  { border-color: var(--Warning-Warning-500, #f1b44c); color: var(--Warning-Warning-500, #f1b44c); }\n.btn.secondary.warning:hover { color: var(--Warning-Warning-600, #dba445); border-color: var(--Warning-Warning-600, #dba445); }\n\n.btn.secondary.legacy   { border-color: var(--Secondary-Secondary-500, #008dbf); color: var(--Secondary-Secondary-500, #008dbf); }\n.btn.secondary.legacy:hover { color: var(--Secondary-Secondary-600, #007199); border-color: var(--Secondary-Secondary-600, #007199); }\n\n/* Disabled secondary */\n.btn.secondary.disabled.default  { border-color: var(--Primary-Primary-300, #f2bc85); color: var(--Primary-Primary-300, #f2bc85); }\n.btn.secondary.disabled.success  { border-color: var(--Success-Success-300, #5bd1af); color: var(--Success-Success-300, #5bd1af); }\n.btn.secondary.disabled.info     { border-color: var(--Info-Info-300, #8ac3f6); color: var(--Info-Info-300, #8ac3f6); }\n.btn.secondary.disabled.error    { border-color: var(--Error-Error-300, #f89b9c); color: var(--Error-Error-300, #f89b9c); }\n.btn.secondary.disabled.warning  { border-color: var(--Warning-Warning-300, #f6cd87); color: var(--Warning-Warning-300, #f6cd87); }\n.btn.secondary.disabled.legacy   { border-color: var(--Secondary-Secondary-300, #62bad9); color: var(--Secondary-Secondary-300, #62bad9); }\n\n/* ══════════════════════════════════════════════════════════════\n   TERTIARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.tertiary { background: none; border: none; }\n\n.btn.tertiary.default,\n.btn.tertiary.legacy {\n  border: none !important;\n  box-shadow: none !important;\n  color: var(--Gray-Gray-500, #69738c);\n}\n.btn.tertiary.default:hover,\n.btn.tertiary.legacy:hover {\n  background: var(--Gray-Gray-50, #f5f6f8);\n  box-shadow: none !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.btn.tertiary.success { color: var(--Success-Success-500, #0abb87); }\n.btn.tertiary.success:hover { background: var(--Success-Success-50, #e7f8f3); }\n\n.btn.tertiary.info { color: var(--Info-Info-500, #50a5f1); }\n.btn.tertiary.info:hover { background: var(--Info-Info-50, #eef6fe); }\n\n.btn.tertiary.error { color: var(--Error-Error-500, #f46a6b); }\n.btn.tertiary.error:hover { background: var(--Error-Error-50, #fef0f0); }\n\n.btn.tertiary.warning { color: var(--Warning-Warning-500, #f1b44c); }\n.btn.tertiary.warning:hover { background: var(--Warning-Warning-50, #fef8ed); }\n\n.btn.tertiary.dropdown {\n  color: var(--Gray-Gray-500, #69738c);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n  background: transparent;\n}\n\n/* Disabled tertiary */\n.btn.tertiary.disabled.default,\n.btn.tertiary.disabled.legacy {\n  border: none !important;\n  color: var(--Gray-Gray-400, #858ea6);\n}\n.btn.tertiary.disabled.success { color: var(--Success-Success-300, #5bd1af); }\n.btn.tertiary.disabled.info    { color: var(--Info-Info-300, #8ac3f6); }\n.btn.tertiary.disabled.error   { color: var(--Error-Error-300, #f89b9c); }\n.btn.tertiary.disabled.warning { color: var(--Warning-Warning-300, #f6cd87); }\n\n/* ── Loading spinner ─────────────────────────────────────────── */\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, Event, EventEmitter, AttachInternals, h } from '@stencil/core';\n\nexport type ButtonType = 'legacy' | 'default' | 'success' | 'info' | 'error' | 'warning' | 'dropdown' | 'default-light';\nexport type ButtonSeverity = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonSize = 'large' | 'normal' | 'small';\nexport type ButtonState = 'default' | 'disabled' | 'loading';\nexport type ButtonNativeType = 'button' | 'submit' | 'reset';\n\n\n/**\n * @component dropi-button\n * Primary action button with multiple types, severities, sizes and states.\n * Supports pre/post icons and a loading spinner.\n */\n@Component({\n  tag: 'dropi-button',\n  styleUrl: 'dropi-button.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiButton {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Visual color palette */\n  @Prop() type: ButtonType = 'default';\n  /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */\n  @Prop() severity: ButtonSeverity = 'primary';\n  /** Button size */\n  @Prop() size: ButtonSize = 'normal';\n  /** Button state */\n  @Prop() state: ButtonState = 'default';\n  /** Full width button */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n  /** Icon name to show before the text */\n  @Prop() preIcon: string = '';\n  /** Icon name to show after the text */\n  @Prop() postIcon: string = '';\n  /** Custom icon color override */\n  @Prop() customIconColor: string = '';\n  /** Button label */\n  @Prop() text: string = '';\n  /** Native HTML button type (submit, reset, button) */\n  @Prop() nativeType: ButtonNativeType = 'button';\n\n\n  /** Emitted on click (not emitted when disabled or loading) */\n  @Event() dropiClick: EventEmitter<MouseEvent>;\n\n  private readonly colorMap: Record<string, string> = {\n    default: 'Primary-Primary-',\n    success: 'Success-Success-',\n    error: 'Error-Error-',\n    info: 'Info-Info-',\n    legacy: 'Secondary-Secondary-',\n    warning: 'Warning-Warning-',\n    dropdown: 'Gray-Gray-',\n    'default-light': 'Gray-Gray-',\n  };\n\n  private get iconSize(): string {\n    if (this.size === 'large') return '24px';\n    if (this.size === 'small') return '16px';\n    return '18px';\n  }\n\n  private get color(): string {\n    const intensity = this.state === 'disabled' ? '300' : '500';\n    return (this.colorMap[this.type] ?? 'Primary-Primary-') + intensity;\n  }\n\n  private get fontColor(): string {\n    if (this.severity === 'tertiary') {\n      return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;\n    }\n    if (this.severity === 'secondary') return this.color;\n    return 'Neutral-White';\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.state !== 'disabled' && this.state !== 'loading') {\n      this.dropiClick.emit(e);\n      if (this.nativeType === 'submit') {\n        this.internals.form?.requestSubmit();\n      } else if (this.nativeType === 'reset') {\n        this.internals.form?.reset();\n      }\n    }\n  }\n\n\n  private renderLoadingSpinner() {\n    return (\n      <svg\n        class=\"spin\"\n        width={this.iconSize}\n        height={this.iconSize}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z\"\n          fill={`var(--${this.fontColor})`}\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const isDisabled = this.state === 'disabled' || this.state === 'loading';\n    const hasText = (this.text ?? '') !== '';\n    const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';\n    const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');\n\n    return (\n      <button\n        class={{\n          btn: true,\n          'without-text': !hasText,\n          [this.severity ?? 'primary']: true,\n          [this.type ?? 'default']: true,\n          [this.size ?? 'normal']: true,\n          [this.state ?? 'default']: true,\n          'full-width': this.fullWidth,\n        }}\n        type={this.nativeType}\n        disabled={isDisabled}\n        onClick={(e) => this.handleClick(e)}\n      >\n        {this.preIcon && (\n          <dropi-icon\n            name={this.preIcon}\n            iconWidth={this.iconSize}\n            iconHeight={this.iconSize}\n            color={this.fontColor}\n          />\n        )}\n        {hasText && <span class=\"text\">{this.text}</span>}\n        {showPostIcon && (\n          <dropi-icon\n            name={dropdownIcon}\n            iconWidth={this.iconSize}\n            iconHeight={this.iconSize}\n            color={this.fontColor}\n          />\n        )}\n        {this.state === 'loading' && this.renderLoadingSpinner()}\n        <slot />\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-card-checkbox.entry.js

@@ -1,49 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.container-card-check{padding:var(--Size-4, 16px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Size-2, 8px);width:100%;display:flex;align-items:center;gap:var(--Size-3, 12px);cursor:pointer;height:66px;overflow:hidden;transition:background 0.15s ease, border-color 0.15s ease}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:default}.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .extra-info{color:var(--Gray-Gray-400, #858ea6)}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.title-check{color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-regular, 400);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);margin-top:var(--Size-1, 4px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px;flex-shrink:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.extra-info h4{margin:0;font-weight:var(--font-weight-semibold);color:inherit;line-height:inherit}.default-card{border:none}.is-checked{background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-500, #f49a3d)}`;
-
-const DropiCardCheckbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
-    }
-    /** Visual type — matches Angular: 'default' | 'with card' */
-    type = 'default';
-    /** Whether the checkbox is checked — matches Angular 'state' */
-    state = 'checked';
-    /** Main title — matches Angular 'title' */
-    title = 'Tittle';
-    /** Optional description below title */
-    description = '';
-    /** Optional extra info shown on the right */
-    extraInfo = '';
-    /** Optional extra info description shown below extraInfo */
-    extraInfoDescription = '';
-    /** Disables interaction */
-    disabled = false;
-    /** Emitted with the new checked state when clicked */
-    dropiChange;
-    get isChecked() {
-        return this.state === 'checked';
-    }
-    handleClick() {
-        if (this.disabled)
-            return;
-        this.state = this.isChecked ? 'default' : 'checked';
-        this.dropiChange.emit(this.isChecked);
-    }
-    render() {
-        return (h("div", { key: '1094a5c825a573d5afad0e6a1f37383ab04432e4', class: {
-                'container-card-check': true,
-                'default-card': this.type === 'default',
-                'is-checked': this.isChecked && this.type === 'with card',
-                'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: 'cedad80fcc9a1012ee9baea7ed1f86e6312e91a9', name: "_card-checkbox", checked: this.isChecked, disabled: this.disabled }), h("div", { key: '3c2f7526cd15fd1f074ebaac932d43cf41dcca5f', class: "container-text" }, h("div", { key: '0b13cc456daba3e2e1b26ffd9cc45a34a8f9dbdb', class: "title-check" }, this.title), this.description && h("div", { key: 'd2c934074ea3c1068de01ab5ca0204f019ed739c', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: 'c260e65c9325095abc54ac46b5e90eb88aaeaa78', class: "extra-info" }, this.extraInfo && h("div", { key: '9aa3bd72190d18f82b3ba15e82599038e653ca32' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'bbb8da2241faf41805a1c6621e5cc9939251cf28' }, this.extraInfoDescription)))));
-    }
-};
-DropiCardCheckbox.style = dropiCardCheckboxCss();
-
-export { DropiCardCheckbox as dropi_card_checkbox };
-//# sourceMappingURL=dropi-card-checkbox.entry.esm.js.map
-
-//# sourceMappingURL=dropi-card-checkbox.entry.js.map

package/dist/dropi-ui/dropi-card-checkbox.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-card-checkbox.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,syDAAsyD,CAAC;;MCmB9zD,iBAAiB,GAAA,MAAA;;;;;;IAEpB,IAAI,GAA4B,SAAS;;IAExB,KAAK,GAA0B,SAAS;;IAEzD,KAAK,GAAW,QAAQ;;IAExB,WAAW,GAAW,EAAE;;IAExB,SAAS,GAAW,EAAE;;IAEtB,oBAAoB,GAAW,EAAE;;IAEjC,QAAQ,GAAY,KAAK;;AAGxB,IAAA,WAAW;AAEpB,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;;IAGzB,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS;QACnD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGvC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,sBAAsB,EAAE,IAAI;AAC5B,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;gBACzD,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,IAAI,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,EAC1F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAO,EAC1C,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAO,CACvE,EACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,MAC3C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACpB,IAAI,CAAC,SAAS,IAAI,8DAAM,IAAI,CAAC,SAAS,CAAO,EAC7C,IAAI,CAAC,oBAAoB,IAAI,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,IAAI,CAAC,oBAAoB,CAAM,CAC9D,CACP,CACG;;;;;;;","names":[],"sources":["src/components/dropi-card-checkbox/dropi-card-checkbox.css?tag=dropi-card-checkbox&encapsulation=shadow","src/components/dropi-card-checkbox/dropi-card-checkbox.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.container-card-check {\n  padding: var(--Size-4, 16px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Size-2, 8px);\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--Size-3, 12px);\n  cursor: pointer;\n  height: 66px;\n  overflow: hidden;\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.container-card-check.disabled {\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: default;\n}\n\n.container-card-check.disabled .title-check,\n.container-card-check.disabled .description-text,\n.container-card-check.disabled .extra-info {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.container-text {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  text-align: start;\n  overflow: hidden;\n}\n\n.title-check {\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-m, 14px);\n  font-weight: var(--font-weight-regular, 400);\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.description-text {\n  color: var(--Gray-Gray-500, #69738c);\n  font-size: var(--font-size-s, 12px);\n  margin-top: var(--Size-1, 4px);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.extra-info {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: column;\n  gap: 4px;\n  flex-shrink: 0;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.extra-info h4 {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n  color: inherit;\n  line-height: inherit;\n}\n\n.default-card {\n  border: none;\n}\n\n.is-checked {\n  background: var(--Primary-Primary-50, #fff8f0);\n  border: 1px solid var(--Primary-Primary-500, #f49a3d);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-card-checkbox\n * Card-style clickable checkbox with title, description, and optional extra info.\n *\n * @example\n * <dropi-card-checkbox\n *   title=\"Opción A\"\n *   description=\"Descripción breve\"\n *   type=\"with-card\"\n *   checked\n * ></dropi-card-checkbox>\n */\n@Component({\n  tag: 'dropi-card-checkbox',\n  styleUrl: 'dropi-card-checkbox.css',\n  shadow: true,\n})\nexport class DropiCardCheckbox {\n  /** Visual type — matches Angular: 'default' | 'with card' */\n  @Prop() type: 'default' | 'with card' = 'default';\n  /** Whether the checkbox is checked — matches Angular 'state' */\n  @Prop({ mutable: true }) state: 'checked' | 'default' = 'checked';\n  /** Main title — matches Angular 'title' */\n  @Prop() title: string = 'Tittle';\n  /** Optional description below title */\n  @Prop() description: string = '';\n  /** Optional extra info shown on the right */\n  @Prop() extraInfo: string = '';\n  /** Optional extra info description shown below extraInfo */\n  @Prop() extraInfoDescription: string = '';\n  /** Disables interaction */\n  @Prop() disabled: boolean = false;\n\n  /** Emitted with the new checked state when clicked */\n  @Event() dropiChange: EventEmitter<boolean>;\n\n  private get isChecked(): boolean {\n    return this.state === 'checked';\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.state = this.isChecked ? 'default' : 'checked';\n    this.dropiChange.emit(this.isChecked);\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'container-card-check': true,\n          'default-card': this.type === 'default',\n          'is-checked': this.isChecked && this.type === 'with card',\n          'disabled': this.disabled,\n        }}\n        onClick={() => this.handleClick()}\n      >\n        <dropi-checkbox name=\"_card-checkbox\" checked={this.isChecked} disabled={this.disabled} />\n        <div class=\"container-text\">\n          <div class=\"title-check\">{this.title}</div>\n          {this.description && <div class=\"description-text\">{this.description}</div>}\n        </div>\n        {(this.extraInfo || this.extraInfoDescription) && (\n          <div class=\"extra-info\">\n            {this.extraInfo && <div>{this.extraInfo}</div>}\n            {this.extraInfoDescription && <h4>{this.extraInfoDescription}</h4>}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-card-product.entry.js

@@ -1,79 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiCardProductCss = () => `:host{display:block;font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.dropi-card-product{position:relative;background:#ffffff;border-radius:8px;overflow:hidden;transition:all 0.2s ease-in-out;cursor:pointer;display:flex;flex-direction:column;height:100%;box-sizing:border-box;width:100%;max-width:450px;box-shadow:none}.product-image-container{padding:4px;flex-shrink:0}.product-image{position:relative;width:100%;aspect-ratio:1;border-radius:8px;border:1px solid #c3c9d9;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#f8f9fa}.product-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.product-image img.error-img{object-fit:contain}.favorite-button{position:absolute;bottom:5px;right:6px;border-radius:8px;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:40px;background:#ffffff;border:1px solid #858ea6}.favorite-button.favorite-active{background:var(--Primary-Primary-500, #f49a3d);border:1px solid var(--Primary-Primary-500, #f49a3d)}.product-info{position:relative;padding:8px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:space-between}.supplier-insignia{position:absolute;top:-24px;left:0px}.product-header{display:flex;justify-content:space-between;align-items:center;width:100%;height:26px}.category{color:#69738c;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:12px;font-weight:400;line-height:1.5;flex:1}.stock-info{display:flex;align-items:center;gap:2px;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:12px;font-weight:400;line-height:1.5}.stock-label{color:#69738c}.stock-value{font-weight:500}.product-name{color:#32394d;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:16px;font-weight:500;line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.supplier-info{font-family:var(--font-family-01, 'Inter', sans-serif);font-size:12px;line-height:1.2}.supplier-label{color:#69738c;font-weight:400}.supplier-name{color:#50a5f1;font-weight:400;margin-left:4px;cursor:pointer}.price-container{display:flex;gap:8px;margin-top:4px}.price-item{flex:1;display:flex;flex-direction:column}.price-label{color:#69738c;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:12px;font-weight:400;line-height:1.5;height:18px;min-width:max-content}.price-value{color:#32394d;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:14px;font-weight:700;line-height:1.1;margin-top:2px}.separator{height:1px;background:#e6eaf2;margin:0;flex-shrink:0}.action-button{background:#ffffff;border:none;border-top:1px solid #e6eaf2;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;flex-shrink:0}.action-button--disabled{opacity:0.3;cursor:not-allowed}.button-text{font-family:var(--font-family-01, 'Inter', sans-serif);font-size:14px;font-weight:700;line-height:1.1;color:#f49a3d;text-align:center;white-space:nowrap}`;
-
-const DropiCardProduct = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiProductClick = createEvent(this, "dropiProductClick", 7);
-        this.dropiFavoriteChange = createEvent(this, "dropiFavoriteChange", 7);
-        this.dropiAddProduct = createEvent(this, "dropiAddProduct", 7);
-        this.dropiSupplierClick = createEvent(this, "dropiSupplierClick", 7);
-    }
-    /** Product image URL */
-    image = '';
-    /** Product name */
-    productName = '';
-    /** Sale / supplier price (Precio proveedor) */
-    salePrice = 0;
-    /** Suggested price for the dropshipper (Precio sugerido) */
-    suggestedPrice = 0;
-    /** Price currency symbol */
-    currency = '$';
-    /** Supplier / store name */
-    supplier = '';
-    /** Category label */
-    category = '';
-    /** Stock quantity (0 = Agotado) */
-    stock = 0;
-    /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */
-    supplierCategory = '';
-    /** Show favorite button */
-    showFavorite = true;
-    /** Is marked as favorite */
-    isFavorite = false;
-    /** Show "Enviar a cliente" button */
-    showAddButton = true;
-    /** Emitted when card is clicked — matches Angular 'onProductClick' */
-    dropiProductClick;
-    /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
-    dropiFavoriteChange;
-    /** Emitted when "Enviar a cliente" button clicked */
-    dropiAddProduct;
-    /** Emitted when supplier name clicked */
-    dropiSupplierClick;
-    formatPrice(val) {
-        if (val == null)
-            return '0';
-        return val.toLocaleString('es-CO');
-    }
-    get inStock() {
-        return this.stock > 0;
-    }
-    getStockColor() {
-        if (this.stock === 0)
-            return 'var(--Error-Error-500, #f46a6b)';
-        if (this.stock <= 10)
-            return 'var(--Warning-Warning-500, #f59e0b)';
-        return 'var(--Success-Success-500, #0abb87)';
-    }
-    render() {
-        return (h("div", { key: '4cde39eac4d19dc5c05123f0ada102ae9d7a4e0a', class: "dropi-card-product", onClick: () => this.dropiProductClick.emit() }, h("div", { key: '23a94279b1c1d083bd478a61051e1e3dc992273c', class: "product-image-container" }, h("div", { key: '2c2a26632ad0e318933258ceabca932d2a892533', class: "product-image" }, h("img", { key: '0d86b32d61a7eeb63d7b1a0fa3f3ba18eade3cd3', src: this.image || '', alt: this.productName, onError: (e) => {
-                e.target.src = './assets/utils/no-image.jpg';
-            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("button", { key: 'c3cb96813a56f924ffadc8f0665af4b9a068db85', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
-                e.stopPropagation();
-                this.isFavorite = !this.isFavorite;
-                this.dropiFavoriteChange.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, h("dropi-icon", { key: '3d5e182189a8d1dfcf8fb4bb1fb16ff9470a180c', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: 'ec75da0e4f638c265ea4e07fab1177e5cfa8d167', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: '4613849b8bc6e7b719c705fb90c2a5da0fb76b41', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '31dcc84a4add42a667f3f33d973f65db89503a2b', class: "product-header" }, this.category && (h("span", { key: 'f27b3aec9a1380b4ff473cd9df0cffcadd87a7c1', class: "category" }, this.category)), h("div", { key: 'a55285c407ad8dfcf8acceaf57bf9478c8dc1c30', class: "stock-info" }, h("span", { key: 'b08d87a0264dfa2a96662243a07088768955b918', class: "stock-label" }, "Stock:"), h("span", { key: '593bc922e3421e0102288668a0416bd8705de3f3', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '54c314d2e97ae8b29bd48a17152128fb903f6174', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'ebbc569613abe847cb1969b0ed17228df6d96aef', class: "supplier-info" }, h("span", { key: 'e107f295a701551961d6fe7c45e39cae99ef1be0', class: "supplier-label" }, "Proveedor:"), h("span", { key: '01a51cd79cafaeae7ce8f2541bd03e3806f645c8', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '20b59588bf442abcdda3a33a4f1bf8a4f6b2a6e6', class: "price-container" }, h("div", { key: 'adb88e81332eaef3826bc04ac0d4de8461368877', class: "price-item" }, h("span", { key: 'dfeb4ad9eb8fa6c7c922437017949ba639cc0a37', class: "price-label" }, "Precio proveedor"), h("span", { key: 'c75bdc0f488c0ef455615781c77f344abc51208f', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '7994889f9be9f2a3e078f727fed72e3183cd8acc', class: "price-item" }, h("span", { key: 'cc4767b3c85c7f37e890297c51029da592a99770', class: "price-label" }, "Precio sugerido"), h("span", { key: 'bc45584e6017eb23cd30e394ced1778c3d3b8957', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '446dca22f4fd6db15bd3cc5296e8d7910c16674f', class: "separator" }), this.showAddButton && (h("div", { key: 'a030ce62999b2440f63129941c967eb5c3ee169b', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
-                e.stopPropagation();
-                if (this.inStock)
-                    this.dropiAddProduct.emit();
-            } }, h("dropi-icon", { key: '67d1f1629f83008b11103f6a76b744c71935ca23', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), h("span", { key: '477ace88e7984066888841c9158100fbd8fbe078', class: "button-text" }, "Enviar a cliente")))));
-    }
-};
-DropiCardProduct.style = dropiCardProductCss();
-
-export { DropiCardProduct as dropi_card_product };
-//# sourceMappingURL=dropi-card-product.entry.esm.js.map
-
-//# sourceMappingURL=dropi-card-product.entry.js.map

package/dist/dropi-ui/dropi-card-product.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-card-product.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-card-product/dropi-card-product.css?tag=dropi-card-product&encapsulation=shadow","src/components/dropi-card-product/dropi-card-product.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n}\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n/* ── Card wrapper ── */\n.dropi-card-product {\n  position: relative;\n  background: #ffffff;\n  border-radius: 8px;\n  overflow: hidden;\n  transition: all 0.2s ease-in-out;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  box-sizing: border-box;\n  width: 100%;\n  max-width: 450px;\n  box-shadow: none;\n}\n\n/* ── Image container ── */\n.product-image-container {\n  padding: 4px;\n  flex-shrink: 0;\n}\n\n.product-image {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1;\n  border-radius: 8px;\n  border: 1px solid #c3c9d9;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #f8f9fa;\n}\n\n.product-image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 8px;\n}\n\n.product-image img.error-img {\n  object-fit: contain;\n}\n\n/* ── Favorite button ── */\n.favorite-button {\n  position: absolute;\n  bottom: 5px;\n  right: 6px;\n  border-radius: 8px;\n  padding: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 42px;\n  height: 40px;\n  background: #ffffff;\n  border: 1px solid #858ea6;\n}\n\n.favorite-button.favorite-active {\n  background: var(--Primary-Primary-500, #f49a3d);\n  border: 1px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Product info ── */\n.product-info {\n  position: relative;\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n  justify-content: space-between;\n}\n\n/* ── Supplier insignia — overlaps from top ── */\n.supplier-insignia {\n  position: absolute;\n  top: -24px;\n  left: 0px;\n}\n\n/* ── Header: category + stock ── */\n.product-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 26px;\n}\n\n.category {\n  color: #69738c;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.5;\n  flex: 1;\n}\n\n.stock-info {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.5;\n}\n\n.stock-label {\n  color: #69738c;\n}\n\n.stock-value {\n  font-weight: 500;\n}\n\n/* ── Product name ── */\n.product-name {\n  color: #32394d;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1.5;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n/* ── Supplier ── */\n.supplier-info {\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: 12px;\n  line-height: 1.2;\n}\n\n.supplier-label {\n  color: #69738c;\n  font-weight: 400;\n}\n\n.supplier-name {\n  color: #50a5f1;\n  font-weight: 400;\n  margin-left: 4px;\n  cursor: pointer;\n}\n\n/* ── Prices ── */\n.price-container {\n  display: flex;\n  gap: 8px;\n  margin-top: 4px;\n}\n\n.price-item {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.price-label {\n  color: #69738c;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.5;\n  height: 18px;\n  min-width: max-content;\n}\n\n.price-value {\n  color: #32394d;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.1;\n  margin-top: 2px;\n}\n\n/* ── Separator ── */\n.separator {\n  height: 1px;\n  background: #e6eaf2;\n  margin: 0;\n  flex-shrink: 0;\n}\n\n/* ── Action button ── */\n.action-button {\n  background: #ffffff;\n  border: none;\n  border-top: 1px solid #e6eaf2;\n  padding: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: 40px;\n  flex-shrink: 0;\n}\n\n.action-button--disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.button-text {\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.1;\n  color: #f49a3d;\n  text-align: center;\n  white-space: nowrap;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-card-product\n * Product card showing image, supplier insignia, name, stock, prices and action button.\n */\n@Component({\n  tag: 'dropi-card-product',\n  styleUrl: 'dropi-card-product.css',\n  shadow: true,\n})\nexport class DropiCardProduct {\n  /** Product image URL */\n  @Prop() image: string = '';\n  /** Product name */\n  @Prop() productName: string = '';\n  /** Sale / supplier price (Precio proveedor) */\n  @Prop() salePrice: number = 0;\n  /** Suggested price for the dropshipper (Precio sugerido) */\n  @Prop() suggestedPrice: number = 0;\n  /** Price currency symbol */\n  @Prop() currency: string = '$';\n  /** Supplier / store name */\n  @Prop() supplier: string = '';\n  /** Category label */\n  @Prop() category: string = '';\n  /** Stock quantity (0 = Agotado) */\n  @Prop() stock: number = 0;\n  /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */\n  @Prop() supplierCategory: 'verified' | 'premium' | 'exclusive' | '' = '';\n  /** Show favorite button */\n  @Prop() showFavorite: boolean = true;\n  /** Is marked as favorite */\n  @Prop({ mutable: true }) isFavorite: boolean = false;\n  /** Show \"Enviar a cliente\" button */\n  @Prop() showAddButton: boolean = true;\n\n  /** Emitted when card is clicked — matches Angular 'onProductClick' */\n  @Event() dropiProductClick: EventEmitter<void>;\n  /** Emitted when favorite toggled — matches Angular 'changeFavorite' */\n  @Event() dropiFavoriteChange: EventEmitter<boolean>;\n  /** Emitted when \"Enviar a cliente\" button clicked */\n  @Event() dropiAddProduct: EventEmitter<void>;\n  /** Emitted when supplier name clicked */\n  @Event() dropiSupplierClick: EventEmitter<void>;\n\n  private formatPrice(val: number): string {\n    if (val == null) return '0';\n    return val.toLocaleString('es-CO');\n  }\n\n  private get inStock(): boolean {\n    return this.stock > 0;\n  }\n\n  private getStockColor(): string {\n    if (this.stock === 0) return 'var(--Error-Error-500, #f46a6b)';\n    if (this.stock <= 10) return 'var(--Warning-Warning-500, #f59e0b)';\n    return 'var(--Success-Success-500, #0abb87)';\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-card-product\" onClick={() => this.dropiProductClick.emit()}>\n\n        {/* ── Image container ── */}\n        <div class=\"product-image-container\">\n          <div class=\"product-image\">\n            <img\n              src={this.image || ''}\n              alt={this.productName}\n              onError={(e) => {\n                (e.target as HTMLImageElement).src = './assets/utils/no-image.jpg';\n              }}\n              class={!this.image ? 'error-img' : ''}\n            />\n\n            {/* Favorite button — bottom right */}\n            {this.showFavorite && (\n              <button\n                class={{ 'favorite-button': true, 'favorite-active': this.isFavorite }}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  this.isFavorite = !this.isFavorite;\n                  this.dropiFavoriteChange.emit(this.isFavorite);\n                }}\n                aria-label=\"Favorito\"\n              >\n                <dropi-icon\n                  name={this.isFavorite ? 'Heart-solid' : 'Heart'}\n                  iconWidth=\"18px\"\n                  iconHeight=\"18px\"\n                  color={this.isFavorite ? '#fff' : '#858ea6'}\n                />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* ── Product info ── */}\n        <div class=\"product-info\">\n\n          {/* Insignia — overlapping from top */}\n          {this.supplierCategory && (\n            <dropi-ilustration-icon\n              class=\"supplier-insignia\"\n              type=\"insignia\"\n              stateInsignia={this.supplierCategory as any}\n              tagProduct={true}\n            />\n          )}\n\n          {/* Category + Stock row */}\n          <div class=\"product-header\">\n            {this.category && (\n              <span class=\"category\">{this.category}</span>\n            )}\n            <div class=\"stock-info\">\n              <span class=\"stock-label\">Stock:</span>\n              <span class=\"stock-value\" style={{ color: this.getStockColor() }}>\n                {this.stock === 0 ? 'Agotado' : this.stock}\n              </span>\n            </div>\n          </div>\n\n          {/* Product name */}\n          <h3 class=\"product-name\">{this.productName}</h3>\n\n          {/* Supplier */}\n          {this.supplier && (\n            <div class=\"supplier-info\">\n              <span class=\"supplier-label\">Proveedor:</span>\n              <span\n                class=\"supplier-name\"\n                onClick={(e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); }}\n              >\n                {this.supplier}\n              </span>\n            </div>\n          )}\n\n          {/* Two price columns */}\n          <div class=\"price-container\">\n            <div class=\"price-item\">\n              <span class=\"price-label\">Precio proveedor</span>\n              <span class=\"price-value\">{this.currency} {this.formatPrice(this.salePrice)}</span>\n            </div>\n            <div class=\"price-item\">\n              <span class=\"price-label\">Precio sugerido</span>\n              <span class=\"price-value\">{this.currency} {this.formatPrice(this.suggestedPrice)}</span>\n            </div>\n          </div>\n        </div>\n\n        {/* ── Separator ── */}\n        <div class=\"separator\"></div>\n\n        {/* ── Action button ── */}\n        {this.showAddButton && (\n          <div\n            class={{ 'action-button': true, 'action-button--disabled': !this.inStock }}\n            onClick={(e) => { e.stopPropagation(); if (this.inStock) this.dropiAddProduct.emit(); }}\n          >\n            <dropi-icon\n              name=\"Shopping-cart-arrow-rigth\"\n              iconWidth=\"20px\"\n              iconHeight=\"20px\"\n              color=\"#f49a3d\"\n            />\n            <span class=\"button-text\">Enviar a cliente</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-card-section.entry.js

@@ -1,39 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiCardSectionCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:var(--font-family-01, 'Inter', sans-serif);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
-
-const DropiCardSection = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
-        this.dropiClick = createEvent(this, "dropiClick", 7);
-    }
-    /** Section title — matches Angular 'title' */
-    title = 'title';
-    /** Section description */
-    description = 'Description';
-    /** Control type on the right */
-    typeElement = 'dropdown';
-    /** Title size variant */
-    type = 'important';
-    /** Switch checked state */
-    isChecked = false;
-    /** Emitted when switch changes */
-    dropiChange;
-    /** Emitted when dropdown icon is clicked */
-    dropiClick;
-    render() {
-        return (h("div", { key: 'f843d5104a344402775c8afc165f10d178d2d5bf', class: "card-section" }, h("div", { key: '0b7476a359efc4619362a958a4a06300d1162d96', class: "card-section__text" }, this.type === 'important'
-            ? h("h5", { class: "card-section__title card-section__title--important" }, this.title)
-            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: '200ca69a23c9dd7ccbeaa8dc44d313fb1befa32f', class: "card-section__desc" }, this.description)), h("div", { key: 'a984b49a2fec8c527ceba4873a476dbd7ae1b20f', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { name: "_card-section-switch", isChecked: this.isChecked, onDropiChange: (e) => {
-                this.isChecked = e.detail;
-                this.dropiChange.emit(e.detail);
-            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
-    }
-};
-DropiCardSection.style = dropiCardSectionCss();
-
-export { DropiCardSection as dropi_card_section };
-//# sourceMappingURL=dropi-card-section.entry.esm.js.map
-
-//# sourceMappingURL=dropi-card-section.entry.js.map

package/dist/dropi-ui/dropi-card-section.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-card-section.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,+9BAA+9B,CAAC;;MCWt/B,gBAAgB,GAAA,MAAA;;;;;;;IAEnB,KAAK,GAAW,OAAO;;IAEvB,WAAW,GAAW,aAAa;;IAEnC,WAAW,GAA0B,UAAU;;IAE/C,IAAI,GAA2B,WAAW;;IAEzB,SAAS,GAAY,KAAK;;AAG1C,IAAA,WAAW;;AAEX,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK;AACb,cAAE,UAAI,KAAK,EAAC,oDAAoD,EAAA,EAAE,IAAI,CAAC,KAAK;AAC5E,cAAE,UAAI,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EAEpD,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CACrE,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,KAAK,QAAQ,IAC5B,CAAA,CAAA,cAAA,EAAA,EAAc,IAAI,EAAC,sBAAsB,EACvC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,CAAC,CAAuB,KAAI;AACzC,gBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM;gBACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACjC,aAAC,EAAA,CACD,KAEF,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACrG,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACrF,CACV,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-card-section/dropi-card-section.css?tag=dropi-card-section&encapsulation=shadow","src/components/dropi-card-section/dropi-card-section.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n*, *::before, *::after { box-sizing: border-box; }\n\n.card-section {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--Size-4, 16px);\n  padding: var(--Size-3, 12px) var(--Size-4, 16px);\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  border-radius: var(--Border-2, 8px);\n}\n\n.card-section__text { flex: 1; }\n\n.card-section__title {\n  margin: 0 0 4px;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-800, #1f2433);\n}\n\nh5.card-section__title { font-size: var(--font-size-m, 14px); }\nh6.card-section__title { font-size: var(--font-size-s, 12px); }\n\n.card-section__desc {\n  margin: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.card-section__control { flex-shrink: 0; }\n\n.card-section__dropdown-btn {\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-card-section\n * Section card with title, description and a switch or dropdown control.\n */\n@Component({\n  tag: 'dropi-card-section',\n  styleUrl: 'dropi-card-section.css',\n  shadow: true,\n})\nexport class DropiCardSection {\n  /** Section title — matches Angular 'title' */\n  @Prop() title: string = 'title';\n  /** Section description */\n  @Prop() description: string = 'Description';\n  /** Control type on the right */\n  @Prop() typeElement: 'dropdown' | 'switch' = 'dropdown';\n  /** Title size variant */\n  @Prop() type: 'medium' | 'important' = 'important';\n  /** Switch checked state */\n  @Prop({ mutable: true }) isChecked: boolean = false;\n\n  /** Emitted when switch changes */\n  @Event() dropiChange: EventEmitter<boolean>;\n  /** Emitted when dropdown icon is clicked */\n  @Event() dropiClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <div class=\"card-section\">\n        <div class=\"card-section__text\">\n          {this.type === 'important'\n            ? <h5 class=\"card-section__title card-section__title--important\">{this.title}</h5>\n            : <h6 class=\"card-section__title\">{this.title}</h6>\n          }\n          {this.description && <p class=\"card-section__desc\">{this.description}</p>}\n        </div>\n\n        <div class=\"card-section__control\">\n          {this.typeElement === 'switch' ? (\n            <dropi-switch name=\"_card-section-switch\"\n              isChecked={this.isChecked}\n              onDropiChange={(e: CustomEvent<boolean>) => {\n                this.isChecked = e.detail;\n                this.dropiChange.emit(e.detail);\n              }}\n            />\n          ) : (\n            <button class=\"card-section__dropdown-btn\" onClick={() => this.dropiClick.emit()} aria-label=\"Expandir\">\n              <dropi-icon name=\"Dropdown-down\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}