@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-banner-external/dropi-banner-external.js

@@ -19,27 +19,43 @@ export class DropiBannerExternal {
     alt = '';
     /** Background color behind the image */
     backgroundColor = 'transparent';
+    /** Slug name (matches Angular `slugName`) */
+    slugName = '';
+    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
+    viewOnWhiteBrand = false;
+    /** Countries list to show (matches Angular `viewOnlyCountries`) */
+    viewOnlyCountries = [];
     closed = false;
+    el;
+    componentWillLoad() {
+        if (!this.imageUrl) {
+            this.imageUrl =
+                this.el.getAttribute('imageUrl') ||
+                    this.el.getAttribute('image-url') ||
+                    this.el.getAttribute('imageurl') ||
+                    '';
+        }
+    }
     /** Emitted when the banner is clicked (only when no link is set) */
-    dropiBannerClick;
-    /** Emitted when the close button is clicked */
-    dropiBannerClose;
+    bannerClick;
+    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
+    isVisible;
     handleClick(e) {
         if (!this.link) {
             e.preventDefault();
-            this.dropiBannerClick.emit();
+            this.bannerClick.emit();
         }
     }
     closeBanner(e) {
         e.preventDefault();
         e.stopPropagation();
         this.closed = true;
-        this.dropiBannerClose.emit();
+        this.isVisible.emit(false);
     }
     render() {
         if (this.closed || !this.imageUrl)
             return null;
-        const inner = (h("div", { class: "inner" }, h("img", { src: this.imageUrl, alt: this.alt, loading: "lazy" }), h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
+        const inner = (h("div", { class: "inner" }, h("img", { src: this.imageUrl, alt: this.alt }), h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
         return (h("div", { class: "dropi-banner-external", style: { background: this.backgroundColor } }, this.link ? (h("a", { href: this.link, target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.handleClick(e) }, inner)) : (h("div", { class: "click-wrapper", onClick: (e) => this.handleClick(e) }, inner))));
     }
     static get is() { return "dropi-banner-external"; }
@@ -135,6 +151,64 @@ export class DropiBannerExternal {
                 "reflect": false,
                 "attribute": "background-color",
                 "defaultValue": "'transparent'"
+            },
+            "slugName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slug name (matches Angular `slugName`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slug-name",
+                "defaultValue": "''"
+            },
+            "viewOnWhiteBrand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show on white brand (matches Angular `viewOnWhiteBrand`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "view-on-white-brand",
+                "defaultValue": "false"
+            },
+            "viewOnlyCountries": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Countries list to show (matches Angular `viewOnlyCountries`)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -145,8 +219,8 @@ export class DropiBannerExternal {
     }
     static get events() {
         return [{
-                "method": "dropiBannerClick",
-                "name": "dropiBannerClick",
+                "method": "bannerClick",
+                "name": "bannerClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -160,20 +234,21 @@ export class DropiBannerExternal {
                     "references": {}
                 }
             }, {
-                "method": "dropiBannerClose",
-                "name": "dropiBannerClose",
+                "method": "isVisible",
+                "name": "isVisible",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the close button is clicked"
+                    "text": "Emitted with false when the close button is clicked (matches Angular `isVisible`)"
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -32,7 +32,7 @@ export class DropiBreadcrumb {
     }
     render() {
         const items = this.parsedItems;
-        return (h("nav", { key: '03396956a168feaa860265e9962d9c5cbca8b23f', class: "breadcrumb", "aria-label": "Breadcrumb" }, h("div", { key: '88e05f4ea225b26a9686bc9f1a01e8e3710806dc', class: "crumb-list" }, h("div", { key: '54e0dfc3bbef05a3041d187cd9ec0536f69c34e3', class: "crumb-home" }, h("a", { key: '31c971efc13b5122ff2775ee2f79b25c06a01b0f', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, h("dropi-icon", { key: '8a436c3d254884e4479713a9c6981929bb91df55', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (h("dropi-icon", { key: 'f57beceaa6dab5ed00a2c1c38ff43ea6bce040f5', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
+        return (h("nav", { key: 'c4546d7a0c7852e01f685176b5365f1e0082ad24', class: "breadcrumb", "aria-label": "Breadcrumb" }, h("div", { key: '924ab634ae4e71f6bd39a67b4b3889cdca20234d', class: "crumb-list" }, h("div", { key: 'e7b1b285bdd497a028a041ada1eb8b34f77384b0', class: "crumb-home" }, h("a", { key: '9e288d5f5761daed20b35dbf056c7de9c2e7b8e3', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, h("dropi-icon", { key: '15210c5feb41fc5a8dd37f52eba1e5a211834f84', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (h("dropi-icon", { key: '5acd21133859ec42b078fd323f82b7bc13c7b359', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
             const isLast = idx === items.length - 1;
             const href = item.url || item.routerLink || '#';
             return (h("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (h("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {

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

@@ -20,7 +20,7 @@
   justify-content: center;
   gap: var(--Size-1, 4px);
   border-radius: var(--Border-2, 8px);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   min-width: 33px;
   line-height: 110%;
   cursor: pointer;
@@ -48,7 +48,7 @@
 /* ── Sizes ─────────────────────────────────────────────────── */
 .btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }
 .btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }
-.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--Size-3, 12px); height: 29px; }
+.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--font-size-s, 12px); height: 29px; }
 
 /* ── Disabled / Loading ─────────────────────────────────────── */
 .btn.disabled,
@@ -60,37 +60,37 @@
 /* ══════════════════════════════════════════════════════════════
    PRIMARY severity
 ═══════════════════════════════════════════════════════════════ */
-.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #fff); }
+.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #ffffff); }
 .btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }
 
-.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #fff); }
+.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #ffffff); }
 .btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }
 
-.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #fff); }
+.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #ffffff); }
 .btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }
 
-.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #fff); }
+.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #ffffff); }
 .btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }
 
-.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #fff); }
+.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #ffffff); }
 .btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }
 
-.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #fff); }
+.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #ffffff); }
 .btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }
 
 /* Disabled primary */
-.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #fff); }
+.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #ffffff); }
 
 /* ══════════════════════════════════════════════════════════════
    SECONDARY severity
 ═══════════════════════════════════════════════════════════════ */
 .btn.secondary {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 1px solid;
 }
 
@@ -150,8 +150,8 @@
 
 .btn.tertiary.dropdown {
   color: var(--Gray-Gray-500, #69738c);
-  font-weight: 400;
-  font-size: 14px;
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
   background: transparent;
 }
 

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

@@ -19,10 +19,12 @@ export class DropiButton {
     preIcon = '';
     /** Icon name to show after the text */
     postIcon = '';
+    /** Custom icon color override */
+    customIconColor = '';
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    dropiClick;
+    onClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -31,6 +33,7 @@ export class DropiButton {
         legacy: 'Secondary-Secondary-',
         warning: 'Warning-Warning-',
         dropdown: 'Gray-Gray-',
+        'default-light': 'Gray-Gray-',
     };
     get iconSize() {
         if (this.size === 'large')
@@ -53,7 +56,7 @@ export class DropiButton {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.dropiClick.emit(e);
+            this.onClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -64,14 +67,15 @@ export class DropiButton {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: 'e924f56cb86a87ee8a314cfc5c278042a4d0a87d', class: {
+        return (h("button", { key: 'd21aeb2274c317795bb0daad6d30c2bc9f3ede9f', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '6d42026da19f7bf2fc6186659b8afc48748544f1', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'c71ee430fec84cd24d261dc12973ad0b472cc71c', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'ff3890de446e5b48c88a980f01cce4e7b9764b24', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3ee6aacd17a004664ad4bcf89219a8e2dc865343' })));
+                'full-width': this.fullWidth,
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '6711ece5a9c871db989e6bc4572c0d0ebfa7f899', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '9fc49de08b5672c6e2dae9b3cea9587d451fac0d', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '1ce254e23b16fb7013469fb3e2d71fe70dba5a9d', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '72857295b27aa6ef6981276d68497f33958a584c' })));
     }
     static get is() { return "dropi-button"; }
     static get encapsulation() { return "shadow"; }
@@ -92,7 +96,7 @@ export class DropiButton {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonType",
-                    "resolved": "\"default\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
+                    "resolved": "\"default\" | \"default-light\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
                     "references": {
                         "ButtonType": {
                             "location": "local",
@@ -251,6 +255,26 @@ export class DropiButton {
                 "attribute": "post-icon",
                 "defaultValue": "''"
             },
+            "customIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon color override"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-icon-color",
+                "defaultValue": "''"
+            },
             "text": {
                 "type": "string",
                 "mutable": false,
@@ -275,8 +299,8 @@ export class DropiButton {
     }
     static get events() {
         return [{
-                "method": "dropiClick",
-                "name": "dropiClick",
+                "method": "onClick",
+                "name": "onClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -77,7 +77,9 @@
 
 .extra-info h4 {
   margin: 0;
-  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-semibold);
+  color: inherit;
+  line-height: inherit;
 }
 
 .default-card {

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

@@ -12,12 +12,12 @@ import { h } from "@stencil/core";
  * ></dropi-card-checkbox>
  */
 export class DropiCardCheckbox {
-    /** Visual type: 'default' = no border, 'with-card' = bordered card */
+    /** Visual type — matches Angular: 'default' | 'with card' */
     type = 'default';
-    /** Whether the checkbox is checked */
-    checked = false;
-    /** Main title */
-    cardTitle = '';
+    /** Whether the checkbox is checked — matches Angular 'state' */
+    state = 'checked';
+    /** Main title — matches Angular 'title' */
+    title = 'Tittle';
     /** Optional description below title */
     description = '';
     /** Optional extra info shown on the right */
@@ -27,20 +27,23 @@ export class DropiCardCheckbox {
     /** Disables interaction */
     disabled = false;
     /** Emitted with the new checked state when clicked */
-    dropiChange;
+    onChange;
+    get isChecked() {
+        return this.state === 'checked';
+    }
     handleClick() {
         if (this.disabled)
             return;
-        this.checked = !this.checked;
-        this.dropiChange.emit(this.checked);
+        this.state = this.isChecked ? 'default' : 'checked';
+        this.onChange.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: '9c647faab478d2817593315051b1f02d0334756d', class: {
+        return (h("div", { key: '238a146e7500efbc01d83a8494ee577fbb600729', class: {
                 'container-card-check': true,
                 'default-card': this.type === 'default',
-                'is-checked': this.checked && this.type === 'with-card',
+                'is-checked': this.isChecked && this.type === 'with card',
                 'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '31db5cd31da290692d6aa77e0129b7e4361c23aa', checked: this.checked, disabled: this.disabled }), h("div", { key: '4b5c8eeadd255a79344d634d84e3ff93fafa34b4', class: "container-text" }, h("div", { key: '30a03f764294e0b4ca8a2bf4fd1badc08d0dc7e9', class: "title-check" }, this.cardTitle), this.description && h("div", { key: '751b4fac066b17c903e56a0aa5ef16b0d4151944', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '6b7eec457d42169ac87d1042b65b1bebdd436a5e', class: "extra-info" }, this.extraInfo && h("div", { key: '07e1cfa079668255343570498e0ad0dc0351effb' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: '3a8277e2749b9cbdaf7d5d11086c7f2ac11dc39c' }, this.extraInfoDescription)))));
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '405d834de33790be58fba7e50b0e579889f04394', checked: this.isChecked, disabled: this.disabled }), h("div", { key: '49659771de9ca8ee8c2fa9fbe828a1d94fbd3c9e', class: "container-text" }, h("div", { key: '7d39435ef56cd61605e9d9b69d6917e3ec8470fa', class: "title-check" }, this.title), this.description && h("div", { key: '00a7723401979d7a9d926ce939eb09430ddb7372', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '4d1c9e49f6e397f0433827960167ff88bcd669db', class: "extra-info" }, this.extraInfo && h("div", { key: 'b9da8514c2013cd6cab9cf6005dad8d3ae30b930' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'ac2fcbc6359ea173911f181b2a145de59af10c9d' }, this.extraInfoDescription)))));
     }
     static get is() { return "dropi-card-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -60,15 +63,15 @@ export class DropiCardCheckbox {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'with-card'",
-                    "resolved": "\"default\" | \"with-card\"",
+                    "original": "'default' | 'with card'",
+                    "resolved": "\"default\" | \"with card\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual type: 'default' = no border, 'with-card' = bordered card"
+                    "text": "Visual type \u2014 matches Angular: 'default' | 'with card'"
                 },
                 "getter": false,
                 "setter": false,
@@ -76,27 +79,27 @@ export class DropiCardCheckbox {
                 "attribute": "type",
                 "defaultValue": "'default'"
             },
-            "checked": {
-                "type": "boolean",
+            "state": {
+                "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'checked' | 'default'",
+                    "resolved": "\"checked\" | \"default\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the checkbox is checked"
+                    "text": "Whether the checkbox is checked \u2014 matches Angular 'state'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
-                "defaultValue": "false"
+                "attribute": "state",
+                "defaultValue": "'checked'"
             },
-            "cardTitle": {
+            "title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -108,13 +111,13 @@ export class DropiCardCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Main title"
+                    "text": "Main title \u2014 matches Angular 'title'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "card-title",
-                "defaultValue": "''"
+                "attribute": "title",
+                "defaultValue": "'Tittle'"
             },
             "description": {
                 "type": "string",
@@ -200,8 +203,8 @@ export class DropiCardCheckbox {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,