@dropi/ui 0.1.26 → 0.1.28

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

@@ -1 +0,0 @@
-{"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/dropi-ui/dropi-tooltip-v2.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-tooltip-v2.entry.js","mappings":"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","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/dropi-ui/dropi-tooltip.entry.js.map

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

package/dist/dropi-ui/dropi-ui.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropi-ui.esm.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AACzB,EAAE,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;AACvC,IAAI,cAAc,CAAC,8BAA8B,CAAC;AAClD;AACA,EAAE,IAAI,KAAK,CAAC,YAAY,EAAE;AAC1B,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;AAClC;AACA,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;AACnH,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,wBAAwB,CAAC,KAAK;AAC1H,GAAG,GAAG,IAAI;AACV,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,cAAc,GAAG,CAAC,SAAS,IAAI,EAAE,EAAE,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;AACD,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS;AAC1D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C;AACA,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;AACzC,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAClE;AACA;AACA;AACA,IAAI,OAAO,UAAU;AACrB,GAAG;AACH,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}

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

@@ -1 +0,0 @@
-{"file":"dropi-vertical-steps.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,k/CAAk/C,CAAC;;MCgB3gD,kBAAkB,GAAA,MAAA;;;;;;IAErB,KAAK,GAA4B,EAAE;;IAEnC,WAAW,GAAW,CAAC;;IAEvB,SAAS,GAAY,KAAK;;IAE1B,aAAa,GAAY,IAAI;;AAG5B,IAAA,SAAS;AAElB,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;;IAGjB,YAAY,CAAC,KAAa,EAAE,IAAkB,EAAA;QACpD,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK;AACjC,QAAA,MAAM,CAAC,GAAG,KAAK,GAAG,CAAC;AACnB,QAAA,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,WAAW;AAC5C,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,SAAS;AAC5C,QAAA,OAAO,SAAS;;IAGlB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW;QAE9B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;YACrB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC;YACxC,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;YACrC,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,IAAI,KAAK,KAAK,WAAW;AAE3D,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,EAC3D,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,MAAM,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,EAAA,EAExD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,mBAAmB,KAAK,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACvE,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,aAAa,IAC1C,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,KAE5E,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,CAAC,GAAG,CAAC,CAAQ,CAC5C,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,oBAAoB,EAAE,KAAK,KAAK,WAAW,EAAE,GAAI,CAC7F,EACN,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAA,eAAA,EAAkB,KAAK,EAAE,GAAG,IAAI,EAAE,EAAA,EACtE,IAAI,CAAC,KAAK,CACN,CACH;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-vertical-steps/dropi-vertical-steps.css?tag=dropi-vertical-steps&encapsulation=shadow","src/components/dropi-vertical-steps/dropi-vertical-steps.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.vertical-steps {\n  display: flex;\n  flex-direction: column;\n}\n\n.v-step {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--Size-3, 12px);\n}\n\n.v-step--clickable {\n  cursor: pointer;\n}\n\n/* ── Left indicator column ──────────────────────────────── */\n.v-step__indicator {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.v-step__circle {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: background 0.2s, border-color 0.2s;\n}\n\n.v-step__circle--pending {\n  background: var(--Neutral-White, #ffffff);\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n}\n\n.v-step__circle--current {\n  background: var(--Neutral-White, #ffffff);\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n.v-step__circle--completed {\n  background: var(--Primary-Primary-500, #f49a3d);\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n.v-step__number {\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.v-step__circle--current .v-step__number {\n  color: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Vertical connecting line ───────────────────────────── */\n.v-step__line {\n  flex: 1;\n  width: 2px;\n  min-height: 24px;\n  background: var(--Gray-Gray-200, #c3c9d9);\n  margin: 4px 0;\n  transition: background 0.2s;\n}\n\n.v-step__line--done {\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Label ──────────────────────────────────────────────── */\n.v-step__label {\n  padding-top: 4px;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n  line-height: 1.4;\n}\n\n.v-step__label--current {\n  color: var(--Gray-Gray-800, #1f2433);\n  font-weight: var(--font-weight-bold, 700);\n}\n\n.v-step__label--completed {\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport interface VerticalStep {\n  label?: string;\n  state?: 'pending' | 'current' | 'completed';\n}\n\n/**\n * @component dropi-vertical-steps\n * Vertical step-by-step progress indicator with optional click navigation.\n */\n@Component({\n  tag: 'dropi-vertical-steps',\n  styleUrl: 'dropi-vertical-steps.css',\n  shadow: true,\n})\nexport class DropiVerticalSteps {\n  /** Array of steps. Pass as JSON string or array */\n  @Prop() steps: VerticalStep[] | string = [];\n  /** Currently active step (1-based) */\n  @Prop() currentStep: number = 1;\n  /** Allow clicking completed steps to navigate back */\n  @Prop() clickable: boolean = false;\n  /** Show check icon inside completed step circles */\n  @Prop() showCheckIcon: boolean = true;\n\n  /** Emitted when a step is clicked. e.detail = step number (1-based) */\n  @Event() stepClick: EventEmitter<number>;\n\n  private get parsedSteps(): VerticalStep[] {\n    if (typeof this.steps === 'string') {\n      try { return JSON.parse(this.steps); } catch { return []; }\n    }\n    return this.steps || [];\n  }\n\n  private resolveState(index: number, step: VerticalStep): 'pending' | 'current' | 'completed' {\n    if (step.state) return step.state;\n    const n = index + 1;\n    if (n < this.currentStep) return 'completed';\n    if (n === this.currentStep) return 'current';\n    return 'pending';\n  }\n\n  render() {\n    const steps = this.parsedSteps;\n\n    return (\n      <div class=\"vertical-steps\">\n        {steps.map((step, i) => {\n          const state = this.resolveState(i, step);\n          const isLast = i === steps.length - 1;\n          const isClickable = this.clickable && state === 'completed';\n\n          return (\n            <div\n              class={{ 'v-step': true, 'v-step--clickable': isClickable }}\n              key={i}\n              onClick={() => isClickable && this.stepClick.emit(i + 1)}\n            >\n              <div class=\"v-step__indicator\">\n                <div class={{ 'v-step__circle': true, [`v-step__circle--${state}`]: true }}>\n                  {state === 'completed' && this.showCheckIcon ? (\n                    <dropi-icon name=\"Check\" width=\"12px\" height=\"12px\" color=\"Neutral-White\" />\n                  ) : (\n                    <span class=\"v-step__number\">{i + 1}</span>\n                  )}\n                </div>\n                {!isLast && <div class={{ 'v-step__line': true, 'v-step__line--done': state === 'completed' }} />}\n              </div>\n              <span class={{ 'v-step__label': true, [`v-step__label--${state}`]: true }}>\n                {step.label}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-youtube-lazy-video.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-youtube-lazy-video.entry.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,g5BAAg5B,CAAC;;MCc56B,qBAAqB,GAAA,MAAA;;;;;IAExB,OAAO,GAAW,EAAE;;IAEpB,YAAY,GAAW,EAAE;;IAEzB,UAAU,GAAW,EAAE;IAEd,SAAS,GAAY,KAAK;AAE3C,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,OAAO,CAAA,eAAA,EAAkB,IAAI,CAAC,YAAY,MAAM;;AAElD,QAAA,OAAO,CAAA,2BAAA,EAA8B,IAAI,CAAC,OAAO,gBAAgB;;AAGnE,IAAA,IAAY,QAAQ,GAAA;AAClB,QAAA,OAAO,CAAA,8BAAA,EAAiC,IAAI,CAAC,OAAO,oCAAoC;;IAG1F,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,SAAS,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EAC3D,CAAC,IAAI,CAAC,SAAS,KACd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,MAAK,EAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,EAAA,EAC9D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,mBAAmB,IAAI,CAAC,OAAO,CAAA,CAAE,EAAA,CAAI,EACpE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,aAAa,EAAA,YAAA,EAAY,kBAAkB,EAAA,EACvD,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACpE,CACL,CACP,EACA,IAAI,CAAC,SAAS,KACb,+DACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EAAA,IAAA,EACf,OAAO,EAAC,MAAM,EAAA,CACd,CACH,CACG;;;;;;;","names":[],"sources":["src/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.css?tag=dropi-youtube-lazy-video&encapsulation=shadow","src/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.video-wrapper {\n  position: relative;\n  width: 100%;\n  padding-bottom: 56.25%;\n  background: var(--Neutral-Black);\n  overflow: hidden;\n  border-radius: 12px;\n}\n\n.video-wrapper iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n.thumbnail {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.3s ease;\n}\n\n.thumbnail:hover img {\n  transform: scale(1.05);\n}\n\n.play-button {\n  position: absolute;\n  color: white;\n  border: none;\n  border-radius: 50%;\n  width: 70px;\n  height: 70px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n  background: rgba(14, 17, 26, 0.6);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.play-button:hover {\n  background: rgba(0, 0, 0, 0.8);\n}\n\n@media screen and (max-width: 768px) {\n  .play-button {\n    width: 40px;\n    height: 40px;\n  }\n}\n","import { Component, Prop, State, h } from '@stencil/core';\n\n/**\n * @component dropi-youtube-lazy-video\n * Lazy-loads a YouTube video. Shows thumbnail until user clicks play.\n *\n * @example\n * <dropi-youtube-lazy-video video-id=\"dQw4w9WgXcQ\" video-title=\"Never Gonna Give You Up\"></dropi-youtube-lazy-video>\n */\n@Component({\n  tag: 'dropi-youtube-lazy-video',\n  styleUrl: 'dropi-youtube-lazy-video.css',\n  shadow: true,\n})\nexport class DropiYoutubeLazyVideo {\n  /** YouTube video ID */\n  @Prop() videoId: string = '';\n  /** Local asset thumbnail path (without /assets/images/ prefix and .png extension) */\n  @Prop() thumbnailSrc: string = '';\n  /** Video title for iframe accessibility */\n  @Prop() videoTitle: string = '';\n\n  @State() private isPlaying: boolean = false;\n\n  private get thumbnail(): string {\n    if (this.thumbnailSrc) {\n      return `/assets/images/${this.thumbnailSrc}.png`;\n    }\n    return `https://img.youtube.com/vi/${this.videoId}/hqdefault.jpg`;\n  }\n\n  private get videoUrl(): string {\n    return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;\n  }\n\n  render() {\n    return (\n      <div class={`video-wrapper${this.isPlaying ? ' playing' : ''}`}>\n        {!this.isPlaying && (\n          <div class=\"thumbnail\" onClick={() => { this.isPlaying = true; }}>\n            <img src={this.thumbnail} alt={`Video thumbnail ${this.videoId}`} />\n            <button class=\"play-button\" aria-label=\"Reproducir video\">\n              <dropi-icon name=\"Play\" width=\"17px\" height=\"21px\" color=\"Neutral-White\" />\n            </button>\n          </div>\n        )}\n        {this.isPlaying && (\n          <iframe\n            src={this.videoUrl}\n            title={this.videoTitle}\n            frameborder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            loading=\"lazy\"\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}