@fuentis/phoenix-ui 0.0.9-alpha.662 → 0.0.9-alpha.663

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -4088,6 +4088,16 @@ function getLangPattern(currentLang) {
             return regexPatternSr;
     }
 }
+/**
+ * True when `value` is a non-empty, well-formed time-period string for the given
+ * language (e.g. "2w 4d 6h 45m"). Used by fields to decide whether to show the
+ * format guidance — a valid value needs none.
+ */
+function isTimePeriodFormatValid(value, currentLang) {
+    if (!value)
+        return false;
+    return getLangPattern(currentLang).test(value);
+}
 function timePeriod(currentLang, tpMin) {
     return (control) => {
         if (!control.pristine) {
@@ -8688,12 +8698,15 @@ class MetaTimeperiodV2Component {
     disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : []));
     /** Whether the field is required (drives the empty "required" note). */
     mandatory = input(false, ...(ngDevMode ? [{ debugName: "mandatory" }] : []));
+    translate = inject(TranslateService);
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
     /** True once the user has typed in / left the field — gates the "required" note. */
     interacted = signal(false, ...(ngDevMode ? [{ debugName: "interacted" }] : []));
     /** The duration string shown in the input (the control value is this string). */
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     disabled = computed(() => this.disable() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** True when the current value is a well-formed period — then no guidance is shown. */
+    validFormat = computed(() => isTimePeriodFormatValid(this.value(), this.translate.currentLang), ...(ngDevMode ? [{ debugName: "validFormat" }] : []));
     onChange = () => { };
     onTouched = () => { };
     writeValue(v) {
@@ -8741,12 +8754,12 @@ class MetaTimeperiodV2Component {
       (input)="onInput($event)"
       (blur)="handleBlur()"
     />
-    @if (value()) {
-      <!-- Guidance while typing: how the input should look. -->
+    @if (value() && !validFormat()) {
+      <!-- Guidance while typing an incomplete/invalid value; hidden once it's valid. -->
       <small class="block mt-1 timeperiod-v2-note">
         <i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.VALUE_SHOULD_MATCH_TIMEPATTERN' | translate }}
       </small>
-    } @else if (mandatory() && interacted()) {
+    } @else if (!value() && mandatory() && interacted()) {
       <!-- Empty required field (e.g. cleared on edit). -->
       <small class="block mt-1 timeperiod-v2-note">
         <i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.THIS_FIELD_IS_REQUIRED' | translate }}
@@ -8768,12 +8781,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       (input)="onInput($event)"
       (blur)="handleBlur()"
     />
-    @if (value()) {
-      <!-- Guidance while typing: how the input should look. -->
+    @if (value() && !validFormat()) {
+      <!-- Guidance while typing an incomplete/invalid value; hidden once it's valid. -->
       <small class="block mt-1 timeperiod-v2-note">
         <i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.VALUE_SHOULD_MATCH_TIMEPATTERN' | translate }}
       </small>
-    } @else if (mandatory() && interacted()) {
+    } @else if (!value() && mandatory() && interacted()) {
       <!-- Empty required field (e.g. cleared on edit). -->
       <small class="block mt-1 timeperiod-v2-note">
         <i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.THIS_FIELD_IS_REQUIRED' | translate }}