@dropi/ui 0.1.19 → 0.1.21

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: '7a2b5b626be626d66d33cb7857d9243440559587', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: 'e113aee78c554393e41ad1e2ec94daa24c65043e', class: "paginator-size" }, h("span", { key: 'ee5124c3b99a5d80b309df9d41daaf5c530a1313', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '8c58fd97f11866a2467e4412be2cc18252d55d79', 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: 'd727c882a91240cc9d777156c7b6cd2fac01ca67', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '7efb966e0f8a6e8270ec8fda44551072acb46152', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, h("dropi-icon", { key: 'ac59bf489afc4622101bdeaa2b1eb9d8628041d4', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '0347c7803eed753d73fd0260330853995e74e734', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '7097ac1ba68a1953c686022ea73f812437cc96cd', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '786be5b0f0116c35c2685356607695e8f22328e0', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        const isFirst = this.currentPage <= 1;
+        const isLast = this.currentPage >= this.totalPages;
+        return (h("div", { key: '5f69b3abd4ddf98c2ab5df9c20361ba7f71addac', class: "paginator" }, h("div", { key: 'c050104ff12ec9c8b0cca40a75e0538cdd43d1e5', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: 'b03958b21bd015c6e80356172bea98f980c9eab4', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: 'c1670fe542a342765f79efde0ac3bd754dad4798', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '170d5b6c0f1f105682d9a8bd69d95d445af1c5ac', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'a5233c1025b3a7c96ae3d8a30a7a38fe4d009ce8', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '074c645f02a26e1a1607aaccaa2a6c25b2d2e17a', 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: 'e462ff2d53d1b1361e813701fb549505e0eada30', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && h("span", { key: '1d40fa0b8b69c72c3e7eed4cd4732f009508e052', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'efcc1414a52a3946f38e2b7790bcbed2fce42328', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'ad08274cb7d624d141ee7c1599fb5662e5715aca', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, h("dropi-icon", { key: '579969aa3a6c0bc538a2d68fc399e017a836136d', 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: 'd02f057415086137540417bcd5762bc2f955885f', 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: '4bfc14f3fa8ce553a61702bd5323b9554c99b05e', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'c9e532e95dc78ac8e91ef43d64d98ef75a4b5fb8', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'fe498a605de588ce33ed4597fa09d6659f555790', 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: '1e0d64045e390c5f934ea2c70c4ccc8f0c542b8a', 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"
-            }];
-    }
 }

package/dist/collection/components/dropi-phone-input/dropi-phone-input.css

@@ -0,0 +1,209 @@
+:host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }
+*, *::before, *::after { box-sizing: border-box; }
+
+/* Ocultar spin buttons en inputs numéricos */
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.phone-wrap {
+  width: 100%;
+}
+
+.phone-label {
+  display: block;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  margin-bottom: 4px;
+}
+
+.phone-input-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.custom-select {
+  position: relative;
+  width: 50%;
+}
+
+.form-control {
+  flex: 1;
+  width: 100%;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: 5px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 0.3s ease-in-out;
+  height: 40px;
+  padding: 0 12px;
+  outline: none;
+  color: var(--Gray-Gray-700, #32394d);
+  background-color: var(--Neutral-White, #ffffff);
+}
+
+.form-control::placeholder {
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+.form-control:focus::placeholder {
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+.form-control:focus {
+  border-color: var(--Info-Info-500, #50a5f1);
+  outline: none;
+}
+
+.form-control:disabled {
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9) !important;
+  color: var(--Gray-Gray-400, #858ea6);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  outline: none;
+}
+
+.form-control.is-invalid {
+  background: #fffbfb;
+  border-color: var(--Error-Error-500, #f46a6b) !important;
+}
+
+.select-button {
+  width: 100%;
+  height: 40px;
+  padding: 0.47rem 0.75rem;
+  padding-right: 7px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #ffffff);
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  cursor: pointer;
+}
+
+.select-button img {
+  width: 20px;
+  height: 20px;
+}
+
+.select-button:focus {
+  border-color: var(--Info-Info-500, #50a5f1) !important;
+  outline: none;
+}
+
+.select-button:disabled {
+  border-color: var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: unset;
+}
+
+.select-button.select-completed {
+  border-color: var(--Gray-Gray-400, #858ea6);
+  color: var(--Gray-Gray-600, #475066);
+  background: var(--Neutral-White, #ffffff);
+}
+
+.select-button.select-invalid {
+  border-color: var(--Error-Error-500, #f46a6b) !important;
+}
+
+.select-dropdown {
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  margin: 4px 0 0 0;
+  border: 1px solid transparent;
+  border-radius: var(--Border-2, 8px);
+  overflow-y: scroll;
+  z-index: 100;
+}
+
+/* Scrollbar */
+.select-dropdown::-webkit-scrollbar {
+  width: 6px;
+}
+.select-dropdown::-webkit-scrollbar-thumb {
+  background-color: var(--Gray-Gray-300, #d1d6e1);
+  border-radius: 4px;
+}
+
+.expanded-select {
+  max-height: 250px;
+  background: var(--Neutral-White, #ffffff);
+  box-shadow: var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  transition: max-height 0.2s ease-in;
+}
+
+.collapsed-select {
+  max-height: 0;
+  background: transparent;
+  box-shadow: none;
+  border: 1px solid transparent;
+  transition: max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out;
+}
+
+.select-dropdown li {
+  margin: 0;
+  padding: 0;
+}
+
+.option {
+  width: 100%;
+  height: 45px;
+  border-radius: var(--Border-2, 8px);
+  padding-top: var(--Size-3, 12px);
+  padding-right: var(--Size-4, 16px);
+  padding-bottom: var(--Size-3, 12px);
+  padding-left: var(--Size-4, 16px);
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.option img {
+  width: 20px;
+  height: 20px;
+}
+
+.option:hover {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+.option:disabled {
+  color: var(--Gray-Gray-400, #858ea6);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: unset;
+}
+
+.invalid-color {
+  color: var(--Error-Error-500, #f46a6b) !important;
+}
+
+.phone-error {
+  margin: 4px 0 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
+}