@dropi/ui 0.1.27 → 0.1.29

package/dist/collection/components/dropi-button/dropi-button.js

@@ -0,0 +1,323 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-button
+ * Primary action button with multiple types, severities, sizes and states.
+ * Supports pre/post icons and a loading spinner.
+ */
+export class DropiButton {
+    /** Visual color palette */
+    type = 'default';
+    /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */
+    severity = 'primary';
+    /** Button size */
+    size = 'normal';
+    /** Button state */
+    state = 'default';
+    /** Full width button */
+    fullWidth = false;
+    /** Icon name to show before the text */
+    preIcon = '';
+    /** Icon name to show after the text */
+    postIcon = '';
+    /** Custom icon color override */
+    customIconColor = '';
+    /** Button label */
+    text = '';
+    /** Emitted on click (not emitted when disabled or loading) */
+    onClick;
+    colorMap = {
+        default: 'Primary-Primary-',
+        success: 'Success-Success-',
+        error: 'Error-Error-',
+        info: 'Info-Info-',
+        legacy: 'Secondary-Secondary-',
+        warning: 'Warning-Warning-',
+        dropdown: 'Gray-Gray-',
+        'default-light': 'Gray-Gray-',
+    };
+    get iconSize() {
+        if (this.size === 'large')
+            return '24px';
+        if (this.size === 'small')
+            return '16px';
+        return '18px';
+    }
+    get color() {
+        const intensity = this.state === 'disabled' ? '300' : '500';
+        return (this.colorMap[this.type] ?? 'Primary-Primary-') + intensity;
+    }
+    get fontColor() {
+        if (this.severity === 'tertiary') {
+            return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;
+        }
+        if (this.severity === 'secondary')
+            return this.color;
+        return 'Neutral-White';
+    }
+    handleClick(e) {
+        if (this.state !== 'disabled' && this.state !== 'loading') {
+            this.onClick.emit(e);
+        }
+    }
+    renderLoadingSpinner() {
+        return (h("svg", { class: "spin", width: this.iconSize, height: this.iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z", fill: `var(--${this.fontColor})` })));
+    }
+    render() {
+        const isDisabled = this.state === 'disabled' || this.state === 'loading';
+        const hasText = this.text !== '';
+        const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
+        const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
+        return (h("button", { key: '878f01cf2b73d67ad393c46c47dbf71d4589573b', class: {
+                btn: true,
+                'without-text': !hasText,
+                [this.severity ?? 'primary']: true,
+                [this.type ?? 'default']: true,
+                [this.size ?? 'normal']: true,
+                [this.state ?? 'default']: true,
+                'full-width': this.fullWidth,
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: 'd42a3e52d105b985c9cbc72241e363baaaad25a8', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'e88b6ef2c3cf63aec13f1fa4bfe289333acdd8b9', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '596a8227042757ffe942290a1e776b981bb89136', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'e46a00e52792e690b3b4cb24e6af1b1843f7384f' })));
+    }
+    static get is() { return "dropi-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"default\" | \"default-light\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
+                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual color palette"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "severity": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSeverity",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {
+                        "ButtonSeverity": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
+                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonSeverity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary (filled) | Secondary (outlined) | Tertiary (ghost)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "severity",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize",
+                    "resolved": "\"large\" | \"normal\" | \"small\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
+                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'normal'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonState",
+                    "resolved": "\"default\" | \"disabled\" | \"loading\"",
+                    "references": {
+                        "ButtonState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
+                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "preIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name to show before the text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pre-icon",
+                "defaultValue": "''"
+            },
+            "postIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name to show after the text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "post-icon",
+                "defaultValue": "''"
+            },
+            "customIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon color override"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-icon-color",
+                "defaultValue": "''"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onClick",
+                "name": "onClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on click (not emitted when disabled or loading)"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,92 @@
+: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);
+}

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

@@ -0,0 +1,222 @@
+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 — 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 */
+    onChange;
+    get isChecked() {
+        return this.state === 'checked';
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.state = this.isChecked ? 'default' : 'checked';
+        this.onChange.emit(this.isChecked);
+    }
+    render() {
+        return (h("div", { key: '238a146e7500efbc01d83a8494ee577fbb600729', 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: '405d834de33790be58fba7e50b0e579889f04394', checked: this.isChecked, disabled: this.disabled }), h("div", { key: '49659771de9ca8ee8c2fa9fbe828a1d94fbd3c9e', class: "container-text" }, h("div", { key: '7d39435ef56cd61605e9d9b69d6917e3ec8470fa', class: "title-check" }, this.title), this.description && h("div", { key: '00a7723401979d7a9d926ce939eb09430ddb7372', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '4d1c9e49f6e397f0433827960167ff88bcd669db', class: "extra-info" }, this.extraInfo && h("div", { key: 'b9da8514c2013cd6cab9cf6005dad8d3ae30b930' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'ac2fcbc6359ea173911f181b2a145de59af10c9d' }, 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 \u2014 matches Angular: 'default' | 'with card'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'checked' | 'default'",
+                    "resolved": "\"checked\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is checked \u2014 matches Angular 'state'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'checked'"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main title \u2014 matches Angular 'title'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "'Tittle'"
+            },
+            "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": "onChange",
+                "name": "onChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the new checked state when clicked"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}