@dropi/ui 0.1.22 → 0.1.23

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

@@ -0,0 +1 @@
+{"file":"dropi-skeleton.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,2bAA2b,CAAC;;MCa/c,aAAa,GAAA,MAAA;;;;;IAEhB,OAAO,GAAoB,MAAM;;IAEjC,KAAK,GAAW,EAAE;;IAElB,MAAM,GAAW,EAAE;;IAEnB,MAAM,GAAW,KAAK;;IAEtB,KAAK,GAAW,CAAC;;IAEjB,SAAS,GAAW,SAAS;IAE7B,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,SAAS,GAAG;AACxH,QAAA,OAAO,CAAA,0BAAA,EAA6B,KAAK,CAAA,oBAAA,EAAuB,KAAK,OAAO;;IAGtE,SAAS,GAAA;QACf,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC,MAAM;AACnC,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ;AAAE,YAAA,OAAO,KAAK;AAC3C,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;AAAE,YAAA,OAAO,KAAK;AACzC,QAAA,OAAO,sBAAsB;;IAG/B,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAC7C,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC3C,WACE,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE;AACL,oBAAA,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK;oBAChD,MAAM,EAAE,IAAI,CAAC,MAAM;AACnB,oBAAA,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;AAC9B,oBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE;AAChC,oBAAA,cAAc,EAAE,cAAc;AAC/B,iBAAA,EAAA,CACD,CACH,CAAC,CACE;;QAIV,QACE,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;AACnB,gBAAA,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;AAC9B,gBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE;AAChC,gBAAA,cAAc,EAAE,cAAc;aAC/B,EAAA,CACD;;;;;;;","names":[],"sources":["src/components/dropi-skeleton/dropi-skeleton.css?tag=dropi-skeleton&encapsulation=shadow","src/components/dropi-skeleton/dropi-skeleton.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.skeleton-lines {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton {\n  background: linear-gradient(\n    90deg,\n    var(--Gray-Gray-100, #e6eaf2) 25%,\n    var(--Gray-Gray-50, #f7f8fa) 50%,\n    var(--Gray-Gray-100, #e6eaf2) 75%\n  );\n  background-size: 200% 100%;\n  animation: shimmer 1.6s ease-in-out infinite;\n}\n\n@keyframes shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type SkeletonVariant = 'text' | 'circle' | 'rect';\n\n/**\n * @component dropi-skeleton\n * Loading placeholder with shimmer animation.\n */\n@Component({\n  tag: 'dropi-skeleton',\n  styleUrl: 'dropi-skeleton.css',\n  shadow: true,\n})\nexport class DropiSkeleton {\n  /** Shape variant: 'text' | 'circle' | 'rect' */\n  @Prop() variant: SkeletonVariant = 'text';\n  /** Width (CSS value, e.g. \"100%\", \"200px\") */\n  @Prop() width: string = '';\n  /** Height (CSS value, e.g. \"16px\", \"48px\") */\n  @Prop() height: string = '';\n  /** Border radius override */\n  @Prop() radius: string = '8px';\n  /** Number of lines to repeat (text variant only) */\n  @Prop() lines: number = 1;\n  /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */\n  @Prop() baseColor: string = '#f6f7f8';\n\n  private getBackground(): string {\n    const color = (this.baseColor ?? '#f6f7f8').startsWith('#') ? (this.baseColor ?? '#f6f7f8') : `var(--${this.baseColor})`;\n    return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;\n  }\n\n  private getRadius(): string {\n    if (this.radius) return this.radius;\n    if (this.variant === 'circle') return '50%';\n    if (this.variant === 'text') return '4px';\n    return 'var(--Border-1, 4px)';\n  }\n\n  render() {\n    if (this.variant === 'text' && this.lines > 1) {\n      return (\n        <div class=\"skeleton-lines\">\n          {Array.from({ length: this.lines }).map((_, i) => (\n            <div\n              class=\"skeleton\"\n              style={{\n                width: i === this.lines - 1 ? '70%' : this.width,\n                height: this.height,\n                borderRadius: this.getRadius(),\n                background: this.getBackground(),\n                backgroundSize: '1000px 104px',\n              }}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        class=\"skeleton\"\n        style={{\n          width: this.width,\n          height: this.height,\n          borderRadius: this.getRadius(),\n          background: this.getBackground(),\n          backgroundSize: '1000px 104px',\n        }}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-steps.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
 
 const dropiStepsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.stepper__circle-wrap{display:flex;align-items:center;width:100%;position:relative}.stepper__circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);flex-shrink:0;z-index:1;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Neutral-White, #ffffff);border:2px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.stepper__circle--focus{background:var(--Neutral-White, #ffffff);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:var(--Size-2, 8px);text-align:center;padding:0 4px}.stepper__title{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.stepper__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
 
@@ -48,3 +48,6 @@ const DropiSteps = class {
 DropiSteps.style = dropiStepsCss();
 
 export { DropiSteps as dropi_steps };
+//# sourceMappingURL=dropi-steps.entry.esm.js.map
+
+//# sourceMappingURL=dropi-steps.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-steps.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,6hDAA6hD,CAAC;;MCkB9iD,UAAU,GAAA,MAAA;;;;;IAEb,UAAU,GAAW,CAAC;;IAEtB,gBAAgB,GAAY,IAAI;;IAEhC,WAAW,GAAW,CAAC;;IAEvB,UAAU,GAAyB,EAAE;;IAErC,KAAK,GAAc,SAAS;AAEpC,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;AACvC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAE/D,QAAA,OAAO,IAAI,CAAC,UAAU,IAAI,EAAE;;AAGtB,IAAA,SAAS,CAAC,KAAa,EAAA;AAC7B,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,WAAW;AAChD,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,OAAO;AAC9C,QAAA,OAAO,SAAS;;IAGlB,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY;QAChC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEtE,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;YAClB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC;AAC9B,YAAA,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,UAAU;AAEvC,YAAA,QACE,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,oBAAoB,KAAK,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACzE,KAAK,KAAK,WAAW,IACpB,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,KAE5E,IAAI,CAAC,gBAAgB,GAAG,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAQ,GAAG,IAAI,CACnD,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,KAAK,WAAW,EAAE,GAAI,CAC/F,EAEL,KAAK,KACJ,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,KAAK,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,KAAK,CAAC,KAAK,CAAQ,EAChE,KAAK,CAAC,WAAW,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAE,KAAK,CAAC,WAAW,CAAQ,CACxE,CACP,CACG;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-steps/dropi-steps.css?tag=dropi-steps&encapsulation=shadow","src/components/dropi-steps/dropi-steps.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.stepper {\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n}\n\n/* ── Each step ──────────────────────────────────────────── */\n.stepper__step {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n  position: relative;\n}\n\n/* ── Circle row (circle + connecting line) ──────────────── */\n.stepper__circle-wrap {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n}\n\n.stepper__circle {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-bold, 700);\n  flex-shrink: 0;\n  z-index: 1;\n  transition: background 0.2s, border-color 0.2s;\n}\n\n.stepper__circle--pending {\n  background: var(--Neutral-White, #ffffff);\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.stepper__circle--focus {\n  background: var(--Neutral-White, #ffffff);\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n  color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.stepper__circle--completed {\n  background: var(--Primary-Primary-500, #f49a3d);\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n}\n\n/* ── Connecting line ────────────────────────────────────── */\n.stepper__line {\n  flex: 1;\n  height: 2px;\n  background: var(--Gray-Gray-200, #c3c9d9);\n  transition: background 0.2s;\n}\n\n.stepper__line--done {\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Labels ─────────────────────────────────────────────── */\n.stepper__label {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  margin-top: var(--Size-2, 8px);\n  text-align: center;\n  padding: 0 4px;\n}\n\n.stepper__title {\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.stepper__desc {\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type StepState = 'pending' | 'focus' | 'completed';\n\nexport interface StepLabel {\n  title?: string;\n  description?: string;\n}\n\n/**\n * @component dropi-steps\n * Horizontal stepper showing step progress with number/title/description.\n */\n@Component({\n  tag: 'dropi-steps',\n  styleUrl: 'dropi-steps.css',\n  shadow: true,\n})\nexport class DropiSteps {\n  /** Total number of steps */\n  @Prop() stepsCount: number = 3;\n  /** Show step number inside the circle */\n  @Prop() showNumberOfStep: boolean = true;\n  /** Active/current step index (1-based) */\n  @Prop() currentStep: number = 0;\n  /** Labels for each step. Pass as JSON string or array */\n  @Prop() stepLabels: StepLabel[] | string = [];\n  /** Visual state applied to the active step (matches Angular `state`) */\n  @Prop() state: StepState = 'pending';\n\n  private get parsedLabels(): StepLabel[] {\n    if (typeof this.stepLabels === 'string') {\n      try { return JSON.parse(this.stepLabels); } catch { return []; }\n    }\n    return this.stepLabels || [];\n  }\n\n  private stepState(index: number): 'completed' | 'focus' | 'pending' {\n    if (index < this.currentStep) return 'completed';\n    if (index === this.currentStep) return 'focus';\n    return 'pending';\n  }\n\n  render() {\n    const labels = this.parsedLabels;\n    const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);\n\n    return (\n      <div class=\"stepper\">\n        {steps.map((step) => {\n          const state = this.stepState(step);\n          const label = labels[step - 1];\n          const isLast = step === this.stepsCount;\n\n          return (\n            <div class=\"stepper__step\" key={step}>\n              <div class=\"stepper__circle-wrap\">\n                <div class={{ 'stepper__circle': true, [`stepper__circle--${state}`]: true }}>\n                  {state === 'completed' ? (\n                    <dropi-icon name=\"Check\" width=\"12px\" height=\"12px\" color=\"Neutral-White\" />\n                  ) : (\n                    this.showNumberOfStep ? <span>{step}</span> : null\n                  )}\n                </div>\n                {!isLast && <div class={{ 'stepper__line': true, 'stepper__line--done': state === 'completed' }} />}\n              </div>\n\n              {label && (\n                <div class=\"stepper__label\">\n                  {label.title && <span class=\"stepper__title\">{label.title}</span>}\n                  {label.description && <span class=\"stepper__desc\">{label.description}</span>}\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-switch.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 
 const dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.toggle-switch{position:relative;display:inline-block;width:40px;height:21px;margin-bottom:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--Gray-Gray-200, #c3c9d9);transition:0.4s;border-radius:34px}.slider::before{position:absolute;content:'';height:17px;width:17px;left:3px;bottom:2px;background-color:var(--Neutral-White, #ffffff);transition:0.4s;border-radius:50%}input:checked+.slider{background-color:var(--Primary-Primary-500, #f49a3d)}input:checked+.slider::before{transform:translateX(17px)}:host([disabled]) .toggle-switch{cursor:not-allowed;opacity:0.5}`;
 
@@ -26,3 +26,6 @@ const DropiSwitch = class {
 DropiSwitch.style = dropiSwitchCss();
 
 export { DropiSwitch as dropi_switch };
+//# sourceMappingURL=dropi-switch.entry.esm.js.map
+
+//# sourceMappingURL=dropi-switch.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-switch.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,wuBAAwuB,CAAC;;MCY1vB,WAAW,GAAA,MAAA;;;;;;IAEkB,SAAS,GAAY,KAAK;;IAEzC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,QAAQ;AAET,IAAA,cAAc,CAAC,KAAY,EAAA;AACjC,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO;QAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,eAAe,EAAA,EAC1B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAA,CACvC,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,CAAQ,CACtB;;;;;;;;","names":[],"sources":["src/components/dropi-switch/dropi-switch.css?tag=dropi-switch&encapsulation=shadow","src/components/dropi-switch/dropi-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.toggle-switch {\n  position: relative;\n  display: inline-block;\n  width: 40px;\n  height: 21px;\n  margin-bottom: 0;\n  cursor: pointer;\n}\n\n.toggle-switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--Gray-Gray-200, #c3c9d9);\n  transition: 0.4s;\n  border-radius: 34px;\n}\n\n.slider::before {\n  position: absolute;\n  content: '';\n  height: 17px;\n  width: 17px;\n  left: 3px;\n  bottom: 2px;\n  background-color: var(--Neutral-White, #ffffff);\n  transition: 0.4s;\n  border-radius: 50%;\n}\n\ninput:checked + .slider {\n  background-color: var(--Primary-Primary-500, #f49a3d);\n}\n\ninput:checked + .slider::before {\n  transform: translateX(17px);\n}\n\n:host([disabled]) .toggle-switch {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-switch\n * Toggle switch component. Emits dropiChange on toggle.\n */\n@Component({\n  tag: 'dropi-switch',\n  styleUrl: 'dropi-switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiSwitch {\n  /** Whether the switch is on */\n  @Prop({ mutable: true, reflect: true }) isChecked: boolean = false;\n  /** Whether the switch is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Emitted when the toggle state changes */\n  @Event() onChange: EventEmitter<boolean>;\n\n  private onToggleChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.isChecked = input.checked;\n    this.onChange.emit(this.isChecked);\n  }\n\n  render() {\n    return (\n      <label class=\"toggle-switch\">\n        <input\n          type=\"checkbox\"\n          checked={this.isChecked}\n          disabled={this.disabled}\n          onChange={(e) => this.onToggleChange(e)}\n        />\n        <span class=\"slider\"></span>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-table.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 
 const dropiTableCss = () => `:host{display:block;width:100%;min-width:0}*,*::before,*::after{box-sizing:border-box}.table-container{width:100%;min-width:0;border-radius:var(--Border-3);padding:0 var(--Size-4) var(--Size-4) var(--Size-4);background-color:var(--Neutral-White)}.search-container{margin-block:var(--Size-5);display:flex;flex-direction:column;gap:var(--Size-4)}.table-title{padding-block:var(--Size-2);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);color:var(--Gray-Gray-700);margin:0}.search-actions{display:flex;align-items:flex-end;gap:var(--Size-3);width:100%}.search-actions dropi-input{flex:1}.search-actions.only-filter{justify-content:flex-end}.table-tools{display:flex;justify-content:flex-end}.column-selector-container{position:relative}.column-selector-btn{min-width:40px;width:40px;height:40px;padding:0;border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);cursor:pointer;display:flex;align-items:center;justify-content:center}.column-selector-btn:hover{background:var(--Gray-Gray-50)}.column-selector-menu{position:absolute;top:calc(100% + 8px);right:0;width:min(320px, 88vw);border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);box-shadow:var(--Shadow-medium);z-index:20;padding:var(--Size-1)}.column-selector-footer{border-top:1px solid var(--Gray-Gray-100);margin-top:var(--Size-1);padding:var(--Size-2) var(--Size-4);display:flex;align-items:center}.column-selector-all{display:inline-flex;align-items:center;gap:var(--Size-2);color:var(--Gray-Gray-700);font-size:var(--font-size-s);cursor:pointer;user-select:none}.column-selector-option{display:flex;align-items:center;gap:var(--Size-2);padding:var(--Size-2) var(--Size-3);font-size:var(--font-size-s);color:var(--Gray-Gray-700);cursor:pointer;border-radius:var(--Border-1)}.column-selector-option:hover{background:var(--Gray-Gray-50)}.table-wrapper{overflow-x:auto;width:100%;position:relative}.table-wrapper.has-sticky-actions{width:100%}.table-wrapper::-webkit-scrollbar{height:6px}.table-wrapper::-webkit-scrollbar-track{background:transparent}.table-wrapper::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:3px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--Gray-Gray-400, #858ea6)}.custom-table{width:100%;border-collapse:collapse}.custom-table th,.custom-table td{position:relative;padding:var(--Size-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--Gray-Gray-700)}.custom-table th::after,.custom-table td::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--Gray-Gray-100)}.custom-table th{height:55px;user-select:none}.custom-table th.sortable{cursor:pointer}.custom-table td{height:80px;min-width:100px;font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.headers-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1)}.headers-container.align-left{align-items:flex-start}.headers-container.align-right{align-items:flex-end}.headers{display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:center;gap:4px}.headers span{font-weight:var(--font-weight-bold);color:var(--Gray-Gray-600);font-size:var(--font-size-xs);text-align:center}.headers.align-left span{text-align:left}.headers.align-right span{text-align:right}.order-icons{display:flex;flex-direction:column}.order-icons dropi-icon{height:6px;display:flex}.checkbox-header{width:fit-content;min-width:fit-content;max-width:fit-content;text-align:center;padding:var(--Size-3) !important}.custom-table.has-checkbox td:first-child{width:fit-content;min-width:fit-content;max-width:fit-content;text-align:center;padding:8px !important}.table-row:hover{background-color:var(--Gray-Gray-50);transition:background-color 0.3s ease}.table-row:hover td:last-child{background-color:var(--Gray-Gray-50);transition:background-color 0.3s ease}.table-row.sub-row td:first-child{padding-left:2rem !important}.cell-content{display:inline-block;width:100%;text-align:left}td.actions,th.actions{position:sticky;right:0;z-index:2;background-color:var(--Neutral-White);width:120px;min-width:120px;max-width:120px;text-align:center}td.actions{vertical-align:middle}td.actions>div{display:flex !important;justify-content:center !important;align-items:center !important;width:100%;height:100%}.table-row:hover td.actions{background-color:var(--Gray-Gray-50);transition:background-color 0.3s ease}.actions-header{width:100%;text-align:center;user-select:none}.short-actions{display:flex;gap:var(--Size-2);align-items:center;justify-content:center}.action-icon{cursor:pointer}.action-button{position:relative}.actions-menu{position:absolute;top:0;right:80px;padding:var(--Size-2);border-radius:var(--Border-2);background-color:var(--Neutral-White);box-shadow:var(--Shadow-medium);z-index:10;animation:fadeIn 0.3s ease-in-out forwards}.action-item{padding:var(--Size-2);font-size:var(--font-size-xs);color:var(--Gray-Gray-600);height:45px;width:190px;display:flex;gap:var(--Size-4);align-items:center;justify-content:left;cursor:pointer;border-radius:var(--Border-1)}.action-item:hover{background-color:var(--Gray-Gray-50)}.table-labels{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);white-space:nowrap}.table-labels.multiline{white-space:pre;line-height:1.6}.text-wrap-label{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);white-space:normal;word-break:break-word;overflow-wrap:break-word;line-height:1.5}.date-label{display:inline-flex;flex-direction:column}.date-label span{font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600);white-space:nowrap;font-size:var(--font-size-s)}.flag-container{display:inline-flex;align-items:center;gap:var(--Size-3)}.flag-container span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.text-icon-label{display:inline-flex;flex-wrap:nowrap;gap:var(--Size-2);align-items:center}.text-icon-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.image-label{display:inline-flex;flex-direction:column;justify-content:center}.img-container{display:flex;width:24px;padding-bottom:var(--Size-1);align-items:center}.img-container img{border-radius:60px;height:24px;width:24px;object-fit:cover}.container-cell{display:inline-flex;flex-direction:column}.status-label{display:inline-flex;flex-direction:column;gap:var(--Size-1)}.status-dot{display:flex;gap:var(--Size-2);align-items:center}.status-text{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-700)}.status-description{font-weight:var(--font-weight-regular);font-size:var(--font-size-s);color:var(--Gray-Gray-600)}.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.dot-low{background-color:var(--Success-Success-500)}.dot-medium{background-color:var(--Warning-Warning-500)}.dot-high{background-color:var(--Error-Error-500)}.low-opacity{opacity:0.5}.highlight-column{background:var(--Primary-Primary-50)}.text-link-label{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:var(--Size-1)}.text-link-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.text-link-label a{color:var(--Info-Info-500);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.empty-table{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:400px}.empty-message-container{display:flex;width:420px;padding:var(--Size-4);flex-direction:column;align-items:center;gap:var(--Size-4);text-align:center;color:var(--Gray-Gray-500);font-size:var(--font-size-s)}.pagination{margin-top:var(--Size-4);display:flex;justify-content:space-between;align-items:center}.page-size-selector{display:flex;gap:5px;align-items:baseline}.page-size-selector label{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-700)}.page-size-selector select{width:fit-content;height:29px;border-radius:var(--Border-2);padding:var(--Size-1);border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-500);background:var(--Neutral-White);font-size:var(--font-size-xs);cursor:pointer}.total-results{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-600)}.skeleton{height:14px;background:linear-gradient(90deg, var(--Gray-Gray-100) 25%, var(--Gray-Gray-50) 50%, var(--Gray-Gray-100) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--Border-1)}.skeleton--sm{width:20px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.search-actions{flex-direction:column;align-items:stretch}.column-selector-menu{left:0;right:0;width:100%;max-height:45vh;overflow-y:auto}.pagination{flex-direction:column;align-items:center;gap:var(--Size-3)}td.actions,th.actions{width:60px;min-width:60px}.table-wrapper.has-sticky-actions{width:calc(100% - 60px)}}`;
 
@@ -295,3 +295,6 @@ const DropiTable = class {
 DropiTable.style = dropiTableCss();
 
 export { DropiTable as dropi_table };
+//# sourceMappingURL=dropi-table.entry.esm.js.map
+
+//# sourceMappingURL=dropi-table.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-table.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-table/dropi-table.css?tag=dropi-table&encapsulation=shadow","src/components/dropi-table/dropi-table.tsx"],"sourcesContent":[":host { display: block; width: 100%; min-width: 0; }\n*, *::before, *::after { box-sizing: border-box; }\n\n/* ── Contenedor principal ─────────────────────────────────────────── */\n.table-container {\n  width: 100%;\n  min-width: 0;\n  border-radius: var(--Border-3);\n  padding: 0 var(--Size-4) var(--Size-4) var(--Size-4);\n  background-color: var(--Neutral-White);\n}\n\n/* ── Search / toolbar ─────────────────────────────────────────────── */\n.search-container {\n  margin-block: var(--Size-5);\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-4);\n}\n\n.table-title {\n  padding-block: var(--Size-2);\n  font-size: var(--font-size-m);\n  font-weight: var(--font-weight-bold);\n  color: var(--Gray-Gray-700);\n  margin: 0;\n}\n\n.search-actions {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--Size-3);\n  width: 100%;\n}\n\n.search-actions dropi-input { flex: 1; }\n\n.search-actions.only-filter { justify-content: flex-end; }\n\n.table-tools { display: flex; justify-content: flex-end; }\n\n.column-selector-container { position: relative; }\n\n.column-selector-btn {\n  min-width: 40px;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: 1px solid var(--Gray-Gray-200);\n  border-radius: var(--Border-2);\n  background: var(--Neutral-White);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.column-selector-btn:hover { background: var(--Gray-Gray-50); }\n\n.column-selector-menu {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  width: min(320px, 88vw);\n  border: 1px solid var(--Gray-Gray-200);\n  border-radius: var(--Border-2);\n  background: var(--Neutral-White);\n  box-shadow: var(--Shadow-medium);\n  z-index: 20;\n  padding: var(--Size-1);\n}\n\n.column-selector-footer {\n  border-top: 1px solid var(--Gray-Gray-100);\n  margin-top: var(--Size-1);\n  padding: var(--Size-2) var(--Size-4);\n  display: flex;\n  align-items: center;\n}\n\n.column-selector-all {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--Size-2);\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-s);\n  cursor: pointer;\n  user-select: none;\n}\n\n.column-selector-option {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2);\n  padding: var(--Size-2) var(--Size-3);\n  font-size: var(--font-size-s);\n  color: var(--Gray-Gray-700);\n  cursor: pointer;\n  border-radius: var(--Border-1);\n}\n.column-selector-option:hover { background: var(--Gray-Gray-50); }\n\n/* ── Table wrapper ────────────────────────────────────────────────── */\n.table-wrapper {\n  overflow-x: auto;\n  width: 100%;\n  position: relative;\n}\n\n/* Cuando hay acciones, el wrapper es más angosto igual que el host Angular\n   para que la columna sticky quede siempre visible sin tapar contenido */\n.table-wrapper.has-sticky-actions { width: 100%; }\n\n.table-wrapper::-webkit-scrollbar        { height: 6px; }\n.table-wrapper::-webkit-scrollbar-track  { background: transparent; }\n.table-wrapper::-webkit-scrollbar-thumb  { background: var(--Gray-Gray-200, #c3c9d9); border-radius: 3px; }\n.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--Gray-Gray-400, #858ea6); }\n\n/* ── Table ────────────────────────────────────────────────────────── */\n.custom-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n\n/* th/td shared separator via ::after */\n.custom-table th,\n.custom-table td {\n  position: relative;\n  padding: var(--Size-3);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-bold);\n  color: var(--Gray-Gray-700);\n}\n\n.custom-table th::after,\n.custom-table td::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  background: var(--Gray-Gray-100);\n}\n\n/* th */\n.custom-table th {\n  height: 55px;\n  user-select: none;\n}\n\n.custom-table th.sortable { cursor: pointer; }\n\n/* td */\n.custom-table td {\n  height: 80px;\n  min-width: 100px;\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n}\n\n/* Headers inner */\n.headers-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-1);\n}\n\n.headers-container.align-left  { align-items: flex-start; }\n.headers-container.align-right { align-items: flex-end; }\n\n.headers {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n  gap: 4px;\n}\n\n.headers span {\n  font-weight: var(--font-weight-bold);\n  color: var(--Gray-Gray-600);\n  font-size: var(--font-size-xs);\n  text-align: center;\n}\n\n.headers.align-left  span { text-align: left; }\n.headers.align-right span { text-align: right; }\n\n.order-icons {\n  display: flex;\n  flex-direction: column;\n}\n\n.order-icons dropi-icon {\n  height: 6px;\n  display: flex;\n}\n\n/* Checkbox column */\n.checkbox-header {\n  width: fit-content;\n  min-width: fit-content;\n  max-width: fit-content;\n  text-align: center;\n  padding: var(--Size-3) !important;\n}\n\n.custom-table.has-checkbox td:first-child {\n  width: fit-content;\n  min-width: fit-content;\n  max-width: fit-content;\n  text-align: center;\n  padding: 8px !important;\n}\n\n/* Row */\n.table-row:hover { background-color: var(--Gray-Gray-50); transition: background-color 0.3s ease; }\n.table-row:hover td:last-child { background-color: var(--Gray-Gray-50); transition: background-color 0.3s ease; }\n.table-row.sub-row td:first-child { padding-left: 2rem !important; }\n\n/* Cell content */\n.cell-content {\n  display: inline-block;\n  width: 100%;\n  text-align: left;\n}\n\n/* ── Actions column (sticky) ─────────────────────────────────── */\ntd.actions,\nth.actions {\n  position: sticky;\n  right: 0;\n  z-index: 2;\n  background-color: var(--Neutral-White);\n  width: 120px;\n  min-width: 120px;\n  max-width: 120px;\n  text-align: center;\n}\n\ntd.actions {\n  vertical-align: middle;\n}\n\n/* Forzar que el interior de la celda de acciones se centre siempre */\ntd.actions > div {\n  display: flex !important;\n  justify-content: center !important;\n  align-items: center !important;\n  width: 100%;\n  height: 100%;\n}\n\n.table-row:hover td.actions {\n  background-color: var(--Gray-Gray-50);\n  transition: background-color 0.3s ease;\n}\n\n.actions-header {\n  width: 100%;\n  text-align: center;\n  user-select: none;\n}\n\n.short-actions {\n  display: flex;\n  gap: var(--Size-2);\n  align-items: center;\n  justify-content: center;\n}\n\n.action-icon { cursor: pointer; }\n\n.action-button { position: relative; }\n\n.actions-menu {\n  position: absolute;\n  top: 0;\n  right: 80px;\n  padding: var(--Size-2);\n  border-radius: var(--Border-2);\n  background-color: var(--Neutral-White);\n  box-shadow: var(--Shadow-medium);\n  z-index: 10;\n  animation: fadeIn 0.3s ease-in-out forwards;\n}\n\n.action-item {\n  padding: var(--Size-2);\n  font-size: var(--font-size-xs);\n  color: var(--Gray-Gray-600);\n  height: 45px;\n  width: 190px;\n  display: flex;\n  gap: var(--Size-4);\n  align-items: center;\n  justify-content: left;\n  cursor: pointer;\n  border-radius: var(--Border-1);\n}\n.action-item:hover { background-color: var(--Gray-Gray-50); }\n\n/* ── Cell types ───────────────────────────────────────────────────── */\n.table-labels {\n  color: var(--Gray-Gray-600);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n  white-space: nowrap;\n}\n\n.table-labels.multiline {\n  white-space: pre;\n  line-height: 1.6;\n}\n\n.text-wrap-label {\n  color: var(--Gray-Gray-600);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n  white-space: normal;\n  word-break: break-word;\n  overflow-wrap: break-word;\n  line-height: 1.5;\n}\n\n.date-label {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.date-label span {\n  font-weight: var(--font-weight-regular);\n  color: var(--Gray-Gray-600);\n  white-space: nowrap;\n  font-size: var(--font-size-s);\n}\n\n.flag-container {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--Size-3);\n}\n\n.flag-container span {\n  color: var(--Gray-Gray-600);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n}\n\n.text-icon-label {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  gap: var(--Size-2);\n  align-items: center;\n}\n\n.text-icon-label span {\n  color: var(--Gray-Gray-600);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n}\n\n.image-label {\n  display: inline-flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.img-container {\n  display: flex;\n  width: 24px;\n  padding-bottom: var(--Size-1);\n  align-items: center;\n}\n\n.img-container img {\n  border-radius: 60px;\n  height: 24px;\n  width: 24px;\n  object-fit: cover;\n}\n\n.container-cell {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.status-label {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--Size-1);\n}\n\n.status-dot {\n  display: flex;\n  gap: var(--Size-2);\n  align-items: center;\n}\n\n.status-text {\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-xs);\n  color: var(--Gray-Gray-700);\n}\n\n.status-description {\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n  color: var(--Gray-Gray-600);\n}\n\n.dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.dot-low    { background-color: var(--Success-Success-500); }\n.dot-medium { background-color: var(--Warning-Warning-500); }\n.dot-high   { background-color: var(--Error-Error-500); }\n\n.low-opacity    { opacity: 0.5; }\n.highlight-column { background: var(--Primary-Primary-50); }\n\n.text-link-label {\n  display: flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  gap: var(--Size-1);\n}\n\n.text-link-label span {\n  color: var(--Gray-Gray-600);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n}\n\n.text-link-label a {\n  color: var(--Info-Info-500);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n}\n\n/* ── Empty state ──────────────────────────────────────────────────── */\n.empty-table {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  min-height: 400px;\n}\n\n.empty-message-container {\n  display: flex;\n  width: 420px;\n  padding: var(--Size-4);\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-4);\n  text-align: center;\n  color: var(--Gray-Gray-500);\n  font-size: var(--font-size-s);\n}\n\n/* ── Pagination ───────────────────────────────────────────────────── */\n.pagination {\n  margin-top: var(--Size-4);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.page-size-selector {\n  display: flex;\n  gap: 5px;\n  align-items: baseline;\n}\n\n.page-size-selector label {\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-xs);\n  color: var(--Gray-Gray-700);\n}\n\n.page-size-selector select {\n  width: fit-content;\n  height: 29px;\n  border-radius: var(--Border-2);\n  padding: var(--Size-1);\n  border: 1px solid var(--Gray-Gray-200);\n  color: var(--Gray-Gray-500);\n  background: var(--Neutral-White);\n  font-size: var(--font-size-xs);\n  cursor: pointer;\n}\n\n.total-results {\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-xs);\n  color: var(--Gray-Gray-600);\n}\n\n/* ── Skeleton ─────────────────────────────────────────────────────── */\n.skeleton {\n  height: 14px;\n  background: linear-gradient(90deg, var(--Gray-Gray-100) 25%, var(--Gray-Gray-50) 50%, var(--Gray-Gray-100) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.4s infinite;\n  border-radius: var(--Border-1);\n}\n.skeleton--sm { width: 20px; }\n\n@keyframes shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(-10px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n/* ── Responsive ───────────────────────────────────────────────────── */\n@media (max-width: 768px) {\n  .search-actions { flex-direction: column; align-items: stretch; }\n  .column-selector-menu { left: 0; right: 0; width: 100%; max-height: 45vh; overflow-y: auto; }\n  .pagination { flex-direction: column; align-items: center; gap: var(--Size-3); }\n\n  td.actions,\n  th.actions {\n    width: 60px;\n    min-width: 60px;\n  }\n\n  .table-wrapper.has-sticky-actions { width: calc(100% - 60px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface TableColumn {\n  key: string;\n  label: string;\n  sortable?: boolean;\n  align?: 'left' | 'center' | 'right';\n  highlightColumn?: boolean;\n  disabledColumn?: boolean;\n  minWidth?: string;\n  maxWidth?: string;\n}\n\nexport interface TableRow {\n  [key: string]: any;\n}\n\nexport type SortDir = 'asc' | 'desc' | null;\n\n/**\n * @component dropi-table\n * Data table with sortable columns, row selection, search, column selector and pagination.\n */\n@Component({\n  tag: 'dropi-table',\n  styleUrl: 'dropi-table.css',\n  shadow: true,\n})\nexport class DropiTable {\n  /** Column definitions */\n  @Prop() columns: TableColumn[] | string = [];\n  /** Row data */\n  @Prop() rows: TableRow[] | string = [];\n  /** Show checkbox column */\n  @Prop() showCheckbox: boolean = false;\n  /** Show loading skeleton */\n  @Prop() loading: boolean = false;\n  /** Empty state message */\n  @Prop() emptyMessage: string = 'No hay datos disponibles';\n  /** Table title */\n  @Prop() title: string = '';\n  /** Show search input */\n  @Prop() showSearch: boolean = false;\n  /** Show column selector button */\n  @Prop() showColumnSelector: boolean = false;\n  /** Show paginator */\n  @Prop() showPaginator: boolean = false;\n  /** Page sizes options */\n  @Prop() pageSizes: number[] | string = [5, 10, 25, 50];\n  /** Current page (1-based) */\n  @Prop({ mutable: true }) currentPage: number = 1;\n  /** Total pages */\n  @Prop() totalPages: number = 1;\n  /** Show row actions (3-dot menu or inline icons) */\n  @Prop() rowActions: any[] | string = [];\n\n  // ── Angular-parity props ─────────────────────────────────────\n  /**\n   * Column definitions — matches Angular `headers: DropiTableColumn[]`.\n   * Alias of `columns`; when provided, takes precedence.\n   */\n  @Prop() headers: any[] | string = [];\n  /**\n   * Row data — matches Angular `data: DropiTableRow[]`.\n   * Alias of `rows`; when provided, takes precedence.\n   */\n  @Prop() data: any[] | string = [];\n  /** Pre-selected row ids (matches Angular `selectedRowIds`) */\n  @Prop() selectedRowIds: any[] | null = null;\n  /** Child / expanded rows data (matches Angular `childData`) */\n  @Prop() childData: any[] | string = [];\n  /** Visible child rows (matches Angular `visibleRowsChildrens`) */\n  @Prop() visibleRowsChildrens: any[] | string = [];\n  /** Table-level configuration object (matches Angular `dropiTableConfiguration`) */\n  @Prop() dropiTableConfiguration: any = null;\n  /** Backend pagination / filter params (matches Angular `dropiTableBackendParams`) */\n  @Prop() dropiTableBackendParams: any = null;\n  /** Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`) */\n  @Prop() isCursorPagination: boolean = false;\n\n  @State() private parsedColumns: TableColumn[] = [];\n  @State() private parsedRows: TableRow[] = [];\n  @State() private parsedPageSizes: number[] = [5, 10, 25, 50];\n  @State() private parsedRowActions: any[] = [];\n  @State() private sortKey: string = '';\n  @State() private sortDir: SortDir = null;\n  @State() private sortAsc: boolean = true;\n  @State() private selectedKeys: Set<number> = new Set();\n  @State() private searchTerm: string = '';\n  @State() private pageSize: number = 5;\n  @State() private showColumnMenu: boolean = false;\n  @State() private hiddenColumns: Set<string> = new Set();\n  @State() private openActionRow: number = -1;\n\n  @Event() dropiSort: EventEmitter<{ key: string; dir: SortDir }>;\n  @Event() dropiSelection: EventEmitter<number[]>;\n  @Event() dropiRowClick: EventEmitter<{ row: TableRow; index: number }>;\n  @Event() dropiSearch: EventEmitter<string>;\n  @Event() dropiPageChange: EventEmitter<number>;\n  @Event() dropiPageSizeChange: EventEmitter<number>;\n  @Event() dropiAction: EventEmitter<{ row: TableRow; action: any }>;\n\n  // ── Angular-parity events ────────────────────────────────────\n  /** Matches Angular `rowsSelected` */\n  @Event() rowsSelected: EventEmitter<any[]>;\n  /** Matches Angular `actionClicked` */\n  @Event() actionClicked: EventEmitter<{ row: any; action: any }>;\n  /** Matches Angular `onPageChange` */\n  @Event() onPageChange: EventEmitter<number>;\n  /** Matches Angular `onSizeChange` */\n  @Event() onSizeChange: EventEmitter<number>;\n  /** Matches Angular `onSortChange` */\n  @Event() onSortChange: EventEmitter<any>;\n  /** Matches Angular `onSearchChange` */\n  @Event() onSearchChange: EventEmitter<string>;\n  /** Matches Angular `expandChildren` */\n  @Event() expandChildren: EventEmitter<{ row: any }>;\n\n  @Watch('columns')\n  columnsChanged(val: TableColumn[] | string) {\n    this.parsedColumns = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  @Watch('rows')\n  rowsChanged(val: TableRow[] | string) {\n    this.parsedRows = typeof val === 'string' ? JSON.parse(val) : (val || []);\n    this.selectedKeys = new Set();\n  }\n\n  @Watch('pageSizes')\n  pageSizesChanged(val: number[] | string) {\n    this.parsedPageSizes = typeof val === 'string' ? JSON.parse(val) : (val || [5, 10, 25, 50]);\n    this.pageSize = this.parsedPageSizes[0] ?? 5;\n  }\n\n  @Watch('rowActions')\n  rowActionsChanged(val: any[] | string) {\n    this.parsedRowActions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  @Watch('headers')\n  headersChanged(val: any[] | string) {\n    // `headers` is an alias for `columns`\n    const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);\n    if (parsed.length > 0) this.parsedColumns = parsed;\n  }\n\n  @Watch('data')\n  dataChanged(val: any[] | string) {\n    // `data` is an alias for `rows`\n    const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);\n    if (parsed.length > 0) { this.parsedRows = parsed; this.selectedKeys = new Set(); }\n  }\n\n  componentWillLoad() {\n    // SSR hydration guard: if no data props provided, preserve server-rendered DOM\n    if (this.data == null && this.rows == null && this.headers == null && this.columns == null) return;\n\n    // headers/data take precedence over columns/rows when provided\n    const headersSrc = (Array.isArray(this.headers) ? this.headers : []).length\n      ? this.headers : this.columns;\n    const dataSrc = (Array.isArray(this.data) ? this.data : []).length\n      ? this.data : this.rows;\n    this.columnsChanged(headersSrc);\n    this.rowsChanged(dataSrc);\n    this.pageSizesChanged(this.pageSizes);\n    this.rowActionsChanged(this.rowActions);\n  }\n\n  private get visibleColumns(): TableColumn[] {\n    const hidden = this.hiddenColumns ?? new Set<string>();\n    return (this.parsedColumns ?? []).filter(c => !hidden.has(c.key));\n  }\n\n  private get filteredRows(): TableRow[] {\n    if (!this.searchTerm) return this.parsedRows;\n    const q = this.searchTerm.toLowerCase();\n    return this.parsedRows.filter(row =>\n      Object.values(row).some(v => String(v ?? '').toLowerCase().includes(q))\n    );\n  }\n\n  private get sortedRows(): TableRow[] {\n    const rows = this.filteredRows;\n    if (!this.sortKey || !this.sortDir) return rows;\n    const key = this.sortKey;\n    const dir = this.sortDir === 'asc' ? 1 : -1;\n    return [...rows].sort((a, b) => {\n      const av = a[key] ?? '';\n      const bv = b[key] ?? '';\n      if (av < bv) return -dir;\n      if (av > bv) return dir;\n      return 0;\n    });\n  }\n\n  private get pagedRows(): TableRow[] {\n    if (!this.showPaginator) return this.sortedRows;\n    const start = (this.currentPage - 1) * this.pageSize;\n    return this.sortedRows.slice(start, start + this.pageSize);\n  }\n\n  private handleSort(col: TableColumn) {\n    if (!col.sortable) return;\n    if (this.sortKey === col.key) {\n      this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';\n      this.sortAsc = this.sortDir !== 'desc';\n      if (this.sortDir === null) this.sortKey = '';\n    } else {\n      this.sortKey = col.key;\n      this.sortDir = 'asc';\n      this.sortAsc = true;\n    }\n    this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });\n    this.onSortChange.emit({ key: this.sortKey, dir: this.sortDir });\n  }\n\n  private toggleRow(idx: number) {\n    const next = new Set(this.selectedKeys);\n    if (next.has(idx)) next.delete(idx);\n    else next.add(idx);\n    this.selectedKeys = next;\n    const selected = Array.from(next);\n    this.dropiSelection.emit(selected);\n    this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));\n  }\n\n  private toggleAll(checked: boolean) {\n    this.selectedKeys = checked ? new Set(this.pagedRows.map((_, i) => i)) : new Set();\n    const selected = Array.from(this.selectedKeys);\n    this.dropiSelection.emit(selected);\n    this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));\n  }\n\n  private renderCellValue(value: any) {\n    if (value === null || value === undefined) return '—';\n    if (typeof value === 'object' && value.type) {\n      switch (value.type) {\n        case 'tag':\n          return <dropi-tag type=\"secondary\" state={value.typeTag} text={value.value} />;\n        case 'date':\n          return (\n            <div class=\"date-label\">\n              <span>{new Date(value.value).toLocaleDateString('es-CO')}</span>\n              {!value.hideTime && <span>{new Date(value.value).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' })}</span>}\n            </div>\n          );\n        case 'country':\n          return (\n            <div class=\"flag-container\">\n              {value.flag && <dropi-country-flags width=\"24\" height=\"24\" country={value.flag} style={{ display: 'inline-flex' }} />}\n              <span>{value.value}</span>\n            </div>\n          );\n        case 'textIcon':\n          return (\n            <div class=\"text-icon-label\">\n              <dropi-icon name={value.icon} width=\"24px\" height=\"24px\" color={value.iconColor || 'Gray-Gray-500'} />\n              {value.value && <span>{value.value}</span>}\n            </div>\n          );\n        case 'status':\n          return (\n            <div class=\"status-label\">\n              <div class=\"status-dot\">\n                <div class={`dot dot-${(value.status || '').toLowerCase()}`} />\n                <span class=\"status-text\">{value.status}</span>\n              </div>\n              {value.value && <span class=\"status-description\">{value.value}</span>}\n            </div>\n          );\n        case 'image':\n          return (\n            <div class=\"image-label\">\n              <div class=\"img-container\"><img src={value.imageUrl} alt={value.value} /></div>\n              <span>{value.value}</span>\n            </div>\n          );\n        case 'textWrap':\n          return <div class=\"text-wrap-label\" style={{ maxWidth: value.maxWidth || '220px' }}>{value.value}</div>;\n        default:\n          return <span class=\"table-labels\">{String(value.value ?? '—')}</span>;\n      }\n    }\n    return <span class=\"table-labels\">{String(value)}</span>;\n  }\n\n  render() {\n    // SSR hydration: if parsedRows not yet initialized, preserve server-rendered shadow DOM\n    if (this.parsedRows === undefined) return null;\n\n    const rows = this.pagedRows;\n    const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;\n    const hasActions = this.parsedRowActions.length > 0;\n    const cols = this.visibleColumns;\n\n    return (\n      <div class=\"table-container\">\n\n        {/* ── Search / toolbar ── */}\n        {(this.showSearch || this.showColumnSelector || this.title) && (\n          <div class=\"search-container\">\n            {this.title && <h3 class=\"table-title\">{this.title}</h3>}\n            <div class={`search-actions${this.showSearch ? '' : ' only-filter'}`}>\n              {this.showSearch && (\n                <dropi-input\n                  placeholder=\"Buscar\"\n                  value={this.searchTerm}\n                  onOnInput={(e: CustomEvent) => {\n                    this.searchTerm = e.detail;\n                    this.dropiSearch.emit(e.detail);\n                    this.onSearchChange.emit(e.detail);\n                  }}\n                />\n              )}\n              {this.showColumnSelector && (\n                <div class=\"table-tools\">\n                  <div class=\"column-selector-container\">\n                    <button class=\"column-selector-btn\" onClick={() => this.showColumnMenu = !this.showColumnMenu}>\n                      <dropi-icon name=\"list-table\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-500\" />\n                    </button>\n                    {this.showColumnMenu && (\n                      <div class=\"column-selector-menu\">\n                        {this.parsedColumns.map(col => (\n                          <div class=\"column-selector-option\" onClick={() => {\n                            const next = new Set(this.hiddenColumns);\n                            if (next.has(col.key)) next.delete(col.key); else next.add(col.key);\n                            this.hiddenColumns = next;\n                          }}>\n                            <dropi-checkbox checked={!this.hiddenColumns.has(col.key)} />\n                            <span>{col.label}</span>\n                          </div>\n                        ))}\n                        <div class=\"column-selector-footer\">\n                          <div class=\"column-selector-all\" onClick={() => {\n                            this.hiddenColumns = this.hiddenColumns.size === 0\n                              ? new Set(this.parsedColumns.map(c => c.key))\n                              : new Set();\n                          }}>\n                            <dropi-checkbox checked={this.hiddenColumns.size === 0} />\n                            <span>Mostrar / Ocultar todo</span>\n                          </div>\n                        </div>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {/* ── Table wrapper ── */}\n        <div class={`table-wrapper${hasActions ? ' has-sticky-actions' : ''}`}>\n          <table class={`custom-table${this.showCheckbox ? ' has-checkbox' : ''}`}>\n            <thead>\n              <tr>\n                {this.showCheckbox && (\n                  <th class=\"checkbox-header\">\n                    <dropi-checkbox checked={allSelected} onOnChange={(e: CustomEvent) => this.toggleAll(e.detail)} />\n                  </th>\n                )}\n                {cols.map(col => (\n                  <th\n                    class={{ sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }}\n                    style={{ textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }}\n                    onClick={() => this.handleSort(col)}\n                  >\n                    <div class={`headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}`}>\n                      <div class={`headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}`}>\n                        <span>{col.label}</span>\n                        {col.sortable && (\n                          <div class=\"order-icons\">\n                            <dropi-icon name=\"Caret-up\" width=\"12px\" height=\"12px\" color={this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'} />\n                            <dropi-icon name=\"Caret-down\" width=\"12px\" height=\"12px\" color={!this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'} />\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                  </th>\n                ))}\n                {hasActions && <th class=\"actions-header actions\">Acciones</th>}\n              </tr>\n            </thead>\n\n            <tbody>\n              {this.loading ? (\n                Array.from({ length: 5 }).map(() => (\n                  <tr class=\"table-row\">\n                    {this.showCheckbox && <td><div class=\"skeleton skeleton--sm\" /></td>}\n                    {cols.map(() => <td><div class=\"skeleton\" /></td>)}\n                    {hasActions && <td />}\n                  </tr>\n                ))\n              ) : rows.length === 0 ? (\n                <tr>\n                  <td colSpan={cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0)}>\n                    <div class=\"empty-table\">\n                      <div class=\"empty-message-container\">{this.emptyMessage}</div>\n                    </div>\n                  </td>\n                </tr>\n              ) : (\n                rows.map((row, i) => (\n                  <tr class=\"table-row\" onClick={() => this.dropiRowClick.emit({ row, index: i })}>\n                    {this.showCheckbox && (\n                      <td onClick={(e) => e.stopPropagation()}>\n                        <dropi-checkbox checked={this.selectedKeys.has(i)} onOnChange={() => this.toggleRow(i)} />\n                      </td>\n                    )}\n                    {cols.map(col => (\n                      <td\n                        class={{ 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }}\n                        style={{ minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined }}\n                      >\n                        <div class=\"cell-content\" style={{ textAlign: col.align || 'center' }}>\n                          {this.renderCellValue(row[col.key])}\n                        </div>\n                      </td>\n                    ))}\n                    {hasActions && (\n                      <td class=\"action-button actions\" onClick={(e) => e.stopPropagation()}>\n                        {this.parsedRowActions.length > 3 ? (\n                          <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n                            <dropi-icon\n                              class=\"action-icon\"\n                              name=\"Menu-dots-vertical\"\n                              width=\"24px\" height=\"24px\"\n                              color=\"Gray-Gray-500\"\n                              onClick={() => this.openActionRow = this.openActionRow === i ? -1 : i}\n                            />\n                            {this.openActionRow === i && (\n                              <div class=\"actions-menu\">\n                                {this.parsedRowActions.map(action => (\n                                  <div class=\"action-item\" onClick={() => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); }}>\n                                    <dropi-icon name={action.icon} width=\"20px\" height=\"20px\" color={action.iconColor || 'Gray-Gray-500'} />\n                                    {action.label}\n                                  </div>\n                                ))}\n                              </div>\n                            )}\n                          </div>\n                        ) : (\n                          <div class=\"short-actions\">\n                            {this.parsedRowActions.map(action => (\n                              <dropi-icon\n                                class=\"action-icon\"\n                                name={action.icon}\n                                width=\"24px\" height=\"24px\"\n                                color={action.iconColor || 'Gray-Gray-500'}\n                                onClick={() => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); }}\n                              />\n                            ))}\n                          </div>\n                        )}\n                      </td>\n                    )}\n                  </tr>\n                ))\n              )}\n            </tbody>\n          </table>\n        </div>\n\n        {/* ── Empty + Paginator ── */}\n        {this.showPaginator && (\n          <div class=\"pagination\">\n            <div class=\"page-size-selector\">\n              <label>Mostrar</label>\n              <select onChange={(e: any) => {\n                this.pageSize = Number(e.target.value);\n                this.currentPage = 1;\n                this.dropiPageSizeChange.emit(this.pageSize);\n                this.onSizeChange.emit(this.pageSize);\n              }}>\n                {this.parsedPageSizes.map(s => (\n                  <option value={s} selected={this.pageSize === s}>{s}</option>\n                ))}\n              </select>\n            </div>\n            <dropi-paginator\n              totalPages={this.totalPages}\n              currentPage={this.currentPage}\n              onPageChange={(e: CustomEvent<number>) => {\n                this.currentPage = e.detail;\n                this.dropiPageChange.emit(e.detail);\n                this.onPageChange.emit(e.detail);\n              }}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 
 const dropiTabsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White, #ffffff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-s,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:var(--font-weight-light);color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background-color:var(--Primary-Primary-500, #F49A3D);color:var(--Neutral-White)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}`;
 
@@ -47,3 +47,6 @@ const DropiTabs = class {
 DropiTabs.style = dropiTabsCss();
 
 export { DropiTabs as dropi_tabs };
+//# sourceMappingURL=dropi-tabs.entry.esm.js.map
+
+//# sourceMappingURL=dropi-tabs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-tabs.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,gsDAAgsD,CAAC;;MC8BhtD,SAAS,GAAA,MAAA;;;;;;IAEZ,aAAa,GAAuB,EAAE;;IAEN,SAAS,GAAoB,CAAC;;IAE9D,QAAQ,GAAY,KAAK;;IAEzB,UAAU,GAAY,KAAK;;AAG1B,IAAA,cAAc;IAEN,UAAU,GAAc,EAAE;AAG3C,IAAA,WAAW,CAAC,GAAuB,EAAA;QACjC,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC;;IAG3E,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG9B,IAAA,WAAW,CAAC,GAAY,EAAA;AAC9B,QAAA,IAAI,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU;YAAE;AACrC,QAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,EAAE;AACvB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG/B,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,EACvC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,IAAG;YACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS;AAC1C,YAAA,QACE,WACE,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,MAAM,CAAC,QAAQ,CAAC,EAC/B,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,kBAAkB,EAAE,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,oBAAoB,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,EAChH,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAA,EAEpC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,WAAW,IAAE,GAAG,CAAC,KAAK,CAAQ,EACzC,GAAG,CAAC,OAAO,KAAK,SAAS,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,KAChD,YAAM,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,qBAAqB,EAAE,QAAQ,EAAE,EAAA,EAClE,GAAG,CAAC,OAAO,CACP,CACR,CACI,EACN,IAAI,CAAC,QAAQ,KACZ,GAAG,CAAC;kBACA,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,qBAAqB,EAAA;AACxF,kBAAE,YAAM,KAAK,EAAC,gBAAgB,EAAA,CAAG,CACpC,CACG;SAET,CAAC,CACE;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-tabs/dropi-tabs.css?tag=dropi-tabs&encapsulation=shadow","src/components/dropi-tabs/dropi-tabs.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.tabs-container {\n  display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; height: 52px;\n  scrollbar-width: none;\n}\n.tabs-container::-webkit-scrollbar { width: 0; height: 0; }\n\n.tab-item {\n  padding: var(--Size-4,16px) var(--Size-5,20px);\n  background: var(--Neutral-White, #ffffff);\n  border-bottom: 2px solid var(--Gray-Gray-100,#e6eaf2);\n  cursor: pointer; display: flex; gap: 16px; align-items: center;\n  white-space: nowrap; flex-shrink: 0;\n  transition: border-color 0.15s ease; user-select: none;\n}\n.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active) { border-color: var(--Gray-Gray-300,#a3abbf); }\n.tab-item--active { border-bottom: 2px solid var(--Primary-Primary-500,#f49a3d); }\n.tab-item--disabled { background: rgba(223,228,237,0.22); cursor: not-allowed; opacity: 0.7; pointer-events: none; }\n\n.tab-label-row { display: flex; align-items: center; gap: 8px; }\n.tab-label { font-size: var(--font-size-s,14px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-400,#858ea6); line-height: 20px; }\n.tab-item--active .tab-label { color: var(--Gray-Gray-600,#475066); }\n.tab-item--disabled .tab-label { font-weight: var(--font-weight-light); color: var(--Gray-Gray-300,#a3abbf); }\n\n.tab-counter {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px;\n  font-size: var(--font-size-xxs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n  background: var(--Gray-Gray-100,#e6eaf2); color: var(--Gray-Gray-500,#69738c);\n}\n.tab-counter--active { \n  background-color: var(--Primary-Primary-500, #F49A3D);\n  color: var(--Neutral-White);\n}\n\n.tab-status-dot {\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--Primary-Primary-500, #f49a3d);\n  flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, h } from '@stencil/core';\n\nexport interface TabItem {\n  /** Unique identifier */\n  id: string | number;\n  /** Display label */\n  label: string;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n  /** Optional numeric counter badge */\n  counter?: number;\n  /** Whether to show completed checkmark (requires showIcon) */\n  completed?: boolean;\n}\n\n/**\n * @component dropi-tabs\n * Horizontal tab navigation with optional counter badges and completed state icons.\n *\n * @example\n * <dropi-tabs\n *   tabs='[{\"id\":1,\"label\":\"Activos\"},{\"id\":2,\"label\":\"Histórico\",\"counter\":5}]'\n *   active-tab=\"1\"\n * />\n */\n@Component({\n  tag: 'dropi-tabs',\n  styleUrl: 'dropi-tabs.css',\n  shadow: true,\n})\nexport class DropiTabs {\n  /** Array of TabItem or JSON string (matches Angular 'configuration') */\n  @Prop() configuration: TabItem[] | string = [];\n  /** Id of the active tab */\n  @Prop({ mutable: true, reflect: true }) activeTab: string | number = 0;\n  /** Whether to show a check/pending icon per tab */\n  @Prop() showIcon: boolean = false;\n  /** Stop tab action programmatically */\n  @Prop() stopAction: boolean = false;\n\n  /** Emitted on tab click. e.detail = TabItem */\n  @Event() onIndexChanged: EventEmitter<TabItem>;\n\n  @State() private parsedTabs: TabItem[] = [];\n\n  @Watch('configuration')\n  tabsChanged(val: TabItem[] | string) {\n    this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);\n  }\n\n  componentWillLoad() {\n    this.tabsChanged(this.configuration);\n  }\n\n  private handleClick(tab: TabItem) {\n    if (tab.disabled || this.stopAction) return;\n    this.activeTab = tab.id;\n    this.onIndexChanged.emit(tab);\n  }\n\n  render() {\n    return (\n      <div class=\"tabs-container\" role=\"tablist\">\n        {this.parsedTabs.map(tab => {\n          const isActive = tab.id === this.activeTab;\n          return (\n            <div\n              role=\"tab\"\n              aria-selected={String(isActive)}\n              class={{ 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }}\n              onClick={() => this.handleClick(tab)}\n            >\n              <span class=\"tab-label-row\">\n                <span class=\"tab-label\">{tab.label}</span>\n                {tab.counter !== undefined && tab.counter !== null && (\n                  <span class={{ 'tab-counter': true, 'tab-counter--active': isActive }}>\n                    {tab.counter}\n                  </span>\n                )}\n              </span>\n              {this.showIcon && (\n                tab.completed\n                  ? <dropi-icon name=\"Check-circle\" width=\"12px\" height=\"12px\" color=\"Success-Success-500\" />\n                  : <span class=\"tab-status-dot\" />\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-tag-type-product.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
 
 const dropiTagTypeProductCss = () => `:host{display:inline-block}.type-variation{border-radius:4px;background:var(--Warning-Warning-500);padding:2px 6px;font-size:var(--font-size-xs);color:var(--Neutral-White);text-transform:capitalize;font-weight:var(--font-weight-regular);width:fit-content}`;
 
@@ -15,3 +15,6 @@ const DropiTagTypeProduct = class {
 DropiTagTypeProduct.style = dropiTagTypeProductCss();
 
 export { DropiTagTypeProduct as dropi_tag_type_product };
+//# sourceMappingURL=dropi-tag-type-product.entry.esm.js.map
+
+//# sourceMappingURL=dropi-tag-type-product.entry.js.map

package/dist/dropi-ui/dropi-tag-type-product.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-tag-type-product.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,+PAA+P,CAAC;;MCWzR,mBAAmB,GAAA,MAAA;;;;;IAEtB,KAAK,GAAW,UAAU;IAElC,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;;;;;;;","names":[],"sources":["src/components/dropi-tag-type-product/dropi-tag-type-product.css?tag=dropi-tag-type-product&encapsulation=shadow","src/components/dropi-tag-type-product/dropi-tag-type-product.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.type-variation {\n  border-radius: 4px;\n  background: var(--Warning-Warning-500);\n  padding: 2px 6px;\n  font-size: var(--font-size-xs);\n  color: var(--Neutral-White);\n  text-transform: capitalize;\n  font-weight: var(--font-weight-regular);\n  width: fit-content;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-tag-type-product\n * Tag badge showing the product variation type.\n */\n@Component({\n  tag: 'dropi-tag-type-product',\n  styleUrl: 'dropi-tag-type-product.css',\n  shadow: true,\n})\nexport class DropiTagTypeProduct {\n  /** Label text. Default: VARIABLE */\n  @Prop() label: string = 'VARIABLE';\n\n  render() {\n    return <div class=\"type-variation\">{this.label}</div>;\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,69 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
+
+const DropiTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** primary (filled) | secondary (soft) */
+    type = 'primary';
+    /** Color state of the tag */
+    state = 'default';
+    /** Whether to show the icon */
+    showIcon = false;
+    /** Icon name from the sprite */
+    icon = '';
+    /** Label text */
+    text = '';
+    colorMap = {
+        default: 'Primary-Primary',
+        success: 'Success-Success',
+        info: 'Info-Info',
+        warning: 'Warning-Warning',
+        error: 'Error-Error',
+        legacy: 'Gray-Gray',
+    };
+    propsChanged() { }
+    get bgColor() {
+        const base = this.colorMap[this.state];
+        if (this.type === 'primary')
+            return `var(--${base}-500)`;
+        const shade = this.state === 'default' || this.state === 'legacy' ? '-100' : '-50';
+        return `var(--${base}${shade})`;
+    }
+    get textColor() {
+        const base = this.colorMap[this.state];
+        if (this.type === 'primary')
+            return `var(--Neutral-White)`;
+        const shade = this.state === 'default' ? '-500' : '-700';
+        return `var(--${base}${shade})`;
+    }
+    get iconColor() {
+        if (this.type === 'primary')
+            return 'Neutral-White';
+        const base = this.colorMap[this.state];
+        const shade = this.state === 'default' ? '-500' : '-700';
+        return `${base}${shade}`;
+    }
+    get hasContent() {
+        return typeof this.text === 'string' && this.text.trim().length > 0;
+    }
+    render() {
+        return (h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'aab0330382fe0690177edcb364ab043459b9a316', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'be38207ca7668b6b4976d5f3f2f506c380ee0491' }, this.text))));
+    }
+    static get watchers() { return {
+        "type": [{
+                "propsChanged": 0
+            }],
+        "state": [{
+                "propsChanged": 0
+            }]
+    }; }
+};
+DropiTag.style = dropiTagCss();
+
+export { DropiTag as dropi_tag };
+//# sourceMappingURL=dropi-tag.entry.esm.js.map
+
+//# sourceMappingURL=dropi-tag.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-tag.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,2jBAA2jB,CAAC;;MCc1kB,QAAQ,GAAA,MAAA;;;;;IAEM,IAAI,GAAY,SAAS;;IAEzB,KAAK,GAAa,SAAS;;IAE5C,QAAQ,GAAY,KAAK;;IAER,IAAI,GAAW,EAAE;;IAEjB,IAAI,GAAW,EAAE;AAEzB,IAAA,QAAQ,GAA6B;AACpD,QAAA,OAAO,EAAE,iBAAiB;AAC1B,QAAA,OAAO,EAAE,iBAAiB;AAC1B,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,OAAO,EAAE,iBAAiB;AAC1B,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,MAAM,EAAE,WAAW;KACpB;AAGD,IAAA,YAAY;AAEZ,IAAA,IAAY,OAAO,GAAA;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO,CAAA,MAAA,EAAS,IAAI,CAAA,KAAA,CAAO;QACxD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,KAAK;AAClF,QAAA,OAAO,CAAA,MAAA,EAAS,IAAI,CAAA,EAAG,KAAK,GAAG;;AAGjC,IAAA,IAAY,SAAS,GAAA;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;AAAE,YAAA,OAAO,sBAAsB;AAC1D,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM;AACxD,QAAA,OAAO,CAAA,MAAA,EAAS,IAAI,CAAA,EAAG,KAAK,GAAG;;AAGjC,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;AAAE,YAAA,OAAO,eAAe;QACnD,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACtC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM;AACxD,QAAA,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,KAAK,EAAE;;AAG1B,IAAA,IAAY,UAAU,GAAA;AACpB,QAAA,OAAO,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;;IAGrE,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EACrE,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAA,EAE9D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KACzB,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,IAAI,CAAC,SAAS,GACrB,CACH,EACA,IAAI,CAAC,UAAU,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACxC,CACF;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-tag/dropi-tag.css?tag=dropi-tag&encapsulation=shadow","src/components/dropi-tag/dropi-tag.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.container-chips {\n  display: inline-block;\n}\n\n.tags {\n  display: inline-flex;\n  padding: 4px 8px;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  border-radius: var(--Border-5, 9999px);\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-medium, 500);\n  line-height: var(--Size-5, 24px);\n  /* Animation */\n  animation: fade-in 200ms ease-out;\n}\n\n.tags.icon-only {\n  gap: 0;\n}\n\n.file-icon {\n  display: flex;\n}\n\n@keyframes fade-in {\n  from { opacity: 0; transform: scale(0.8); }\n  to   { opacity: 1; transform: scale(1); }\n}\n","import { Component, Prop, Watch, h } from '@stencil/core';\n\nexport type TagState = 'default' | 'success' | 'info' | 'warning' | 'error' | 'legacy';\nexport type TagType = 'primary' | 'secondary';\n\n/**\n * @component dropi-tag\n * Colored tag/chip for statuses, categories, and labels.\n */\n@Component({\n  tag: 'dropi-tag',\n  styleUrl: 'dropi-tag.css',\n  shadow: true,\n})\nexport class DropiTag {\n  /** primary (filled) | secondary (soft) */\n  @Prop({ reflect: true }) type: TagType = 'primary';\n  /** Color state of the tag */\n  @Prop({ reflect: true }) state: TagState = 'default';\n  /** Whether to show the icon */\n  @Prop() showIcon: boolean = false;\n  /** Icon name from the sprite */\n  @Prop({ reflect: true }) icon: string = '';\n  /** Label text */\n  @Prop({ reflect: true }) text: string = '';\n\n  private readonly colorMap: Record<TagState, string> = {\n    default: 'Primary-Primary',\n    success: 'Success-Success',\n    info: 'Info-Info',\n    warning: 'Warning-Warning',\n    error: 'Error-Error',\n    legacy: 'Gray-Gray',\n  };\n\n  @Watch('type') @Watch('state')\n  propsChanged() {}\n\n  private get bgColor(): string {\n    const base = this.colorMap[this.state];\n    if (this.type === 'primary') return `var(--${base}-500)`;\n    const shade = this.state === 'default' || this.state === 'legacy' ? '-100' : '-50';\n    return `var(--${base}${shade})`;\n  }\n\n  private get textColor(): string {\n    const base = this.colorMap[this.state];\n    if (this.type === 'primary') return `var(--Neutral-White)`;\n    const shade = this.state === 'default' ? '-500' : '-700';\n    return `var(--${base}${shade})`;\n  }\n\n  private get iconColor(): string {\n    if (this.type === 'primary') return 'Neutral-White';\n    const base = this.colorMap[this.state];\n    const shade = this.state === 'default' ? '-500' : '-700';\n    return `${base}${shade}`;\n  }\n\n  private get hasContent(): boolean {\n    return typeof this.text === 'string' && this.text.trim().length > 0;\n  }\n\n  render() {\n    return (\n      <div class=\"container-chips\">\n        <div\n          class={{ tags: true, 'icon-only': this.showIcon && !this.hasContent }}\n          style={{ backgroundColor: this.bgColor, color: this.textColor }}\n        >\n          {this.showIcon && this.icon && (\n            <dropi-icon\n              class=\"file-icon\"\n              name={this.icon}\n              width=\"16px\"\n              height=\"16px\"\n              color={this.iconColor}\n            />\n          )}\n          {this.hasContent && <span>{this.text}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-text-area.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 
 const dropiTextAreaCss = () => `:host{display:flex;flex-direction:column;width:100%}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative;display:flex;flex-direction:column}textarea.form-control{box-sizing:border-box;width:100%;flex:1;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;gap:4px;align-items:center}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}`;
 
@@ -130,3 +130,6 @@ const DropiTextArea = class {
 DropiTextArea.style = dropiTextAreaCss();
 
 export { DropiTextArea as dropi_text_area };
+//# sourceMappingURL=dropi-text-area.entry.esm.js.map
+
+//# sourceMappingURL=dropi-text-area.entry.js.map

package/dist/dropi-ui/dropi-text-area.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-text-area.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-text-area/dropi-text-area.css?tag=dropi-text-area&encapsulation=shadow","src/components/dropi-text-area/dropi-text-area.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.textarea-wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.textarea-wrapper label {\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.asterisk {\n  color: var(--Error-Error-500, #f46a6b);\n}\n\n.textarea-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\ntextarea.form-control {\n  box-sizing: border-box;\n  width: 100%;\n  flex: 1;\n  overflow: auto;\n  padding: var(--Size-3, 12px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  background: var(--Neutral-White, #ffffff);\n  transition: border-color 0.3s ease-in-out;\n  outline: none;\n  appearance: none;\n}\n\ntextarea.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\ntextarea.form-control:focus::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\ntextarea.form-control-valid {\n  border-color: var(--Gray-Gray-400, #858ea6) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\ntextarea.form-control-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\ntextarea.form-control:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n/* ── Char counter ───────────────────────────────────────────── */\n.char-counter {\n  position: absolute;\n  bottom: 10px;\n  right: 16px;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-500, #69738c);\n  pointer-events: none;\n}\n\n/* ── Helper ─────────────────────────────────────────────────── */\n.form-control-helper {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.form-control-helper span {\n  display: block;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\n/**\n * Simplified TextAreaProperties interface (matches Angular `TextAreaProperties`).\n * `formControl` is intentionally excluded — use `value` + dropiInput event instead.\n */\nexport interface TextAreaProperties {\n  id?: string;\n  label?: string;\n  placeholder?: string;\n  maxLength?: number;\n  minLength?: number;\n  textHelper?: string;\n  rows?: number;\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n}\n\nexport type ResizeMode = 'none' | 'both' | 'horizontal' | 'vertical';\n\n/**\n * @component dropi-text-area\n * Multi-line text area with label, char counter, validation states,\n * helper text, and native form association.\n */\n@Component({\n  tag: 'dropi-text-area',\n  styleUrl: 'dropi-text-area.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiTextArea {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Input id. Defaults to label. */\n  @Prop({ mutable: true }) id: string = '';\n  /** Name for native form submission */\n  @Prop() name: string = '';\n  /** Label shown above the textarea */\n  @Prop({ mutable: true }) label: string = '';\n  /** Placeholder text */\n  @Prop({ mutable: true }) placeholder: string = '';\n  /** Current value (controlled) */\n  @Prop({ mutable: true }) value: string = '';\n  /** Max character length */\n  @Prop({ mutable: true }) maxLength: number;\n  /** Min character length */\n  @Prop({ mutable: true }) minLength: number = 0;\n  /** Number of visible rows */\n  @Prop({ mutable: true }) rows: number = 4;\n  /** Resize behavior */\n  @Prop({ mutable: true }) resize: ResizeMode = 'vertical';\n  /** Disable the textarea */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Mark as required */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Show the required asterisk */\n  @Prop() showObligatoryAsterisk: boolean = false;\n  /** Helper / error text below the field */\n  @Prop({ mutable: true }) textHelper: string = '';\n  /** Mark the field as invalid (consumer-controlled) */\n  @Prop() hasError: boolean = false;\n  /**\n   * Convenience object prop — matches Angular `textAreaProperties: TextAreaProperties`.\n   * When provided, its non-null fields override individual props.\n   * Note: `formControl` is not supported in web components; use `value` + dropiInput instead.\n   */\n  @Prop() textAreaProperties: TextAreaProperties | null = null;\n\n  @Watch('textAreaProperties')\n  textAreaPropertiesChanged(val: TextAreaProperties) {\n    if (!val) return;\n    if (val.id !== undefined) this.id = val.id;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n    if (val.minLength !== undefined) this.minLength = val.minLength;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.rows !== undefined) this.rows = val.rows;\n    if (val.resize !== undefined) this.resize = val.resize;\n  }\n\n  @State() private touched: boolean = false;\n\n  /** Emitted on every keystroke */\n  @Event() dropiInput: EventEmitter<string>;\n  /** Emitted on blur */\n  @Event() dropiChange: EventEmitter<string>;\n  @Event() dropiFocus: EventEmitter<void>;\n  @Event() dropiBlur: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged(val: string) {\n    this.internals.setFormValue(val);\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value ?? '');\n    if (this.textAreaProperties) this.textAreaPropertiesChanged(this.textAreaProperties);\n  }\n\n  private handleInput(e: InputEvent) {\n    const val = (e.target as HTMLTextAreaElement).value;\n    this.value = val;\n    this.internals.setFormValue(val);\n    this.dropiInput.emit(val);\n  }\n\n  private handleBlur() {\n    this.touched = true;\n    this.dropiChange.emit(this.value);\n    this.dropiBlur.emit();\n  }\n\n  private get resolvedId(): string {\n    return this.id || this.label;\n  }\n\n  private get isInvalid(): boolean {\n    return this.hasError && this.touched;\n  }\n\n  private get charCount(): number {\n    return this.value?.length ?? 0;\n  }\n\n  render() {\n    const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n    const showHelper = this.textHelper || this.isInvalid;\n\n    return (\n      <div class=\"textarea-wrapper\">\n\n        {this.label && (\n          <label\n            htmlFor={this.resolvedId}\n            style={{ color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' }}\n          >\n            {this.label}\n            {showAsterisk && <span class=\"asterisk\"> *</span>}\n          </label>\n        )}\n\n        <div class=\"textarea-container\">\n          <textarea\n            id={this.resolvedId}\n            class={{\n              'form-control': true,\n              'Body-M-Regular': true,\n              'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n              'form-control-invalid': this.isInvalid,\n            }}\n            rows={this.rows}\n            placeholder={this.placeholder}\n            maxLength={this.maxLength}\n            minLength={this.minLength}\n            disabled={this.disabled}\n            required={this.required}\n            style={{ resize: this.resize }}\n            onInput={(e) => this.handleInput(e as InputEvent)}\n            onFocus={() => this.dropiFocus.emit()}\n            onBlur={() => this.handleBlur()}\n          >\n            {this.value}\n          </textarea>\n\n          {this.maxLength > 0 && (\n            <div class=\"char-counter\">\n              {this.charCount}/{this.maxLength}\n            </div>\n          )}\n        </div>\n\n        {showHelper && (\n          <div class=\"form-control-helper\">\n            {this.isInvalid && (\n              <dropi-icon name=\"Warning-circle\" width=\"12px\" height=\"12px\" color=\"Error-Error-500\" />\n            )}\n            <span\n              class={{ 'invalid-color': this.isInvalid }}\n              style={{ color: this.disabled ? 'var(--Gray-Gray-400)' : undefined }}\n            >\n              {this.textHelper}\n            </span>\n          </div>\n        )}\n\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-time-line.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
 
 const dropiTimeLineCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.timeline{display:flex;flex-direction:column}.tl-step{display:flex;align-items:flex-start;gap:var(--Size-3, 12px)}.tl-step__marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.tl-step__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s, border-color 0.2s}.tl-step--pending .tl-step__icon{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.tl-step--active .tl-step__icon{background:var(--Neutral-White, #ffffff);border:2px solid var(--Primary-Primary-500, #f49a3d);box-shadow:0 0 0 4px var(--Primary-Primary-100, #fde9d0)}.tl-step--done .tl-step__icon{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.tl-step__dot{width:8px;height:8px;border-radius:50%;display:block}.tl-step--pending .tl-step__dot{background:var(--Gray-Gray-300, #a3abbf)}.tl-step--active .tl-step__dot{background:var(--Primary-Primary-500, #f49a3d)}.tl-step--done .tl-step__dot{background:var(--Neutral-White, #ffffff)}.tl-step__line{flex:1;width:2px;min-height:24px;margin:4px 0;background:var(--Gray-Gray-200, #c3c9d9)}.tl-step--done+.tl-step .tl-step__line,.tl-step--done .tl-step__line{background:var(--Primary-Primary-500, #f49a3d)}.tl-step__content{display:flex;flex-direction:column;gap:2px;padding-top:6px;padding-bottom:var(--Size-4, 16px)}.tl-step__label{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.tl-step--pending .tl-step__label{color:var(--Gray-Gray-400, #858ea6);font-weight:var(--font-weight-regular, 400)}.tl-step__subtitle{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
 
@@ -30,3 +30,6 @@ const DropiTimeLine = class {
 DropiTimeLine.style = dropiTimeLineCss();
 
 export { DropiTimeLine as dropi_time_line };
+//# sourceMappingURL=dropi-time-line.entry.esm.js.map
+
+//# sourceMappingURL=dropi-time-line.entry.js.map

package/dist/dropi-ui/dropi-time-line.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-time-line.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,4wDAA4wD,CAAC;;MCqBhyD,aAAa,GAAA,MAAA;;;;;IAEhB,KAAK,GAA4B,EAAE;AAE3C,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;AAClC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAE1D,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;;IAGzB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW;QAE9B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EAClB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;YACrB,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AAErC,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA,SAAA,EAAY,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,EAAA,EACnF,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,YAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,eAAe,EAAA,CACpH,KAEF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAG,CAC9B,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,GAAG,CACrC,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC/C,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CACpE,CACF;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-time-line/dropi-time-line.css?tag=dropi-time-line&encapsulation=shadow","src/components/dropi-time-line/dropi-time-line.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.timeline {\n  display: flex;\n  flex-direction: column;\n}\n\n.tl-step {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--Size-3, 12px);\n}\n\n/* ── Left column: icon + line ───────────────────────────── */\n.tl-step__marker {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.tl-step__icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.2s, border-color 0.2s;\n}\n\n.tl-step--pending .tl-step__icon {\n  background: var(--Gray-Gray-100, #e6eaf2);\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n}\n\n.tl-step--active .tl-step__icon {\n  background: var(--Neutral-White, #ffffff);\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n  box-shadow: 0 0 0 4px var(--Primary-Primary-100, #fde9d0);\n}\n\n.tl-step--done .tl-step__icon {\n  background: var(--Primary-Primary-500, #f49a3d);\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n.tl-step__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  display: block;\n}\n\n.tl-step--pending .tl-step__dot {\n  background: var(--Gray-Gray-300, #a3abbf);\n}\n\n.tl-step--active .tl-step__dot {\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.tl-step--done .tl-step__dot {\n  background: var(--Neutral-White, #ffffff);\n}\n\n/* ── Vertical connector ─────────────────────────────────── */\n.tl-step__line {\n  flex: 1;\n  width: 2px;\n  min-height: 24px;\n  margin: 4px 0;\n  background: var(--Gray-Gray-200, #c3c9d9);\n}\n\n.tl-step--done + .tl-step .tl-step__line,\n.tl-step--done .tl-step__line {\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Content ────────────────────────────────────────────── */\n.tl-step__content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-top: 6px;\n  padding-bottom: var(--Size-4, 16px);\n}\n\n.tl-step__label {\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.tl-step--pending .tl-step__label {\n  color: var(--Gray-Gray-400, #858ea6);\n  font-weight: var(--font-weight-regular, 400);\n}\n\n.tl-step__subtitle {\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type TimelineStepStatus = 'pending' | 'active' | 'done';\n\nexport interface TimelineStep {\n  status: TimelineStepStatus;\n  label: string;\n  icon?: string;\n  id?: string;\n  subtitle?: string;\n}\n\n/**\n * @component dropi-time-line\n * Vertical timeline showing ordered steps with status indicators.\n */\n@Component({\n  tag: 'dropi-time-line',\n  styleUrl: 'dropi-time-line.css',\n  shadow: true,\n})\nexport class DropiTimeLine {\n  /** Array of timeline steps. Pass as JSON string or array */\n  @Prop() steps: TimelineStep[] | string = [];\n\n  private get parsedSteps(): TimelineStep[] {\n    if (typeof this.steps === 'string') {\n      try { return JSON.parse(this.steps); } catch { return []; }\n    }\n    return this.steps || [];\n  }\n\n  render() {\n    const steps = this.parsedSteps;\n\n    return (\n      <div class=\"timeline\">\n        {steps.map((step, i) => {\n          const isLast = i === steps.length - 1;\n\n          return (\n            <div class={{ 'tl-step': true, [`tl-step--${step.status}`]: true }} key={step.id || i}>\n              <div class=\"tl-step__marker\">\n                <div class=\"tl-step__icon\">\n                  {step.icon ? (\n                    <dropi-icon\n                      name={step.icon}\n                      width=\"16px\"\n                      height=\"16px\"\n                      color={step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400'}\n                    />\n                  ) : (\n                    <span class=\"tl-step__dot\" />\n                  )}\n                </div>\n                {!isLast && <div class=\"tl-step__line\" />}\n              </div>\n\n              <div class=\"tl-step__content\">\n                <span class=\"tl-step__label\">{step.label}</span>\n                {step.subtitle && <span class=\"tl-step__subtitle\">{step.subtitle}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-toast.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
 
 const dropiToastCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:380px;width:100%;pointer-events:none}.toast-container--top-right{top:80px;right:0;padding:var(--Size-2, 8px)}.toast-container--top-left{top:80px;left:0;padding:var(--Size-2, 8px)}.toast-container--bottom-right{bottom:24px;right:0;padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-container--bottom-left{bottom:24px;left:0;padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-container--top-center{top:80px;left:50%;transform:translateX(-50%);padding:var(--Size-2, 8px)}.toast-container--bottom-center{bottom:24px;left:50%;transform:translateX(-50%);padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-wrapper{pointer-events:auto;animation:toast-in 0.28s ease;transition:opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease;overflow:hidden;max-height:200px}.toast-wrapper--leaving{opacity:0;transform:translateX(20px);max-height:0;pointer-events:none}@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.toast{position:relative;display:flex;align-items:flex-start;border-radius:var(--Border-2,8px);background:var(--Neutral-White, #ffffff);box-shadow:0.5px -1px 7px 0px rgba(0, 0, 0, 0.06), 0px 4px 20px 0px rgba(0, 0, 0, 0.12);border-left:var(--Size-2, 8px) solid;overflow:hidden;min-width:300px}.toast--success{border-color:var(--Success-Success-500,#34c38f)}.toast--error{border-color:var(--Error-Error-500,#f46a6b)}.toast--warn{border-color:var(--Warning-Warning-500,#f1b44c)}.toast--info{border-color:var(--Info-Info-500,#50a5f1)}.toast-content{display:flex;flex-direction:row;align-items:flex-start;padding:var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));gap:var(--Size-4, 16px)}.lottie-img{width:50px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.lottie-player-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:flex;align-items:center;justify-content:center}lottie-player{width:100%;height:100%;display:block}.info-container{flex:1;min-width:0;align-self:center;display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.title{margin:0;font-size:var(--font-size-l,18px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-700,#32394d);line-height:1.1;text-align:left;max-width:250px}.description{margin:0;font-size:var(--font-size-s,14px);color:var(--Gray-Gray-500, #69738c);line-height:1.4;text-align:left;max-width:250px}.toast-close{position:absolute;top:18px;right:10px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.toast-close:hover{opacity:0.7}`;
 
@@ -52,3 +52,6 @@ const DropiToast = class {
 DropiToast.style = dropiToastCss();
 
 export { DropiToast as dropi_toast };
+//# sourceMappingURL=dropi-toast.entry.esm.js.map
+
+//# sourceMappingURL=dropi-toast.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-toast.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-toast/dropi-toast.css?tag=dropi-toast&encapsulation=shadow","src/components/dropi-toast/dropi-toast.tsx"],"sourcesContent":[":host { display: contents; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }\n.toast-container--top-right    { top: 80px; right: 0; padding: var(--Size-2, 8px); }\n.toast-container--top-left     { top: 80px; left: 0; padding: var(--Size-2, 8px); }\n.toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n.toast-container--bottom-left  { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n.toast-container--top-center    { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }\n.toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n\n.toast-wrapper { pointer-events: auto; animation: toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; }\n.toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }\n@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }\n\n.toast { position: relative; display: flex; align-items: flex-start; border-radius: var(--Border-2,8px); background: var(--Neutral-White, #ffffff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06), 0px 4px 20px 0px rgba(0, 0, 0, 0.12); border-left: var(--Size-2, 8px) solid; overflow: hidden; min-width: 300px; }\n.toast--success { border-color: var(--Success-Success-500,#34c38f); }\n.toast--error   { border-color: var(--Error-Error-500,#f46a6b); }\n.toast--warn    { border-color: var(--Warning-Warning-500,#f1b44c); }\n.toast--info    { border-color: var(--Info-Info-500,#50a5f1); }\n\n.toast-content {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  padding: var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));\n  gap: var(--Size-4, 16px);\n}\n\n.lottie-img {\n  width: 50px;\n  height: 50px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.lottie-player-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\nlottie-player {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.info-container { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }\n.title { margin: 0; font-size: var(--font-size-l,18px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.1; text-align: left; max-width: 250px; }\n.description  { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500, #69738c); line-height: 1.4; text-align: left; max-width: 250px; }\n\n.toast-close { position: absolute; top: 18px; right: 10px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.toast-close:hover { opacity: 0.7; }\n","import { Component, Prop, State, Method, h } from '@stencil/core';\n\nexport type ToastSeverity = 'success' | 'error' | 'warn' | 'info';\n\nexport interface ToastMessage {\n  id?: string;\n  /** Visual style and icon */\n  severity: ToastSeverity;\n  /** Bold title */\n  summary: string;\n  /** Optional body text */\n  detail?: string;\n  /** Whether to show a close button. Default: true */\n  closable?: boolean;\n  /** Auto-close after N ms. 0 = manual only. Default: uses component `life` prop */\n  life?: number;\n}\n\ninterface ToastItem {\n  msg: ToastMessage;\n  leaving: boolean;\n  timer?: any;\n}\n\n/**\n * @component dropi-toast\n * Global toast notification stack. Place once in the app root, call show() from JS.\n *\n * @example\n * const t = document.querySelector('dropi-toast');\n * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });\n */\n@Component({\n  tag: 'dropi-toast',\n  styleUrl: 'dropi-toast.css',\n  shadow: true,\n})\nexport class DropiToast {\n  /** Toast position */\n  @Prop() position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' = 'top-right';\n  /** Default auto-close ms (0 = manual) */\n  @Prop() life: number = 3000;\n\n  @State() private items: ToastItem[] = [];\n  private idCounter = 0;\n\n  /** Show a toast */\n  @Method()\n  async show(msg: ToastMessage) {\n    console.log('DropiToast show() called with:', msg);\n    const id = msg.id ?? `t${++this.idCounter}`;\n    const item: ToastItem = { msg: { ...msg, id, closable: msg.closable ?? true }, leaving: false };\n    this.items = [...(this.items || []), item];\n    const ms = msg.life !== undefined ? msg.life : this.life;\n    if (ms > 0) item.timer = setTimeout(() => this.remove(id), ms);\n  }\n\n  /** Remove all toasts */\n  @Method()\n  async clear() {\n    (this.items || []).forEach(i => {\n      if (i.timer) clearTimeout(i.timer);\n    });\n    this.items = [];\n  }\n\n  private remove(id: string) {\n    this.items = this.items.map(i => (i.msg.id === id ? { ...i, leaving: true } : i));\n    setTimeout(() => {\n      this.items = this.items.filter(i => i.msg.id !== id);\n    }, 320);\n  }\n\n  private readonly lottieMap: Record<ToastSeverity, string> = {\n    success: '/assets/lottie-files/success.json',\n    error: '/assets/lottie-files/failure.json',\n    warn: '/assets/lottie-files/warning.json',\n    info: '/assets/lottie-files/question.json',\n  };\n\n  private getLottieHtml(severity: ToastSeverity): string {\n    return `<lottie-player src=\"${this.lottieMap[severity]}\" background=\"transparent\" speed=\"1\" loop autoplay></lottie-player>`;\n  }\n\n  render() {\n    return (\n      <div class={`toast-container toast-container--${this.position}`}>\n        {(this.items ?? []).map(item => (\n          <div key={item.msg.id} class={{ 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving }}>\n            <div class={`toast toast--${item.msg.severity}`}>\n              <div class=\"toast-content\">\n                <div class=\"lottie-img\">\n                  <div class=\"lottie-player-container\" innerHTML={this.getLottieHtml(item.msg.severity)}></div>\n                </div>\n                <div class=\"info-container\">\n                  <p class=\"title\">{item.msg.summary}</p>\n                  {item.msg.detail && <p class=\"description\">{item.msg.detail}</p>}\n                </div>\n              </div>\n              {item.msg.closable && (\n                <button class=\"toast-close\" onClick={() => this.remove(item.msg.id!)}>\n                  <dropi-icon name=\"Close-small\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-400\" />\n                </button>\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-tooltip-v2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
 
 const dropiTooltipCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.tooltip-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.tooltip-bubble{position:absolute;z-index:9999;background:var(--Gray-Gray-800);color:var(--Neutral-White, #ffffff);font-size:var(--font-size-s,14px);line-height:1.5;padding:8px 12px;border-radius:8px;white-space:normal;pointer-events:none;opacity:0;transition:opacity 0.15s ease, transform 0.15s ease;word-break:break-word;box-shadow:var(--Shadow-medium);text-align:left;width:max-content}.tooltip-bubble--visible{opacity:1}.tooltip-bubble--top{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}.tooltip-bubble--bottom{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}.tooltip-bubble--left{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-bubble--right{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-arrow{position:absolute;width:12px;height:6px}.tooltip-arrow::before{content:'';position:absolute;width:0;height:0}.tooltip-arrow--top{top:100%;left:50%;transform:translateX(-50%)}.tooltip-arrow--top::before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--Gray-Gray-800)}.tooltip-arrow--bottom{bottom:100%;left:50%;transform:translateX(-50%)}.tooltip-arrow--bottom::before{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--Gray-Gray-800)}.tooltip-arrow--left{left:100%;top:50%;transform:translateY(-50%)}.tooltip-arrow--left::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid var(--Gray-Gray-800)}.tooltip-arrow--right{right:100%;top:50%;transform:translateY(-50%)}.tooltip-arrow--right::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--Gray-Gray-800)}`;
 
@@ -127,3 +127,6 @@ const DropiTooltipV2 = class {
 DropiTooltipV2.style = dropiTooltipCss();
 
 export { DropiTooltipV2 as dropi_tooltip_v2 };
+//# sourceMappingURL=dropi-tooltip-v2.entry.esm.js.map
+
+//# sourceMappingURL=dropi-tooltip-v2.entry.js.map

package/dist/dropi-ui/dropi-tooltip-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-tooltip-v2.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,u1DAAu1D,CAAC;;MCoB12D,cAAc,GAAA,MAAA;;;;;IAEjB,IAAI,GAAW,EAAE;;IAEjB,KAAK,GAAW,EAAE;;IAElB,KAAK,GAAW,EAAE;;IAElB,QAAQ,GAAoB,QAAQ;;IAEpC,aAAa,GAAkB,QAAQ;;IAEtB,OAAO,GAAmB,OAAO;;IAElD,QAAQ,GAAW,OAAO;;IAE1B,QAAQ,GAAW,OAAO;;IAE1B,SAAS,GAAW,CAAC;;IAErB,QAAQ,GAAY,KAAK;;IAEzB,QAAQ,GAAY,IAAI;;IAEP,KAAK,GAAY,KAAK;;IAEvC,QAAQ,GAAW,SAAS;;IAE5B,SAAS,GAAW,SAAS;;IAE7B,QAAQ,GAAW,IAAI;IAEd,OAAO,GAAY,KAAK;IACjC,SAAS,GAAQ,IAAI;IACrB,YAAY,GAAQ,IAAI;IAEhC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ;YAAE,IAAI,CAAC,IAAI,EAAE;AAC1C,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YAAE,IAAI,CAAC,eAAe,EAAE;;IAGhD,IAAI,GAAG,MAAK;QAClB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ;YAAE;AAChD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;AACrD,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YAAE;AACrB,QAAA,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE;YACtB,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,QAAQ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC;;aACtE;AACL,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;AAEvB,KAAC;IAEO,IAAI,GAAG,MAAK;AAClB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAAE,YAAA,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;AACzE,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AAAE,YAAA,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC;AAAE,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;AAClF,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACtB,KAAC;IAEO,eAAe,GAAA;QACrB,IAAI,CAAC,IAAI,EAAE;AACX,QAAA,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC;;IAGjD,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;YAAE;QAC9B,IAAI,CAAC,IAAI,EAAE;AACb,KAAC;IAEO,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;YAAE;QAC9B,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;AACnC,KAAC;IAEO,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;YAAE;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;AAC1C,KAAC;IAEO,aAAa,GAAG,MAAK;AAC3B,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;YAAE;QAC9B,IAAI,CAAC,IAAI,EAAE;AACb,KAAC;IAEO,cAAc,GAAG,MAAK;AAC5B,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;YAAE;QAC9B,IAAI,CAAC,IAAI,EAAE;AACb,KAAC;IAEO,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;AAC7B,YAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;QAEpB,IAAI,CAAC,IAAI,EAAE;AACb,KAAC;AAED,IAAA,IAAY,cAAc,GAAA;QACxB,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI;AAC/B,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,CAAA,EAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAA,CAAE;QACnE,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE;;IAGvC,MAAM,GAAA;QACJ,MAAM,WAAW,GAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;QACpD,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;QAEvD,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,iBAAiB,EACvB,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,UAAU,EAAE,IAAI,CAAC,cAAc,EAAA,EAE9B,IAAI,CAAC,QAAQ,KACZ,mEACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAC3B,MAAM,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAC5B,KAAK,EAAE,IAAI,CAAC,SAAS,GACrB,CACH,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,EAEP,IAAI,CAAC,cAAc,KAClB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,CAAC,mBAAmB,IAAI,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;AAC1C,gBAAA,CAAC,yBAAyB,IAAI,CAAC,aAAa,CAAA,CAAE,GAAG,IAAI;gBACrD,yBAAyB,EAAE,IAAI,CAAC,OAAO;AACxC,aAAA,EACD,KAAK,EAAE,WAAW,EAClB,IAAI,EAAC,SAAS,EAAA,EAEb,IAAI,CAAC,KAAK,KACT,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,gBAAa,QAAQ,EAAA,EAC1E,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CAC3E,CACV,EACA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,eAAe,EAAA,EAAE,IAAI,CAAC,KAAK,CAAU,EAC/E,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EAC3E,IAAI,CAAC,IAAI,IAAI,+DAAO,IAAI,CAAC,IAAI,CAAQ,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,6BAAA,EAAgC,IAAI,CAAC,QAAQ,EAAE,EAAA,CAAI,CAC5D,CACP,CACG;;;;;;;","names":[],"sources":["src/components/dropi-tooltip-v2/dropi-tooltip.css?tag=dropi-tooltip-v2&encapsulation=shadow","src/components/dropi-tooltip-v2/dropi-tooltip.tsx"],"sourcesContent":[":host { display: inline-block; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }\n\n.tooltip-bubble {\n  position: absolute; z-index: 9999;\n  background: var(--Gray-Gray-800); color: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s,14px); line-height: 1.5;\n  padding: 8px 12px; border-radius: 8px;\n  white-space: normal; pointer-events: none;\n  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;\n  word-break: break-word;\n  box-shadow: var(--Shadow-medium);\n  text-align: left;\n  width: max-content;\n}\n.tooltip-bubble--visible { opacity: 1; }\n\n.tooltip-bubble--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }\n.tooltip-bubble--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%); }\n.tooltip-bubble--left   { right: calc(100% + 12px);  top: 50%;  transform: translateY(-50%); }\n.tooltip-bubble--right  { left: calc(100% + 12px);   top: 50%;  transform: translateY(-50%); }\n\n.tooltip-arrow { position: absolute; width: 12px; height: 6px; }\n.tooltip-arrow::before {\n  content: '';\n  position: absolute;\n  width: 0;\n  height: 0;\n}\n\n.tooltip-arrow--top {\n  top: 100%; left: 50%; transform: translateX(-50%);\n}\n.tooltip-arrow--top::before {\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--bottom {\n  bottom: 100%; left: 50%; transform: translateX(-50%);\n}\n.tooltip-arrow--bottom::before {\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--left {\n  left: 100%; top: 50%; transform: translateY(-50%);\n}\n.tooltip-arrow--left::before {\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  border-left: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--right {\n  right: 100%; top: 50%; transform: translateY(-50%);\n}\n.tooltip-arrow--right::before {\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  border-right: 6px solid var(--Gray-Gray-800);\n}\n","import { Component, Prop, State, h } from '@stencil/core';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus' | 'timeout' | 'static' | 'hidden';\nexport type ArrowPosition = 'start' | 'center' | 'end';\n\n/**\n * @component dropi-tooltip\n * Wraps content and shows a tooltip bubble on hover/focus.\n *\n * @example\n * <dropi-tooltip-v2 text=\"Más información\" position=\"top\">\n *   <dropi-button text=\"Hover\" />\n * </dropi-tooltip-v2>\n */\n@Component({\n  tag: 'dropi-tooltip-v2',\n  styleUrl: 'dropi-tooltip.css',\n  shadow: true,\n})\nexport class DropiTooltipV2 {\n  /** Tooltip text */\n  @Prop() text: string = '';\n  /** Tooltip title (bold, shown with label) */\n  @Prop() title: string = '';\n  /** Tooltip label (shown below title) */\n  @Prop() label: string = '';\n  /** Position: top | bottom | left | right */\n  @Prop() position: TooltipPosition = 'bottom';\n  /** Position of the arrow: start | center | end (matches Angular `arrowPosition`) */\n  @Prop() arrowPosition: ArrowPosition = 'center';\n  /** Trigger: hover | click | focus | timeout | static | hidden */\n  @Prop({ mutable: true }) trigger: TooltipTrigger = 'hover';\n  /** Max CSS width of the bubble */\n  @Prop() maxWidth: string = '280px';\n  /** Min CSS width of the bubble (matches Angular `minWidth`) */\n  @Prop() minWidth: string = '300px';\n  /** Delay in ms before showing */\n  @Prop() showDelay: number = 0;\n  /** Disable the tooltip completely (matches Angular `disabled`) */\n  @Prop() disabled: boolean = false;\n  /** Show the trigger icon (matches Angular `showIcon`) */\n  @Prop() showIcon: boolean = true;\n  /** Show the close (X) button inside the bubble (matches Angular `showX`) */\n  @Prop({ mutable: true }) showX: boolean = false;\n  /** Icon name from the dropi-icon sprite (matches Angular `iconName`) */\n  @Prop() iconName: string = 'Tooltip';\n  /** Icon color token or hex (matches Angular `iconColor`) */\n  @Prop() iconColor: string = '#7B8190';\n  /** Icon size in px without unit (matches Angular `iconSize`) */\n  @Prop() iconSize: string = '14';\n\n  @State() private visible: boolean = false;\n  private showTimer: any = null;\n  private timeoutTimer: any = null;\n\n  componentDidLoad() {\n    if (this.trigger === 'static') this.show();\n    if (this.trigger === 'timeout') this.showWithTimeout();\n  }\n\n  private show = () => {\n    if (this.disabled || this.trigger === 'hidden') return;\n    const content = this.text || this.title || this.label;\n    if (!content.trim()) return;\n    if (this.showDelay > 0) {\n      this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);\n    } else {\n      this.visible = true;\n    }\n  };\n\n  private hide = () => {\n    if (this.showTimer) { clearTimeout(this.showTimer); this.showTimer = null; }\n    if (this.timeoutTimer) { clearTimeout(this.timeoutTimer); this.timeoutTimer = null; }\n    this.visible = false;\n  };\n\n  private showWithTimeout() {\n    this.show();\n    this.timeoutTimer = setTimeout(() => this.hide(), 6000);\n  }\n\n  private handleMouseEnter = () => {\n    if (this.trigger !== 'hover') return;\n    this.show();\n  };\n\n  private handleMouseLeave = () => {\n    if (this.trigger !== 'hover') return;\n    setTimeout(() => this.hide(), 10);\n  };\n\n  private handleClick = () => {\n    if (this.trigger !== 'click') return;\n    this.visible ? this.hide() : this.show();\n  };\n\n  private handleFocusin = () => {\n    if (this.trigger !== 'focus') return;\n    this.show();\n  };\n\n  private handleFocusout = () => {\n    if (this.trigger !== 'focus') return;\n    this.hide();\n  };\n\n  private handleClose = () => {\n    if (this.trigger === 'static') {\n      this.trigger = 'hover';\n      this.showX = false;\n    }\n    this.hide();\n  };\n\n  private get displayContent(): string {\n    if (this.text) return this.text;\n    if (this.title && this.label) return `${this.title}\\n${this.label}`;\n    return this.title || this.label || '';\n  }\n\n  render() {\n    const bubbleStyle: any = { maxWidth: this.maxWidth };\n    if (this.minWidth) bubbleStyle.minWidth = this.minWidth;\n\n    return (\n      <div\n        class=\"tooltip-wrapper\"\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleClick}\n        onFocusin={this.handleFocusin}\n        onFocusout={this.handleFocusout}\n      >\n        {this.showIcon && (\n          <dropi-icon\n            name={this.iconName}\n            width={`${this.iconSize}px`}\n            height={`${this.iconSize}px`}\n            color={this.iconColor}\n          />\n        )}\n        <slot />\n\n        {this.displayContent && (\n          <div\n            class={{\n              'tooltip-bubble': true,\n              [`tooltip-bubble--${this.position}`]: true,\n              [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,\n              'tooltip-bubble--visible': this.visible,\n            }}\n            style={bubbleStyle}\n            role=\"tooltip\"\n          >\n            {this.showX && (\n              <button class=\"tooltip-close\" onClick={this.handleClose} aria-label=\"Cerrar\">\n                <dropi-icon name=\"Close-small\" width=\"12px\" height=\"12px\" color=\"Gray-Gray-500\" />\n              </button>\n            )}\n            {this.title && !this.text && <strong class=\"tooltip-title\">{this.title}</strong>}\n            {this.label && !this.text && <span class=\"tooltip-label\">{this.label}</span>}\n            {this.text && <span>{this.text}</span>}\n            <span class={`tooltip-arrow tooltip-arrow--${this.position}`} />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-tooltip.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D5SAM1O2.js';
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
 
 const dropiTooltipCss = () => `:host{display:inline-block;position:relative}.tooltip-simple-bubble{position:absolute;background:var(--Gray-Gray-800, #1e293b);color:white;padding:4px 8px;border-radius:4px;font-size:12px;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:1000}:host(:hover) .tooltip-simple-bubble{opacity:1}.tooltip-simple--outlined .tooltip-simple-bubble{border:1px solid var(--Gray-Gray-300);background:white;color:var(--Gray-Gray-800)}`;
 
@@ -17,3 +17,6 @@ const DropiTooltip = class {
 DropiTooltip.style = dropiTooltipCss();
 
 export { DropiTooltip as dropi_tooltip };
+//# sourceMappingURL=dropi-tooltip.entry.esm.js.map
+
+//# sourceMappingURL=dropi-tooltip.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-tooltip.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,sgBAAsgB,CAAC;;MCWzhB,YAAY,GAAA,MAAA;;;;;IAEf,IAAI,GAAW,EAAE;;IAEjB,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,EACP,IAAI,CAAC,IAAI,KACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,IAAI,CACN,CACP,CACG;;;;;;;","names":[],"sources":["src/components/dropi-tooltip/dropi-tooltip.css?tag=dropi-tooltip&encapsulation=shadow","src/components/dropi-tooltip/dropi-tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n.tooltip-simple-bubble {\n  position: absolute;\n  background: var(--Gray-Gray-800, #1e293b);\n  color: white;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 8px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s;\n  z-index: 1000;\n}\n\n:host(:hover) .tooltip-simple-bubble {\n  opacity: 1;\n}\n\n.tooltip-simple--outlined .tooltip-simple-bubble {\n  border: 1px solid var(--Gray-Gray-300);\n  background: white;\n  color: var(--Gray-Gray-800);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-tooltip\n * Simple tooltip (Legacy version).\n */\n@Component({\n  tag: 'dropi-tooltip',\n  styleUrl: 'dropi-tooltip.css',\n  shadow: true,\n})\nexport class DropiTooltip {\n  /** Tooltip text */\n  @Prop() text: string = '';\n  /** Whether the tooltip has an outline style (matches Angular `outlined`) */\n  @Prop() outlined: boolean = false;\n\n  render() {\n    return (\n      <div class={{ 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined }}>\n        <slot />\n        {this.text && (\n          <div class=\"tooltip-simple-bubble\">\n            {this.text}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}