@dropi/ui 0.1.37 → 0.1.42

package/dist/dropi-ui/dropi-card-checkbox.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.container-card-check{padding:var(--Size-4, 16px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Size-2, 8px);width:100%;display:flex;align-items:center;gap:var(--Size-3, 12px);cursor:pointer;height:66px;overflow:hidden;transition:background 0.15s ease, border-color 0.15s ease}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:default}.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .extra-info{color:var(--Gray-Gray-400, #858ea6)}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.title-check{color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-regular, 400);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);margin-top:var(--Size-1, 4px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px;flex-shrink:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.extra-info h4{margin:0;font-weight:var(--font-weight-semibold);color:inherit;line-height:inherit}.default-card{border:none}.is-checked{background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-500, #f49a3d)}`;
+
+const DropiCardCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+    }
+    /** Visual type — matches Angular: 'default' | 'with card' */
+    type = 'default';
+    /** Whether the checkbox is checked — matches Angular 'state' */
+    state = 'checked';
+    /** Main title — matches Angular 'title' */
+    title = 'Tittle';
+    /** Optional description below title */
+    description = '';
+    /** Optional extra info shown on the right */
+    extraInfo = '';
+    /** Optional extra info description shown below extraInfo */
+    extraInfoDescription = '';
+    /** Disables interaction */
+    disabled = false;
+    /** Emitted with the new checked state when clicked */
+    dropiChange;
+    get isChecked() {
+        return this.state === 'checked';
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.state = this.isChecked ? 'default' : 'checked';
+        this.dropiChange.emit(this.isChecked);
+    }
+    render() {
+        return (h("div", { key: 'b9004c813a03956904cfed8484cac2d8290be86f', class: {
+                'container-card-check': true,
+                'default-card': this.type === 'default',
+                'is-checked': this.isChecked && this.type === 'with card',
+                'disabled': this.disabled,
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '0c5c50811559c6472173fced2f04eee4626f118f', checked: this.isChecked, disabled: this.disabled }), h("div", { key: '1cb17bf8aea55a498d451922942b4fba6d99492c', class: "container-text" }, h("div", { key: '6e2eab2ae82c13cb4e7a654cc989530cee1122c6', class: "title-check" }, this.title), this.description && h("div", { key: '040e5d8f633975bf3eb806835aae8aa308b1d4f8', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: 'a5c794b5f2fa249b309b2fb00a759aea5b9e0d6c', class: "extra-info" }, this.extraInfo && h("div", { key: '1587e1a0801312fa8e759af2a367b36f842e1354' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: '930811071657dfbbeff7c2bdc4cd2c2776d38177' }, this.extraInfoDescription)))));
+    }
+};
+DropiCardCheckbox.style = dropiCardCheckboxCss();
+
+export { DropiCardCheckbox as dropi_card_checkbox };
+//# sourceMappingURL=dropi-card-checkbox.entry.esm.js.map
+
+//# sourceMappingURL=dropi-card-checkbox.entry.js.map

package/dist/dropi-ui/dropi-card-checkbox.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-card-checkbox.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,ktDAAktD,CAAC;;MCmB1uD,iBAAiB,GAAA,MAAA;;;;;;IAEpB,IAAI,GAA4B,SAAS;;IAExB,KAAK,GAA0B,SAAS;;IAEzD,KAAK,GAAW,QAAQ;;IAExB,WAAW,GAAW,EAAE;;IAExB,SAAS,GAAW,EAAE;;IAEtB,oBAAoB,GAAW,EAAE;;IAEjC,QAAQ,GAAY,KAAK;;AAGxB,IAAA,WAAW;AAEpB,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;;IAGzB,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS;QACnD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGvC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,sBAAsB,EAAE,IAAI;AAC5B,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;gBACzD,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,EACpE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAO,EAC1C,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAO,CACvE,EACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,MAC3C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACpB,IAAI,CAAC,SAAS,IAAI,8DAAM,IAAI,CAAC,SAAS,CAAO,EAC7C,IAAI,CAAC,oBAAoB,IAAI,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,IAAI,CAAC,oBAAoB,CAAM,CAC9D,CACP,CACG;;;;;;;","names":[],"sources":["src/components/dropi-card-checkbox/dropi-card-checkbox.css?tag=dropi-card-checkbox&encapsulation=shadow","src/components/dropi-card-checkbox/dropi-card-checkbox.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.container-card-check {\n  padding: var(--Size-4, 16px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Size-2, 8px);\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--Size-3, 12px);\n  cursor: pointer;\n  height: 66px;\n  overflow: hidden;\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.container-card-check.disabled {\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: default;\n}\n\n.container-card-check.disabled .title-check,\n.container-card-check.disabled .description-text,\n.container-card-check.disabled .extra-info {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.container-text {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  text-align: start;\n  overflow: hidden;\n}\n\n.title-check {\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-m, 14px);\n  font-weight: var(--font-weight-regular, 400);\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.description-text {\n  color: var(--Gray-Gray-500, #69738c);\n  font-size: var(--font-size-s, 12px);\n  margin-top: var(--Size-1, 4px);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.extra-info {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: column;\n  gap: 4px;\n  flex-shrink: 0;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.extra-info h4 {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n  color: inherit;\n  line-height: inherit;\n}\n\n.default-card {\n  border: none;\n}\n\n.is-checked {\n  background: var(--Primary-Primary-50, #fff8f0);\n  border: 1px solid var(--Primary-Primary-500, #f49a3d);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-card-checkbox\n * Card-style clickable checkbox with title, description, and optional extra info.\n *\n * @example\n * <dropi-card-checkbox\n *   title=\"Opción A\"\n *   description=\"Descripción breve\"\n *   type=\"with-card\"\n *   checked\n * ></dropi-card-checkbox>\n */\n@Component({\n  tag: 'dropi-card-checkbox',\n  styleUrl: 'dropi-card-checkbox.css',\n  shadow: true,\n})\nexport class DropiCardCheckbox {\n  /** Visual type — matches Angular: 'default' | 'with card' */\n  @Prop() type: 'default' | 'with card' = 'default';\n  /** Whether the checkbox is checked — matches Angular 'state' */\n  @Prop({ mutable: true }) state: 'checked' | 'default' = 'checked';\n  /** Main title — matches Angular 'title' */\n  @Prop() title: string = 'Tittle';\n  /** Optional description below title */\n  @Prop() description: string = '';\n  /** Optional extra info shown on the right */\n  @Prop() extraInfo: string = '';\n  /** Optional extra info description shown below extraInfo */\n  @Prop() extraInfoDescription: string = '';\n  /** Disables interaction */\n  @Prop() disabled: boolean = false;\n\n  /** Emitted with the new checked state when clicked */\n  @Event() dropiChange: EventEmitter<boolean>;\n\n  private get isChecked(): boolean {\n    return this.state === 'checked';\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.state = this.isChecked ? 'default' : 'checked';\n    this.dropiChange.emit(this.isChecked);\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'container-card-check': true,\n          'default-card': this.type === 'default',\n          'is-checked': this.isChecked && this.type === 'with card',\n          'disabled': this.disabled,\n        }}\n        onClick={() => this.handleClick()}\n      >\n        <dropi-checkbox checked={this.isChecked} disabled={this.disabled} />\n        <div class=\"container-text\">\n          <div class=\"title-check\">{this.title}</div>\n          {this.description && <div class=\"description-text\">{this.description}</div>}\n        </div>\n        {(this.extraInfo || this.extraInfoDescription) && (\n          <div class=\"extra-info\">\n            {this.extraInfo && <div>{this.extraInfo}</div>}\n            {this.extraInfoDescription && <h4>{this.extraInfoDescription}</h4>}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-card-product.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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 DropiCardProduct = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiProductClick = createEvent(this, "dropiProductClick", 7);
+        this.dropiFavoriteChange = createEvent(this, "dropiFavoriteChange", 7);
+        this.dropiAddProduct = createEvent(this, "dropiAddProduct", 7);
+        this.dropiSupplierClick = createEvent(this, "dropiSupplierClick", 7);
+    }
+    /** Product image URL */
+    image = '';
+    /** Product name */
+    productName = '';
+    /** Sale / supplier price (Precio proveedor) */
+    salePrice = 0;
+    /** Suggested price for the dropshipper (Precio sugerido) */
+    suggestedPrice = 0;
+    /** Price currency symbol */
+    currency = '$';
+    /** Supplier / store name */
+    supplier = '';
+    /** Category label */
+    category = '';
+    /** Stock quantity (0 = Agotado) */
+    stock = 0;
+    /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */
+    supplierCategory = '';
+    /** Show favorite button */
+    showFavorite = true;
+    /** Is marked as favorite */
+    isFavorite = false;
+    /** Show "Enviar a cliente" button */
+    showAddButton = true;
+    /** Emitted when card is clicked — matches Angular 'onProductClick' */
+    dropiProductClick;
+    /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
+    dropiFavoriteChange;
+    /** Emitted when "Enviar a cliente" button clicked */
+    dropiAddProduct;
+    /** Emitted when supplier name clicked */
+    dropiSupplierClick;
+    formatPrice(val) {
+        if (val == null)
+            return '0';
+        return val.toLocaleString('es-CO');
+    }
+    get inStock() {
+        return this.stock > 0;
+    }
+    getStockColor() {
+        if (this.stock === 0)
+            return 'var(--Error-Error-500, #f46a6b)';
+        if (this.stock <= 10)
+            return 'var(--Warning-Warning-500, #f59e0b)';
+        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) => {
+                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) => {
+                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) => {
+                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")))));
+    }
+};
+DropiCardProduct.style = dropiCardProductCss();
+
+export { DropiCardProduct as dropi_card_product };
+//# sourceMappingURL=dropi-card-product.entry.esm.js.map
+
+//# sourceMappingURL=dropi-card-product.entry.js.map

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

@@ -0,0 +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}

package/dist/dropi-ui/dropi-card-section.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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 DropiCardSection = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.dropiClick = createEvent(this, "dropiClick", 7);
+    }
+    /** Section title — matches Angular 'title' */
+    title = 'title';
+    /** Section description */
+    description = 'Description';
+    /** Control type on the right */
+    typeElement = 'dropdown';
+    /** Title size variant */
+    type = 'important';
+    /** Switch checked state */
+    isChecked = false;
+    /** Emitted when switch changes */
+    dropiChange;
+    /** 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'
+            ? 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", { 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" }))))));
+    }
+};
+DropiCardSection.style = dropiCardSectionCss();
+
+export { DropiCardSection as dropi_card_section };
+//# sourceMappingURL=dropi-card-section.entry.esm.js.map
+
+//# sourceMappingURL=dropi-card-section.entry.js.map

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

@@ -0,0 +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,EACE,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\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

@@ -0,0 +1,154 @@
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.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 DropiCarousel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiPageChange = createEvent(this, "dropiPageChange", 7);
+        this.dropiPage = createEvent(this, "dropiPage", 7);
+    }
+    get el() { return getElement(this); }
+    /** Items to display (Array of URLs or objects) */
+    value = [];
+    /** Active page index */
+    page = 0;
+    /** Number of items visible per page */
+    numVisible = 1;
+    /** Number of items to scroll per click */
+    numScroll = 1;
+    /** Orientation of the carousel */
+    orientation = 'horizontal';
+    /** Show navigation arrows */
+    showNavigators = true;
+    /** Show dot indicators */
+    showIndicators = true;
+    /** Autoplay interval in ms (0 = disabled) */
+    autoplayInterval = 0;
+    /** Infinite scrolling */
+    circular = false;
+    parsedValue = [];
+    internalPage = 0;
+    isAnimating = false;
+    totalPages = 0;
+    itemsContainer;
+    timer;
+    dropiPageChange;
+    dropiPage;
+    handleValue(val) {
+        this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        this.updateTotalPages();
+        this.updateTransform();
+    }
+    handlePage(val) {
+        this.internalPage = val;
+        this.updateTransform();
+    }
+    componentWillLoad() {
+        if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
+            const attrValue = this.el.getAttribute('value');
+            if (attrValue)
+                this.value = attrValue;
+        }
+        this.handleValue(this.value);
+        this.internalPage = this.page;
+    }
+    componentDidLoad() {
+        this.updateTransform();
+        if (this.autoplayInterval > 0) {
+            this.startAutoplay();
+        }
+        window.addEventListener('resize', this.onResize);
+    }
+    disconnectedCallback() {
+        this.stopAutoplay();
+        window.removeEventListener('resize', this.onResize);
+    }
+    onResize = () => {
+        this.updateTotalPages();
+        this.updateTransform();
+    };
+    startAutoplay() {
+        this.timer = setInterval(() => this.navForward(), this.autoplayInterval);
+    }
+    stopAutoplay() {
+        if (this.timer)
+            clearInterval(this.timer);
+    }
+    updateTotalPages() {
+        if (!this.parsedValue.length || this.parsedValue.length <= this.numVisible) {
+            this.totalPages = 1;
+            return;
+        }
+        const totalItems = this.parsedValue.length;
+        const remainingItems = totalItems - this.numVisible;
+        this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;
+    }
+    updateTransform() {
+        if (!this.itemsContainer)
+            return;
+        const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';
+        const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item');
+        if (!firstItem)
+            return;
+        const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;
+        const itemsScrolled = this.internalPage * this.numScroll;
+        const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);
+        const safeScroll = Math.min(itemsScrolled, maxScroll);
+        const translateValue = -(safeScroll * itemSize);
+        this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;
+    }
+    navForward = (e) => {
+        if (e)
+            e.preventDefault();
+        if (this.circular || this.internalPage < this.totalPages - 1) {
+            this.isAnimating = true;
+            this.internalPage = (this.internalPage + 1) % this.totalPages;
+            this.page = this.internalPage;
+            this.updateTransform();
+            this.dropiPageChange.emit(this.internalPage);
+            setTimeout(() => (this.isAnimating = false), 500);
+        }
+    };
+    navBackward = (e) => {
+        if (e)
+            e.preventDefault();
+        if (this.circular || this.internalPage > 0) {
+            this.isAnimating = true;
+            this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;
+            this.page = this.internalPage;
+            this.updateTransform();
+            this.dropiPageChange.emit(this.internalPage);
+            setTimeout(() => (this.isAnimating = false), 500);
+        }
+    };
+    onDotClick(index) {
+        this.isAnimating = true;
+        this.internalPage = index;
+        this.page = this.internalPage;
+        this.updateTransform();
+        this.dropiPageChange.emit(this.internalPage);
+        setTimeout(() => (this.isAnimating = false), 500);
+    }
+    render() {
+        const items = this.parsedValue;
+        if (!items.length)
+            return null;
+        const itemFlexBasis = `${100 / this.numVisible}%`;
+        return (h("div", { class: { 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' } }, h("div", { class: "dropi-carousel-content" }, this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-prev", disabled: !this.circular && this.internalPage === 0, onClick: (e) => this.navBackward(e), "aria-label": "Anterior" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("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" })))), h("div", { class: "dropi-carousel-items-content" }, h("div", { class: "dropi-carousel-items-container", ref: (el) => (this.itemsContainer = el), style: { transition: this.isAnimating ? 'transform 0.5s ease' : 'none' } }, items.map((item, i) => (h("div", { class: "dropi-carousel-item", style: { flex: `0 0 ${itemFlexBasis}` } }, typeof item === 'string' ? (h("img", { src: item, alt: `Slide ${i + 1}` })) : (h("slot", { name: `item-${i}` }))))))), this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-next", disabled: !this.circular && this.internalPage >= this.totalPages - 1, onClick: (e) => this.navForward(e), "aria-label": "Siguiente" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("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" }))))), this.showIndicators && this.totalPages > 1 && (h("ul", { class: "dropi-carousel-indicators" }, Array.from({ length: this.totalPages }).map((_, i) => (h("li", { class: { active: i === this.internalPage }, onClick: () => this.onDotClick(i) }, h("button", { type: "button", "aria-label": `Página ${i + 1}` }))))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValue": 0
+            }],
+        "page": [{
+                "handlePage": 0
+            }]
+    }; }
+};
+DropiCarousel.style = dropiCarouselCss();
+
+export { DropiCarousel as dropi_carousel };
+//# sourceMappingURL=dropi-carousel.entry.esm.js.map
+
+//# sourceMappingURL=dropi-carousel.entry.js.map

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

@@ -0,0 +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}

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

@@ -0,0 +1,74 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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 DropiCheckboxSelectionList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiCheckedValues = createEvent(this, "dropiCheckedValues", 7);
+        this.dropiSearch = createEvent(this, "dropiSearch", 7);
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Show search filter */
+    showFilter = true;
+    /** Search placeholder */
+    filterPlaceholder = 'Search';
+    /** Show "no results" message */
+    showNotFound = true;
+    /** Empty state message */
+    notFoundMessage = 'No related results found';
+    /** Allow multiple selection */
+    multiSelect = true;
+    /** Debounce delay in ms for search input (matches Angular `searchDelay`) */
+    searchDelay = 100;
+    filterText = '';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes — matches Angular 'checkedValues' */
+    dropiCheckedValues;
+    /** Emitted on search — matches Angular 'onSearch' */
+    dropiSearch;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() { this.optionsChanged(this.options); }
+    get filtered() {
+        if (!this.filterText)
+            return this.parsedOptions;
+        const q = this.filterText.toLowerCase();
+        return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));
+    }
+    toggle(id) {
+        if (this.multiSelect) {
+            this.selected = this.selected.includes(id)
+                ? this.selected.filter(s => s !== id)
+                : [...this.selected, id];
+        }
+        else {
+            this.selected = this.selected.includes(id) ? [] : [id];
+        }
+        this.dropiCheckedValues.emit(this.selected);
+    }
+    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) => {
+                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 => {
+            const checked = this.selected.includes(opt.id);
+            return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
+        })))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiCheckboxSelectionList.style = dropiCheckboxSelectionListCss();
+
+export { DropiCheckboxSelectionList as dropi_checkbox_selection_list };
+//# sourceMappingURL=dropi-checkbox-selection-list.entry.esm.js.map
+
+//# sourceMappingURL=dropi-checkbox-selection-list.entry.js.map

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

@@ -0,0 +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%; }\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 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

@@ -0,0 +1,37 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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 DropiCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+    }
+    /** Whether the checkbox is checked */
+    checked = false;
+    /** Whether the checkbox is disabled */
+    disabled = false;
+    /** Emitted when the checked state changes */
+    dropiChange;
+    changeState() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dropiChange.emit(this.checked);
+    }
+    render() {
+        return (h("div", { key: '071505574decbf6b138256f73affe101c01080ef', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '03e7ec24a87e22c4a5fe1d94cc4ca1fe349d6e6f', class: {
+                check: true,
+                isCheck: this.checked,
+                noCheck: !this.checked,
+                disabled: this.disabled,
+            } }, h("svg", { key: 'c56f01268919995cc7aac0173edf44a01a62e13e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '575f863c9e82e862ea7049bf633b0d86ba374bb2', 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; }
+};
+DropiCheckbox.style = dropiCheckboxCss();
+
+export { DropiCheckbox as dropi_checkbox };
+//# sourceMappingURL=dropi-checkbox.entry.esm.js.map
+
+//# sourceMappingURL=dropi-checkbox.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,8qBAA8qB,CAAC;;MCalsB,aAAa,GAAA,MAAA;;;;;;IAEgB,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;IAEZ,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, 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  /** 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  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}