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-card-product.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 dropiCardProductCss = () => `:host{display:block;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.dropi-card-product{position:relative;background:#ffffff;border-radius:8px;overflow:hidden;transition:all 0.2s ease-in-out;cursor:pointer;display:flex;flex-direction:column;height:100%;box-sizing:border-box;width:100%;max-width:450px;box-shadow:none}.product-image-container{padding:4px;flex-shrink:0}.product-image{position:relative;width:100%;aspect-ratio:1;border-radius:8px;border:1px solid #c3c9d9;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#f8f9fa}.product-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.product-image img.error-img{object-fit:contain}.favorite-button{position:absolute;bottom:5px;right:6px;border-radius:8px;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:40px;background:#ffffff;border:1px solid #858ea6}.favorite-button.favorite-active{background:var(--Primary-Primary-500, #f49a3d);border:1px solid var(--Primary-Primary-500, #f49a3d)}.product-info{position:relative;padding:8px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:space-between}.supplier-insignia{position:absolute;top:-24px;left:0px}.product-header{display:flex;justify-content:space-between;align-items:center;width:100%;height:26px}.category{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;flex:1}.stock-info{display:flex;align-items:center;gap:2px;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5}.stock-label{color:#69738c}.stock-value{font-weight:500}.product-name{color:#32394d;font-family:'Inter', sans-serif;font-size:16px;font-weight:500;line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.supplier-info{font-family:'Inter', sans-serif;font-size:12px;line-height:1.2}.supplier-label{color:#69738c;font-weight:400}.supplier-name{color:#50a5f1;font-weight:400;margin-left:4px;cursor:pointer}.price-container{display:flex;gap:8px;margin-top:4px}.price-item{flex:1;display:flex;flex-direction:column}.price-label{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;height:18px;min-width:max-content}.price-value{color:#32394d;font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;margin-top:2px}.separator{height:1px;background:#e6eaf2;margin:0;flex-shrink:0}.action-button{background:#ffffff;border:none;border-top:1px solid #e6eaf2;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;flex-shrink:0}.action-button--disabled{opacity:0.3;cursor:not-allowed}.button-text{font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;color:#f49a3d;text-align:center;white-space:nowrap}`;
+const dropiCardProductCss = () => `:host{display:block;font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.dropi-card-product{position:relative;background:#ffffff;border-radius:8px;overflow:hidden;transition:all 0.2s ease-in-out;cursor:pointer;display:flex;flex-direction:column;height:100%;box-sizing:border-box;width:100%;max-width:450px;box-shadow:none}.product-image-container{padding:4px;flex-shrink:0}.product-image{position:relative;width:100%;aspect-ratio:1;border-radius:8px;border:1px solid #c3c9d9;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#f8f9fa}.product-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.product-image img.error-img{object-fit:contain}.favorite-button{position:absolute;bottom:5px;right:6px;border-radius:8px;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:40px;background:#ffffff;border:1px solid #858ea6}.favorite-button.favorite-active{background:var(--Primary-Primary-500, #f49a3d);border:1px solid var(--Primary-Primary-500, #f49a3d)}.product-info{position:relative;padding:8px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:space-between}.supplier-insignia{position:absolute;top:-24px;left:0px}.product-header{display:flex;justify-content:space-between;align-items:center;width:100%;height:26px}.category{color:#69738c;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:12px;font-weight:400;line-height:1.5;flex:1}.stock-info{display:flex;align-items:center;gap:2px;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:12px;font-weight:400;line-height:1.5}.stock-label{color:#69738c}.stock-value{font-weight:500}.product-name{color:#32394d;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:16px;font-weight:500;line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.supplier-info{font-family:var(--font-family-01, 'Inter', sans-serif);font-size:12px;line-height:1.2}.supplier-label{color:#69738c;font-weight:400}.supplier-name{color:#50a5f1;font-weight:400;margin-left:4px;cursor:pointer}.price-container{display:flex;gap:8px;margin-top:4px}.price-item{flex:1;display:flex;flex-direction:column}.price-label{color:#69738c;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:12px;font-weight:400;line-height:1.5;height:18px;min-width:max-content}.price-value{color:#32394d;font-family:var(--font-family-01, 'Inter', sans-serif);font-size:14px;font-weight:700;line-height:1.1;margin-top:2px}.separator{height:1px;background:#e6eaf2;margin:0;flex-shrink:0}.action-button{background:#ffffff;border:none;border-top:1px solid #e6eaf2;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;flex-shrink:0}.action-button--disabled{opacity:0.3;cursor:not-allowed}.button-text{font-family:var(--font-family-01, 'Inter', sans-serif);font-size:14px;font-weight:700;line-height:1.1;color:#f49a3d;text-align:center;white-space:nowrap}`;
 const DropiCardProduct = class {
     constructor(hostRef) {
@@ -58,17 +58,17 @@ const DropiCardProduct = class {
         return 'var(--Success-Success-500, #0abb87)';
     }
     render() {
-        return (h("div", { key: '2fe4ce42e1c331a99fd1171c82e6e48bfb5dbff0', class: "dropi-card-product", onClick: () => this.dropiProductClick.emit() }, h("div", { key: '3f94077ee059e347f3ff4fff808a3a3f3a0ac827', class: "product-image-container" }, h("div", { key: '1d6e8181cc630ab03efc90e316c349dfe9765b46', class: "product-image" }, h("img", { key: 'f6647c21ac24d378482c6e6fe5220d6d18ff694b', src: this.image || '', alt: this.productName, onError: (e) => {
+        return (h("div", { key: '4cde39eac4d19dc5c05123f0ada102ae9d7a4e0a', class: "dropi-card-product", onClick: () => this.dropiProductClick.emit() }, h("div", { key: '23a94279b1c1d083bd478a61051e1e3dc992273c', class: "product-image-container" }, h("div", { key: '2c2a26632ad0e318933258ceabca932d2a892533', class: "product-image" }, h("img", { key: '0d86b32d61a7eeb63d7b1a0fa3f3ba18eade3cd3', src: this.image || '', alt: this.productName, onError: (e) => {
                 e.target.src = './assets/utils/no-image.jpg';
-            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("button", { key: '37c23af5e1345e2f2b2ac42dd38f88eb17254889', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("button", { key: 'c3cb96813a56f924ffadc8f0665af4b9a068db85', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
                 e.stopPropagation();
                 this.isFavorite = !this.isFavorite;
                 this.dropiFavoriteChange.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, h("dropi-icon", { key: 'c6d6c87dcb5ae0f9a0d416667a3d39c7e153b7a6', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: '66dbcb028acb35e9a43502e9ff9a00fd2ebf8bf2', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: 'fd3d94e953a6b91418decc09ed426755a85bac1b', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '45817e3bb0bfdaa0ec8cb4a23fdac1bb943e93dc', class: "product-header" }, this.category && (h("span", { key: 'c721519a5339a2ac40d20c283bbe8797b78e4b27', class: "category" }, this.category)), h("div", { key: '49f5013738dfffcdb83dfde628f5d1d21164c3d2', class: "stock-info" }, h("span", { key: 'bd49d5069d07b3ae10ac9c85a4b84bbb573f926e', class: "stock-label" }, "Stock:"), h("span", { key: 'd0eefb88240c13c9c56e7470e79cbacc9d86caf4', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: 'a880d0df13af0b75d553daf18e876905b93e6ef1', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'faa82e269979084e7510b6a17fb1f3caee8ad181', class: "supplier-info" }, h("span", { key: 'b4b223620c58cb30945b1c6be50559614937eb5f', class: "supplier-label" }, "Proveedor:"), h("span", { key: '989580f42383c3b6adb6484a493d1293a2a11904', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '451c1ab830c7ab38c4e414e94f11f63ffcf86162', class: "price-container" }, h("div", { key: '755f3f8aac6f7b1d458d28b74dec2734b42794a6', class: "price-item" }, h("span", { key: 'fff0a718b4f22641adcd28bbcb7e81a0f21755e9', class: "price-label" }, "Precio proveedor"), h("span", { key: '5bb6843a4a293195f0dbda5c3eccfc4f38c719b1', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '468b1d7596ec5d727846a087b5d89461c5fef858', class: "price-item" }, h("span", { key: '91b15e4d58d27997b2dfdb9c73fd417a8f8ba5fb', class: "price-label" }, "Precio sugerido"), h("span", { key: '378483760ffac07491f5b65b37d5e27d41423ec5', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '71467832049894083ea3454618a12d082cb15844', class: "separator" }), this.showAddButton && (h("div", { key: 'f9f0450e3dfa2b91ae7caa468811cc739d7a280e', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: '3d5e182189a8d1dfcf8fb4bb1fb16ff9470a180c', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: 'ec75da0e4f638c265ea4e07fab1177e5cfa8d167', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: '4613849b8bc6e7b719c705fb90c2a5da0fb76b41', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '31dcc84a4add42a667f3f33d973f65db89503a2b', class: "product-header" }, this.category && (h("span", { key: 'f27b3aec9a1380b4ff473cd9df0cffcadd87a7c1', class: "category" }, this.category)), h("div", { key: 'a55285c407ad8dfcf8acceaf57bf9478c8dc1c30', class: "stock-info" }, h("span", { key: 'b08d87a0264dfa2a96662243a07088768955b918', class: "stock-label" }, "Stock:"), h("span", { key: '593bc922e3421e0102288668a0416bd8705de3f3', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '54c314d2e97ae8b29bd48a17152128fb903f6174', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'ebbc569613abe847cb1969b0ed17228df6d96aef', class: "supplier-info" }, h("span", { key: 'e107f295a701551961d6fe7c45e39cae99ef1be0', class: "supplier-label" }, "Proveedor:"), h("span", { key: '01a51cd79cafaeae7ce8f2541bd03e3806f645c8', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '20b59588bf442abcdda3a33a4f1bf8a4f6b2a6e6', class: "price-container" }, h("div", { key: 'adb88e81332eaef3826bc04ac0d4de8461368877', class: "price-item" }, h("span", { key: 'dfeb4ad9eb8fa6c7c922437017949ba639cc0a37', class: "price-label" }, "Precio proveedor"), h("span", { key: 'c75bdc0f488c0ef455615781c77f344abc51208f', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '7994889f9be9f2a3e078f727fed72e3183cd8acc', class: "price-item" }, h("span", { key: 'cc4767b3c85c7f37e890297c51029da592a99770', class: "price-label" }, "Precio sugerido"), h("span", { key: 'bc45584e6017eb23cd30e394ced1778c3d3b8957', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '446dca22f4fd6db15bd3cc5296e8d7910c16674f', class: "separator" }), this.showAddButton && (h("div", { key: 'a030ce62999b2440f63129941c967eb5c3ee169b', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
                 e.stopPropagation();
                 if (this.inStock)
                     this.dropiAddProduct.emit();
-            } }, h("dropi-icon", { key: '50a9fad974460c2728fb1fca74628d093cbb1875', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), h("span", { key: 'f5ac44dd20e01bc644e863c3cbf51e3493821e70', class: "button-text" }, "Enviar a cliente")))));
+            } }, h("dropi-icon", { key: '67d1f1629f83008b11103f6a76b744c71935ca23', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), h("span", { key: '477ace88e7984066888841c9158100fbd8fbe078', class: "button-text" }, "Enviar a cliente")))));
     }
 };
 DropiCardProduct.style = dropiCardProductCss();

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

	@@ -1 +1 @@
1	- {"file":"dropi-card-product.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-card-product/dropi-card-product.css?tag=dropi-card-product&encapsulation=shadow","src/components/dropi-card-product/dropi-card-product.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: 'Inter', sans-serif;\n}\n, ::before, ::after { box-sizing: border-box; }\n\n/ ── Card wrapper ── /\n.dropi-card-product {\n position: relative;\n background: #ffffff;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n height: 100%;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n box-shadow: none;\n}\n\n/ ── Image container ── /\n.product-image-container {\n padding: 4px;\n flex-shrink: 0;\n}\n\n.product-image {\n position: relative;\n width: 100%;\n aspect-ratio: 1;\n border-radius: 8px;\n border: 1px solid #c3c9d9;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f8f9fa;\n}\n\n.product-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.product-image img.error-img {\n object-fit: contain;\n}\n\n/ ── Favorite button ── /\n.favorite-button {\n position: absolute;\n bottom: 5px;\n right: 6px;\n border-radius: 8px;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 42px;\n height: 40px;\n background: #ffffff;\n border: 1px solid #858ea6;\n}\n\n.favorite-button.favorite-active {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 1px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n/ ── Product info ── /\n.product-info {\n position: relative;\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n justify-content: space-between;\n}\n\n/ ── Supplier insignia — overlaps from top ── /\n.supplier-insignia {\n position: absolute;\n top: -24px;\n left: 0px;\n}\n\n/ ── Header: category + stock ── /\n.product-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 26px;\n}\n\n.category {\n color: #69738c;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n flex: 1;\n}\n\n.stock-info {\n display: flex;\n align-items: center;\n gap: 2px;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n}\n\n.stock-label {\n color: #69738c;\n}\n\n.stock-value {\n font-weight: 500;\n}\n\n/ ── Product name ── /\n.product-name {\n color: #32394d;\n font-family: 'Inter', sans-serif;\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n/ ── Supplier ── /\n.supplier-info {\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n line-height: 1.2;\n}\n\n.supplier-label {\n color: #69738c;\n font-weight: 400;\n}\n\n.supplier-name {\n color: #50a5f1;\n font-weight: 400;\n margin-left: 4px;\n cursor: pointer;\n}\n\n/ ── Prices ── /\n.price-container {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n.price-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.price-label {\n color: #69738c;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n height: 18px;\n min-width: max-content;\n}\n\n.price-value {\n color: #32394d;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.1;\n margin-top: 2px;\n}\n\n/ ── Separator ── /\n.separator {\n height: 1px;\n background: #e6eaf2;\n margin: 0;\n flex-shrink: 0;\n}\n\n/ ── Action button ── /\n.action-button {\n background: #ffffff;\n border: none;\n border-top: 1px solid #e6eaf2;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 40px;\n flex-shrink: 0;\n}\n\n.action-button--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n.button-text {\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.1;\n color: #f49a3d;\n text-align: center;\n white-space: nowrap;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/\n @component dropi-card-product\n * Product card showing image, supplier insignia, name, stock, prices and action button.\n /\n@Component({\n tag: 'dropi-card-product',\n styleUrl: 'dropi-card-product.css',\n shadow: true,\n})\nexport class DropiCardProduct {\n /* Product image URL /\n @Prop() image: string = '';\n /* Product name /\n @Prop() productName: string = '';\n /* Sale / supplier price (Precio proveedor) /\n @Prop() salePrice: number = 0;\n /* Suggested price for the dropshipper (Precio sugerido) /\n @Prop() suggestedPrice: number = 0;\n /* Price currency symbol /\n @Prop() currency: string = '$';\n /* Supplier / store name /\n @Prop() supplier: string = '';\n /* Category label /\n @Prop() category: string = '';\n /* Stock quantity (0 = Agotado) /\n @Prop() stock: number = 0;\n /* Supplier category for insignia: 'verified' \| 'premium' \| 'exclusive' \| '' /\n @Prop() supplierCategory: 'verified' \| 'premium' \| 'exclusive' \| '' = '';\n /* Show favorite button /\n @Prop() showFavorite: boolean = true;\n /* Is marked as favorite /\n @Prop({ mutable: true }) isFavorite: boolean = false;\n /* Show \"Enviar a cliente\" button /\n @Prop() showAddButton: boolean = true;\n\n /* Emitted when card is clicked — matches Angular 'onProductClick' /\n @Event() dropiProductClick: EventEmitter<void>;\n /* Emitted when favorite toggled — matches Angular 'changeFavorite' /\n @Event() dropiFavoriteChange: EventEmitter<boolean>;\n /* Emitted when \"Enviar a cliente\" button clicked /\n @Event() dropiAddProduct: EventEmitter<void>;\n /* Emitted when supplier name clicked /\n @Event() dropiSupplierClick: EventEmitter<void>;\n\n private formatPrice(val: number): string {\n if (val == null) return '0';\n return val.toLocaleString('es-CO');\n }\n\n private get inStock(): boolean {\n return this.stock > 0;\n }\n\n private getStockColor(): string {\n if (this.stock === 0) return 'var(--Error-Error-500, #f46a6b)';\n if (this.stock <= 10) return 'var(--Warning-Warning-500, #f59e0b)';\n return 'var(--Success-Success-500, #0abb87)';\n }\n\n render() {\n return (\n <div class=\"dropi-card-product\" onClick={() => this.dropiProductClick.emit()}>\n\n {/ ── Image container ── /}\n <div class=\"product-image-container\">\n <div class=\"product-image\">\n <img\n src={this.image \|\| ''}\n alt={this.productName}\n onError={(e) => {\n (e.target as HTMLImageElement).src = './assets/utils/no-image.jpg';\n }}\n class={!this.image ? 'error-img' : ''}\n />\n\n {/ Favorite button — bottom right /}\n {this.showFavorite && (\n <button\n class={{ 'favorite-button': true, 'favorite-active': this.isFavorite }}\n onClick={(e) => {\n e.stopPropagation();\n this.isFavorite = !this.isFavorite;\n this.dropiFavoriteChange.emit(this.isFavorite);\n }}\n aria-label=\"Favorito\"\n >\n <dropi-icon\n name={this.isFavorite ? 'Heart-solid' : 'Heart'}\n iconWidth=\"18px\"\n iconHeight=\"18px\"\n color={this.isFavorite ? '#fff' : '#858ea6'}\n />\n </button>\n )}\n </div>\n </div>\n\n {/ ── Product info ── /}\n <div class=\"product-info\">\n\n {/ Insignia — overlapping from top /}\n {this.supplierCategory && (\n <dropi-ilustration-icon\n class=\"supplier-insignia\"\n type=\"insignia\"\n stateInsignia={this.supplierCategory as any}\n tagProduct={true}\n />\n )}\n\n {/ Category + Stock row /}\n <div class=\"product-header\">\n {this.category && (\n <span class=\"category\">{this.category}</span>\n )}\n <div class=\"stock-info\">\n <span class=\"stock-label\">Stock:</span>\n <span class=\"stock-value\" style={{ color: this.getStockColor() }}>\n {this.stock === 0 ? 'Agotado' : this.stock}\n </span>\n </div>\n </div>\n\n {/ Product name /}\n <h3 class=\"product-name\">{this.productName}</h3>\n\n {/ Supplier /}\n {this.supplier && (\n <div class=\"supplier-info\">\n <span class=\"supplier-label\">Proveedor:</span>\n <span\n class=\"supplier-name\"\n onClick={(e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); }}\n >\n {this.supplier}\n </span>\n </div>\n )}\n\n {/ Two price columns /}\n <div class=\"price-container\">\n <div class=\"price-item\">\n <span class=\"price-label\">Precio proveedor</span>\n <span class=\"price-value\">{this.currency} {this.formatPrice(this.salePrice)}</span>\n </div>\n <div class=\"price-item\">\n <span class=\"price-label\">Precio sugerido</span>\n <span class=\"price-value\">{this.currency} {this.formatPrice(this.suggestedPrice)}</span>\n </div>\n </div>\n </div>\n\n {/ ── Separator ── /}\n <div class=\"separator\"></div>\n\n {/ ── Action button ── */}\n {this.showAddButton && (\n <div\n class={{ 'action-button': true, 'action-button--disabled': !this.inStock }}\n onClick={(e) => { e.stopPropagation(); if (this.inStock) this.dropiAddProduct.emit(); }}\n >\n <dropi-icon\n name=\"Shopping-cart-arrow-rigth\"\n iconWidth=\"20px\"\n iconHeight=\"20px\"\n color=\"#f49a3d\"\n />\n <span class=\"button-text\">Enviar a cliente</span>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-card-product.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-card-product/dropi-card-product.css?tag=dropi-card-product&encapsulation=shadow","src/components/dropi-card-product/dropi-card-product.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--font-family-01, 'Inter', sans-serif);\n}\n, ::before, ::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n/ ── Card wrapper ── /\n.dropi-card-product {\n position: relative;\n background: #ffffff;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n height: 100%;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n box-shadow: none;\n}\n\n/ ── Image container ── /\n.product-image-container {\n padding: 4px;\n flex-shrink: 0;\n}\n\n.product-image {\n position: relative;\n width: 100%;\n aspect-ratio: 1;\n border-radius: 8px;\n border: 1px solid #c3c9d9;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f8f9fa;\n}\n\n.product-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.product-image img.error-img {\n object-fit: contain;\n}\n\n/ ── Favorite button ── /\n.favorite-button {\n position: absolute;\n bottom: 5px;\n right: 6px;\n border-radius: 8px;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 42px;\n height: 40px;\n background: #ffffff;\n border: 1px solid #858ea6;\n}\n\n.favorite-button.favorite-active {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 1px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n/ ── Product info ── /\n.product-info {\n position: relative;\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n justify-content: space-between;\n}\n\n/ ── Supplier insignia — overlaps from top ── /\n.supplier-insignia {\n position: absolute;\n top: -24px;\n left: 0px;\n}\n\n/ ── Header: category + stock ── /\n.product-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 26px;\n}\n\n.category {\n color: #69738c;\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n flex: 1;\n}\n\n.stock-info {\n display: flex;\n align-items: center;\n gap: 2px;\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n}\n\n.stock-label {\n color: #69738c;\n}\n\n.stock-value {\n font-weight: 500;\n}\n\n/ ── Product name ── /\n.product-name {\n color: #32394d;\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n/ ── Supplier ── /\n.supplier-info {\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-size: 12px;\n line-height: 1.2;\n}\n\n.supplier-label {\n color: #69738c;\n font-weight: 400;\n}\n\n.supplier-name {\n color: #50a5f1;\n font-weight: 400;\n margin-left: 4px;\n cursor: pointer;\n}\n\n/ ── Prices ── /\n.price-container {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n.price-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.price-label {\n color: #69738c;\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n height: 18px;\n min-width: max-content;\n}\n\n.price-value {\n color: #32394d;\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-size: 14px;\n font-weight: 700;\n line-height: 1.1;\n margin-top: 2px;\n}\n\n/ ── Separator ── /\n.separator {\n height: 1px;\n background: #e6eaf2;\n margin: 0;\n flex-shrink: 0;\n}\n\n/ ── Action button ── /\n.action-button {\n background: #ffffff;\n border: none;\n border-top: 1px solid #e6eaf2;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 40px;\n flex-shrink: 0;\n}\n\n.action-button--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n.button-text {\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-size: 14px;\n font-weight: 700;\n line-height: 1.1;\n color: #f49a3d;\n text-align: center;\n white-space: nowrap;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/\n @component dropi-card-product\n * Product card showing image, supplier insignia, name, stock, prices and action button.\n /\n@Component({\n tag: 'dropi-card-product',\n styleUrl: 'dropi-card-product.css',\n shadow: true,\n})\nexport class DropiCardProduct {\n /* Product image URL /\n @Prop() image: string = '';\n /* Product name /\n @Prop() productName: string = '';\n /* Sale / supplier price (Precio proveedor) /\n @Prop() salePrice: number = 0;\n /* Suggested price for the dropshipper (Precio sugerido) /\n @Prop() suggestedPrice: number = 0;\n /* Price currency symbol /\n @Prop() currency: string = '$';\n /* Supplier / store name /\n @Prop() supplier: string = '';\n /* Category label /\n @Prop() category: string = '';\n /* Stock quantity (0 = Agotado) /\n @Prop() stock: number = 0;\n /* Supplier category for insignia: 'verified' \| 'premium' \| 'exclusive' \| '' /\n @Prop() supplierCategory: 'verified' \| 'premium' \| 'exclusive' \| '' = '';\n /* Show favorite button /\n @Prop() showFavorite: boolean = true;\n /* Is marked as favorite /\n @Prop({ mutable: true }) isFavorite: boolean = false;\n /* Show \"Enviar a cliente\" button /\n @Prop() showAddButton: boolean = true;\n\n /* Emitted when card is clicked — matches Angular 'onProductClick' /\n @Event() dropiProductClick: EventEmitter<void>;\n /* Emitted when favorite toggled — matches Angular 'changeFavorite' /\n @Event() dropiFavoriteChange: EventEmitter<boolean>;\n /* Emitted when \"Enviar a cliente\" button clicked /\n @Event() dropiAddProduct: EventEmitter<void>;\n /* Emitted when supplier name clicked /\n @Event() dropiSupplierClick: EventEmitter<void>;\n\n private formatPrice(val: number): string {\n if (val == null) return '0';\n return val.toLocaleString('es-CO');\n }\n\n private get inStock(): boolean {\n return this.stock > 0;\n }\n\n private getStockColor(): string {\n if (this.stock === 0) return 'var(--Error-Error-500, #f46a6b)';\n if (this.stock <= 10) return 'var(--Warning-Warning-500, #f59e0b)';\n return 'var(--Success-Success-500, #0abb87)';\n }\n\n render() {\n return (\n <div class=\"dropi-card-product\" onClick={() => this.dropiProductClick.emit()}>\n\n {/ ── Image container ── /}\n <div class=\"product-image-container\">\n <div class=\"product-image\">\n <img\n src={this.image \|\| ''}\n alt={this.productName}\n onError={(e) => {\n (e.target as HTMLImageElement).src = './assets/utils/no-image.jpg';\n }}\n class={!this.image ? 'error-img' : ''}\n />\n\n {/ Favorite button — bottom right /}\n {this.showFavorite && (\n <button\n class={{ 'favorite-button': true, 'favorite-active': this.isFavorite }}\n onClick={(e) => {\n e.stopPropagation();\n this.isFavorite = !this.isFavorite;\n this.dropiFavoriteChange.emit(this.isFavorite);\n }}\n aria-label=\"Favorito\"\n >\n <dropi-icon\n name={this.isFavorite ? 'Heart-solid' : 'Heart'}\n iconWidth=\"18px\"\n iconHeight=\"18px\"\n color={this.isFavorite ? '#fff' : '#858ea6'}\n />\n </button>\n )}\n </div>\n </div>\n\n {/ ── Product info ── /}\n <div class=\"product-info\">\n\n {/ Insignia — overlapping from top /}\n {this.supplierCategory && (\n <dropi-ilustration-icon\n class=\"supplier-insignia\"\n type=\"insignia\"\n stateInsignia={this.supplierCategory as any}\n tagProduct={true}\n />\n )}\n\n {/ Category + Stock row /}\n <div class=\"product-header\">\n {this.category && (\n <span class=\"category\">{this.category}</span>\n )}\n <div class=\"stock-info\">\n <span class=\"stock-label\">Stock:</span>\n <span class=\"stock-value\" style={{ color: this.getStockColor() }}>\n {this.stock === 0 ? 'Agotado' : this.stock}\n </span>\n </div>\n </div>\n\n {/ Product name /}\n <h3 class=\"product-name\">{this.productName}</h3>\n\n {/ Supplier /}\n {this.supplier && (\n <div class=\"supplier-info\">\n <span class=\"supplier-label\">Proveedor:</span>\n <span\n class=\"supplier-name\"\n onClick={(e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); }}\n >\n {this.supplier}\n </span>\n </div>\n )}\n\n {/ Two price columns /}\n <div class=\"price-container\">\n <div class=\"price-item\">\n <span class=\"price-label\">Precio proveedor</span>\n <span class=\"price-value\">{this.currency} {this.formatPrice(this.salePrice)}</span>\n </div>\n <div class=\"price-item\">\n <span class=\"price-label\">Precio sugerido</span>\n <span class=\"price-value\">{this.currency} {this.formatPrice(this.suggestedPrice)}</span>\n </div>\n </div>\n </div>\n\n {/ ── Separator ── /}\n <div class=\"separator\"></div>\n\n {/ ── Action button ── */}\n {this.showAddButton && (\n <div\n class={{ 'action-button': true, 'action-button--disabled': !this.inStock }}\n onClick={(e) => { e.stopPropagation(); if (this.inStock) this.dropiAddProduct.emit(); }}\n >\n <dropi-icon\n name=\"Shopping-cart-arrow-rigth\"\n iconWidth=\"20px\"\n iconHeight=\"20px\"\n color=\"#f49a3d\"\n />\n <span class=\"button-text\">Enviar a cliente</span>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-card-section.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 dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
+const dropiCardSectionCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:var(--font-family-01, 'Inter', sans-serif);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
 const DropiCardSection = class {
     constructor(hostRef) {
@@ -23,9 +23,9 @@ const DropiCardSection = class {
     /** Emitted when dropdown icon is clicked */
     dropiClick;
     render() {
-        return (h("div", { key: '06fe2a580fb23484419ea4b1c41a265facb722de', class: "card-section" }, h("div", { key: '1020ea256b0311a200a721387b3ecb8d0f3809ab', class: "card-section__text" }, this.type === 'important'
+        return (h("div", { key: 'f843d5104a344402775c8afc165f10d178d2d5bf', class: "card-section" }, h("div", { key: '0b7476a359efc4619362a958a4a06300d1162d96', class: "card-section__text" }, this.type === 'important'
             ? h("h5", { class: "card-section__title card-section__title--important" }, this.title)
-            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: '52ea93b6b2736c4c6e3ebb953c2878db90d34b4c', class: "card-section__desc" }, this.description)), h("div", { key: '7ec0ed96e43b45256fd5dec5ee24b0dfd6488403', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { name: "_card-section-switch", isChecked: this.isChecked, onDropiChange: (e) => {
+            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: '200ca69a23c9dd7ccbeaa8dc44d313fb1befa32f', class: "card-section__desc" }, this.description)), h("div", { key: 'a984b49a2fec8c527ceba4873a476dbd7ae1b20f', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { name: "_card-section-switch", isChecked: this.isChecked, onDropiChange: (e) => {
                 this.isChecked = e.detail;
                 this.dropiChange.emit(e.detail);
             } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));

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

	@@ -1 +1 @@
1	- {"file":"dropi-card-section.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,~~w2BAAw2B,~~CAAC;;~~MCW~~/3B,gBAAgB,GAAA,MAAA;;;;;;;IAEnB,KAAK,GAAW,OAAO;;IAEvB,WAAW,GAAW,aAAa;;IAEnC,WAAW,GAA0B,UAAU;;IAE/C,IAAI,GAA2B,WAAW;;IAEzB,SAAS,GAAY,KAAK;;AAG1C,IAAA,WAAW;;AAEX,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK;AACb,cAAE,UAAI,KAAK,EAAC,oDAAoD,EAAA,EAAE,IAAI,CAAC,KAAK;AAC5E,cAAE,UAAI,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EAEpD,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CACrE,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,KAAK,QAAQ,IAC5B,CAAA,CAAA,cAAA,EAAA,EAAc,IAAI,EAAC,sBAAsB,EACvC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,CAAC,CAAuB,KAAI;AACzC,gBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM;gBACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACjC,aAAC,EAAA,CACD,KAEF,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACrG,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACrF,CACV,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-card-section/dropi-card-section.css?tag=dropi-card-section&encapsulation=shadow","src/components/dropi-card-section/dropi-card-section.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n, ::before, ::after { box-sizing: border-box; }\n\n.card-section {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--Size-4, 16px);\n padding: var(--Size-3, 12px) var(--Size-4, 16px);\n background: var(--Neutral-White, #ffffff);\n border: 1px solid var(--Gray-Gray-100, #e6eaf2);\n border-radius: var(--Border-2, 8px);\n}\n\n.card-section__text { flex: 1; }\n\n.card-section__title {\n margin: 0 0 4px;\n font-family: ~~inherit~~;\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-800, #1f2433);\n}\n\nh5.card-section__title { font-size: var(--font-size-m, 14px); }\nh6.card-section__title { font-size: var(--font-size-s, 12px); }\n\n.card-section__desc {\n margin: 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.card-section__control { flex-shrink: 0; }\n\n.card-section__dropdown-btn {\n display: flex;\n align-items: center;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/\n @component dropi-card-section\n * Section card with title, description and a switch or dropdown control.\n /\n@Component({\n tag: 'dropi-card-section',\n styleUrl: 'dropi-card-section.css',\n shadow: true,\n})\nexport class DropiCardSection {\n /* Section title — matches Angular 'title' /\n @Prop() title: string = 'title';\n /* Section description /\n @Prop() description: string = 'Description';\n /* Control type on the right /\n @Prop() typeElement: 'dropdown' \| 'switch' = 'dropdown';\n /* Title size variant /\n @Prop() type: 'medium' \| 'important' = 'important';\n /* Switch checked state /\n @Prop({ mutable: true }) isChecked: boolean = false;\n\n /* Emitted when switch changes /\n @Event() dropiChange: EventEmitter<boolean>;\n /* Emitted when dropdown icon is clicked */\n @Event() dropiClick: EventEmitter<void>;\n\n render() {\n return (\n <div class=\"card-section\">\n <div class=\"card-section__text\">\n {this.type === 'important'\n ? <h5 class=\"card-section__title card-section__title--important\">{this.title}</h5>\n : <h6 class=\"card-section__title\">{this.title}</h6>\n }\n {this.description && <p class=\"card-section__desc\">{this.description}</p>}\n </div>\n\n <div class=\"card-section__control\">\n {this.typeElement === 'switch' ? (\n <dropi-switch name=\"_card-section-switch\"\n isChecked={this.isChecked}\n onDropiChange={(e: CustomEvent<boolean>) => {\n this.isChecked = e.detail;\n this.dropiChange.emit(e.detail);\n }}\n />\n ) : (\n <button class=\"card-section__dropdown-btn\" onClick={() => this.dropiClick.emit()} aria-label=\"Expandir\">\n <dropi-icon name=\"Dropdown-down\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n </button>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-card-section.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,+9BAA+9B,CAAC;;MCWt/B,gBAAgB,GAAA,MAAA;;;;;;;IAEnB,KAAK,GAAW,OAAO;;IAEvB,WAAW,GAAW,aAAa;;IAEnC,WAAW,GAA0B,UAAU;;IAE/C,IAAI,GAA2B,WAAW;;IAEzB,SAAS,GAAY,KAAK;;AAG1C,IAAA,WAAW;;AAEX,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK;AACb,cAAE,UAAI,KAAK,EAAC,oDAAoD,EAAA,EAAE,IAAI,CAAC,KAAK;AAC5E,cAAE,UAAI,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EAEpD,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CACrE,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,KAAK,QAAQ,IAC5B,CAAA,CAAA,cAAA,EAAA,EAAc,IAAI,EAAC,sBAAsB,EACvC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,CAAC,CAAuB,KAAI;AACzC,gBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM;gBACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACjC,aAAC,EAAA,CACD,KAEF,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACrG,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACrF,CACV,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-card-section/dropi-card-section.css?tag=dropi-card-section&encapsulation=shadow","src/components/dropi-card-section/dropi-card-section.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.card-section {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--Size-4, 16px);\n padding: var(--Size-3, 12px) var(--Size-4, 16px);\n background: var(--Neutral-White, #ffffff);\n border: 1px solid var(--Gray-Gray-100, #e6eaf2);\n border-radius: var(--Border-2, 8px);\n}\n\n.card-section__text { flex: 1; }\n\n.card-section__title {\n margin: 0 0 4px;\n font-family: var(--font-family-01, 'Inter', sans-serif);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-800, #1f2433);\n}\n\nh5.card-section__title { font-size: var(--font-size-m, 14px); }\nh6.card-section__title { font-size: var(--font-size-s, 12px); }\n\n.card-section__desc {\n margin: 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.card-section__control { flex-shrink: 0; }\n\n.card-section__dropdown-btn {\n display: flex;\n align-items: center;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/\n @component dropi-card-section\n * Section card with title, description and a switch or dropdown control.\n /\n@Component({\n tag: 'dropi-card-section',\n styleUrl: 'dropi-card-section.css',\n shadow: true,\n})\nexport class DropiCardSection {\n /* Section title — matches Angular 'title' /\n @Prop() title: string = 'title';\n /* Section description /\n @Prop() description: string = 'Description';\n /* Control type on the right /\n @Prop() typeElement: 'dropdown' \| 'switch' = 'dropdown';\n /* Title size variant /\n @Prop() type: 'medium' \| 'important' = 'important';\n /* Switch checked state /\n @Prop({ mutable: true }) isChecked: boolean = false;\n\n /* Emitted when switch changes /\n @Event() dropiChange: EventEmitter<boolean>;\n /* Emitted when dropdown icon is clicked */\n @Event() dropiClick: EventEmitter<void>;\n\n render() {\n return (\n <div class=\"card-section\">\n <div class=\"card-section__text\">\n {this.type === 'important'\n ? <h5 class=\"card-section__title card-section__title--important\">{this.title}</h5>\n : <h6 class=\"card-section__title\">{this.title}</h6>\n }\n {this.description && <p class=\"card-section__desc\">{this.description}</p>}\n </div>\n\n <div class=\"card-section__control\">\n {this.typeElement === 'switch' ? (\n <dropi-switch name=\"_card-section-switch\"\n isChecked={this.isChecked}\n onDropiChange={(e: CustomEvent<boolean>) => {\n this.isChecked = e.detail;\n this.dropiChange.emit(e.detail);\n }}\n />\n ) : (\n <button class=\"card-section__dropdown-btn\" onClick={() => this.dropiClick.emit()} aria-label=\"Expandir\">\n <dropi-icon name=\"Dropdown-down\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n </button>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-carousel.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 dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-carousel-container{display:flex;flex-direction:column;position:relative;width:100%;max-width:100%;overflow:hidden;padding:0 var(--Size-4)}.dropi-carousel-content{display:flex;align-items:center;position:relative;padding:1rem 0;width:100%}.dropi-carousel-items-content{overflow:hidden;flex:1;padding:0;width:100%;max-width:100%}.dropi-carousel-items-container{display:flex;padding-bottom:var(--Size-3);will-change:transform}.dropi-carousel-item{flex:0 0 auto;padding:0 0.5rem;box-sizing:border-box}.dropi-carousel-item>*{width:100%;box-sizing:border-box;display:block}.dropi-carousel-nav{display:flex;width:40px;height:40px;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;z-index:1;border-radius:var(--Border-5);background:var(--Neutral-White, #fff);box-shadow:var(--Shadow-medium);border:none;appearance:none;padding:0}.dropi-carousel-nav:hover{background:var(--Gray-Gray-50)}.dropi-carousel-nav:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.dropi-carousel-prev{margin-right:1rem}.dropi-carousel-next{margin-left:1rem}.dropi-carousel-indicators{display:flex;justify-content:center;gap:0.5rem;list-style:none;padding:1rem 0 0 0;margin:0}.dropi-carousel-indicators li{cursor:pointer}.dropi-carousel-indicators li button{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--Gray-Gray-100, #eceef4);background:var(--Neutral-White, #fff);cursor:pointer;transition:all 0.2s;padding:0}.dropi-carousel-indicators li.active button{background:var(--Primary-Primary-500);border-color:var(--Primary-Primary-500)}.dropi-carousel-indicators li:hover button{background:var(--Gray-Gray-200)}.vertical .dropi-carousel-content{flex-direction:column}.vertical .dropi-carousel-items-container{flex-direction:column}.vertical .dropi-carousel-prev{margin:0 0 1rem 0}.vertical .dropi-carousel-next{margin:1rem 0 0 0}@media (max-width: 768px){.dropi-carousel-container{padding:0}.dropi-carousel-item{padding:0 0.25rem}}`;
+const dropiCarouselCss = () => `:host{display:block;width:100%;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.dropi-carousel-container{display:flex;flex-direction:column;position:relative;width:100%;max-width:100%;overflow:hidden;padding:0 var(--Size-4)}.dropi-carousel-content{display:flex;align-items:center;position:relative;padding:1rem 0;width:100%}.dropi-carousel-items-content{overflow:hidden;flex:1;padding:0;width:100%;max-width:100%}.dropi-carousel-items-container{display:flex;padding-bottom:var(--Size-3);will-change:transform}.dropi-carousel-item{flex:0 0 auto;padding:0 0.5rem;box-sizing:border-box}.dropi-carousel-item>*{width:100%;box-sizing:border-box;display:block}.dropi-carousel-nav{display:flex;width:40px;height:40px;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;z-index:1;border-radius:var(--Border-5);background:var(--Neutral-White, #fff);box-shadow:var(--Shadow-medium);border:none;appearance:none;padding:0}.dropi-carousel-nav:hover{background:var(--Gray-Gray-50)}.dropi-carousel-nav:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.dropi-carousel-prev{margin-right:1rem}.dropi-carousel-next{margin-left:1rem}.dropi-carousel-indicators{display:flex;justify-content:center;gap:0.5rem;list-style:none;padding:1rem 0 0 0;margin:0}.dropi-carousel-indicators li{cursor:pointer}.dropi-carousel-indicators li button{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--Gray-Gray-100, #eceef4);background:var(--Neutral-White, #fff);cursor:pointer;transition:all 0.2s;padding:0}.dropi-carousel-indicators li.active button{background:var(--Primary-Primary-500);border-color:var(--Primary-Primary-500)}.dropi-carousel-indicators li:hover button{background:var(--Gray-Gray-200)}.vertical .dropi-carousel-content{flex-direction:column}.vertical .dropi-carousel-items-container{flex-direction:column}.vertical .dropi-carousel-prev{margin:0 0 1rem 0}.vertical .dropi-carousel-next{margin:1rem 0 0 0}@media (max-width: 768px){.dropi-carousel-container{padding:0}.dropi-carousel-item{padding:0 0.25rem}}`;
 const DropiCarousel = class {
     constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"dropi-carousel.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-carousel/dropi-carousel.css?tag=dropi-carousel&encapsulation=shadow","src/components/dropi-carousel/dropi-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n, ::before, ::after {\n box-sizing: border-box;\n}\n\n.dropi-carousel-container {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n padding: 0 var(--Size-4);\n}\n\n.dropi-carousel-content {\n display: flex;\n align-items: center;\n position: relative;\n padding: 1rem 0;\n width: 100%;\n}\n\n.dropi-carousel-items-content {\n overflow: hidden;\n flex: 1;\n padding: 0;\n width: 100%;\n max-width: 100%;\n}\n\n.dropi-carousel-items-container {\n display: flex;\n padding-bottom: var(--Size-3);\n will-change: transform;\n}\n\n.dropi-carousel-item {\n flex: 0 0 auto;\n padding: 0 0.5rem;\n box-sizing: border-box;\n}\n\n.dropi-carousel-item > {\n width: 100%;\n box-sizing: border-box;\n display: block;\n}\n\n.dropi-carousel-nav {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: all 0.2s;\n flex-shrink: 0;\n z-index: 1;\n border-radius: var(--Border-5);\n background: var(--Neutral-White, #fff);\n box-shadow: var(--Shadow-medium);\n border: none;\n appearance: none;\n padding: 0;\n}\n\n.dropi-carousel-nav:hover {\n background: var(--Gray-Gray-50);\n}\n\n.dropi-carousel-nav:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n box-shadow: none;\n}\n\n.dropi-carousel-prev {\n margin-right: 1rem;\n}\n\n.dropi-carousel-next {\n margin-left: 1rem;\n}\n\n.dropi-carousel-indicators {\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n list-style: none;\n padding: 1rem 0 0 0;\n margin: 0;\n}\n\n.dropi-carousel-indicators li {\n cursor: pointer;\n}\n\n.dropi-carousel-indicators li button {\n width: 1rem;\n height: 1rem;\n border-radius: 50%;\n border: 1px solid var(--Gray-Gray-100, #eceef4);\n background: var(--Neutral-White, #fff);\n cursor: pointer;\n transition: all 0.2s;\n padding: 0;\n}\n\n.dropi-carousel-indicators li.active button {\n background: var(--Primary-Primary-500);\n border-color: var(--Primary-Primary-500);\n}\n\n.dropi-carousel-indicators li:hover button {\n background: var(--Gray-Gray-200);\n}\n\n/* Vertical Orientation /\n.vertical .dropi-carousel-content {\n flex-direction: column;\n}\n\n.vertical .dropi-carousel-items-container {\n flex-direction: column;\n}\n\n.vertical .dropi-carousel-prev {\n margin: 0 0 1rem 0;\n}\n\n.vertical .dropi-carousel-next {\n margin: 1rem 0 0 0;\n}\n\n/ Responsive fixes /\n@media (max-width: 768px) {\n .dropi-carousel-container {\n padding: 0;\n }\n .dropi-carousel-item {\n padding: 0 0.25rem;\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'dropi-carousel',\n styleUrl: 'dropi-carousel.css',\n shadow: true,\n})\nexport class DropiCarousel {\n @Element() el: HTMLElement;\n\n /* Items to display (Array of URLs or objects) /\n @Prop() value: any[] \| string = [];\n /* Active page index /\n @Prop({ mutable: true }) page: number = 0;\n /* Number of items visible per page /\n @Prop() numVisible: number = 1;\n /* Number of items to scroll per click /\n @Prop() numScroll: number = 1;\n /* Orientation of the carousel /\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n /* Show navigation arrows /\n @Prop() showNavigators: any = true;\n /* Show dot indicators /\n @Prop() showIndicators: any = true;\n /* Autoplay interval in ms (0 = disabled) /\n @Prop() autoplayInterval: number = 0;\n /* Infinite scrolling /\n @Prop() circular: any = false;\n\n @State() private parsedValue: any[] = [];\n @State() private internalPage: number = 0;\n @State() private isAnimating: boolean = false;\n @State() private totalPages: number = 0;\n\n private itemsContainer: HTMLElement;\n private timer: any;\n\n @Event() dropiPageChange: EventEmitter<number>;\n @Event() dropiPage: EventEmitter<any>;\n\n @Watch('value')\n handleValue(val: any[] \| string) {\n this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val \|\| []);\n this.updateTotalPages();\n this.updateTransform();\n }\n\n @Watch('page')\n handlePage(val: number) {\n this.internalPage = val;\n this.updateTransform();\n }\n\n componentWillLoad() {\n if (!this.value \|\| (Array.isArray(this.value) && this.value.length === 0)) {\n const attrValue = this.el.getAttribute('value');\n if (attrValue) this.value = attrValue;\n }\n this.handleValue(this.value);\n this.internalPage = this.page;\n }\n\n componentDidLoad() {\n this.updateTransform();\n if (this.autoplayInterval > 0) {\n this.startAutoplay();\n }\n window.addEventListener('resize', this.onResize);\n }\n\n disconnectedCallback() {\n this.stopAutoplay();\n window.removeEventListener('resize', this.onResize);\n }\n\n private onResize = () => {\n this.updateTotalPages();\n this.updateTransform();\n };\n\n private startAutoplay() {\n this.timer = setInterval(() => this.navForward(), this.autoplayInterval);\n }\n\n private stopAutoplay() {\n if (this.timer) clearInterval(this.timer);\n }\n\n private updateTotalPages() {\n if (!this.parsedValue.length \|\| this.parsedValue.length <= this.numVisible) {\n this.totalPages = 1;\n return;\n }\n const totalItems = this.parsedValue.length;\n const remainingItems = totalItems - this.numVisible;\n this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;\n }\n\n private updateTransform() {\n if (!this.itemsContainer) return;\n \n const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';\n const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item') as HTMLElement;\n if (!firstItem) return;\n\n const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;\n const itemsScrolled = this.internalPage this.numScroll;\n const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);\n const safeScroll = Math.min(itemsScrolled, maxScroll);\n \n const translateValue = -(safeScroll * itemSize);\n this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;\n }\n\n private navForward = (e?: Event) => {\n if (e) e.preventDefault();\n if (this.circular \|\| this.internalPage < this.totalPages - 1) {\n this.isAnimating = true;\n this.internalPage = (this.internalPage + 1) % this.totalPages;\n this.page = this.internalPage;\n this.updateTransform();\n this.dropiPageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n };\n\n private navBackward = (e?: Event) => {\n if (e) e.preventDefault();\n if (this.circular \|\| this.internalPage > 0) {\n this.isAnimating = true;\n this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;\n this.page = this.internalPage;\n this.updateTransform();\n this.dropiPageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n };\n\n private onDotClick(index: number) {\n this.isAnimating = true;\n this.internalPage = index;\n this.page = this.internalPage;\n this.updateTransform();\n this.dropiPageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n\n render() {\n const items = this.parsedValue;\n if (!items.length) return null;\n\n const itemFlexBasis = `${100 / this.numVisible}%`;\n\n return (\n <div class={{ 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' }}>\n <div class=\"dropi-carousel-content\">\n {this.showNavigators && items.length > this.numVisible && (\n <button\n class=\"dropi-carousel-nav dropi-carousel-prev\"\n disabled={!this.circular && this.internalPage === 0}\n onClick={(e) => this.navBackward(e)}\n aria-label=\"Anterior\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z\" fill=\"#475066\" />\n </svg>\n </button>\n )}\n\n <div class=\"dropi-carousel-items-content\">\n <div\n class=\"dropi-carousel-items-container\"\n ref={(el) => (this.itemsContainer = el)}\n style={{ transition: this.isAnimating ? 'transform 0.5s ease' : 'none' }}\n >\n {items.map((item, i) => (\n <div class=\"dropi-carousel-item\" style={{ flex: `0 0 ${itemFlexBasis}` }}>\n {typeof item === 'string' ? (\n <img src={item} alt={`Slide ${i + 1}`} />\n ) : (\n <slot name={`item-${i}`} />\n )}\n </div>\n ))}\n </div>\n </div>\n\n {this.showNavigators && items.length > this.numVisible && (\n <button\n class=\"dropi-carousel-nav dropi-carousel-next\"\n disabled={!this.circular && this.internalPage >= this.totalPages - 1}\n onClick={(e) => this.navForward(e)}\n aria-label=\"Siguiente\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z\" fill=\"#475066\" />\n </svg>\n </button>\n )}\n </div>\n\n {this.showIndicators && this.totalPages > 1 && (\n <ul class=\"dropi-carousel-indicators\">\n {Array.from({ length: this.totalPages }).map((_, i) => (\n <li class={{ active: i === this.internalPage }} onClick={() => this.onDotClick(i)}>\n <button type=\"button\" aria-label={`Página ${i + 1}`} />\n </li>\n ))}\n </ul>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-carousel.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-carousel/dropi-carousel.css?tag=dropi-carousel&encapsulation=shadow","src/components/dropi-carousel/dropi-carousel.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, ::before, ::after {\n box-sizing: border-box;\n}\n\n.dropi-carousel-container {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n padding: 0 var(--Size-4);\n}\n\n.dropi-carousel-content {\n display: flex;\n align-items: center;\n position: relative;\n padding: 1rem 0;\n width: 100%;\n}\n\n.dropi-carousel-items-content {\n overflow: hidden;\n flex: 1;\n padding: 0;\n width: 100%;\n max-width: 100%;\n}\n\n.dropi-carousel-items-container {\n display: flex;\n padding-bottom: var(--Size-3);\n will-change: transform;\n}\n\n.dropi-carousel-item {\n flex: 0 0 auto;\n padding: 0 0.5rem;\n box-sizing: border-box;\n}\n\n.dropi-carousel-item > {\n width: 100%;\n box-sizing: border-box;\n display: block;\n}\n\n.dropi-carousel-nav {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: all 0.2s;\n flex-shrink: 0;\n z-index: 1;\n border-radius: var(--Border-5);\n background: var(--Neutral-White, #fff);\n box-shadow: var(--Shadow-medium);\n border: none;\n appearance: none;\n padding: 0;\n}\n\n.dropi-carousel-nav:hover {\n background: var(--Gray-Gray-50);\n}\n\n.dropi-carousel-nav:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n box-shadow: none;\n}\n\n.dropi-carousel-prev {\n margin-right: 1rem;\n}\n\n.dropi-carousel-next {\n margin-left: 1rem;\n}\n\n.dropi-carousel-indicators {\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n list-style: none;\n padding: 1rem 0 0 0;\n margin: 0;\n}\n\n.dropi-carousel-indicators li {\n cursor: pointer;\n}\n\n.dropi-carousel-indicators li button {\n width: 1rem;\n height: 1rem;\n border-radius: 50%;\n border: 1px solid var(--Gray-Gray-100, #eceef4);\n background: var(--Neutral-White, #fff);\n cursor: pointer;\n transition: all 0.2s;\n padding: 0;\n}\n\n.dropi-carousel-indicators li.active button {\n background: var(--Primary-Primary-500);\n border-color: var(--Primary-Primary-500);\n}\n\n.dropi-carousel-indicators li:hover button {\n background: var(--Gray-Gray-200);\n}\n\n/* Vertical Orientation /\n.vertical .dropi-carousel-content {\n flex-direction: column;\n}\n\n.vertical .dropi-carousel-items-container {\n flex-direction: column;\n}\n\n.vertical .dropi-carousel-prev {\n margin: 0 0 1rem 0;\n}\n\n.vertical .dropi-carousel-next {\n margin: 1rem 0 0 0;\n}\n\n/ Responsive fixes /\n@media (max-width: 768px) {\n .dropi-carousel-container {\n padding: 0;\n }\n .dropi-carousel-item {\n padding: 0 0.25rem;\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'dropi-carousel',\n styleUrl: 'dropi-carousel.css',\n shadow: true,\n})\nexport class DropiCarousel {\n @Element() el: HTMLElement;\n\n /* Items to display (Array of URLs or objects) /\n @Prop() value: any[] \| string = [];\n /* Active page index /\n @Prop({ mutable: true }) page: number = 0;\n /* Number of items visible per page /\n @Prop() numVisible: number = 1;\n /* Number of items to scroll per click /\n @Prop() numScroll: number = 1;\n /* Orientation of the carousel /\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n /* Show navigation arrows /\n @Prop() showNavigators: any = true;\n /* Show dot indicators /\n @Prop() showIndicators: any = true;\n /* Autoplay interval in ms (0 = disabled) /\n @Prop() autoplayInterval: number = 0;\n /* Infinite scrolling /\n @Prop() circular: any = false;\n\n @State() private parsedValue: any[] = [];\n @State() private internalPage: number = 0;\n @State() private isAnimating: boolean = false;\n @State() private totalPages: number = 0;\n\n private itemsContainer: HTMLElement;\n private timer: any;\n\n @Event() dropiPageChange: EventEmitter<number>;\n @Event() dropiPage: EventEmitter<any>;\n\n @Watch('value')\n handleValue(val: any[] \| string) {\n this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val \|\| []);\n this.updateTotalPages();\n this.updateTransform();\n }\n\n @Watch('page')\n handlePage(val: number) {\n this.internalPage = val;\n this.updateTransform();\n }\n\n componentWillLoad() {\n if (!this.value \|\| (Array.isArray(this.value) && this.value.length === 0)) {\n const attrValue = this.el.getAttribute('value');\n if (attrValue) this.value = attrValue;\n }\n this.handleValue(this.value);\n this.internalPage = this.page;\n }\n\n componentDidLoad() {\n this.updateTransform();\n if (this.autoplayInterval > 0) {\n this.startAutoplay();\n }\n window.addEventListener('resize', this.onResize);\n }\n\n disconnectedCallback() {\n this.stopAutoplay();\n window.removeEventListener('resize', this.onResize);\n }\n\n private onResize = () => {\n this.updateTotalPages();\n this.updateTransform();\n };\n\n private startAutoplay() {\n this.timer = setInterval(() => this.navForward(), this.autoplayInterval);\n }\n\n private stopAutoplay() {\n if (this.timer) clearInterval(this.timer);\n }\n\n private updateTotalPages() {\n if (!this.parsedValue.length \|\| this.parsedValue.length <= this.numVisible) {\n this.totalPages = 1;\n return;\n }\n const totalItems = this.parsedValue.length;\n const remainingItems = totalItems - this.numVisible;\n this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;\n }\n\n private updateTransform() {\n if (!this.itemsContainer) return;\n \n const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';\n const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item') as HTMLElement;\n if (!firstItem) return;\n\n const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;\n const itemsScrolled = this.internalPage this.numScroll;\n const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);\n const safeScroll = Math.min(itemsScrolled, maxScroll);\n \n const translateValue = -(safeScroll * itemSize);\n this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;\n }\n\n private navForward = (e?: Event) => {\n if (e) e.preventDefault();\n if (this.circular \|\| this.internalPage < this.totalPages - 1) {\n this.isAnimating = true;\n this.internalPage = (this.internalPage + 1) % this.totalPages;\n this.page = this.internalPage;\n this.updateTransform();\n this.dropiPageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n };\n\n private navBackward = (e?: Event) => {\n if (e) e.preventDefault();\n if (this.circular \|\| this.internalPage > 0) {\n this.isAnimating = true;\n this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;\n this.page = this.internalPage;\n this.updateTransform();\n this.dropiPageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n };\n\n private onDotClick(index: number) {\n this.isAnimating = true;\n this.internalPage = index;\n this.page = this.internalPage;\n this.updateTransform();\n this.dropiPageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n\n render() {\n const items = this.parsedValue;\n if (!items.length) return null;\n\n const itemFlexBasis = `${100 / this.numVisible}%`;\n\n return (\n <div class={{ 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' }}>\n <div class=\"dropi-carousel-content\">\n {this.showNavigators && items.length > this.numVisible && (\n <button\n class=\"dropi-carousel-nav dropi-carousel-prev\"\n disabled={!this.circular && this.internalPage === 0}\n onClick={(e) => this.navBackward(e)}\n aria-label=\"Anterior\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z\" fill=\"#475066\" />\n </svg>\n </button>\n )}\n\n <div class=\"dropi-carousel-items-content\">\n <div\n class=\"dropi-carousel-items-container\"\n ref={(el) => (this.itemsContainer = el)}\n style={{ transition: this.isAnimating ? 'transform 0.5s ease' : 'none' }}\n >\n {items.map((item, i) => (\n <div class=\"dropi-carousel-item\" style={{ flex: `0 0 ${itemFlexBasis}` }}>\n {typeof item === 'string' ? (\n <img src={item} alt={`Slide ${i + 1}`} />\n ) : (\n <slot name={`item-${i}`} />\n )}\n </div>\n ))}\n </div>\n </div>\n\n {this.showNavigators && items.length > this.numVisible && (\n <button\n class=\"dropi-carousel-nav dropi-carousel-next\"\n disabled={!this.circular && this.internalPage >= this.totalPages - 1}\n onClick={(e) => this.navForward(e)}\n aria-label=\"Siguiente\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z\" fill=\"#475066\" />\n </svg>\n </button>\n )}\n </div>\n\n {this.showIndicators && this.totalPages > 1 && (\n <ul class=\"dropi-carousel-indicators\">\n {Array.from({ length: this.totalPages }).map((_, i) => (\n <li class={{ active: i === this.internalPage }} onClick={() => this.onDotClick(i)}>\n <button type=\"button\" aria-label={`Página ${i + 1}`} />\n </li>\n ))}\n </ul>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-checkbox-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 dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.csl__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)}.csl__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}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}`;
+const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.csl__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)}.csl__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}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}`;
 const DropiCheckboxSelectionList = class {
     constructor(hostRef) {
@@ -52,10 +52,10 @@ const DropiCheckboxSelectionList = class {
     }
     render() {
         const items = this.filtered;
-        return (h("div", { key: '95774833547807d6001525158bf199883661b649', class: "csl" }, this.showFilter && (h("div", { key: '13f6bfd33150cdf138e90b93fc8121dfcc311050', class: "csl__search" }, h("dropi-icon", { key: '4edf5c21eeac0aa442e58845621b7715d8484c1b', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: '40071d0c189c7fd1f1bf8090ebe1d64ce9605602', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: '20ab881c475eb5df0318f1669eb59af22e5c8055', class: "csl" }, this.showFilter && (h("div", { key: '75c33cae60b61b8ed91fcef89d9a1cc08e9bd4d2', class: "csl__search" }, h("dropi-icon", { key: '6a30bc308753a24c1349090975d3b3d4c856a0fd', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: 'b76b01227062acda7ad87ac46ecae64eef633a75', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.dropiSearch.emit(this.filterText);
-            } }), this.filterText && (h("button", { key: 'a560cab7ce53e57e036696194054286aa1dd6fd9', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: 'f1ae7e38fcb954761edb02bb32af139fb5eea610', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), h("div", { key: 'e93dfccc8215e96640ebe8c69f33f0bff5f655f2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            } }), this.filterText && (h("button", { key: '96bcf9cf9edc6de2e30729dff75b84d56eda1134', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: '1564c8dbc0ee07784ef692c89f7f888905d070a0', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), h("div", { key: 'e6bc1fd3eaea49298c0d099d7b98e1eef32d3b38', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
             return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { name: "_csl-option", checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
         })))));

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

	@@ -1 +1 @@
1	- {"file":"dropi-checkbox-selection-list.entry.js","mappings":";;AAAA,MAAM,6BAA6B,GAAG,MAAM,CAAC,~~unCAAunC~~,CAAC;;~~MCkBxpC~~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","names":[],"sources":["src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.css?tag=dropi-checkbox-selection-list&encapsulation=shadow","src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n, ::before, ::after { box-sizing: border-box; }\n\n.csl__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.csl__search-input {\n flex: 1; border: none; outline: none;\n font-size: var(--font-size-s, 12px); font-family: ~~inherit~~;\n color: var(--Gray-Gray-700, #32394d); background: transparent;\n}\n\n.csl__clear { display: flex; background: none; border: none; padding: 0; cursor: pointer; }\n\n.csl__list { display: flex; flex-direction: column; }\n\n.csl__item {\n display: flex;\n align-items: center;\n gap: var(--Size-2, 8px);\n padding: var(--Size-2, 8px) var(--Size-3, 12px);\n cursor: pointer;\n border-radius: var(--Border-1, 4px);\n transition: background 0.15s;\n}\n.csl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.csl__icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }\n\n.csl__label { font-size: var(--font-size-s, 12px); color: var(--Gray-Gray-700, #32394d); flex: 1; }\n\n.csl__empty {\n padding: var(--Size-4, 16px);\n text-align: center;\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-400, #858ea6);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface CheckboxOption {\n id: string \| number;\n label: string;\n icon?: string;\n [key: string]: any;\n}\n\n/\n @component dropi-checkbox-selection-list\n * Searchable list of checkbox options with multi-select support.\n /\n@Component({\n tag: 'dropi-checkbox-selection-list',\n styleUrl: 'dropi-checkbox-selection-list.css',\n shadow: true,\n})\nexport class DropiCheckboxSelectionList {\n /* Options array or JSON string /\n @Prop() options: CheckboxOption[] \| string = [];\n /* Show search filter /\n @Prop() showFilter: boolean = true;\n /* Search placeholder /\n @Prop() filterPlaceholder: string = 'Search';\n /* Show \"no results\" message /\n @Prop() showNotFound: boolean = true;\n /* Empty state message /\n @Prop() notFoundMessage: string = 'No related results found';\n /* Allow multiple selection /\n @Prop() multiSelect: boolean = true;\n /* Debounce delay in ms for search input (matches Angular `searchDelay`) /\n @Prop() searchDelay: number = 100;\n\n @State() private filterText: string = '';\n @State() private selected: (string \| number)[] = [];\n @State() private parsedOptions: CheckboxOption[] = [];\n\n /* Emitted when selection changes — matches Angular 'checkedValues' /\n @Event() dropiCheckedValues: EventEmitter<(string \| number)[]>;\n /* Emitted on search — matches Angular 'onSearch' */\n @Event() dropiSearch: EventEmitter<string>;\n\n @Watch('options')\n optionsChanged(val: CheckboxOption[] \| string) {\n this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val \|\| []);\n }\n\n componentWillLoad() { this.optionsChanged(this.options); }\n\n private get filtered(): CheckboxOption[] {\n if (!this.filterText) return this.parsedOptions;\n const q = this.filterText.toLowerCase();\n return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));\n }\n\n private toggle(id: string \| number) {\n if (this.multiSelect) {\n this.selected = this.selected.includes(id)\n ? this.selected.filter(s => s !== id)\n : [...this.selected, id];\n } else {\n this.selected = this.selected.includes(id) ? [] : [id];\n }\n this.dropiCheckedValues.emit(this.selected);\n }\n\n render() {\n const items = this.filtered;\n\n return (\n <div class=\"csl\">\n {this.showFilter && (\n <div class=\"csl__search\">\n <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n <input\n class=\"csl__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(this.filterText);\n }}\n />\n {this.filterText && (\n <button class=\"csl__clear\" onClick={() => { this.filterText = ''; this.dropiSearch.emit(''); }}>\n <dropi-icon name=\"Close-small\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-400\" />\n </button>\n )}\n </div>\n )}\n\n <div class=\"csl__list\">\n {items.length === 0 && this.showNotFound ? (\n <div class=\"csl__empty\">{this.notFoundMessage}</div>\n ) : (\n items.map(opt => {\n const checked = this.selected.includes(opt.id);\n return (\n <div class=\"csl__item\" key={opt.id} onClick={() => this.toggle(opt.id)}>\n <dropi-checkbox name=\"_csl-option\" checked={checked} />\n {opt.icon && <img class=\"csl__icon\" src={opt.icon} alt={opt.label} />}\n <span class=\"csl__label\">{opt.label}</span>\n </div>\n );\n })\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-checkbox-selection-list.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.css?tag=dropi-checkbox-selection-list&encapsulation=shadow","src/components/dropi-checkbox-selection-list/dropi-checkbox-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.csl__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.csl__search-input {\n flex: 1; border: none; outline: none;\n font-size: var(--font-size-s, 12px); font-family: var(--font-family-01, 'Inter', sans-serif);\n color: var(--Gray-Gray-700, #32394d); background: transparent;\n}\n\n.csl__clear { display: flex; background: none; border: none; padding: 0; cursor: pointer; }\n\n.csl__list { display: flex; flex-direction: column; }\n\n.csl__item {\n display: flex;\n align-items: center;\n gap: var(--Size-2, 8px);\n padding: var(--Size-2, 8px) var(--Size-3, 12px);\n cursor: pointer;\n border-radius: var(--Border-1, 4px);\n transition: background 0.15s;\n}\n.csl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.csl__icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }\n\n.csl__label { font-size: var(--font-size-s, 12px); color: var(--Gray-Gray-700, #32394d); flex: 1; }\n\n.csl__empty {\n padding: var(--Size-4, 16px);\n text-align: center;\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-400, #858ea6);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface CheckboxOption {\n id: string \| number;\n label: string;\n icon?: string;\n [key: string]: any;\n}\n\n/\n @component dropi-checkbox-selection-list\n * Searchable list of checkbox options with multi-select support.\n /\n@Component({\n tag: 'dropi-checkbox-selection-list',\n styleUrl: 'dropi-checkbox-selection-list.css',\n shadow: true,\n})\nexport class DropiCheckboxSelectionList {\n /* Options array or JSON string /\n @Prop() options: CheckboxOption[] \| string = [];\n /* Show search filter /\n @Prop() showFilter: boolean = true;\n /* Search placeholder /\n @Prop() filterPlaceholder: string = 'Search';\n /* Show \"no results\" message /\n @Prop() showNotFound: boolean = true;\n /* Empty state message /\n @Prop() notFoundMessage: string = 'No related results found';\n /* Allow multiple selection /\n @Prop() multiSelect: boolean = true;\n /* Debounce delay in ms for search input (matches Angular `searchDelay`) /\n @Prop() searchDelay: number = 100;\n\n @State() private filterText: string = '';\n @State() private selected: (string \| number)[] = [];\n @State() private parsedOptions: CheckboxOption[] = [];\n\n /* Emitted when selection changes — matches Angular 'checkedValues' /\n @Event() dropiCheckedValues: EventEmitter<(string \| number)[]>;\n /* Emitted on search — matches Angular 'onSearch' */\n @Event() dropiSearch: EventEmitter<string>;\n\n @Watch('options')\n optionsChanged(val: CheckboxOption[] \| string) {\n this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val \|\| []);\n }\n\n componentWillLoad() { this.optionsChanged(this.options); }\n\n private get filtered(): CheckboxOption[] {\n if (!this.filterText) return this.parsedOptions;\n const q = this.filterText.toLowerCase();\n return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));\n }\n\n private toggle(id: string \| number) {\n if (this.multiSelect) {\n this.selected = this.selected.includes(id)\n ? this.selected.filter(s => s !== id)\n : [...this.selected, id];\n } else {\n this.selected = this.selected.includes(id) ? [] : [id];\n }\n this.dropiCheckedValues.emit(this.selected);\n }\n\n render() {\n const items = this.filtered;\n\n return (\n <div class=\"csl\">\n {this.showFilter && (\n <div class=\"csl__search\">\n <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n <input\n class=\"csl__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(this.filterText);\n }}\n />\n {this.filterText && (\n <button class=\"csl__clear\" onClick={() => { this.filterText = ''; this.dropiSearch.emit(''); }}>\n <dropi-icon name=\"Close-small\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-400\" />\n </button>\n )}\n </div>\n )}\n\n <div class=\"csl__list\">\n {items.length === 0 && this.showNotFound ? (\n <div class=\"csl__empty\">{this.notFoundMessage}</div>\n ) : (\n items.map(opt => {\n const checked = this.selected.includes(opt.id);\n return (\n <div class=\"csl__item\" key={opt.id} onClick={() => this.toggle(opt.id)}>\n <dropi-checkbox name=\"_csl-option\" checked={checked} />\n {opt.icon && <img class=\"csl__icon\" src={opt.icon} alt={opt.label} />}\n <span class=\"csl__label\">{opt.label}</span>\n </div>\n );\n })\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-checkbox.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 dropiCheckboxCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}`;
+const dropiCheckboxCss = () => `:host{display:inline-block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}`;
 const DropiCheckbox = class {
     constructor(hostRef) {
@@ -36,12 +36,12 @@ const DropiCheckbox = class {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: '091a0802423ae37f0473938259313d97a460645e', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: 'bf5c681b5285a6469e7652422010b3559ac057db', class: {
+        return (h("div", { key: 'febf6eb0bb7392639bca5a473dd17c2e7d732cff', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '64cd57277c43c5ae4dfd775a0df13cd7462b8c58', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: 'be7eecf60b8f45fa6ebaa7c43d6a2087c79f02d0', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '6eda9ca377ab8480479f3f2ad880895dd9b54b9d', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, h("svg", { key: '97608b9897d464c572edff3dcf5fec4fadad371d', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'e983025baa94876d0a01b6c28f789c0ee1e91c36', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,~~8qBAA8qB~~,CAAC;;~~MCalsB~~,aAAa,GAAA,MAAA;;;;;;;;;;;;AACL,IAAA,SAAS;;AAGH,IAAA,IAAI;;IAGW,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;;IAGhD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;;IAIjD,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACrE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;gBACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,smCAAsmC,EACxmC,IAAI,EAAC,SAAS,EAAA,CACd,CACE,CACF,CACF;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-checkbox/dropi-checkbox.css?tag=dropi-checkbox&encapsulation=shadow","src/components/dropi-checkbox/dropi-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n, ::before, ::after {\n box-sizing: border-box;\n}\n\n.container-dropi-checkbox {\n display: inline-block;\n}\n\n.check {\n width: 20px;\n height: 20px;\n border-radius: var(--Border-1, 4px);\n cursor: pointer;\n transition:\n background-color 0.3s ease-in-out,\n border-style 0.3s ease-in-out;\n}\n\n.noCheck {\n border-style: solid;\n border-width: 2px;\n border-color: var(--Gray-Gray-200, #c3c9d9);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.noCheck svg {\n visibility: hidden;\n}\n\n.isCheck {\n display: flex;\n background-color: var(--Primary-Primary-500, #f49a3d);\n justify-content: center;\n align-items: center;\n}\n\n.disabled {\n background-color: var(--Gray-Gray-50, #f7f8fa);\n border-color: var(--Gray-Gray-100, #e6eaf2);\n cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\n/\n @component dropi-checkbox\n * A styled checkbox that emits change events.\n * Supports form association via native `<input type=\"checkbox\">` internals.\n /\n@Component({\n tag: 'dropi-checkbox',\n styleUrl: 'dropi-checkbox.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiCheckbox {\n @AttachInternals() internals: ElementInternals;\n\n /* Name for native form submission /\n @Prop({ reflect: true }) name!: string;\n\n /* Whether the checkbox is checked /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n /* Whether the checkbox is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Emitted when the checked state changes */\n @Event() dropiChange: EventEmitter<boolean>;\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 changeState() {\n if (this.disabled) return;\n this.checked = !this.checked;\n this.dropiChange.emit(this.checked);\n }\n\n render() {\n return (\n <div class=\"container-dropi-checkbox\" onClick={() => this.changeState()}>\n <div\n class={{\n check: true,\n isCheck: this.checked,\n noCheck: !this.checked,\n disabled: this.disabled,\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z\"\n fill=\"#FFFFFF\"\n />\n </svg>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,mwBAAmwB,CAAC;;MCavxB,aAAa,GAAA,MAAA;;;;;;;;;;;;AACL,IAAA,SAAS;;AAGH,IAAA,IAAI;;IAGW,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;;IAGhD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;;IAIjD,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACrE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;gBACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,smCAAsmC,EACxmC,IAAI,EAAC,SAAS,EAAA,CACd,CACE,CACF,CACF;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-checkbox/dropi-checkbox.css?tag=dropi-checkbox&encapsulation=shadow","src/components/dropi-checkbox/dropi-checkbox.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: inline-block;\n}\n\n, ::before, ::after {\n box-sizing: border-box;\n}\n\n.container-dropi-checkbox {\n display: inline-block;\n}\n\n.check {\n width: 20px;\n height: 20px;\n border-radius: var(--Border-1, 4px);\n cursor: pointer;\n transition:\n background-color 0.3s ease-in-out,\n border-style 0.3s ease-in-out;\n}\n\n.noCheck {\n border-style: solid;\n border-width: 2px;\n border-color: var(--Gray-Gray-200, #c3c9d9);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.noCheck svg {\n visibility: hidden;\n}\n\n.isCheck {\n display: flex;\n background-color: var(--Primary-Primary-500, #f49a3d);\n justify-content: center;\n align-items: center;\n}\n\n.disabled {\n background-color: var(--Gray-Gray-50, #f7f8fa);\n border-color: var(--Gray-Gray-100, #e6eaf2);\n cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\n/\n @component dropi-checkbox\n * A styled checkbox that emits change events.\n * Supports form association via native `<input type=\"checkbox\">` internals.\n /\n@Component({\n tag: 'dropi-checkbox',\n styleUrl: 'dropi-checkbox.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiCheckbox {\n @AttachInternals() internals: ElementInternals;\n\n /* Name for native form submission /\n @Prop({ reflect: true }) name!: string;\n\n /* Whether the checkbox is checked /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n /* Whether the checkbox is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Emitted when the checked state changes */\n @Event() dropiChange: EventEmitter<boolean>;\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 changeState() {\n if (this.disabled) return;\n this.checked = !this.checked;\n this.dropiChange.emit(this.checked);\n }\n\n render() {\n return (\n <div class=\"container-dropi-checkbox\" onClick={() => this.changeState()}>\n <div\n class={{\n check: true,\n isCheck: this.checked,\n noCheck: !this.checked,\n disabled: this.disabled,\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z\"\n fill=\"#FFFFFF\"\n />\n </svg>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-chips.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 dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:inherit;width:fit-content;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
+const dropiChipsCss = () => `:host{display:inline-flex;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:var(--font-family-01, 'Inter', sans-serif);width:fit-content;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
 const DropiChips = class {
     constructor(hostRef) {
@@ -20,7 +20,7 @@ const DropiChips = class {
     /** Emitted when the close icon is clicked */
     dropiClose;
     render() {
-        return (h("div", { key: '394a3ff5219535e9f4e1d6c9fbb320c32f1ce2e7', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: 'c7ea7ce319e2ab0a179f7b0b61ad9fe39be7c1ec', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '67e2edfbe37af83868a665cf65a85ecc27b7cfb5', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), h("span", { key: '1916b1796d69cf6742177b8f4013315323bdf16f', class: "chip__text" }, h("slot", { key: '167e1b230b1c4406ba3f40ba7783966c6b523c96' })), this.showIcon && (h("button", { key: '118d46db1615e9ed14485500b5a754407c361139', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '1639e4ae068d0361512469d2915b392101b2b923', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
+        return (h("div", { key: '20ecd2dad1f10bbc26028eb866e45af66090ba4e', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '6446517eb4075c1f2a4a964fd9c66c554682f706', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '9404886b51dae0a225e45c5d6d7bd0fff7e3d630', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), h("span", { key: '363167e5eb3a4522617bf941d2c7e638c9aeef45', class: "chip__text" }, h("slot", { key: 'a00a38943eee521719f9af41bc742ee4a025c4a2' })), this.showIcon && (h("button", { key: '2d4d5b571cee579d7466c720668f8ef6ab7e1a74', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '48a22f01f30a08331d4b67ca3a5ddba012ac4642', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
     }
 };
 DropiChips.style = dropiChipsCss();

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

	@@ -1 +1 @@
1	- {"file":"dropi-chips.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,~~y9BAAy9B~~,CAAC;;~~MCe1+B~~,UAAU,GAAA,MAAA;;;;;;IAEb,WAAW,GAAc,MAAM;;IAE/B,IAAI,GAAa,MAAM;;IAEvB,MAAM,GAAW,EAAE;;IAEnB,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAW,EAAE;;AAGhB,IAAA,UAAU;IAEnB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAE9D,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CACtD,EAEA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAChC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,GAAG,CAC/G,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,IAAI,CAAC,QAAQ,KACZ,+DAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACtF,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,CAAG,CACnF,CACV,CAEG;;;;;;;","names":[],"sources":["src/components/dropi-chips/dropi-chips.css?tag=dropi-chips&encapsulation=shadow","src/components/dropi-chips/dropi-chips.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--Size-1, 4px);\n height: 24px;\n padding: 0 var(--Size-2, 8px);\n border-radius: var(--Border-2, 8px);\n font-size: var(--font-size-xs, 10px);\n font-family: ~~inherit~~;\n width: fit-content;\n max-width: 200px;\n}\n\n/ ── Style variants ─────────────────────────────────────── /\n.chip--filters {\n background: var(--Primary-Primary-50, #fff5eb);\n border: 1px solid var(--Primary-Primary-200, #fbd4a3);\n color: var(--Primary-Primary-600, #d4872e);\n}\n\n.chip--fill {\n background: var(--Gray-Gray-100, #e6eaf2);\n border: 1px solid transparent;\n color: var(--Gray-Gray-700, #32394d);\n}\n\n/ ── Avatar ─────────────────────────────────────────────── /\n.chip__avatar {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n}\n\n/ ── Label ──────────────────────────────────────────────── /\n.chip__text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n}\n\n/ ── Close button ───────────────────────────────────────── /\n.chip__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.7;\n transition: opacity 0.15s;\n}\n\n.chip__close:hover {\n opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ChipStyle = 'filtrers' \| 'fill';\nexport type ChipType = 'icon' \| 'text' \| 'avatar';\n\n/\n @component dropi-chips\n * Chip/tag-like element with optional icon, avatar, and close button.\n * Use <slot> for the chip label text.\n /\n@Component({\n tag: 'dropi-chips',\n styleUrl: 'dropi-chips.css',\n shadow: true,\n})\nexport class DropiChips {\n /* Visual style (named customStyle to avoid conflict with HTMLElement.style) /\n @Prop() customStyle: ChipStyle = 'fill';\n /* Content type /\n @Prop() type: ChipType = 'icon';\n /* Avatar image URL (when type = 'avatar') /\n @Prop() urlImg: string = '';\n /* Show the close/remove icon /\n @Prop() showIcon: boolean = false;\n /* Icon name (when type = 'icon') /\n @Prop() icon: string = '';\n\n /* Emitted when the close icon is clicked */\n @Event() dropiClose: EventEmitter<void>;\n\n render() {\n return (\n <div class={{ 'chip': true, [`chip--${this.customStyle}`]: true }}>\n\n {this.type === 'avatar' && this.urlImg && (\n <img class=\"chip__avatar\" src={this.urlImg} alt=\"\" />\n )}\n\n {this.type === 'icon' && this.icon && (\n <dropi-icon class=\"chip__pre-icon\" name={this.icon} iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n )}\n\n <span class=\"chip__text\">\n <slot />\n </span>\n\n {this.showIcon && (\n <button class=\"chip__close\" onClick={() => this.dropiClose.emit()} aria-label=\"Eliminar\">\n <dropi-icon name=\"Cross-circle\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n </button>\n )}\n\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-chips.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ilCAAilC,CAAC;;MCelmC,UAAU,GAAA,MAAA;;;;;;IAEb,WAAW,GAAc,MAAM;;IAE/B,IAAI,GAAa,MAAM;;IAEvB,MAAM,GAAW,EAAE;;IAEnB,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAW,EAAE;;AAGhB,IAAA,UAAU;IAEnB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAE9D,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CACtD,EAEA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAChC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,GAAG,CAC/G,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,IAAI,CAAC,QAAQ,KACZ,+DAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACtF,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,CAAG,CACnF,CACV,CAEG;;;;;;;","names":[],"sources":["src/components/dropi-chips/dropi-chips.css?tag=dropi-chips&encapsulation=shadow","src/components/dropi-chips/dropi-chips.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: inline-flex;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--Size-1, 4px);\n height: 24px;\n padding: 0 var(--Size-2, 8px);\n border-radius: var(--Border-2, 8px);\n font-size: var(--font-size-xs, 10px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n width: fit-content;\n max-width: 200px;\n}\n\n/ ── Style variants ─────────────────────────────────────── /\n.chip--filters {\n background: var(--Primary-Primary-50, #fff5eb);\n border: 1px solid var(--Primary-Primary-200, #fbd4a3);\n color: var(--Primary-Primary-600, #d4872e);\n}\n\n.chip--fill {\n background: var(--Gray-Gray-100, #e6eaf2);\n border: 1px solid transparent;\n color: var(--Gray-Gray-700, #32394d);\n}\n\n/ ── Avatar ─────────────────────────────────────────────── /\n.chip__avatar {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n}\n\n/ ── Label ──────────────────────────────────────────────── /\n.chip__text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n}\n\n/ ── Close button ───────────────────────────────────────── /\n.chip__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.7;\n transition: opacity 0.15s;\n}\n\n.chip__close:hover {\n opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ChipStyle = 'filtrers' \| 'fill';\nexport type ChipType = 'icon' \| 'text' \| 'avatar';\n\n/\n @component dropi-chips\n * Chip/tag-like element with optional icon, avatar, and close button.\n * Use <slot> for the chip label text.\n /\n@Component({\n tag: 'dropi-chips',\n styleUrl: 'dropi-chips.css',\n shadow: true,\n})\nexport class DropiChips {\n /* Visual style (named customStyle to avoid conflict with HTMLElement.style) /\n @Prop() customStyle: ChipStyle = 'fill';\n /* Content type /\n @Prop() type: ChipType = 'icon';\n /* Avatar image URL (when type = 'avatar') /\n @Prop() urlImg: string = '';\n /* Show the close/remove icon /\n @Prop() showIcon: boolean = false;\n /* Icon name (when type = 'icon') /\n @Prop() icon: string = '';\n\n /* Emitted when the close icon is clicked */\n @Event() dropiClose: EventEmitter<void>;\n\n render() {\n return (\n <div class={{ 'chip': true, [`chip--${this.customStyle}`]: true }}>\n\n {this.type === 'avatar' && this.urlImg && (\n <img class=\"chip__avatar\" src={this.urlImg} alt=\"\" />\n )}\n\n {this.type === 'icon' && this.icon && (\n <dropi-icon class=\"chip__pre-icon\" name={this.icon} iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n )}\n\n <span class=\"chip__text\">\n <slot />\n </span>\n\n {this.showIcon && (\n <button class=\"chip__close\" onClick={() => this.dropiClose.emit()} aria-label=\"Eliminar\">\n <dropi-icon name=\"Cross-circle\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n </button>\n )}\n\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-city-selector.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 dropiCitySelectorCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:44px;padding:6px 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color 0.15s}.selector-trigger:hover:not(:disabled){border-color:var(--Gray-Gray-300, #a3abbf)}.selector-trigger:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.city-selector--disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed;opacity:0.6}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:26px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-200, #fcd5a8);border-radius:var(--Border-1, 4px);padding:2px 6px;font-size:var(--font-size-xs, 12px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);z-index:var(--dropi-z-index-overlay, 11000);overflow:hidden}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.search-input{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);outline:none;transition:border-color 0.15s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.options-list{max-height:280px;overflow-y:auto;background:var(--Neutral-White, #ffffff)}.options-list::-webkit-scrollbar{width:6px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.group-label{padding:14px 16px 8px;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433);background:var(--Neutral-White, #ffffff)}.city-option{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:background 0.1s;user-select:none}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option--selected .city-label{color:var(--Gray-Gray-800, #1f2433);font-weight:var(--font-weight-medium, 500)}.checkbox{width:22px;height:22px;border:1.5px solid var(--Gray-Gray-300, #c3c9d9);border-radius:var(--Border-1, 6px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s, background 0.15s}.checkbox--checked{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-500, #f49a3d)}.city-label{flex:1}.no-results{padding:20px 16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}`;
+const dropiCitySelectorCss = () => `: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}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:40px;padding:6px 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;font-family:var(--font-family-01, 'Inter', sans-serif);transition:border-color 0.15s}.selector-trigger:hover:not(:disabled){border-color:var(--Gray-Gray-300, #a3abbf)}.selector-trigger:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.city-selector--disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed;opacity:0.6}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:26px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-200, #fcd5a8);border-radius:var(--Border-1, 4px);padding:2px 6px;font-size:var(--font-size-xs, 12px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);z-index:var(--dropi-z-index-overlay, 11000);overflow:hidden}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.search-input{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 14px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);outline:none;transition:border-color 0.15s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.options-list{max-height:280px;overflow-y:auto;background:var(--Neutral-White, #ffffff)}.options-list::-webkit-scrollbar{width:6px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.group-label{padding:14px 16px 8px;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433);background:var(--Neutral-White, #ffffff)}.city-option{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:background 0.1s;user-select:none}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option--selected .city-label{color:var(--Gray-Gray-800, #1f2433);font-weight:var(--font-weight-medium, 500)}.checkbox{width:22px;height:22px;border:1.5px solid var(--Gray-Gray-300, #c3c9d9);border-radius:var(--Border-1, 6px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s, background 0.15s}.checkbox--checked{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-500, #f49a3d)}.city-label{flex:1}.no-results{padding:20px 16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}`;
 const DropiCitySelector = class {
     constructor(hostRef) {
@@ -83,7 +83,7 @@ const DropiCitySelector = class {
     }
     render() {
         const groups = this.filtered;
-        return (h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", iconWidth: "10px", iconHeight: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: 'f99675449127fb19fdea950db057d8c14ca62644', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '2a14a55016c19128fde45359f4b29b6f04f9b035', class: "dropdown", role: "listbox" }, h("div", { key: '1321152ed7b0d3f50b04c7f28b05f1523c41cce4', class: "search-wrap" }, h("div", { key: '7c94a7506d44cd89b83e5782cce16319f266f82c', class: "search-field" }, h("input", { key: '5f40db9a8df0adc09776b4adcfe03a4a6d1d1467', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '3140903ef4355b970c8f348e4f55d43f852e247d', class: "search-icon" }, h("dropi-icon", { key: 'b59235b0d7a685000033d2a294fbce246d0ba4c2', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'bfd40e336b402bd92ec212466cf89e1cffb0d4be', class: "options-list" }, groups.length === 0 && (h("div", { key: '9fce9b4df1ffb122278480f0ab60255ea0c795ec', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
+        return (h("div", { key: 'dbc6ed4bbc32ec2087eab966b24bdbbb9a4a66eb', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'a22d629d62c969fe8c18e01f14e753cc8df36538', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: 'f0880bed53053ec941846ff964ef27aa8df370e1', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: 'daf4a6adecbfd8418c0d85d96e4c223b4d1ed1a7', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", iconWidth: "10px", iconHeight: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: '7db007e00be1d77d34393a086127974183dcfa2d', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '450be45761446a87956401939a5ce42c9e90de70', class: "dropdown", role: "listbox" }, h("div", { key: '0fb6675ea75a648d86c183dde5ec5b4f8bef488d', class: "search-wrap" }, h("div", { key: '80d6c6fae071018a3f5bbd6d51a5086b2f635063', class: "search-field" }, h("input", { key: 'fc5e2a7120df05932a01bcc276bdb46c273337a6', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: 'cb8e16a2b61b587f8c94d5707f2a4aea392a8dc0', class: "search-icon" }, h("dropi-icon", { key: 'babd7dcf26ba3396ca51584d9b15ceb92f59ad0a', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), h("div", { key: '9bad1b60bd85f2699a3512416d04e9d4a678af81', class: "options-list" }, groups.length === 0 && (h("div", { key: '6ee1f41bb90abe906946cc73e86b4ad85cc42a20', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
             const isSelected = this.selected.includes(city.value);
             return (h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (h("dropi-icon", { name: "Check", iconWidth: "10px", iconHeight: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
         })))))))));