@dropi/ui 0.1.19 → 0.1.21

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

@@ -4,27 +4,27 @@ import { h } from "@stencil/core";
  * Section card with title, description and a switch or dropdown control.
  */
 export class DropiCardSection {
-    /** Section title */
-    sectionTitle = '';
+    /** Section title — matches Angular 'title' */
+    title = 'title';
     /** Section description */
-    description = '';
+    description = 'Description';
     /** Control type on the right */
-    typeElement = 'switch';
+    typeElement = 'dropdown';
     /** Title size variant */
-    type = 'medium';
+    type = 'important';
     /** Switch checked state */
     isChecked = false;
-    /** Emitted when switch changes. e.detail = new boolean value */
-    dropiChange;
+    /** Emitted when switch changes */
+    onChange;
     /** Emitted when dropdown icon is clicked */
-    dropiClick;
+    onClick;
     render() {
-        return (h("div", { key: '5820426132998a0fcc95ec9bc5626044809bc8f9', class: "card-section" }, h("div", { key: '56023483c0be283b4e8b71bdb8ab91c3bbe0e518', class: "card-section__text" }, this.type === 'important'
-            ? h("h5", { class: "card-section__title card-section__title--important" }, this.sectionTitle)
-            : h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && h("p", { key: '123f616e6404040a052c8e3313ea74368ef1564e', class: "card-section__desc" }, this.description)), h("div", { key: '70d91f09bfe12b561a0457d6b1c531e04c697119', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+        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.dropiChange.emit(e.detail);
-            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+                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"; }
@@ -40,7 +40,7 @@ export class DropiCardSection {
     }
     static get properties() {
         return {
-            "sectionTitle": {
+            "title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -52,13 +52,13 @@ export class DropiCardSection {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Section title"
+                    "text": "Section title \u2014 matches Angular 'title'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "section-title",
-                "defaultValue": "''"
+                "attribute": "title",
+                "defaultValue": "'title'"
             },
             "description": {
                 "type": "string",
@@ -78,7 +78,7 @@ export class DropiCardSection {
                 "setter": false,
                 "reflect": false,
                 "attribute": "description",
-                "defaultValue": "''"
+                "defaultValue": "'Description'"
             },
             "typeElement": {
                 "type": "string",
@@ -98,7 +98,7 @@ export class DropiCardSection {
                 "setter": false,
                 "reflect": false,
                 "attribute": "type-element",
-                "defaultValue": "'switch'"
+                "defaultValue": "'dropdown'"
             },
             "type": {
                 "type": "string",
@@ -118,7 +118,7 @@ export class DropiCardSection {
                 "setter": false,
                 "reflect": false,
                 "attribute": "type",
-                "defaultValue": "'medium'"
+                "defaultValue": "'important'"
             },
             "isChecked": {
                 "type": "boolean",
@@ -144,14 +144,14 @@ export class DropiCardSection {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when switch changes. e.detail = new boolean value"
+                    "text": "Emitted when switch changes"
                 },
                 "complexType": {
                     "original": "boolean",
@@ -159,8 +159,8 @@ export class DropiCardSection {
                     "references": {}
                 }
             }, {
-                "method": "dropiClick",
-                "name": "dropiClick",
+                "method": "onClick",
+                "name": "onClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

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

@@ -0,0 +1,374 @@
+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"
+            }];
+    }
+}

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

@@ -10,20 +10,20 @@ export class DropiCheckbox {
     /** Whether the checkbox is disabled */
     disabled = false;
     /** Emitted when the checked state changes */
-    dropiChange;
+    onChange;
     changeState() {
         if (this.disabled)
             return;
         this.checked = !this.checked;
-        this.dropiChange.emit(this.checked);
+        this.onChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: '4e56a55cec60e55f61205e370845f734b5baedcc', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: 'dd440f791d8fa5dd3fd7e8a00054c2d0fe337961', class: {
+        return (h("div", { key: '2bf224c57c9b0b48d3d2a28f2cf52713b532110f', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '7dfbc936f1a6e641a3e18c9ffc769e8a25fd9328', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: 'f7470772cd3f47777c0ade490de8772a4e0a2d43', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'ed529e987fe524339bb01ee0e95d838df962d0bc', 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" })))));
+            } }, h("svg", { key: '647d2f6b000569906812f1bddbcc69198a2774cc', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '3bbf796769463ebad1e7710beadc0433816ce189', 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"; }
@@ -84,8 +84,8 @@ export class DropiCheckbox {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,