@dropi/ui 0.1.23 → 0.1.24

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.js

@@ -0,0 +1,221 @@
+import { h } from "@stencil/core";
+const OTP_LENGTH = 6;
+const RESEND_SECONDS = 30;
+/**
+ * @component dropi-otp-send-code
+ * 6-digit OTP input with countdown timer and resend capability.
+ */
+export class DropiOtpSendCode {
+    /** Delivery method label */
+    engine = 'email';
+    /** Contact info (email/phone to show in label) */
+    labelContact = '';
+    /** Show contact label */
+    showLabelContact = false;
+    /** Error message to display */
+    errorMessage = '';
+    digits = Array(OTP_LENGTH).fill('');
+    digitStates = Array(OTP_LENGTH).fill('idle');
+    countdown = RESEND_SECONDS;
+    canResend = false;
+    error = false;
+    inputs = [];
+    timer;
+    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    codeCompleted;
+    /** Emitted when resend is requested */
+    dropiResend;
+    componentDidLoad() { this.startCountdown(); }
+    disconnectedCallback() { clearInterval(this.timer); }
+    startCountdown() {
+        this.countdown = RESEND_SECONDS;
+        this.canResend = false;
+        clearInterval(this.timer);
+        this.timer = setInterval(() => {
+            this.countdown--;
+            if (this.countdown <= 0) {
+                clearInterval(this.timer);
+                this.canResend = true;
+            }
+        }, 1000);
+    }
+    handleInput(e, index) {
+        const val = e.target.value.replace(/\D/g, '').slice(-1);
+        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
+        newDigits[index] = val;
+        this.digits = newDigits;
+        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
+        newStates[index] = val ? 'filled' : 'idle';
+        this.digitStates = newStates;
+        if (val && index < OTP_LENGTH - 1)
+            this.inputs[index + 1]?.focus();
+        if (newDigits.every(d => d !== '')) {
+            this.codeCompleted.emit(newDigits.join(''));
+        }
+    }
+    handleKeyDown(e, index) {
+        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
+            this.inputs[index - 1]?.focus();
+        }
+    }
+    handlePaste(e) {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
+        const newDigits = Array(OTP_LENGTH).fill('');
+        text.split('').forEach((c, i) => { newDigits[i] = c; });
+        this.digits = newDigits;
+        this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
+        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        if (newDigits.every(d => d !== ''))
+            this.codeCompleted.emit(newDigits.join(''));
+    }
+    render() {
+        const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
+        return (h("div", { key: '3cfe0d64890b2c90f500c662fe8572f9630d614b', class: "otp" }, this.showLabelContact && (h("p", { key: 'd791c408a5393ae82e00e758b67530d4b21381ac', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '3d6ca9c3a00a71ba99800a94f1b95d3247d75522' }, " ", this.labelContact))), h("div", { key: '22d172d48ae8748fa27aaead4c65145d848ae4f2', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+                if (el)
+                    this.inputs[i] = el;
+            }, class: {
+                'otp__digit': true,
+                'otp__digit--filled': (this.digitStates ?? [])[i] === 'filled',
+                'otp__digit--error': this.error,
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: (this.digits ?? [])[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: 'c6434be80f44e6f8a277bdff49503f67db5cdca7', class: "otp__error" }, this.errorMessage)), h("div", { key: '281e56d25ec3b01136aae2220605037d4dff4e16', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+    }
+    static get is() { return "dropi-otp-send-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-otp-send-code.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-otp-send-code.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "engine": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'email' | 'sms' | '2fa'",
+                    "resolved": "\"2fa\" | \"email\" | \"sms\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delivery method label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "engine",
+                "defaultValue": "'email'"
+            },
+            "labelContact": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Contact info (email/phone to show in label)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-contact",
+                "defaultValue": "''"
+            },
+            "showLabelContact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show contact label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label-contact",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "digits": {},
+            "digitStates": {},
+            "countdown": {},
+            "canResend": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "codeCompleted",
+                "name": "codeCompleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when all 6 digits are entered. e.detail = the complete code string"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiResend",
+                "name": "dropiResend",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when resend is requested"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-paginator/dropi-paginator.css

@@ -0,0 +1,103 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.paginator {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--Size-4, 16px);
+  flex-wrap: wrap;
+}
+
+.paginator-pages {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.paginator-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s ease;
+}
+
+.paginator-btn:hover:not(:disabled) {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+.paginator-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.paginator-btn--active {
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #ffffff);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.paginator-btn--active:hover {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+.paginator-btn--arrow {
+  width: auto;
+  padding: 0 var(--Size-2, 8px);
+  border-radius: var(--Border-1, 4px);
+  gap: 4px;
+}
+
+.paginator-btn--arrow:hover:not(:disabled) {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+.paginator-label {
+  font-size: var(--font-size-s, 12px);
+  color: inherit;
+}
+
+.paginator-ellipsis {
+  color: var(--Gray-Gray-400, #858ea6);
+  padding: 0 4px;
+  font-size: var(--font-size-s, 12px);
+  display: flex;
+  align-items: center;
+}
+
+.paginator-size {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+}
+
+.paginator-size-label {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+.paginator-size-select {
+  height: 32px;
+  padding: 0 var(--Size-2, 8px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-1, 4px);
+  background: var(--Neutral-White, #ffffff);
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+}

package/dist/collection/components/dropi-paginator/dropi-paginator.js

@@ -0,0 +1,215 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-paginator
+ * Pagination control with page numbers, prev/next buttons and items-per-page selector.
+ */
+export class DropiPaginator {
+    /** Total number of pages */
+    totalPages = 1;
+    /** Current page (1-based) */
+    currentPage = 1;
+    /** Disabled state */
+    disabled = false;
+    /** Max page buttons to show at once */
+    maxVisiblePages = 8;
+    /** Hide total page count (show only arrows) */
+    isNotTotalPages = false;
+    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
+    noLabels = false;
+    /** Emitted when page changes. e.detail = new page number */
+    pageChange;
+    get pageNumbers() {
+        const total = this.totalPages;
+        const cur = this.currentPage;
+        const max = this.maxVisiblePages;
+        if (total <= max)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const half = Math.floor(max / 2);
+        let start = Math.max(1, cur - half);
+        let end = Math.min(total, start + max - 1);
+        if (end - start < max - 1)
+            start = Math.max(1, end - max + 1);
+        const pages = [];
+        if (start > 1) {
+            pages.push(1);
+            if (start > 2)
+                pages.push('...');
+        }
+        for (let i = start; i <= end; i++)
+            pages.push(i);
+        if (end < total) {
+            if (end < total - 1)
+                pages.push('...');
+            pages.push(total);
+        }
+        return pages;
+    }
+    goTo(p) {
+        if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
+            return;
+        this.currentPage = p;
+        this.pageChange.emit(this.currentPage);
+    }
+    render() {
+        const pages = this.pageNumbers;
+        const isFirst = this.currentPage <= 1;
+        const isLast = this.currentPage >= this.totalPages;
+        return (h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '67bc6ba66852a8883a19b2a3182be3cb298f2c8d', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: 'b1d0c5a8f66056cb53c31b01959177754632a906', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '951435cbf9b7a8b9bd0e0f33d2c9eacaea6e7af1', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'fed8a203b3e62f5da3e6fa055b1ee6e35453147c', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+            ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: '35a728e031880403ee0ff984484237ab701bd406', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '4a73ba225105e449f8dfe8a504c5b1ad3e9c31cd', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '7b140df9437922acc8c24d6ee1ff15d69ce7b7f1', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '6157fa189ca011be4c13da803d2cd110d882bb8e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '7b6c1b31d4caed8203b739cc10f3084568e40f10', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
+    }
+    static get is() { return "dropi-paginator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-paginator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-paginator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of pages"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages",
+                "defaultValue": "1"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "maxVisiblePages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max page buttons to show at once"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible-pages",
+                "defaultValue": "8"
+            },
+            "isNotTotalPages": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide total page count (show only arrows)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-not-total-pages",
+                "defaultValue": "false"
+            },
+            "noLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide \"Anterior\"/\"Siguiente\" text labels, show only arrows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-labels",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pageChange",
+                "name": "pageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when page changes. e.detail = new page number"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}