npm - @dropi/ui - Versions diffs - 0.1.51 → 0.1.53 - Mend

@dropi/ui 0.1.51 → 0.1.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (716) hide show

package/dist/dropi-ui/dropi-steps.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.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 dropiStepsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01)}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__step{display:flex;flex-direction:column;align-items:center;flex:1}.stepper__circle-wrap{display:flex;align-items:center;width:100%}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500)}.stepper__line--invisible{background:transparent}.stepper__circle{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);flex-shrink:0;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Neutral-White);border:2px solid var(--Gray-Gray-200);color:var(--Gray-Gray-400)}.stepper__circle--focus{background:var(--Neutral-White);border:2px solid var(--Primary-Primary-500);color:var(--Primary-Primary-500)}.stepper__circle--completed{background:var(--Primary-Primary-500);border:2px solid var(--Primary-Primary-500);color:var(--Neutral-White)}.stepper__label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:var(--Size-2);text-align:center;padding:0 4px}.stepper__title{font-size:var(--font-size-s);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-400)}.stepper__desc{font-size:var(--font-size-xs);color:var(--Gray-Gray-400)}.stepper__step--focus .stepper__title{color:var(--Gray-Gray-700);font-weight:var(--font-weight-bold)}.stepper__step--focus .stepper__desc{color:var(--Gray-Gray-500)}.stepper__step--completed .stepper__title{color:var(--Gray-Gray-600);font-weight:var(--font-weight-semibold)}.stepper__step--completed .stepper__desc{color:var(--Gray-Gray-500)}`;
 const DropiSteps = class {
     constructor(hostRef) {
@@ -37,11 +37,21 @@ const DropiSteps = class {
     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) => {
+        return (h("div", { key: '14c7581b46733cafda1dfbc3ffc6204ea1058aba', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
+            const isFirst = 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)))));
+            const prevState = step > 1 ? this.stepState(step - 1) : null;
+            return (h("div", { class: { 'stepper__step': true, [`stepper__step--${state}`]: true }, key: step }, h("div", { class: "stepper__circle-wrap" }, h("div", { class: {
+                    'stepper__line': true,
+                    'stepper__line--done': prevState === 'completed',
+                    'stepper__line--invisible': isFirst,
+                } }), 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)), h("div", { class: {
+                    'stepper__line': true,
+                    'stepper__line--done': state === 'completed' || state === 'focus',
+                    'stepper__line--invisible': isLast,
+                } })), label && (h("div", { class: "stepper__label" }, label.title && h("span", { class: "stepper__title" }, label.title), label.description && h("span", { class: "stepper__desc" }, label.description)))));
         })));
     }
 };

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

	@@ -1 +1 @@
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}
1	+ {"file":"dropi-steps.entry.js","mappings":"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","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; }\nbutton, input, select, textarea { font-family: var(--font-family-01); }\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}\n\n/ ── Circle row: [left-line][circle][right-line] ────────── /\n.stepper__circle-wrap {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.stepper__line {\n flex: 1;\n height: 2px;\n background: var(--Gray-Gray-200);\n transition: background 0.2s;\n}\n\n.stepper__line--done {\n background: var(--Primary-Primary-500);\n}\n\n.stepper__line--invisible {\n background: transparent;\n}\n\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 font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n flex-shrink: 0;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.stepper__circle--pending {\n background: var(--Neutral-White);\n border: 2px solid var(--Gray-Gray-200);\n color: var(--Gray-Gray-400);\n}\n\n.stepper__circle--focus {\n background: var(--Neutral-White);\n border: 2px solid var(--Primary-Primary-500);\n color: var(--Primary-Primary-500);\n}\n\n.stepper__circle--completed {\n background: var(--Primary-Primary-500);\n border: 2px solid var(--Primary-Primary-500);\n color: var(--Neutral-White);\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);\n text-align: center;\n padding: 0 4px;\n}\n\n.stepper__title {\n font-size: var(--font-size-s);\n font-weight: var(--font-weight-semibold);\n color: var(--Gray-Gray-400);\n}\n\n.stepper__desc {\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-400);\n}\n\n.stepper__step--focus .stepper__title {\n color: var(--Gray-Gray-700);\n font-weight: var(--font-weight-bold);\n}\n.stepper__step--focus .stepper__desc {\n color: var(--Gray-Gray-500);\n}\n\n.stepper__step--completed .stepper__title {\n color: var(--Gray-Gray-600);\n font-weight: var(--font-weight-semibold);\n}\n.stepper__step--completed .stepper__desc {\n color: var(--Gray-Gray-500);\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 isFirst = step === 1;\n const isLast = step === this.stepsCount;\n const prevState = step > 1 ? this.stepState(step - 1) : null;\n\n return (\n <div class={{ 'stepper__step': true, [`stepper__step--${state}`]: true }} key={step}>\n <div class=\"stepper__circle-wrap\">\n <div class={{\n 'stepper__line': true,\n 'stepper__line--done': prevState === 'completed',\n 'stepper__line--invisible': isFirst,\n }} />\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 <div class={{\n 'stepper__line': true,\n 'stepper__line--done': state === 'completed' \|\| state === 'focus',\n 'stepper__line--invisible': isLast,\n }} />\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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.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 dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.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) {
@@ -16,7 +16,7 @@ const DropiSwitch = class {
     }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Whether the switch is on */
     isChecked = false;
     /** Whether the switch is disabled */
@@ -35,7 +35,7 @@ const DropiSwitch = class {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: 'b3321fd96a1487210a920f5494708dc2eb05f10c', class: "toggle-switch" }, h("input", { key: 'ee7cfecf443a1c839ce145ade18cc3ff15924816', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'c0800bd9a7f52cf666b3e475265da223b852be9a', class: "slider" })));
+        return (h("label", { key: '7dc67521be6d2ac8999086845b353547334a493d', class: "toggle-switch" }, h("input", { key: '3e31957e1a963027a6006189850a57c51e3a70c9', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '72d5f6c239667dd4a209d1eff483bf951cd1c67c', class: "slider" })));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"dropi-switch.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,~~wuBAAwuB~~,CAAC;;~~MCY1vB~~,WAAW,GAAA,MAAA;;;;;;;;;;;;AACH,IAAA,SAAS;;~~IAGH~~,IAAI~~,GAAW,EAAE~~;;~~IAGF~~,SAAS,GAAY,KAAK;;IAEzC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;;IAGhD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;;AAInD,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,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGvC,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, AttachInternals, Watch, 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 @AttachInternals() internals: ElementInternals;\n\n /* Name for native form submission /\n @Prop({ reflect: true }) name: string ~~= ''~~;\n\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() dropiChange: EventEmitter<boolean>;\n\n @Watch('isChecked')\n checkedChanged(val: boolean) {\n this.internals.setFormValue(val ? 'on' : null);\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.isChecked ? 'on' : null);\n }\n\n\n private onToggleChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.isChecked = input.checked;\n this.dropiChange.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}
1	+ {"file":"dropi-switch.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,4zBAA4zB,CAAC;;MCY90B,WAAW,GAAA,MAAA;;;;;;;;;;;;AACH,IAAA,SAAS;;AAGH,IAAA,IAAI;;IAGW,SAAS,GAAY,KAAK;;IAEzC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;;IAGhD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;;AAInD,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,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGvC,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; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\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, AttachInternals, Watch, 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 @AttachInternals() internals: ElementInternals;\n\n /* Name for native form submission /\n @Prop({ reflect: true }) name!: string;\n\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() dropiChange: EventEmitter<boolean>;\n\n @Watch('isChecked')\n checkedChanged(val: boolean) {\n this.internals.setFormValue(val ? 'on' : null);\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.isChecked ? 'on' : null);\n }\n\n\n private onToggleChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.isChecked = input.checked;\n this.dropiChange.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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.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 dropiTableCss = () => `:host{display:block;font-family:var(--font-family-01, 'Inter', sans-serif);width:100%;min-width:0}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::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) {
@@ -253,7 +253,7 @@ const DropiTable = class {
         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, onDropiInput: (e) => {
+        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", { inputId: "_table-search", name: "_table-search", placeholder: "Buscar", value: this.searchTerm, onDropiInput: (e) => {
                 this.searchTerm = e.detail;
                 this.dropiSearch.emit(e.detail);
                 this.dropiSearchChangeAngular.emit(e.detail);
@@ -264,11 +264,11 @@ const DropiTable = class {
                 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: () => {
+            } }, h("dropi-checkbox", { name: "_table-col-toggle", 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, onDropiChange: (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), onDropiChange: () => 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 > 2 ? (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.dropiActionClick.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.dropiActionClick.emit({ row, action }); } })))))))))))))), this.showPaginator && (h("div", { class: "pagination" }, h("div", { class: "page-size-selector" }, h("label", null, "Mostrar"), h("select", { onChange: (e) => {
+            } }, h("dropi-checkbox", { name: "_table-col-toggle-all", 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", { name: "_table-select-all", checked: allSelected, onDropiChange: (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", { name: "_table-row-select", checked: this.selectedKeys.has(i), onDropiChange: () => 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 > 2 ? (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.dropiActionClick.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.dropiActionClick.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);

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

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

package/dist/dropi-ui/dropi-tabs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiTabsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White, #ffffff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-s,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:var(--font-weight-light);color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background-color:var(--Primary-Primary-500, #F49A3D);color:var(--Neutral-White)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}`;
+const dropiTabsCss = () => `:host{display:block;font-family:var(--font-family-01, 'Inter', sans-serif);width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White, #ffffff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-s,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:var(--font-weight-light);color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background-color:var(--Primary-Primary-500, #F49A3D);color:var(--Neutral-White)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}`;
 const DropiTabs = class {
     constructor(hostRef) {
@@ -31,7 +31,7 @@ const DropiTabs = class {
         this.dropiIndexChange.emit(tab);
     }
     render() {
-        return (h("div", { key: '5e8facb7611d02c9b7fad97f676a50ce419c6852', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (h("div", { key: '51afd113d7c502b933b93e775b3c0fe2ac1ffd1d', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (h("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, h("span", { class: "tab-label-row" }, h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
                 ? h("dropi-icon", { name: "Check-circle", iconWidth: "12px", iconHeight: "12px", color: "Success-Success-500" })

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

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