@dcsl/flex-ui 0.0.14 → 0.0.17

package/fesm2022/dcsl-flex-ui.mjs

@@ -1,10 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, Renderer2, HostListener, ViewChild, Component, input, EventEmitter, effect, Output, ContentChild, Input, ContentChildren, output, model, signal } from '@angular/core';
+import { inject, Renderer2, HostListener, ViewChild, Component, input, EventEmitter, effect, Output, ContentChild, Input, ContentChildren, output, model, signal, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import dayjs from 'dayjs';
+import calendarSystems from '@calidy/dayjs-calendarsystems';
+import PersianCalendarSystem from '@calidy/dayjs-calendarsystems/calendarSystems/PersianCalendarSystem';
+import HijriCalendarSystem from '@calidy/dayjs-calendarsystems/calendarSystems/HijriCalendarSystem';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 
 class FlexPanelComponent {
     resizeObserver;
@@ -437,25 +441,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 //
 // ✅ Umm al-Qura Hijri calendar with Latin digits
 //
-const hijriFmt = new Intl.DateTimeFormat('en-u-ca-islamic-umalqura-nu-latn', {
+const hijriFmt$1 = new Intl.DateTimeFormat('en-u-ca-islamic-umalqura-nu-latn', {
     day: 'numeric',
     month: 'numeric',
     year: 'numeric'
 });
-const hijriMonthNamesEn = [
+const hijriMonthNamesEn$1 = [
     'Muharram', 'Safar', 'Rabi I', 'Rabi II',
     'Jumada I', 'Jumada II', 'Rajab', 'Sha’ban',
     'Ramadan', 'Shawwal', 'Dhu al-Qi’dah', 'Dhu al-Hijjah'
 ];
-const hijriMonthNamesAr = [
+const hijriMonthNamesAr$1 = [
     'محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر',
     'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان',
     'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة'
 ];
-const weekDaysEn = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-const weekDaysAr = ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'];
-function hijriFromGregorian(g) {
-    const parts = hijriFmt.formatToParts(g);
+const weekDaysEn$1 = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const weekDaysAr$1 = ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'];
+function hijriFromGregorian$1(g) {
+    const parts = hijriFmt$1.formatToParts(g);
     //console.log(parts);
     const map = {};
     for (const p of parts)
@@ -463,26 +467,26 @@ function hijriFromGregorian(g) {
     const n = (k) => parseInt(map[k] ?? '0', 10);
     return { hy: n('year'), hm: n('month'), hd: n('day') };
 }
-function compareHijri(a, b) {
+function compareHijri$1(a, b) {
     if (a.hy !== b.hy)
         return a.hy - b.hy;
     if (a.hm !== b.hm)
         return a.hm - b.hm;
     return a.hd - b.hd;
 }
-function findGregorianForHijri(target) {
+function findGregorianForHijri$1(target) {
     let lo = new Date(1937, 0, 1).getTime();
     let hi = new Date(2076, 11, 31).getTime();
     const dayMs = 86400000;
     while (lo <= hi) {
         const mid = Math.floor((lo + hi) / 2);
-        const h = hijriFromGregorian(new Date(mid));
-        compareHijri(h, target) < 0 ? (lo = mid + dayMs) : (hi = mid - dayMs);
+        const h = hijriFromGregorian$1(new Date(mid));
+        compareHijri$1(h, target) < 0 ? (lo = mid + dayMs) : (hi = mid - dayMs);
     }
     let d = new Date(lo);
     while (true) {
-        const h = hijriFromGregorian(d);
-        const cmp = compareHijri(h, target);
+        const h = hijriFromGregorian$1(d);
+        const cmp = compareHijri$1(h, target);
         if (cmp === 0)
             return d;
         if (cmp > 0)
@@ -498,35 +502,35 @@ class HijriCalendarComponent {
     minDate = null;
     maxDate = null;
     /** Month + weekday language: 'en' or 'ar' */
-    monthLang = 'en';
+    monthLang = 'ar';
     hy = signal(0, ...(ngDevMode ? [{ debugName: "hy" }] : []));
     hm = signal(0, ...(ngDevMode ? [{ debugName: "hm" }] : []));
     selectedMonth = 1;
     selectedYear = 1447;
     yearRange = [];
     get hijriMonthsEn() {
-        return hijriMonthNamesEn;
+        return hijriMonthNamesEn$1;
     }
     get hijriMonthsAr() {
-        return hijriMonthNamesAr;
+        return hijriMonthNamesAr$1;
     }
     get hijriMonths() {
-        return this.monthLang === 'ar' ? hijriMonthNamesAr : hijriMonthNamesEn;
+        return this.monthLang === 'ar' ? hijriMonthNamesAr$1 : hijriMonthNamesEn$1;
     }
     get weekDays() {
-        return this.monthLang === 'ar' ? weekDaysAr : weekDaysEn;
+        return this.monthLang === 'ar' ? weekDaysAr$1 : weekDaysEn$1;
     }
     get weekDaysEn() {
-        return weekDaysEn;
+        return weekDaysEn$1;
     }
     get weekDaysAr() {
-        return weekDaysAr;
+        return weekDaysAr$1;
     }
     get currentMonthName() {
         return this.hijriMonths[this.selectedMonth - 1];
     }
     constructor() {
-        const h = hijriFromGregorian(new Date());
+        const h = hijriFromGregorian$1(new Date());
         this.hy.set(h.hy);
         this.hm.set(h.hm);
         this.selectedYear = h.hy;
@@ -537,7 +541,7 @@ class HijriCalendarComponent {
     }
     ngOnChanges() {
         if (this.value) {
-            const h = hijriFromGregorian(this.value);
+            const h = hijriFromGregorian$1(this.value);
             this.hy.set(h.hy);
             this.hm.set(h.hm);
             this.selectedYear = h.hy;
@@ -546,8 +550,8 @@ class HijriCalendarComponent {
         this.buildYearRange();
     }
     buildYearRange() {
-        const minH = this.minDate ? hijriFromGregorian(this.minDate) : { hy: 1356, hm: 1, hd: 1 };
-        const maxH = this.maxDate ? hijriFromGregorian(this.maxDate) : { hy: 1499, hm: 12, hd: 30 };
+        const minH = this.minDate ? hijriFromGregorian$1(this.minDate) : { hy: 1356, hm: 1, hd: 1 };
+        const maxH = this.maxDate ? hijriFromGregorian$1(this.maxDate) : { hy: 1499, hm: 12, hd: 30 };
         this.yearRange = [];
         for (let y = minH.hy; y <= maxH.hy; y++) {
             this.yearRange.push(y);
@@ -558,18 +562,18 @@ class HijriCalendarComponent {
         this.hm.set(this.selectedMonth);
     }
     firstOfMonth() {
-        return findGregorianForHijri({ hy: this.hy(), hm: this.hm(), hd: 1 });
+        return findGregorianForHijri$1({ hy: this.hy(), hm: this.hm(), hd: 1 });
     }
     cells() {
         const firstG = this.firstOfMonth();
-        const firstH = hijriFromGregorian(firstG);
+        const firstH = hijriFromGregorian$1(firstG);
         const start = new Date(firstG);
         start.setDate(firstG.getDate() - firstG.getDay());
         const result = [];
         for (let i = 0; i < 42; i++) {
             const g = new Date(start);
             g.setDate(start.getDate() + i);
-            const h = hijriFromGregorian(g);
+            const h = hijriFromGregorian$1(g);
             let disabled = false;
             if (this.minDate && g < this.stripTime(this.minDate))
                 disabled = true;
@@ -613,13 +617,13 @@ class HijriCalendarComponent {
     canPrev() {
         if (!this.minDate)
             return true;
-        const minH = hijriFromGregorian(this.stripTime(this.minDate));
+        const minH = hijriFromGregorian$1(this.stripTime(this.minDate));
         return this.hy() > minH.hy || (this.hy() === minH.hy && this.hm() > minH.hm);
     }
     canNext() {
         if (!this.maxDate)
             return true;
-        const maxH = hijriFromGregorian(this.stripTime(this.maxDate));
+        const maxH = hijriFromGregorian$1(this.stripTime(this.maxDate));
         return this.hy() < maxH.hy || (this.hy() === maxH.hy && this.hm() < maxH.hm);
     }
     isToday(g) {
@@ -637,7 +641,7 @@ class HijriCalendarComponent {
     select(c) {
         if (c.disabled)
             return;
-        console.log(c);
+        //console.log(c);
         this.value = c.g;
         this.valueChange.emit(this.value);
     }
@@ -645,11 +649,11 @@ class HijriCalendarComponent {
         return new Date(d.getFullYear(), d.getMonth(), d.getDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HijriCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate", monthLang: "monthLang" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card border-0 p-0\">\r\n    <div class=\"card-header p-1\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n            <button class=\"btn btn-sm\" (click)=\"prevMonth()\" [disabled]=\"!canPrev()\">&laquo;</button>\r\n            <div class=\"d-flex justify-content-center gap-1\">\r\n                <select class=\"form-select form-select-sm w-auto\" [(ngModel)]=\"selectedMonth\"\r\n                    (change)=\"onMonthYearChange()\">\r\n                    @for (m of hijriMonths; track $index) {\r\n                    <option [value]=\"$index + 1\">{{ hijriMonthsAr[$index] }} ({{ hijriMonthsEn[$index] }})</option>\r\n                    }\r\n                </select>\r\n                <select class=\"form-select form-select-sm    w-auto\" [(ngModel)]=\"selectedYear\"\r\n                    (change)=\"onMonthYearChange()\">\r\n                    @for (y of yearRange; track y) {\r\n                    <option [value]=\"y\">{{ y }}</option>\r\n                    }\r\n                </select>\r\n            </div>\r\n            <button class=\"btn btn-sm\" (click)=\"nextMonth()\" [disabled]=\"!canNext()\">&raquo;</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-body p-1\">\r\n\r\n\r\n        <!-- month/year pickers -->\r\n\r\n\r\n        <!-- weekday labels -->\r\n        <div class=\"grid\">\r\n            @for (w of weekDays; track $index) {\r\n            <div class=\"col fw-bold\">{{ w }}</div>\r\n            }\r\n\r\n        </div>\r\n\r\n        <!-- calendar cells -->\r\n        <div class=\"grid\">\r\n            <button *ngFor=\"let c of cells()\" class=\"cell btn rounded-0\" [class.muted]=\"!c.inCurrentMonth\"\r\n                [class.today]=\"isToday(c.g)\" [class.selected]=\"isSelected(c.g)\" [disabled]=\"c.disabled\"\r\n                (click)=\"select(c)\">\r\n                {{ c.h.hd }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".grid{display:grid;grid-template-columns:repeat(7,1fr)}.cell{border:1px solid #ddd}.cell.muted{opacity:.5}.cell.selected{background-color:#0d6efd;color:#fff}.cell:disabled{background-color:#f8f9fa;color:#aaa;cursor:not-allowed}.col{text-align:center}.btn{font-size:90%;padding:.25rem}.btn:hover{background-color:azure}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate", monthLang: "monthLang" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card border-0 p-0\">\r\n    <div class=\"card-header p-1\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n            <button class=\"btn btn-sm\" (click)=\"prevMonth()\" [disabled]=\"!canPrev()\">&laquo;</button>\r\n            <div class=\"d-flex justify-content-center gap-1\">\r\n                <select class=\"form-select form-select-sm w-auto\" [(ngModel)]=\"selectedMonth\"\r\n                    (change)=\"onMonthYearChange()\">\r\n                    @for (m of hijriMonths; track $index) {\r\n                    <option [value]=\"$index + 1\">{{ hijriMonthsAr[$index] }} ({{ hijriMonthsEn[$index] }})</option>\r\n                    }\r\n                </select>\r\n                <select class=\"form-select form-select-sm    w-auto\" [(ngModel)]=\"selectedYear\"\r\n                    (change)=\"onMonthYearChange()\">\r\n                    @for (y of yearRange; track y) {\r\n                    <option [value]=\"y\">{{ y }}</option>\r\n                    }\r\n                </select>\r\n            </div>\r\n            <button class=\"btn btn-sm\" (click)=\"nextMonth()\" [disabled]=\"!canNext()\">&raquo;</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-body p-1\">\r\n\r\n\r\n        <!-- month/year pickers -->\r\n\r\n\r\n        <!-- weekday labels -->\r\n        <div class=\"grid\">\r\n            @for (w of weekDays; track $index) {\r\n            <div class=\"col fw-bold border pb-1\">{{ w }}</div>\r\n            }\r\n\r\n        </div>\r\n\r\n        <!-- calendar cells -->\r\n        <div class=\"grid\">\r\n            <button *ngFor=\"let c of cells()\" class=\"cell btn rounded-0\" [class.muted]=\"!c.inCurrentMonth\"\r\n                [class.today]=\"isToday(c.g)\" [class.selected]=\"isSelected(c.g)\" [disabled]=\"c.disabled\"\r\n                (click)=\"select(c)\">\r\n                {{ c.h.hd }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".grid{display:grid;grid-template-columns:repeat(7,1fr)}.cell{border:1px solid #ddd}.cell.muted{opacity:.5}.cell.selected{background-color:#0d6efd;color:#fff}.cell:disabled{background-color:#f8f9fa;color:#aaa;cursor:not-allowed}.col{text-align:center}.btn{font-size:90%;padding:.25rem .1rem}.btn:hover{background-color:azure}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HijriCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-hijri-calendar', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"card border-0 p-0\">\r\n    <div class=\"card-header p-1\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n            <button class=\"btn btn-sm\" (click)=\"prevMonth()\" [disabled]=\"!canPrev()\">&laquo;</button>\r\n            <div class=\"d-flex justify-content-center gap-1\">\r\n                <select class=\"form-select form-select-sm w-auto\" [(ngModel)]=\"selectedMonth\"\r\n                    (change)=\"onMonthYearChange()\">\r\n                    @for (m of hijriMonths; track $index) {\r\n                    <option [value]=\"$index + 1\">{{ hijriMonthsAr[$index] }} ({{ hijriMonthsEn[$index] }})</option>\r\n                    }\r\n                </select>\r\n                <select class=\"form-select form-select-sm    w-auto\" [(ngModel)]=\"selectedYear\"\r\n                    (change)=\"onMonthYearChange()\">\r\n                    @for (y of yearRange; track y) {\r\n                    <option [value]=\"y\">{{ y }}</option>\r\n                    }\r\n                </select>\r\n            </div>\r\n            <button class=\"btn btn-sm\" (click)=\"nextMonth()\" [disabled]=\"!canNext()\">&raquo;</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-body p-1\">\r\n\r\n\r\n        <!-- month/year pickers -->\r\n\r\n\r\n        <!-- weekday labels -->\r\n        <div class=\"grid\">\r\n            @for (w of weekDays; track $index) {\r\n            <div class=\"col fw-bold\">{{ w }}</div>\r\n            }\r\n\r\n        </div>\r\n\r\n        <!-- calendar cells -->\r\n        <div class=\"grid\">\r\n            <button *ngFor=\"let c of cells()\" class=\"cell btn rounded-0\" [class.muted]=\"!c.inCurrentMonth\"\r\n                [class.today]=\"isToday(c.g)\" [class.selected]=\"isSelected(c.g)\" [disabled]=\"c.disabled\"\r\n                (click)=\"select(c)\">\r\n                {{ c.h.hd }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".grid{display:grid;grid-template-columns:repeat(7,1fr)}.cell{border:1px solid #ddd}.cell.muted{opacity:.5}.cell.selected{background-color:#0d6efd;color:#fff}.cell:disabled{background-color:#f8f9fa;color:#aaa;cursor:not-allowed}.col{text-align:center}.btn{font-size:90%;padding:.25rem}.btn:hover{background-color:azure}\n"] }]
+            args: [{ selector: 'app-hijri-calendar', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"card border-0 p-0\">\r\n    <div class=\"card-header p-1\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n            <button class=\"btn btn-sm\" (click)=\"prevMonth()\" [disabled]=\"!canPrev()\">&laquo;</button>\r\n            <div class=\"d-flex justify-content-center gap-1\">\r\n                <select class=\"form-select form-select-sm w-auto\" [(ngModel)]=\"selectedMonth\"\r\n                    (change)=\"onMonthYearChange()\">\r\n                    @for (m of hijriMonths; track $index) {\r\n                    <option [value]=\"$index + 1\">{{ hijriMonthsAr[$index] }} ({{ hijriMonthsEn[$index] }})</option>\r\n                    }\r\n                </select>\r\n                <select class=\"form-select form-select-sm    w-auto\" [(ngModel)]=\"selectedYear\"\r\n                    (change)=\"onMonthYearChange()\">\r\n                    @for (y of yearRange; track y) {\r\n                    <option [value]=\"y\">{{ y }}</option>\r\n                    }\r\n                </select>\r\n            </div>\r\n            <button class=\"btn btn-sm\" (click)=\"nextMonth()\" [disabled]=\"!canNext()\">&raquo;</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-body p-1\">\r\n\r\n\r\n        <!-- month/year pickers -->\r\n\r\n\r\n        <!-- weekday labels -->\r\n        <div class=\"grid\">\r\n            @for (w of weekDays; track $index) {\r\n            <div class=\"col fw-bold border pb-1\">{{ w }}</div>\r\n            }\r\n\r\n        </div>\r\n\r\n        <!-- calendar cells -->\r\n        <div class=\"grid\">\r\n            <button *ngFor=\"let c of cells()\" class=\"cell btn rounded-0\" [class.muted]=\"!c.inCurrentMonth\"\r\n                [class.today]=\"isToday(c.g)\" [class.selected]=\"isSelected(c.g)\" [disabled]=\"c.disabled\"\r\n                (click)=\"select(c)\">\r\n                {{ c.h.hd }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".grid{display:grid;grid-template-columns:repeat(7,1fr)}.cell{border:1px solid #ddd}.cell.muted{opacity:.5}.cell.selected{background-color:#0d6efd;color:#fff}.cell:disabled{background-color:#f8f9fa;color:#aaa;cursor:not-allowed}.col{text-align:center}.btn{font-size:90%;padding:.25rem .1rem}.btn:hover{background-color:azure}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -662,24 +666,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Input
             }] } });
 
+// Extend Day.js with calendar systems support
+dayjs.extend(calendarSystems);
+dayjs.extend(customParseFormat);
+// Register the Persian calendar
+dayjs.registerCalendarSystem('persian', new PersianCalendarSystem());
+dayjs.registerCalendarSystem('islamic', new HijriCalendarSystem());
+class DateServiceService {
+    log(date) {
+        //var dj = dayjs(date);
+        // // Convert current date to Persian calendar
+        // const persianDate = dj.toCalendarSystem('persian');
+        // console.log(persianDate.format('YYYY-MM-DD')); // Example: "1403-08-15"
+        // // Create a date from Persian calendar
+        // const nowruz = dayjs.fromCalendarSystem('persian', 1403, 1, 1);
+        // console.log(nowruz.format('YYYY-MM-DD')); // "2024-03-20"
+        // const hijriDate = dj.toCalendarSystem('islamic');
+        // console.log(hijriDate.format('YYYY-MM-DD')); // e.g., "1446-03-15"
+        //Step 1: User will input gregorian or islamic(hijri) date. for this we will use customParseFormat
+        //in the control we will specify the format using binding.
+        const d = dayjs("18-05-1447", "DD-MM-YYYY");
+        //we are writing this to parse the date , month, year only.
+        //then based on the calender type we will decide.
+        //but by default system will take gregorian
+        const customDate = dayjs.fromCalendarSystem('islamic', d.year(), d.month() + 1, d.date());
+        //here we are assuming the control want to handle islamic calender date, we will take it dynmically.
+        console.log("Prased Date in Gregorian String as per format ['DD-MM-YYYY']:", customDate.format('DD-MM-YYYY'));
+        //here it will show gregorian calender, because even if we parse using islamic calender, it will convert the date
+        //and keep it to gregorian
+        //to show islamic date, we have to tell the dayjs to use islamic calender
+        console.log("Hijri Date String: ", customDate.toCalendarSystem('islamic').format('YYYY-MM-DD'));
+        // console.log(d.format("DD/MM/YYYY"));
+        // console.log(d.date());
+        // console.log(d.month() + 1);
+        // console.log(d.year());
+        // console.log(d.toDate());
+        // const d2 = dayjs("09-11-2025", "DD-MM-YYYY");
+        // console.log(d2.format("DD/MM/YYYY"));
+        // console.log(d2.date());
+        // console.log(d2.month() + 1);
+        // console.log(d2.year());
+        // console.log(d2.toDate());
+        // // Create a Day.js instance from a specific calendar system
+        // const hijriCustomDate = dayjs.fromCalendarSystem('islamic', 1447, 5, 18);
+        // console.log(hijriCustomDate.toString());
+        // // The result is a standard Day.js instance in that calendar system
+        // console.log(hijriCustomDate.toCalendarSystem('islamic').format('YYYY-MM-DD')); // In Persian: "1403-01-01"
+        // // Convert to Gregorian to see the equivalent date
+        // const gregorian = hijriCustomDate.toCalendarSystem('gregory');
+        // console.log(gregorian.format('YYYY-MM-DD')); // "2024-03-20"
+    }
+    format(date, calendar, format) {
+        const d = dayjs(date);
+        return d.toCalendarSystem(calendar).format(format);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DateServiceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DateServiceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DateServiceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class HijriDatepickerComponent {
+    dateService;
     value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-    valueChange = output();
     selectedDate;
     showCalendar = false;
+    calender = input("gregory", ...(ngDevMode ? [{ debugName: "calender" }] : []));
     enabled = input(true, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
     cssClass = input(...(ngDevMode ? [undefined, { debugName: "cssClass" }] : []));
-    format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
+    format = input("DD/MM/YYYY", ...(ngDevMode ? [{ debugName: "format" }] : []));
     inputDate = "";
     isMobile = false;
-    constructor() {
+    constructor(dateService) {
+        this.dateService = dateService;
         effect(() => {
             const iso = this.value();
             if (iso) {
                 const date = dayjs(iso);
                 if (date.isValid()) {
                     this.selectedDate = date.toDate();
-                    this.inputDate = this.formatDateForInput(this.selectedDate);
+                    this.inputDate = this.formatDate(this.selectedDate, this.calender(), this.format());
                 }
                 return;
             }
@@ -691,7 +761,8 @@ class HijriDatepickerComponent {
         this.showCalendar = !this.showCalendar;
     }
     onDateSelectedFromCalender(e) {
-        console.log("onDateSelectedFromCalender: ", e);
+        // console.log("onDateSelectedFromCalender: ", e);
+        this.dateService.log(e);
         //var time = this.selectedDate ?? new Date();
         // e.setHours(time.getHours());
         // e.setMinutes(time.getMinutes());
@@ -714,23 +785,18 @@ class HijriDatepickerComponent {
     /** Reusable update method */
     updateDate(d) {
         this.selectedDate = d;
-        this.inputDate = this.formatDateForInput(d);
+        //this.inputDate = this.formatDateForInput(d);
         this.value.set(d);
-        this.valueChange.emit(d);
+        //this.valueChange.emit(d);
     }
-    formatHijri(date, format, locale = 'en') {
-        // Tell dayjs to use the "islamic" calendar system
-        // return dayjs(date)
-        //   .toCalendarSystem('islamic')   // or 'islamic-umalqura'
-        //   .locale(locale)
-        //   .format(format);
-        return "";
-    }
-    formatDateForInput(date) {
-        const fmt = this.format()?.toUpperCase() ?? "DD/MM/YYYY";
-        //return dayjs(date).format(fmt);
-        return this.formatHijri(date, fmt);
+    formatDate(date, calender, format) {
+        return this.dateService.format(date, calender, format);
     }
+    // private formatDateForInput(date: Date): string {
+    //   const fmt = this.format()?.toUpperCase() ?? "DD/MM/YYYY";
+    //   //return dayjs(date).format(fmt);
+    //   return this.formatDate(date, fmt);
+    // }
     parseInputDate(str) {
         const fmt = this.format()?.toUpperCase() ?? "DD/MM/YYYY";
         console.log(str, "-", fmt);
@@ -757,13 +823,13 @@ class HijriDatepickerComponent {
         }
         this.showCalendar = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HijriDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HijriDatepickerComponent, isStandalone: true, selector: "app-hijri-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "inputDiv", first: true, predicate: ["inputDiv"], descendants: true }, { propertyName: "modalDiv", first: true, predicate: ["modalDiv"], descendants: true }, { propertyName: "popupDiv", first: true, predicate: ["popupDiv"], descendants: true }], ngImport: i0, template: "<div class=\"input-group flex-nowrap\" #inputDiv>\r\n    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"inputDate\" (blur)=\"onManualDateEntered()\"\r\n        [disabled]=\"!enabled()\" [placeholder]=\"format()?.toUpperCase()\" (keyup.enter)=\"onManualDateEntered()\">\r\n\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toggleCalendar()\" [disabled]=\"!enabled()\">\r\n        <i class=\"bi bi-calendar3\"></i>\r\n    </button>\r\n</div>\r\n\r\n@if(showCalendar){\r\n@if(isMobile){\r\n<div class=\"modal modal-backdrop\" tabindex=\"-1\" role=\"dialog\" style=\"display: block;\" #modalDiv>\r\n    <div class=\"modal-dialog modal-dialog-scrollable\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"btn btn-danger close ms-auto btn-sm\" (click)=\"showCalendar = false\">\r\n                    <i class=\"bi bi-x\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@else{\r\n<div class=\"dropdown-menu show\" #popupDiv>\r\n    <app-hijri-calendar (valueChange)=\"onDateSelectedFromCalender($event)\"></app-hijri-calendar>\r\n</div>\r\n}\r\n}", styles: [".dropdown-menu{--bs-dropdown-padding-y: 0}.card-body{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["value", "minDate", "maxDate", "monthLang"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HijriDatepickerComponent, deps: [{ token: DateServiceService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HijriDatepickerComponent, isStandalone: true, selector: "app-hijri-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, calender: { classPropertyName: "calender", publicName: "calender", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "inputDiv", first: true, predicate: ["inputDiv"], descendants: true }, { propertyName: "modalDiv", first: true, predicate: ["modalDiv"], descendants: true }, { propertyName: "popupDiv", first: true, predicate: ["popupDiv"], descendants: true }], ngImport: i0, template: "<div class=\"input-group flex-nowrap\" #inputDiv>\r\n    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"inputDate\" (blur)=\"onManualDateEntered()\"\r\n        [disabled]=\"!enabled()\" [placeholder]=\"format()?.toUpperCase()\" (keyup.enter)=\"onManualDateEntered()\">\r\n\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toggleCalendar()\" [disabled]=\"!enabled()\">\r\n        <i class=\"bi bi-calendar3\"></i>\r\n    </button>\r\n</div>\r\n\r\n@if(showCalendar){\r\n@if(isMobile){\r\n<div class=\"modal modal-backdrop\" tabindex=\"-1\" role=\"dialog\" style=\"display: block;\" #modalDiv>\r\n    <div class=\"modal-dialog modal-dialog-scrollable\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"btn btn-danger close ms-auto btn-sm\" (click)=\"showCalendar = false\">\r\n                    <i class=\"bi bi-x\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@else{\r\n<div class=\"dropdown-menu show\" #popupDiv>\r\n    <app-hijri-calendar (valueChange)=\"onDateSelectedFromCalender($event)\"></app-hijri-calendar>\r\n</div>\r\n}\r\n}", styles: [".dropdown-menu{--bs-dropdown-padding-y: 0}.card-body{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["value", "minDate", "maxDate", "monthLang"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HijriDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-hijri-datepicker', imports: [CommonModule, FormsModule, HijriCalendarComponent], template: "<div class=\"input-group flex-nowrap\" #inputDiv>\r\n    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"inputDate\" (blur)=\"onManualDateEntered()\"\r\n        [disabled]=\"!enabled()\" [placeholder]=\"format()?.toUpperCase()\" (keyup.enter)=\"onManualDateEntered()\">\r\n\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toggleCalendar()\" [disabled]=\"!enabled()\">\r\n        <i class=\"bi bi-calendar3\"></i>\r\n    </button>\r\n</div>\r\n\r\n@if(showCalendar){\r\n@if(isMobile){\r\n<div class=\"modal modal-backdrop\" tabindex=\"-1\" role=\"dialog\" style=\"display: block;\" #modalDiv>\r\n    <div class=\"modal-dialog modal-dialog-scrollable\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"btn btn-danger close ms-auto btn-sm\" (click)=\"showCalendar = false\">\r\n                    <i class=\"bi bi-x\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@else{\r\n<div class=\"dropdown-menu show\" #popupDiv>\r\n    <app-hijri-calendar (valueChange)=\"onDateSelectedFromCalender($event)\"></app-hijri-calendar>\r\n</div>\r\n}\r\n}", styles: [".dropdown-menu{--bs-dropdown-padding-y: 0}.card-body{padding:0!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputDiv: [{
+        }], ctorParameters: () => [{ type: DateServiceService }], propDecorators: { inputDiv: [{
                 type: ViewChild,
                 args: ["inputDiv"]
             }], modalDiv: [{
@@ -780,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 class FlexContainerComponent {
     renderer;
     contentHost;
-    resizeHandler;
+    //private resizeHandler!: () => void;
     // Allow consumer to provide templates
     headerTpl;
     footerTpl;
@@ -790,13 +856,16 @@ class FlexContainerComponent {
     }
     ngAfterViewInit() {
         this.resizeContent();
-        this.resizeHandler = this.resizeContent.bind(this);
-        window.addEventListener('resize', this.resizeHandler);
+        //this.resizeHandler = this.resizeContent.bind(this);
+        //window.addEventListener('resize', this.resizeHandler);
     }
     ngOnDestroy() {
-        if (this.resizeHandler) {
-            window.removeEventListener('resize', this.resizeHandler);
-        }
+        // if (this.resizeHandler) {
+        //   window.removeEventListener('resize', this.resizeHandler);
+        // }
+    }
+    onWindowResize() {
+        this.resizeContent();
     }
     resizeContent() {
         const parent = this.contentHost.nativeElement.parentElement;
@@ -807,9 +876,10 @@ class FlexContainerComponent {
         const footerHeight = this.contentHost.nativeElement.nextElementSibling?.clientHeight || 0;
         const available = parentHeight - headerHeight - footerHeight;
         this.renderer.setStyle(this.contentHost.nativeElement, 'height', `${available}px`);
+        this.renderer.setStyle(this.contentHost.nativeElement, 'width', `${parent.clientWidth}px`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexContainerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: FlexContainerComponent, isStandalone: true, selector: "flex-container", queries: [{ propertyName: "headerTpl", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTpl", first: true, predicate: ["footer"], descendants: true }, { propertyName: "contentTpl", first: true, predicate: ["content"], descendants: true }], viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true }], ngImport: i0, template: "<div class=\"flex-container\">\r\n    @if(headerTpl){\r\n    <div class=\"header\">\r\n        <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n\r\n    <div #contentHost class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n    </div>\r\n    @if(footerTpl){\r\n    <div class=\"footer\">\r\n        <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".flex-container{display:flex;flex-direction:column;height:100%}.header,.footer{flex:0 0 auto}.content{flex:1 1 auto;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: FlexContainerComponent, isStandalone: true, selector: "flex-container", host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "headerTpl", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTpl", first: true, predicate: ["footer"], descendants: true }, { propertyName: "contentTpl", first: true, predicate: ["content"], descendants: true }], viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true }], ngImport: i0, template: "<div class=\"flex-container\">\r\n    @if(headerTpl){\r\n    <div class=\"header\">\r\n        <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n\r\n    <div #contentHost class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n    </div>\r\n    @if(footerTpl){\r\n    <div class=\"footer\">\r\n        <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".flex-container{display:flex;flex-direction:column;height:100%}.header,.footer{flex:0 0 auto}.content{flex:1 1 auto;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexContainerComponent, decorators: [{
             type: Component,
@@ -826,6 +896,485 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
             }], contentTpl: [{
                 type: ContentChild,
                 args: ['content']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+// ✅ Intl formatters
+const hijriFmt = new Intl.DateTimeFormat('en-u-ca-islamic-umalqura-nu-latn', {
+    day: 'numeric',
+    month: 'numeric',
+    year: 'numeric'
+});
+const hijriMonthNamesEn = [
+    'Muharram', 'Safar', 'Rabi I', 'Rabi II',
+    'Jumada I', 'Jumada II', 'Rajab', 'Sha’ban',
+    'Ramadan', 'Shawwal', 'Dhu al-Qi’dah', 'Dhu al-Hijjah'
+];
+const hijriMonthNamesAr = [
+    'محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر',
+    'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان',
+    'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة'
+];
+const gregMonthNamesEn = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+];
+const gregMonthNamesAr = [
+    'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+];
+const weekDaysEn = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const weekDaysAr = ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'];
+function hijriFromGregorian(g) {
+    const parts = hijriFmt.formatToParts(g);
+    const map = {};
+    for (const p of parts)
+        map[p.type] = p.value;
+    const n = (k) => parseInt(map[k] ?? '0', 10);
+    return { hy: n('year'), hm: n('month'), hd: n('day') };
+}
+function compareHijri(a, b) {
+    if (a.hy !== b.hy)
+        return a.hy - b.hy;
+    if (a.hm !== b.hm)
+        return a.hm - b.hm;
+    return a.hd - b.hd;
+}
+function findGregorianForHijri(target) {
+    let lo = new Date(1937, 0, 1).getTime();
+    let hi = new Date(2076, 11, 31).getTime();
+    const dayMs = 86400000;
+    while (lo <= hi) {
+        const mid = Math.floor((lo + hi) / 2);
+        const h = hijriFromGregorian(new Date(mid));
+        compareHijri(h, target) < 0 ? (lo = mid + dayMs) : (hi = mid - dayMs);
+    }
+    let d = new Date(lo);
+    while (true) {
+        const h = hijriFromGregorian(d);
+        const cmp = compareHijri(h, target);
+        if (cmp === 0)
+            return d;
+        if (cmp > 0)
+            throw new Error('Hijri date out of supported range');
+        d = new Date(d.getTime() + dayMs);
+    }
+}
+function stripTime(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+class FlexDualCalendarComponent {
+    /** Two-way bound selected date (Gregorian) */
+    value;
+    valueChange = new EventEmitter();
+    /** Optional min/max (Gregorian) */
+    minDate;
+    maxDate;
+    /** Month/weekday language */
+    monthLang = 'en';
+    /** Start mode, default Hijri */
+    startMode = 'gregory';
+    /** Current mode (hijri | gregory) */
+    mode = signal('gregory', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Hijri view state */
+    hy = signal(0, ...(ngDevMode ? [{ debugName: "hy" }] : []));
+    hm = signal(0, ...(ngDevMode ? [{ debugName: "hm" }] : []));
+    /** Gregorian view state */
+    gy = signal(0, ...(ngDevMode ? [{ debugName: "gy" }] : []));
+    gm = signal(0, ...(ngDevMode ? [{ debugName: "gm" }] : [])); // 1..12
+    /** selectors */
+    selectedMonth = 1;
+    selectedYear = 1447;
+    yearRange = [];
+    // ---- getters for UI ----
+    get hijriMonths() {
+        return this.monthLang === 'ar' ? hijriMonthNamesAr : hijriMonthNamesEn;
+    }
+    get gregMonths() {
+        return this.monthLang === 'ar' ? gregMonthNamesAr : gregMonthNamesEn;
+    }
+    get weekDays() {
+        return this.monthLang === 'ar' ? weekDaysAr : weekDaysEn;
+    }
+    get currentMonthName() {
+        return this.mode() === 'islamic'
+            ? this.hijriMonths[this.selectedMonth - 1]
+            : this.gregMonths[this.selectedMonth - 1];
+    }
+    constructor() {
+        const today = new Date();
+        const h = hijriFromGregorian(today);
+        this.hy.set(h.hy);
+        this.hm.set(h.hm);
+        this.gy.set(today.getFullYear());
+        this.gm.set(today.getMonth() + 1);
+        // initialize selectors with start mode
+        this.mode.set(this.startMode);
+        if (this.mode() === 'islamic') {
+            this.selectedYear = this.hy();
+            this.selectedMonth = this.hm();
+        }
+        else {
+            this.selectedYear = this.gy();
+            this.selectedMonth = this.gm();
+        }
+    }
+    ngOnInit() {
+        this.buildYearRange();
+    }
+    ngOnChanges(changes) {
+        // If value changed from outside, update both calendars
+        if (changes['value'] && this.value instanceof Date) {
+            const g = stripTime(this.value);
+            const h = hijriFromGregorian(g);
+            this.gy.set(g.getFullYear());
+            this.gm.set(g.getMonth() + 1);
+            this.hy.set(h.hy);
+            this.hm.set(h.hm);
+            // Update dropdowns based on current mode
+            if (this.mode() === 'islamic') {
+                this.selectedYear = this.hy();
+                this.selectedMonth = this.hm();
+            }
+            else {
+                this.selectedYear = this.gy();
+                this.selectedMonth = this.gm();
+            }
+        }
+        // Rebuild year range if min/max changed
+        if (changes['minDate'] || changes['maxDate'] || changes['value']) {
+            this.buildYearRange();
+        }
+    }
+    // Build years based on min/max expressed in Hijri for Hijri mode, Gregorian for Gregorian mode
+    buildYearRange() {
+        if (this.mode() === 'islamic') {
+            const minH = this.minDate ? hijriFromGregorian(stripTime(this.minDate)) : { hy: 1356, hm: 1, hd: 1 };
+            const maxH = this.maxDate ? hijriFromGregorian(stripTime(this.maxDate)) : { hy: 1499, hm: 12, hd: 30 };
+            this.yearRange = [];
+            for (let y = minH.hy; y <= maxH.hy; y++)
+                this.yearRange.push(y);
+        }
+        else {
+            const minG = this.minDate ? stripTime(this.minDate) : new Date(1937, 0, 1);
+            const maxG = this.maxDate ? stripTime(this.maxDate) : new Date(2076, 11, 31);
+            this.yearRange = [];
+            for (let y = minG.getFullYear(); y <= maxG.getFullYear(); y++)
+                this.yearRange.push(y);
+        }
+    }
+    // 🔁 Mode switch (SYNCED view — keep same instant)
+    switchMode(value) {
+        const pivot = this.value ?? this.firstOfMonth(); // use selected date or current view start
+        if (value === 'gregory') {
+            // To Gregorian mode
+            const g = stripTime(pivot);
+            this.gy.set(g.getFullYear());
+            this.gm.set(g.getMonth() + 1);
+            this.mode.set('gregory');
+            this.selectedYear = this.gy();
+            this.selectedMonth = this.gm();
+        }
+        else {
+            // To Hijri mode
+            const h = hijriFromGregorian(stripTime(pivot));
+            this.hy.set(h.hy);
+            this.hm.set(h.hm);
+            this.mode.set('islamic');
+            this.selectedYear = this.hy();
+            this.selectedMonth = this.hm();
+        }
+        this.buildYearRange();
+    }
+    // called when dropdowns change
+    onMonthYearChange() {
+        if (this.mode() === 'islamic') {
+            this.hy.set(this.selectedYear);
+            this.hm.set(this.selectedMonth);
+        }
+        else {
+            this.gy.set(this.selectedYear);
+            this.gm.set(this.selectedMonth);
+        }
+    }
+    // Start of visible month (Gregorian date)
+    firstOfMonth() {
+        if (this.mode() === 'islamic') {
+            return findGregorianForHijri({ hy: this.hy(), hm: this.hm(), hd: 1 });
+        }
+        return new Date(this.gy(), this.gm() - 1, 1);
+    }
+    // Calendar cells for current view
+    cells() {
+        const firstG = this.firstOfMonth();
+        const firstH = hijriFromGregorian(firstG);
+        // grid start (Sunday-first; adjust if you want Saturday-first)
+        const start = new Date(firstG);
+        start.setDate(firstG.getDate() - firstG.getDay());
+        const result = [];
+        for (let i = 0; i < 42; i++) {
+            const g = new Date(start);
+            g.setDate(start.getDate() + i);
+            const h = hijriFromGregorian(g);
+            let disabled = false;
+            if (this.minDate && g < stripTime(this.minDate))
+                disabled = true;
+            if (this.maxDate && g > stripTime(this.maxDate))
+                disabled = true;
+            const inCurrentMonth = this.mode() === 'islamic'
+                ? (h.hy === firstH.hy && h.hm === firstH.hm)
+                : (g.getFullYear() === firstG.getFullYear() && g.getMonth() === firstG.getMonth());
+            result.push({ g, h, inCurrentMonth, disabled });
+        }
+        return result;
+    }
+    prevMonth() {
+        if (!this.canPrev())
+            return;
+        if (this.mode() === 'islamic') {
+            let m = this.hm(), y = this.hy();
+            if (--m < 1) {
+                m = 12;
+                y--;
+            }
+            this.hm.set(m);
+            this.hy.set(y);
+            this.selectedYear = y;
+            this.selectedMonth = m;
+        }
+        else {
+            let m = this.gm(), y = this.gy();
+            if (--m < 1) {
+                m = 12;
+                y--;
+            }
+            this.gm.set(m);
+            this.gy.set(y);
+            this.selectedYear = y;
+            this.selectedMonth = m;
+        }
+    }
+    nextMonth() {
+        if (!this.canNext())
+            return;
+        if (this.mode() === 'islamic') {
+            let m = this.hm(), y = this.hy();
+            if (++m > 12) {
+                m = 1;
+                y++;
+            }
+            this.hm.set(m);
+            this.hy.set(y);
+            this.selectedYear = y;
+            this.selectedMonth = m;
+        }
+        else {
+            let m = this.gm(), y = this.gy();
+            if (++m > 12) {
+                m = 1;
+                y++;
+            }
+            this.gm.set(m);
+            this.gy.set(y);
+            this.selectedYear = y;
+            this.selectedMonth = m;
+        }
+    }
+    canPrev() {
+        if (!this.minDate)
+            return true;
+        const minG = stripTime(this.minDate);
+        const viewFirst = this.firstOfMonth();
+        // Can go prev if the first day of previous month is >= minG
+        const prev = new Date(viewFirst.getFullYear(), viewFirst.getMonth() - 1, 1);
+        return prev >= new Date(minG.getFullYear(), minG.getMonth(), 1);
+    }
+    canNext() {
+        if (!this.maxDate)
+            return true;
+        const maxG = stripTime(this.maxDate);
+        const viewFirst = this.firstOfMonth();
+        const next = new Date(viewFirst.getFullYear(), viewFirst.getMonth() + 1, 1);
+        // move to the first of the month after max
+        const maxMonthAfter = new Date(maxG.getFullYear(), maxG.getMonth() + 1, 1);
+        return next < maxMonthAfter;
+    }
+    isToday(g) {
+        const t = new Date();
+        return g.getFullYear() === t.getFullYear()
+            && g.getMonth() === t.getMonth()
+            && g.getDate() === t.getDate();
+    }
+    isSelected(g) {
+        return !!this.value &&
+            g.getFullYear() === this.value.getFullYear() &&
+            g.getMonth() === this.value.getMonth() &&
+            g.getDate() === this.value.getDate();
+    }
+    select(c) {
+        if (c.disabled)
+            return;
+        this.value = stripTime(c.g);
+        this.valueChange.emit(this.value);
+        // keep both views in sync after selection
+        const h = hijriFromGregorian(this.value);
+        this.hy.set(h.hy);
+        this.hm.set(h.hm);
+        this.gy.set(this.value.getFullYear());
+        this.gm.set(this.value.getMonth() + 1);
+        if (this.mode() === 'islamic') {
+            this.selectedYear = this.hy();
+            this.selectedMonth = this.hm();
+        }
+        else {
+            this.selectedYear = this.gy();
+            this.selectedMonth = this.gm();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexDualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: FlexDualCalendarComponent, isStandalone: true, selector: "flex-dual-calendar", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate", monthLang: "monthLang", startMode: "startMode" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card border-0\">\r\n    <div class=\"card-header p-1\">\r\n        <div class=\"row g-1\">\r\n            <div class=\"col-1\">\r\n                <button class=\"btn btn-sm w-100 btn-info\" (click)=\"prevMonth()\" [disabled]=\"!canPrev()\">&laquo;</button>\r\n            </div>\r\n            <div class=\"col-6\">\r\n                <select class=\"form-select form-select-sm\" [(ngModel)]=\"selectedMonth\" (change)=\"onMonthYearChange()\">\r\n                    @if (mode() === 'islamic') {\r\n                    @for (m of hijriMonths; track $index) {\r\n                    <option [value]=\"$index + 1\">{{ hijriMonths[$index] }} ({{ hijriMonths[$index] }})</option>\r\n                    }\r\n                    } @else {\r\n                    @for (m of gregMonths; track $index) {\r\n                    <option [value]=\"$index + 1\">{{ gregMonths[$index] }}</option>\r\n                    }\r\n                    }\r\n                </select>\r\n            </div>\r\n            <div class=\"col-4\">\r\n                <select class=\"form-select form-select-sm\" [(ngModel)]=\"selectedYear\" (change)=\"onMonthYearChange()\">\r\n                    @for (y of yearRange; track y) {\r\n                    <option [value]=\"y\">{{ y }}</option>\r\n                    }\r\n                </select>\r\n            </div>\r\n            <div class=\"col-1 \">\r\n                <button class=\"btn btn-sm w-100 btn-info\" (click)=\"nextMonth()\" [disabled]=\"!canNext()\">&raquo;</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body p-0\">\r\n        <!-- Weekday labels -->\r\n        <div class=\"grid\">\r\n            @for (w of weekDays; track $index) {\r\n            <div class=\"col fw-bold border pb-1\">{{ w }}</div>\r\n            }\r\n        </div>\r\n\r\n        <!-- Calendar cells -->\r\n        <div class=\"grid\">\r\n            @for (c of cells(); track $index) {\r\n            <div class=\"cell\">\r\n                <button class=\"btn w-100\" [class.muted]=\"!c.inCurrentMonth\" [class.today]=\"isToday(c.g)\"\r\n                    [class.selected]=\"isSelected(c.g)\" [disabled]=\"c.disabled\" (click)=\"select(c)\">\r\n                    <!-- show Hijri day in Hijri mode, otherwise Gregorian -->\r\n                    @if(mode() === 'islamic'){\r\n                    {{ c.h.hd }}\r\n                    }\r\n                    @else{\r\n                    {{ c.g.getDate() }}\r\n                    }\r\n                </button>\r\n            </div>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer  px-0 py-1\">\r\n        <div class=\"d-flex justify-content-center\">\r\n            <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n                <button class=\"btn btn-sm btn-outline-secondary\" type=\"button\" (click)=\"switchMode('gregory')\">\r\n                    Gregorian\r\n                </button>\r\n                <button class=\"btn btn-sm btn-outline-secondary\" type=\"button\" (click)=\"switchMode('islamic')\">\r\n                    \u0647\u062C\u0631\u064A\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".grid{display:grid;grid-template-columns:repeat(7,1fr)}.cell{border:1px solid #ddd}.cell.muted{opacity:.5}.cell.today{outline:2px solid #0d6efd}.cell.selected{background-color:#0d6efd;color:#fff}.cell:disabled{background-color:#f8f9fa;color:#aaa;cursor:not-allowed}.col{text-align:center}.btn{font-size:90%;--bs-btn-padding-x: .3rem;--bs-btn-padding-y: .25rem}.btn:hover{background-color:azure}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexDualCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flex-dual-calendar', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"card border-0\">\r\n    <div class=\"card-header p-1\">\r\n        <div class=\"row g-1\">\r\n            <div class=\"col-1\">\r\n                <button class=\"btn btn-sm w-100 btn-info\" (click)=\"prevMonth()\" [disabled]=\"!canPrev()\">&laquo;</button>\r\n            </div>\r\n            <div class=\"col-6\">\r\n                <select class=\"form-select form-select-sm\" [(ngModel)]=\"selectedMonth\" (change)=\"onMonthYearChange()\">\r\n                    @if (mode() === 'islamic') {\r\n                    @for (m of hijriMonths; track $index) {\r\n                    <option [value]=\"$index + 1\">{{ hijriMonths[$index] }} ({{ hijriMonths[$index] }})</option>\r\n                    }\r\n                    } @else {\r\n                    @for (m of gregMonths; track $index) {\r\n                    <option [value]=\"$index + 1\">{{ gregMonths[$index] }}</option>\r\n                    }\r\n                    }\r\n                </select>\r\n            </div>\r\n            <div class=\"col-4\">\r\n                <select class=\"form-select form-select-sm\" [(ngModel)]=\"selectedYear\" (change)=\"onMonthYearChange()\">\r\n                    @for (y of yearRange; track y) {\r\n                    <option [value]=\"y\">{{ y }}</option>\r\n                    }\r\n                </select>\r\n            </div>\r\n            <div class=\"col-1 \">\r\n                <button class=\"btn btn-sm w-100 btn-info\" (click)=\"nextMonth()\" [disabled]=\"!canNext()\">&raquo;</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body p-0\">\r\n        <!-- Weekday labels -->\r\n        <div class=\"grid\">\r\n            @for (w of weekDays; track $index) {\r\n            <div class=\"col fw-bold border pb-1\">{{ w }}</div>\r\n            }\r\n        </div>\r\n\r\n        <!-- Calendar cells -->\r\n        <div class=\"grid\">\r\n            @for (c of cells(); track $index) {\r\n            <div class=\"cell\">\r\n                <button class=\"btn w-100\" [class.muted]=\"!c.inCurrentMonth\" [class.today]=\"isToday(c.g)\"\r\n                    [class.selected]=\"isSelected(c.g)\" [disabled]=\"c.disabled\" (click)=\"select(c)\">\r\n                    <!-- show Hijri day in Hijri mode, otherwise Gregorian -->\r\n                    @if(mode() === 'islamic'){\r\n                    {{ c.h.hd }}\r\n                    }\r\n                    @else{\r\n                    {{ c.g.getDate() }}\r\n                    }\r\n                </button>\r\n            </div>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer  px-0 py-1\">\r\n        <div class=\"d-flex justify-content-center\">\r\n            <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n                <button class=\"btn btn-sm btn-outline-secondary\" type=\"button\" (click)=\"switchMode('gregory')\">\r\n                    Gregorian\r\n                </button>\r\n                <button class=\"btn btn-sm btn-outline-secondary\" type=\"button\" (click)=\"switchMode('islamic')\">\r\n                    \u0647\u062C\u0631\u064A\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".grid{display:grid;grid-template-columns:repeat(7,1fr)}.cell{border:1px solid #ddd}.cell.muted{opacity:.5}.cell.today{outline:2px solid #0d6efd}.cell.selected{background-color:#0d6efd;color:#fff}.cell:disabled{background-color:#f8f9fa;color:#aaa;cursor:not-allowed}.col{text-align:center}.btn{font-size:90%;--bs-btn-padding-x: .3rem;--bs-btn-padding-y: .25rem}.btn:hover{background-color:azure}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], monthLang: [{
+                type: Input
+            }], startMode: [{
+                type: Input
+            }] } });
+
+class FlexDualDatepickerComponent {
+    dateService;
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    enabled = input(true, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
+    cssClass = input(...(ngDevMode ? [undefined, { debugName: "cssClass" }] : []));
+    format = input("DD/MM/YYYY", ...(ngDevMode ? [{ debugName: "format" }] : []));
+    //selectedDate is needed to keep the current data for process
+    selectedDate;
+    showCalendar = false;
+    calendar = "gregory";
+    inputDate = "";
+    isMobile = false;
+    constructor(dateService) {
+        this.dateService = dateService;
+        effect(() => {
+            const iso = this.value();
+            if (iso) {
+                const date = dayjs(iso);
+                if (date.isValid()) {
+                    this.selectedDate = date.toDate();
+                    this.inputDate = this.formatDate(this.selectedDate);
+                }
+                return;
+            }
+            this.selectedDate = undefined;
+            this.inputDate = "";
+        });
+    }
+    switchCalendar() {
+        if (this.calendar == "gregory") {
+            this.calendar = "islamic";
+        }
+        else {
+            this.calendar = "gregory";
+        }
+        this.inputDate = this.formatDate(this.selectedDate);
+    }
+    toggleCalendar() {
+        this.showCalendar = !this.showCalendar;
+    }
+    onDateSelectedFromCalender(e) {
+        // console.log("onDateSelectedFromCalender: ", e);
+        this.dateService.log(e);
+        this.inputDate = this.formatDate(e);
+        //var time = this.selectedDate ?? new Date();
+        // e.setHours(time.getHours());
+        // e.setMinutes(time.getMinutes());
+        this.updateDate(e);
+        this.showCalendar = false;
+        // console.log(e);
+    }
+    /** Triggered on blur OR Enter key */
+    onManualDateEntered() {
+        if (!this.inputDate)
+            return;
+        const parsed = this.parseInputDate(this.inputDate);
+        if (parsed) {
+            this.updateDate(parsed);
+        }
+        else {
+            console.warn("Invalid date entered:", this.inputDate);
+        }
+    }
+    /** Reusable update method */
+    updateDate(d) {
+        this.selectedDate = d;
+        this.inputDate = this.formatDate(d);
+        this.value.set(d);
+        //this.valueChange.emit(d);
+    }
+    formatDate(date) {
+        return this.dateService.format(date, this.calendar, this.format());
+    }
+    // private formatDateForInput(date: Date): string {
+    //   const fmt = this.format()?.toUpperCase() ?? "DD/MM/YYYY";
+    //   //return dayjs(date).format(fmt);
+    //   return this.formatDate(date, fmt);
+    // }
+    parseInputDate(str) {
+        const fmt = this.format()?.toUpperCase() ?? "DD/MM/YYYY";
+        console.log(str, "-", fmt);
+        const d = dayjs(str, fmt); // strict parse
+        console.log(d.toDate());
+        if (!d.isValid())
+            return null;
+        if (!this.selectedDate) {
+            this.selectedDate = new Date();
+        }
+        // gd.set("hour", this.selectedDate.getHours());
+        // gd.set("minute", this.selectedDate.getMinutes());
+        // gd.set("second", this.selectedDate.getSeconds());
+        return null;
+    }
+    inputDiv;
+    modalDiv;
+    popupDiv;
+    onDocumentClick(event) {
+        if (this.inputDiv?.nativeElement.contains(event.target)
+            || this.modalDiv?.nativeElement.contains(event.target)
+            || this.popupDiv?.nativeElement.contains(event.target)) {
+            return;
+        }
+        this.showCalendar = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexDualDatepickerComponent, deps: [{ token: DateServiceService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: FlexDualDatepickerComponent, isStandalone: true, selector: "flex-dual-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "inputDiv", first: true, predicate: ["inputDiv"], descendants: true }, { propertyName: "modalDiv", first: true, predicate: ["modalDiv"], descendants: true }, { propertyName: "popupDiv", first: true, predicate: ["popupDiv"], descendants: true }], ngImport: i0, template: "<div class=\"input-group flex-nowrap\" #inputDiv>\r\n    <span class=\"input-group-text\" style=\"cursor: pointer;\" (click)=\"switchCalendar()\"> @if(calendar == 'gregory') {G}\r\n        @else{H}</span>\r\n    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"inputDate\" (blur)=\"onManualDateEntered()\"\r\n        [disabled]=\"!enabled()\" [placeholder]=\"format()\" (keyup.enter)=\"onManualDateEntered()\">\r\n\r\n\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toggleCalendar()\" [disabled]=\"!enabled()\">\r\n        <i class=\"bi bi-calendar3\"></i>\r\n    </button>\r\n</div>\r\n\r\n@if(showCalendar){\r\n@if(isMobile){\r\n<div class=\"modal modal-backdrop\" tabindex=\"-1\" role=\"dialog\" style=\"display: block;\" #modalDiv>\r\n    <div class=\"modal-dialog modal-dialog-scrollable\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"btn btn-danger close ms-auto btn-sm\" (click)=\"showCalendar = false\">\r\n                    <i class=\"bi bi-x\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@else{\r\n<div class=\"dropdown-menu show\" #popupDiv>\r\n    <flex-dual-calendar (valueChange)=\"onDateSelectedFromCalender($event)\"\r\n        [(value)]=\"selectedDate\"></flex-dual-calendar>\r\n</div>\r\n}\r\n}", styles: [".dropdown-menu{--bs-dropdown-padding-y: 0}.card-body{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FlexDualCalendarComponent, selector: "flex-dual-calendar", inputs: ["value", "minDate", "maxDate", "monthLang", "startMode"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexDualDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flex-dual-datepicker', imports: [CommonModule, FormsModule, FlexDualCalendarComponent], template: "<div class=\"input-group flex-nowrap\" #inputDiv>\r\n    <span class=\"input-group-text\" style=\"cursor: pointer;\" (click)=\"switchCalendar()\"> @if(calendar == 'gregory') {G}\r\n        @else{H}</span>\r\n    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"inputDate\" (blur)=\"onManualDateEntered()\"\r\n        [disabled]=\"!enabled()\" [placeholder]=\"format()\" (keyup.enter)=\"onManualDateEntered()\">\r\n\r\n\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toggleCalendar()\" [disabled]=\"!enabled()\">\r\n        <i class=\"bi bi-calendar3\"></i>\r\n    </button>\r\n</div>\r\n\r\n@if(showCalendar){\r\n@if(isMobile){\r\n<div class=\"modal modal-backdrop\" tabindex=\"-1\" role=\"dialog\" style=\"display: block;\" #modalDiv>\r\n    <div class=\"modal-dialog modal-dialog-scrollable\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"btn btn-danger close ms-auto btn-sm\" (click)=\"showCalendar = false\">\r\n                    <i class=\"bi bi-x\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@else{\r\n<div class=\"dropdown-menu show\" #popupDiv>\r\n    <flex-dual-calendar (valueChange)=\"onDateSelectedFromCalender($event)\"\r\n        [(value)]=\"selectedDate\"></flex-dual-calendar>\r\n</div>\r\n}\r\n}", styles: [".dropdown-menu{--bs-dropdown-padding-y: 0}.card-body{padding:0!important}\n"] }]
+        }], ctorParameters: () => [{ type: DateServiceService }], propDecorators: { inputDiv: [{
+                type: ViewChild,
+                args: ["inputDiv"]
+            }], modalDiv: [{
+                type: ViewChild,
+                args: ["modalDiv"]
+            }], popupDiv: [{
+                type: ViewChild,
+                args: ["popupDiv"]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 /*
@@ -836,5 +1385,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ComboDatePickerComponent, FlexColumnComponent, FlexColumnsComponent, FlexContainerComponent, FlexGridComponent, FlexPaginationComponent, FlexPanelComponent, HijriDatepickerComponent };
+export { ComboDatePickerComponent, FlexColumnComponent, FlexColumnsComponent, FlexContainerComponent, FlexDualDatepickerComponent, FlexGridComponent, FlexPaginationComponent, FlexPanelComponent, HijriDatepickerComponent };
 //# sourceMappingURL=dcsl-flex-ui.mjs.map