@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,178 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-card-section
- * Section card with title, description and a switch or dropdown control.
- */
-export class DropiCardSection {
-    /** 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 */
-    onChange;
-    /** Emitted when dropdown icon is clicked */
-    onClick;
-    render() {
-        return (h("div", { key: 'f0afbda9991af5b381a65dd5e620ca3d8e50791f', class: "card-section" }, h("div", { key: 'bb0a62ec9840a762ea3be5c342adbc431f26ba7e', 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: 'd8ae14dfb52783a44c1f9edac1c9c388422f58e7', class: "card-section__desc" }, this.description)), h("div", { key: '927e20c496006fa26fcbc533faa3b55b890008dd', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
-                this.isChecked = e.detail;
-                this.onChange.emit(e.detail);
-            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
-    }
-    static get is() { return "dropi-card-section"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-card-section.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-card-section.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "title": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Section title \u2014 matches Angular 'title'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "title",
-                "defaultValue": "'title'"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Section description"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description",
-                "defaultValue": "'Description'"
-            },
-            "typeElement": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'dropdown' | 'switch'",
-                    "resolved": "\"dropdown\" | \"switch\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Control type on the right"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type-element",
-                "defaultValue": "'dropdown'"
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'medium' | 'important'",
-                    "resolved": "\"important\" | \"medium\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Title size variant"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'important'"
-            },
-            "isChecked": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Switch checked state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-checked",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "onChange",
-                "name": "onChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when switch changes"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
-                "method": "onClick",
-                "name": "onClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when dropdown icon is clicked"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-}

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

@@ -1,148 +0,0 @@
-: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 Orientation */
-.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;
-}
-
-/* Responsive fixes */
-@media (max-width: 768px) {
-  .dropi-carousel-container {
-    padding: 0;
-  }
-  .dropi-carousel-item {
-    padding: 0 0.25rem;
-  }
-}

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

@@ -1,374 +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() {
-        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}`, loading: "lazy" })) : (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": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show navigation arrows"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-navigators",
-                "defaultValue": "true"
-            },
-            "showIndicators": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "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": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "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"
-            }];
-    }
-}