@dropi/ui 0.1.26 → 0.1.28

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

@@ -0,0 +1,379 @@
+import { h } from "@stencil/core";
+export class DropiCarousel {
+    el;
+    /** 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;
+    pageChange;
+    onPage;
+    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.pageChange.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.pageChange.emit(this.internalPage);
+            setTimeout(() => (this.isAnimating = false), 500);
+        }
+    };
+    onDotClick(index) {
+        this.isAnimating = true;
+        this.internalPage = index;
+        this.page = this.internalPage;
+        this.updateTransform();
+        this.pageChange.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 is() { return "dropi-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items to display (Array of URLs or objects)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "[]"
+            },
+            "page": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active page index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page",
+                "defaultValue": "0"
+            },
+            "numVisible": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items visible per page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "num-visible",
+                "defaultValue": "1"
+            },
+            "numScroll": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items to scroll per click"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "num-scroll",
+                "defaultValue": "1"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of the carousel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "showNavigators": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show navigation arrows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-navigators",
+                "defaultValue": "true"
+            },
+            "showIndicators": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show dot indicators"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-indicators",
+                "defaultValue": "true"
+            },
+            "autoplayInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autoplay interval in ms (0 = disabled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay-interval",
+                "defaultValue": "0"
+            },
+            "circular": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Infinite scrolling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "circular",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedValue": {},
+            "internalPage": {},
+            "isAnimating": {},
+            "totalPages": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pageChange",
+                "name": "pageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "onPage",
+                "name": "onPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValue"
+            }, {
+                "propName": "page",
+                "methodName": "handlePage"
+            }];
+    }
+}

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

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

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

@@ -0,0 +1,103 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-checkbox
+ * A styled checkbox that emits change events.
+ * Supports form association via native `<input type="checkbox">` internals.
+ */
+export class DropiCheckbox {
+    /** Whether the checkbox is checked */
+    checked = false;
+    /** Whether the checkbox is disabled */
+    disabled = false;
+    /** Emitted when the checked state changes */
+    onChange;
+    changeState() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.onChange.emit(this.checked);
+    }
+    render() {
+        return (h("div", { key: 'fdc1c54733617c0dab1ae11050d90650dc3eba91', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '6329c1a53e8b9f85ea26ca01afb920583570e85f', class: {
+                check: true,
+                isCheck: this.checked,
+                noCheck: !this.checked,
+                disabled: this.disabled,
+            } }, h("svg", { key: '50b1ebd160e1ee6b28ef23651f1e12afc9406f8a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '518070eaa2902d4cdc5e905f8a80d06b3d044f3d', 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 is() { return "dropi-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onChange",
+                "name": "onChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.css

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