@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.js

@@ -34,7 +34,8 @@ export class DropiImageOverlay {
             `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
     }
     render() {
-        if (!this.visible)
+        const isVisible = this.visible === true || String(this.visible) === 'true';
+        if (!isVisible)
             return null;
         const imgs = this.parsedImages;
         const multi = imgs.length > 1;
@@ -55,11 +56,11 @@ export class DropiImageOverlay {
     static get properties() {
         return {
             "visible": {
-                "type": "boolean",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,

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

@@ -62,7 +62,7 @@
   padding: var(--Size-2, 8px);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   font-size: var(--font-size-s, 12px);
   font-family: inherit;
   color: var(--Gray-Gray-700, #32394d);

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,14 +29,14 @@ 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 */
@@ -45,15 +45,15 @@ export class DropiInput {
     /** Show password visibility toggle (renders as password field) */
     passwordInput = 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,71 @@ 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, passwordInput,
+     * 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.passwordInput !== undefined)
+            this.passwordInput = val.passwordInput;
+        if (val.isPasswordInput !== undefined)
+            this.passwordInput = val.isPasswordInput; // Fallback
+        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 +134,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,7 +208,7 @@ export class DropiInput {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.inputId || this.label;
+        return this.id || this.label;
     }
     get inputType() {
         if (this.passwordInput)
@@ -166,30 +216,30 @@ export class DropiInput {
         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: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), h("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, h("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && h("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (h("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', 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,
                 '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: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', 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 +256,9 @@ export class DropiInput {
     }
     static get properties() {
         return {
-            "inputId": {
+            "id": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -218,12 +268,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 +298,7 @@ export class DropiInput {
             },
             "label": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -268,7 +318,7 @@ export class DropiInput {
             },
             "placeholder": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -306,9 +356,9 @@ export class DropiInput {
                 "attribute": "value",
                 "defaultValue": "''"
             },
-            "maxlength": {
+            "maxLength": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -323,7 +373,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "maxlength"
+                "attribute": "max-length"
             },
             "disabled": {
                 "type": "boolean",
@@ -357,7 +407,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 +415,9 @@ export class DropiInput {
                 "attribute": "required",
                 "defaultValue": "false"
             },
-            "showAsterisk": {
+            "showObligatoryAsterisk": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -382,7 +432,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-asterisk",
+                "attribute": "show-obligatory-asterisk",
                 "defaultValue": "true"
             },
             "fixedLabel": {
@@ -407,7 +457,7 @@ export class DropiInput {
             },
             "inputMode": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "InputMode",
                     "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
@@ -433,7 +483,7 @@ export class DropiInput {
             },
             "passwordInput": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -451,9 +501,9 @@ export class DropiInput {
                 "attribute": "password-input",
                 "defaultValue": "false"
             },
-            "moneyFormat": {
+            "isMoneyInput": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -468,12 +518,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 +538,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 +558,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 +573,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 +581,9 @@ export class DropiInput {
                 "attribute": "allow-decimals",
                 "defaultValue": "false"
             },
-            "onlyLetters": {
+            "isLettersOnly": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -548,12 +598,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 +623,7 @@ export class DropiInput {
             },
             "iconColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -591,9 +641,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 +658,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 +678,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 +693,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, passwordInput,\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 +731,8 @@ export class DropiInput {
     }
     static get events() {
         return [{
-                "method": "dropiInput",
-                "name": "dropiInput",
+                "method": "onInput",
+                "name": "onInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -676,8 +746,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -691,8 +761,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiFocus",
-                "name": "dropiFocus",
+                "method": "onFocus",
+                "name": "onFocus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -706,8 +776,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiBlur",
-                "name": "dropiBlur",
+                "method": "onBlur",
+                "name": "onBlur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -724,6 +794,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,12 +13,16 @@ export class DropiLanguagesSelector {
     languages = [];
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang = null;
-    dropiLanguageChange;
+    languageChange;
     isOpen = false;
     parsedLanguages = [];
     currentLang = null;
     languagesChanged(val) {
-        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : val;
+        if (val == null) {
+            this.parsedLanguages = [];
+            return;
+        }
+        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
         if (!this.currentLang && this.parsedLanguages.length > 0) {
             this.currentLang = this.parsedLanguages[0];
         }
@@ -36,7 +40,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 +124,8 @@ export class DropiLanguagesSelector {
     }
     static get events() {
         return [{
-                "method": "dropiLanguageChange",
-                "name": "dropiLanguageChange",
+                "method": "languageChange",
+                "name": "languageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,