@riverty/web-components 5.7.0 → 6.0.0

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

@@ -22,6 +22,10 @@ export class InputDate {
         this.validityState = '';
         /** Validity message passed from validateFormElement function after validation */
         this.validityMessage = '';
+        /** Defines if the component has been touched by user */
+        this.touched = false;
+        /** Defines if the value has been changed by user interaction */
+        this.dirty = false;
         /**
          * Initial attributes state
          * */
@@ -112,6 +116,7 @@ export class InputDate {
             if (this.readonly)
                 return;
             if (event.code === 'Enter') {
+                this.touched = true;
                 this.validateFormElement(this.nativeElement);
                 if (this.invalid && !this.isNoValidate)
                     return;
@@ -162,6 +167,8 @@ export class InputDate {
             if (this.readonly)
                 return;
             this.value = event.clipboardData.getData('text');
+            this.touched = true;
+            this.dirty = true;
             event.preventDefault();
         };
         this.createInputHandler = (input, index) => {
@@ -179,7 +186,10 @@ export class InputDate {
                 index < this.inputOrder.length - 1) {
                 (_c = this.inputs[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
             }
+            this.touched = true;
+            this.dirty = true;
             this.rInput.emit({ element: this.host, value: this.value });
+            this.validateFormElement(this.nativeElement);
         };
         this.createChangeHandler = (input) => {
             return (e) => this.handleChange(input, e);
@@ -192,29 +202,64 @@ export class InputDate {
             event.target.value = value;
             this.setDateComponent(input, value);
             this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
+            this.touched = true;
+            this.dirty = true;
             this.rChange.emit({ element: this.host, value: this.value });
             this.validateFormElement(this.nativeElement);
         };
+        this.handleBlur = () => {
+            this.touched = true;
+            this.validateFormElement(this.nativeElement);
+        };
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
             if (this.required && element.value.length === 0) {
-                this.validityState = 'valueMissing';
-                this.validityMessage = this.valueMissingMessage;
-                return;
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage;
+                return { validityState, validityMessage };
             }
-            const valid = dayjs(this.value, this.format, true).isValid();
+            const valid = this.value ? dayjs(this.value, this.format, true).isValid() : true;
             if (!valid) {
-                this.validityState = 'invalid';
-                this.validityMessage = this.invalidDateMessage;
-                return;
+                validityState = 'invalid';
+                validityMessage = this.invalidDateMessage;
+                return { validityState, validityMessage };
+            }
+            // Check min/max constraints only if date is valid and has a value
+            // Note: min and max are expected to be in the same format as this.format
+            // If format changes, the developer should update min/max accordingly
+            if (this.value && valid) {
+                const currentDate = dayjs(this.value, this.format, true);
+                // Check minimum date constraint
+                if (this.min) {
+                    const minDate = dayjs(this.min, this.format, true);
+                    if (minDate.isValid() && currentDate.isBefore(minDate, 'day')) {
+                        validityState = 'rangeUnderflow';
+                        validityMessage = this.rangeUnderflowMessage;
+                        return { validityState, validityMessage };
+                    }
+                }
+                // Check maximum date constraint
+                if (this.max) {
+                    const maxDate = dayjs(this.max, this.format, true);
+                    if (maxDate.isValid() && currentDate.isAfter(maxDate, 'day')) {
+                        validityState = 'rangeOverflow';
+                        validityMessage = this.rangeOverflowMessage;
+                        return { validityState, validityMessage };
+                    }
+                }
             }
-            this.validityState = 'valid';
+            validityState = 'valid';
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element) => {
             if (element === null)
                 return;
             if (this.isNoValidate)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -263,6 +308,8 @@ export class InputDate {
     }
     handleValueChange() {
         this.setCurrentValues();
+        if (this.touched)
+            this.validateFormElement(this.nativeElement);
     }
     /** Get the date value */
     async getValue() {
@@ -270,6 +317,7 @@ export class InputDate {
     }
     /** Sets the date value */
     async setValue(value) {
+        this.nativeElement.value = value;
         this.value = value;
     }
     /** Gets the current date format */
@@ -280,6 +328,19 @@ export class InputDate {
     async setFormat(format) {
         this.format = format;
     }
+    /** Gets the touched state (whether user has interacted with the input) */
+    async isTouched() {
+        return this.touched;
+    }
+    /** Gets the dirty state (whether value has been changed by user) */
+    async isDirty() {
+        return this.dirty;
+    }
+    /** Resets touched and dirty states to pristine (untouched/clean) */
+    async markAsPristine() {
+        this.touched = false;
+        this.dirty = false;
+    }
     /**
      * Resets the component by clearing all input values and focusing the first input.
      * @returns Promise that resolves when reset is complete
@@ -287,6 +348,7 @@ export class InputDate {
     async reset() {
         if (this.readonly)
             return;
+        this.markAsPristine();
         this.validityState = null;
         this.validityMessage = null;
         this.value = this.initial['value'];
@@ -294,6 +356,14 @@ export class InputDate {
         this.format = this.initial['format'];
         this.valid = !this.invalid;
     }
+    /**
+     * Validates the input date without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input date is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
     get inputs() {
         return Array.from(this.host.shadowRoot.querySelectorAll('input[data-date-type]'));
     }
@@ -363,7 +433,7 @@ export class InputDate {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid, readonly } = this;
+        const { form, name, required, disabled, label, fieldIndicator, hint, uniqueId, invalid, valid, readonly } = this;
         const groupAttrs = {
             'aria-invalid': `${invalid || false}`,
             'aria-describedby': this.ariaDescribedBy
@@ -377,24 +447,18 @@ export class InputDate {
             readonly,
             'aria-describedby': this.ariaDescribedBy
         };
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip ? {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor,
-        } : {};
         const labelAttr = label ? {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '8a1395ebe9606836eeca8c63958dd2c904901cc5', onClick: this.onHostClick }, h("fieldset", Object.assign({ key: '67eda3917e37c76e22dba41a3f168f25542b3e74', class: "r-input-date" }, groupAttrs), h("div", { key: '2e1c2fc3ff538cbaeb79cea6728a0fc01a3cfafe', class: "r-input-date--legend-container" }, h("legend", { key: '0f41209fd3934af15d17a60c366ae95cb7b0ffab', class: "r-input-date--legend" }, h("label", { key: '406ee340682dc64d75aacfe33456ed3d819b1a7d', htmlFor: uniqueId }, label ?
-            h("r-label", Object.assign({}, labelAttr, tooltipAttrs), label)
+        return (h(Host, { key: '1a8a9175148f43758ec6b9d905c4bd2f619ffd7f', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: 'fb004332d8578b8da74df643bd93f93d062973bb', class: "r-input-date" }, groupAttrs), h("div", { key: '128e65638dc21d95c8b4b92669b0bd6733a653f6', class: "r-input-date--legend-container" }, h("legend", { key: '63e7e858c38930fecbe71d819f1a0b49bf711911', class: "r-input-date--legend" }, h("label", { key: 'ccd6a5434f5df91bf9b2c121bb182c152302d864', htmlFor: uniqueId }, label ?
+            h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" }))), h("slot", { key: '825c6e93994dd54738f3168e782066787c48af5c', name: "popover" })), hint &&
-            h("r-hint", { key: '9cee9fa8904d8fc1a1968c4a2a12caed9a708cfb', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '60db93b0f58918d1ab087455fc495b093175dca4', class: "r-input-date--container" }, h("r-icon", { key: '74a495cb61d248a3d10422c6e28bde310684a7e9', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '59d28137260f613ef9f404821e6dc2b6624fb455', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
-            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: '9723d0a2417bf427a5a1ff4690f8745cc40899a0', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '65997938c00455e81becba759dc3fdadeeecc1e4', class: "r-input-date--trailing" }, this.readonly &&
-            h("r-icon", { key: '750df4d848ef7d0e7a6b9a7b7853a3389da44232', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
-            h("r-icon", { key: 'b24b8ea8a53b423c0060ac6a34d75ea7ad192b94', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: '147d79539620af0051addf49d7e237c2a3428ff4', name: "trailing" }))), h("div", { key: 'e6b2bccd8d97560940805a08f420f5fc9b165649', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: 'd4807c998838bf7a6c748a4555901e66f2ef92d0', variant: "error" }, this.message)))));
+                h("slot", { name: "label" }))), h("slot", { key: '4be5c643d1b0532d27f4b82692cb6ca937291d6b', name: "popover" })), hint &&
+            h("r-hint", { key: '07a912c146dff97ef991a6e375f4aeb8cd0ba45e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '386dfb87cface9333c93d5fe8165cbe52a9a83c4', class: "r-input-date--container" }, h("r-icon", { key: '9ff075723ac54f6d7c2325ba59f833422404bee6', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: 'ebcb76a92ab1591c3128a60d6620bea5b0c517ec', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
+            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'e5736ffa215662436c539332be1414cc409ce448', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '45ccffbb4111f2fd906d9b687f62f4adc83b62aa', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: '3a5433e3d601a83154687bdd55feeeef0ef04215', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: '03de3e49b8b51690e4fb6c2edbb7a53ca1a71f76', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: 'db4911a4421b296effdd37ca08c96d8a0096e5e6', name: "trailing" }))), h("div", { key: 'd21f19188462be93812487702eb8a07fd3a91cea', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '6937f2d48a634308c97d33e59daa0a7242bd39fd', variant: "error" }, this.message)))));
     }
     static get is() { return "r-input-date"; }
     static get encapsulation() { return "shadow"; }
@@ -545,69 +609,6 @@ export class InputDate {
                 "setter": false,
                 "reflect": false
             },
-            "tooltip": {
-                "type": "string",
-                "attribute": "tooltip",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nLabel tooltip text"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIcon": {
-                "type": "string",
-                "attribute": "tooltip-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nTooltip trigger icon by name from [Riverty icons set](https://storybook.riverty.design/?path=/story/components-icon--riverty-kit)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIconColor": {
-                "type": "string",
-                "attribute": "tooltip-icon-color",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "hint": {
                 "type": "string",
                 "attribute": "hint",
@@ -858,6 +859,82 @@ export class InputDate {
                 "setter": false,
                 "reflect": false
             },
+            "min": {
+                "type": "string",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum date value (in the same format as the date input).\nNote: When changing the `format` prop, ensure `min` is also updated to match the new format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "max": {
+                "type": "string",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum date value (in the same format as the date input).\nNote: When changing the `format` prop, ensure `max` is also updated to match the new format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "rangeUnderflowMessage": {
+                "type": "string",
+                "attribute": "range-underflow-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom error message displayed when date is before the minimum date."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rangeOverflowMessage": {
+                "type": "string",
+                "attribute": "range-overflow-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom error message displayed when date is after the maximum date."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "customErrorMessage": {
                 "type": "string",
                 "attribute": "custom-error-message",
@@ -884,7 +961,9 @@ export class InputDate {
             "currentValues": {},
             "delimiter": {},
             "validityState": {},
-            "validityMessage": {}
+            "validityMessage": {},
+            "touched": {},
+            "dirty": {}
         };
     }
     static get events() {
@@ -1043,6 +1122,57 @@ export class InputDate {
                     "tags": []
                 }
             },
+            "isTouched": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Gets the touched state (whether user has interacted with the input)",
+                    "tags": []
+                }
+            },
+            "isDirty": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Gets the dirty state (whether value has been changed by user)",
+                    "tags": []
+                }
+            },
+            "markAsPristine": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets touched and dirty states to pristine (untouched/clean)",
+                    "tags": []
+                }
+            },
             "reset": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -1062,6 +1192,26 @@ export class InputDate {
                             "text": "Promise that resolves when reset is complete"
                         }]
                 }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the input date without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the input date is valid."
+                        }]
+                }
             }
         };
     }

package/dist/collection/components/input-password/exports.js

@@ -0,0 +1 @@
+export {};

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

@@ -2,6 +2,7 @@
   display: inline-flex;
   flex-direction: column;
   vertical-align: top;
+  --r-input--validation-icon--display: none;
 }
 
 :host([full-width]:not([full-width=false])) {