npm - @elite.framework/ng.ui.core - Versions diffs - 1.0.54 → 1.0.56 - Mend

@elite.framework/ng.ui.core 1.0.54 → 1.0.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/collapsible/README.md ADDED Viewed

@@ -0,0 +1,3 @@
+# @elite.framework/ng.ui.core/collapsible
+Secondary entry point of `@elite.framework/ng.ui.core`. It can be used by importing from `@elite.framework/ng.ui.core/collapsible`.

package/collapsible/index.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@angular/common';
+import { FieldWrapper } from '@ngx-formly/core';
+declare class CollapsibleModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CollapsibleModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CollapsibleModule, never, [typeof i1.CommonModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CollapsibleModule>;
+}
+declare class CollapsibleWrapper extends FieldWrapper {
+    isCollapsed: boolean;
+    toggleCollapse(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CollapsibleWrapper, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CollapsibleWrapper, "formly-wrapper-collapsible", never, {}, {}, never, never, true, never>;
+}
+export { CollapsibleModule, CollapsibleWrapper };

package/fesm2022/elite.framework-ng.ui.core-collapsible.mjs ADDED Viewed

@@ -0,0 +1,86 @@
+import * as i0 from '@angular/core';
+import { NgModule, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FieldWrapper, FormlyModule } from '@ngx-formly/core';
+class CollapsibleModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CollapsibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: CollapsibleModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CollapsibleModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CollapsibleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+class CollapsibleWrapper extends FieldWrapper {
+    isCollapsed = true;
+    toggleCollapse() {
+        this.isCollapsed = !this.isCollapsed;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CollapsibleWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: CollapsibleWrapper, isStandalone: true, selector: "formly-wrapper-collapsible", usesInheritance: true, ngImport: i0, template: `
+    <div class="w-full flex flex-col rounded-lg shadow-md overflow-hidden border border-gray-300 bg-white">
+      <!-- Header -->
+      <div
+        class="flex items-center p-4 bg-gray-50 border-b border-gray-200 cursor-pointer transition duration-200 hover:bg-gray-100"
+        (click)="toggleCollapse()"
+      >
+        <div class="flex items-center gap-2">
+          <i *ngIf="props['icon']" class="{{ props['icon'] }} text-blue-500 text-lg"></i>
+          <span class="text-lg font-semibold text-gray-700">{{ props.label }}</span>
+        </div>
+        <i
+          class="pi mr-auto text-gray-600 text-xl transition-transform duration-300"
+          [ngClass]="{ 'pi-angle-up': !isCollapsed, 'pi-angle-down': isCollapsed }"
+        ></i>
+      </div>
+      <!-- Body -->
+      <div [ngClass]="{ hidden: isCollapsed, 'p-6': !isCollapsed }">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormlyModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CollapsibleWrapper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-wrapper-collapsible',
+                    standalone: true,
+                    imports: [CommonModule, FormlyModule],
+                    template: `
+    <div class="w-full flex flex-col rounded-lg shadow-md overflow-hidden border border-gray-300 bg-white">
+      <!-- Header -->
+      <div
+        class="flex items-center p-4 bg-gray-50 border-b border-gray-200 cursor-pointer transition duration-200 hover:bg-gray-100"
+        (click)="toggleCollapse()"
+      >
+        <div class="flex items-center gap-2">
+          <i *ngIf="props['icon']" class="{{ props['icon'] }} text-blue-500 text-lg"></i>
+          <span class="text-lg font-semibold text-gray-700">{{ props.label }}</span>
+        </div>
+        <i
+          class="pi mr-auto text-gray-600 text-xl transition-transform duration-300"
+          [ngClass]="{ 'pi-angle-up': !isCollapsed, 'pi-angle-down': isCollapsed }"
+        ></i>
+      </div>
+      <!-- Body -->
+      <div [ngClass]="{ hidden: isCollapsed, 'p-6': !isCollapsed }">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { CollapsibleModule, CollapsibleWrapper };
+//# sourceMappingURL=elite.framework-ng.ui.core-collapsible.mjs.map

package/fesm2022/elite.framework-ng.ui.core-collapsible.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"elite.framework-ng.ui.core-collapsible.mjs","sources":["../tmp-esm2022/collapsible/lib/collapsible-module.js","../tmp-esm2022/collapsible/lib/collapsible-wrapper.js","../tmp-esm2022/collapsible/elite.framework-ng.ui.core-collapsible.js"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport * as i0 from \"@angular/core\";\nexport class CollapsibleModule {\n static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: CollapsibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\n static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"20.1.8\", ngImport: i0, type: CollapsibleModule, imports: [CommonModule] });\n static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: CollapsibleModule, imports: [CommonModule] });\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: CollapsibleModule, decorators: [{\n type: NgModule,\n args: [{\n imports: [CommonModule],\n }]\n }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2libGUtbW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9uZy51aS5jb3JlL2NvbGxhcHNpYmxlL3NyYy9saWIvY29sbGFwc2libGUtbW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQUsvQyxNQUFNLE9BQU8saUJBQWlCO3VHQUFqQixpQkFBaUI7d0dBQWpCLGlCQUFpQixZQUZsQixZQUFZO3dHQUVYLGlCQUFpQixZQUZsQixZQUFZOzsyRkFFWCxpQkFBaUI7a0JBSDdCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO2lCQUN4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sbGFwc2libGVNb2R1bGUge31cbiJdfQ==","import { Component } from '@angular/core';\nimport { FieldWrapper, FormlyModule } from '@ngx-formly/core';\nimport { CommonModule } from '@angular/common';\nimport * as i0 from \"@angular/core\";\nimport * as i1 from \"@angular/common\";\nexport class CollapsibleWrapper extends FieldWrapper {\n isCollapsed = true;\n toggleCollapse() {\n this.isCollapsed = !this.isCollapsed;\n }\n static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: CollapsibleWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });\n static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"20.1.8\", type: CollapsibleWrapper, isStandalone: true, selector: \"formly-wrapper-collapsible\", usesInheritance: true, ngImport: i0, template: `\r\n <div class=\"w-full flex flex-col rounded-lg shadow-md overflow-hidden border border-gray-300 bg-white\">\r\n \r\n <div\r\n class=\"flex items-center p-4 bg-gray-50 border-b border-gray-200 cursor-pointer transition duration-200 hover:bg-gray-100\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n <i *ngIf=\"props['icon']\" class=\"{{ props['icon'] }} text-blue-500 text-lg\"></i>\r\n <span class=\"text-lg font-semibold text-gray-700\">{{ props.label }}</span>\r\n </div>\r\n <i\r\n class=\"pi mr-auto text-gray-600 text-xl transition-transform duration-300\"\r\n [ngClass]=\"{ 'pi-angle-up': !isCollapsed, 'pi-angle-down': isCollapsed }\"\r\n ></i>\r\n </div>\r\n\r\n \r\n <div [ngClass]=\"{ hidden: isCollapsed, 'p-6': !isCollapsed }\">\r\n <ng-container #fieldComponent></ng-container>\r\n </div>\r\n </div>\r\n `, isInline: true, dependencies: [{ kind: \"ngmodule\", type: CommonModule }, { kind: \"directive\", type: i1.NgClass, selector: \"[ngClass]\", inputs: [\"class\", \"ngClass\"] }, { kind: \"directive\", type: i1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"ngmodule\", type: FormlyModule }] });\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: CollapsibleWrapper, decorators: [{\n type: Component,\n args: [{\n selector: 'formly-wrapper-collapsible',\n standalone: true,\n imports: [CommonModule, FormlyModule],\n template: `\r\n <div class=\"w-full flex flex-col rounded-lg shadow-md overflow-hidden border border-gray-300 bg-white\">\r\n \r\n <div\r\n class=\"flex items-center p-4 bg-gray-50 border-b border-gray-200 cursor-pointer transition duration-200 hover:bg-gray-100\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n <i *ngIf=\"props['icon']\" class=\"{{ props['icon'] }} text-blue-500 text-lg\"></i>\r\n <span class=\"text-lg font-semibold text-gray-700\">{{ props.label }}</span>\r\n </div>\r\n <i\r\n class=\"pi mr-auto text-gray-600 text-xl transition-transform duration-300\"\r\n [ngClass]=\"{ 'pi-angle-up': !isCollapsed, 'pi-angle-down': isCollapsed }\"\r\n ></i>\r\n </div>\r\n\r\n \r\n <div [ngClass]=\"{ hidden: isCollapsed, 'p-6': !isCollapsed }\">\r\n <ng-container #fieldComponent></ng-container>\r\n </div>\r\n </div>\r\n `,\n }]\n }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2libGUtd3JhcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbmcudWkuY29yZS9jb2xsYXBzaWJsZS9zcmMvbGliL2NvbGxhcHNpYmxlLXdyYXBwZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQzlELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7O0FBOEIvQyxNQUFNLE9BQU8sa0JBQW1CLFNBQVEsWUFBWTtJQUNsRCxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBRW5CLGNBQWM7UUFDWixJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUN2QyxDQUFDO3VHQUxVLGtCQUFrQjsyRkFBbEIsa0JBQWtCLDZHQXhCbkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQlQsMkRBdkJTLFlBQVksZ09BQUUsWUFBWTs7MkZBeUJ6QixrQkFBa0I7a0JBNUI5QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSw0QkFBNEI7b0JBQ3RDLFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsWUFBWSxDQUFDO29CQUNyQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQlQ7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRmllbGRXcmFwcGVyLCBGb3JtbHlNb2R1bGUgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZm9ybWx5LXdyYXBwZXItY29sbGFwc2libGUnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRm9ybWx5TW9kdWxlXSxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGRpdiBjbGFzcz1cInctZnVsbCBmbGV4IGZsZXgtY29sIHJvdW5kZWQtbGcgc2hhZG93LW1kIG92ZXJmbG93LWhpZGRlbiBib3JkZXIgYm9yZGVyLWdyYXktMzAwIGJnLXdoaXRlXCI+XHJcbiAgICAgIDwhLS0gSGVhZGVyIC0tPlxyXG4gICAgICA8ZGl2XHJcbiAgICAgICAgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBwLTQgYmctZ3JheS01MCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgY3Vyc29yLXBvaW50ZXIgdHJhbnNpdGlvbiBkdXJhdGlvbi0yMDAgaG92ZXI6YmctZ3JheS0xMDBcIlxyXG4gICAgICAgIChjbGljayk9XCJ0b2dnbGVDb2xsYXBzZSgpXCJcclxuICAgICAgPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBnYXAtMlwiPlxyXG4gICAgICAgICAgPGkgKm5nSWY9XCJwcm9wc1snaWNvbiddXCIgY2xhc3M9XCJ7eyBwcm9wc1snaWNvbiddIH19IHRleHQtYmx1ZS01MDAgdGV4dC1sZ1wiPjwvaT5cclxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC1sZyBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj57eyBwcm9wcy5sYWJlbCB9fTwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8aVxyXG4gICAgICAgICAgY2xhc3M9XCJwaSBtci1hdXRvIHRleHQtZ3JheS02MDAgdGV4dC14bCB0cmFuc2l0aW9uLXRyYW5zZm9ybSBkdXJhdGlvbi0zMDBcIlxyXG4gICAgICAgICAgW25nQ2xhc3NdPVwieyAncGktYW5nbGUtdXAnOiAhaXNDb2xsYXBzZWQsICdwaS1hbmdsZS1kb3duJzogaXNDb2xsYXBzZWQgfVwiXHJcbiAgICAgICAgPjwvaT5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8IS0tIEJvZHkgLS0+XHJcbiAgICAgIDxkaXYgW25nQ2xhc3NdPVwieyBoaWRkZW46IGlzQ29sbGFwc2VkLCAncC02JzogIWlzQ29sbGFwc2VkIH1cIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICNmaWVsZENvbXBvbmVudD48L25nLWNvbnRhaW5lcj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICBgLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ29sbGFwc2libGVXcmFwcGVyIGV4dGVuZHMgRmllbGRXcmFwcGVyIHtcclxuICBpc0NvbGxhcHNlZCA9IHRydWU7XHJcblxyXG4gIHRvZ2dsZUNvbGxhcHNlKCkge1xyXG4gICAgdGhpcy5pc0NvbGxhcHNlZCA9ICF0aGlzLmlzQ29sbGFwc2VkO1xyXG4gIH1cclxufVxyXG4iXX0=","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxpdGUuZnJhbWV3b3JrLW5nLnVpLmNvcmUtY29sbGFwc2libGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL25nLnVpLmNvcmUvY29sbGFwc2libGUvc3JjL2VsaXRlLmZyYW1ld29yay1uZy51aS5jb3JlLWNvbGxhcHNpYmxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19"],"names":[],"mappings":"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"}

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

@@ -1,15 +1,22 @@
 import * as i0 from '@angular/core';
-import { NgModule, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgModule, 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 { FormlyFormFieldModule } from '@elite.framework/ng.ui.core/form-field';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
 import * as i1 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
-import * as i2 from 'primeng/datepicker';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
-import * as i3 from '@ngx-translate/core';
+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 { TranslateModule } from '@ngx-translate/core';
+import { FormlyFormFieldModule } from '@elite.framework/ng.ui.core/form-field';
 class DatepickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: DatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -24,139 +31,315 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
         }] });
 class FormlyFieldDatepicker extends FieldType {
-    defaultOptions = {
-        props: {
-            numberOfMonths: 1,
-        },
-    };
+    dialogVisible = false;
+    get mode() {
+        return this.props['mode'] || 'datetime';
+    }
+    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() {
-        const value = this.formControl.value;
-        // Convert incoming string to Date
-        if (typeof value === 'string') {
-            const parsed = new Date(value);
-            if (!isNaN(parsed.getTime())) {
-                this.formControl.setValue(parsed, { emitEvent: false });
-            }
-        }
-        // Convert back to string when user selects date (if needed)
-        this.formControl.valueChanges.subscribe(val => {
-            if (val instanceof Date && this.props?.dataType === 'string') {
-                const pad = (n) => n.toString().padStart(2, '0');
-                const year = val.getFullYear();
-                const month = pad(val.getMonth() + 1); // months are 0-based
-                const day = pad(val.getDate());
-                let result = `${year}-${month}-${day}`;
-                if (this.props?.showTime) {
-                    const hours = pad(val.getHours());
-                    const minutes = pad(val.getMinutes());
-                    const seconds = pad(val.getSeconds());
-                    result += `T${hours}:${minutes}:${seconds}`;
-                }
-                if (this.formControl.value !== result) {
-                    this.formControl.setValue(result, { emitEvent: false });
-                }
-            }
+        this.setInitialValue(this.formControl.value);
+        this.formControl.valueChanges.subscribe((value) => {
+            this.setInitialValue(value);
         });
     }
-    onDateSelect(date) {
-        if (this.props?.dataType === 'string') {
-            const formatted = this.props.showTime === true
-                ? this.toLocalDateTimeString(date)
-                : this.toLocalDateOnlyString(date);
-            this.formControl.setValue(formatted);
+    setInitialValue(value) {
+        if (!value)
+            return;
+        if (this.mode !== 'time') {
+            // parse date part
+            const dateStr = value.split('T')[0];
+            const dt = new Date(dateStr);
+            if (!isNaN(dt.getTime()))
+                this.dateControl.setValue(dt, { emitEvent: false });
         }
-        else {
-            this.formControl.setValue(date);
+        if (this.mode !== 'date') {
+            // parse time part
+            let timeStr = '';
+            if (this.mode === 'time') {
+                timeStr = value;
+            }
+            else {
+                const tPart = value.split('T')[1];
+                if (tPart)
+                    timeStr = tPart.substring(0, 5); // hh:mm
+            }
+            if (timeStr) {
+                const [hourStr, minuteStr] = timeStr.split(':');
+                let hours = parseInt(hourStr ?? '12', 10);
+                const minutes = parseInt(minuteStr ?? '0', 10);
+                const ampm = hours >= 12 ? 'PM' : 'AM';
+                hours = hours % 12 || 12;
+                this.timeControl.setValue(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`, { emitEvent: false });
+                this.ampmControl.setValue(ampm, { emitEvent: false });
+            }
         }
     }
-    onTouched() {
-        this.formControl.markAsTouched();
+    openDialog() {
+        this.dialogVisible = true;
+    }
+    saveDialog() {
+        this.updateModel();
+        this.dialogVisible = false;
+    }
+    onDateChange() {
+        this.updateModel();
     }
-    toLocalDateOnlyString(date) {
-        const pad = (n) => n.toString().padStart(2, '0');
-        const year = date.getFullYear();
-        const month = pad(date.getMonth() + 1);
-        const day = pad(date.getDate());
-        return `${year}-${month}-${day}`;
+    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 });
     }
-    toLocalDateTimeString(date) {
-        const pad = (n) => n.toString().padStart(2, '0');
-        const year = date.getFullYear();
-        const month = pad(date.getMonth() + 1);
-        const day = pad(date.getDate());
-        const hours = pad(date.getHours());
-        const minutes = pad(date.getMinutes());
-        const seconds = pad(date.getSeconds());
-        return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+    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')}`);
+    }
+    toggleAmPm() {
+        this.ampmControl.setValue(this.ampmControl.value === 'AM' ? 'PM' : 'AM');
+    }
+    updateModel() {
+        const dateVal = this.dateControl.value;
+        const timeVal = this.timeControl.value;
+        const ampm = this.ampmControl.value ?? 'AM';
+        if (this.mode === 'date') {
+            if (dateVal) {
+                const val = `${dateVal.getFullYear()}-${(dateVal.getMonth() + 1).toString().padStart(2, '0')}-${dateVal.getDate().toString().padStart(2, '0')}`;
+                this.formControl.setValue(val);
+            }
+        }
+        else if (this.mode === 'time') {
+            if (timeVal)
+                this.formControl.setValue(`${timeVal} ${ampm}`);
+        }
+        else if (this.mode === 'datetime') {
+            if (dateVal && timeVal) {
+                let [hoursStr, minutesStr] = timeVal.split(':');
+                let hours = parseInt(hoursStr ?? '12', 10);
+                const minutes = parseInt(minutesStr ?? '0', 10);
+                if (ampm === 'PM' && hours < 12)
+                    hours += 12;
+                if (ampm === 'AM' && hours === 12)
+                    hours = 0;
+                const dt = new Date(dateVal);
+                dt.setHours(hours, minutes, 0, 0);
+                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);
+            }
+        }
     }
     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: `
-    <p-datepicker
-      [dataType]="props.dataType ?? 'string'"
-      [dateFormat]="props.dateFormat ?? (props.showTime ? 'yy-mm-dd' : 'yy-mm-dd')"
-      [hourFormat]="props.hourFormat || '12'"
-      [timeOnly]="props.timeOnly || false"
-      [icon]="props.icon"
-      [showTime]="props.showTime || false"
-      [showIcon]="props.showIcon || true"
-      [showButtonBar]="props.showButtonBar"
-      [showOtherMonths]="props.showOtherMonths"
-      [selectOtherMonths]="props.selectOtherMonths"
-      [selectionMode]="props.selectionMode || 'single'"
-      [numberOfMonths]="props.numberOfMonths || 0"
-      [inline]="props.inline"
-      [readonlyInput]="props.readonlyInput"
-      [touchUI]="props.touchUI"
-      [formControl]="formControl"
-      [formlyAttributes]="field"
-      [placeholder]="(props['placeholder'] ?? '') | translate"
-      [styleClass]="'w-full rounded-none block text-base'"
-      appendTo="body"
-      (onSelect)="onDateSelect($event)"
-      (onBlur)="onTouched()"
-    ></p-datepicker>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DatePickerModule }, { kind: "component", type: i2.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: FormlyFormFieldModule }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    <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>
+        <!-- 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"
+          />
+          <!-- 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>
+      <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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: FormlyFieldDatepicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'formly-field-primeng-datepicker',
-                    template: `
-    <p-datepicker
-      [dataType]="props.dataType ?? 'string'"
-      [dateFormat]="props.dateFormat ?? (props.showTime ? 'yy-mm-dd' : 'yy-mm-dd')"
-      [hourFormat]="props.hourFormat || '12'"
-      [timeOnly]="props.timeOnly || false"
-      [icon]="props.icon"
-      [showTime]="props.showTime || false"
-      [showIcon]="props.showIcon || true"
-      [showButtonBar]="props.showButtonBar"
-      [showOtherMonths]="props.showOtherMonths"
-      [selectOtherMonths]="props.selectOtherMonths"
-      [selectionMode]="props.selectionMode || 'single'"
-      [numberOfMonths]="props.numberOfMonths || 0"
-      [inline]="props.inline"
-      [readonlyInput]="props.readonlyInput"
-      [touchUI]="props.touchUI"
-      [formControl]="formControl"
-      [formlyAttributes]="field"
-      [placeholder]="(props['placeholder'] ?? '') | translate"
-      [styleClass]="'w-full rounded-none block text-base'"
-      appendTo="body"
-      (onSelect)="onDateSelect($event)"
-      (onBlur)="onTouched()"
-    ></p-datepicker>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [
+                        FormsModule,
                         CommonModule,
                         ReactiveFormsModule,
                         DatePickerModule,
-                        FormlyFormFieldModule,
-                        FormlyAttributes,
-                        TranslateModule,
+                        ButtonModule,
+                        InputTextModule,
+                        DialogModule,
+                        TranslateModule
                     ],
+                    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>
+        <!-- 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"
+          />
+          <!-- 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>
+      <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>
+  `,
                 }]
         }] });