@fuentis/phoenix-ui 0.0.9-alpha.579 → 0.0.9-alpha.580

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -5744,6 +5744,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     ] }]
         }], ctorParameters: () => [] });
 
+class MetaStartDueDateComponent {
+    control;
+    parentForm;
+    ctrl;
+    dr = inject(DestroyRef);
+    startDate = null;
+    endDate = null;
+    onChanged = () => { };
+    onTouched = () => { };
+    ngOnInit() {
+        this.ctrl = this.parentForm.get(this.control.configuration.key);
+        if (this.control.mandatory)
+            this.ctrl?.setValidators(this.ctrl?.validator);
+        this.parentForm
+            .get(this.control.configuration.key)
+            ?.valueChanges.pipe(takeUntilDestroyed(this.dr))
+            .subscribe(() => this.validateDates());
+        this.validateDates();
+    }
+    normalizeDateOnly(v) {
+        if (!v)
+            return null;
+        const d = v instanceof Date ? v : new Date(v);
+        if (isNaN(d.getTime()))
+            return null;
+        return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
+    }
+    writeValue(obj) {
+        if (obj) {
+            this.startDate = this.normalizeDateOnly(obj.startDate);
+            this.endDate = this.normalizeDateOnly(obj.endDate);
+        }
+        else {
+            this.startDate = null;
+            this.endDate = null;
+        }
+        this.validateDates();
+    }
+    // Handle start date selection
+    onStartDateSelect(event) {
+        this.startDate = this.normalizeDateOnly(event);
+        this.onChanged({ startDate: this.startDate, endDate: this.endDate });
+        this.validateDates();
+    }
+    // Handle end date selection
+    onEndDateSelect(event) {
+        this.endDate = this.normalizeDateOnly(event);
+        this.onChanged({ startDate: this.startDate, endDate: this.endDate });
+        this.validateDates();
+    }
+    // Handle start date clear value
+    onStartDateClear() {
+        this.startDate = null;
+        this.onChanged({ startDate: this.startDate, endDate: this.endDate });
+        this.validateDates();
+    }
+    // Handle end date clear value
+    onEndDateClear() {
+        this.endDate = null;
+        this.onChanged({ startDate: this.startDate, endDate: this.endDate });
+        this.validateDates();
+    }
+    validateDates() {
+        const c = this.parentForm.get(this.control.configuration.key);
+        if (!c)
+            return;
+        // clear previous errors
+        c.setErrors(null);
+        // Both dates are mandatory
+        if (this.control.mandatory && (!this.startDate || !this.endDate)) {
+            c.setErrors({ required: true });
+            return;
+        }
+        if (this.startDate && this.endDate) {
+            const s = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate(), 12, 0, 0, 0).getTime();
+            const e = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate(), 12, 0, 0, 0).getTime();
+            if (s > e) {
+                c.setErrors({ dueDate: true });
+                return;
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaStartDueDateComponent, isStandalone: true, selector: "phoenix-meta-start-due-date", inputs: { control: "control", parentForm: "parentForm" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MetaStartDueDateComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div [hidden]="control?.hidden">
+      <phoenix-meta-label [control]="control"></phoenix-meta-label>
+
+      <div class="flex align-items-center gap-2 w-full">
+        <!-- START -->
+        <div class="flex-1" style="min-width: 0;">
+          <p-datepicker
+            class="w-full"
+            [inputStyle]="{ width: '100%' }"
+            [attr.data-cy]="'start-date-' + control?.id"
+            (onSelect)="onStartDateSelect($event)"
+            (onClearClick)="onStartDateClear()"
+            [(ngModel)]="startDate"
+            [ngModelOptions]="{ standalone: true }"
+            [readonlyInput]="true"
+            [showButtonBar]="true"
+            [showIcon]="true"
+            [placeholder]="'LABELS.PLANNED_START' | translate"
+            appendTo="body"
+          ></p-datepicker>
+        </div>
+
+        <!-- ARROW -->
+        <div class="flex align-items-center justify-content-center" style="flex: 0 0 18px;">
+          <i class="pi pi-arrow-right text-sm" style="color: var(--surface-600)"></i>
+        </div>
+
+        <!-- DUE -->
+        <div class="flex-1" style="min-width: 0;">
+          <p-datepicker
+            class="w-full"
+            [inputStyle]="{ width: '100%' }"
+            [attr.data-cy]="'due-date-' + control?.id"
+            (onSelect)="onEndDateSelect($event)"
+            (onClearClick)="onEndDateClear()"
+            [(ngModel)]="endDate"
+            [ngModelOptions]="{ standalone: true }"
+            [readonlyInput]="true"
+            [showButtonBar]="true"
+            [showIcon]="true"
+            [placeholder]="'LABELS.PLANNED_END' | translate"
+            appendTo="body"
+          ></p-datepicker>
+        </div>
+      </div>
+
+      <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'phoenix-meta-start-due-date', standalone: true, imports: [
+                        DatePickerModule,
+                        InlineFieldError,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MetaLabelComponent,
+                        TranslateModule,
+                    ], template: `
+    <div [hidden]="control?.hidden">
+      <phoenix-meta-label [control]="control"></phoenix-meta-label>
+
+      <div class="flex align-items-center gap-2 w-full">
+        <!-- START -->
+        <div class="flex-1" style="min-width: 0;">
+          <p-datepicker
+            class="w-full"
+            [inputStyle]="{ width: '100%' }"
+            [attr.data-cy]="'start-date-' + control?.id"
+            (onSelect)="onStartDateSelect($event)"
+            (onClearClick)="onStartDateClear()"
+            [(ngModel)]="startDate"
+            [ngModelOptions]="{ standalone: true }"
+            [readonlyInput]="true"
+            [showButtonBar]="true"
+            [showIcon]="true"
+            [placeholder]="'LABELS.PLANNED_START' | translate"
+            appendTo="body"
+          ></p-datepicker>
+        </div>
+
+        <!-- ARROW -->
+        <div class="flex align-items-center justify-content-center" style="flex: 0 0 18px;">
+          <i class="pi pi-arrow-right text-sm" style="color: var(--surface-600)"></i>
+        </div>
+
+        <!-- DUE -->
+        <div class="flex-1" style="min-width: 0;">
+          <p-datepicker
+            class="w-full"
+            [inputStyle]="{ width: '100%' }"
+            [attr.data-cy]="'due-date-' + control?.id"
+            (onSelect)="onEndDateSelect($event)"
+            (onClearClick)="onEndDateClear()"
+            [(ngModel)]="endDate"
+            [ngModelOptions]="{ standalone: true }"
+            [readonlyInput]="true"
+            [showButtonBar]="true"
+            [showIcon]="true"
+            [placeholder]="'LABELS.PLANNED_END' | translate"
+            appendTo="body"
+          ></p-datepicker>
+        </div>
+      </div>
+
+      <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MetaStartDueDateComponent),
+                            multi: true,
+                        },
+                    ] }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], parentForm: [{
+                type: Input
+            }] } });
+
 class MetaSwitchComponent extends BaseMetaField {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaSwitchComponent, isStandalone: true, selector: "phoenix-meta-switch", providers: [
@@ -7223,208 +7440,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['fileInput']
             }] } });
 
-class MetaStartDueDateComponent {
-    control;
-    parentForm;
-    ctrl;
-    dr = inject(DestroyRef);
-    startDate;
-    endDate;
-    onChanged;
-    onTouched;
-    constructor() { }
-    ngOnInit() {
-        this.ctrl = this.parentForm.get(this.control.configuration.key);
-        this.ctrl = this.parentForm.get(this.control.configuration.key);
-        if (this.control.mandatory)
-            this.ctrl.setValidators(this.ctrl.validator);
-        this.parentForm
-            .get(this.control.configuration.key)
-            ?.valueChanges.pipe(takeUntilDestroyed(this.dr))
-            .subscribe((r) => {
-            this.validateDates();
-        });
-        this.validateDates();
-    }
-    writeValue(obj) {
-        if (obj) {
-            this.startDate = obj.startDate;
-            this.endDate = obj.endDate;
-        }
-        else {
-            this.startDate = null;
-            this.endDate = null;
-        }
-    }
-    // Handle start date selection
-    onStartDateSelect(event) {
-        this.startDate = event;
-        this.onChanged({ startDate: this.startDate, endDate: this.endDate });
-        this.validateDates();
-    }
-    // Handle end date selection
-    onEndDateSelect(event) {
-        this.endDate = event;
-        this.onChanged({ startDate: this.startDate, endDate: this.endDate });
-        this.validateDates();
-    }
-    // Handle start date clear value
-    onStartDateClear() {
-        this.startDate = null;
-        this.onChanged({ startDate: this.startDate, endDate: this.endDate });
-        this.validateDates();
-    }
-    // Handle end date clear value
-    onEndDateClear() {
-        this.endDate = null;
-        this.onChanged({ startDate: this.startDate, endDate: this.endDate });
-        this.validateDates();
-    }
-    validateDates() {
-        //Both dates are mandatory
-        if (this.control.mandatory && (!this.startDate || !this.endDate)) {
-            this.parentForm
-                .get(this.control.configuration.key)
-                ?.setErrors({ required: true });
-        }
-        else {
-            this.parentForm.get(this.control.configuration.key)?.setErrors(null);
-        }
-        // End date must be after start date
-        if (this.startDate &&
-            this.endDate &&
-            this.startDate.setHours(0, 0, 0, 0) > this.endDate.setHours(0, 0, 0, 0)) {
-            this.parentForm
-                .get(this.control.configuration.key)
-                ?.setErrors({ dueDate: true });
-        }
-        //TBD: Scenario if only one date is mandatory
-    }
-    registerOnChange(fn) {
-        this.onChanged = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaStartDueDateComponent, isStandalone: true, selector: "phoenix-meta-start-due-date", inputs: { control: "control", parentForm: "parentForm" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => MetaStartDueDateComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: `
-    <div [hidden]="control?.hidden">
-  <phoenix-meta-label [control]="control"></phoenix-meta-label>
-
-  <div class="flex align-items-center gap-2">
-    <div class="flex-1">
-      <p-datepicker
-        [attr.data-cy]="'start-date-' + control?.id"
-        (onSelect)="onStartDateSelect($event)"
-        (onClearClick)="onStartDateClear()"
-        [style]="{ width: '100%' }"
-        [(ngModel)]="startDate"
-        [ngModelOptions]="{ standalone: true }"
-        [readonlyInput]="true"
-        [showButtonBar]="true"
-        [showIcon]="true"
-        [placeholder]="'LABELS.PLANNED_START' | translate"
-        appendTo="body"
-      ></p-datepicker>
-    </div>
-
-    <div class="flex align-items-center justify-content-center px-2" style="flex: 0 0 24px;">
-      <i class="pi pi-arrow-right text-sm" style="color: var(--surface-600)"></i>
-    </div>
-
-    <div class="flex-1">
-      <p-datepicker
-        [attr.data-cy]="'due-date-' + control?.id"
-        (onSelect)="onEndDateSelect($event)"
-        (onClearClick)="onEndDateClear()"
-        [style]="{ width: '100%' }"
-        [(ngModel)]="endDate"
-        [ngModelOptions]="{ standalone: true }"
-        [readonlyInput]="true"
-        [showButtonBar]="true"
-        [showIcon]="true"
-        [placeholder]="'LABELS.PLANNED_END' | translate"
-        appendTo="body"
-      ></p-datepicker>
-    </div>
-  </div>
-
-  <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
-</div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'phoenix-meta-start-due-date', standalone: true, imports: [
-                        DatePickerModule,
-                        InlineFieldError,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        MetaLabelComponent,
-                        TranslateModule,
-                    ], template: `
-    <div [hidden]="control?.hidden">
-  <phoenix-meta-label [control]="control"></phoenix-meta-label>
-
-  <div class="flex align-items-center gap-2">
-    <div class="flex-1">
-      <p-datepicker
-        [attr.data-cy]="'start-date-' + control?.id"
-        (onSelect)="onStartDateSelect($event)"
-        (onClearClick)="onStartDateClear()"
-        [style]="{ width: '100%' }"
-        [(ngModel)]="startDate"
-        [ngModelOptions]="{ standalone: true }"
-        [readonlyInput]="true"
-        [showButtonBar]="true"
-        [showIcon]="true"
-        [placeholder]="'LABELS.PLANNED_START' | translate"
-        appendTo="body"
-      ></p-datepicker>
-    </div>
-
-    <div class="flex align-items-center justify-content-center px-2" style="flex: 0 0 24px;">
-      <i class="pi pi-arrow-right text-sm" style="color: var(--surface-600)"></i>
-    </div>
-
-    <div class="flex-1">
-      <p-datepicker
-        [attr.data-cy]="'due-date-' + control?.id"
-        (onSelect)="onEndDateSelect($event)"
-        (onClearClick)="onEndDateClear()"
-        [style]="{ width: '100%' }"
-        [(ngModel)]="endDate"
-        [ngModelOptions]="{ standalone: true }"
-        [readonlyInput]="true"
-        [showButtonBar]="true"
-        [showIcon]="true"
-        [placeholder]="'LABELS.PLANNED_END' | translate"
-        appendTo="body"
-      ></p-datepicker>
-    </div>
-  </div>
-
-  <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
-</div>
-  `, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MetaStartDueDateComponent),
-                            multi: true,
-                        },
-                    ] }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
-                type: Input
-            }], parentForm: [{
-                type: Input
-            }] } });
-
 class MetaFormComponent extends MetaFormAbstract {
     constructor(fb, metaService, translateService, http
     // env: EnvService
@@ -8754,8 +8769,8 @@ class MetaStartDueDateV2Component {
      * NOTE: "YYYY-MM-DD" strings are parsed as local dates to avoid timezone day-shifts.
      */
     writeValue(v) {
-        this.startDate = this.parseToDate(v?.startDate ?? null);
-        this.endDate = this.parseToDate(v?.endDate ?? null);
+        this.startDate = this.normalizeDateOnly(this.parseToDate(v?.startDate ?? null));
+        this.endDate = this.normalizeDateOnly(this.parseToDate(v?.endDate ?? null));
         // OnPush: ensure UI reflects external value writes (patchValue/setValue)
         this.cdr.markForCheck();
     }
@@ -8795,7 +8810,7 @@ class MetaStartDueDateV2Component {
     onStartChange(d) {
         if (this.disabled)
             return;
-        this.startDate = d ?? null;
+        this.startDate = this.normalizeDateOnly(d ?? null);
         this.emitChange();
     }
     /**
@@ -8805,7 +8820,7 @@ class MetaStartDueDateV2Component {
     onEndChange(d) {
         if (this.disabled)
             return;
-        this.endDate = d ?? null;
+        this.endDate = this.normalizeDateOnly(d ?? null);
         this.emitChange();
     }
     /**
@@ -8844,13 +8859,20 @@ class MetaStartDueDateV2Component {
             const y = Number(m[1]);
             const mo = Number(m[2]) - 1;
             const d = Number(m[3]);
-            const local = new Date(y, mo, d);
+            const local = new Date(y, mo, d, 12, 0, 0, 0);
             return isNaN(local.getTime()) ? null : local;
         }
         // ISO / other -> fallback
         const dt = new Date(s);
         return isNaN(dt.getTime()) ? null : dt;
     }
+    normalizeDateOnly(d) {
+        if (!d)
+            return null;
+        if (isNaN(d.getTime()))
+            return null;
+        return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaStartDueDateV2Component, isStandalone: true, selector: "phoenix-meta-start-due-date-v2", inputs: { dataCy: "dataCy", disable: "disable" }, providers: [
             {