@dropi/ui 0.1.20 → 0.1.21

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

@@ -17,8 +17,8 @@ import { h } from "@stencil/core";
 export class DropiInput {
     internals;
     // ── Identification ──────────────────────────────────────────
-    /** Input id. Defaults to label value. */
-    inputId = '';
+    /** Input id. Defaults to label label. */
+    id = '';
     /** Name attribute for native form submission */
     name = '';
     // ── Content ─────────────────────────────────────────────────
@@ -29,31 +29,31 @@ export class DropiInput {
     /** Current value (controlled) */
     value = '';
     /** Max character length */
-    maxlength;
+    maxLength;
     // ── Behavior ────────────────────────────────────────────────
     /** Disable the input */
     disabled = false;
-    /** Mark as required (shows asterisk when showAsterisk is true) */
+    /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */
     required = false;
     /** Show the required asterisk on the label */
-    showAsterisk = true;
+    showObligatoryAsterisk = true;
     /** Show label above the input (fixed), instead of floating inside */
     fixedLabel = false;
     /** Keyboard input mode hint */
     inputMode = 'text';
     // ── Input type modifiers ────────────────────────────────────
     /** Show password visibility toggle (renders as password field) */
-    passwordInput = false;
+    isPasswordInput = false;
     /** Apply thousand separator formatting (e.g. 1,000,000) */
-    moneyFormat = false;
+    isMoneyInput = false;
     /** Apply thousand separator without currency symbol */
-    thousandSeparator = false;
+    isThousandSeparator = false;
     /** Only allow numeric characters */
-    onlyNumbers = false;
-    /** Allow decimal point when onlyNumbers is true */
+    isNumericInput = false;
+    /** Allow decimal point when isNumericInput is true */
     allowDecimals = false;
     /** Only allow letter characters */
-    onlyLetters = false;
+    isLettersOnly = false;
     // ── Icon ────────────────────────────────────────────────────
     /** Icon name shown inside the input (only visible when value is not empty) */
     icon = '';
@@ -61,23 +61,69 @@ export class DropiInput {
     iconColor = 'Gray-Gray-400';
     // ── Validation ──────────────────────────────────────────────
     /** Mark the field as invalid (consumer-controlled) */
-    invalid = false;
+    hasError = false;
     /** Helper / error text shown below the field */
-    helperText = '';
-    /** Only show helperText when the field is invalid */
+    textHelper = '';
+    /** Only show textHelper when the field is invalid */
     showHelperOnlyOnError = false;
+    // ── Angular-parity ──────────────────────────────────────────
+    /**
+     * Convenience object prop — matches Angular `inputProperties: InputProperties`.
+     * Fields: id, label, placeholder, maxLength, textHelper, isPasswordInput,
+     * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
+     * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
+     * isLettersOnly, inputMode.
+     * Note: `formControl` is not supported; use `value` + onInput event instead.
+     */
+    inputProperties = null;
     // ── Internal state ──────────────────────────────────────────
     showPassword = false;
     touched = false;
     // ── Events ──────────────────────────────────────────────────
     /** Emitted on every keystroke with the current value */
-    dropiInput;
+    onInput;
     /** Emitted on blur with the final value */
-    dropiChange;
+    onChange;
     /** Emitted on focus */
-    dropiFocus;
+    onFocus;
     /** Emitted on blur */
-    dropiBlur;
+    onBlur;
+    inputPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.id !== undefined)
+            this.id = val.id;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.maxLength !== undefined)
+            this.maxLength = val.maxLength;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.isPasswordInput !== undefined)
+            this.isPasswordInput = val.isPasswordInput;
+        if (val.icon !== undefined)
+            this.icon = val.icon;
+        if (val.iconColor !== undefined)
+            this.iconColor = val.iconColor;
+        if (val.isMoneyInput !== undefined)
+            this.isMoneyInput = val.isMoneyInput;
+        if (val.showObligatoryAsterisk !== undefined)
+            this.showObligatoryAsterisk = val.showObligatoryAsterisk;
+        if (val.isNumericInput !== undefined)
+            this.isNumericInput = val.isNumericInput;
+        if (val.allowDecimals !== undefined)
+            this.allowDecimals = val.allowDecimals;
+        if (val.isThousandSeparator !== undefined)
+            this.isThousandSeparator = val.isThousandSeparator;
+        if (val.showHelperOnlyOnError !== undefined)
+            this.showHelperOnlyOnError = val.showHelperOnlyOnError;
+        if (val.isLettersOnly !== undefined)
+            this.isLettersOnly = val.isLettersOnly;
+        if (val.inputMode !== undefined)
+            this.inputMode = val.inputMode;
+    }
     valueChanged(val) {
         this.internals.setFormValue(val);
     }
@@ -86,35 +132,37 @@ export class DropiInput {
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value ?? '');
+        if (this.inputProperties)
+            this.inputPropertiesChanged(this.inputProperties);
     }
     // ── Handlers ────────────────────────────────────────────────
     handleInput(e) {
         let val = e.target.value;
-        if (this.onlyNumbers)
+        if (this.isNumericInput)
             val = this.filterNumbers(val);
-        if (this.onlyLetters)
+        if (this.isLettersOnly)
             val = this.filterLetters(val);
-        if (this.moneyFormat || this.thousandSeparator)
-            val = this.formatThousands(val, this.moneyFormat);
+        if (this.isMoneyInput || this.isThousandSeparator)
+            val = this.formatThousands(val, this.isMoneyInput);
         this.value = val;
         this.internals.setFormValue(val);
-        this.dropiInput.emit(val);
+        this.onInput.emit(val);
     }
     handleKeyDown(e) {
-        if ((this.onlyNumbers || this.moneyFormat || this.thousandSeparator) && !this.isAllowedNumberKey(e)) {
+        if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
             e.preventDefault();
         }
-        if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
+        if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {
             e.preventDefault();
         }
     }
     handleFocus() {
-        this.dropiFocus.emit();
+        this.onFocus.emit();
     }
     handleBlur() {
         this.touched = true;
-        this.dropiChange.emit(this.value);
-        this.dropiBlur.emit();
+        this.onChange.emit(this.value);
+        this.onBlur.emit();
     }
     togglePassword() {
         if (this.disabled)
@@ -158,38 +206,38 @@ export class DropiInput {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.inputId || this.label;
+        return this.id || this.label;
     }
     get inputType() {
-        if (this.passwordInput)
+        if (this.isPasswordInput)
             return this.showPassword ? 'text' : 'password';
         return 'text';
     }
     get showHelper() {
-        if (!this.helperText)
+        if (!this.textHelper)
             return false;
         if (this.showHelperOnlyOnError)
-            return this.invalid && this.touched;
+            return this.hasError && this.touched;
         return true;
     }
     get isInvalid() {
-        return this.invalid && this.touched;
+        return this.hasError && this.touched;
     }
     // ── Render ───────────────────────────────────────────────────
     render() {
-        const showAsterisk = this.required && this.showAsterisk && !this.disabled;
+        const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '49a1b6d02f59e1c67a70a219a7f7d0fbbd2a460d', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '326d90a0361fe5ab90adee1479439aab34c99951', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: 'cf5677966af627addc69a2735803845b54f41a9f', class: "asterisk" }, " *"))), h("div", { key: '1f7b7c614dc424ad4b1aa1819d05573fd08b30a1', class: "form-group" }, h("div", { key: 'c2f88e7f7f2f0da585e8ac20c6373b451290dfdd', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: 'c6f7cc14c56452768e4e49092a2be7968951255b', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: '5ddbd5e176b61dc46d817fa6a32d3d3c0e2cc589', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '51a17c36e9ed49fef0d2f0ea97d4aca10e4722d6', id: this.resolvedId, class: {
+        return (h("div", { key: '2156d42c9c108aabf2089c0c786c1fb520457c05', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '6ccd102fe2873bb2c338a0e5e63b3622a2be1812', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'd7057cd87b711e9b158ac847b5e85cb5058736a8', class: "asterisk" }, " *"))), h("div", { key: 'b91973d056acf1c25bd220868a12d9d3afdba86f', class: "form-group" }, h("div", { key: '5cb70a37814949372eeab77746bf609a6500cf0b', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '2bad8e8a23875531285d0321f4c629671b13dd84', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.isPasswordInput && (h("dropi-icon", { key: 'e330216b12fdf771e891a207f60ffea359d81702', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '17a548015deebd47d2f3e5751edbc596161fa836', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
-                'text-password': this.passwordInput && !this.showPassword,
+                'text-password': this.isPasswordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '9fa96019e84dd543e3e74a15e8f0681ea7bb7823', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '740936c43be963fc7383e3ae6eb21c9d02ffde03', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '9381fc81799162f20df8d2df914adc4ebee5e8ed', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'fea3d178b9b00f87d2a266cb665fca2774ec963a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '390caaa2dfdfb673b8d1fdd8fada2d7c2f6ba764', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8dcc33eecd0b36188977c0f9139044f7d343c1c9', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '8944ef639c328e0745b820b83fcf5c4772cae226', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '7087f38a3bf05fa0514a4edbd8c6e1c6ae7ffcc6', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '2c91fc6773478a592aa4940c7251f15d3026d07c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '6ec4185eac0b8ea1fdfd810e366cec4616880eed', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
-            } }, this.helperText)))))));
+            } }, this.textHelper)))))));
     }
     static get is() { return "dropi-input"; }
     static get encapsulation() { return "shadow"; }
@@ -206,9 +254,9 @@ export class DropiInput {
     }
     static get properties() {
         return {
-            "inputId": {
+            "id": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -218,12 +266,12 @@ export class DropiInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Input id. Defaults to label value."
+                    "text": "Input id. Defaults to label label."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "input-id",
+                "attribute": "id",
                 "defaultValue": "''"
             },
             "name": {
@@ -248,7 +296,7 @@ export class DropiInput {
             },
             "label": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -268,7 +316,7 @@ export class DropiInput {
             },
             "placeholder": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -306,9 +354,9 @@ export class DropiInput {
                 "attribute": "value",
                 "defaultValue": "''"
             },
-            "maxlength": {
+            "maxLength": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -323,7 +371,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "maxlength"
+                "attribute": "max-length"
             },
             "disabled": {
                 "type": "boolean",
@@ -357,7 +405,7 @@ export class DropiInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Mark as required (shows asterisk when showAsterisk is true)"
+                    "text": "Mark as required (shows asterisk when showObligatoryAsterisk is true)"
                 },
                 "getter": false,
                 "setter": false,
@@ -365,9 +413,9 @@ export class DropiInput {
                 "attribute": "required",
                 "defaultValue": "false"
             },
-            "showAsterisk": {
+            "showObligatoryAsterisk": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -382,7 +430,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-asterisk",
+                "attribute": "show-obligatory-asterisk",
                 "defaultValue": "true"
             },
             "fixedLabel": {
@@ -407,7 +455,7 @@ export class DropiInput {
             },
             "inputMode": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "InputMode",
                     "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
@@ -431,9 +479,9 @@ export class DropiInput {
                 "attribute": "input-mode",
                 "defaultValue": "'text'"
             },
-            "passwordInput": {
+            "isPasswordInput": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -448,12 +496,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "password-input",
+                "attribute": "is-password-input",
                 "defaultValue": "false"
             },
-            "moneyFormat": {
+            "isMoneyInput": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -468,12 +516,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "money-format",
+                "attribute": "is-money-input",
                 "defaultValue": "false"
             },
-            "thousandSeparator": {
+            "isThousandSeparator": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -488,12 +536,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "thousand-separator",
+                "attribute": "is-thousand-separator",
                 "defaultValue": "false"
             },
-            "onlyNumbers": {
+            "isNumericInput": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -508,12 +556,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "only-numbers",
+                "attribute": "is-numeric-input",
                 "defaultValue": "false"
             },
             "allowDecimals": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -523,7 +571,7 @@ export class DropiInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Allow decimal point when onlyNumbers is true"
+                    "text": "Allow decimal point when isNumericInput is true"
                 },
                 "getter": false,
                 "setter": false,
@@ -531,9 +579,9 @@ export class DropiInput {
                 "attribute": "allow-decimals",
                 "defaultValue": "false"
             },
-            "onlyLetters": {
+            "isLettersOnly": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -548,12 +596,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "only-letters",
+                "attribute": "is-letters-only",
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -573,7 +621,7 @@ export class DropiInput {
             },
             "iconColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -591,9 +639,9 @@ export class DropiInput {
                 "attribute": "icon-color",
                 "defaultValue": "'Gray-Gray-400'"
             },
-            "invalid": {
+            "hasError": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -608,12 +656,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid",
+                "attribute": "has-error",
                 "defaultValue": "false"
             },
-            "helperText": {
+            "textHelper": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -628,12 +676,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "helper-text",
+                "attribute": "text-helper",
                 "defaultValue": "''"
             },
             "showHelperOnlyOnError": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -643,13 +691,33 @@ export class DropiInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Only show helperText when the field is invalid"
+                    "text": "Only show textHelper when the field is invalid"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-helper-only-on-error",
                 "defaultValue": "false"
+            },
+            "inputProperties": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Convenience object prop \u2014 matches Angular `inputProperties: InputProperties`.\nFields: id, label, placeholder, maxLength, textHelper, isPasswordInput,\nicon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\nallowDecimals, isThousandSeparator, showHelperOnlyOnError,\nisLettersOnly, inputMode.\nNote: `formControl` is not supported; use `value` + onInput event instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-properties",
+                "defaultValue": "null"
             }
         };
     }
@@ -661,8 +729,8 @@ export class DropiInput {
     }
     static get events() {
         return [{
-                "method": "dropiInput",
-                "name": "dropiInput",
+                "method": "onInput",
+                "name": "onInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -676,8 +744,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -691,8 +759,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiFocus",
-                "name": "dropiFocus",
+                "method": "onFocus",
+                "name": "onFocus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -706,8 +774,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiBlur",
-                "name": "dropiBlur",
+                "method": "onBlur",
+                "name": "onBlur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -724,6 +792,9 @@ export class DropiInput {
     }
     static get watchers() {
         return [{
+                "propName": "inputProperties",
+                "methodName": "inputPropertiesChanged"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }, {

package/dist/collection/components/dropi-languages-selector/dropi-languages-selector.css

@@ -23,7 +23,7 @@
   gap: var(--Size-2, 8px);
   border-radius: 4px;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   font-size: var(--font-size-s, 12px);
   color: var(--Gray-Gray-600, #475066);
 }

package/dist/collection/components/dropi-languages-selector/dropi-languages-selector.js

@@ -13,7 +13,7 @@ export class DropiLanguagesSelector {
     languages = [];
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang = null;
-    dropiLanguageChange;
+    languageChange;
     isOpen = false;
     parsedLanguages = [];
     currentLang = null;
@@ -36,7 +36,7 @@ export class DropiLanguagesSelector {
     select(lang) {
         this.currentLang = lang;
         this.isOpen = false;
-        this.dropiLanguageChange.emit(lang);
+        this.languageChange.emit(lang);
     }
     render() {
         if (!this.currentLang)
@@ -120,8 +120,8 @@ export class DropiLanguagesSelector {
     }
     static get events() {
         return [{
-                "method": "dropiLanguageChange",
-                "name": "dropiLanguageChange",
+                "method": "languageChange",
+                "name": "languageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -15,7 +15,7 @@ export class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '416498bbb93314e2a69a3fdba9def0f8fb4d940a', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '137ae999c9db95e87d8ee76a46b328c34f97f58e', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: '3e333d272f1f7ee4af549167e5e4f7a713aaa508', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'e3f29c17b649b76da50b769fd88f5de9a86515e3', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
     }
     static get is() { return "dropi-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-lottie-loader/dropi-lottie-loader.css

@@ -23,8 +23,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 200px;
-  height: 200px;
+  width: 300px;
+  height: 300px;
+}
+
+.lottie-animation lottie-player {
+  display: block;
+  width: 300px !important;
+  height: 300px !important;
 }
 
 .loader-text {