udp-stencil-component-library 26.3.0-beta.7 → 26.3.0-beta.9

package/dist/cjs/ag-grid-base_63.cjs.entry.js

@@ -3902,7 +3902,11 @@ const UdpDateInput = class {
          * - 'MM/DD/YYYY' - US format
          * - 'DD/MM/YYYY' - UK/Europe/Canada format
          * - 'YYYY/MM/DD' - ISO/China/Japan format
-         * Defaults to browser locale detection if not specified.
+         *
+         * @deprecated Use `dateFormat` instead. `format` collides with the reserved
+         * `format` prop of form libraries (e.g. react-final-form's `<Field>`), which
+         * treats it as a value-formatter function. Retained as an alias; `dateFormat`
+         * takes precedence when both are set.
          */
         this.format = 'MM/DD/YYYY';
         /**
@@ -4040,6 +4044,11 @@ const UdpDateInput = class {
             this.isPopoverOpen = !this.isPopoverOpen;
         };
     }
+    /** Resolved display format. `dateFormat` wins over the deprecated `format`. */
+    get resolvedFormat() {
+        var _a;
+        return (_a = this.dateFormat) !== null && _a !== void 0 ? _a : this.format;
+    }
     onValueChange(newValue) {
         // Sync external prop to internal state, normalizing through parseDateInput
         if (newValue !== this.internalValue) {
@@ -4047,6 +4056,13 @@ const UdpDateInput = class {
             this.displayValue = this.formatDateForDisplay(this.internalValue);
         }
     }
+    onFormatChange() {
+        // The display string is derived from the format. Props are applied
+        // asynchronously (e.g. via the React wrapper), so the format can land after
+        // the value has already been formatted. Re-derive the display from the
+        // canonical internal value whenever the format changes.
+        this.displayValue = this.formatDateForDisplay(this.internalValue);
+    }
     componentWillLoad() {
         // Initialize internal state from value prop, normalizing through parseDateInput
         if (this.value) {
@@ -4087,7 +4103,7 @@ const UdpDateInput = class {
         if (!match)
             return isoDate; // Return as-is if not valid ISO format
         const [, year, month, day] = match;
-        switch (this.format) {
+        switch (this.resolvedFormat) {
             case 'MM/DD/YYYY':
                 return `${month}/${day}/${year}`;
             case 'DD/MM/YYYY':
@@ -4211,12 +4227,12 @@ const UdpDateInput = class {
         // 4. Current year shorthand: exactly 4 digits (e.g., 0113)
         if (/^\d{4}$/.test(cleaned)) {
             let month, day;
-            if (this.format === 'YYYY/MM/DD') {
+            if (this.resolvedFormat === 'YYYY/MM/DD') {
                 // For ISO format, interpret as MMDD
                 month = parseInt(cleaned.substring(0, 2), 10);
                 day = parseInt(cleaned.substring(2, 4), 10);
             }
-            else if (this.format === 'DD/MM/YYYY') {
+            else if (this.resolvedFormat === 'DD/MM/YYYY') {
                 // Day first
                 day = parseInt(cleaned.substring(0, 2), 10);
                 month = parseInt(cleaned.substring(2, 4), 10);
@@ -4235,13 +4251,13 @@ const UdpDateInput = class {
         if (separatorMatch) {
             const [, part1, part2, part3] = separatorMatch.map(Number);
             let year, month, day;
-            if (this.format === 'YYYY/MM/DD' || part1 > 31) {
+            if (this.resolvedFormat === 'YYYY/MM/DD' || part1 > 31) {
                 // Year first or first part is clearly a year
                 year = part1;
                 month = part2;
                 day = part3;
             }
-            else if (this.format === 'DD/MM/YYYY') {
+            else if (this.resolvedFormat === 'DD/MM/YYYY') {
                 day = part1;
                 month = part2;
                 year = part3;
@@ -4270,7 +4286,7 @@ const UdpDateInput = class {
             const [, part1, part2] = twoPartMatch.map(Number);
             const year = today.getFullYear();
             let month, day;
-            if (this.format === 'DD/MM/YYYY' || this.format === 'YYYY/MM/DD') {
+            if (this.resolvedFormat === 'DD/MM/YYYY' || this.resolvedFormat === 'YYYY/MM/DD') {
                 // For DD/MM and YYYY/MM/DD, when only two parts, assume DD/MM
                 day = part1;
                 month = part2;
@@ -4423,14 +4439,14 @@ const UdpDateInput = class {
     render() {
         const hasError = !!this.error || !!this.internalError;
         const message = this.internalError || this.error || this.hint;
-        return (index.h(index.Host, { key: 'ac71c838ad139db1925a16e5b88152f685577682', class: { 'has-error': hasError, 'disabled': this.disabled } }, index.h("fluent-field", { key: 'feefd9316ce2f601d2a7bc8c1e69ca665be98ac3', class: { 'no-message': !message && !this.includeErrorPadding } }, index.h("udp-popover", { key: 'eedbdb5fc16759b9b8649f3c49da0fb01e51112b', slot: "input", open: this.isPopoverOpen, position: "bottom-start", toggleOnTriggerClick: false, onPopoverClose: () => {
+        return (index.h(index.Host, { key: '9a0b36661cc0bc79733f5e5166b0237c74b8055a', class: { 'has-error': hasError, 'disabled': this.disabled } }, index.h("fluent-field", { key: 'fb3070fa56b39354181e4e1df3125a22673e90e4', class: { 'no-message': !message && !this.includeErrorPadding } }, index.h("udp-popover", { key: '671bbd0c71a947b916eb6b4d2c90f632344e6284', slot: "input", open: this.isPopoverOpen, position: "bottom-start", toggleOnTriggerClick: false, onPopoverClose: () => {
                 this.isPopoverOpen = false;
                 // Only return focus to input if Escape was pressed (not on click-away)
                 if (this.restoreFocusOnClose) {
                     this.restoreFocusOnClose = false;
                     requestAnimationFrame(() => this.focusInput());
                 }
-            }, trapFocus: false, closeOnBlur: false }, index.h("fluent-text-input", { key: 'dc575d36fd8139dacf8fc6edef3553295ab50696', slot: "trigger", ref: el => (this.inputRef = el), class: { 'no-label': !this.label }, name: this.name, value: this.displayValue, type: "text", required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onClick: this.handleInputClick, onInvalid: (e) => e.preventDefault() }, index.h("fluent-label", { key: '24fdc128498e713cb71d1b0647c707e70a17d40e', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '2aa80b606bcba533d03cedaabb22472eaab7cece', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: 'd7b49e842930ed6ae31638e9475571b2a9b0b044', name: "info", size: "xs", class: "popup-hint-icon" })))), index.h("div", { key: 'ce0830f9f1fe61b23f4f89363b95f97331c2f2cf', slot: "end" }, index.h("udp-fluent-icon-button", { key: 'e412d65925057b3a4f7ddf2876cdde9ecd799165', appearance: "transparent", iconName: "calendar", onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick, disabled: this.disabled || this.readonly, tabindex: -1 }))), index.h("div", { key: 'aed253ee74b5e0f9d116b43470cc453e05649858', slot: "content" }, index.h("udp-date-range-selector", { key: '245970b9bc37881030d37f1919f942d255b2bd35', ref: el => (this.calendarRef = el), monthsToDisplay: 1, value: this.internalValue, onChange: this.handleDateSelect, minDate: this.minDate, maxDate: this.maxDate, isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, variant: this.dateSelectionType, size: "sm" }), index.h("div", { key: 'a6c1873893025688082cf07430179b9036e937eb', class: "footer-buttons" }, index.h("udp-fluent-button", { key: '3850b26b07974bfb8bdece541d33668817a499b5', appearance: "transparent", size: "small", onClick: this.handleToday }, "Today"), index.h("udp-fluent-button", { key: 'd981881855642d59afd0be88db9ac69c8465bb5e', appearance: "transparent", size: "small", onClick: this.handleClear }, "Clear")))), index.h("udp-text", { key: '0cbae8c3c2784d833bd0245799116a1e7917ee90', slot: "message", variant: "caption1", class: {
+            }, trapFocus: false, closeOnBlur: false }, index.h("fluent-text-input", { key: '2ed5e9fb7e708f42ad4ee35fd51e12fad200b76e', slot: "trigger", ref: el => (this.inputRef = el), class: { 'no-label': !this.label }, name: this.name, value: this.displayValue, type: "text", required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onClick: this.handleInputClick, onInvalid: (e) => e.preventDefault() }, index.h("fluent-label", { key: '1b52489eca9d175bb163af05831bc8237b6a3ebb', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (index.h("udp-tooltip", { key: 'f09510db0e4ceb3a36d6d136627c3284df4aad97', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: '0521edcfb7bfd0d4423977bf5fa84459e73a6a3c', name: "info", size: "xs", class: "popup-hint-icon" })))), index.h("div", { key: '4847d6b093aec40d1997e0a901b30450d1c096de', slot: "end" }, index.h("udp-fluent-icon-button", { key: '0bad521605aa667ecbe4bc515c59c0a3356bc73a', appearance: "transparent", iconName: "calendar", onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick, disabled: this.disabled || this.readonly, tabindex: -1 }))), index.h("div", { key: 'd4d7bcf356f63a6e48e2e7a0e729fc1f828fee42', slot: "content" }, index.h("udp-date-range-selector", { key: '4eeaf2c5b00ba70e28f7a5ea0f9df78ce8141f62', ref: el => (this.calendarRef = el), monthsToDisplay: 1, value: this.internalValue, onChange: this.handleDateSelect, minDate: this.minDate, maxDate: this.maxDate, isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, variant: this.dateSelectionType, size: "sm" }), index.h("div", { key: 'e4f15cc0f854b2d3a389202510bb18202a7f236f', class: "footer-buttons" }, index.h("udp-fluent-button", { key: '6c33fee28a778824bd25f9b6785226a21dee0f18', appearance: "transparent", size: "small", onClick: this.handleToday }, "Today"), index.h("udp-fluent-button", { key: '5a1076da7d313e7798d5a95ad38ce77171b9d207', appearance: "transparent", size: "small", onClick: this.handleClear }, "Clear")))), index.h("udp-text", { key: '2291ebb040091ef54a05999d91597967fc6bbbdb', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -4441,6 +4457,12 @@ const UdpDateInput = class {
     static get watchers() { return {
         "value": [{
                 "onValueChange": 0
+            }],
+        "format": [{
+                "onFormatChange": 0
+            }],
+        "dateFormat": [{
+                "onFormatChange": 0
             }]
     }; }
 };
@@ -4949,7 +4971,14 @@ const UdpDateTimeInput = class {
         this.controlSize = 'medium';
         /** When true, the date and time inputs stack vertically instead of sitting side-by-side. */
         this.stacked = false;
-        /** Date display format. */
+        /**
+         * Date display format.
+         *
+         * @deprecated Use `dateFormat` instead. `format` collides with the reserved
+         * `format` prop of form libraries (e.g. react-final-form's `<Field>`), which
+         * treats it as a value-formatter function. Retained as an alias; `dateFormat`
+         * takes precedence when both are set.
+         */
         this.format = 'MM/DD/YYYY';
         /** Whether to reserve space for error/helper text to prevent layout shift. */
         this.includeErrorPadding = true;
@@ -5015,10 +5044,11 @@ const UdpDateTimeInput = class {
         this.valueChanged.emit(newValue);
     }
     render() {
+        var _a;
         // If a main label is provided (for date) but no time label, default time label to a non-breaking space
         // to maintain vertical alignment (ensuring the time input isn't pushed up).
         const effectiveTimeLabel = this.timeLabel === undefined && this.label ? '\u00A0' : this.timeLabel;
-        return (index.h(index.Host, { key: '2f593ed0b4de495cab7ee284c13291e998a98281' }, index.h("div", { key: 'd15f5dfb61ffa25cca1aa12a1b7cf3179b9af516', class: "date-part" }, index.h("udp-date-input", { key: 'ce201e5f203e698041451fb5ca1ec05ea373fb33', name: `${this.name}-date`, value: this.datePart, required: this.required, disabled: this.disabled, autofocus: this.autofocus, appearance: this.appearance, controlSize: this.controlSize, format: this.format, minDate: this.minDate, maxDate: this.maxDate, isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, error: this.error, includeErrorPadding: this.includeErrorPadding, onValueChanged: this.handleDateChange, label: this.label, popupHint: this.popupHint })), index.h("div", { key: '27bdca75aea7869283d63477a59b9218ef9bf5ba', class: "time-part" }, index.h("udp-time-input", { key: 'f15b29ec0c556777910830408ad96d8ca48e4acb', name: `${this.name}-time`, value: this.timePart, required: false, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, label: effectiveTimeLabel, minuteStep: this.minuteStep, use24Hour: this.use24Hour, onValueChanged: this.handleTimeChange, includeErrorPadding: this.includeErrorPadding, error: this.error ? ' ' : undefined }))));
+        return (index.h(index.Host, { key: 'ba83526f5089ef1e21ef458742f7aed102f6fe9d' }, index.h("div", { key: 'f92eb98cd36445ac370a1e1da7ac40a2700d8c81', class: "date-part" }, index.h("udp-date-input", { key: 'bd17f312dc9ac771d568885069710c1f00d61218', name: `${this.name}-date`, value: this.datePart, required: this.required, disabled: this.disabled, autofocus: this.autofocus, appearance: this.appearance, controlSize: this.controlSize, dateFormat: (_a = this.dateFormat) !== null && _a !== void 0 ? _a : this.format, minDate: this.minDate, maxDate: this.maxDate, isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, error: this.error, includeErrorPadding: this.includeErrorPadding, onValueChanged: this.handleDateChange, label: this.label, popupHint: this.popupHint })), index.h("div", { key: '00f0dd5f7187a4669cdeea3054de5c29a36a7344', class: "time-part" }, index.h("udp-time-input", { key: 'e2d1918ac10b67620e6f6724fffd5ca8e80123e2', name: `${this.name}-time`, value: this.timePart, required: false, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, label: effectiveTimeLabel, minuteStep: this.minuteStep, use24Hour: this.use24Hour, onValueChanged: this.handleTimeChange, includeErrorPadding: this.includeErrorPadding, error: this.error ? ' ' : undefined }))));
     }
     static get watchers() { return {
         "value": [{