@dropi/ui 0.1.20 → 0.1.22

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

@@ -11,7 +11,7 @@ export class DropiOtpSendCode {
     /** Contact info (email/phone to show in label) */
     labelContact = '';
     /** Show contact label */
-    showLabelContact = true;
+    showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
     digits = Array(OTP_LENGTH).fill('');
@@ -22,7 +22,7 @@ export class DropiOtpSendCode {
     inputs = [];
     timer;
     /** Emitted when all 6 digits are entered. e.detail = the complete code string */
-    dropiCodeCompleted;
+    codeCompleted;
     /** Emitted when resend is requested */
     dropiResend;
     componentDidLoad() { this.startCountdown(); }
@@ -41,20 +41,20 @@ export class DropiOtpSendCode {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...this.digits];
+        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...this.digitStates];
+        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.dropiCodeCompleted.emit(newDigits.join(''));
+            this.codeCompleted.emit(newDigits.join(''));
         }
     }
     handleKeyDown(e, index) {
-        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
+        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
             this.inputs[index - 1]?.focus();
         }
     }
@@ -67,18 +67,18 @@ export class DropiOtpSendCode {
         this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
         this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
         if (newDigits.every(d => d !== ''))
-            this.dropiCodeCompleted.emit(newDigits.join(''));
+            this.codeCompleted.emit(newDigits.join(''));
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '385270734b7b0d6be9e4c8fb4767feae951eef2a', class: "otp" }, this.showLabelContact && (h("p", { key: '6b837aa51683c913c14f001781b037dfc802c3f7', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'ea75ddf873d4380e100477ac4e939a4e2e1b2ef3' }, " ", this.labelContact))), h("div", { key: 'ecdd5b47d1acbee3a6d5a67bbe189471d1af234c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        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--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: '99bb12e401d9b7758ae6996c9f1b156f49ada55e', class: "otp__error" }, this.errorMessage)), h("div", { key: '61e80ca8a938025ad49c453255a23b3b44880e7e', 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")))));
+            }, 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"; }
@@ -152,7 +152,7 @@ export class DropiOtpSendCode {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-label-contact",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
@@ -187,8 +187,8 @@ export class DropiOtpSendCode {
     }
     static get events() {
         return [{
-                "method": "dropiCodeCompleted",
-                "name": "dropiCodeCompleted",
+                "method": "codeCompleted",
+                "name": "codeCompleted",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -46,7 +46,7 @@
 
 .paginator-btn--active {
   background: var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #fff);
+  color: var(--Neutral-White, #ffffff);
   font-weight: var(--font-weight-bold, 700);
 }
 
@@ -94,7 +94,7 @@
   padding: 0 var(--Size-2, 8px);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-1, 4px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
   font-family: inherit;

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

@@ -4,36 +4,24 @@ import { h } from "@stencil/core";
  * Pagination control with page numbers, prev/next buttons and items-per-page selector.
  */
 export class DropiPaginator {
-    /** Total number of items */
-    total = 0;
-    /** Items per page */
-    pageSize = 10;
+    /** Total number of pages */
+    totalPages = 1;
     /** Current page (1-based) */
-    page = 1;
+    currentPage = 1;
+    /** Disabled state */
+    disabled = false;
     /** Max page buttons to show at once */
-    maxPages = 5;
+    maxVisiblePages = 8;
+    /** Hide total page count (show only arrows) */
+    isNotTotalPages = false;
     /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
     noLabels = false;
-    /** Whether to show the items-per-page selector */
-    showPageSizeSelector = false;
-    /** Options for items per page */
-    pageSizeOptions = [10, 25, 50, 100];
-    /** Emitted when page changes. e.detail = { page, pageSize } */
-    dropiPageChange;
-    parsedOptions = [10, 25, 50, 100];
-    optionsChanged(val) {
-        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
-    }
-    componentWillLoad() {
-        this.optionsChanged(this.pageSizeOptions);
-    }
-    get totalPages() {
-        return Math.max(1, Math.ceil(this.total / this.pageSize));
-    }
+    /** Emitted when page changes. e.detail = new page number */
+    pageChange;
     get pageNumbers() {
         const total = this.totalPages;
-        const cur = this.page;
-        const max = this.maxPages;
+        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);
@@ -57,23 +45,18 @@ export class DropiPaginator {
         return pages;
     }
     goTo(p) {
-        if (p < 1 || p > this.totalPages || p === this.page)
+        if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
             return;
-        this.page = p;
-        this.dropiPageChange.emit({ page: this.page, pageSize: this.pageSize });
-    }
-    onPageSizeChange(e) {
-        this.pageSize = Number(e.target.value);
-        this.page = 1;
-        this.dropiPageChange.emit({ page: this.page, pageSize: this.pageSize });
+        this.currentPage = p;
+        this.pageChange.emit(this.currentPage);
     }
     render() {
         const pages = this.pageNumbers;
-        const isFirst = this.page <= 1;
-        const isLast = this.page >= this.totalPages;
-        return (h("div", { key: '23b6e4c63f01a484e61cea9fb6188382848cf675', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '0cfb3aea09339b51e65b2314b1da9915b384c92a', class: "paginator-size" }, h("span", { key: 'bef7700fdd17d4aaa5d800ad117f90b34e56381a', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: 'c25162f2ce42bbc00125a28d707e72fc214b4864', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'f8fd71442442725779786ea3f2334cccf82d237f', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '899e629c0922baa0b71646912e4eed6e6c44536b', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, h("dropi-icon", { key: '0e847019e80d9e6c8d448b904691518a87a3afff', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '606e96d5e1495c17ac86d66d560116574f2aa962', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '695bbfc36e42040c530b4338c9118d9b1da4c1ea', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'c3bc6d3c292f07b782aba6672715163d50907d93', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        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.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), !isLast && (h("button", { key: '83b89c14ca3fc63679839a4bcb3b416412ebcb01', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && h("span", { key: 'e896eb8dd2bbabd932014a100a138af89fdfd2f4', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '2f9ba001d0ca94f8330b910a6dd952d940c622c8', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '6531b71b3767ae872464605bad8ce8e1a5d609d1', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, h("dropi-icon", { key: '9411fdbec9291cf3a3418152efc6ce951e6c4006', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
+            : 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"; }
@@ -89,7 +72,7 @@ export class DropiPaginator {
     }
     static get properties() {
         return {
-            "total": {
+            "totalPages": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -101,15 +84,15 @@ export class DropiPaginator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Total number of items"
+                    "text": "Total number of pages"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "total",
-                "defaultValue": "0"
+                "attribute": "total-pages",
+                "defaultValue": "1"
             },
-            "pageSize": {
+            "currentPage": {
                 "type": "number",
                 "mutable": true,
                 "complexType": {
@@ -121,35 +104,35 @@ export class DropiPaginator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Items per page"
+                    "text": "Current page (1-based)"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "page-size",
-                "defaultValue": "10"
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "1"
             },
-            "page": {
-                "type": "number",
-                "mutable": true,
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Current page (1-based)"
+                    "text": "Disabled state"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "page",
-                "defaultValue": "1"
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
-            "maxPages": {
+            "maxVisiblePages": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -166,10 +149,10 @@ export class DropiPaginator {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "max-pages",
-                "defaultValue": "5"
+                "attribute": "max-visible-pages",
+                "defaultValue": "8"
             },
-            "noLabels": {
+            "isNotTotalPages": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -181,15 +164,15 @@ export class DropiPaginator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Hide \"Anterior\"/\"Siguiente\" text labels, show only arrows"
+                    "text": "Hide total page count (show only arrows)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "no-labels",
+                "attribute": "is-not-total-pages",
                 "defaultValue": "false"
             },
-            "showPageSizeSelector": {
+            "noLabels": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -201,63 +184,32 @@ export class DropiPaginator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show the items-per-page selector"
+                    "text": "Hide \"Anterior\"/\"Siguiente\" text labels, show only arrows"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-page-size-selector",
+                "attribute": "no-labels",
                 "defaultValue": "false"
-            },
-            "pageSizeOptions": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "number[] | string",
-                    "resolved": "number[] | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Options for items per page"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "page-size-options",
-                "defaultValue": "[10, 25, 50, 100]"
             }
         };
     }
-    static get states() {
-        return {
-            "parsedOptions": {}
-        };
-    }
     static get events() {
         return [{
-                "method": "dropiPageChange",
-                "name": "dropiPageChange",
+                "method": "pageChange",
+                "name": "pageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when page changes. e.detail = { page, pageSize }"
+                    "text": "Emitted when page changes. e.detail = new page number"
                 },
                 "complexType": {
-                    "original": "{ page: number; pageSize: number }",
-                    "resolved": "{ page: number; pageSize: number; }",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "pageSizeOptions",
-                "methodName": "optionsChanged"
-            }];
-    }
 }