@dropi/ui 0.1.41 → 0.1.42

package/dist/dropi-ui/dropi-alert-modal.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-alert-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert-modal/dropi-alert-modal.css?tag=dropi-alert-modal","src/components/dropi-alert-modal/dropi-alert-modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.body-alert {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--Size-3);\n  width: 100%;\n  flex: 1;\n  overflow: visible;\n  padding-bottom: var(--Size-2);\n}\n\n/* ── Lottie regular ───────────────────────────────────────────────── */\n.lottie-img {\n  width: 120px;\n  height: 120px;\n  overflow: hidden;\n  flex-shrink: 0;\n  align-self: center;\n  margin-top: -8px;\n  margin-bottom: var(--Size-2);\n}\n\n.lottie-img lottie-player {\n  display: block;\n  width: 120px;\n  height: 120px;\n}\n\n/* ── Lottie loading ───────────────────────────────────────────────── */\n.lottie-img--loading {\n  width: 100%;\n  height: 120px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lottie-img--loading lottie-player {\n  width: 300px;\n  height: auto;\n  flex-shrink: 0;\n}\n\n/* ── Content ──────────────────────────────────────────────────────── */\n.content-alert {\n  text-align: center;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.content-alert h2 {\n  color: var(--Gray-Gray-800);\n  font-size: 19px;\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\n.content-alert p {\n  color: var(--Gray-Gray-500);\n  font-size: var(--font-size-s);\n  margin-bottom: var(--Size-2);\n  overflow-wrap: anywhere;\n  max-height: 100px;\n  overflow: auto;\n}\n\n.custom-content {\n  width: 100%;\n  text-align: left;\n  margin-top: var(--Size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-3);\n}\n\n/* ── Actions ──────────────────────────────────────────────────────── */\n.actions {\n  display: flex;\n  gap: var(--Size-3);\n  width: 100%;\n}\n\n.actions dropi-button {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n}\n\n@media (max-width: 768px) {\n  .actions {\n    flex-direction: column;\n  }\n\n  .actions dropi-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Method, Watch, h } from '@stencil/core';\n\nexport type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';\n\n/**\n * @component dropi-alert-modal\n * Confirmation/alert modal with Lottie animation, title, message and action buttons.\n * Uses dropi-modal internally.\n *\n * @example\n * const el = document.querySelector('dropi-alert-modal');\n * el.visible = true;\n */\n@Component({\n  tag: 'dropi-alert-modal',\n  styleUrl: 'dropi-alert-modal.css',\n  shadow: false,\n})\nexport class DropiAlertModal {\n  /** Controls visibility */\n  @Prop({ mutable: true, reflect: true }) visible: any = false;\n  /** Modal type — determines Lottie animation */\n  @Prop({ mutable: true }) type: AlertModalType = 'question';\n  /** Bold title */\n  @Prop({ mutable: true }) tittle: string = '';\n  /** Body message */\n  @Prop({ mutable: true }) message: string = '';\n  /** Primary button label */\n  @Prop({ mutable: true }) primaryButton: string = 'Accept';\n  /** Secondary button label (hidden if empty) */\n  @Prop({ mutable: true }) secondaryButton: string = '';\n  /** Show loading state with loading.json Lottie */\n  @Prop() loading: boolean = false;\n  /** Show close icon in header */\n  @Prop({ mutable: true }) closable: boolean = false;\n  /** Hide action buttons */\n  @Prop({ mutable: true }) displayButtons: boolean = true;\n  /** Loading title */\n  @Prop({ mutable: true }) loadingTitle: string = 'Loading';\n  /** Loading message */\n  @Prop({ mutable: true }) loadingMessage: string = 'Please wait a moment';\n  /**\n   * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\n   * Useful for step-by-step flows.\n   */\n  @Prop() isStep: boolean = false;\n  /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 0;\n  /**\n   * Convenience object prop — matches Angular `params: ModalParams`.\n   * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\n   * loadingMessage, closable, displayButtons.\n   * When provided, its values override the corresponding individual props.\n   */\n  @Prop() params: any = null;\n\n  @Watch('params')\n  paramsChanged(val: any) {\n    if (!val) return;\n    if (val.tittle !== undefined) this.tittle = val.tittle;\n    if (val.type !== undefined) this.type = val.type;\n    if (val.message !== undefined) this.message = val.message;\n    if (val.primaryButton !== undefined) this.primaryButton = val.primaryButton;\n    if (val.secondaryButton !== undefined) this.secondaryButton = val.secondaryButton;\n    if (val.loadingTitle !== undefined) this.loadingTitle = val.loadingTitle;\n    if (val.loadingMessage !== undefined) this.loadingMessage = val.loadingMessage;\n    if (val.closable !== undefined) this.closable = val.closable;\n    if (val.displayButtons !== undefined) this.displayButtons = val.displayButtons;\n  }\n\n  /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */\n  @Event() primaryButtonEvent: EventEmitter<boolean>;\n  /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */\n  @Event() secondaryButtonEvent: EventEmitter<boolean>;\n  /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */\n  @Event() modalOpenChange: EventEmitter<boolean>;\n  /** Emitted when modal is hidden — matches Angular 'onHide' */\n  @Event() onHide: EventEmitter<void>;\n\n  private readonly lottieMap: Record<string, string> = {\n    question: '/assets/lottie-files/question.json',\n    warning: '/assets/lottie-files/warning.json',\n    success: '/assets/lottie-files/success.json',\n    error: '/assets/lottie-files/failure.json',\n    loading: '/assets/lottie-files/loading.json',\n  };\n\n  componentWillLoad() {\n    if (this.params) this.paramsChanged(this.params);\n  }\n\n  @Method() async show() {\n    this.visible = true;\n  }\n  @Method() async hide() {\n    this.visible = false;\n  }\n\n  private handlePrimary() {\n    this.primaryButtonEvent.emit(true);\n    if (!this.isStep) {\n      this.visible = false;\n      this.modalOpenChange.emit(false);\n    }\n  }\n\n  private handleSecondary() {\n    this.secondaryButtonEvent.emit(true);\n    this.visible = false;\n    this.modalOpenChange.emit(false);\n  }\n\n  private onModalHide() {\n    this.visible = false;\n    this.modalOpenChange.emit(false);\n    this.onHide.emit();\n  }\n\n  render() {\n    const lottieKey = this.loading ? 'loading' : this.type;\n    const isLottieLoading = lottieKey === 'loading';\n\n    return (\n      <dropi-modal\n        visible={this.visible}\n        showHeader={this.closable}\n        showCloseIcon={this.closable}\n        dismissable={false}\n        closeOnEscape={false}\n        showFooter={false}\n        size=\"s\"\n        onOnHide={() => this.onModalHide()}\n      >\n        <div class=\"body-alert\">\n          {this.lottieMap[lottieKey] && (\n            <div class={`lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}`}>\n              <lottie-player\n                key={lottieKey}\n                src={this.lottieMap[lottieKey]}\n                background=\"transparent\"\n                speed=\"1\"\n                loop\n                autoplay\n              />\n            </div>\n          )}\n\n          <div class=\"content-alert\">\n            <h2>{this.loading ? this.loadingTitle : this.tittle}</h2>\n            <p>{this.loading ? this.loadingMessage : this.message}</p>\n          </div>\n\n          <div class=\"custom-content\">\n            <slot />\n          </div>\n\n          {!this.loading && this.displayButtons && (\n            <div class=\"actions\">\n              {this.secondaryButton && <dropi-button text={this.secondaryButton} severity=\"secondary\" onClick={() => this.handleSecondary()} fullWidth />}\n              <dropi-button text={this.primaryButton} severity=\"primary\" onClick={() => this.handlePrimary()} fullWidth />\n            </div>\n          )}\n        </div>\n      </dropi-modal>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-alert-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert-modal/dropi-alert-modal.css?tag=dropi-alert-modal","src/components/dropi-alert-modal/dropi-alert-modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.body-alert {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--Size-3);\n  width: 100%;\n  flex: 1;\n  overflow: visible;\n  padding-bottom: var(--Size-2);\n}\n\n/* ── Lottie regular ───────────────────────────────────────────────── */\n.lottie-img {\n  width: 120px;\n  height: 120px;\n  overflow: hidden;\n  flex-shrink: 0;\n  align-self: center;\n  margin-top: -8px;\n  margin-bottom: var(--Size-2);\n}\n\n.lottie-img lottie-player {\n  display: block;\n  width: 120px;\n  height: 120px;\n}\n\n/* ── Lottie loading ───────────────────────────────────────────────── */\n.lottie-img--loading {\n  width: 100%;\n  height: 120px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lottie-img--loading lottie-player {\n  width: 300px;\n  height: auto;\n  flex-shrink: 0;\n}\n\n/* ── Content ──────────────────────────────────────────────────────── */\n.content-alert {\n  text-align: center;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.content-alert h2 {\n  color: var(--Gray-Gray-800);\n  font-size: 19px;\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\n.content-alert p {\n  color: var(--Gray-Gray-500);\n  font-size: var(--font-size-s);\n  margin-bottom: var(--Size-2);\n  overflow-wrap: anywhere;\n  max-height: 100px;\n  overflow: auto;\n}\n\n.custom-content {\n  width: 100%;\n  text-align: left;\n  margin-top: var(--Size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-3);\n}\n\n/* ── Actions ──────────────────────────────────────────────────────── */\n.actions {\n  display: flex;\n  gap: var(--Size-3);\n  width: 100%;\n}\n\n.actions dropi-button {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n}\n\n@media (max-width: 768px) {\n  .actions {\n    flex-direction: column;\n  }\n\n  .actions dropi-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Method, Watch, h } from '@stencil/core';\n\nexport type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';\n\n/**\n * @component dropi-alert-modal\n * Confirmation/alert modal with Lottie animation, title, message and action buttons.\n * Uses dropi-modal internally.\n *\n * @example\n * const el = document.querySelector('dropi-alert-modal');\n * el.visible = true;\n */\n@Component({\n  tag: 'dropi-alert-modal',\n  styleUrl: 'dropi-alert-modal.css',\n  shadow: false,\n})\nexport class DropiAlertModal {\n  /** Controls visibility */\n  @Prop({ mutable: true, reflect: true }) visible: any = false;\n  /** Modal type — determines Lottie animation */\n  @Prop({ mutable: true }) type: AlertModalType = 'question';\n  /** Bold title */\n  @Prop({ mutable: true }) tittle: string = '';\n  /** Body message */\n  @Prop({ mutable: true }) message: string = '';\n  /** Primary button label */\n  @Prop({ mutable: true }) primaryButton: string = 'Accept';\n  /** Secondary button label (hidden if empty) */\n  @Prop({ mutable: true }) secondaryButton: string = '';\n  /** Show loading state with loading.json Lottie */\n  @Prop() loading: boolean = false;\n  /** Show close icon in header */\n  @Prop({ mutable: true }) closable: boolean = false;\n  /** Hide action buttons */\n  @Prop({ mutable: true }) displayButtons: boolean = true;\n  /** Loading title */\n  @Prop({ mutable: true }) loadingTitle: string = 'Loading';\n  /** Loading message */\n  @Prop({ mutable: true }) loadingMessage: string = 'Please wait a moment';\n  /**\n   * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\n   * Useful for step-by-step flows.\n   */\n  @Prop() isStep: boolean = false;\n  /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 0;\n  /**\n   * Use White Label (MB) illustration style instead of Lottie animation.\n   */\n  @Prop() isWhiteLabel: boolean = false;\n  /**\n   * Convenience object prop — matches Angular `params: ModalParams`.\n   * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\n   * loadingMessage, closable, displayButtons.\n   * When provided, its values override the corresponding individual props.\n   */\n  @Prop() params: any = null;\n\n  @Watch('params')\n  paramsChanged(val: any) {\n    if (!val) return;\n    if (val.tittle !== undefined) this.tittle = val.tittle;\n    if (val.type !== undefined) this.type = val.type;\n    if (val.message !== undefined) this.message = val.message;\n    if (val.primaryButton !== undefined) this.primaryButton = val.primaryButton;\n    if (val.secondaryButton !== undefined) this.secondaryButton = val.secondaryButton;\n    if (val.loadingTitle !== undefined) this.loadingTitle = val.loadingTitle;\n    if (val.loadingMessage !== undefined) this.loadingMessage = val.loadingMessage;\n    if (val.closable !== undefined) this.closable = val.closable;\n    if (val.displayButtons !== undefined) this.displayButtons = val.displayButtons;\n  }\n\n  /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */\n  @Event() dropiPrimaryClick: EventEmitter<boolean>;\n  /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */\n  @Event() dropiSecondaryClick: EventEmitter<boolean>;\n  /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */\n  @Event() dropiVisibleChange: EventEmitter<boolean>;\n  /** Emitted when modal is hidden — matches Angular 'onHide' */\n  @Event() dropiHide: EventEmitter<void>;\n\n  private readonly lottieMap: Record<string, string> = {\n    question: '/assets/lottie-files/question.json',\n    warning: '/assets/lottie-files/warning.json',\n    success: '/assets/lottie-files/success.json',\n    error: '/assets/lottie-files/failure.json',\n    loading: '/assets/lottie-files/loading.json',\n  };\n\n  componentWillLoad() {\n    if (this.params) this.paramsChanged(this.params);\n  }\n\n  @Method() async show() {\n    this.visible = true;\n  }\n  @Method() async hide() {\n    this.visible = false;\n  }\n\n  private handlePrimary() {\n    this.dropiPrimaryClick.emit(true);\n    if (!this.isStep) {\n      this.visible = false;\n      this.dropiVisibleChange.emit(false);\n    }\n  }\n\n  private handleSecondary() {\n    this.dropiSecondaryClick.emit(true);\n    this.visible = false;\n    this.dropiVisibleChange.emit(false);\n  }\n\n  private onModalHide() {\n    this.visible = false;\n    this.dropiVisibleChange.emit(false);\n    this.dropiHide.emit();\n  }\n\n  render() {\n    const lottieKey = this.loading ? 'loading' : this.type;\n    const isLottieLoading = lottieKey === 'loading';\n\n    return (\n      <dropi-modal\n        visible={this.visible}\n        showHeader={this.closable}\n        showCloseIcon={this.closable}\n        dismissable={false}\n        closeOnEscape={false}\n        showFooter={false}\n        size=\"s\"\n        onDropiHide={() => this.onModalHide()}\n      >\n        <div class=\"body-alert\">\n          {this.lottieMap[lottieKey] && (\n            <div class={`lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}`}>\n              <lottie-player\n                key={lottieKey}\n                src={this.lottieMap[lottieKey]}\n                background=\"transparent\"\n                speed=\"1\"\n                loop\n                autoplay\n              />\n            </div>\n          )}\n\n          <div class=\"content-alert\">\n            <h2>{this.loading ? this.loadingTitle : this.tittle}</h2>\n            <p>{this.loading ? this.loadingMessage : this.message}</p>\n          </div>\n\n          <div class=\"custom-content\">\n            <slot />\n          </div>\n\n          {!this.loading && this.displayButtons && (\n            <div class=\"actions\">\n              {this.secondaryButton && <dropi-button text={this.secondaryButton} severity=\"secondary\" onDropiClick={() => this.handleSecondary()} fullWidth />}\n              <dropi-button text={this.primaryButton} severity=\"primary\" onDropiClick={() => this.handlePrimary()} fullWidth />\n            </div>\n          )}\n        </div>\n      </dropi-modal>\n    );\n  }\n}\n"],"version":3}

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

@@ -4,8 +4,8 @@ const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after
 
 const STATE_ICONS = {
     success: 'Check-circle',
-    error: 'Warning-circle',
-    warning: 'Warning-triangle',
+    error: 'Cross-circle',
+    warning: 'Warning-circle',
     info: 'Info',
 };
 const STATE_COLORS = {
@@ -17,9 +17,9 @@ const STATE_COLORS = {
 const DropiAlert = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClose = createEvent(this, "onClose", 7);
-        this.onButtonClick = createEvent(this, "onButtonClick", 7);
-        this.onClickLink = createEvent(this, "onClickLink", 7);
+        this.dropiClose = createEvent(this, "dropiClose", 7);
+        this.dropiButtonClick = createEvent(this, "dropiButtonClick", 7);
+        this.dropiLinkClick = createEvent(this, "dropiLinkClick", 7);
     }
     /** Alert message text (supports plain text) */
     message = '';
@@ -34,9 +34,9 @@ const DropiAlert = class {
     /** Action button label */
     buttonText = 'Close';
     /** Anchor/link label */
-    anchorText = 'none';
+    anchorText = '';
     /** Anchor href */
-    anchorUrl = 'none';
+    anchorUrl = '';
     /** Whether the alert is visible */
     showAlert = true;
     /** Link text (alternative to anchorText) */
@@ -46,15 +46,15 @@ const DropiAlert = class {
     /** Clicked text tracking */
     clickedText = '';
     /** Emitted when the alert is dismissed */
-    onClose;
+    dropiClose;
     /** Emitted when the action button is clicked */
-    onButtonClick;
+    dropiButtonClick;
     /** Emitted when the anchor link is clicked */
-    onClickLink;
+    dropiLinkClick;
     render() {
         if (!this.showAlert)
             return null;
-        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message", innerHTML: this.message }), this.clickedText && (h("a", { class: "alert__link", href: "#", onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.clickedText)), (this.anchorText || this.textLink) && (h("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText || this.textLink))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
     }
 };
 DropiAlert.style = dropiAlertCss();

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

@@ -1 +1 @@
-{"file":"dropi-alert.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert/dropi-alert.css?tag=dropi-alert&encapsulation=shadow","src/components/dropi-alert/dropi-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.alert {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid transparent;\n  width: 100%;\n}\n\n/* ── State colors ───────────────────────────────────────── */\n.alert--success {\n  background: var(--Success-Success-50, #e7f8f3);\n  border-color: var(--Success-Success-500, #0abb87);\n}\n\n.alert--error {\n  background: var(--Error-Error-50, #fef0f0);\n  border-color: var(--Error-Error-500, #f46a6b);\n}\n\n.alert--warning {\n  background: var(--Warning-Warning-50, #fef8ed);\n  border-color: var(--Warning-Warning-500, #f1b44c);\n}\n\n.alert--info {\n  background: var(--Info-Info-50, #eef6fe);\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n/* ── Flag type (left accent border) ────────────────────── */\n.alert--flag {\n  padding: var(--Size-1, 4px) var(--Size-2, 8px);\n  border-radius: var(--Border-1, 4px);\n  border: none !important;\n  justify-content: center;\n}\n.alert--flag .alert__body {\n  justify-content: center;\n  text-align: center;\n}\n.alert--flag .alert__message {\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-regular);\n}\n\n/* ── Icon ───────────────────────────────────────────────── */\n.alert__icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding-top: 1px;\n}\n\n/* ── Body ───────────────────────────────────────────────── */\n.alert__body {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n}\n\n.alert__message {\n  font-size: var(--font-size-s);\n  color: var(--Gray-600, #475066);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.5;\n}\n\n.alert__link {\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n/* ── Actions ────────────────────────────────────────────── */\n.alert__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.alert__btn {\n  height: 28px;\n  padding: 0 var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid var(--Primary-Primary-500, #f49a3d);\n  background: transparent;\n  color: var(--Primary-Primary-500, #f49a3d);\n  font-size: var(--font-size-xs, 10px);\n  font-family: inherit;\n  font-weight: var(--font-weight-bold, 700);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.alert__btn:hover {\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n}\n\n.alert__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s;\n}\n\n.alert__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AlertState = 'success' | 'error' | 'warning' | 'info';\nexport type AlertType = 'default' | 'flag';\n\nconst STATE_ICONS: Record<AlertState, string> = {\n  success: 'Check-circle',\n  error: 'Warning-circle',\n  warning: 'Warning-triangle',\n  info: 'Info',\n};\n\nconst STATE_COLORS: Record<AlertState, string> = {\n  success: 'Success-Success-500',\n  error: 'Error-Error-500',\n  warning: 'Warning-Warning-500',\n  info: 'Info-Info-500',\n};\n\n/**\n * @component dropi-alert\n * Alert banner with state variants (success/error/warning/info),\n * optional action button, anchor link, and dismissable close icon.\n */\n@Component({\n  tag: 'dropi-alert',\n  styleUrl: 'dropi-alert.css',\n  shadow: true,\n})\nexport class DropiAlert {\n  /** Alert message text (supports plain text) */\n  @Prop() message: string = '';\n  /** Layout type: default (inline) | flag (accented left border) */\n  @Prop() type: AlertType = 'default';\n  /** Semantic state */\n  @Prop() state: AlertState = 'success';\n  /** Show the × close button */\n  @Prop() dismissable: boolean = true;\n  /** Show action button */\n  @Prop() showButton: boolean = false;\n  /** Action button label */\n  @Prop() buttonText: string = 'Close';\n  /** Anchor/link label */\n  @Prop() anchorText: string = 'none';\n  /** Anchor href */\n  @Prop() anchorUrl: string = 'none';\n  /** Whether the alert is visible */\n  @Prop({ mutable: true }) showAlert: boolean = true;\n  /** Link text (alternative to anchorText) */\n  @Prop() textLink: string = '';\n  /** Link URL (alternative to anchorUrl) */\n  @Prop() linkUrl: string = '';\n  /** Clicked text tracking */\n  @Prop() clickedText: string = '';\n\n  /** Emitted when the alert is dismissed */\n  @Event() onClose: EventEmitter<void>;\n  /** Emitted when the action button is clicked */\n  @Event() onButtonClick: EventEmitter<void>;\n  /** Emitted when the anchor link is clicked */\n  @Event() onClickLink: EventEmitter<void>;\n\n  render() {\n    if (!this.showAlert) return null;\n\n    return (\n      <div class={{ 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true }}>\n\n        {this.type !== 'flag' && (\n          <div class=\"alert__icon\">\n            <dropi-icon\n              name={STATE_ICONS[this.state]}\n              iconWidth=\"18px\"\n              iconHeight=\"18px\"\n              color={STATE_COLORS[this.state]}\n            />\n          </div>\n        )}\n\n        <div class=\"alert__body\">\n          <span class=\"alert__message\">{this.message}</span>\n\n          {this.anchorText && (\n            <a\n              class=\"alert__link\"\n              href={this.anchorUrl || this.linkUrl || '#'}\n              onClick={(e) => { e.preventDefault(); this.onClickLink.emit(); }}\n            >\n              {this.anchorText}\n            </a>\n          )}\n        </div>\n\n        <div class=\"alert__actions\">\n          {this.showButton && this.buttonText && this.type !== 'flag' && (\n            <button class=\"alert__btn\" onClick={() => this.onButtonClick.emit()}>\n              {this.buttonText}\n            </button>\n          )}\n\n          {this.dismissable && (\n            <button\n              class=\"alert__close\"\n              onClick={() => { this.showAlert = false; this.onClose.emit(); }}\n              aria-label=\"Cerrar\"\n            >\n              <dropi-icon name=\"Close-small\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n            </button>\n          )}\n        </div>\n\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-alert.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert/dropi-alert.css?tag=dropi-alert&encapsulation=shadow","src/components/dropi-alert/dropi-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.alert {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid transparent;\n  width: 100%;\n}\n\n/* ── State colors ───────────────────────────────────────── */\n.alert--success {\n  background: var(--Success-Success-50, #e7f8f3);\n  border-color: var(--Success-Success-500, #0abb87);\n}\n\n.alert--error {\n  background: var(--Error-Error-50, #fef0f0);\n  border-color: var(--Error-Error-500, #f46a6b);\n}\n\n.alert--warning {\n  background: var(--Warning-Warning-50, #fef8ed);\n  border-color: var(--Warning-Warning-500, #f1b44c);\n}\n\n.alert--info {\n  background: var(--Info-Info-50, #eef6fe);\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n/* ── Flag type (left accent border) ────────────────────── */\n.alert--flag {\n  padding: var(--Size-1, 4px) var(--Size-2, 8px);\n  border-radius: var(--Border-1, 4px);\n  border: none !important;\n  justify-content: center;\n}\n.alert--flag .alert__body {\n  justify-content: center;\n  text-align: center;\n}\n.alert--flag .alert__message {\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-regular);\n}\n\n/* ── Icon ───────────────────────────────────────────────── */\n.alert__icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding-top: 1px;\n}\n\n/* ── Body ───────────────────────────────────────────────── */\n.alert__body {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n}\n\n.alert__message {\n  font-size: var(--font-size-s);\n  color: var(--Gray-600, #475066);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.5;\n}\n\n.alert__link {\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n/* ── Actions ────────────────────────────────────────────── */\n.alert__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.alert__btn {\n  height: 28px;\n  padding: 0 var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid var(--Primary-Primary-500, #f49a3d);\n  background: transparent;\n  color: var(--Primary-Primary-500, #f49a3d);\n  font-size: var(--font-size-xs, 10px);\n  font-family: inherit;\n  font-weight: var(--font-weight-bold, 700);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.alert__btn:hover {\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n}\n\n.alert__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s;\n}\n\n.alert__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AlertState = 'success' | 'error' | 'warning' | 'info';\nexport type AlertType = 'default' | 'flag';\n\nconst STATE_ICONS: Record<AlertState, string> = {\n  success: 'Check-circle',\n  error: 'Cross-circle',\n  warning: 'Warning-circle',\n  info: 'Info',\n};\n\nconst STATE_COLORS: Record<AlertState, string> = {\n  success: 'Success-Success-500',\n  error: 'Error-Error-500',\n  warning: 'Warning-Warning-500',\n  info: 'Info-Info-500',\n};\n\n/**\n * @component dropi-alert\n * Alert banner with state variants (success/error/warning/info),\n * optional action button, anchor link, and dismissable close icon.\n */\n@Component({\n  tag: 'dropi-alert',\n  styleUrl: 'dropi-alert.css',\n  shadow: true,\n})\nexport class DropiAlert {\n  /** Alert message text (supports plain text) */\n  @Prop() message: string = '';\n  /** Layout type: default (inline) | flag (accented left border) */\n  @Prop() type: AlertType = 'default';\n  /** Semantic state */\n  @Prop() state: AlertState = 'success';\n  /** Show the × close button */\n  @Prop() dismissable: boolean = true;\n  /** Show action button */\n  @Prop() showButton: boolean = false;\n  /** Action button label */\n  @Prop() buttonText: string = 'Close';\n  /** Anchor/link label */\n  @Prop() anchorText: string = '';\n  /** Anchor href */\n  @Prop() anchorUrl: string = '';\n  /** Whether the alert is visible */\n  @Prop({ mutable: true }) showAlert: boolean = true;\n  /** Link text (alternative to anchorText) */\n  @Prop() textLink: string = '';\n  /** Link URL (alternative to anchorUrl) */\n  @Prop() linkUrl: string = '';\n  /** Clicked text tracking */\n  @Prop() clickedText: string = '';\n\n  /** Emitted when the alert is dismissed */\n  @Event() dropiClose: EventEmitter<void>;\n  /** Emitted when the action button is clicked */\n  @Event() dropiButtonClick: EventEmitter<void>;\n  /** Emitted when the anchor link is clicked */\n  @Event() dropiLinkClick: EventEmitter<void>;\n\n  render() {\n    if (!this.showAlert) return null;\n\n    return (\n      <div class={{ 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true }}>\n\n        {this.type !== 'flag' && (\n          <div class=\"alert__icon\">\n            <dropi-icon\n              name={STATE_ICONS[this.state]}\n              iconWidth=\"18px\"\n              iconHeight=\"18px\"\n              color={STATE_COLORS[this.state]}\n            />\n          </div>\n        )}\n\n        <div class=\"alert__body\">\n          <span class=\"alert__message\" innerHTML={this.message}></span>\n\n          {this.clickedText && (\n            <a\n              class=\"alert__link\"\n              href=\"#\"\n              onClick={(e) => { e.preventDefault(); this.dropiLinkClick.emit(); }}\n            >\n              {this.clickedText}\n            </a>\n          )}\n\n          {(this.anchorText || this.textLink) && (\n            <a\n              class=\"alert__link\"\n              href={this.anchorUrl || this.linkUrl || '#'}\n              onClick={(e) => { e.preventDefault(); this.dropiLinkClick.emit(); }}\n            >\n              {this.anchorText || this.textLink}\n            </a>\n          )}\n        </div>\n\n        <div class=\"alert__actions\">\n          {this.showButton && this.buttonText && this.type !== 'flag' && (\n            <button class=\"alert__btn\" onClick={() => this.dropiButtonClick.emit()}>\n              {this.buttonText}\n            </button>\n          )}\n\n          {this.dismissable && (\n            <button\n              class=\"alert__close\"\n              onClick={() => { this.showAlert = false; this.dropiClose.emit(); }}\n              aria-label=\"Cerrar\"\n            >\n              <dropi-icon name=\"Close-small\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n            </button>\n          )}\n        </div>\n\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-badge-legacy.entry.js

@@ -16,7 +16,7 @@ const DropiBadgeLegacy = class {
     count = 0;
     render() {
         const isCounter = this.type === 'counter';
-        return (h("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
+        return (h("div", { key: '58bb5c6625539109f010cccdcaafc37ab6da38ba', class: {
                 'badge-legacy': true,
                 [`badge-legacy--${this.variant}`]: true,
                 [`badge-legacy--${this.type}`]: true

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

@@ -1,11 +1,11 @@
 import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 
-const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;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:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);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:1px solid var(--Gray-Gray-200, #c3c9d9);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 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}.btn{all:unset;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.onClick = createEvent(this, "onClick", 7);
+        this.dropiClick = createEvent(this, "dropiClick", 7);
     }
     /** Visual color palette */
     type = 'default';
@@ -26,7 +26,7 @@ const DropiButton = class {
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    onClick;
+    dropiClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -58,7 +58,7 @@ const DropiButton = class {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.onClick.emit(e);
+            this.dropiClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -69,7 +69,7 @@ const DropiButton = class {
         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: 'a8771ab61e78941d1bfd7b987a02dfe2e9d22a31', class: {
+        return (h("button", { key: 'eefda6c7ac5090173a545d67e72073dc410ff05c', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity ?? 'primary']: true,
@@ -77,7 +77,7 @@ const DropiButton = class {
                 [this.size ?? 'normal']: true,
                 [this.state ?? 'default']: true,
                 'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '374403bce1d33e39f3834d6e10dfec5ac7ca7e0c', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '65d5e45f4df8df2795be3b6bf09c9576f8497664', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'b3d1459260a3d7159ddf1193aa29672e8d8d3800', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'ae37b4195f35b02d70e166fcba27939f38d35326' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '869ee8fc34dee93de0381a86db643c0fa9dc6918', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '927ef142b4c549d01b087722e9f6759cff44e6b2', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'cda1f5d0fa59a87abc1d3d73a87d4390f05f79eb', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'c83dd79efe5d858361815878192c0c554a9234ca' })));
     }
 };
 DropiButton.style = dropiButtonCss();

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

@@ -1 +1 @@
-{"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}\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; }\n\n.btn {\n  all: unset;\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: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-500, #69738c);\n}\n.btn.tertiary.default:hover,\n.btn.tertiary.legacy:hover {\n  border-color: var(--Gray-Gray-400, #858ea6);\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: 1px solid var(--Gray-Gray-200, #c3c9d9);\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, 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';\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})\nexport class DropiButton {\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\n  /** Emitted on click (not emitted when disabled or loading) */\n  @Event() onClick: 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.onClick.emit(e);\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        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}
+{"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; }\n\n.btn {\n  all: unset;\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, 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';\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})\nexport class DropiButton {\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\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    }\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        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

@@ -5,7 +5,7 @@ const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*
 const DropiCardCheckbox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
     }
     /** Visual type — matches Angular: 'default' | 'with card' */
     type = 'default';
@@ -22,7 +22,7 @@ const DropiCardCheckbox = class {
     /** Disables interaction */
     disabled = false;
     /** Emitted with the new checked state when clicked */
-    onChange;
+    dropiChange;
     get isChecked() {
         return this.state === 'checked';
     }
@@ -30,15 +30,15 @@ const DropiCardCheckbox = class {
         if (this.disabled)
             return;
         this.state = this.isChecked ? 'default' : 'checked';
-        this.onChange.emit(this.isChecked);
+        this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: '238a146e7500efbc01d83a8494ee577fbb600729', class: {
+        return (h("div", { key: 'b9004c813a03956904cfed8484cac2d8290be86f', 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: '405d834de33790be58fba7e50b0e579889f04394', checked: this.isChecked, disabled: this.disabled }), h("div", { key: '49659771de9ca8ee8c2fa9fbe828a1d94fbd3c9e', class: "container-text" }, h("div", { key: '7d39435ef56cd61605e9d9b69d6917e3ec8470fa', class: "title-check" }, this.title), this.description && h("div", { key: '00a7723401979d7a9d926ce939eb09430ddb7372', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '4d1c9e49f6e397f0433827960167ff88bcd669db', class: "extra-info" }, this.extraInfo && h("div", { key: 'b9da8514c2013cd6cab9cf6005dad8d3ae30b930' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'ac2fcbc6359ea173911f181b2a145de59af10c9d' }, this.extraInfoDescription)))));
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '0c5c50811559c6472173fced2f04eee4626f118f', checked: this.isChecked, disabled: this.disabled }), h("div", { key: '1cb17bf8aea55a498d451922942b4fba6d99492c', class: "container-text" }, h("div", { key: '6e2eab2ae82c13cb4e7a654cc989530cee1122c6', class: "title-check" }, this.title), this.description && h("div", { key: '040e5d8f633975bf3eb806835aae8aa308b1d4f8', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: 'a5c794b5f2fa249b309b2fb00a759aea5b9e0d6c', class: "extra-info" }, this.extraInfo && h("div", { key: '1587e1a0801312fa8e759af2a367b36f842e1354' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: '930811071657dfbbeff7c2bdc4cd2c2776d38177' }, this.extraInfoDescription)))));
     }
 };
 DropiCardCheckbox.style = dropiCardCheckboxCss();

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

@@ -1 +1 @@
-{"file":"dropi-card-checkbox.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,ktDAAktD,CAAC;;MCmB1uD,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,QAAQ;AAEjB,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,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGpC,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,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,EACpE,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; }\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() onChange: 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.onChange.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 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}
+{"file":"dropi-card-checkbox.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,ktDAAktD,CAAC;;MCmB1uD,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,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,EACpE,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; }\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 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

@@ -5,8 +5,8 @@ const dropiCardProductCss = () => `:host{display:block;font-family:'Inter', sans
 const DropiCardProduct = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onProductClick = createEvent(this, "onProductClick", 7);
-        this.changeFavorite = createEvent(this, "changeFavorite", 7);
+        this.dropiProductClick = createEvent(this, "dropiProductClick", 7);
+        this.dropiFavoriteChange = createEvent(this, "dropiFavoriteChange", 7);
         this.dropiAddProduct = createEvent(this, "dropiAddProduct", 7);
         this.dropiSupplierClick = createEvent(this, "dropiSupplierClick", 7);
     }
@@ -35,9 +35,9 @@ const DropiCardProduct = class {
     /** Show "Enviar a cliente" button */
     showAddButton = true;
     /** Emitted when card is clicked — matches Angular 'onProductClick' */
-    onProductClick;
+    dropiProductClick;
     /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
-    changeFavorite;
+    dropiFavoriteChange;
     /** Emitted when "Enviar a cliente" button clicked */
     dropiAddProduct;
     /** Emitted when supplier name clicked */
@@ -58,17 +58,17 @@ const DropiCardProduct = class {
         return 'var(--Success-Success-500, #0abb87)';
     }
     render() {
-        return (h("div", { key: '42990ea883dcd6cc72e1f62771f7b9554c36bdba', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, h("div", { key: '59295427ddc350ec3c70d7d1bd4803ffa6bf26b0', class: "product-image-container" }, h("div", { key: '9d10e18f2eadf16f0c0b1b7cb7860d08f2ca778f', class: "product-image" }, h("img", { key: '19f7af8eddcbea880d32ef30603d55bfe9337f17', src: this.image || '', alt: this.productName, onError: (e) => {
+        return (h("div", { key: '2fe4ce42e1c331a99fd1171c82e6e48bfb5dbff0', class: "dropi-card-product", onClick: () => this.dropiProductClick.emit() }, h("div", { key: '3f94077ee059e347f3ff4fff808a3a3f3a0ac827', class: "product-image-container" }, h("div", { key: '1d6e8181cc630ab03efc90e316c349dfe9765b46', class: "product-image" }, h("img", { key: 'f6647c21ac24d378482c6e6fe5220d6d18ff694b', 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: 'a6e13eea7c211fd772fe5ee7c13c7d475d54986c', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("button", { key: '37c23af5e1345e2f2b2ac42dd38f88eb17254889', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
                 e.stopPropagation();
                 this.isFavorite = !this.isFavorite;
-                this.changeFavorite.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, h("dropi-icon", { key: '35300a450b8fff37e7c469b5b8a1f39ebfb717dc', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: 'b6792c07dbcc37f636add6bd0f9bfbb88b28fc6b', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: 'f4074d38a1e7999ffde2b4906de21b91348b4a63', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '7a085de7400576ba2595770268845916eecfa3cf', class: "product-header" }, this.category && (h("span", { key: 'c5002b0b82d8483e3ea88d884cdeaa015341e7ca', class: "category" }, this.category)), h("div", { key: '4c24e0f3dc3ea31764290e97a600beb411ce7b50', class: "stock-info" }, h("span", { key: '453b6b6ba34aa1c060052ec6a1aa4b6aeabe454b', class: "stock-label" }, "Stock:"), h("span", { key: '46733d6335c72a16411b27c1cae7dbb1e46a26cc', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '69179b355604ffbf594f192c47ba8ac18964d1c8', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'b53d6667872f959cc5e48b365b42b5744c4c0ae8', class: "supplier-info" }, h("span", { key: 'e2cb385de94697533b0ac8f8832246dac955efb1', class: "supplier-label" }, "Proveedor:"), h("span", { key: '17e2d2ce7a5d6113fbef89a5c49ec183e189aeee', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: 'eb146caf735601d1ed0f3ff0f81e234a9a768d04', class: "price-container" }, h("div", { key: '0516aaeb1f4d087b262b5692abfac9993c8b378a', class: "price-item" }, h("span", { key: '837eb19a5bb50dbd05d999a5c3fb0d642f2701b7', class: "price-label" }, "Precio proveedor"), h("span", { key: '4bdba27153a06e39d5449b61eed4707a90123336', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '82040761c0b63df23fbc80d0e990d3a1c610d8eb', class: "price-item" }, h("span", { key: 'c93307dba668d60e22e6b7d9215abf289495935c', class: "price-label" }, "Precio sugerido"), h("span", { key: 'd9aca439201e07756e298b0be7d41aa9396cf67d', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '79e9e143ddb87209a550069abe839b89ec703e22', class: "separator" }), this.showAddButton && (h("div", { key: 'b3261c8db5e3fd9c97f9894f6aea420495f0577b', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+                this.dropiFavoriteChange.emit(this.isFavorite);
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: 'c6d6c87dcb5ae0f9a0d416667a3d39c7e153b7a6', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: '66dbcb028acb35e9a43502e9ff9a00fd2ebf8bf2', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: 'fd3d94e953a6b91418decc09ed426755a85bac1b', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '45817e3bb0bfdaa0ec8cb4a23fdac1bb943e93dc', class: "product-header" }, this.category && (h("span", { key: 'c721519a5339a2ac40d20c283bbe8797b78e4b27', class: "category" }, this.category)), h("div", { key: '49f5013738dfffcdb83dfde628f5d1d21164c3d2', class: "stock-info" }, h("span", { key: 'bd49d5069d07b3ae10ac9c85a4b84bbb573f926e', class: "stock-label" }, "Stock:"), h("span", { key: 'd0eefb88240c13c9c56e7470e79cbacc9d86caf4', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: 'a880d0df13af0b75d553daf18e876905b93e6ef1', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'faa82e269979084e7510b6a17fb1f3caee8ad181', class: "supplier-info" }, h("span", { key: 'b4b223620c58cb30945b1c6be50559614937eb5f', class: "supplier-label" }, "Proveedor:"), h("span", { key: '989580f42383c3b6adb6484a493d1293a2a11904', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '451c1ab830c7ab38c4e414e94f11f63ffcf86162', class: "price-container" }, h("div", { key: '755f3f8aac6f7b1d458d28b74dec2734b42794a6', class: "price-item" }, h("span", { key: 'fff0a718b4f22641adcd28bbcb7e81a0f21755e9', class: "price-label" }, "Precio proveedor"), h("span", { key: '5bb6843a4a293195f0dbda5c3eccfc4f38c719b1', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '468b1d7596ec5d727846a087b5d89461c5fef858', class: "price-item" }, h("span", { key: '91b15e4d58d27997b2dfdb9c73fd417a8f8ba5fb', class: "price-label" }, "Precio sugerido"), h("span", { key: '378483760ffac07491f5b65b37d5e27d41423ec5', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '71467832049894083ea3454618a12d082cb15844', class: "separator" }), this.showAddButton && (h("div", { key: 'f9f0450e3dfa2b91ae7caa468811cc739d7a280e', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
                 e.stopPropagation();
                 if (this.inStock)
                     this.dropiAddProduct.emit();
-            } }, h("dropi-icon", { key: '89cf58b72a1500616eb47b9f6e0bcf1e67229d94', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), h("span", { key: '60843cb9e54337eae7e570827190f1d60a8f0450', class: "button-text" }, "Enviar a cliente")))));
+            } }, h("dropi-icon", { key: '50a9fad974460c2728fb1fca74628d093cbb1875', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), h("span", { key: 'f5ac44dd20e01bc644e863c3cbf51e3493821e70', class: "button-text" }, "Enviar a cliente")))));
     }
 };
 DropiCardProduct.style = dropiCardProductCss();

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

@@ -1 +1 @@
-{"file":"dropi-card-product.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,+5FAA+5F,CAAC;;MCWt7F,gBAAgB,GAAA,MAAA;;;;;;;;;IAEnB,KAAK,GAAW,EAAE;;IAElB,WAAW,GAAW,EAAE;;IAExB,SAAS,GAAW,CAAC;;IAErB,cAAc,GAAW,CAAC;;IAE1B,QAAQ,GAAW,GAAG;;IAEtB,QAAQ,GAAW,EAAE;;IAErB,QAAQ,GAAW,EAAE;;IAErB,KAAK,GAAW,CAAC;;IAEjB,gBAAgB,GAA8C,EAAE;;IAEhE,YAAY,GAAY,IAAI;;IAEX,UAAU,GAAY,KAAK;;IAE5C,aAAa,GAAY,IAAI;;AAG5B,IAAA,cAAc;;AAEd,IAAA,cAAc;;AAEd,IAAA,eAAe;;AAEf,IAAA,kBAAkB;AAEnB,IAAA,WAAW,CAAC,GAAW,EAAA;QAC7B,IAAI,GAAG,IAAI,IAAI;AAAE,YAAA,OAAO,GAAG;AAC3B,QAAA,OAAO,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;;AAGpC,IAAA,IAAY,OAAO,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC;;IAGf,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;AAAE,YAAA,OAAO,iCAAiC;AAC9D,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE;AAAE,YAAA,OAAO,qCAAqC;AAClE,QAAA,OAAO,qCAAqC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,EAAA,EAGvE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EACrB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,OAAO,EAAE,CAAC,CAAC,KAAI;AACZ,gBAAA,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,6BAA6B;aACnE,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,GAAG,EAAE,EAAA,CACrC,EAGD,IAAI,CAAC,YAAY,KAChB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,EACtE,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;gBAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;AAC3C,aAAC,gBACU,UAAU,EAAA,EAErB,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,aAAa,GAAG,OAAO,EAC/C,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,SAAS,GAC3C,CACK,CACV,CACG,CACF,EAGN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EAGtB,IAAI,CAAC,gBAAgB,KACpB,+EACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,aAAa,EAAE,IAAI,CAAC,gBAAuB,EAC3C,UAAU,EAAE,IAAI,EAAA,CAChB,CACH,EAGD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CAC9C,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAA,QAAA,CAAc,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,EAAA,EAC7D,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CACrC,CACH,CACF,EAGN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAM,EAG/C,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAA,YAAA,CAAkB,EAC9C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,CAAC,CAAC,KAAI,EAAG,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC,EAAE,EAAA,EAEvE,IAAI,CAAC,QAAQ,CACT,CACH,CACP,EAGD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAA,kBAAA,CAAwB,EACjD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,QAAQ,OAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAQ,CAC/E,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAA,iBAAA,CAAuB,EAChD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,QAAQ,OAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAQ,CACpF,CACF,CACF,EAGN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,CAAO,EAG5B,IAAI,CAAC,aAAa,KACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAC1E,OAAO,EAAE,CAAC,CAAC,KAAI;gBAAG,CAAC,CAAC,eAAe,EAAE;gBAAE,IAAI,IAAI,CAAC,OAAO;AAAE,oBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;aAAG,EAAA,EAEvF,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,2BAA2B,EAChC,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAC,SAAS,EAAA,CACf,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAA,kBAAA,CAAwB,CAC7C,CACP,CACG;;;;;;;","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: 'Inter', sans-serif;\n}\n*, *::before, *::after { box-sizing: border-box; }\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: '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: '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: '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: '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: '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: '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: '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() onProductClick: EventEmitter<void>;\n  /** Emitted when favorite toggled — matches Angular 'changeFavorite' */\n  @Event() changeFavorite: 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.onProductClick.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.changeFavorite.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}
+{"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: 'Inter', sans-serif;\n}\n*, *::before, *::after { box-sizing: border-box; }\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: '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: '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: '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: '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: '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: '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: '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}