@dropi/ui 0.1.37 → 0.1.41

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

@@ -0,0 +1 @@
+{"file":"dropi-sidebar.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,8xCAA8xC,CAAC;;MC+BjzC,YAAY,GAAA,MAAA;;;;;AACvB;;;AAGG;IACsB,iBAAiB,GAAiC,EAAE;AAE7E;;AAEG;AACM,IAAA,cAAc;IAEd,gBAAgB,GAAwB,EAAE;AAGnD,IAAA,gBAAgB,CAAC,QAAsC,EAAA;QACrD,IAAI,CAAC,gBAAgB,GAAG,OAAO,QAAQ,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ,IAAI,EAAE,CAAC;;IAGhG,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGvC,IAAA,oBAAoB,CAAC,EAAU,EAAA;AACrC,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;AAChF,QAAA,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE;YACzB,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAC3C,QAAQ,CAAC,cAAc,CAAC,GAAG;gBACzB,GAAG,QAAQ,CAAC,cAAc,CAAC;AAC3B,gBAAA,YAAY,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;aACzC;AACD,YAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;;AAI5B,IAAA,WAAW,CAAC,WAA8B,EAAA;AAChD,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC;AAErC,QAAA,IAAI,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AAC3D,YAAA,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,CAAC;;;AAIrC,IAAA,cAAc,CAAC,WAA8B,EAAA;AACnD,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGvC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wBAAwB,EAAA,EAChC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,IAAG;YAChC,OAAO;;AAEL,gBAAA,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,wBAAA,gBAAgB,EAAE,IAAI;AACtB,wBAAA,uBAAuB,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM;AACtC,wBAAA,wBAAwB,EAAE,CAAC,IAAI,CAAC;AACjC,qBAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAA,EAErC,CAAA,CAAA,YAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,MAAM,EACzB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,qBAAqB,GAAG,eAAe,EAAA,CAChD,EAEd,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,EAEvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACxC,CAAA,CAAA,YAAA,EAAA,EACE,KAAK,EAAE;AACL,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,gBAAgB,EAAE,CAAC,CAAC,IAAI,CAAC;AAC1B,qBAAA,EACD,IAAI,EAAC,eAAe,EACpB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,qBAAqB,GAAG,eAAe,EAAA,CAChD,CACf,CACG;;AAGN,gBAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACvC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,SAAS,KACzB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,wBAAA,kBAAkB,EAAE,IAAI;AACxB,wBAAA,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;AACvC,wBAAA,0BAA0B,EAAE,CAAC,SAAS,CAAC,MAAM;AAC7C,wBAAA,yBAAyB,EAAE,CAAC,CAAC,SAAS,CAAC;AACxC,qBAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI,EAAG,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,EAAE,EAAA,EAEvE,SAAS,CAAC,IAAI,CACX,CACP,CAAC;aAEL;SACF,CAAC,CACE;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-sidebar/dropi-sidebar.css?tag=dropi-sidebar&encapsulation=shadow","src/components/dropi-sidebar/dropi-sidebar.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.main-sidebar-container {\n  margin-top: 20px;\n}\n\n.sidebar-option {\n  height: 45px;\n  display: flex;\n  align-items: center;\n  position: relative;\n  font-weight: var(--font-weight-medium, 500);\n  gap: var(--Size-3, 12px);\n  padding: var(--Size-3, 12px);\n  font-size: var(--font-size-s, 12px);\n  border-radius: var(--Border-1, 4px);\n  min-width: 147px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.sidebar-option .arrow {\n  position: absolute;\n  right: 17px;\n  transition: transform 0.3s ease;\n}\n\n.sidebar-option .arrow-expanded {\n  transform: rotate(180deg);\n}\n\n.sidebar-default-option {\n  color: var(--Gray-Gray-500, #68738f);\n}\n\n.sidebar-active-option {\n  color: var(--Primary-Primary-500, #f49a3d);\n  background-color: #fef8f1;\n}\n\n.sidebar-sub-item {\n  overflow: hidden;\n  max-height: 0;\n  height: auto;\n  font-weight: var(--font-weight-medium, 500);\n  gap: var(--Size-3, 12px);\n  font-size: var(--font-size-s, 12px);\n  cursor: pointer;\n  opacity: 0;\n  padding: 0 var(--Size-3, 12px) 0 var(--Size-8, 32px);\n  transition:\n    max-height 0.3s ease-out,\n    opacity 0.3s ease-out,\n    padding 0.3s ease-out;\n  user-select: none;\n}\n\n.sidebar-sub-item.sidebar-expanded {\n  max-height: 200px;\n  opacity: 1;\n  padding: var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-8, 32px);\n}\n\n.sidebar-sub-item-default {\n  color: var(--Gray-Gray-500, #68738f);\n}\n\n.sidebar-sub-item-active {\n  color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.space-between {\n  justify-content: space-between;\n}\n","import { Component, Prop, Event, EventEmitter, h, State, Watch } from '@stencil/core';\n\nexport interface SidebarItem {\n  id: number;\n  icon: string;\n  text: string;\n  route: string;\n  expandedMenu?: boolean;\n  active?: boolean;\n}\n\nexport interface SidebarProperties {\n  id: number;\n  icon: string;\n  text: string;\n  route: string;\n  expandedMenu?: boolean;\n  active?: boolean;\n  subItems?: SidebarItem[];\n}\n\n/**\n * @component dropi-sidebar\n * Sidebar list container (Strictly ported from Angular core). \n * This component handles rendering the sidebar items array natively.\n */\n@Component({\n  tag: 'dropi-sidebar',\n  styleUrl: 'dropi-sidebar.css',\n  shadow: true,\n})\nexport class DropiSidebar {\n  /**\n   * Define las propiedades y la cantidad de elementos a renderizar.\n   * Pasarlo como JSON string o directamente como array de SidebarProperties.\n   */\n  @Prop({ mutable: true }) sideBarProperties: SidebarProperties[] | string = [];\n  \n  /**\n   * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.\n   */\n  @Event() onIndexChanged: EventEmitter<SidebarProperties>;\n\n  @State() parsedProperties: SidebarProperties[] = [];\n\n  @Watch('sideBarProperties')\n  watchPropHandler(newValue: SidebarProperties[] | string) {\n    this.parsedProperties = typeof newValue === 'string' ? JSON.parse(newValue) : (newValue || []);\n  }\n\n  componentWillLoad() {\n    this.watchPropHandler(this.sideBarProperties);\n  }\n\n  private setExpandedPropertie(id: number) {\n    const propertieIndex = this.parsedProperties.findIndex((item) => item.id === id);\n    if (propertieIndex !== -1) {\n      const newProps = [...this.parsedProperties];\n      newProps[propertieIndex] = {\n        ...newProps[propertieIndex],\n        expandedMenu: !newProps[propertieIndex].expandedMenu\n      };\n      this.parsedProperties = newProps;\n    }\n  }\n\n  private onItemClick(itemClicked: SidebarProperties) {\n    this.onIndexChanged.emit(itemClicked);\n    \n    if (itemClicked.subItems && itemClicked.subItems.length > 0) {\n      this.setExpandedPropertie(itemClicked.id);\n    }\n  }\n\n  private onSubItemClick(itemClicked: SidebarProperties) {\n    this.onIndexChanged.emit(itemClicked);\n  }\n\n  render() {\n    return (\n      <div class=\"main-sidebar-container\">\n        {this.parsedProperties.map(item => {\n          return [\n            /* Item Principal */\n            <div\n              class={{\n                'sidebar-option': true,\n                'sidebar-active-option': !!item.active,\n                'sidebar-default-option': !item.active\n              }}\n              onClick={() => this.onItemClick(item)}\n            >\n              <dropi-icon\n                name={item.icon || 'Cube'}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                color={item.active ? 'Primary-Primary-500' : 'Gray-Gray-500'}\n              ></dropi-icon>\n              \n              <span>{item.text}</span>\n              \n              {item.subItems && item.subItems.length > 0 && (\n                <dropi-icon\n                  class={{\n                    'arrow': true,\n                    'arrow-expanded': !!item.expandedMenu\n                  }}\n                  name=\"Dropdown-down\"\n                  iconWidth=\"20px\"\n                  iconHeight=\"20px\"\n                  color={item.active ? 'Primary-Primary-500' : 'Gray-Gray-500'}\n                ></dropi-icon>\n              )}\n            </div>,\n\n            /* SubItems Renderizados al mismo nivel DOM que instruye Angular ng-container */\n            item.subItems && item.subItems.length > 0 && (\n              item.subItems.map(subOption => (\n                <div\n                  class={{\n                    'sidebar-sub-item': true,\n                    'sidebar-expanded': !!item.expandedMenu,\n                    'sidebar-sub-item-default': !subOption.active,\n                    'sidebar-sub-item-active': !!subOption.active\n                  }}\n                  onClick={(e) => { e.stopPropagation(); this.onSubItemClick(subOption); }}\n                >\n                  {subOption.text}\n                </div>\n              ))\n            )\n          ];\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-simple-stepper.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiSimpleStepperCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__item{display:flex;flex-direction:column;align-items:center;flex:1}.stepper__circle-row{display:flex;align-items:center;width:100%}.stepper__circle{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.stepper__circle--active{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__dot{width:8px;height:8px;border-radius:50%;background:var(--Neutral-White, #ffffff);display:block}.stepper__circle--pending .stepper__dot{background:var(--Gray-Gray-400, #858ea6)}.stepper__number{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Neutral-White, #ffffff)}.stepper__circle--pending .stepper__number{color:var(--Gray-Gray-500, #69738c)}.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{margin-top:6px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);text-align:center}`;
+
+const DropiSimpleStepper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Total steps */
+    stepsCount = 3;
+    /** Circle content: 'point' (dot) | 'number' */
+    typeStep = 'point';
+    /** Current active step (1-based) */
+    currentStep = 0;
+    /** Labels shown below each step. Pass as JSON string or array */
+    labelStepper = [];
+    /** Flow mode (visual only) */
+    flowMode = 'Simultaneous';
+    /** White-label brand identifier (matches Angular `white_brand`) */
+    white_brand = 'dropi';
+    get parsedLabels() {
+        if (typeof this.labelStepper === 'string') {
+            try {
+                return JSON.parse(this.labelStepper);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.labelStepper || [];
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (h("div", { key: 'f67f6e9404bf67700c46b987923836d5251ae1c4', class: "stepper" }, steps.map((step, i) => {
+            const isCompleted = step < this.currentStep;
+            const isActive = step === this.currentStep;
+            const isLast = i === steps.length - 1;
+            const label = labels[i];
+            return (h("div", { class: "stepper__item", key: step }, h("div", { class: "stepper__circle-row" }, h("div", { class: {
+                    'stepper__circle': true,
+                    'stepper__circle--active': isActive,
+                    'stepper__circle--completed': isCompleted,
+                    'stepper__circle--pending': !isActive && !isCompleted,
+                } }, this.typeStep === 'point' ? (h("span", { class: "stepper__dot" })) : (h("span", { class: "stepper__number" }, step))), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': isCompleted } })), label && h("span", { class: "stepper__label" }, label)));
+        })));
+    }
+};
+DropiSimpleStepper.style = dropiSimpleStepperCss();
+
+export { DropiSimpleStepper as dropi_simple_stepper };
+//# sourceMappingURL=dropi-simple-stepper.entry.esm.js.map
+
+//# sourceMappingURL=dropi-simple-stepper.entry.js.map

package/dist/dropi-ui/dropi-simple-stepper.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-simple-stepper.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,09CAA09C,CAAC;;MCcn/C,kBAAkB,GAAA,MAAA;;;;;IAErB,UAAU,GAAW,CAAC;;IAEtB,QAAQ,GAAgB,OAAO;;IAE/B,WAAW,GAAW,CAAC;;IAEvB,YAAY,GAAsB,EAAE;;IAEpC,QAAQ,GAAa,cAAc;;IAEnC,WAAW,GAAW,OAAO;AAErC,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;AACzC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAEjE,QAAA,OAAO,IAAI,CAAC,YAAY,IAAI,EAAE;;IAGhC,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,EAAE,CAAC,KAAI;AACrB,YAAA,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW;AAC3C,YAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,WAAW;YAC1C,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACrC,YAAA,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;AAEvB,YAAA,QACE,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE;AACV,oBAAA,iBAAiB,EAAE,IAAI;AACvB,oBAAA,yBAAyB,EAAE,QAAQ;AACnC,oBAAA,4BAA4B,EAAE,WAAW;AACzC,oBAAA,0BAA0B,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW;AACtD,iBAAA,EAAA,EACE,IAAI,CAAC,QAAQ,KAAK,OAAO,IACxB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAG,KAE7B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAAE,IAAI,CAAQ,CAC5C,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,qBAAqB,EAAE,WAAW,EAAE,GAAI,CACrF,EACL,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,IAAE,KAAK,CAAQ,CACjD;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-simple-stepper/dropi-simple-stepper.css?tag=dropi-simple-stepper&encapsulation=shadow","src/components/dropi-simple-stepper/dropi-simple-stepper.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.stepper__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n}\n\n.stepper__circle-row {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n/* ── Circle ─────────────────────────────────────────────── */\n.stepper__circle {\n  width: 24px;\n  height: 24px;\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.stepper__circle--pending {\n  background: var(--Gray-Gray-100, #e6eaf2);\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n}\n\n.stepper__circle--active {\n  background: var(--Primary-Primary-500, #f49a3d);\n  border: 2px solid 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}\n\n.stepper__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--Neutral-White, #ffffff);\n  display: block;\n}\n\n.stepper__circle--pending .stepper__dot {\n  background: var(--Gray-Gray-400, #858ea6);\n}\n\n.stepper__number {\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Neutral-White, #ffffff);\n}\n\n.stepper__circle--pending .stepper__number {\n  color: var(--Gray-Gray-500, #69738c);\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/* ── Label ──────────────────────────────────────────────── */\n.stepper__label {\n  margin-top: 6px;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  text-align: center;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type StepperType = 'point' | 'number';\nexport type FlowMode = 'Simultaneous' | 'Sequential';\n\n/**\n * @component dropi-simple-stepper\n * Compact horizontal stepper using dots or numbers.\n */\n@Component({\n  tag: 'dropi-simple-stepper',\n  styleUrl: 'dropi-simple-stepper.css',\n  shadow: true,\n})\nexport class DropiSimpleStepper {\n  /** Total steps */\n  @Prop() stepsCount: number = 3;\n  /** Circle content: 'point' (dot) | 'number' */\n  @Prop() typeStep: StepperType = 'point';\n  /** Current active step (1-based) */\n  @Prop() currentStep: number = 0;\n  /** Labels shown below each step. Pass as JSON string or array */\n  @Prop() labelStepper: string[] | string = [];\n  /** Flow mode (visual only) */\n  @Prop() flowMode: FlowMode = 'Simultaneous';\n  /** White-label brand identifier (matches Angular `white_brand`) */\n  @Prop() white_brand: string = 'dropi';\n\n  private get parsedLabels(): string[] {\n    if (typeof this.labelStepper === 'string') {\n      try { return JSON.parse(this.labelStepper); } catch { return []; }\n    }\n    return this.labelStepper || [];\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, i) => {\n          const isCompleted = step < this.currentStep;\n          const isActive = step === this.currentStep;\n          const isLast = i === steps.length - 1;\n          const label = labels[i];\n\n          return (\n            <div class=\"stepper__item\" key={step}>\n              <div class=\"stepper__circle-row\">\n                <div class={{\n                  'stepper__circle': true,\n                  'stepper__circle--active': isActive,\n                  'stepper__circle--completed': isCompleted,\n                  'stepper__circle--pending': !isActive && !isCompleted,\n                }}>\n                  {this.typeStep === 'point' ? (\n                    <span class=\"stepper__dot\" />\n                  ) : (\n                    <span class=\"stepper__number\">{step}</span>\n                  )}\n                </div>\n                {!isLast && <div class={{ 'stepper__line': true, 'stepper__line--done': isCompleted }} />}\n              </div>\n              {label && <span class=\"stepper__label\">{label}</span>}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,58 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiSkeletonCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.skeleton-lines{display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(     90deg,     var(--Gray-Gray-100, #e6eaf2) 25%,     var(--Gray-Gray-50, #f7f8fa) 50%,     var(--Gray-Gray-100, #e6eaf2) 75%   );background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+
+const DropiSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Shape variant: 'text' | 'circle' | 'rect' */
+    variant = 'text';
+    /** Width (CSS value, e.g. "100%", "200px") */
+    width = '';
+    /** Height (CSS value, e.g. "16px", "48px") */
+    height = '';
+    /** Border radius override */
+    radius = '8px';
+    /** Number of lines to repeat (text variant only) */
+    lines = 1;
+    /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */
+    baseColor = '#f6f7f8';
+    getBackground() {
+        const color = (this.baseColor ?? '#f6f7f8').startsWith('#') ? (this.baseColor ?? '#f6f7f8') : `var(--${this.baseColor})`;
+        return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;
+    }
+    getRadius() {
+        if (this.radius)
+            return this.radius;
+        if (this.variant === 'circle')
+            return '50%';
+        if (this.variant === 'text')
+            return '4px';
+        return 'var(--Border-1, 4px)';
+    }
+    render() {
+        if (this.variant === 'text' && this.lines > 1) {
+            return (h("div", { class: "skeleton-lines" }, Array.from({ length: this.lines }).map((_, i) => (h("div", { class: "skeleton", style: {
+                    width: i === this.lines - 1 ? '70%' : this.width,
+                    height: this.height,
+                    borderRadius: this.getRadius(),
+                    background: this.getBackground(),
+                    backgroundSize: '1000px 104px',
+                } })))));
+        }
+        return (h("div", { class: "skeleton", style: {
+                width: this.width,
+                height: this.height,
+                borderRadius: this.getRadius(),
+                background: this.getBackground(),
+                backgroundSize: '1000px 104px',
+            } }));
+    }
+};
+DropiSkeleton.style = dropiSkeletonCss();
+
+export { DropiSkeleton as dropi_skeleton };
+//# sourceMappingURL=dropi-skeleton.entry.esm.js.map
+
+//# sourceMappingURL=dropi-skeleton.entry.js.map

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/dropi-ui/dropi-steps.entry.js

@@ -0,0 +1,53 @@
+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)}`;
+
+const DropiSteps = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Total number of steps */
+    stepsCount = 3;
+    /** Show step number inside the circle */
+    showNumberOfStep = true;
+    /** Active/current step index (1-based) */
+    currentStep = 0;
+    /** Labels for each step. Pass as JSON string or array */
+    stepLabels = [];
+    /** Visual state applied to the active step (matches Angular `state`) */
+    state = 'pending';
+    get parsedLabels() {
+        if (typeof this.stepLabels === 'string') {
+            try {
+                return JSON.parse(this.stepLabels);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.stepLabels || [];
+    }
+    stepState(index) {
+        if (index < this.currentStep)
+            return 'completed';
+        if (index === this.currentStep)
+            return 'focus';
+        return 'pending';
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (h("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
+            const state = this.stepState(step);
+            const label = labels[step - 1];
+            const isLast = step === this.stepsCount;
+            return (h("div", { class: "stepper__step", key: step }, h("div", { class: "stepper__circle-wrap" }, h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (h("dropi-icon", { name: "Check", iconWidth: "12px", iconHeight: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? h("span", null, step) : null)), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (h("div", { class: "stepper__label" }, label.title && h("span", { class: "stepper__title" }, label.title), label.description && h("span", { class: "stepper__desc" }, label.description)))));
+        })));
+    }
+};
+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,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,KAEpF,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\" iconWidth=\"12px\" iconHeight=\"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/dropi-ui/dropi-switch.entry.js

@@ -0,0 +1,31 @@
+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}`;
+
+const DropiSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onChange = createEvent(this, "onChange", 7);
+    }
+    /** Whether the switch is on */
+    isChecked = false;
+    /** Whether the switch is disabled */
+    disabled = false;
+    /** Emitted when the toggle state changes */
+    onChange;
+    onToggleChange(event) {
+        const input = event.target;
+        this.isChecked = input.checked;
+        this.onChange.emit(this.isChecked);
+    }
+    render() {
+        return (h("label", { key: 'c12214e051cfd7ca50d0df9fb3374ee9f3b72c1a', class: "toggle-switch" }, h("input", { key: '2821a935d4614447900d35028261b5c6620c104f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '1370a1ea4b9bb48849f9d998eac3a36ac3fa75b6', class: "slider" })));
+    }
+    static get formAssociated() { return true; }
+};
+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/dropi-ui/dropi-table.entry.js

@@ -0,0 +1,300 @@
+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)}}`;
+
+const DropiTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiSort = createEvent(this, "dropiSort", 7);
+        this.dropiSelection = createEvent(this, "dropiSelection", 7);
+        this.dropiRowClick = createEvent(this, "dropiRowClick", 7);
+        this.dropiSearch = createEvent(this, "dropiSearch", 7);
+        this.dropiPageChange = createEvent(this, "dropiPageChange", 7);
+        this.dropiPageSizeChange = createEvent(this, "dropiPageSizeChange", 7);
+        this.dropiAction = createEvent(this, "dropiAction", 7);
+        this.rowsSelected = createEvent(this, "rowsSelected", 7);
+        this.actionClicked = createEvent(this, "actionClicked", 7);
+        this.onPageChange = createEvent(this, "onPageChange", 7);
+        this.onSizeChange = createEvent(this, "onSizeChange", 7);
+        this.onSortChange = createEvent(this, "onSortChange", 7);
+        this.onSearchChange = createEvent(this, "onSearchChange", 7);
+        this.expandChildren = createEvent(this, "expandChildren", 7);
+    }
+    /** Column definitions */
+    columns = [];
+    /** Row data */
+    rows = [];
+    /** Show checkbox column */
+    showCheckbox = false;
+    /** Show loading skeleton */
+    loading = false;
+    /** Empty state message */
+    emptyMessage = 'No hay datos disponibles';
+    /** Table title */
+    tableTitle = '';
+    /** Show search input */
+    showSearch = false;
+    /** Show column selector button */
+    showColumnSelector = false;
+    /** Show paginator */
+    showPaginator = false;
+    /** Page sizes options */
+    pageSizes = [5, 10, 25, 50];
+    /** Current page (1-based) */
+    currentPage = 1;
+    /** Total pages */
+    totalPages = 1;
+    /** Show row actions (3-dot menu or inline icons) */
+    rowActions = [];
+    // ── Angular-parity props ─────────────────────────────────────
+    /**
+     * Column definitions — matches Angular `headers: DropiTableColumn[]`.
+     * Alias of `columns`; when provided, takes precedence.
+     */
+    headers = [];
+    /**
+     * Row data — matches Angular `data: DropiTableRow[]`.
+     * Alias of `rows`; when provided, takes precedence.
+     */
+    data = [];
+    /** Pre-selected row ids (matches Angular `selectedRowIds`) */
+    selectedRowIds = null;
+    /** Child / expanded rows data (matches Angular `childData`) */
+    childData = [];
+    /** Visible child rows (matches Angular `visibleRowsChildrens`) */
+    visibleRowsChildrens = [];
+    /** Table-level configuration object (matches Angular `dropiTableConfiguration`) */
+    dropiTableConfiguration = null;
+    /** Backend pagination / filter params (matches Angular `dropiTableBackendParams`) */
+    dropiTableBackendParams = null;
+    /** Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`) */
+    isCursorPagination = false;
+    parsedColumns = [];
+    parsedRows = [];
+    parsedPageSizes = [5, 10, 25, 50];
+    parsedRowActions = [];
+    sortKey = '';
+    sortDir = null;
+    sortAsc = true;
+    selectedKeys = new Set();
+    searchTerm = '';
+    pageSize = 5;
+    showColumnMenu = false;
+    hiddenColumns = new Set();
+    openActionRow = -1;
+    dropiSort;
+    dropiSelection;
+    dropiRowClick;
+    dropiSearch;
+    dropiPageChange;
+    dropiPageSizeChange;
+    dropiAction;
+    // ── Angular-parity events ────────────────────────────────────
+    /** Matches Angular `rowsSelected` */
+    rowsSelected;
+    /** Matches Angular `actionClicked` */
+    actionClicked;
+    /** Matches Angular `onPageChange` */
+    onPageChange;
+    /** Matches Angular `onSizeChange` */
+    onSizeChange;
+    /** Matches Angular `onSortChange` */
+    onSortChange;
+    /** Matches Angular `onSearchChange` */
+    onSearchChange;
+    /** Matches Angular `expandChildren` */
+    expandChildren;
+    columnsChanged(val) {
+        this.parsedColumns = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    rowsChanged(val) {
+        this.parsedRows = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        this.selectedKeys = new Set();
+    }
+    pageSizesChanged(val) {
+        this.parsedPageSizes = typeof val === 'string' ? JSON.parse(val) : (val || [5, 10, 25, 50]);
+        this.pageSize = this.parsedPageSizes[0] ?? 5;
+    }
+    rowActionsChanged(val) {
+        this.parsedRowActions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    headersChanged(val) {
+        // `headers` is an alias for `columns`
+        const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        if (parsed.length > 0)
+            this.parsedColumns = parsed;
+    }
+    dataChanged(val) {
+        // `data` is an alias for `rows`
+        const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        if (parsed.length > 0) {
+            this.parsedRows = parsed;
+            this.selectedKeys = new Set();
+        }
+    }
+    componentWillLoad() {
+        // SSR hydration guard: if no data props provided, preserve server-rendered DOM
+        if (this.data == null && this.rows == null && this.headers == null && this.columns == null)
+            return;
+        // headers/data take precedence over columns/rows when provided
+        const headersSrc = (Array.isArray(this.headers) ? this.headers : []).length
+            ? this.headers : this.columns;
+        const dataSrc = (Array.isArray(this.data) ? this.data : []).length
+            ? this.data : this.rows;
+        this.columnsChanged(headersSrc);
+        this.rowsChanged(dataSrc);
+        this.pageSizesChanged(this.pageSizes);
+        this.rowActionsChanged(this.rowActions);
+    }
+    get visibleColumns() {
+        const hidden = this.hiddenColumns ?? new Set();
+        return (this.parsedColumns ?? []).filter(c => !hidden.has(c.key));
+    }
+    get filteredRows() {
+        if (!this.searchTerm)
+            return this.parsedRows;
+        const q = this.searchTerm.toLowerCase();
+        return this.parsedRows.filter(row => Object.values(row).some(v => String(v ?? '').toLowerCase().includes(q)));
+    }
+    get sortedRows() {
+        const rows = this.filteredRows;
+        if (!this.sortKey || !this.sortDir)
+            return rows;
+        const key = this.sortKey;
+        const dir = this.sortDir === 'asc' ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const av = a[key] ?? '';
+            const bv = b[key] ?? '';
+            if (av < bv)
+                return -dir;
+            if (av > bv)
+                return dir;
+            return 0;
+        });
+    }
+    get pagedRows() {
+        if (!this.showPaginator)
+            return this.sortedRows;
+        const start = (this.currentPage - 1) * this.pageSize;
+        return this.sortedRows.slice(start, start + this.pageSize);
+    }
+    handleSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.sortKey === col.key) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';
+            this.sortAsc = this.sortDir !== 'desc';
+            if (this.sortDir === null)
+                this.sortKey = '';
+        }
+        else {
+            this.sortKey = col.key;
+            this.sortDir = 'asc';
+            this.sortAsc = true;
+        }
+        this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });
+        this.onSortChange.emit({ key: this.sortKey, dir: this.sortDir });
+    }
+    toggleRow(idx) {
+        const next = new Set(this.selectedKeys);
+        if (next.has(idx))
+            next.delete(idx);
+        else
+            next.add(idx);
+        this.selectedKeys = next;
+        const selected = Array.from(next);
+        this.dropiSelection.emit(selected);
+        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
+    }
+    toggleAll(checked) {
+        this.selectedKeys = checked ? new Set(this.pagedRows.map((_, i) => i)) : new Set();
+        const selected = Array.from(this.selectedKeys);
+        this.dropiSelection.emit(selected);
+        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
+    }
+    renderCellValue(value) {
+        if (value === null || value === undefined)
+            return '—';
+        if (typeof value === 'object' && value.type) {
+            switch (value.type) {
+                case 'tag':
+                    return h("dropi-tag", { type: "secondary", state: value.typeTag, text: value.value });
+                case 'date':
+                    return (h("div", { class: "date-label" }, h("span", null, new Date(value.value).toLocaleDateString('es-CO')), !value.hideTime && h("span", null, new Date(value.value).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' }))));
+                case 'country':
+                    return (h("div", { class: "flag-container" }, value.flag && h("dropi-country-flags", { width: "24", height: "24", country: value.flag, style: { display: 'inline-flex' } }), h("span", null, value.value)));
+                case 'textIcon':
+                    return (h("div", { class: "text-icon-label" }, h("dropi-icon", { name: value.icon, iconWidth: "24px", iconHeight: "24px", color: value.iconColor || 'Gray-Gray-500' }), value.value && h("span", null, value.value)));
+                case 'status':
+                    return (h("div", { class: "status-label" }, h("div", { class: "status-dot" }, h("div", { class: `dot dot-${(value.status || '').toLowerCase()}` }), h("span", { class: "status-text" }, value.status)), value.value && h("span", { class: "status-description" }, value.value)));
+                case 'image':
+                    return (h("div", { class: "image-label" }, h("div", { class: "img-container" }, h("img", { src: value.imageUrl, alt: value.value })), h("span", null, value.value)));
+                case 'textWrap':
+                    return h("div", { class: "text-wrap-label", style: { maxWidth: value.maxWidth || '220px' } }, value.value);
+                default:
+                    return h("span", { class: "table-labels" }, String(value.value ?? '—'));
+            }
+        }
+        return h("span", { class: "table-labels" }, String(value));
+    }
+    render() {
+        // SSR hydration: if parsedRows not yet initialized, preserve server-rendered shadow DOM
+        if (this.parsedRows === undefined)
+            return null;
+        const rows = this.pagedRows;
+        const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
+        const hasActions = this.parsedRowActions.length > 0;
+        const cols = this.visibleColumns;
+        return (h("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.tableTitle) && (h("div", { class: "search-container" }, this.tableTitle && h("div", { class: "table-title Body-L-Bold" }, this.tableTitle), h("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (h("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
+                this.searchTerm = e.detail;
+                this.dropiSearch.emit(e.detail);
+                this.onSearchChange.emit(e.detail);
+            } })), this.showColumnSelector && (h("div", { class: "table-tools" }, h("div", { class: "column-selector-container" }, h("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, h("dropi-icon", { name: "list-table", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (h("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (h("div", { class: "column-selector-option", onClick: () => {
+                const next = new Set(this.hiddenColumns);
+                if (next.has(col.key))
+                    next.delete(col.key);
+                else
+                    next.add(col.key);
+                this.hiddenColumns = next;
+            } }, h("dropi-checkbox", { checked: !this.hiddenColumns.has(col.key) }), h("span", null, col.label)))), h("div", { class: "column-selector-footer" }, h("div", { class: "column-selector-all", onClick: () => {
+                this.hiddenColumns = this.hiddenColumns.size === 0
+                    ? new Set(this.parsedColumns.map(c => c.key))
+                    : new Set();
+            } }, h("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), h("span", null, "Mostrar / Ocultar todo"))))))))))), h("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, h("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, h("thead", null, h("tr", null, this.showCheckbox && (h("th", { class: "checkbox-header" }, h("dropi-checkbox", { checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (h("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, h("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("span", null, col.label), col.sortable && (h("div", { class: "order-icons" }, h("dropi-icon", { name: "Caret-up", iconWidth: "12px", iconHeight: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), h("dropi-icon", { name: "Caret-down", iconWidth: "12px", iconHeight: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && h("th", { class: "actions-header actions" }, "Acciones"))), h("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (h("tr", { class: "table-row" }, this.showCheckbox && h("td", null, h("div", { class: "skeleton skeleton--sm" })), cols.map(() => h("td", null, h("div", { class: "skeleton" }))), hasActions && h("td", null))))) : rows.length === 0 ? (h("tr", null, h("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, h("div", { class: "empty-table" }, h("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (h("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (h("td", { onClick: (e) => e.stopPropagation() }, h("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (h("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, h("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (h("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", iconWidth: "24px", iconHeight: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (h("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (h("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, h("dropi-icon", { name: action.icon, iconWidth: "20px", iconHeight: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (h("div", { class: "short-actions" }, this.parsedRowActions.map(action => (h("dropi-icon", { class: "action-icon", name: action.icon, iconWidth: "24px", iconHeight: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (h("div", { class: "pagination" }, h("div", { class: "page-size-selector" }, h("label", null, "Mostrar"), h("select", { onChange: (e) => {
+                this.pageSize = Number(e.target.value);
+                this.currentPage = 1;
+                this.dropiPageSizeChange.emit(this.pageSize);
+                this.onSizeChange.emit(this.pageSize);
+            } }, this.parsedPageSizes.map(s => (h("option", { value: s, selected: this.pageSize === s }, s))))), h("dropi-paginator", { totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: (e) => {
+                this.currentPage = e.detail;
+                this.dropiPageChange.emit(e.detail);
+                this.onPageChange.emit(e.detail);
+            } })))));
+    }
+    static get watchers() { return {
+        "columns": [{
+                "columnsChanged": 0
+            }],
+        "rows": [{
+                "rowsChanged": 0
+            }],
+        "pageSizes": [{
+                "pageSizesChanged": 0
+            }],
+        "rowActions": [{
+                "rowActionsChanged": 0
+            }],
+        "headers": [{
+                "headersChanged": 0
+            }],
+        "data": [{
+                "dataChanged": 0
+            }]
+    }; }
+};
+DropiTable.style = dropiTableCss();
+
+export { DropiTable as dropi_table };
+//# sourceMappingURL=dropi-table.entry.esm.js.map
+
+//# sourceMappingURL=dropi-table.entry.js.map