@elite.framework/ng.ui.core 1.0.59 → 1.0.61

package/fesm2022/elite.framework-ng.ui.core-datepicker.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { NgModule, Component } from '@angular/core';
+import { NgModule, ViewChild, Component } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@ngx-formly/core';
-import { FieldType, FormlyModule } from '@ngx-formly/core';
+import { FieldType, FormlyAttributes, FormlyModule } from '@ngx-formly/core';
 import * as i1 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3 from 'primeng/datepicker';
@@ -12,10 +12,14 @@ import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i5 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i6 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i7 from '@ngx-translate/core';
+import * as i8 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import * as i6 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i7 from 'primeng/inputgroupaddon';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { SelectModule } from 'primeng/select';
 import { FormlyFormFieldModule } from '@elite.framework/ng.ui.core/form-field';
 
 class DatepickerModule {
@@ -31,6 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
         }] });
 
 class FormlyFieldDatepicker extends FieldType {
+    datepickerComp;
     dialogVisible = false;
     get mode() {
         return this.props['mode'] || 'date';
@@ -127,9 +132,11 @@ class FormlyFieldDatepicker extends FieldType {
         if (minutes > 59)
             minutes = 59;
         this.timeControl.setValue(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
+        this.updateModel();
     }
     toggleAmPm() {
         this.ampmControl.setValue(this.ampmControl.value === 'AM' ? 'PM' : 'AM');
+        this.updateModel();
     }
     updateModel() {
         const dateVal = this.dateControl.value;
@@ -162,87 +169,91 @@ class FormlyFieldDatepicker extends FieldType {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FormlyFieldDatepicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: FormlyFieldDatepicker, isStandalone: true, selector: "formly-field-primeng-datepicker", usesInheritance: true, ngImport: i0, template: `
-    <div class="w-full">
-      <span class="p-inputgroup">
-         <p-datepicker
-          *ngIf="mode === 'date'"
-          [(ngModel)]="dateControl.value"
-          [formControl]="dateControl"
-          dateFormat="yy-mm-dd"
-          [showIcon]="true"
-          inputId="buttondisplay"
-          [showOnFocus]="false"
-          appendTo="body"
-          class="flex-1 min-w-0"
-          (onSelect)="onDateChange()"
-        ></p-datepicker>
-        <input
-        *ngIf="mode !== 'date'"
-          pInputText
-          readonly
-          [value]="displayValue"
-          class="flex-1 cursor-pointer bg-white border rounded-l-lg px-3 py-2"
-        />
-        <button
-         *ngIf="mode !== 'date'"
-          style="padding: initial;"
-          pButton
-          type="button"
-          pRipple
-          icon="pi pi-calendar"
-          class="rounded-r-lg"
-          (click)="openDialog()"
-        ></button>
-      </span>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: FormlyFieldDatepicker, isStandalone: true, selector: "formly-field-primeng-datepicker", viewQueries: [{ propertyName: "datepickerComp", first: true, predicate: ["datepickerComp"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
 
-    <p-dialog [header]="'Select Date & Time' | translate" [(visible)]="dialogVisible" [modal]="false" [closable]="true">
-      <div class="flex flex-row items-center w-full gap-2 rounded-xl p-2">
-        <!-- Date Picker -->
-        <p-datepicker
-          *ngIf="mode !== 'time'"
-          [(ngModel)]="dateControl.value"
-          [formControl]="dateControl"
-          dateFormat="yy-mm-dd"
-         [showIcon]="true"
-          inputId="buttondisplay"
-          [showOnFocus]="false"
-          appendTo="body"
-          class="flex-1 min-w-0"
-          (onSelect)="onDateChange()"
-        ></p-datepicker>
+  <p-inputGroup class="w-full">
+    <!-- [inputStyle]="{'border-left':'0'}" -->
+      @if (mode !== 'time') {
+  <p-datepicker
+    #datepickerComp
+    [(ngModel)]="dateControl.value"
+    [formControl]="dateControl"
+    dateFormat="yy-mm-dd"
+    placeholder="YYYY-MM-DD"
+    [showIcon]="false"
+    inputId="buttondisplay"
+    [showOnFocus]="true"
+    appendTo="body"
+    class="w-full rounded-none"
+    inputStyleClass="rtl:border-r-0 ltr:border-l-0"
+    dropdownMode="current"
+    [formlyAttributes]="field"
+    [disabled]="!!props.disabled"
+    (onSelect)="onDateChange()"
+  ></p-datepicker>
+      }
 
-        <!-- Time Input -->
-        <div *ngIf="mode !== 'date'" class="flex items-center gap-1">
-          <input
-            pInputText
-            type="text"
-            placeholder="hh:mm"
-            maxlength="5"
-            [formControl]="timeControl"
-            (input)="onTimeInput($event)"
-            (blur)="onTimeChange()"
-            class="w-20 text-center font-mono border rounded-lg px-3 py-2"
-          />
+  @if (mode !== 'date') {
+    <input
+      pInputText
+      type="text"
+      placeholder="00:00"
+      maxlength="5"
+      [formControl]="timeControl"
+      (input)="onTimeInput($event)"
+      (blur)="onTimeChange()"
+      class="w-20"
+      [ngStyle]="{
+    'border-radius': mode == 'time' ? '':'0px',
+    'width': '53px !important',
+    'padding-left': mode == 'time' ? '':'2px',
+    'padding-right': mode == 'time' ? '':'2px',
+    'border-left':mode == 'time' ? '': '0px',
+    'border-right': mode == 'time' ? '': '0px'
+  }"
+  [classList]="mode == 'time' ? 'p-autocomplete-input p-component p-inputtext' : ''"
+    />
 
-          <!-- AM/PM Toggle -->
-          <button
-            pButton
-            type="button"
-            class="rounded-lg border px-3 py-1.5 shadow-sm bg-gray-100 text-sm font-semibold text-gray-800"
-            (click)="toggleAmPm()"
-            [label]="ampmControl.value ?? 'AM'"
-          ></button>
-        </div>
-      </div>
+    <p-inputGroupAddon [style]="{'padding': 'initial'}">
+     <select
+    (change)="toggleAmPm()"
+    [disabled]="!!props.disabled"
+    style="       padding-top: 0.4rem;
+    padding-bottom: 0.5rem; padding-left: 0.5rem;
+    padding-right: 0.5rem;
+        background: var(--p-button-secondary-background);
+    "
+    class="  pr-8  bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed appearance-none"
+  >
+    <option value="AM" [selected]="ampmControl.value === 'AM'">{{'AM' | translate}}</option>
+    <option value="PM" [selected]="ampmControl.value === 'PM'">{{'PM' | translate}}</option>
+  </select>
+    </p-inputGroupAddon>
+  }
+   @if (mode == 'time') {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-clock"
+      severity="primary"
+    />
+  </p-inputGroupAddon>
+}
+ @if (mode !== 'time') {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-calendar"
+      (click)="datepickerComp.toggle()"
+      severity="primary"
+    />
+  </p-inputGroupAddon>
+}
+</p-inputGroup>
 
-      <ng-template #footer>
-        <button pButton type="button" [label]="'CANCEL' | translate" class="p-button-text" (click)="dialogVisible = false"></button>
-        <button pButton type="button" [label]="'SAVE' | translate" (click)="saveDialog()"></button>
-      </ng-template>
-    </p-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i3.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: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i3.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: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i7.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: SelectModule }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FormlyFieldDatepicker, decorators: [{
             type: Component,
@@ -257,91 +268,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         ButtonModule,
                         InputTextModule,
                         DialogModule,
-                        TranslateModule
+                        TranslateModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        FormlyAttributes,
+                        SelectModule
                     ],
                     template: `
-    <div class="w-full">
-      <span class="p-inputgroup">
-         <p-datepicker
-          *ngIf="mode === 'date'"
-          [(ngModel)]="dateControl.value"
-          [formControl]="dateControl"
-          dateFormat="yy-mm-dd"
-          [showIcon]="true"
-          inputId="buttondisplay"
-          [showOnFocus]="false"
-          appendTo="body"
-          class="flex-1 min-w-0"
-          (onSelect)="onDateChange()"
-        ></p-datepicker>
-        <input
-        *ngIf="mode !== 'date'"
-          pInputText
-          readonly
-          [value]="displayValue"
-          class="flex-1 cursor-pointer bg-white border rounded-l-lg px-3 py-2"
-        />
-        <button
-         *ngIf="mode !== 'date'"
-          style="padding: initial;"
-          pButton
-          type="button"
-          pRipple
-          icon="pi pi-calendar"
-          class="rounded-r-lg"
-          (click)="openDialog()"
-        ></button>
-      </span>
-    </div>
 
-    <p-dialog [header]="'Select Date & Time' | translate" [(visible)]="dialogVisible" [modal]="false" [closable]="true">
-      <div class="flex flex-row items-center w-full gap-2 rounded-xl p-2">
-        <!-- Date Picker -->
-        <p-datepicker
-          *ngIf="mode !== 'time'"
-          [(ngModel)]="dateControl.value"
-          [formControl]="dateControl"
-          dateFormat="yy-mm-dd"
-         [showIcon]="true"
-          inputId="buttondisplay"
-          [showOnFocus]="false"
-          appendTo="body"
-          class="flex-1 min-w-0"
-          (onSelect)="onDateChange()"
-        ></p-datepicker>
+  <p-inputGroup class="w-full">
+    <!-- [inputStyle]="{'border-left':'0'}" -->
+      @if (mode !== 'time') {
+  <p-datepicker
+    #datepickerComp
+    [(ngModel)]="dateControl.value"
+    [formControl]="dateControl"
+    dateFormat="yy-mm-dd"
+    placeholder="YYYY-MM-DD"
+    [showIcon]="false"
+    inputId="buttondisplay"
+    [showOnFocus]="true"
+    appendTo="body"
+    class="w-full rounded-none"
+    inputStyleClass="rtl:border-r-0 ltr:border-l-0"
+    dropdownMode="current"
+    [formlyAttributes]="field"
+    [disabled]="!!props.disabled"
+    (onSelect)="onDateChange()"
+  ></p-datepicker>
+      }
 
-        <!-- Time Input -->
-        <div *ngIf="mode !== 'date'" class="flex items-center gap-1">
-          <input
-            pInputText
-            type="text"
-            placeholder="hh:mm"
-            maxlength="5"
-            [formControl]="timeControl"
-            (input)="onTimeInput($event)"
-            (blur)="onTimeChange()"
-            class="w-20 text-center font-mono border rounded-lg px-3 py-2"
-          />
+  @if (mode !== 'date') {
+    <input
+      pInputText
+      type="text"
+      placeholder="00:00"
+      maxlength="5"
+      [formControl]="timeControl"
+      (input)="onTimeInput($event)"
+      (blur)="onTimeChange()"
+      class="w-20"
+      [ngStyle]="{
+    'border-radius': mode == 'time' ? '':'0px',
+    'width': '53px !important',
+    'padding-left': mode == 'time' ? '':'2px',
+    'padding-right': mode == 'time' ? '':'2px',
+    'border-left':mode == 'time' ? '': '0px',
+    'border-right': mode == 'time' ? '': '0px'
+  }"
+  [classList]="mode == 'time' ? 'p-autocomplete-input p-component p-inputtext' : ''"
+    />
 
-          <!-- AM/PM Toggle -->
-          <button
-            pButton
-            type="button"
-            class="rounded-lg border px-3 py-1.5 shadow-sm bg-gray-100 text-sm font-semibold text-gray-800"
-            (click)="toggleAmPm()"
-            [label]="ampmControl.value ?? 'AM'"
-          ></button>
-        </div>
-      </div>
+    <p-inputGroupAddon [style]="{'padding': 'initial'}">
+     <select
+    (change)="toggleAmPm()"
+    [disabled]="!!props.disabled"
+    style="       padding-top: 0.4rem;
+    padding-bottom: 0.5rem; padding-left: 0.5rem;
+    padding-right: 0.5rem;
+        background: var(--p-button-secondary-background);
+    "
+    class="  pr-8  bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed appearance-none"
+  >
+    <option value="AM" [selected]="ampmControl.value === 'AM'">{{'AM' | translate}}</option>
+    <option value="PM" [selected]="ampmControl.value === 'PM'">{{'PM' | translate}}</option>
+  </select>
+    </p-inputGroupAddon>
+  }
+   @if (mode == 'time') {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-clock"
+      severity="primary"
+    />
+  </p-inputGroupAddon>
+}
+ @if (mode !== 'time') {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-calendar"
+      (click)="datepickerComp.toggle()"
+      severity="primary"
+    />
+  </p-inputGroupAddon>
+}
+</p-inputGroup>
 
-      <ng-template #footer>
-        <button pButton type="button" [label]="'CANCEL' | translate" class="p-button-text" (click)="dialogVisible = false"></button>
-        <button pButton type="button" [label]="'SAVE' | translate" (click)="saveDialog()"></button>
-      </ng-template>
-    </p-dialog>
   `,
                 }]
-        }] });
+        }], propDecorators: { datepickerComp: [{
+                type: ViewChild,
+                args: ['datepickerComp']
+            }] } });
 
 function withFormlyFieldDatepicker() {
     return {