@es.framework/ng.ui.core 2.0.58

package/fesm2022/es.framework-ng.ui.core-custom-switch.mjs

@@ -0,0 +1,119 @@
+import * as i0 from '@angular/core';
+import { NgModule, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FieldType } from '@ngx-formly/core';
+import { TranslatePipe } from '@es.framework/ng.core/pipes';
+import { ToggleSwitch } from 'primeng/toggleswitch';
+import * as i2 from 'primeng/tooltip';
+import { TooltipModule, Tooltip } from 'primeng/tooltip';
+
+class CustomSwitchModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CustomSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: CustomSwitchModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CustomSwitchModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CustomSwitchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+class CustomSwitchFieldComponent extends FieldType {
+    updateModel(value) {
+        this.formControl.setValue(value);
+        // التحويل الآمن للمفتاح
+        const key = Array.isArray(this.key) ? this.key.join('.') : this.key;
+        if (this.model && key) {
+            this.model[key] = value ? 1 : 2;
+        }
+    }
+    ngAfterViewInit() {
+        const key = Array.isArray(this.key) ? this.key.join('.') : this.key;
+        if (!key)
+            return;
+        if (this.model[key] === undefined) {
+            this.model[key] = 1;
+            this.formControl.setValue(true);
+        }
+        else if (this.model[key] === 1) {
+            this.formControl.setValue(true);
+        }
+        else if (this.model[key] === 2) {
+            this.formControl.setValue(false);
+        }
+        // ✅ تأكد أن الموديل دائماً رقم 1 أو 2
+        this.model[key] = this.formControl.value ? 1 : 2;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CustomSwitchFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CustomSwitchFieldComponent, isStandalone: true, selector: "formly-field-custom-switch", usesInheritance: true, ngImport: i0, template: `
+ <div class="flex items-center justify-between rtl:flex-row-reverse w-full px-2 py-1"
+   style="    border-radius: var(--p-inputtext-border-radius);">
+ 
+ 
+   <label [for]="id" class="font-bold text-lg text-gray-800">
+     {{ (to.label ?? '') | translate }}
+ 
+     @if (to.required) {
+       <span class="text-red-500">*</span>
+     }
+   </label>
+ 
+   <!-- التبديل نفسه -->
+   <p-toggleSwitch
+     [formControl]="formControl"
+     [inputId]="id"
+     [disabled]="to.disabled || false"
+     [pTooltip]="field.props['tooltip']"
+     [styleClass]="''"
+     (onChange)="updateModel($event.checked)"
+   ></p-toggleSwitch>
+ 
+ </div>
+ 
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CustomSwitchFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-field-custom-switch',
+                    standalone: true,
+                    imports: [ReactiveFormsModule, FormsModule, ToggleSwitch, TranslatePipe, TooltipModule, Tooltip],
+                    template: `
+ <div class="flex items-center justify-between rtl:flex-row-reverse w-full px-2 py-1"
+   style="    border-radius: var(--p-inputtext-border-radius);">
+ 
+ 
+   <label [for]="id" class="font-bold text-lg text-gray-800">
+     {{ (to.label ?? '') | translate }}
+ 
+     @if (to.required) {
+       <span class="text-red-500">*</span>
+     }
+   </label>
+ 
+   <!-- التبديل نفسه -->
+   <p-toggleSwitch
+     [formControl]="formControl"
+     [inputId]="id"
+     [disabled]="to.disabled || false"
+     [pTooltip]="field.props['tooltip']"
+     [styleClass]="''"
+     (onChange)="updateModel($event.checked)"
+   ></p-toggleSwitch>
+ 
+ </div>
+ 
+ `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CustomSwitchFieldComponent, CustomSwitchModule };
+//# sourceMappingURL=es.framework-ng.ui.core-custom-switch.mjs.map

package/fesm2022/es.framework-ng.ui.core-custom-switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"es.framework-ng.ui.core-custom-switch.mjs","sources":["../../../../libs/ng.ui.core/custom-switch/src/lib/custom-switch-module.ts","../../../../libs/ng.ui.core/custom-switch/src/lib/custom-switch.ts","../../../../libs/ng.ui.core/custom-switch/src/es.framework-ng.ui.core-custom-switch.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n})\nexport class CustomSwitchModule {}\n","\r\nimport { AfterViewInit, ChangeDetectionStrategy, Component } from '@angular/core';\r\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\r\nimport { FieldType, FieldTypeConfig, FormlyAttributes } from '@ngx-formly/core';\r\nimport { TranslatePipe } from '@es.framework/ng.core/pipes';\r\nimport { ToggleSwitch } from 'primeng/toggleswitch';\r\nimport { TooltipModule, Tooltip } from 'primeng/tooltip';\r\n\r\n@Component({\r\n  selector: 'formly-field-custom-switch',\r\n    standalone: true,\r\n  imports: [ReactiveFormsModule, FormsModule, ToggleSwitch, TranslatePipe, TooltipModule, Tooltip],\r\n  template: `\r\n <div class=\"flex items-center justify-between rtl:flex-row-reverse w-full px-2 py-1\"\r\n   style=\"    border-radius: var(--p-inputtext-border-radius);\">\r\n \r\n \r\n   <label [for]=\"id\" class=\"font-bold text-lg text-gray-800\">\r\n     {{ (to.label ?? '') | translate }}\r\n \r\n     @if (to.required) {\r\n       <span class=\"text-red-500\">*</span>\r\n     }\r\n   </label>\r\n \r\n   <!-- التبديل نفسه -->\r\n   <p-toggleSwitch\r\n     [formControl]=\"formControl\"\r\n     [inputId]=\"id\"\r\n     [disabled]=\"to.disabled || false\"\r\n     [pTooltip]=\"field.props['tooltip']\"\r\n     [styleClass]=\"''\"\r\n     (onChange)=\"updateModel($event.checked)\"\r\n   ></p-toggleSwitch>\r\n \r\n </div>\r\n \r\n `,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class CustomSwitchFieldComponent   extends FieldType<FieldTypeConfig>  implements AfterViewInit {\r\n\r\n  updateModel(value: boolean) {\r\n    this.formControl.setValue(value);\r\n\r\n    // التحويل الآمن للمفتاح\r\n    const key = Array.isArray(this.key) ? this.key.join('.') : this.key;\r\n\r\n    if (this.model && key) {\r\n      this.model[key] = value ? 1 : 2;\r\n    }\r\n  }\r\n\r\n ngAfterViewInit() {\r\n  const key = Array.isArray(this.key) ? this.key.join('.') : this.key;\r\n\r\n  if (!key) return;\r\n\r\n  if (this.model[key] === undefined) {\r\n    this.model[key] = 1;\r\n    this.formControl.setValue(true);\r\n  }\r\n  else if (this.model[key] === 1) {\r\n    this.formControl.setValue(true);\r\n  }\r\n  else if (this.model[key] === 2) {\r\n    this.formControl.setValue(false);\r\n  }\r\n\r\n  // ✅ تأكد أن الموديل دائماً رقم 1 أو 2\r\n  this.model[key] = this.formControl.value ? 1 : 2;\r\n}\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,519 @@
+import * as i0 from '@angular/core';
+import { NgModule, inject, ChangeDetectorRef, 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, 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';
+import { DatePickerModule } from 'primeng/datepicker';
+import * as i4 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i5 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import { DialogModule } from 'primeng/dialog';
+import { TranslatePipe } from '@es.framework/ng.core/pipes';
+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 '@es.framework/ng.ui.core/form-field';
+
+class DatepickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: DatepickerModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatepickerModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+class FormlyFieldDatepicker extends FieldType {
+    datepickerComp;
+    dialogVisible = false;
+    cdr = inject(ChangeDetectorRef);
+    get mode() {
+        return this.props['mode'] || 'date';
+    }
+    dateControl = new FormControl(null);
+    timeControl = new FormControl(null);
+    ampmControl = new FormControl('AM');
+    get displayValue() {
+        const datePart = this.dateControl.value ? this.dateControl.value.toLocaleDateString() : '';
+        const timePart = this.timeControl.value && this.mode !== 'date'
+            ? `${this.timeControl.value} ${this.ampmControl.value}`
+            : '';
+        if (this.mode === 'date')
+            return datePart;
+        if (this.mode === 'time')
+            return timePart;
+        if (this.mode === 'datetime')
+            return datePart && timePart ? `${datePart} ${timePart}` : datePart || timePart || '';
+        return '';
+    }
+    ngOnInit() {
+        this.setInitialValue(this.formControl.value);
+        this.formControl.valueChanges.subscribe((value) => {
+            this.setInitialValue(value);
+        });
+    }
+    setInitialValue(value) {
+        if (!value) {
+            this.dateControl.setValue(null, { emitEvent: false });
+            this.timeControl.setValue(null, { emitEvent: false });
+            this.ampmControl.setValue('AM', { emitEvent: false });
+            return;
+        }
+        // --- 1. HANDLE DATE PART ---
+        if (this.mode !== 'time') {
+            const dateStr = value.split('T')[0];
+            let dt = null;
+            if (dateStr.includes('-')) {
+                const parts = dateStr.split('-');
+                if (parts[0].length === 4) {
+                    // Format: yyyy-MM-dd (ISO)
+                    dt = new Date(dateStr);
+                }
+                else {
+                    // Format: dd-MM-yyyy
+                    const [day, month, year] = parts;
+                    dt = new Date(`${year}-${month}-${day}`);
+                }
+            }
+            else {
+                dt = new Date(dateStr);
+            }
+            if (dt && !isNaN(dt.getTime())) {
+                this.dateControl.setValue(dt, { emitEvent: false });
+            }
+        }
+        // --- 2. HANDLE TIME PART ---
+        if (this.mode !== 'date') {
+            let timeStr = '';
+            if (this.mode === 'time') {
+                // Expecting "HH:mm:ss" or "HH:mm" or "HH:mm AM/PM"
+                timeStr = value.split(' ')[0]; // Take only the time part, ignore any existing "AM/PM" string
+            }
+            else {
+                // mode is 'datetime', expecting "yyyy-MM-ddTHH:mm:ss"
+                const tPart = value.split('T')[1];
+                if (tPart)
+                    timeStr = tPart.substring(0, 5); // Take "HH:mm"
+            }
+            if (timeStr && timeStr.includes(':')) {
+                const parts = timeStr.split(':');
+                let hours = parseInt(parts[0], 10);
+                const minutes = parseInt(parts[1], 10) || 0;
+                // Logic to determine AM/PM from 24-hour input
+                const ampm = hours >= 12 ? 'PM' : 'AM';
+                // Convert 24h to 12h for the UI input
+                hours = hours % 12;
+                if (hours === 0)
+                    hours = 12;
+                this.timeControl.setValue(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`, { emitEvent: false });
+                this.ampmControl.setValue(ampm, { emitEvent: false });
+            }
+        }
+    }
+    openDialog() {
+        this.dialogVisible = true;
+    }
+    saveDialog() {
+        this.updateModel(false);
+        this.dialogVisible = false;
+    }
+    autoFixDate(e) {
+        let v = e.target.value.replace(/\D/g, '');
+        if (v.length === 8) {
+            const dd = v.substring(0, 2);
+            const mm = v.substring(2, 4);
+            const yyyy = v.substring(4, 8);
+            const formatted = `${dd}-${mm}-${yyyy}`;
+            this.dateControl.setValue(formatted, { emitEvent: true });
+        }
+    }
+    onDateChange(UIInput) {
+        this.updateModel(UIInput);
+    }
+    onTimeInput(event) {
+        if (this.mode === 'date')
+            return;
+        let input = event.target.value;
+        input = input.replace(/\D/g, '');
+        if (input.length > 2)
+            input = input.slice(0, 2) + ':' + input.slice(2, 4);
+        input = input.slice(0, 5);
+        this.timeControl.setValue(input, { emitEvent: false });
+    }
+    onTimeChange() {
+        if (this.mode === 'date')
+            return;
+        const value = this.timeControl.value;
+        if (!value)
+            return;
+        let [hourStr, minuteStr] = value.split(':');
+        let hours = parseInt(hourStr ?? '12', 10);
+        let minutes = parseInt(minuteStr ?? '0', 10);
+        if (isNaN(hours) || hours < 1)
+            hours = 1;
+        if (hours > 12)
+            hours = 12;
+        if (isNaN(minutes) || minutes < 0)
+            minutes = 0;
+        if (minutes > 59)
+            minutes = 59;
+        this.timeControl.setValue(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
+        this.updateModel(false);
+    }
+    toggleAmPm() {
+        this.ampmControl.setValue(this.ampmControl.value === 'AM' ? 'PM' : 'AM');
+        this.updateModel(false);
+    }
+    updateModel(UIInput) {
+        const dateVal = this.dateControl.value;
+        const timeVal = this.timeControl.value;
+        const ampm = this.ampmControl.value ?? 'AM';
+        // --- CASE 1: TIME ONLY ---
+        if (this.mode === 'time') {
+            if (timeVal) {
+                let [hourStr, minuteStr] = timeVal.split(':');
+                let hours = parseInt(hourStr, 10) || 0;
+                let minutes = parseInt(minuteStr, 10) || 0;
+                // Convert 12-hour format (UI) to 24-hour format (Backend TimeSpan)
+                if (ampm === 'PM' && hours < 12)
+                    hours += 12;
+                if (ampm === 'AM' && hours === 12)
+                    hours = 0;
+                // Format as HH:mm:ss for C# TimeSpan compatibility
+                const val = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+                this.formControl.setValue(val, { emitEvent: true });
+                if (this.props.change) {
+                    this.props.change(this.field, { item: this.model });
+                    this.cdr.detectChanges();
+                }
+            }
+        }
+        // --- CASE 2: DATE ONLY ---
+        else if (this.mode === 'date') {
+            if (dateVal) {
+                let dt;
+                if (typeof dateVal === 'string' && dateVal.includes('-')) {
+                    const [day, month, year] = dateVal.split('-');
+                    const fullYear = year.length === 2 ? `20${year}` : year;
+                    dt = new Date(`${fullYear}-${month}-${day}`);
+                }
+                else {
+                    dt = new Date(dateVal);
+                }
+                if (isNaN(dt.getTime())) {
+                    dt = new Date();
+                }
+                const val = `${dt.getFullYear()}-` +
+                    `${(dt.getMonth() + 1).toString().padStart(2, '0')}-` +
+                    `${dt.getDate().toString().padStart(2, '0')}`;
+                this.formControl.setValue(val, { emitEvent: true });
+                if (this.props.change) {
+                    this.props.change(this.field, { item: this.model });
+                    this.cdr.detectChanges();
+                }
+            }
+        }
+        // --- CASE 3: DATETIME ---
+        else if (this.mode === 'datetime') {
+            if (dateVal) {
+                let hours = 0;
+                let minutes = 0;
+                if (timeVal && timeVal.trim() !== '') {
+                    const [h, m] = timeVal.split(':');
+                    hours = parseInt(h, 10) || 0;
+                    minutes = parseInt(m, 10) || 0;
+                    // Convert to 24-hour format
+                    if (ampm === 'PM' && hours < 12)
+                        hours += 12;
+                    if (ampm === 'AM' && hours === 12)
+                        hours = 0;
+                }
+                let dt;
+                if (typeof dateVal === 'string' && dateVal.includes('-')) {
+                    const [day, month, year] = dateVal.split('-');
+                    const fullYear = year.length === 2 ? `20${year}` : year;
+                    dt = new Date(`${fullYear}-${month}-${day}`);
+                }
+                else {
+                    dt = new Date(dateVal);
+                }
+                dt.setHours(hours, minutes, 0, 0);
+                if (isNaN(dt.getTime())) {
+                    this.formControl.setValue(null);
+                    return;
+                }
+                // Format as YYYY-MM-DDTHH:mm:ss
+                const val = `${dt.getFullYear()}-` +
+                    `${(dt.getMonth() + 1).toString().padStart(2, '0')}-` +
+                    `${dt.getDate().toString().padStart(2, '0')}T` +
+                    `${dt.getHours().toString().padStart(2, '0')}:` +
+                    `${dt.getMinutes().toString().padStart(2, '0')}:00`;
+                this.formControl.setValue(val, { emitEvent: true });
+                if (this.props.change) {
+                    this.props.change(this.field, { item: this.model });
+                    this.cdr.detectChanges();
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormlyFieldDatepicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FormlyFieldDatepicker, isStandalone: true, selector: "formly-field-primeng-datepicker", viewQueries: [{ propertyName: "datepickerComp", first: true, predicate: ["datepickerComp"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+
+  <p-inputGroup class="w-full">
+    <!-- [inputStyle]="{'border-left':'0'}" -->
+      @if (mode !== 'time') {
+        <!-- [(ngModel)]="dateControl.value" -->
+  <p-datepicker
+    #datepickerComp
+    [formControl]="dateControl"
+     dateFormat="dd-mm-yy"
+     dataType="string"
+    placeholder="DD-MM-YYYY"
+    [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(true)"
+    (onInput)="onDateChange(true)"
+    [selectionMode]="props['selectionMode'] || 'single'"
+  ></p-datepicker>
+  <!-- (onInput)="autoFixDate($event)" -->
+
+      }
+
+  @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' : ''"
+    />
+
+    <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>
+
+  `, 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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DialogModule }, { 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: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormlyFieldDatepicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-field-primeng-datepicker',
+                    standalone: true,
+                    imports: [
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        DatePickerModule,
+                        ButtonModule,
+                        InputTextModule,
+                        DialogModule,
+                        TranslatePipe,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        FormlyAttributes,
+                        SelectModule,
+                    ],
+                    template: `
+
+  <p-inputGroup class="w-full">
+    <!-- [inputStyle]="{'border-left':'0'}" -->
+      @if (mode !== 'time') {
+        <!-- [(ngModel)]="dateControl.value" -->
+  <p-datepicker
+    #datepickerComp
+    [formControl]="dateControl"
+     dateFormat="dd-mm-yy"
+     dataType="string"
+    placeholder="DD-MM-YYYY"
+    [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(true)"
+    (onInput)="onDateChange(true)"
+    [selectionMode]="props['selectionMode'] || 'single'"
+  ></p-datepicker>
+  <!-- (onInput)="autoFixDate($event)" -->
+
+      }
+
+  @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' : ''"
+    />
+
+    <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>
+
+  `,
+                }]
+        }], propDecorators: { datepickerComp: [{
+                type: ViewChild,
+                args: ['datepickerComp']
+            }] } });
+
+function withFormlyFieldDatepicker() {
+    return {
+        types: [
+            {
+                name: 'datepicker',
+                component: FormlyFieldDatepicker,
+                wrappers: ['form-field'],
+            },
+        ],
+    };
+}
+
+class FormlyDatepickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormlyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: FormlyDatepickerModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            DatePickerModule,
+            FormlyFormFieldModule, i1$1.FormlyModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormlyDatepickerModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            DatePickerModule,
+            FormlyFormFieldModule,
+            FormlyModule.forChild(withFormlyFieldDatepicker())] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormlyDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    // declarations: [FormlyFieldDatepicker],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        DatePickerModule,
+                        FormlyFormFieldModule,
+                        FormlyModule.forChild(withFormlyFieldDatepicker()),
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatepickerModule, FormlyDatepickerModule, withFormlyFieldDatepicker };
+//# sourceMappingURL=es.framework-ng.ui.core-datepicker.mjs.map