@dropi/ui 0.1.22 → 0.1.23

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

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

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

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

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