@dropi/ui 0.1.18 → 0.1.20

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.js

@@ -0,0 +1,219 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-card-checkbox
+ * Card-style clickable checkbox with title, description, and optional extra info.
+ *
+ * @example
+ * <dropi-card-checkbox
+ *   title="Opción A"
+ *   description="Descripción breve"
+ *   type="with-card"
+ *   checked
+ * ></dropi-card-checkbox>
+ */
+export class DropiCardCheckbox {
+    /** Visual type: 'default' = no border, 'with-card' = bordered card */
+    type = 'default';
+    /** Whether the checkbox is checked */
+    checked = false;
+    /** Main title */
+    cardTitle = '';
+    /** 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;
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dropiChange.emit(this.checked);
+    }
+    render() {
+        return (h("div", { key: '9c647faab478d2817593315051b1f02d0334756d', class: {
+                'container-card-check': true,
+                'default-card': this.type === 'default',
+                'is-checked': this.checked && this.type === 'with-card',
+                'disabled': this.disabled,
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '31db5cd31da290692d6aa77e0129b7e4361c23aa', checked: this.checked, disabled: this.disabled }), h("div", { key: '4b5c8eeadd255a79344d634d84e3ff93fafa34b4', class: "container-text" }, h("div", { key: '30a03f764294e0b4ca8a2bf4fd1badc08d0dc7e9', class: "title-check" }, this.cardTitle), this.description && h("div", { key: '751b4fac066b17c903e56a0aa5ef16b0d4151944', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '6b7eec457d42169ac87d1042b65b1bebdd436a5e', class: "extra-info" }, this.extraInfo && h("div", { key: '07e1cfa079668255343570498e0ad0dc0351effb' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: '3a8277e2749b9cbdaf7d5d11086c7f2ac11dc39c' }, this.extraInfoDescription)))));
+    }
+    static get is() { return "dropi-card-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-card-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-card-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'with-card'",
+                    "resolved": "\"default\" | \"with-card\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual type: 'default' = no border, 'with-card' = bordered card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-title",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description below title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "extraInfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional extra info shown on the right"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-info",
+                "defaultValue": "''"
+            },
+            "extraInfoDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional extra info description shown below extraInfo"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-info-description",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables interaction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the new checked state when clicked"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-card-product/dropi-card-product.css

@@ -0,0 +1,158 @@
+:host { display: block; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--Gray-Gray-100, #eceef4);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  overflow: hidden;
+  cursor: pointer;
+  transition: box-shadow 0.2s, transform 0.2s;
+}
+.card:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+  transform: translateY(-2px);
+}
+
+/* Image */
+.card__image-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  background: var(--Gray-Gray-50, #f7f8fa);
+  overflow: hidden;
+}
+
+.card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card__image-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Badge */
+.card__badge {
+  position: absolute;
+  top: var(--Size-2, 8px);
+  left: var(--Size-2, 8px);
+  padding: 2px 8px;
+  border-radius: 100px;
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+}
+.card__badge--default  { background: var(--Gray-Gray-100, #eceef4); color: var(--Gray-Gray-700, #32394d); }
+.card__badge--success  { background: var(--Success-Success-100, #d4f5de); color: var(--Success-Success-700, #0f7b2e); }
+.card__badge--warning  { background: var(--Warning-Warning-100, #fef3cd); color: var(--Warning-Warning-700, #856404); }
+.card__badge--error    { background: var(--Error-Error-100, #fde8e8); color: var(--Error-Error-700, #9b1c1c); }
+.card__badge--info     { background: var(--Info-Info-100, #dbeafe); color: var(--Info-Info-700, #1d4ed8); }
+
+/* Favorite button */
+.card__fav {
+  position: absolute;
+  top: var(--Size-2, 8px);
+  right: var(--Size-2, 8px);
+  background: var(--Neutral-White, #fff);
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
+  transition: transform 0.15s;
+}
+.card__fav:hover { transform: scale(1.1); }
+.card__fav--active { background: var(--Error-Error-50, #fef2f2); }
+
+/* Body */
+.card__body {
+  flex: 1;
+  padding: var(--Size-3, 12px);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.card__category {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.card__name {
+  margin: 0;
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1a2033);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card__price {
+  margin: 4px 0 0;
+  font-size: var(--font-size-m, 14px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.card__price-currency {
+  font-size: var(--font-size-xs, 10px);
+  margin-right: 2px;
+}
+
+.card__supplier {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card__no-stock {
+  margin: 4px 0 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
+}
+
+/* Footer */
+.card__footer {
+  padding: var(--Size-2, 8px) var(--Size-3, 12px) var(--Size-3, 12px);
+}
+
+.card__add-btn {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Size-1, 4px);
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+  border: none;
+  border-radius: var(--Border-2, 8px);
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.card__add-btn:hover:not(:disabled) { background: var(--Primary-Primary-600, #e08526); }
+.card__add-btn:disabled {
+  background: var(--Gray-Gray-200, #c3c9d9);
+  cursor: not-allowed;
+}