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

@dropi/ui 0.1.52 → 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 (592) hide show

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiPaginatorCss = () => `: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}`;
+const dropiPaginatorCss = () => `:host{display:block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::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:var(--font-family-01, 'Inter', sans-serif);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:var(--font-family-01, 'Inter', sans-serif);cursor:pointer;outline:none}`;
 const DropiPaginator = class {
     constructor(hostRef) {
@@ -57,9 +57,9 @@ const DropiPaginator = class {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: '50a68668b70849a4c08836bec85b43a703b2e424', class: "paginator" }, h("div", { key: '22d58d289589dc8c459d4608fe3d5760e80ca958', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '1e78854d883898ff551f88c9e709685ae7a5cfdd', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: 'ff6d58ed30cee1a52747032bca17c0cd813396eb', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: 'de32002d9f28217c57048b21f55d4e04f76c8930', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '0edf0af97e22935e5f346168c810ef90a86d449a', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '3deca437baa679afb9fd27b7de13397dc6bd4124', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: 'd1cd366b0c319ba8b023b6fcfe3f5f30cdbebd8b', class: "paginator" }, h("div", { key: '53097e1770f1d2e30ae9c90e68a9eadcb5b634dd', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: 'fb3f833af40b25e76ba9450845fb40b5b19991df', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '821fe4e4fc448394ff644726ecc2c13207d873ef', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '2ca32ccc8b22c4a22db36898ab5497ff977df5ad', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'bfa46b76b049d7a011d4c2c80f6dff2e865e8fe6', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '54aafd90b0898df46ebb70007da8b3fe0f874cae', 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: 'a5a58bde99571e0e39d84f0a019737690fa899e5', 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: 'afb750c3351df160d8f2c186e6f3bfec3fb193b7', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'ceafcfa5f2447b06fbd0e7e70b20c854f7576c8e', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '1f60cd332a5e833c2d953668dd43425b14c53db6', 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: '7efd74aab20a0fa78808b33afe5ddba4d797998d', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "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: '141ddb9f0b92010d03f7b000a289c6b04b2ad805', 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: '0ee3c7b22e2d2a07c485094de3b947fb17f9d2fa', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '0482e40d329968d86e04d661b06db06bb2cff2a4', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '7dc88568008d878d0b33d44492ac344d2e060c7c', 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: '68cff2b75e05dc3f2774cba68bd87cff10f09f32', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
 };
 DropiPaginator.style = dropiPaginatorCss();

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

	@@ -1 +1 @@
1	- {"file":"dropi-paginator.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-paginator/dropi-paginator.css?tag=dropi-paginator&encapsulation=shadow","src/components/dropi-paginator/dropi-paginator.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.paginator {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--Size-4, 16px);\n flex-wrap: wrap;\n}\n\n.paginator-pages {\n display: flex;\n align-items: center;\n gap: var(--Size-1, 4px);\n}\n\n.paginator-btn {\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-s, 12px);\n font-family: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n}\n\n.paginator-btn:hover:not(:disabled) {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.paginator-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.paginator-btn--active {\n background: var(--Primary-Primary-500, #f49a3d);\n color: var(--Neutral-White, #ffffff);\n font-weight: var(--font-weight-bold, 700);\n}\n\n.paginator-btn--active:hover {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.paginator-btn--arrow {\n width: auto;\n padding: 0 var(--Size-2, 8px);\n border-radius: var(--Border-1, 4px);\n gap: 4px;\n}\n\n.paginator-btn--arrow:hover:not(:disabled) {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.paginator-label {\n font-size: var(--font-size-s, 12px);\n color: inherit;\n}\n\n.paginator-ellipsis {\n color: var(--Gray-Gray-400, #858ea6);\n padding: 0 4px;\n font-size: var(--font-size-s, 12px);\n display: flex;\n align-items: center;\n}\n\n.paginator-size {\n display: flex;\n align-items: center;\n gap: var(--Size-2, 8px);\n}\n\n.paginator-size-label {\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.paginator-size-select {\n height: 32px;\n padding: 0 var(--Size-2, 8px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-1, 4px);\n background: var(--Neutral-White, #ffffff);\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-s, 12px);\n font-family: inherit;\n cursor: pointer;\n outline: none;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/\n @component dropi-paginator\n * Pagination control with page numbers, prev/next buttons and items-per-page selector.\n /\n@Component({\n tag: 'dropi-paginator',\n styleUrl: 'dropi-paginator.css',\n shadow: true,\n})\nexport class DropiPaginator {\n /* Total number of pages /\n @Prop() totalPages: number = 1;\n /* Current page (1-based) /\n @Prop({ mutable: true, reflect: true }) currentPage: number = 1;\n /* Disabled state /\n @Prop() disabled: boolean = false;\n /* Max page buttons to show at once /\n @Prop() maxVisiblePages: number = 8;\n /* Hide total page count (show only arrows) /\n @Prop() isNotTotalPages: boolean = false;\n /* Hide \"Anterior\"/\"Siguiente\" text labels, show only arrows /\n @Prop() noLabels: boolean = false;\n\n /* Emitted when page changes. e.detail = new page number */\n @Event() dropiPageChange: EventEmitter<number>;\n\n private get pageNumbers(): (number \| '...')[] {\n const total = this.totalPages;\n const cur = this.currentPage;\n const max = this.maxVisiblePages;\n\n if (total <= max) return Array.from({ length: total }, (_, i) => i + 1);\n\n const half = Math.floor(max / 2);\n let start = Math.max(1, cur - half);\n let end = Math.min(total, start + max - 1);\n if (end - start < max - 1) start = Math.max(1, end - max + 1);\n\n const pages: (number \| '...')[] = [];\n if (start > 1) { pages.push(1); if (start > 2) pages.push('...'); }\n for (let i = start; i <= end; i++) pages.push(i);\n if (end < total) { if (end < total - 1) pages.push('...'); pages.push(total); }\n return pages;\n }\n\n private goTo(p: number) {\n if (this.disabled \|\| p < 1 \|\| p > this.totalPages \|\| p === this.currentPage) return;\n this.currentPage = p;\n this.dropiPageChange.emit(this.currentPage);\n }\n\n render() {\n const pages = this.pageNumbers;\n const isFirst = this.currentPage <= 1;\n const isLast = this.currentPage >= this.totalPages;\n\n return (\n <div class=\"paginator\">\n <div class=\"paginator-pages\">\n {!isFirst && !this.noLabels && (\n <button\n class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n onClick={() => this.goTo(1)}\n aria-label=\"Primera página\"\n disabled={this.disabled}\n >\n <dropi-icon name=\"Arrow-double-small-left\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n </button>\n )}\n\n {!isFirst && (\n <button\n class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n onClick={() => this.goTo(this.currentPage - 1)}\n aria-label=\"Anterior\"\n disabled={this.disabled}\n >\n <dropi-icon name=\"Dropdown-left\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n {!this.noLabels && <span class=\"paginator-label\">Anterior</span>}\n </button>\n )}\n\n {pages.map((p, i) =>\n p === '...'\n ? <span class=\"paginator-ellipsis\" key={`e${i}`}>…</span>\n : <button\n key={p}\n class={{ 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }}\n onClick={() => this.goTo(p as number)}\n aria-current={p === this.currentPage ? 'page' : undefined}\n disabled={this.disabled}\n >\n {p}\n </button>\n )}\n\n {!isLast && (\n <button\n class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n onClick={() => this.goTo(this.currentPage + 1)}\n aria-label=\"Siguiente\"\n disabled={this.disabled}\n >\n {!this.noLabels && <span class=\"paginator-label\">Siguiente</span>}\n <dropi-icon name=\"Dropdown-Right\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n </button>\n )}\n\n {!isLast && !this.noLabels && (\n <button\n class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n onClick={() => this.goTo(this.totalPages)}\n aria-label=\"Última página\"\n disabled={this.disabled}\n >\n <dropi-icon name=\"Arrow-double-small-right\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n </button>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-paginator.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-paginator/dropi-paginator.css?tag=dropi-paginator&encapsulation=shadow","src/components/dropi-paginator/dropi-paginator.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: block;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.paginator {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--Size-4, 16px);\n flex-wrap: wrap;\n}\n\n.paginator-pages {\n display: flex;\n align-items: center;\n gap: var(--Size-1, 4px);\n}\n\n.paginator-btn {\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-s, 12px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n}\n\n.paginator-btn:hover:not(:disabled) {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.paginator-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.paginator-btn--active {\n background: var(--Primary-Primary-500, #f49a3d);\n color: var(--Neutral-White, #ffffff);\n font-weight: var(--font-weight-bold, 700);\n}\n\n.paginator-btn--active:hover {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.paginator-btn--arrow {\n width: auto;\n padding: 0 var(--Size-2, 8px);\n border-radius: var(--Border-1, 4px);\n gap: 4px;\n}\n\n.paginator-btn--arrow:hover:not(:disabled) {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.paginator-label {\n font-size: var(--font-size-s, 12px);\n color: inherit;\n}\n\n.paginator-ellipsis {\n color: var(--Gray-Gray-400, #858ea6);\n padding: 0 4px;\n font-size: var(--font-size-s, 12px);\n display: flex;\n align-items: center;\n}\n\n.paginator-size {\n display: flex;\n align-items: center;\n gap: var(--Size-2, 8px);\n}\n\n.paginator-size-label {\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.paginator-size-select {\n height: 32px;\n padding: 0 var(--Size-2, 8px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-1, 4px);\n background: var(--Neutral-White, #ffffff);\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-s, 12px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n cursor: pointer;\n outline: none;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/\n @component dropi-paginator\n * Pagination control with page numbers, prev/next buttons and items-per-page selector.\n /\n@Component({\n tag: 'dropi-paginator',\n styleUrl: 'dropi-paginator.css',\n shadow: true,\n})\nexport class DropiPaginator {\n /* Total number of pages /\n @Prop() totalPages: number = 1;\n /* Current page (1-based) /\n @Prop({ mutable: true, reflect: true }) currentPage: number = 1;\n /* Disabled state /\n @Prop() disabled: boolean = false;\n /* Max page buttons to show at once /\n @Prop() maxVisiblePages: number = 8;\n /* Hide total page count (show only arrows) /\n @Prop() isNotTotalPages: boolean = false;\n /* Hide \"Anterior\"/\"Siguiente\" text labels, show only arrows /\n @Prop() noLabels: boolean = false;\n\n /* Emitted when page changes. e.detail = new page number */\n @Event() dropiPageChange: EventEmitter<number>;\n\n private get pageNumbers(): (number \| '...')[] {\n const total = this.totalPages;\n const cur = this.currentPage;\n const max = this.maxVisiblePages;\n\n if (total <= max) return Array.from({ length: total }, (_, i) => i + 1);\n\n const half = Math.floor(max / 2);\n let start = Math.max(1, cur - half);\n let end = Math.min(total, start + max - 1);\n if (end - start < max - 1) start = Math.max(1, end - max + 1);\n\n const pages: (number \| '...')[] = [];\n if (start > 1) { pages.push(1); if (start > 2) pages.push('...'); }\n for (let i = start; i <= end; i++) pages.push(i);\n if (end < total) { if (end < total - 1) pages.push('...'); pages.push(total); }\n return pages;\n }\n\n private goTo(p: number) {\n if (this.disabled \|\| p < 1 \|\| p > this.totalPages \|\| p === this.currentPage) return;\n this.currentPage = p;\n this.dropiPageChange.emit(this.currentPage);\n }\n\n render() {\n const pages = this.pageNumbers;\n const isFirst = this.currentPage <= 1;\n const isLast = this.currentPage >= this.totalPages;\n\n return (\n <div class=\"paginator\">\n <div class=\"paginator-pages\">\n {!isFirst && !this.noLabels && (\n <button\n class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n onClick={() => this.goTo(1)}\n aria-label=\"Primera página\"\n disabled={this.disabled}\n >\n <dropi-icon name=\"Arrow-double-small-left\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n </button>\n )}\n\n {!isFirst && (\n <button\n class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n onClick={() => this.goTo(this.currentPage - 1)}\n aria-label=\"Anterior\"\n disabled={this.disabled}\n >\n <dropi-icon name=\"Dropdown-left\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n {!this.noLabels && <span class=\"paginator-label\">Anterior</span>}\n </button>\n )}\n\n {pages.map((p, i) =>\n p === '...'\n ? <span class=\"paginator-ellipsis\" key={`e${i}`}>…</span>\n : <button\n key={p}\n class={{ 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }}\n onClick={() => this.goTo(p as number)}\n aria-current={p === this.currentPage ? 'page' : undefined}\n disabled={this.disabled}\n >\n {p}\n </button>\n )}\n\n {!isLast && (\n <button\n class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n onClick={() => this.goTo(this.currentPage + 1)}\n aria-label=\"Siguiente\"\n disabled={this.disabled}\n >\n {!this.noLabels && <span class=\"paginator-label\">Siguiente</span>}\n <dropi-icon name=\"Dropdown-Right\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n </button>\n )}\n\n {!isLast && !this.noLabels && (\n <button\n class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n onClick={() => this.goTo(this.totalPages)}\n aria-label=\"Última página\"\n disabled={this.disabled}\n >\n <dropi-icon name=\"Arrow-double-small-right\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n </button>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-phone-input.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}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:var(--dropi-z-index-overlay, 11000)}.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)}`;
+const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative;font-family:var(--font-family-01, 'Inter', sans-serif)}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}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:var(--font-family-01, 'Inter', sans-serif);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:var(--font-family-01, 'Inter', sans-serif);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:var(--dropi-z-index-overlay, 11000)}.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:var(--font-family-01, 'Inter', sans-serif);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)}`;
 const COUNTRIES = [
     { code: '57', name: 'Colombia', flag: 'CO', maxLength: 10 },
@@ -195,10 +195,10 @@ const DropiPhoneInput = class {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (h("div", { key: '4a650e9005c832934ed977a70a270dafd6a9a635', class: "phone-wrap" }, h("div", { key: '631df432da08d6607a0e46f89d5a873a358f320b', class: "phone-input-container" }, h("div", { key: '093450cd35c658d9fe86bda88a5247ac01dda365', class: "custom-select" }, h("button", { key: '00804b184cac3f3aeb6d496d33def264c6a2d885', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (h("div", { key: '340a9af3074266525d2a4d4f34e199d2f3b34341', class: "phone-wrap" }, h("div", { key: '7e9332d83170af53a4e8afed6150d0527d2ee4d8', class: "phone-input-container" }, h("div", { key: 'd0c84d124882c98d531fea537d3426cb60896cc3', class: "custom-select" }, h("button", { key: '5e4eb16afe2ba811b70c4453cf8f33f5e3cef8bf', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, h("span", { key: 'be3ce1443f212ee3bff661d422eb4b8ac3927eb9', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '041bd152aa918f316fe2cc26c7e50bde2771e7b4', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '58eb0636821d8ba4d5d2a0f223eff7e7d7894f43', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'bc6a693524878f8e04ef53279a74ac761913ae8c', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '7f0983c6a8e6562ea47cdad3c56fd0505312f9d8', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, h("span", { key: 'f743c48a2f525c017d11b2549853331a2a65421c', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '24fd9dbba0f999287a19de677db663487735a579', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: 'b249a0e0cfc71ba1520566467d602ace6356e8f9', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: '173bd8cfdb1d0b436adce3ae5344444b621962f0', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '5797774eacd4bd148dc9fd10782b46b8cde7bd27', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"dropi-phone-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-phone-input/dropi-phone-input.css?tag=dropi-phone-input&encapsulation=shadow","src/components/dropi-phone-input/dropi-phone-input.tsx"],"sourcesContent":[":host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }\n, ::before, ::after { box-sizing: border-box; }\n\n/ Ocultar spin buttons en inputs numéricos /\ninput::-webkit-inner-spin-button,\ninput::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\ninput[type='number'] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n\n.phone-wrap {\n width: 100%;\n}\n\n.phone-label {\n display: block;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-600, #475066);\n margin-bottom: 4px;\n}\n\n.phone-input-container {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.custom-select {\n position: relative;\n width: 50%;\n}\n\n.form-control {\n flex: 1;\n width: 100%;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: 5px;\n font-size: 14px;\n font-family: inherit;\n transition: border-color 0.3s ease-in-out;\n height: 40px;\n padding: 0 12px;\n outline: none;\n color: var(--Gray-Gray-700, #32394d);\n background-color: var(--Neutral-White, #ffffff);\n}\n\n.form-control::placeholder {\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus::placeholder {\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus {\n border-color: var(--Info-Info-500, #50a5f1);\n outline: none;\n}\n\n.form-control:disabled {\n border: 1px solid var(--Gray-Gray-200, #c3c9d9) !important;\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n outline: none;\n}\n\n.form-control.is-invalid {\n background: #fffbfb;\n border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-button {\n width: 100%;\n height: 40px;\n padding: 0.47rem 0.75rem;\n padding-right: 7px;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n background: var(--Neutral-White, #ffffff);\n color: var(--Gray-Gray-500, #69738c);\n font-size: var(--font-size-s, 12px);\n font-family: inherit;\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-align: left;\n cursor: pointer;\n}\n\n.select-button img {\n width: 20px;\n height: 20px;\n}\n\n.select-button:focus {\n border-color: var(--Info-Info-500, #50a5f1) !important;\n outline: none;\n}\n\n.select-button:disabled {\n border-color: var(--Gray-Gray-200, #c3c9d9);\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: unset;\n}\n\n.select-button.select-completed {\n border-color: var(--Gray-Gray-400, #858ea6);\n color: var(--Gray-Gray-600, #475066);\n background: var(--Neutral-White, #ffffff);\n}\n\n.select-button.select-invalid {\n border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-dropdown {\n position: absolute;\n width: 100%;\n overflow: hidden;\n list-style: none;\n padding: 0;\n margin: 4px 0 0 0;\n border: 1px solid transparent;\n border-radius: var(--Border-2, 8px);\n overflow-y: scroll;\n z-index: var(--dropi-z-index-overlay, 11000);\n}\n\n/ Scrollbar /\n.select-dropdown::-webkit-scrollbar {\n width: 6px;\n}\n.select-dropdown::-webkit-scrollbar-thumb {\n background-color: var(--Gray-Gray-300, #d1d6e1);\n border-radius: 4px;\n}\n\n.expanded-select {\n max-height: 250px;\n background: var(--Neutral-White, #ffffff);\n box-shadow: var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n transition: max-height 0.2s ease-in;\n}\n\n.collapsed-select {\n max-height: 0;\n background: transparent;\n box-shadow: none;\n border: 1px solid transparent;\n transition: max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out;\n}\n\n.select-dropdown li {\n margin: 0;\n padding: 0;\n}\n\n.option {\n width: 100%;\n height: 45px;\n border-radius: var(--Border-2, 8px);\n padding-top: var(--Size-3, 12px);\n padding-right: var(--Size-4, 16px);\n padding-bottom: var(--Size-3, 12px);\n padding-left: var(--Size-4, 16px);\n border: none;\n background: transparent;\n text-align: left;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-s, 12px);\n font-family: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.option img {\n width: 20px;\n height: 20px;\n}\n\n.option:hover {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.option:disabled {\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: unset;\n}\n\n.invalid-color {\n color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.phone-error {\n margin: 4px 0 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Error-Error-500, #f46a6b);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, Element, Listen, AttachInternals, h } from '@stencil/core';\n\ninterface CountryCode {\n name: string;\n code: string;\n flag: string;\n maxLength: number;\n}\n\nconst COUNTRIES: CountryCode[] = [\n { code: '57', name: 'Colombia', flag: 'CO', maxLength: 10 },\n { code: '52', name: 'Mexico', flag: 'MX', maxLength: 10 },\n { code: '507', name: 'Panama', flag: 'PA', maxLength: 8 },\n { code: '56', name: 'Chile', flag: 'CL', maxLength: 9 },\n { code: '593', name: 'Ecuador', flag: 'EC', maxLength: 10 },\n { code: '51', name: 'Peru', flag: 'PE', maxLength: 9 },\n { code: '34', name: 'España', flag: 'ES', maxLength: 9 },\n { code: '595', name: 'Paraguay', flag: 'PY', maxLength: 9 },\n { code: '58', name: 'Venezuela', flag: 'VE', maxLength: 11 },\n { code: '54', name: 'Argentina', flag: 'AR', maxLength: 10 },\n { code: '55', name: 'Brasil', flag: 'BR', maxLength: 11 },\n { code: '1', name: 'United States', flag: 'US', maxLength: 10 },\n { code: '502', name: 'Guatemala', flag: 'GT', maxLength: 8 },\n { code: '598', name: 'Uruguay', flag: 'UY', maxLength: 9 },\n { code: '501', name: 'Belize', flag: 'BZ', maxLength: 7 },\n { code: '81', name: 'Japan', flag: 'JP', maxLength: 10 },\n { code: '1', name: 'Canada', flag: 'CA', maxLength: 9 },\n { code: '1473', name: 'Grenada', flag: 'GD', maxLength: 10 },\n { code: '509', name: 'Haiti', flag: 'HT', maxLength: 10 },\n { code: '1809', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n { code: '1829', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n { code: '1849', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n { code: '1869', name: 'Saint Kitts And Nevis', flag: 'KN', maxLength: 10 },\n { code: '1784', name: 'Saint Vincent And The Grenadines', flag: 'VC', maxLength: 10 },\n { code: '1758', name: 'Saint Lucia', flag: 'LC', maxLength: 10 },\n { code: '597', name: 'Suriname', flag: 'SR', maxLength: 10 },\n { code: '1868', name: 'Trinidad and Tobago', flag: 'TT', maxLength: 10 },\n { code: '505', name: 'Nicaragua', flag: 'NI', maxLength: 8 },\n { code: '506', name: 'Costa Rica', flag: 'CR', maxLength: 8 },\n { code: '591', name: 'Bolivia', flag: 'BO', maxLength: 8 },\n { code: '7', name: 'Russia', flag: 'RU', maxLength: 11 },\n { code: '20', name: 'Egypt', flag: 'EG', maxLength: 9 },\n { code: '27', name: 'South Africa', flag: 'ZA', maxLength: 10 },\n { code: '30', name: 'Greece', flag: 'GR', maxLength: 10 },\n { code: '31', name: 'Netherlands', flag: 'NL', maxLength: 9 },\n { code: '32', name: 'Belgium', flag: 'BE', maxLength: 8 },\n { code: '33', name: 'France', flag: 'FR', maxLength: 9 },\n { code: '36', name: 'Hungary', flag: 'HU', maxLength: 9 },\n { code: '40', name: 'Romania', flag: 'RO', maxLength: 9 },\n { code: '39', name: 'Italy', flag: 'IT', maxLength: 10 },\n { code: '41', name: 'Switzerland', flag: 'CH', maxLength: 9 },\n { code: '44', name: 'United Kingdom', flag: 'GB', maxLength: 11 },\n { code: '45', name: 'Denmark', flag: 'DK', maxLength: 8 },\n { code: '46', name: 'Sweden', flag: 'SE', maxLength: 8 },\n { code: '47', name: 'Norway', flag: 'NO', maxLength: 8 },\n { code: '48', name: 'Poland', flag: 'PL', maxLength: 9 },\n { code: '49', name: 'Germany', flag: 'DE', maxLength: 11 },\n { code: '53', name: 'Malta', flag: 'MT', maxLength: 8 },\n { code: '60', name: 'Malaysia', flag: 'MY', maxLength: 9 },\n { code: '61', name: 'Australia', flag: 'AU', maxLength: 9 },\n { code: '62', name: 'Indonesia', flag: 'ID', maxLength: 12 },\n { code: '63', name: 'Philippines', flag: 'PH', maxLength: 10 },\n { code: '64', name: 'New Zealand', flag: 'NZ', maxLength: 12 },\n { code: '65', name: 'Singapore', flag: 'SG', maxLength: 8 },\n { code: '66', name: 'Thailand', flag: 'TH', maxLength: 9 },\n { code: '82', name: 'South Korea', flag: 'KR', maxLength: 9 },\n { code: '84', name: 'Vietnam', flag: 'VN', maxLength: 11 },\n { code: '86', name: 'China', flag: 'CN', maxLength: 11 },\n { code: '90', name: 'Turkey', flag: 'TR', maxLength: 10 },\n { code: '91', name: 'India', flag: 'IN', maxLength: 10 },\n { code: '92', name: 'Pakistan', flag: 'PK', maxLength: 9 },\n { code: '93', name: 'Afghanistan', flag: 'AF', maxLength: 10 },\n { code: '94', name: 'Sri Lanka', flag: 'LK', maxLength: 9 },\n { code: '95', name: 'Myanmar', flag: 'MM', maxLength: 9 },\n { code: '98', name: 'Iran', flag: 'IR', maxLength: 10 },\n { code: '211', name: 'South Sudan', flag: 'SS', maxLength: 10 },\n { code: '212', name: 'Morocco', flag: 'MA', maxLength: 9 },\n { code: '213', name: 'Algeria', flag: 'DZ', maxLength: 9 },\n { code: '216', name: 'Tunisia', flag: 'TN', maxLength: 8 },\n { code: '218', name: 'Libya', flag: 'LY', maxLength: 9 },\n { code: '220', name: 'Gambia', flag: 'GM', maxLength: 8 },\n { code: '221', name: 'Senegal', flag: 'SN', maxLength: 9 },\n { code: '222', name: 'Mauritania', flag: 'MR', maxLength: 9 },\n { code: '223', name: 'Mali', flag: 'ML', maxLength: 8 },\n { code: '224', name: 'Guinea', flag: 'GN', maxLength: 9 },\n { code: '225', name: 'Ivory Coast', flag: 'CI', maxLength: 10 },\n { code: '226', name: 'Burkina Faso', flag: 'BF', maxLength: 10 },\n { code: '227', name: 'Niger', flag: 'NE', maxLength: 8 },\n { code: '228', name: 'Togo', flag: 'TG', maxLength: 8 },\n { code: '229', name: 'Benin', flag: 'BJ', maxLength: 8 },\n { code: '230', name: 'Mauritius', flag: 'MU', maxLength: 10 },\n { code: '231', name: 'Liberia', flag: 'LR', maxLength: 8 },\n { code: '232', name: 'Sierra Leone', flag: 'SL', maxLength: 11 },\n { code: '233', name: 'Ghana', flag: 'GH', maxLength: 9 },\n { code: '234', name: 'Nigeria', flag: 'NG', maxLength: 11 },\n { code: '235', name: 'Chad', flag: 'TD', maxLength: 8 },\n { code: '236', name: 'Central African Republic', flag: 'CF', maxLength: 21 },\n { code: '237', name: 'Cameroon', flag: 'CM', maxLength: 10 },\n { code: '238', name: 'Cape Verde', flag: 'CV', maxLength: 9 },\n { code: '239', name: 'São Tomé and Príncipe', flag: 'ST', maxLength: 14 },\n { code: '240', name: 'Equatorial Guinea', flag: 'GQ', maxLength: 17 },\n { code: '241', name: 'Gabon', flag: 'GA', maxLength: 9 },\n];\n\n/\n @component dropi-phone-input\n * Phone number input with country code selector.\n * Syncs perfectly with dropi-core_front natively\n /\n@Component({\n tag: 'dropi-phone-input',\n styleUrl: 'dropi-phone-input.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiPhoneInput {\n @Element() el: HTMLElement;\n @AttachInternals() internals: ElementInternals;\n\n /* Name for native form submission /\n @Prop({ reflect: true }) name!: string;\n\n\n /* Initial country dial code (e.g. \"57\") — matches Angular 'CodArea' setter /\n @Prop({ mutable: true }) codArea: string = '57';\n /* Phone number value — matches Angular 'ngModelPhone' /\n @Prop({ mutable: true }) ngModelPhone: string = '';\n /* Input placeholder — matches Angular 'phoneNumberPlaceholder' /\n @Prop() phoneNumberPlaceholder: string \| null = null;\n /* Disabled state — matches Angular 'disabledInput' /\n @Prop() disabledInput: boolean = false;\n /* Validation state — matches Angular 'isValidPhone' /\n @Prop() isValidPhone: boolean = undefined;\n /* Validate on init — matches Angular 'validateOnInit' /\n @Prop() validateOnInit: boolean = true;\n /\n Pre-selected country object (matches Angular `selectedOption: Country`).\n * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.\n /\n @Prop({ mutable: true }) selectedOption: any = null;\n /\n Country select configuration object (matches Angular `selectProperties: SelectProperties`).\n * Fields: `label`, `placeholder`, `options` (array of Country objects).\n * When provided, overrides the internal country list.\n /\n @Prop() selectProperties: any = null;\n\n @State() private open: boolean = false;\n\n /* Emitted when country dial code changes — matches Angular 'ngModelChangeCod' /\n @Event() dropiCodChange: EventEmitter<string>;\n /* Emitted when phone number changes — matches Angular 'ngModelChangePhone' /\n @Event() dropiPhoneChange: EventEmitter<string>;\n /* Emitted on field verification — matches Angular 'verifiedField' /\n @Event() dropiVerify: EventEmitter<void>;\n /* Emitted when country selection changes — matches Angular 'onChangeSelect' */\n @Event() dropiChangeSelect: EventEmitter<any>;\n\n @Watch('codArea')\n codAreaChanged() {\n this.ngModelPhone = '';\n this.updateFormValue();\n }\n\n @Watch('ngModelPhone')\n ngModelPhoneChanged() {\n this.updateFormValue();\n }\n\n\n @Watch('selectedOption')\n selectedOptionChanged(val: any) {\n if (!val) return;\n // Support Angular Country shape: { dialCode, iso2 } or { code }\n const code = val.dialCode ?? val.code ?? this.codArea;\n this.codArea = String(code).replace('+', '');\n }\n\n componentWillLoad() {\n if (this.selectedOption) this.selectedOptionChanged(this.selectedOption);\n this.updateFormValue();\n }\n\n private updateFormValue() {\n const fullValue = this.ngModelPhone ? `+${this.codArea}${this.ngModelPhone}` : '';\n this.internals.setFormValue(fullValue);\n }\n\n\n private get selectedCountry(): CountryCode {\n const cleanCodArea = (this.codArea ?? '57').replace('+', '');\n return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];\n }\n\n private selectCountry(c: CountryCode) {\n this.codArea = c.code;\n this.open = false;\n this.dropiCodChange.emit(c.code);\n this.dropiChangeSelect.emit(c);\n }\n\n private handleInput(e: InputEvent) {\n const raw = (e.target as HTMLInputElement).value.replace(/\\D/g, '');\n this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);\n (e.target as HTMLInputElement).value = this.ngModelPhone;\n this.dropiPhoneChange.emit(this.ngModelPhone);\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(ev: Event) {\n const path = ev.composedPath();\n if (!path.includes(this.el)) {\n this.open = false;\n }\n }\n\n render() {\n const country = this.selectedCountry;\n const isInvalid = this.isValidPhone === false;\n\n return (\n <div class=\"phone-wrap\">\n <div class=\"phone-input-container\">\n\n <div class=\"custom-select\">\n <button\n type=\"button\"\n class={{ 'select-button': true, 'select-invalid': isInvalid }}\n disabled={this.disabledInput}\n onClick={() => { if (!this.disabledInput) this.open = !this.open; }}\n >\n <span style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <img src={`https://flagsapi.com/${country.flag}/flat/24.png`} alt=\"flag\" />\n {country.code}\n </span>\n <dropi-icon name={this.open ? 'Dropdown-up' : 'Dropdown-down'} iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-500\" />\n </button>\n\n <ul class={{ 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open }}>\n {COUNTRIES.map(option => (\n <li>\n <button\n type=\"button\"\n class=\"option\"\n onMouseDown={(e) => { e.preventDefault(); this.selectCountry(option); }}\n >\n <img src={`https://flagsapi.com/${option.flag}/flat/24.png`} alt={option.flag} />\n {option.code}\n </button>\n </li>\n ))}\n </ul>\n </div>\n\n <input\n id=\"phone-input\"\n type=\"tel\"\n inputmode=\"numeric\"\n class={{ 'form-control': true, 'is-invalid': isInvalid }}\n placeholder={this.phoneNumberPlaceholder}\n value={this.ngModelPhone}\n disabled={this.disabledInput}\n maxLength={country.maxLength}\n onInput={(e) => this.handleInput(e as InputEvent)}\n />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-phone-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-phone-input/dropi-phone-input.css?tag=dropi-phone-input&encapsulation=shadow","src/components/dropi-phone-input/dropi-phone-input.tsx"],"sourcesContent":[":host { display: block; width: 100%; position: relative; font-family: var(--font-family-01, 'Inter', sans-serif); }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n, ::before, ::after { box-sizing: border-box; }\n\n/ Ocultar spin buttons en inputs numéricos /\ninput::-webkit-inner-spin-button,\ninput::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\ninput[type='number'] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n\n.phone-wrap {\n width: 100%;\n}\n\n.phone-label {\n display: block;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-600, #475066);\n margin-bottom: 4px;\n}\n\n.phone-input-container {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.custom-select {\n position: relative;\n width: 50%;\n}\n\n.form-control {\n flex: 1;\n width: 100%;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: 5px;\n font-size: 14px;\n font-family: var(--font-family-01, 'Inter', sans-serif);\n transition: border-color 0.3s ease-in-out;\n height: 40px;\n padding: 0 12px;\n outline: none;\n color: var(--Gray-Gray-700, #32394d);\n background-color: var(--Neutral-White, #ffffff);\n}\n\n.form-control::placeholder {\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus::placeholder {\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus {\n border-color: var(--Info-Info-500, #50a5f1);\n outline: none;\n}\n\n.form-control:disabled {\n border: 1px solid var(--Gray-Gray-200, #c3c9d9) !important;\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n outline: none;\n}\n\n.form-control.is-invalid {\n background: #fffbfb;\n border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-button {\n width: 100%;\n height: 40px;\n padding: 0.47rem 0.75rem;\n padding-right: 7px;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n background: var(--Neutral-White, #ffffff);\n color: var(--Gray-Gray-500, #69738c);\n font-size: var(--font-size-s, 12px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-align: left;\n cursor: pointer;\n}\n\n.select-button img {\n width: 20px;\n height: 20px;\n}\n\n.select-button:focus {\n border-color: var(--Info-Info-500, #50a5f1) !important;\n outline: none;\n}\n\n.select-button:disabled {\n border-color: var(--Gray-Gray-200, #c3c9d9);\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: unset;\n}\n\n.select-button.select-completed {\n border-color: var(--Gray-Gray-400, #858ea6);\n color: var(--Gray-Gray-600, #475066);\n background: var(--Neutral-White, #ffffff);\n}\n\n.select-button.select-invalid {\n border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-dropdown {\n position: absolute;\n width: 100%;\n overflow: hidden;\n list-style: none;\n padding: 0;\n margin: 4px 0 0 0;\n border: 1px solid transparent;\n border-radius: var(--Border-2, 8px);\n overflow-y: scroll;\n z-index: var(--dropi-z-index-overlay, 11000);\n}\n\n/ Scrollbar /\n.select-dropdown::-webkit-scrollbar {\n width: 6px;\n}\n.select-dropdown::-webkit-scrollbar-thumb {\n background-color: var(--Gray-Gray-300, #d1d6e1);\n border-radius: 4px;\n}\n\n.expanded-select {\n max-height: 250px;\n background: var(--Neutral-White, #ffffff);\n box-shadow: var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n transition: max-height 0.2s ease-in;\n}\n\n.collapsed-select {\n max-height: 0;\n background: transparent;\n box-shadow: none;\n border: 1px solid transparent;\n transition: max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out;\n}\n\n.select-dropdown li {\n margin: 0;\n padding: 0;\n}\n\n.option {\n width: 100%;\n height: 45px;\n border-radius: var(--Border-2, 8px);\n padding-top: var(--Size-3, 12px);\n padding-right: var(--Size-4, 16px);\n padding-bottom: var(--Size-3, 12px);\n padding-left: var(--Size-4, 16px);\n border: none;\n background: transparent;\n text-align: left;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-s, 12px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.option img {\n width: 20px;\n height: 20px;\n}\n\n.option:hover {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.option:disabled {\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: unset;\n}\n\n.invalid-color {\n color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.phone-error {\n margin: 4px 0 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Error-Error-500, #f46a6b);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, Element, Listen, AttachInternals, h } from '@stencil/core';\n\ninterface CountryCode {\n name: string;\n code: string;\n flag: string;\n maxLength: number;\n}\n\nconst COUNTRIES: CountryCode[] = [\n { code: '57', name: 'Colombia', flag: 'CO', maxLength: 10 },\n { code: '52', name: 'Mexico', flag: 'MX', maxLength: 10 },\n { code: '507', name: 'Panama', flag: 'PA', maxLength: 8 },\n { code: '56', name: 'Chile', flag: 'CL', maxLength: 9 },\n { code: '593', name: 'Ecuador', flag: 'EC', maxLength: 10 },\n { code: '51', name: 'Peru', flag: 'PE', maxLength: 9 },\n { code: '34', name: 'España', flag: 'ES', maxLength: 9 },\n { code: '595', name: 'Paraguay', flag: 'PY', maxLength: 9 },\n { code: '58', name: 'Venezuela', flag: 'VE', maxLength: 11 },\n { code: '54', name: 'Argentina', flag: 'AR', maxLength: 10 },\n { code: '55', name: 'Brasil', flag: 'BR', maxLength: 11 },\n { code: '1', name: 'United States', flag: 'US', maxLength: 10 },\n { code: '502', name: 'Guatemala', flag: 'GT', maxLength: 8 },\n { code: '598', name: 'Uruguay', flag: 'UY', maxLength: 9 },\n { code: '501', name: 'Belize', flag: 'BZ', maxLength: 7 },\n { code: '81', name: 'Japan', flag: 'JP', maxLength: 10 },\n { code: '1', name: 'Canada', flag: 'CA', maxLength: 9 },\n { code: '1473', name: 'Grenada', flag: 'GD', maxLength: 10 },\n { code: '509', name: 'Haiti', flag: 'HT', maxLength: 10 },\n { code: '1809', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n { code: '1829', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n { code: '1849', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n { code: '1869', name: 'Saint Kitts And Nevis', flag: 'KN', maxLength: 10 },\n { code: '1784', name: 'Saint Vincent And The Grenadines', flag: 'VC', maxLength: 10 },\n { code: '1758', name: 'Saint Lucia', flag: 'LC', maxLength: 10 },\n { code: '597', name: 'Suriname', flag: 'SR', maxLength: 10 },\n { code: '1868', name: 'Trinidad and Tobago', flag: 'TT', maxLength: 10 },\n { code: '505', name: 'Nicaragua', flag: 'NI', maxLength: 8 },\n { code: '506', name: 'Costa Rica', flag: 'CR', maxLength: 8 },\n { code: '591', name: 'Bolivia', flag: 'BO', maxLength: 8 },\n { code: '7', name: 'Russia', flag: 'RU', maxLength: 11 },\n { code: '20', name: 'Egypt', flag: 'EG', maxLength: 9 },\n { code: '27', name: 'South Africa', flag: 'ZA', maxLength: 10 },\n { code: '30', name: 'Greece', flag: 'GR', maxLength: 10 },\n { code: '31', name: 'Netherlands', flag: 'NL', maxLength: 9 },\n { code: '32', name: 'Belgium', flag: 'BE', maxLength: 8 },\n { code: '33', name: 'France', flag: 'FR', maxLength: 9 },\n { code: '36', name: 'Hungary', flag: 'HU', maxLength: 9 },\n { code: '40', name: 'Romania', flag: 'RO', maxLength: 9 },\n { code: '39', name: 'Italy', flag: 'IT', maxLength: 10 },\n { code: '41', name: 'Switzerland', flag: 'CH', maxLength: 9 },\n { code: '44', name: 'United Kingdom', flag: 'GB', maxLength: 11 },\n { code: '45', name: 'Denmark', flag: 'DK', maxLength: 8 },\n { code: '46', name: 'Sweden', flag: 'SE', maxLength: 8 },\n { code: '47', name: 'Norway', flag: 'NO', maxLength: 8 },\n { code: '48', name: 'Poland', flag: 'PL', maxLength: 9 },\n { code: '49', name: 'Germany', flag: 'DE', maxLength: 11 },\n { code: '53', name: 'Malta', flag: 'MT', maxLength: 8 },\n { code: '60', name: 'Malaysia', flag: 'MY', maxLength: 9 },\n { code: '61', name: 'Australia', flag: 'AU', maxLength: 9 },\n { code: '62', name: 'Indonesia', flag: 'ID', maxLength: 12 },\n { code: '63', name: 'Philippines', flag: 'PH', maxLength: 10 },\n { code: '64', name: 'New Zealand', flag: 'NZ', maxLength: 12 },\n { code: '65', name: 'Singapore', flag: 'SG', maxLength: 8 },\n { code: '66', name: 'Thailand', flag: 'TH', maxLength: 9 },\n { code: '82', name: 'South Korea', flag: 'KR', maxLength: 9 },\n { code: '84', name: 'Vietnam', flag: 'VN', maxLength: 11 },\n { code: '86', name: 'China', flag: 'CN', maxLength: 11 },\n { code: '90', name: 'Turkey', flag: 'TR', maxLength: 10 },\n { code: '91', name: 'India', flag: 'IN', maxLength: 10 },\n { code: '92', name: 'Pakistan', flag: 'PK', maxLength: 9 },\n { code: '93', name: 'Afghanistan', flag: 'AF', maxLength: 10 },\n { code: '94', name: 'Sri Lanka', flag: 'LK', maxLength: 9 },\n { code: '95', name: 'Myanmar', flag: 'MM', maxLength: 9 },\n { code: '98', name: 'Iran', flag: 'IR', maxLength: 10 },\n { code: '211', name: 'South Sudan', flag: 'SS', maxLength: 10 },\n { code: '212', name: 'Morocco', flag: 'MA', maxLength: 9 },\n { code: '213', name: 'Algeria', flag: 'DZ', maxLength: 9 },\n { code: '216', name: 'Tunisia', flag: 'TN', maxLength: 8 },\n { code: '218', name: 'Libya', flag: 'LY', maxLength: 9 },\n { code: '220', name: 'Gambia', flag: 'GM', maxLength: 8 },\n { code: '221', name: 'Senegal', flag: 'SN', maxLength: 9 },\n { code: '222', name: 'Mauritania', flag: 'MR', maxLength: 9 },\n { code: '223', name: 'Mali', flag: 'ML', maxLength: 8 },\n { code: '224', name: 'Guinea', flag: 'GN', maxLength: 9 },\n { code: '225', name: 'Ivory Coast', flag: 'CI', maxLength: 10 },\n { code: '226', name: 'Burkina Faso', flag: 'BF', maxLength: 10 },\n { code: '227', name: 'Niger', flag: 'NE', maxLength: 8 },\n { code: '228', name: 'Togo', flag: 'TG', maxLength: 8 },\n { code: '229', name: 'Benin', flag: 'BJ', maxLength: 8 },\n { code: '230', name: 'Mauritius', flag: 'MU', maxLength: 10 },\n { code: '231', name: 'Liberia', flag: 'LR', maxLength: 8 },\n { code: '232', name: 'Sierra Leone', flag: 'SL', maxLength: 11 },\n { code: '233', name: 'Ghana', flag: 'GH', maxLength: 9 },\n { code: '234', name: 'Nigeria', flag: 'NG', maxLength: 11 },\n { code: '235', name: 'Chad', flag: 'TD', maxLength: 8 },\n { code: '236', name: 'Central African Republic', flag: 'CF', maxLength: 21 },\n { code: '237', name: 'Cameroon', flag: 'CM', maxLength: 10 },\n { code: '238', name: 'Cape Verde', flag: 'CV', maxLength: 9 },\n { code: '239', name: 'São Tomé and Príncipe', flag: 'ST', maxLength: 14 },\n { code: '240', name: 'Equatorial Guinea', flag: 'GQ', maxLength: 17 },\n { code: '241', name: 'Gabon', flag: 'GA', maxLength: 9 },\n];\n\n/\n @component dropi-phone-input\n * Phone number input with country code selector.\n * Syncs perfectly with dropi-core_front natively\n /\n@Component({\n tag: 'dropi-phone-input',\n styleUrl: 'dropi-phone-input.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiPhoneInput {\n @Element() el: HTMLElement;\n @AttachInternals() internals: ElementInternals;\n\n /* Name for native form submission /\n @Prop({ reflect: true }) name!: string;\n\n\n /* Initial country dial code (e.g. \"57\") — matches Angular 'CodArea' setter /\n @Prop({ mutable: true }) codArea: string = '57';\n /* Phone number value — matches Angular 'ngModelPhone' /\n @Prop({ mutable: true }) ngModelPhone: string = '';\n /* Input placeholder — matches Angular 'phoneNumberPlaceholder' /\n @Prop() phoneNumberPlaceholder: string \| null = null;\n /* Disabled state — matches Angular 'disabledInput' /\n @Prop() disabledInput: boolean = false;\n /* Validation state — matches Angular 'isValidPhone' /\n @Prop() isValidPhone: boolean = undefined;\n /* Validate on init — matches Angular 'validateOnInit' /\n @Prop() validateOnInit: boolean = true;\n /\n Pre-selected country object (matches Angular `selectedOption: Country`).\n * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.\n /\n @Prop({ mutable: true }) selectedOption: any = null;\n /\n Country select configuration object (matches Angular `selectProperties: SelectProperties`).\n * Fields: `label`, `placeholder`, `options` (array of Country objects).\n * When provided, overrides the internal country list.\n /\n @Prop() selectProperties: any = null;\n\n @State() private open: boolean = false;\n\n /* Emitted when country dial code changes — matches Angular 'ngModelChangeCod' /\n @Event() dropiCodChange: EventEmitter<string>;\n /* Emitted when phone number changes — matches Angular 'ngModelChangePhone' /\n @Event() dropiPhoneChange: EventEmitter<string>;\n /* Emitted on field verification — matches Angular 'verifiedField' /\n @Event() dropiVerify: EventEmitter<void>;\n /* Emitted when country selection changes — matches Angular 'onChangeSelect' */\n @Event() dropiChangeSelect: EventEmitter<any>;\n\n @Watch('codArea')\n codAreaChanged() {\n this.ngModelPhone = '';\n this.updateFormValue();\n }\n\n @Watch('ngModelPhone')\n ngModelPhoneChanged() {\n this.updateFormValue();\n }\n\n\n @Watch('selectedOption')\n selectedOptionChanged(val: any) {\n if (!val) return;\n // Support Angular Country shape: { dialCode, iso2 } or { code }\n const code = val.dialCode ?? val.code ?? this.codArea;\n this.codArea = String(code).replace('+', '');\n }\n\n componentWillLoad() {\n if (this.selectedOption) this.selectedOptionChanged(this.selectedOption);\n this.updateFormValue();\n }\n\n private updateFormValue() {\n const fullValue = this.ngModelPhone ? `+${this.codArea}${this.ngModelPhone}` : '';\n this.internals.setFormValue(fullValue);\n }\n\n\n private get selectedCountry(): CountryCode {\n const cleanCodArea = (this.codArea ?? '57').replace('+', '');\n return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];\n }\n\n private selectCountry(c: CountryCode) {\n this.codArea = c.code;\n this.open = false;\n this.dropiCodChange.emit(c.code);\n this.dropiChangeSelect.emit(c);\n }\n\n private handleInput(e: InputEvent) {\n const raw = (e.target as HTMLInputElement).value.replace(/\\D/g, '');\n this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);\n (e.target as HTMLInputElement).value = this.ngModelPhone;\n this.dropiPhoneChange.emit(this.ngModelPhone);\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(ev: Event) {\n const path = ev.composedPath();\n if (!path.includes(this.el)) {\n this.open = false;\n }\n }\n\n render() {\n const country = this.selectedCountry;\n const isInvalid = this.isValidPhone === false;\n\n return (\n <div class=\"phone-wrap\">\n <div class=\"phone-input-container\">\n\n <div class=\"custom-select\">\n <button\n type=\"button\"\n class={{ 'select-button': true, 'select-invalid': isInvalid }}\n disabled={this.disabledInput}\n onClick={() => { if (!this.disabledInput) this.open = !this.open; }}\n >\n <span style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <img src={`https://flagsapi.com/${country.flag}/flat/24.png`} alt=\"flag\" />\n {country.code}\n </span>\n <dropi-icon name={this.open ? 'Dropdown-up' : 'Dropdown-down'} iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-500\" />\n </button>\n\n <ul class={{ 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open }}>\n {COUNTRIES.map(option => (\n <li>\n <button\n type=\"button\"\n class=\"option\"\n onMouseDown={(e) => { e.preventDefault(); this.selectCountry(option); }}\n >\n <img src={`https://flagsapi.com/${option.flag}/flat/24.png`} alt={option.flag} />\n {option.code}\n </button>\n </li>\n ))}\n </ul>\n </div>\n\n <input\n id=\"phone-input\"\n type=\"tel\"\n inputmode=\"numeric\"\n class={{ 'form-control': true, 'is-invalid': isInvalid }}\n placeholder={this.phoneNumberPlaceholder}\n value={this.ngModelPhone}\n disabled={this.disabledInput}\n maxLength={country.maxLength}\n onInput={(e) => this.handleInput(e as InputEvent)}\n />\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-progress-bar.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
-const dropiProgressBarCss = () => `:host{display:block;width:100%}.progress-container{width:100%;display:flex;flex-direction:column;gap:4px}.progress-header{display:flex;justify-content:flex-end}.progress-value{font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-600, #475066);font-weight:500}.progress-track{width:100%;border-radius:999px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:999px;transition:width 0.3s ease-in-out, background-color 0.3s ease-in-out}`;
+const dropiProgressBarCss = () => `:host{display:block;width:100%;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.progress-container{width:100%;display:flex;flex-direction:column;gap:4px}.progress-header{display:flex;justify-content:flex-end}.progress-value{font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-600, #475066);font-weight:500}.progress-track{width:100%;border-radius:999px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:999px;transition:width 0.3s ease-in-out, background-color 0.3s ease-in-out}`;
 const DropiProgressBar = class {
     constructor(hostRef) {
@@ -23,7 +23,7 @@ const DropiProgressBar = class {
             width: `${Math.min(100, Math.max(0, this.value))}%`,
             backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
         };
-        return (h("div", { key: '3ee4e18ca3beb77287998fcb8bc1d2f0221376cc', class: "progress-container" }, this.showValue && (h("div", { key: '6b034366142b04ba11c5d7565b61aa2305c2c2b6', class: "progress-header" }, h("span", { key: '6e8b7394b463934702228c5dec02a3f5116b87aa', class: "progress-value" }, this.value, "%"))), h("div", { key: 'ecfe4703272ae8d7d53f2baeeb210d22437d42ed', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: 'e3312f134f691d5e828a130940b100ff244bc6a9', class: "progress-fill", style: fillStyle }))));
+        return (h("div", { key: 'a9ccf6692e56b1fd73dbbe4d79d6f08e057597a6', class: "progress-container" }, this.showValue && (h("div", { key: 'ce85b6b25d27bee0219aeeb0d495a868e947822a', class: "progress-header" }, h("span", { key: '662ca3792ea6ca93400da71d8f1f76b95e2d7bf3', class: "progress-value" }, this.value, "%"))), h("div", { key: '8ef2f390e6a9994c4b3bdb374c578fc7195053ca', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: '7118c9fe383970614b14f91cc3c4fa73eabcec0a', class: "progress-fill", style: fillStyle }))));
     }
     getSeverityVariable() {
         switch (this.severity) {

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

	@@ -1 +1 @@
1	- {"file":"dropi-progress-bar.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,~~6cAA6c~~,CAAC;;~~MCOpe~~,gBAAgB,GAAA,MAAA;;;;;IAEnB,KAAK,GAAW,CAAC;;IAGjB,QAAQ,GAAqE,SAAS;;IAGtF,MAAM,GAAW,KAAK;;IAGtB,SAAS,GAAY,KAAK;;IAG1B,UAAU,GAAW,+BAA+B;;IAGpD,KAAK,GAAW,EAAE;IAE1B,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG;AAChB,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA,CAAA,CAAG;YACnD,eAAe,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,mBAAmB,EAAE,CAAA,UAAA,CAAY;SAC/E;QAED,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,KAAK,EAAS,GAAA,CAAA,CAC7C,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAC1F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,SAAS,EAAA,CAAQ,CAC/C,CACF;;IAIF,mBAAmB,GAAA;AACzB,QAAA,QAAQ,IAAI,CAAC,QAAQ;AACnB,YAAA,KAAK,SAAS,EAAE,OAAO,qBAAqB;AAC5C,YAAA,KAAK,SAAS,EAAE,OAAO,qBAAqB;AAC5C,YAAA,KAAK,OAAO,EAAE,OAAO,iBAAiB;AACtC,YAAA,KAAK,MAAM,EAAE,OAAO,eAAe;AACnC,YAAA,KAAK,SAAS,EAAE,OAAO,eAAe;AACtC,YAAA,SAAS,OAAO,qBAAqB;;;;;;;;","names":[],"sources":["src/components/dropi-progress-bar/dropi-progress-bar.css?tag=dropi-progress-bar&encapsulation=shadow","src/components/dropi-progress-bar/dropi-progress-bar.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.progress-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.progress-header {\n display: flex;\n justify-content: flex-end;\n}\n\n.progress-value {\n font-size: var(--font-size-xs, 12px);\n color: var(--Gray-Gray-600, #475066);\n font-weight: 500;\n}\n\n.progress-track {\n width: 100%;\n border-radius: 999px;\n overflow: hidden;\n position: relative;\n}\n\n.progress-fill {\n height: 100%;\n border-radius: 999px;\n transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'dropi-progress-bar',\n styleUrl: 'dropi-progress-bar.css',\n shadow: true,\n})\nexport class DropiProgressBar {\n /** The progress value (0-100) /\n @Prop() value: number = 0;\n\n /* The color scheme of the progress bar /\n @Prop() severity: 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'neutral' = 'primary';\n\n /* Height of the progress bar /\n @Prop() height: string = '8px';\n\n /* Whether to show the value as text /\n @Prop() showValue: boolean = false;\n\n /* Background color of the track (optional, defaults to gray-100) /\n @Prop() trackColor: string = 'var(--Gray-Gray-100, #F7F8FA)';\n\n /* Custom color for the progress fill (overrides severity) */\n @Prop() color: string = '';\n\n render() {\n const fillStyle = {\n width: `${Math.min(100, Math.max(0, this.value))}%`,\n backgroundColor: this.color \|\| `var(--${this.getSeverityVariable()}, #50A5F1)`,\n };\n\n return (\n <div class=\"progress-container\">\n {this.showValue && (\n <div class=\"progress-header\">\n <span class=\"progress-value\">{this.value}%</span>\n </div>\n )}\n <div class=\"progress-track\" style={{ height: this.height, backgroundColor: this.trackColor }}>\n <div class=\"progress-fill\" style={fillStyle}></div>\n </div>\n </div>\n );\n }\n\n private getSeverityVariable() {\n switch (this.severity) {\n case 'success': return 'Success-Success-500';\n case 'warning': return 'Warning-Warning-500';\n case 'error': return 'Error-Error-500';\n case 'info': return 'Info-Info-500';\n case 'neutral': return 'Gray-Gray-400';\n default: return 'Primary-Primary-500';\n }\n }\n}\n"],"version":3}
1	+ {"file":"dropi-progress-bar.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,kiBAAkiB,CAAC;;MCOzjB,gBAAgB,GAAA,MAAA;;;;;IAEnB,KAAK,GAAW,CAAC;;IAGjB,QAAQ,GAAqE,SAAS;;IAGtF,MAAM,GAAW,KAAK;;IAGtB,SAAS,GAAY,KAAK;;IAG1B,UAAU,GAAW,+BAA+B;;IAGpD,KAAK,GAAW,EAAE;IAE1B,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG;AAChB,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA,CAAA,CAAG;YACnD,eAAe,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,mBAAmB,EAAE,CAAA,UAAA,CAAY;SAC/E;QAED,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,KAAK,EAAS,GAAA,CAAA,CAC7C,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAC1F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,SAAS,EAAA,CAAQ,CAC/C,CACF;;IAIF,mBAAmB,GAAA;AACzB,QAAA,QAAQ,IAAI,CAAC,QAAQ;AACnB,YAAA,KAAK,SAAS,EAAE,OAAO,qBAAqB;AAC5C,YAAA,KAAK,SAAS,EAAE,OAAO,qBAAqB;AAC5C,YAAA,KAAK,OAAO,EAAE,OAAO,iBAAiB;AACtC,YAAA,KAAK,MAAM,EAAE,OAAO,eAAe;AACnC,YAAA,KAAK,SAAS,EAAE,OAAO,eAAe;AACtC,YAAA,SAAS,OAAO,qBAAqB;;;;;;;;","names":[],"sources":["src/components/dropi-progress-bar/dropi-progress-bar.css?tag=dropi-progress-bar&encapsulation=shadow","src/components/dropi-progress-bar/dropi-progress-bar.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: block;\n width: 100%;\n}\n\n.progress-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.progress-header {\n display: flex;\n justify-content: flex-end;\n}\n\n.progress-value {\n font-size: var(--font-size-xs, 12px);\n color: var(--Gray-Gray-600, #475066);\n font-weight: 500;\n}\n\n.progress-track {\n width: 100%;\n border-radius: 999px;\n overflow: hidden;\n position: relative;\n}\n\n.progress-fill {\n height: 100%;\n border-radius: 999px;\n transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'dropi-progress-bar',\n styleUrl: 'dropi-progress-bar.css',\n shadow: true,\n})\nexport class DropiProgressBar {\n /** The progress value (0-100) /\n @Prop() value: number = 0;\n\n /* The color scheme of the progress bar /\n @Prop() severity: 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'neutral' = 'primary';\n\n /* Height of the progress bar /\n @Prop() height: string = '8px';\n\n /* Whether to show the value as text /\n @Prop() showValue: boolean = false;\n\n /* Background color of the track (optional, defaults to gray-100) /\n @Prop() trackColor: string = 'var(--Gray-Gray-100, #F7F8FA)';\n\n /* Custom color for the progress fill (overrides severity) */\n @Prop() color: string = '';\n\n render() {\n const fillStyle = {\n width: `${Math.min(100, Math.max(0, this.value))}%`,\n backgroundColor: this.color \|\| `var(--${this.getSeverityVariable()}, #50A5F1)`,\n };\n\n return (\n <div class=\"progress-container\">\n {this.showValue && (\n <div class=\"progress-header\">\n <span class=\"progress-value\">{this.value}%</span>\n </div>\n )}\n <div class=\"progress-track\" style={{ height: this.height, backgroundColor: this.trackColor }}>\n <div class=\"progress-fill\" style={fillStyle}></div>\n </div>\n </div>\n );\n }\n\n private getSeverityVariable() {\n switch (this.severity) {\n case 'success': return 'Success-Success-500';\n case 'warning': return 'Warning-Warning-500';\n case 'error': return 'Error-Error-500';\n case 'info': return 'Info-Info-500';\n case 'neutral': return 'Gray-Gray-400';\n default: return 'Primary-Primary-500';\n }\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-radio-button.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
+const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 const DropiRadioButton = class {
     constructor(hostRef) {
@@ -45,7 +45,7 @@ const DropiRadioButton = class {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: '52b37c673be108d7375ac9e8fdc2681528028f24', class: "dropi-radio-button" }, h("label", { key: '0fdd72139f33d395ab219ea90c3742e5a8537f71', htmlFor: this.inputId }, h("input", { key: '6779d419a98c4ffeb0f44cdf91c34be9bc806c3d', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: 'a29eaa3007a8b858f9518e7335416b580b6884d5', class: "dropi-radio-button" }, h("label", { key: '3a6d4f3850cd7a5fbd469acb264679d8db5758cf', htmlFor: this.inputId }, h("input", { key: '5da6efd3ff40753609431547ddc575c4bc214400', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"dropi-radio-button.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,~~s9BAAs9B~~,CAAC;;~~MCY7+B~~,gBAAgB,GAAA,MAAA;;;;;;;;;;;;AACR,IAAA,SAAS;;IAGpB,KAAK,GAAW,EAAE;;AAED,IAAA,IAAI;;AAGrB,IAAA,OAAO;;IAEyB,OAAO,GAAY,KAAK;AAEhE;;;AAGG;IACK,YAAY,GAAY,KAAK;;AAG5B,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,GAAG;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAI/B,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,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;;AAIjD,IAAA,YAAY,CAAC,CAAQ,EAAA;QAC3B,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;AACrD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;;IAG1B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC1B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAA,CACrC,EACD,IAAI,CAAC,KAAK,CACL,CACJ;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-radio-button/dropi-radio-button.css?tag=dropi-radio-button&encapsulation=shadow","src/components/dropi-radio-button/dropi-radio-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.dropi-radio-button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 20px;\n}\n\nlabel {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n color: var(--Gray-Gray-700, #32394d);\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-regular, 400);\n line-height: 1.5;\n}\n\ninput[type='radio'] {\n appearance: none;\n -webkit-appearance: none;\n width: 20px;\n height: 20px;\n min-width: 20px;\n border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: 50%;\n background-color: transparent;\n position: relative;\n cursor: pointer;\n outline: none;\n flex-shrink: 0;\n align-self: center;\n vertical-align: middle;\n margin: 0;\n}\n\ninput[type='radio']::before {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 10px;\n height: 10px;\n background-color: var(--Primary-Primary-400, #f7b46f);\n border-radius: 50%;\n display: none;\n}\n\ninput[type='radio']:checked {\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\ninput[type='radio']:checked::before {\n display: block;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, AttachInternals, h } from '@stencil/core';\n\n/\n @component dropi-radio-button\n * Styled radio button with label.\n /\n@Component({\n tag: 'dropi-radio-button',\n styleUrl: 'dropi-radio-button.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiRadioButton {\n @AttachInternals() internals: ElementInternals;\n\n /* Label text displayed next to the radio /\n @Prop() label: string = '';\n /* Input name (for grouping radio buttons) /\n @Prop({ reflect: true }) name!: string;\n\n /* Input id /\n @Prop() inputId!: string;\n /* Whether this radio is selected /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /\n Set to true to programmatically reset this radio to unchecked.\n * Useful when the parent needs to clear a group.\n /\n @Prop() resetTrigger: boolean = false;\n\n /* Emitted when the radio is selected */\n @Event() dropiChange: EventEmitter<any>;\n\n @Watch('resetTrigger')\n onResetTrigger(val: boolean) {\n if (val) this.checked = false;\n }\n\n @Watch('checked')\n checkedChanged(val: boolean) {\n this.internals.setFormValue(val ? 'on' : null);\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.checked ? 'on' : null);\n }\n\n\n private handleChange(e: Event) {\n this.checked = (e.target as HTMLInputElement).checked;\n this.dropiChange.emit(e);\n }\n\n render() {\n return (\n <div class=\"dropi-radio-button\">\n <label htmlFor={this.inputId}>\n <input\n id={this.inputId}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n onChange={(e) => this.handleChange(e)}\n />\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-radio-button.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,0iCAA0iC,CAAC;;MCYjkC,gBAAgB,GAAA,MAAA;;;;;;;;;;;;AACR,IAAA,SAAS;;IAGpB,KAAK,GAAW,EAAE;;AAED,IAAA,IAAI;;AAGrB,IAAA,OAAO;;IAEyB,OAAO,GAAY,KAAK;AAEhE;;;AAGG;IACK,YAAY,GAAY,KAAK;;AAG5B,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,GAAG;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAI/B,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,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;;AAIjD,IAAA,YAAY,CAAC,CAAQ,EAAA;QAC3B,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;AACrD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;;IAG1B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC1B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAA,CACrC,EACD,IAAI,CAAC,KAAK,CACL,CACJ;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-radio-button/dropi-radio-button.css?tag=dropi-radio-button&encapsulation=shadow","src/components/dropi-radio-button/dropi-radio-button.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.dropi-radio-button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 20px;\n}\n\nlabel {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n color: var(--Gray-Gray-700, #32394d);\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-regular, 400);\n line-height: 1.5;\n}\n\ninput[type='radio'] {\n appearance: none;\n -webkit-appearance: none;\n width: 20px;\n height: 20px;\n min-width: 20px;\n border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: 50%;\n background-color: transparent;\n position: relative;\n cursor: pointer;\n outline: none;\n flex-shrink: 0;\n align-self: center;\n vertical-align: middle;\n margin: 0;\n}\n\ninput[type='radio']::before {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 10px;\n height: 10px;\n background-color: var(--Primary-Primary-400, #f7b46f);\n border-radius: 50%;\n display: none;\n}\n\ninput[type='radio']:checked {\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\ninput[type='radio']:checked::before {\n display: block;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, AttachInternals, h } from '@stencil/core';\n\n/\n @component dropi-radio-button\n * Styled radio button with label.\n /\n@Component({\n tag: 'dropi-radio-button',\n styleUrl: 'dropi-radio-button.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiRadioButton {\n @AttachInternals() internals: ElementInternals;\n\n /* Label text displayed next to the radio /\n @Prop() label: string = '';\n /* Input name (for grouping radio buttons) /\n @Prop({ reflect: true }) name!: string;\n\n /* Input id /\n @Prop() inputId!: string;\n /* Whether this radio is selected /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /\n Set to true to programmatically reset this radio to unchecked.\n * Useful when the parent needs to clear a group.\n /\n @Prop() resetTrigger: boolean = false;\n\n /* Emitted when the radio is selected */\n @Event() dropiChange: EventEmitter<any>;\n\n @Watch('resetTrigger')\n onResetTrigger(val: boolean) {\n if (val) this.checked = false;\n }\n\n @Watch('checked')\n checkedChanged(val: boolean) {\n this.internals.setFormValue(val ? 'on' : null);\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.checked ? 'on' : null);\n }\n\n\n private handleChange(e: Event) {\n this.checked = (e.target as HTMLInputElement).checked;\n this.dropiChange.emit(e);\n }\n\n render() {\n return (\n <div class=\"dropi-radio-button\">\n <label htmlFor={this.inputId}>\n <input\n id={this.inputId}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n onChange={(e) => this.handleChange(e)}\n />\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-radio-selection-list.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.rsl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.rsl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.rsl__list{display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.rsl__item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);cursor:pointer;transition:border-color 0.15s, background 0.15s}.rsl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.rsl__item--selected{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.rsl__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--Gray-Gray-300, #a3abbf);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;transition:border-color 0.15s}.rsl__radio--checked{border-color:var(--Primary-Primary-500, #f49a3d)}.rsl__radio-dot{width:8px;height:8px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.rsl__content{display:flex;flex-direction:column;gap:2px}.rsl__name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d)}.rsl__desc{font-size:var(--font-size-xs, 10px);line-height:1.4;color:var(--Gray-Gray-500, #69738c)}`;
+const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.rsl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.rsl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);background:transparent}.rsl__list{display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.rsl__item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);cursor:pointer;transition:border-color 0.15s, background 0.15s}.rsl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.rsl__item--selected{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.rsl__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--Gray-Gray-300, #a3abbf);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;transition:border-color 0.15s}.rsl__radio--checked{border-color:var(--Primary-Primary-500, #f49a3d)}.rsl__radio-dot{width:8px;height:8px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.rsl__content{display:flex;flex-direction:column;gap:2px}.rsl__name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d)}.rsl__desc{font-size:var(--font-size-xs, 10px);line-height:1.4;color:var(--Gray-Gray-500, #69738c)}`;
 const DropiRadioSelectionList = class {
     constructor(hostRef) {
@@ -39,10 +39,10 @@ const DropiRadioSelectionList = class {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (h("div", { key: '296bdc955d13b8163ca954f6d399543343e7e121', class: "rsl" }, this.showFilter && (h("div", { key: '4cdd3764411f389d2b6ce1145f5b6759bb20fc7b', class: "rsl__search" }, h("dropi-icon", { key: '81af80a3dddb6176625b6ba575b084501741cd81', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: 'aa0e762f4403431225375f95c792af8596529588', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: '84ee5164211b7c1a5169cebf4bd7aa5da6665dea', class: "rsl" }, this.showFilter && (h("div", { key: 'e88120ded47d75873eff4cf32e67943eee035261', class: "rsl__search" }, h("dropi-icon", { key: '9dfa96dff08a8dcd41031d7ff59996bf91ee967c', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: 'bad133dae286af64c155a64eed802a66d68827af', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
-            } }))), h("div", { key: 'd153875a1c09957b74648f61f70320968ea6cd40', class: "rsl__list" }, this.filtered.map(opt => {
+            } }))), h("div", { key: '2454d0f42bf03e636fc674fe14605b3c54ea3a2b', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
             return (h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && h("div", { class: "rsl__radio-dot" })), h("div", { class: "rsl__content" }, h("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
         }))));

package/dist/dropi-ui/dropi-radio-selection-list.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-radio-selection-list.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,MAAM,CAAC,~~2iDAA2iD~~,CAAC;;~~MCmBzkD~~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","names":[],"sources":["src/components/dropi-radio-selection-list/dropi-radio-selection-list.css?tag=dropi-radio-selection-list&encapsulation=shadow","src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n, ::before, ::after { box-sizing: border-box; }\n\n.rsl__search {\n display: flex;\n align-items: center;\n gap: var(--Size-2, 8px);\n padding: var(--Size-2, 8px) var(--Size-3, 12px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n margin-bottom: var(--Size-2, 8px);\n}\n\n.rsl__search-input {\n flex: 1;\n border: none;\n outline: none;\n font-size: var(--font-size-s, 12px);\n font-family: ~~inherit~~;\n color: var(--Gray-Gray-700, #32394d);\n background: transparent;\n}\n\n.rsl__list { display: flex; flex-direction: column; gap: var(--Size-2, 8px); }\n\n.rsl__item {\n display: flex;\n align-items: flex-start;\n gap: var(--Size-3, 12px);\n padding: var(--Size-3, 12px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n}\n\n.rsl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n.rsl__item--selected { border-color: var(--Primary-Primary-500, #f49a3d); background: var(--Primary-Primary-50, #fff5eb); }\n\n.rsl__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--Gray-Gray-300, #a3abbf);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 3px;\n transition: border-color 0.15s;\n}\n\n.rsl__radio--checked { border-color: var(--Primary-Primary-500, #f49a3d); }\n\n.rsl__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.rsl__content { display: flex; flex-direction: column; gap: 2px; }\n.rsl__name { font-size: var(--font-size-s, 12px); color: var(--Gray-Gray-700, #32394d); }\n.rsl__desc { font-size: var(--font-size-xs, 10px); line-height: 1.4; color: var(--Gray-Gray-500, #69738c); }\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface RadioOption {\n id: string \| number;\n name: string;\n description?: string;\n icon?: string;\n [key: string]: any;\n}\n\n/\n @component dropi-radio-selection-list\n * List of radio button options with optional search filter.\n /\n@Component({\n tag: 'dropi-radio-selection-list',\n styleUrl: 'dropi-radio-selection-list.css',\n shadow: true,\n})\nexport class DropiRadioSelectionList {\n /* Options array or JSON string /\n @Prop() options: RadioOption[] \| string = [];\n /* Selected option id /\n @Prop({ mutable: true }) selectedOption: string \| number = '';\n /* Show search box /\n @Prop() showFilter: boolean = false;\n /* Search placeholder /\n @Prop() filterPlaceholder: string = 'Search';\n /* Show description even when option is not selected /\n @Prop() alwaysShowDescription: boolean = true;\n /* Layout type /\n @Prop() typeLayout: 'description' \| 'default' = 'default';\n /* Delay before filtering (matches Angular `searchDelay`) /\n @Prop() searchDelay: number = 100;\n\n @State() private filterText: string = '';\n @State() private parsedOptions: RadioOption[] = [];\n\n /* Emitted on selection change. e.detail = selected option id /\n @Event() dropiChange: EventEmitter<string \| number>;\n /* Emitted on search — matches Angular 'onSearch' */\n @Event() dropiSearch: EventEmitter<{ searchValue: string; filteredOptions: RadioOption[] }>;\n\n @Watch('options')\n optionsChanged(val: RadioOption[] \| string) {\n this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val \|\| []);\n }\n\n componentWillLoad() { this.optionsChanged(this.options); }\n\n private get filtered(): RadioOption[] {\n if (!this.filterText) return this.parsedOptions;\n const q = this.filterText.toLowerCase();\n return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));\n }\n\n render() {\n return (\n <div class=\"rsl\">\n {this.showFilter && (\n <div class=\"rsl__search\">\n <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n <input\n class=\"rsl__search-input\"\n type=\"text\"\n placeholder={this.filterPlaceholder}\n value={this.filterText}\n onInput={(e) => {\n this.filterText = (e.target as HTMLInputElement).value;\n this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });\n }}\n />\n </div>\n )}\n\n <div class=\"rsl__list\">\n {this.filtered.map(opt => {\n const isSelected = opt.id === this.selectedOption;\n return (\n <div\n class={{ 'rsl__item': true, 'rsl__item--selected': isSelected }}\n key={opt.id}\n onClick={() => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); }}\n >\n <div class={{ 'rsl__radio': true, 'rsl__radio--checked': isSelected }}>\n {isSelected && <div class=\"rsl__radio-dot\" />}\n </div>\n <div class=\"rsl__content\">\n <span class=\"rsl__name\">{opt.name}</span>\n {(isSelected \|\| this.alwaysShowDescription) && opt.description && (\n <span class=\"rsl__desc\">{opt.description}</span>\n )}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-radio-selection-list.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-radio-selection-list/dropi-radio-selection-list.css?tag=dropi-radio-selection-list&encapsulation=shadow","src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n, ::before, ::after { box-sizing: border-box; }\n\n.rsl__search {\n display: flex;\n align-items: center;\n gap: var(--Size-2, 8px);\n padding: var(--Size-2, 8px) var(--Size-3, 12px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n margin-bottom: var(--Size-2, 8px);\n}\n\n.rsl__search-input {\n flex: 1;\n border: none;\n outline: none;\n font-size: var(--font-size-s, 12px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n color: var(--Gray-Gray-700, #32394d);\n background: transparent;\n}\n\n.rsl__list { display: flex; flex-direction: column; gap: var(--Size-2, 8px); }\n\n.rsl__item {\n display: flex;\n align-items: flex-start;\n gap: var(--Size-3, 12px);\n padding: var(--Size-3, 12px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n}\n\n.rsl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n.rsl__item--selected { border-color: var(--Primary-Primary-500, #f49a3d); background: var(--Primary-Primary-50, #fff5eb); }\n\n.rsl__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--Gray-Gray-300, #a3abbf);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 3px;\n transition: border-color 0.15s;\n}\n\n.rsl__radio--checked { border-color: var(--Primary-Primary-500, #f49a3d); }\n\n.rsl__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.rsl__content { display: flex; flex-direction: column; gap: 2px; }\n.rsl__name { font-size: var(--font-size-s, 12px); color: var(--Gray-Gray-700, #32394d); }\n.rsl__desc { font-size: var(--font-size-xs, 10px); line-height: 1.4; color: var(--Gray-Gray-500, #69738c); }\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface RadioOption {\n id: string \| number;\n name: string;\n description?: string;\n icon?: string;\n [key: string]: any;\n}\n\n/\n @component dropi-radio-selection-list\n * List of radio button options with optional search filter.\n /\n@Component({\n tag: 'dropi-radio-selection-list',\n styleUrl: 'dropi-radio-selection-list.css',\n shadow: true,\n})\nexport class DropiRadioSelectionList {\n /* Options array or JSON string /\n @Prop() options: RadioOption[] \| string = [];\n /* Selected option id /\n @Prop({ mutable: true }) selectedOption: string \| number = '';\n /* Show search box /\n @Prop() showFilter: boolean = false;\n /* Search placeholder /\n @Prop() filterPlaceholder: string = 'Search';\n /* Show description even when option is not selected /\n @Prop() alwaysShowDescription: boolean = true;\n /* Layout type /\n @Prop() typeLayout: 'description' \| 'default' = 'default';\n /* Delay before filtering (matches Angular `searchDelay`) /\n @Prop() searchDelay: number = 100;\n\n @State() private filterText: string = '';\n @State() private parsedOptions: RadioOption[] = [];\n\n /* Emitted on selection change. e.detail = selected option id /\n @Event() dropiChange: EventEmitter<string \| number>;\n /* Emitted on search — matches Angular 'onSearch' */\n @Event() dropiSearch: EventEmitter<{ searchValue: string; filteredOptions: RadioOption[] }>;\n\n @Watch('options')\n optionsChanged(val: RadioOption[] \| string) {\n this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val \|\| []);\n }\n\n componentWillLoad() { this.optionsChanged(this.options); }\n\n private get filtered(): RadioOption[] {\n if (!this.filterText) return this.parsedOptions;\n const q = this.filterText.toLowerCase();\n return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));\n }\n\n render() {\n return (\n <div class=\"rsl\">\n {this.showFilter && (\n <div class=\"rsl__search\">\n <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n <input\n class=\"rsl__search-input\"\n type=\"text\"\n placeholder={this.filterPlaceholder}\n value={this.filterText}\n onInput={(e) => {\n this.filterText = (e.target as HTMLInputElement).value;\n this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });\n }}\n />\n </div>\n )}\n\n <div class=\"rsl__list\">\n {this.filtered.map(opt => {\n const isSelected = opt.id === this.selectedOption;\n return (\n <div\n class={{ 'rsl__item': true, 'rsl__item--selected': isSelected }}\n key={opt.id}\n onClick={() => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); }}\n >\n <div class={{ 'rsl__radio': true, 'rsl__radio--checked': isSelected }}>\n {isSelected && <div class=\"rsl__radio-dot\" />}\n </div>\n <div class=\"rsl__content\">\n <span class=\"rsl__name\">{opt.name}</span>\n {(isSelected \|\| this.alwaysShowDescription) && opt.description && (\n <span class=\"rsl__desc\">{opt.description}</span>\n )}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-read-more.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
-const dropiReadMoreCss = () => `:host{display:block}.read-more__text{margin:0;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);line-height:1.5}.read-more__toggle{all:unset;display:inline;font-size:var(--font-size-s, 12px);font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-600);cursor:pointer}.read-more__toggle:hover{color:var(--Primary-Primary-600, #d4872e)}`;
+const dropiReadMoreCss = () => `:host{display:block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.read-more__text{margin:0;font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-800, #1f2433);line-height:1.5}.read-more__toggle{all:unset;display:inline;font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-600);cursor:pointer}.read-more__toggle:hover{color:var(--Primary-Primary-600, #d4872e)}`;
 const DropiReadMore = class {
     constructor(hostRef) {
@@ -30,7 +30,7 @@ const DropiReadMore = class {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: '748cfee9958aeb1262d07a164624ccd306ce7220', class: "read-more" }, h("p", { key: 'cd987705707a31abc770d5401f0eade8aef5f561', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: '22c809321cfe4b11c7d77d5f55ad690c154f6d2a', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (h("div", { key: 'cdd9eba33482b53a7693e0fb78f6678d12622084', class: "read-more" }, h("p", { key: '8ed7c19c440152ec71293f3cc452a0a215accb85', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: '1838a5a3752fb6f1a7e68b00f167eea862acf713', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
 };
 DropiReadMore.style = dropiReadMoreCss();

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

	@@ -1 +1 @@
1	- {"file":"dropi-read-more.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,~~kZAAkZ~~,CAAC;;~~MCWta~~,aAAa,GAAA,MAAA;;;;;IAEhB,IAAI,GAAW,EAAE;;IAEjB,QAAQ,GAAW,EAAE;;IAErB,WAAW,GAAY,IAAI;;IAE3B,SAAS,GAAW,EAAE;;IAEtB,WAAW,GAAW,EAAE;IAEf,QAAQ,GAAY,KAAK;AAE1C,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;;AAGvD,IAAA,IAAY,eAAe,GAAA;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;;AAG1C,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,IAAI;AAC5D,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrD,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAEpF,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAgB,GAAG,SAAS,EAAA,EACjF,IAAI,CAAC,WAAW,EAChB,UAAU,KACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAkB,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAA,EAC3I,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,aAAa,CACtC,CACV,CACC,CACA;;;;;;;","names":[],"sources":["src/components/dropi-read-more/dropi-read-more.css?tag=dropi-read-more&encapsulation=shadow","src/components/dropi-read-more/dropi-read-more.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.read-more__text {\n margin: 0;\n font-size: var(--font-size-s, 12px);\n font-family: ~~inherit~~;\n color: var(--Gray-Gray-800, #1f2433);\n line-height: 1.5;\n}\n\n.read-more__toggle {\n all: unset;\n display: inline;\n font-size: var(--font-size-s, 12px);\n font-family: ~~inherit~~;\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-600);\n cursor: pointer;\n}\n\n.read-more__toggle:hover {\n color: var(--Primary-Primary-600, #d4872e);\n}\n","import { Component, Prop, State, h } from '@stencil/core';\n\n/*\n @component dropi-read-more\n * Truncates text to a word limit with an expandable \"Ver más / Ver menos\" toggle.\n /\n@Component({\n tag: 'dropi-read-more',\n styleUrl: 'dropi-read-more.css',\n shadow: true,\n})\nexport class DropiReadMore {\n /* Full text to display /\n @Prop() text: string = '';\n /* Maximum number of words before truncating /\n @Prop() maxWords: number = 20;\n /* Allow collapsing back after expanding /\n @Prop() showSeeLess: boolean = true;\n /* Inline CSS string applied to the text element (matches Angular `textStyle`) /\n @Prop() textStyle: string = '';\n /* Inline CSS string applied to the toggle button (matches Angular `buttonStyle`) */\n @Prop() buttonStyle: string = '';\n\n @State() private expanded: boolean = false;\n\n private get words(): string[] {\n return (this.text \|\| '').split(/\\s+/).filter(Boolean);\n }\n\n private get needsTruncation(): boolean {\n return this.words.length > this.maxWords;\n }\n\n private get displayText(): string {\n if (!this.needsTruncation \|\| this.expanded) return this.text;\n return this.words.slice(0, this.maxWords).join(' ');\n }\n\n render() {\n const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);\n\n return (\n <div class=\"read-more\">\n <p class=\"read-more__text\" style={this.textStyle ? this.textStyle as any : undefined}>\n {this.displayText}\n {showToggle && (\n <button class=\"read-more__toggle\" style={this.buttonStyle ? this.buttonStyle as any : undefined} onClick={() => this.expanded = !this.expanded}>\n {this.expanded ? ' Ver menos' : '... Ver más'}\n </button>\n )}\n </p>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-read-more.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,6iBAA6iB,CAAC;;MCWjkB,aAAa,GAAA,MAAA;;;;;IAEhB,IAAI,GAAW,EAAE;;IAEjB,QAAQ,GAAW,EAAE;;IAErB,WAAW,GAAY,IAAI;;IAE3B,SAAS,GAAW,EAAE;;IAEtB,WAAW,GAAW,EAAE;IAEf,QAAQ,GAAY,KAAK;AAE1C,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;;AAGvD,IAAA,IAAY,eAAe,GAAA;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;;AAG1C,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,IAAI;AAC5D,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrD,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAEpF,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAgB,GAAG,SAAS,EAAA,EACjF,IAAI,CAAC,WAAW,EAChB,UAAU,KACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAkB,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAA,EAC3I,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,aAAa,CACtC,CACV,CACC,CACA;;;;;;;","names":[],"sources":["src/components/dropi-read-more/dropi-read-more.css?tag=dropi-read-more&encapsulation=shadow","src/components/dropi-read-more/dropi-read-more.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: block;\n}\n\n.read-more__text {\n margin: 0;\n font-size: var(--font-size-s, 12px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n color: var(--Gray-Gray-800, #1f2433);\n line-height: 1.5;\n}\n\n.read-more__toggle {\n all: unset;\n display: inline;\n font-size: var(--font-size-s, 12px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-600);\n cursor: pointer;\n}\n\n.read-more__toggle:hover {\n color: var(--Primary-Primary-600, #d4872e);\n}\n","import { Component, Prop, State, h } from '@stencil/core';\n\n/*\n @component dropi-read-more\n * Truncates text to a word limit with an expandable \"Ver más / Ver menos\" toggle.\n /\n@Component({\n tag: 'dropi-read-more',\n styleUrl: 'dropi-read-more.css',\n shadow: true,\n})\nexport class DropiReadMore {\n /* Full text to display /\n @Prop() text: string = '';\n /* Maximum number of words before truncating /\n @Prop() maxWords: number = 20;\n /* Allow collapsing back after expanding /\n @Prop() showSeeLess: boolean = true;\n /* Inline CSS string applied to the text element (matches Angular `textStyle`) /\n @Prop() textStyle: string = '';\n /* Inline CSS string applied to the toggle button (matches Angular `buttonStyle`) */\n @Prop() buttonStyle: string = '';\n\n @State() private expanded: boolean = false;\n\n private get words(): string[] {\n return (this.text \|\| '').split(/\\s+/).filter(Boolean);\n }\n\n private get needsTruncation(): boolean {\n return this.words.length > this.maxWords;\n }\n\n private get displayText(): string {\n if (!this.needsTruncation \|\| this.expanded) return this.text;\n return this.words.slice(0, this.maxWords).join(' ');\n }\n\n render() {\n const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);\n\n return (\n <div class=\"read-more\">\n <p class=\"read-more__text\" style={this.textStyle ? this.textStyle as any : undefined}>\n {this.displayText}\n {showToggle && (\n <button class=\"read-more__toggle\" style={this.buttonStyle ? this.buttonStyle as any : undefined} onClick={() => this.expanded = !this.expanded}>\n {this.expanded ? ' Ver menos' : '... Ver más'}\n </button>\n )}\n </p>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.search-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.search-input-row{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;pointer-events:none;z-index:1}.search-input{width:100%;height:40px;padding:0 36px 0 34px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none;transition:border-color 0.2s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{position:absolute;right:10px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;z-index:1}.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:var(--dropdown-height, 240px);overflow-y:auto;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);z-index:100}.search-option{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.search-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.search-option--selected{background:var(--Primary-Primary-50, #fff5eb)}.search-option__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-no-results{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
+const dropiSearchCss = () => `:host{display:block;width:100%;position:relative;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.search-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.search-input-row{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;pointer-events:none;z-index:1}.search-input{width:100%;height:40px;padding:0 36px 0 34px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);outline:none;transition:border-color 0.2s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{position:absolute;right:10px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;z-index:1}.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:var(--dropdown-height, 240px);overflow-y:auto;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);z-index:100}.search-option{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.search-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.search-option--selected{background:var(--Primary-Primary-50, #fff5eb)}.search-option__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-no-results{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
 const DropiSearch = class {
     constructor(hostRef) {
@@ -106,10 +106,10 @@ const DropiSearch = class {
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (h("div", { key: '594b15b4b31044f4a02376dc773ea36da893d773', class: "search-wrap" }, this.label && h("label", { key: '297a989441ad892715b09421f9a53618851c1b52', class: "search-label" }, this.label), h("div", { key: '6bbaf4ea5c1bc6ff831626117fccde647e68ba19', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: 'e94c3a3895a14e950a018023d5d7a281a230abae', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: '820bf2f4c9ecaf9907aceaaa08bd3fa309606e90', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+        return (h("div", { key: '3fbdeabe60de3f1bb56c400d7f01576ae885e35b', class: "search-wrap" }, this.label && h("label", { key: 'c9768021ffda16c845cfb0c9ed8780307286a314', class: "search-label" }, this.label), h("div", { key: '316863b87f7d87858a04b4fb92414fd565fcbaa2', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: '6e0e8fe288434be674a2c38c4751431eaab5230a', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: 'db8000e4901cad3083f13031f4571a25adea6b9d', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
                 if (this.parsedOptions.length)
                     this.open = true;
-            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: 'e2fd7c3d5fee45a83f030589f58d4fee9f3af69c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: 'a530b0adb83d76b205cd2b22792f14229950836e', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '8c062d43dccb41c84b2a599ed6d1a5e049a75b65', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && h("dropi-checkbox", { name: "_search-option", checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: 'c163dc376acb3d87fc5104f9da4b864972e90479', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '203d31ed6689702cf32673378b6c0cc879ee11cd', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '52180c44f8610e66feb0a827d1ecb081ce5f29a8', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && h("dropi-checkbox", { name: "_search-option", checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
     }
     static get watchers() { return {
         "dataToSearch": [{