@dropi/ui 0.1.43 → 0.1.44

package/dist/cjs/dropi-button.cjs.entry.js

@@ -8,7 +8,15 @@ const DropiButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dropiClick = index.createEvent(this, "dropiClick");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
     /** Visual color palette */
     type = 'default';
     /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */
@@ -27,6 +35,8 @@ const DropiButton = class {
     customIconColor = '';
     /** Button label */
     text = '';
+    /** Native HTML button type (submit, reset, button) */
+    nativeType = 'button';
     /** Emitted on click (not emitted when disabled or loading) */
     dropiClick;
     colorMap = {
@@ -61,6 +71,12 @@ const DropiButton = class {
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
             this.dropiClick.emit(e);
+            if (this.nativeType === 'submit') {
+                this.internals.form?.requestSubmit();
+            }
+            else if (this.nativeType === 'reset') {
+                this.internals.form?.reset();
+            }
         }
     }
     renderLoadingSpinner() {
@@ -71,7 +87,7 @@ const DropiButton = class {
         const hasText = (this.text ?? '') !== '';
         const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';
         const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');
-        return (index.h("button", { key: 'eefda6c7ac5090173a545d67e72073dc410ff05c', class: {
+        return (index.h("button", { key: '21d2654de08dff8db6c2b1ba87594e1184a7aa35', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity ?? 'primary']: true,
@@ -79,8 +95,9 @@ const DropiButton = class {
                 [this.size ?? 'normal']: true,
                 [this.state ?? 'default']: true,
                 'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (index.h("dropi-icon", { key: '869ee8fc34dee93de0381a86db643c0fa9dc6918', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && index.h("span", { key: '927ef142b4c549d01b087722e9f6759cff44e6b2', class: "text" }, this.text), showPostIcon && (index.h("dropi-icon", { key: 'cda1f5d0fa59a87abc1d3d73a87d4390f05f79eb', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), index.h("slot", { key: 'c83dd79efe5d858361815878192c0c554a9234ca' })));
+            }, type: this.nativeType, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (index.h("dropi-icon", { key: '6c6c01c923a37df20b614602b18cd2da949bcb91', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && index.h("span", { key: '82447aab8b87bc4a89105cd0209e6c5681222f28', class: "text" }, this.text), showPostIcon && (index.h("dropi-icon", { key: '6bdefe7c1c819b213d24e0100c2303fb7840ea00', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), index.h("slot", { key: '44483caf52d2ca617ad86c1574a54709f8e77ab5' })));
     }
+    static get formAssociated() { return true; }
 };
 DropiButton.style = dropiButtonCss();
 

package/dist/cjs/dropi-checkbox.cjs.entry.js

@@ -8,13 +8,29 @@ const DropiCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dropiChange = index.createEvent(this, "dropiChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
     disabled = false;
     /** Emitted when the checked state changes */
     dropiChange;
+    checkedChanged(val) {
+        this.internals.setFormValue(val ? 'on' : null);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.checked ? 'on' : null);
+    }
     changeState() {
         if (this.disabled)
             return;
@@ -22,14 +38,19 @@ const DropiCheckbox = class {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (index.h("div", { key: '071505574decbf6b138256f73affe101c01080ef', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '03e7ec24a87e22c4a5fe1d94cc4ca1fe349d6e6f', class: {
+        return (index.h("div", { key: '27fec5f03a48c19652c8ae01173dcbb6e3514693', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '243d07e4444c0dc149ff137258f9ddd58428c438', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, index.h("svg", { key: 'c56f01268919995cc7aac0173edf44a01a62e13e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '575f863c9e82e862ea7049bf633b0d86ba374bb2', 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" })))));
+            } }, index.h("svg", { key: '7a1fd9c7b3fa575ec263fe5ad48fbc0294a79980', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: 'e77e5cd40c71e542a045934641509e41a7cd4899', 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 formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "checkedChanged": 0
+            }]
+    }; }
 };
 DropiCheckbox.style = dropiCheckboxCss();
 

package/dist/cjs/dropi-country-selector.cjs.entry.js

@@ -128,7 +128,17 @@ const DropiCountrySelector = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dropiChange = index.createEvent(this, "dropiChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Label above the select */
     label = '';
     /** Placeholder when nothing is selected */
@@ -173,6 +183,7 @@ const DropiCountrySelector = class {
     searchInputRef;
     currentSelectionChanged(val) {
         this.selected = COUNTRIES.find(c => c.code === val) || null;
+        this.internals.setFormValue(val);
     }
     selectPropertiesChanged(val) {
         if (!val)
@@ -193,6 +204,7 @@ const DropiCountrySelector = class {
             this.selectPropertiesChanged(this.selectProperties);
         if (this.currentSelection)
             this.currentSelectionChanged(this.currentSelection);
+        this.internals.setFormValue(this.currentSelection ?? '');
     }
     componentDidLoad() {
         if (this.appendTo !== 'body')
@@ -265,12 +277,13 @@ const DropiCountrySelector = class {
         this.dropiChange.emit(country);
     }
     render() {
-        return (index.h("div", { key: '1a510a9b0aad889618ab94b7b54670fab1e56729', class: "custom-select" }, this.label && (index.h("label", { key: '3e86a64a1b3fe27708bc3a605d5de0dc0ef926ca' }, this.label, this.showObligatory && index.h("span", { key: 'af72e01e496a42d59d48d2c3c5eaba04a73e708c', class: "required" }, "*"))), index.h("button", { key: 'cbd2aa745610bffb96b507527c4fe88fd80cbbd1', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
+        return (index.h("div", { key: '98292dbf6f84139b409cefe4690fb5ce834372c7', class: "custom-select" }, this.label && (index.h("label", { key: '7dd60d54e701108f7061623a89e8ff29edbb8dc6' }, this.label, this.showObligatory && index.h("span", { key: '971fd2a900d9ef4740a96145cadc948aab95232a', class: "required" }, "*"))), index.h("button", { key: '6c0067cfaf920160a4f8c05f59c34f3539540d29', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, index.h("div", { key: 'b50e848e8689d2e1aacfef0213b25d9cc85782c0', class: "selected-content" }, this.selected ? (index.h("span", { class: "selected-option" }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (index.h("span", { class: "placeholder-text" }, this.placeholder))), index.h("dropi-icon", { key: '324a2e95d8fbb6ee25c434912e6b84005af3d4fe', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), index.h("ul", { key: 'f93d34cb715ea78dcb12242148cdb8dc143fbdbf', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, index.h("li", { key: '7100ecf3ca9ddfebbc7f5461614d3ae5e714f9a7', class: "search-li" }, index.h("div", { key: 'ca31fe6fa95231b0ac75e08bf96a97f28bc3f947', class: "search-field" }, index.h("input", { key: '6d07a808c8982991934351b2f9d9b96ef136b4b3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), index.h("span", { key: '77c15e6a1d92bbfa570eca92f862a6a29f167c67', class: "search-icon" }, index.h("dropi-icon", { key: '8a49100954c335d09fbe418836c76037abd00e60', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (index.h("li", { key: country.code }, index.h("button", { class: "option", type: "button", onClick: () => this.select(country) }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (index.h("div", { key: '52089f00fe6c8ecc115a35068365f62a7328ecbe', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && index.h("dropi-icon", { key: '5272c813693f350a195990ae946ac50387b09723', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: '7d74cd023b30b08753ea841ef1a1592497be9884' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, index.h("div", { key: 'b28c2c5b0de9b8052bb920a272b9dcc51f4eac6f', class: "selected-content" }, this.selected ? (index.h("span", { class: "selected-option" }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (index.h("span", { class: "placeholder-text" }, this.placeholder))), index.h("dropi-icon", { key: '2ec568b0ad4efdb3a22ffceb1e85fbc6f1d483e8', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), index.h("ul", { key: '34f0e5772ebb21e85cb246cbb91196d128d9ca59', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, index.h("li", { key: '77cdf81222a7c593f1d54198e2b897468db890a5', class: "search-li" }, index.h("div", { key: '970723feefd04adf0b113ae63931092f58d0264a', class: "search-field" }, index.h("input", { key: '294868580087dc1bdb04258ad84672f3d10e7ba7', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), index.h("span", { key: '02781dc595e568865ab5ae14aeed326b71b36e10', class: "search-icon" }, index.h("dropi-icon", { key: '0c06d5e5f26d2a2e5ec20967a2ebb9430397f3ea', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (index.h("li", { key: country.code }, index.h("button", { class: "option", type: "button", onClick: () => this.select(country) }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (index.h("div", { key: 'aae58bc17bbb6953a676818fe02da94b5a4e9f73', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && index.h("dropi-icon", { key: '7542ef4620499957711079c587f6cb650096f6d3', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: 'ea4c5cedd3b87444a90b4e210f7afa3a318a4832' }, this.textHelper)))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "currentSelection": [{
                 "currentSelectionChanged": 0

package/dist/cjs/dropi-date-picker.cjs.entry.js

@@ -15,13 +15,26 @@ const DropiDatePicker = class {
         this.dropiChangeDate = index.createEvent(this, "dropiChangeDate");
         this.dropiClosePanel = index.createEvent(this, "dropiClosePanel");
         this.dropiRangeChange = index.createEvent(this, "dropiRangeChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
     /** Range start date (ISO string, range mode) */
     startDate = '';
     /** Range end date (ISO string, range mode) */
     endDate = '';
+    valueChanged() {
+        this.updateFormValue();
+    }
     /** Enable range selection - matches Angular selectionMode */
     selectionMode = 'single';
     /** Min selectable date (ISO string) */
@@ -54,6 +67,17 @@ const DropiDatePicker = class {
     dropiClosePanel;
     /** Emitted when range selected */
     dropiRangeChange;
+    componentWillLoad() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.selectionMode === 'range') {
+            this.internals.setFormValue(this.startDate && this.endDate ? `${this.startDate},${this.endDate}` : '');
+        }
+        else {
+            this.internals.setFormValue(this.selectedDate || '');
+        }
+    }
     get displayValue() {
         if (this.selectionMode === 'range') {
             if (this.startDate && this.endDate)
@@ -173,12 +197,12 @@ const DropiDatePicker = class {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (index.h("div", { key: '0c3cb89d77d6d8e7d3f955354d6be4b7a1f507fb', class: "dp-wrap" }, this.label && index.h("label", { key: '672ad3d08337ed0df7c7e7d582ba8fe5af8d2b23', class: "dp-label" }, this.label), index.h("button", { key: '848428a5ce236b37e8e988223c9ef8bd91ea16b3', class: {
+        return (index.h("div", { key: '97a96b56b0e8ae551f747bad4a3459a1f4945411', class: "dp-wrap" }, this.label && index.h("label", { key: 'a1792032ab9ae2dbe574f50b7a537df687eae40c', class: "dp-label" }, this.label), index.h("button", { key: '4237c2b988f1e9fbaa77dc2a989964216e3fe902', class: {
                 'dp-trigger': true,
                 'dp-trigger--disabled': this.disabled,
                 'dp-trigger--invalid': this.isInvalid,
                 'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, index.h("dropi-icon", { key: 'c51b9238996ec454f64f53d4e9ede35bf494fd95', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("span", { key: 'b34ed963710695296a2986b0e790457b90a3ee60', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), index.h("dropi-icon", { key: '8cbefce39dab39a5cba941f4538f46cf97db1c06', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (index.h("div", { key: '36a5db42655b136cee1abf31bb5e206a6d118beb', class: "dp-popup" }, index.h("div", { key: '456c2778f035fae19450841baa20df5092f6dca4', class: "dp-nav" }, index.h("button", { key: '8f05a6aa4e1f4e0dda08ee9dad89f189c130eef0', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, index.h("dropi-icon", { key: '41f4e9b157e56669fa179cfed62d960ff1eadfd6', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), index.h("span", { key: '53556f3a356e1d2b63b59d4edda40ddf5fda9e5f', class: "dp-nav__title" }, index.h("span", { key: '4bad1d735d4235b2ddaac33f3fa8f6335e753984' }, MONTHS_ES[this.viewMonth]), index.h("span", { key: 'c7af6bb7edc5dead7751c65ee024485aa2a6cf65' }, this.viewYear)), index.h("button", { key: '5ff7b70b69732c01ae7a45c7b65336982ea6eed8', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, index.h("dropi-icon", { key: '718725e17a530de4e8081c97e639342ff7fd9a96', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), index.h("div", { key: 'd3d899342a15a9a0f2b508dbd39945831ebbad0d', class: "dp-grid" }, DAYS_ES.map(d => (index.h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, index.h("dropi-icon", { key: '39591fedb92b92e6507b564fc8c145711f1a21b1', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("span", { key: '305e3f81d64c01603687d53edc59e1d19ef06c3c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), index.h("dropi-icon", { key: '13feb346ad7b07a7e2f208e299f62a8261a97655', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (index.h("div", { key: '4cdf8a69422a0b54d0f7c1a6711a683dab7d1f34', class: "dp-popup" }, index.h("div", { key: '0c6fb31094003c66c5b471e738dd75e7b865401f', class: "dp-nav" }, index.h("button", { key: '4fa24f9450cf6c5e888cea374619e14245c0c005', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, index.h("dropi-icon", { key: '2196f85700b252d4f83536f11ed197c083fc45ec', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), index.h("span", { key: '01619de7c5218b506f75234745f3184af813a491', class: "dp-nav__title" }, index.h("span", { key: '8074e7deeb6c102bad7f1911739e785187783a7c' }, MONTHS_ES[this.viewMonth]), index.h("span", { key: '69e9c3b41361e293a843f911b5bcf4690995d2b4' }, this.viewYear)), index.h("button", { key: '51c0ad3da96835736170fbf94338fd70c942c3d2', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, index.h("dropi-icon", { key: '24eb4385639c9a71f5312f32b33b36593c2b0259', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), index.h("div", { key: 'c18cecd81af38b3a6f23402501011c09b8b453d7', class: "dp-grid" }, DAYS_ES.map(d => (index.h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
             const isSelected = this.selectionMode !== 'range'
                 ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
@@ -200,12 +224,12 @@ const DropiDatePicker = class {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), index.h("div", { key: '84c799762393b9de0161795f20188a680490d4d8', class: "dp-footer" }, index.h("button", { key: '4696558b1be6bf8abe8461f341c129c640af46ce', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), index.h("div", { key: '594f280cb269c32ac3a129401e13b710af1a7c7e', class: "dp-footer" }, index.h("button", { key: '6028ef84bc17f0d1bb0fd587a991698a8fc69338', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), index.h("button", { key: 'a87f6f92fa10829560d223835e70fd2951edc482', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), index.h("button", { key: 'ab01840a18d657621205d4fba69cc53feb474d11', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
@@ -217,6 +241,18 @@ const DropiDatePicker = class {
                 }
             } }, "Hoy"))))));
     }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "selectedDate": [{
+                "valueChanged": 0
+            }],
+        "startDate": [{
+                "valueChanged": 0
+            }],
+        "endDate": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
 DropiDatePicker.style = dropiDatePickerCss();
 

package/dist/cjs/dropi-input_3.cjs.entry.js

@@ -155,6 +155,7 @@ const DropiInput = class {
         this.value = val;
         this.internals.setFormValue(val);
         this.dropiInput.emit(val);
+        this.dropiChange.emit(val);
     }
     handleKeyDown(e) {
         if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
@@ -169,7 +170,6 @@ const DropiInput = class {
     }
     handleBlur() {
         this.touched = true;
-        this.dropiChange.emit(this.value);
         this.dropiBlur.emit();
     }
     togglePassword() {
@@ -235,14 +235,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (index.h("div", { key: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && index.h("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), index.h("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, index.h("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (index.h("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (index.h("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', id: this.resolvedId, class: {
+        return (index.h("div", { key: '6af757e1d86bfe96d471e9cbed258a50727ae190', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: 'e88bf81fd2b79933e386c2e5fa38f57d85cfe836', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && index.h("span", { key: 'be8ec1b0d3ef624ca22e58ae072917ad2ecc79fb', class: "asterisk" }, " *"))), index.h("div", { key: '4806c0d250f00bb08788d9d6aa935ca15f2aa826', class: "form-group" }, index.h("div", { key: 'b9fa243d299bcd165458947d6695fcc845764276', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (index.h("dropi-icon", { key: '92b3cf11803745784f13e908ea88992f76c74473', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (index.h("dropi-icon", { key: 'c7dc725d577a6d4afb7f87c8b53b16c621de9e86', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: '8146ae1794cbe1f200bb681358c7319f10faab3c', 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 && (index.h("label", { key: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && index.h("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && index.h("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', 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 && (index.h("label", { key: '005d15af6b50b2cb2d47ac8381a722794eb273e5', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && index.h("span", { key: 'ad56df877cff3df8a801cdfcb607d9af02f7465a', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: '76e858c13a798f69b2d20ee9908f17531568dad1', class: "form-control-helper" }, this.isInvalid && index.h("dropi-icon", { key: '3e42ffb4db7444ebfb49cc9c6720d5a9d02b2860', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: '5e970903eb51ca6b72a43bef0edf6ef149443247', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));

package/dist/cjs/dropi-otp-send-code.cjs.entry.js

@@ -11,7 +11,17 @@ const DropiOtpSendCode = class {
         this.codeCompleted = index.createEvent(this, "codeCompleted");
         this.codeAccepted = index.createEvent(this, "codeAccepted");
         this.dropiResend = index.createEvent(this, "dropiResend");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Delivery method label */
     engine = 'email';
     /** Contact info (email/phone to show in label) */
@@ -43,6 +53,7 @@ const DropiOtpSendCode = class {
     componentWillLoad() {
         this.digits = Array(this.digitsCount).fill('');
         this.digitStates = Array(this.digitsCount).fill('idle');
+        this.internals.setFormValue('');
     }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
@@ -70,9 +81,13 @@ const DropiOtpSendCode = class {
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
+            this.internals.setFormValue(finalCode);
             this.codeCompleted.emit(finalCode);
             this.codeAccepted.emit(finalCode);
         }
+        else {
+            this.internals.setFormValue(newDigits.join(''));
+        }
     }
     handleKeyDown(e, index) {
         if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
@@ -89,21 +104,26 @@ const DropiOtpSendCode = class {
         this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
+            this.internals.setFormValue(finalCode);
             this.codeCompleted.emit(finalCode);
             this.codeAccepted.emit(finalCode);
         }
+        else {
+            this.internals.setFormValue(newDigits.join(''));
+        }
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (index.h("div", { key: 'c9c6c3387cec2371049c547d87742563268bf28d', class: "otp" }, this.showLabelContact && (index.h("p", { key: 'c3f36c62d7502eff8f86ef8202c3dfc65d846ba1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: '25c05d8f0773bf6f2af83f6154ac76638499e4d7' }, " ", this.labelContact))), index.h("div", { key: '3ca2687723735b3eb6ada997f622a4a50c2d7ee9', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (index.h("input", { key: i, ref: (el) => {
+        return (index.h("div", { key: 'ee2e6766c4b220a1a12b8734747138cf2351a0d8', class: "otp" }, this.showLabelContact && (index.h("p", { key: '87f34e3b13c0e16e584cc03ea8c5a35e462784b1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: '6c9d0c73340ff8dab1730b5d6c9cc0431f3ff21c' }, " ", this.labelContact))), index.h("div", { key: 'd82904db02da1da5f863bb86cef65b0da166ff0c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (index.h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (index.h("p", { key: 'ddcdd5dacc533b73e6353c2670f762168c2803d3', class: "otp__error" }, this.errorMessage)), index.h("div", { key: 'a21650c43d7a62f9e187bd9f4eb307d275ff37be', class: "otp__resend" }, this.canResend ? (index.h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (index.h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (index.h("p", { key: '7629619d5b2c4e8f38e2c2bc93ab134242b8e079', class: "otp__error" }, this.errorMessage)), index.h("div", { key: 'ea5472d4c55f1cdc30304e9e9bcaacf303ba4501', class: "otp__resend" }, this.canResend ? (index.h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (index.h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "digitsCount": [{
                 "handleDigitsCountChange": 0

package/dist/cjs/dropi-phone-input.cjs.entry.js

@@ -105,8 +105,18 @@ const DropiPhoneInput = class {
         this.dropiPhoneChange = index.createEvent(this, "dropiPhoneChange");
         this.dropiVerify = index.createEvent(this, "dropiVerify");
         this.dropiChangeSelect = index.createEvent(this, "dropiChangeSelect");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
     get el() { return index.getElement(this); }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
     codArea = '57';
     /** Phone number value — matches Angular 'ngModelPhone' */
@@ -141,6 +151,10 @@ const DropiPhoneInput = class {
     dropiChangeSelect;
     codAreaChanged() {
         this.ngModelPhone = '';
+        this.updateFormValue();
+    }
+    ngModelPhoneChanged() {
+        this.updateFormValue();
     }
     selectedOptionChanged(val) {
         if (!val)
@@ -152,6 +166,11 @@ const DropiPhoneInput = class {
     componentWillLoad() {
         if (this.selectedOption)
             this.selectedOptionChanged(this.selectedOption);
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        const fullValue = this.ngModelPhone ? `+${this.codArea}${this.ngModelPhone}` : '';
+        this.internals.setFormValue(fullValue);
     }
     get selectedCountry() {
         const cleanCodArea = (this.codArea ?? '57').replace('+', '');
@@ -178,15 +197,19 @@ const DropiPhoneInput = class {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (index.h("div", { key: 'a377fcfcfdb239d79f319f0e058f5d54cbcfac02', class: "phone-wrap" }, index.h("div", { key: '83719d2b76b491f1f7a9f3e202eb61c61abb2c31', class: "phone-input-container" }, index.h("div", { key: 'c92ff5d9f260b80ad4e7b8f7e290b7b4e1f595f0', class: "custom-select" }, index.h("button", { key: '35c56642c1828d86b7f211face2845dc79878fd4', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (index.h("div", { key: '1634a703f734cd5db7b5d7acf83f403ea07962a3', class: "phone-wrap" }, index.h("div", { key: 'a9ed4a17b4a01893fc22d051241dcd494fa2e66d', class: "phone-input-container" }, index.h("div", { key: '6a50121fbb8939eac54035a314c340137aae63d5', class: "custom-select" }, index.h("button", { key: '0157b468dab13e23f83b9528ec235bc61be91733', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, index.h("span", { key: 'e39cdac451df1c9a47c6552e7f133cb7662cae7f', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("img", { key: '620c8efc2695ee26fed0c2bcd7f6132af05cdbed', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), index.h("dropi-icon", { key: 'cf57cc1ef06e12b0112fdbbb063fb8f045c17e39', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), index.h("ul", { key: '1009d2e4212267bbfaf4aa26c0c2152606a8d092', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (index.h("li", null, index.h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, index.h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), index.h("input", { key: '87be58fc820c63741b076b04d807b7410e292344', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, index.h("span", { key: 'b174ec714c415964d09f4661f58a1a62e8c80653', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("img", { key: 'f4c62db877a54bd395b756926918b8ff16511a2a', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), index.h("dropi-icon", { key: '809f64bed4cccd911110c9e8e52752554b0d8a86', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), index.h("ul", { key: 'b4dea28807780b086ba15161cee3e417efb2f2a1', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (index.h("li", null, index.h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, index.h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), index.h("input", { key: '4e1113fedf25b9c91d2aff815d6c862a7d47d072', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "codArea": [{
                 "codAreaChanged": 0
             }],
+        "ngModelPhone": [{
+                "ngModelPhoneChanged": 0
+            }],
         "selectedOption": [{
                 "selectedOptionChanged": 0
             }]

package/dist/cjs/dropi-radio-button.cjs.entry.js

@@ -8,7 +8,15 @@ const DropiRadioButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dropiChange = index.createEvent(this, "dropiChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
     /** Label text displayed next to the radio */
     label = '';
     /** Input name (for grouping radio buttons) */
@@ -28,17 +36,26 @@ const DropiRadioButton = class {
         if (val)
             this.checked = false;
     }
+    checkedChanged(val) {
+        this.internals.setFormValue(val ? 'on' : null);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.checked ? 'on' : null);
+    }
     handleChange(e) {
         this.checked = e.target.checked;
         this.dropiChange.emit(e);
     }
     render() {
-        return (index.h("div", { key: '9f4c4f3be63c0aa0bcd1c48dacb97cec903db98d', class: "dropi-radio-button" }, index.h("label", { key: 'c29bd1ccc6c468b57fdcb4dd6c15cf541255cb71', htmlFor: this.id }, index.h("input", { key: '19533ffd5e5eb1b43d7e0f42971aa81652c8c926', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (index.h("div", { key: 'e4b54d9bda299b9150ebf9791925e0e7c3b9fb38', class: "dropi-radio-button" }, index.h("label", { key: '0a4c6443668477a2cb6b2d5a3d8bc1744a0fcffd', htmlFor: this.id }, index.h("input", { key: '6ba6b5af4bc061664dee0b6554c769613080dbb8', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "resetTrigger": [{
                 "onResetTrigger": 0
+            }],
+        "checked": [{
+                "checkedChanged": 0
             }]
     }; }
 };

package/dist/cjs/dropi-select.cjs.entry.js

@@ -387,7 +387,7 @@ const DropiSelect = class {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (index.h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (index.h("div", { key: '4f34c329d9993926758230f0e9ca0f8d0e57ef6e', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: '743013592658ee415d4a9e3db8ec648472a3428e', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: '56183248733eb18956664c859c8f7d4057f3fa11', class: "asterisk" }, " *"))), index.h("div", { key: 'c93f45456478ac5419d542512092e877a04f28b7', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: '0632779b9ba71f1fb91944b54b477999f607a3f5', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (index.h("div", { key: '3e57fc2b53715abb9800db573119cf77b0333d37', class: "select-helper" }, index.h("span", { key: 'baf3d1f0ae4d535acae2a08df8d2079996afdcff' }, this.textHelper))), this.hasError && this.errorText && (index.h("div", { key: '8b25aae92b9370a02fcfd81f50b98df145d3cb0e', class: "select-helper-error" }, index.h("dropi-icon", { key: '60643f0b7e54f8533dc9fd7dd17715aec59d851c', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: '35bcdfd3c9825cbac269b1085d4c552df694f33a' }, this.errorText))), this.renderDropdown()));
+        return (index.h("div", { key: 'f09113a288d45bb5519503bb78c41e236913c1eb', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: 'c0b59763dc3529d7f9bb5597a2bea0d38070a07b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: '6c8a47bdfc216231ba72420298b3bc8deeeae435', class: "asterisk" }, " *"))), index.h("div", { key: '8ec45010af1252effe34bb69d3f40ea277459511', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: 'b3f7f9adacd57b091baac662fc7be6fcd847c3a4', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (index.h("div", { key: 'a4cce833b50b2bc62cb7142da420f81c0647e97e', class: "select-helper" }, index.h("span", { key: 'f69375abc2f66b5b1278895b8f313adabfa0f938' }, this.textHelper))), this.hasError && this.errorText && (index.h("div", { key: '6681bdbb705633d393adab09a889f3f1fb6fbe8a', class: "select-helper-error" }, index.h("dropi-icon", { key: '09521eeef2cf2a58cb74bea5bfae8a6d58d17682', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: '807820bb0a474079627bf12c20f4a034896785cd' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/dropi-switch.cjs.entry.js

@@ -8,22 +8,43 @@ const DropiSwitch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dropiChange = index.createEvent(this, "dropiChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Whether the switch is on */
     isChecked = false;
     /** Whether the switch is disabled */
     disabled = false;
     /** Emitted when the toggle state changes */
     dropiChange;
+    checkedChanged(val) {
+        this.internals.setFormValue(val ? 'on' : null);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.isChecked ? 'on' : null);
+    }
     onToggleChange(event) {
         const input = event.target;
         this.isChecked = input.checked;
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (index.h("label", { key: '977f209e9d6411bf386637c1073dca0f5d1c72f3', class: "toggle-switch" }, index.h("input", { key: '8deef7c0c079d8d5662bd05372eb74d5cc68429f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), index.h("span", { key: '2f6dd3b87996271d0c6abddc86697791de4da9b1', class: "slider" })));
+        return (index.h("label", { key: 'b3321fd96a1487210a920f5494708dc2eb05f10c', class: "toggle-switch" }, index.h("input", { key: 'ee7cfecf443a1c839ce145ade18cc3ff15924816', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), index.h("span", { key: 'c0800bd9a7f52cf666b3e475265da223b852be9a', class: "slider" })));
     }
     static get formAssociated() { return true; }
+    static get watchers() { return {
+        "isChecked": [{
+                "checkedChanged": 0
+            }]
+    }; }
 };
 DropiSwitch.style = dropiSwitchCss();
 

package/dist/cjs/dropi-text-area.cjs.entry.js

@@ -94,10 +94,10 @@ const DropiTextArea = class {
         this.value = val;
         this.internals.setFormValue(val);
         this.dropiInput.emit(val);
+        this.dropiChange.emit(val);
     }
     handleBlur() {
         this.touched = true;
-        this.dropiChange.emit(this.value);
         this.dropiBlur.emit();
     }
     get resolvedId() {
@@ -112,12 +112,12 @@ const DropiTextArea = class {
     render() {
         const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showHelper = this.textHelper || this.isInvalid;
-        return (index.h("div", { key: 'cd317dd0e813d6ce6ae659b56ddac00fa822e68e', class: "textarea-wrapper" }, this.label && (index.h("label", { key: '220344751b55843a6d1ee3a8188b53e8d0fc5d34', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && index.h("span", { key: '3ddb9f3adac61fa8990f81e16ae6334de8552849', class: "asterisk" }, " *"))), index.h("div", { key: '1a6d603bd7cfe7e6b37fd20c4dad6c7bc2bf0278', class: "textarea-container" }, index.h("textarea", { key: '3eb838fece4e03cc68be9e01eeb1e02709a926f9', id: this.resolvedId, class: {
+        return (index.h("div", { key: '8c25826a54d1f0bec06d8f70211d2bcd873d59a6', class: "textarea-wrapper" }, this.label && (index.h("label", { key: '58a578753a1248b185d2763aedf50eaaa152c791', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && index.h("span", { key: 'cf31923103a7594f552df4ec86885f78d0c31779', class: "asterisk" }, " *"))), index.h("div", { key: '6ea60b6286fd4438389cfda0580379d8fe013adc', class: "textarea-container" }, index.h("textarea", { key: 'fc5e495d80bfd665e55480668b9fa7ed62651984', id: this.resolvedId, class: {
                 'form-control': true,
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (index.h("div", { key: '49dfd2cb7fe373769a945c405e58e7716e9489f2', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (index.h("div", { key: 'e1388e815c35baab42466029ae17914da28c9294', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: '39aebce7cca327e9c535ce918d053eb5f106f734', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), index.h("span", { key: 'ae255ca0db1e35e0069ef8b68fa901bced14ba8a', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (index.h("div", { key: '07c350ce7a2e56b466229450645e6faece3d284b', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (index.h("div", { key: 'c9fbd9a21b7e26fbd9571fc524b6f706404145d3', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: '8fc6e34849f9e3175097597280a3bea9defb6bb0', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), index.h("span", { key: '68bf62627efb3de92afe54f7803e322f5a0462e4', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {