angular-hijri-gregorian-date-time-picker 1.5.0 → 1.5.1

package/{fesm2020 → fesm2022}/angular-hijri-gregorian-date-time-picker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, HostBinding, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, HostBinding, Output, Input, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3 from '@angular/common';
@@ -27378,377 +27378,377 @@ var dictionary = {
 }
 };
 
-class DateUtilitiesService {
-    constructor() {
-        this.calendarData = dictionary; //prod
-        // this.calendarData = datesDictionary; //debug
-    }
-    parseDate(dateStr) {
-        if (!dateStr) {
-            return null;
-        }
-        const parts = dateStr?.split('/');
-        if (parts.length !== 3) {
-            return null;
-        }
-        const [day, month, year] = parts.map(Number);
-        if (isNaN(day) ||
-            isNaN(month) ||
-            isNaN(year) ||
-            day < 1 ||
-            day > 31 ||
-            month < 1 ||
-            month > 12 ||
-            year < 1) {
-            return null;
-        }
-        return new Date(year, month - 1, day);
-    }
-    formatDate(date) {
-        const day = String(date.getDate()).padStart(2, '0');
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const year = date.getFullYear();
-        return `${day}/${month}/${year}`;
-    }
-    getDayShortHand(date) {
-        return date.toLocaleString('en-US', { weekday: 'short' });
-    }
-    generateDates(fD, lD, uC) {
-        const startDate = this.parseDate(fD?.gD);
-        const endDate = this.parseDate(lD?.gD);
-        const daysInMonth = [];
-        let currentGregorianDate = new Date(startDate);
-        let currentUmmAlQuraDay = parseInt(fD?.uD?.split('/')[0]);
-        let currentUmmAlQuraMonth = parseInt(fD?.uD?.split('/')[1]);
-        let currentUmmAlQuraYear = parseInt(fD?.uD?.split('/')[2]);
-        let daysInCurrentUmmAlQuraMonth = uC;
-        while (currentGregorianDate <= endDate) {
-            const ummAlQuraDate = `${currentUmmAlQuraDay
-                .toString()
-                .padStart(2, '0')}/${currentUmmAlQuraMonth
-                .toString()
-                .padStart(2, '0')}/${currentUmmAlQuraYear}`;
-            daysInMonth.push({
-                gD: this.formatDate(currentGregorianDate),
-                uD: ummAlQuraDate,
-                dN: this.getDayShortHand(currentGregorianDate),
-                uC: 0,
-            });
-            currentGregorianDate.setDate(currentGregorianDate.getDate() + 1);
-            currentUmmAlQuraDay += 1;
-            if (currentUmmAlQuraDay > daysInCurrentUmmAlQuraMonth) {
-                currentUmmAlQuraDay = 1;
-                currentUmmAlQuraMonth += 1;
-                if (currentUmmAlQuraMonth > 12) {
-                    currentUmmAlQuraMonth = 1;
-                    currentUmmAlQuraYear += 1;
-                }
-                const nextMonthData = this.calendarData[currentUmmAlQuraYear.toString()]?.[currentUmmAlQuraMonth.toString()];
-                daysInCurrentUmmAlQuraMonth = nextMonthData ? nextMonthData.fD.uC : 30;
-            }
-        }
-        return daysInMonth;
-    }
-    convertDate(dateStr, isGregorian) {
-        if (!dateStr)
-            return null;
-        if (isGregorian) {
-            // Preprocess Gregorian date
-            const gregorianDate = this.parseDate(dateStr);
-            if (!gregorianDate)
-                return null;
-            const formattedDate = this.formatDate(gregorianDate);
-            for (const yearKey in this.calendarData) {
-                for (const monthKey in this.calendarData[yearKey]) {
-                    const monthData = this.calendarData[yearKey][monthKey];
-                    if (this.isDateInMonthRange(formattedDate, monthData.fD?.gD, monthData.lD?.gD)) {
-                        const daysInMonth = this.generateDates(monthData.fD, monthData.lD, monthData.fD?.uC);
-                        const dayMatch = daysInMonth.find((d) => d.gD === formattedDate);
-                        if (dayMatch)
-                            return dayMatch;
-                    }
-                }
-            }
-        }
-        else {
-            const [day, month, year] = dateStr.split('/').map(Number);
-            if (isNaN(day) || isNaN(month) || isNaN(year))
-                return null;
-            for (const yearKey in this.calendarData) {
-                for (const monthKey in this.calendarData[yearKey]) {
-                    const monthData = this.calendarData[yearKey][monthKey];
-                    if (this.isDateInMonthRange(`${day}/${month}/${year}`, monthData.fD?.uD, monthData.lD?.uD)) {
-                        const daysInMonth = this.generateDates(monthData.fD, monthData.lD, monthData.fD?.uC);
-                        const dayMatch = daysInMonth.find((d) => {
-                            const [uDay, uMonth, uYear] = d?.uD?.split('/').map(Number);
-                            return uDay === day && uMonth === month && uYear === year;
-                        });
-                        if (dayMatch)
-                            return dayMatch;
-                    }
-                }
-            }
-        }
-        return null;
-    }
-    isDateInMonthRange(dateToCheck, monthStartDate, monthEndDate) {
-        if (!monthStartDate || !monthEndDate)
-            return false;
-        const checkDate = this.parseDate(dateToCheck);
-        const startDate = this.parseDate(monthStartDate);
-        const endDate = this.parseDate(monthEndDate);
-        if (!checkDate || !startDate || !endDate)
-            return false;
-        return checkDate >= startDate && checkDate <= endDate;
-    }
-    getMonthData(inputDate, type) {
-        const [day, month, year] = inputDate?.split('/').map(Number);
-        let isGregorian;
-        if (type == 'greg') {
-            isGregorian = true;
-        }
-        else {
-            isGregorian = false;
-        }
-        if (isGregorian) {
-            return this.getGregorianMonthData(day, month, year);
-        }
-        else {
-            return this.getUmAlQurraMonthData(day, month, year);
-        }
-    }
-    getGregorianMonthData(day, month, year) {
-        const yearData = this.calendarData[year];
-        if (!yearData)
-            return null;
-        const monthData = yearData[month];
-        if (!monthData)
-            return null;
-        const monthArray = [];
-        const endDate = new Date(year, month, 0);
-        for (let d = 1; d <= endDate.getDate(); d++) {
-            const offset = d - 1;
-            monthArray.push({
-                gD: `${d.toString().padStart(2, '0')}/${month
-                    .toString()
-                    .padStart(2, '0')}/${year}`,
-                uD: this.calculateUmAlQurraDate(monthData.fD.uD, offset, monthData.fD.uC),
-                dN: this.getDayName(new Date(year, month - 1, d).getDay()),
-                uC: monthData.fD.uC,
-            });
-        }
-        return monthArray;
-    }
-    getUmAlQurraMonthData(day, month, year) {
-        for (const gregorianYear in this.calendarData) {
-            const yearData = this.calendarData[parseInt(gregorianYear)];
-            for (const monthIndex in yearData) {
-                const monthData = yearData[parseInt(monthIndex)];
-                const [fDay, fMonth, fYear] = monthData?.fD?.uD?.split('/').map(Number);
-                if (fYear === year && fMonth === month) {
-                    const totalDays = monthData.fD.uC;
-                    const monthArray = [];
-                    const umAlQurraStartDate = `01/${month
-                        .toString()
-                        .padStart(2, '0')}/${year}`;
-                    const dayDifference = fDay - 1;
-                    const startGregorianDate = this.calculateGregorianDate(monthData.fD.gD, -dayDifference);
-                    for (let i = 0; i < totalDays; i++) {
-                        const uDate = this.calculateUmAlQurraDate(umAlQurraStartDate, i, totalDays);
-                        const gDate = this.calculateGregorianDate(startGregorianDate, i);
-                        const [gDay, gMonth, gYear] = gDate?.split('/').map(Number);
-                        const dayName = this.getDayName(new Date(gYear, gMonth - 1, gDay).getDay());
-                        monthArray.push({
-                            gD: gDate,
-                            uD: uDate,
-                            dN: dayName,
-                            uC: totalDays,
-                        });
-                    }
-                    return monthArray;
-                }
-            }
-        }
-        return null;
-    }
-    calculateGregorianDate(startGDate, offset) {
-        const [day, month, year] = startGDate?.split('/').map(Number);
-        const newDate = new Date(year, month - 1, day + offset);
-        return `${newDate.getDate().toString().padStart(2, '0')}/${(newDate.getMonth() + 1)
-            .toString()
-            .padStart(2, '0')}/${newDate.getFullYear()}`;
-    }
-    calculateUmAlQurraDate(startUDate, offset, uC) {
-        const [day, month, year] = startUDate?.split('/').map(Number);
-        let newDay = day + offset;
-        let newMonth = month;
-        let newYear = year;
-        while (newDay > uC) {
-            newDay -= uC;
-            newMonth += 1;
-        }
-        while (newMonth > 12) {
-            newMonth = 1;
-            newYear += 1;
-        }
-        return `${newDay.toString().padStart(2, '0')}/${newMonth
-            .toString()
-            .padStart(2, '0')}/${newYear}`;
-    }
-    getDayName(dayIndex) {
-        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-        return days[dayIndex];
-    }
-    /// Check date is it in past or future
-    checkPastOrFuture(inputDate, targetDate) {
-        if (inputDate) {
-            const [day, month, year] = inputDate?.split('/').map(Number);
-            const dateToCheck = new Date(year, month - 1, day);
-            const today = targetDate;
-            today.setHours(0, 0, 0, 0);
-            if (dateToCheck > today) {
-                return 'Future';
-            }
-            else if (dateToCheck < today) {
-                return 'Past';
-            }
-            else {
-                return 'Today';
-            }
-        }
-    }
-    /// Convert english numbers to arabic equivalent
-    parseEnglish(englishNum) {
-        if (!englishNum)
-            return englishNum;
-        const numStr = String(englishNum);
-        const arabicNumbers = [
-            '\u0660',
-            '\u0661',
-            '\u0662',
-            '\u0663',
-            '\u0664',
-            '\u0665',
-            '\u0666',
-            '\u0667',
-            '\u0668',
-            '\u0669',
-        ];
-        return numStr.replace(/[0-9]/g, (digit) => {
-            return arabicNumbers[Number(digit)] || digit;
-        });
-    }
-    /// Convert arabic numbers to english equivalent
-    parseArabic(arabicNum) {
-        return arabicNum.replace(/[٠١٢٣٤٥٦٧٨٩]/g, function (d) {
-            return d.charCodeAt(0) - 1632;
-        });
-    }
-    ///
-    convertDateNumerals(date, targetLang) {
-        const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
-        const englishNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-        const toArabic = (value) => value
-            .split('')
-            .map((char) => (/\d/.test(char) ? arabicNumbers[+char] : char))
-            .join('');
-        const toEnglish = (value) => value
-            .split('')
-            .map((char) => {
-            const index = arabicNumbers.indexOf(char);
-            return index > -1 ? englishNumbers[index] : char;
-        })
-            .join('');
-        if (targetLang === 'ar') {
-            const [day, month, year] = date.split('/');
-            return `${toArabic(year)}/${toArabic(month)}/${toArabic(day)}`;
-        }
-        else {
-            const [year, month, day] = date.split('/');
-            return `${toEnglish(day)}/${toEnglish(month)}/${toEnglish(year)}`;
-        }
-    }
-    /**
-     * Normalize input date to DD/MM/YYYY string format (Gregorian)
-     * Accepts Date object or DD/MM/YYYY string
-     */
-    normalizeDateToString(date) {
-        if (!date)
-            return null;
-        if (date instanceof Date) {
-            return this.formatDate(date);
-        }
-        // Already a string - validate format
-        const parsed = this.parseDate(date);
-        return parsed ? this.formatDate(parsed) : null;
-    }
-    /**
-     * Compare two dates (Gregorian format DD/MM/YYYY)
-     * Returns: -1 if date1 < date2, 0 if equal, 1 if date1 > date2
-     */
-    compareDates(date1Str, date2Str) {
-        const d1 = this.parseDate(date1Str);
-        const d2 = this.parseDate(date2Str);
-        if (!d1 || !d2)
-            return 0;
-        if (d1 < d2)
-            return -1;
-        if (d1 > d2)
-            return 1;
-        return 0;
-    }
-    /**
-     * Compare two Hijri dates (UM format DD/MM/YYYY)
-     * Converts to Gregorian for comparison
-     */
-    compareHijriDates(hijri1, hijri2) {
-        const day1 = this.convertDate(hijri1, false);
-        const day2 = this.convertDate(hijri2, false);
-        if (!day1?.gD || !day2?.gD)
-            return 0;
-        return this.compareDates(day1.gD, day2.gD);
-    }
-    /**
-     * Check if a date is within the specified range (inclusive)
-     * All dates in Gregorian DD/MM/YYYY format
-     */
-    isDateInRange(dateStr, minDateStr, maxDateStr) {
-        if (!dateStr)
-            return false;
-        // If no constraints, date is valid
-        if (!minDateStr && !maxDateStr)
-            return true;
-        // Check minimum constraint
-        if (minDateStr && this.compareDates(dateStr, minDateStr) < 0) {
-            return false;
-        }
-        // Check maximum constraint
-        if (maxDateStr && this.compareDates(dateStr, maxDateStr) > 0) {
-            return false;
-        }
-        return true;
-    }
-    /**
-     * Check if a Hijri date is within the specified range
-     * Converts to Gregorian for comparison
-     */
-    isHijriDateInRange(hijriDateStr, minDateStr, maxDateStr) {
-        if (!hijriDateStr)
-            return false;
-        const dayInfo = this.convertDate(hijriDateStr, false);
-        if (!dayInfo?.gD)
-            return false;
-        return this.isDateInRange(dayInfo.gD, minDateStr, maxDateStr);
-    }
-}
-DateUtilitiesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateUtilitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DateUtilitiesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateUtilitiesService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateUtilitiesService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
+class DateUtilitiesService {
+    constructor() {
+        this.calendarData = dictionary; //prod
+        // this.calendarData = datesDictionary; //debug
+    }
+    parseDate(dateStr) {
+        if (!dateStr) {
+            return null;
+        }
+        const parts = dateStr?.split('/');
+        if (parts.length !== 3) {
+            return null;
+        }
+        const [day, month, year] = parts.map(Number);
+        if (isNaN(day) ||
+            isNaN(month) ||
+            isNaN(year) ||
+            day < 1 ||
+            day > 31 ||
+            month < 1 ||
+            month > 12 ||
+            year < 1) {
+            return null;
+        }
+        return new Date(year, month - 1, day);
+    }
+    formatDate(date) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+    getDayShortHand(date) {
+        return date.toLocaleString('en-US', { weekday: 'short' });
+    }
+    generateDates(fD, lD, uC) {
+        const startDate = this.parseDate(fD?.gD);
+        const endDate = this.parseDate(lD?.gD);
+        const daysInMonth = [];
+        let currentGregorianDate = new Date(startDate);
+        let currentUmmAlQuraDay = parseInt(fD?.uD?.split('/')[0]);
+        let currentUmmAlQuraMonth = parseInt(fD?.uD?.split('/')[1]);
+        let currentUmmAlQuraYear = parseInt(fD?.uD?.split('/')[2]);
+        let daysInCurrentUmmAlQuraMonth = uC;
+        while (currentGregorianDate <= endDate) {
+            const ummAlQuraDate = `${currentUmmAlQuraDay
+                .toString()
+                .padStart(2, '0')}/${currentUmmAlQuraMonth
+                .toString()
+                .padStart(2, '0')}/${currentUmmAlQuraYear}`;
+            daysInMonth.push({
+                gD: this.formatDate(currentGregorianDate),
+                uD: ummAlQuraDate,
+                dN: this.getDayShortHand(currentGregorianDate),
+                uC: 0,
+            });
+            currentGregorianDate.setDate(currentGregorianDate.getDate() + 1);
+            currentUmmAlQuraDay += 1;
+            if (currentUmmAlQuraDay > daysInCurrentUmmAlQuraMonth) {
+                currentUmmAlQuraDay = 1;
+                currentUmmAlQuraMonth += 1;
+                if (currentUmmAlQuraMonth > 12) {
+                    currentUmmAlQuraMonth = 1;
+                    currentUmmAlQuraYear += 1;
+                }
+                const nextMonthData = this.calendarData[currentUmmAlQuraYear.toString()]?.[currentUmmAlQuraMonth.toString()];
+                daysInCurrentUmmAlQuraMonth = nextMonthData ? nextMonthData.fD.uC : 30;
+            }
+        }
+        return daysInMonth;
+    }
+    convertDate(dateStr, isGregorian) {
+        if (!dateStr)
+            return null;
+        if (isGregorian) {
+            // Preprocess Gregorian date
+            const gregorianDate = this.parseDate(dateStr);
+            if (!gregorianDate)
+                return null;
+            const formattedDate = this.formatDate(gregorianDate);
+            for (const yearKey in this.calendarData) {
+                for (const monthKey in this.calendarData[yearKey]) {
+                    const monthData = this.calendarData[yearKey][monthKey];
+                    if (this.isDateInMonthRange(formattedDate, monthData.fD?.gD, monthData.lD?.gD)) {
+                        const daysInMonth = this.generateDates(monthData.fD, monthData.lD, monthData.fD?.uC);
+                        const dayMatch = daysInMonth.find((d) => d.gD === formattedDate);
+                        if (dayMatch)
+                            return dayMatch;
+                    }
+                }
+            }
+        }
+        else {
+            const [day, month, year] = dateStr.split('/').map(Number);
+            if (isNaN(day) || isNaN(month) || isNaN(year))
+                return null;
+            for (const yearKey in this.calendarData) {
+                for (const monthKey in this.calendarData[yearKey]) {
+                    const monthData = this.calendarData[yearKey][monthKey];
+                    if (this.isDateInMonthRange(`${day}/${month}/${year}`, monthData.fD?.uD, monthData.lD?.uD)) {
+                        const daysInMonth = this.generateDates(monthData.fD, monthData.lD, monthData.fD?.uC);
+                        const dayMatch = daysInMonth.find((d) => {
+                            const [uDay, uMonth, uYear] = d?.uD?.split('/').map(Number);
+                            return uDay === day && uMonth === month && uYear === year;
+                        });
+                        if (dayMatch)
+                            return dayMatch;
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    isDateInMonthRange(dateToCheck, monthStartDate, monthEndDate) {
+        if (!monthStartDate || !monthEndDate)
+            return false;
+        const checkDate = this.parseDate(dateToCheck);
+        const startDate = this.parseDate(monthStartDate);
+        const endDate = this.parseDate(monthEndDate);
+        if (!checkDate || !startDate || !endDate)
+            return false;
+        return checkDate >= startDate && checkDate <= endDate;
+    }
+    getMonthData(inputDate, type) {
+        const [day, month, year] = inputDate?.split('/').map(Number);
+        let isGregorian;
+        if (type == 'greg') {
+            isGregorian = true;
+        }
+        else {
+            isGregorian = false;
+        }
+        if (isGregorian) {
+            return this.getGregorianMonthData(day, month, year);
+        }
+        else {
+            return this.getUmAlQurraMonthData(day, month, year);
+        }
+    }
+    getGregorianMonthData(day, month, year) {
+        const yearData = this.calendarData[year];
+        if (!yearData)
+            return null;
+        const monthData = yearData[month];
+        if (!monthData)
+            return null;
+        const monthArray = [];
+        const endDate = new Date(year, month, 0);
+        for (let d = 1; d <= endDate.getDate(); d++) {
+            const offset = d - 1;
+            monthArray.push({
+                gD: `${d.toString().padStart(2, '0')}/${month
+                    .toString()
+                    .padStart(2, '0')}/${year}`,
+                uD: this.calculateUmAlQurraDate(monthData.fD.uD, offset, monthData.fD.uC),
+                dN: this.getDayName(new Date(year, month - 1, d).getDay()),
+                uC: monthData.fD.uC,
+            });
+        }
+        return monthArray;
+    }
+    getUmAlQurraMonthData(day, month, year) {
+        for (const gregorianYear in this.calendarData) {
+            const yearData = this.calendarData[parseInt(gregorianYear)];
+            for (const monthIndex in yearData) {
+                const monthData = yearData[parseInt(monthIndex)];
+                const [fDay, fMonth, fYear] = monthData?.fD?.uD?.split('/').map(Number);
+                if (fYear === year && fMonth === month) {
+                    const totalDays = monthData.fD.uC;
+                    const monthArray = [];
+                    const umAlQurraStartDate = `01/${month
+                        .toString()
+                        .padStart(2, '0')}/${year}`;
+                    const dayDifference = fDay - 1;
+                    const startGregorianDate = this.calculateGregorianDate(monthData.fD.gD, -dayDifference);
+                    for (let i = 0; i < totalDays; i++) {
+                        const uDate = this.calculateUmAlQurraDate(umAlQurraStartDate, i, totalDays);
+                        const gDate = this.calculateGregorianDate(startGregorianDate, i);
+                        const [gDay, gMonth, gYear] = gDate?.split('/').map(Number);
+                        const dayName = this.getDayName(new Date(gYear, gMonth - 1, gDay).getDay());
+                        monthArray.push({
+                            gD: gDate,
+                            uD: uDate,
+                            dN: dayName,
+                            uC: totalDays,
+                        });
+                    }
+                    return monthArray;
+                }
+            }
+        }
+        return null;
+    }
+    calculateGregorianDate(startGDate, offset) {
+        const [day, month, year] = startGDate?.split('/').map(Number);
+        const newDate = new Date(year, month - 1, day + offset);
+        return `${newDate.getDate().toString().padStart(2, '0')}/${(newDate.getMonth() + 1)
+            .toString()
+            .padStart(2, '0')}/${newDate.getFullYear()}`;
+    }
+    calculateUmAlQurraDate(startUDate, offset, uC) {
+        const [day, month, year] = startUDate?.split('/').map(Number);
+        let newDay = day + offset;
+        let newMonth = month;
+        let newYear = year;
+        while (newDay > uC) {
+            newDay -= uC;
+            newMonth += 1;
+        }
+        while (newMonth > 12) {
+            newMonth = 1;
+            newYear += 1;
+        }
+        return `${newDay.toString().padStart(2, '0')}/${newMonth
+            .toString()
+            .padStart(2, '0')}/${newYear}`;
+    }
+    getDayName(dayIndex) {
+        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        return days[dayIndex];
+    }
+    /// Check date is it in past or future
+    checkPastOrFuture(inputDate, targetDate) {
+        if (inputDate) {
+            const [day, month, year] = inputDate?.split('/').map(Number);
+            const dateToCheck = new Date(year, month - 1, day);
+            const today = targetDate;
+            today.setHours(0, 0, 0, 0);
+            if (dateToCheck > today) {
+                return 'Future';
+            }
+            else if (dateToCheck < today) {
+                return 'Past';
+            }
+            else {
+                return 'Today';
+            }
+        }
+    }
+    /// Convert english numbers to arabic equivalent
+    parseEnglish(englishNum) {
+        if (!englishNum)
+            return englishNum;
+        const numStr = String(englishNum);
+        const arabicNumbers = [
+            '\u0660',
+            '\u0661',
+            '\u0662',
+            '\u0663',
+            '\u0664',
+            '\u0665',
+            '\u0666',
+            '\u0667',
+            '\u0668',
+            '\u0669',
+        ];
+        return numStr.replace(/[0-9]/g, (digit) => {
+            return arabicNumbers[Number(digit)] || digit;
+        });
+    }
+    /// Convert arabic numbers to english equivalent
+    parseArabic(arabicNum) {
+        return arabicNum.replace(/[٠١٢٣٤٥٦٧٨٩]/g, function (d) {
+            return d.charCodeAt(0) - 1632;
+        });
+    }
+    ///
+    convertDateNumerals(date, targetLang) {
+        const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
+        const englishNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        const toArabic = (value) => value
+            .split('')
+            .map((char) => (/\d/.test(char) ? arabicNumbers[+char] : char))
+            .join('');
+        const toEnglish = (value) => value
+            .split('')
+            .map((char) => {
+            const index = arabicNumbers.indexOf(char);
+            return index > -1 ? englishNumbers[index] : char;
+        })
+            .join('');
+        if (targetLang === 'ar') {
+            const [day, month, year] = date.split('/');
+            return `${toArabic(year)}/${toArabic(month)}/${toArabic(day)}`;
+        }
+        else {
+            const [year, month, day] = date.split('/');
+            return `${toEnglish(day)}/${toEnglish(month)}/${toEnglish(year)}`;
+        }
+    }
+    /**
+     * Normalize input date to DD/MM/YYYY string format (Gregorian)
+     * Accepts Date object or DD/MM/YYYY string
+     */
+    normalizeDateToString(date) {
+        if (!date)
+            return null;
+        if (date instanceof Date) {
+            return this.formatDate(date);
+        }
+        // Already a string - validate format
+        const parsed = this.parseDate(date);
+        return parsed ? this.formatDate(parsed) : null;
+    }
+    /**
+     * Compare two dates (Gregorian format DD/MM/YYYY)
+     * Returns: -1 if date1 < date2, 0 if equal, 1 if date1 > date2
+     */
+    compareDates(date1Str, date2Str) {
+        const d1 = this.parseDate(date1Str);
+        const d2 = this.parseDate(date2Str);
+        if (!d1 || !d2)
+            return 0;
+        if (d1 < d2)
+            return -1;
+        if (d1 > d2)
+            return 1;
+        return 0;
+    }
+    /**
+     * Compare two Hijri dates (UM format DD/MM/YYYY)
+     * Converts to Gregorian for comparison
+     */
+    compareHijriDates(hijri1, hijri2) {
+        const day1 = this.convertDate(hijri1, false);
+        const day2 = this.convertDate(hijri2, false);
+        if (!day1?.gD || !day2?.gD)
+            return 0;
+        return this.compareDates(day1.gD, day2.gD);
+    }
+    /**
+     * Check if a date is within the specified range (inclusive)
+     * All dates in Gregorian DD/MM/YYYY format
+     */
+    isDateInRange(dateStr, minDateStr, maxDateStr) {
+        if (!dateStr)
+            return false;
+        // If no constraints, date is valid
+        if (!minDateStr && !maxDateStr)
+            return true;
+        // Check minimum constraint
+        if (minDateStr && this.compareDates(dateStr, minDateStr) < 0) {
+            return false;
+        }
+        // Check maximum constraint
+        if (maxDateStr && this.compareDates(dateStr, maxDateStr) > 0) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Check if a Hijri date is within the specified range
+     * Converts to Gregorian for comparison
+     */
+    isHijriDateInRange(hijriDateStr, minDateStr, maxDateStr) {
+        if (!hijriDateStr)
+            return false;
+        const dayInfo = this.convertDate(hijriDateStr, false);
+        if (!dayInfo?.gD)
+            return false;
+        return this.isDateInRange(dayInfo.gD, minDateStr, maxDateStr);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateUtilitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateUtilitiesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateUtilitiesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
 var themes = [
 	{
@@ -27908,1078 +27908,1078 @@ var themesConfig = /*#__PURE__*/Object.freeze({
     default: themes
 });
 
-class HijriGregorianDatepickerComponent {
-    constructor(formBuilder, _dateUtilsService) {
-        this.formBuilder = formBuilder;
-        this._dateUtilsService = _dateUtilsService;
-        /// Inputs
-        this.markToday = true;
-        this.canChangeMode = true;
-        this.todaysDateSection = true;
-        this.futureValidation = true;
-        this.disableYearPicker = false;
-        this.disableMonthPicker = false;
-        this.disableDayPicker = false;
-        this.multiple = false;
-        this.isRequired = false;
-        this.showConfirmButton = true;
-        this.futureValidationMessage = false;
-        this.arabicLayout = false;
-        this.mode = 'greg';
-        this.dir = 'ltr';
-        this.locale = 'en';
-        this.submitTextButton = 'Confirm';
-        this.todaysDateText = "Today's Date";
-        this.ummAlQuraDateText = 'Hijri Date';
-        this.monthSelectLabel = 'Month';
-        this.yearSelectLabel = 'Year';
-        this.theme = '';
-        this.pastYearsLimit = 90;
-        this.futureYearsLimit = 0;
-        this.styles = {};
-        // New inputs for extended functionality
-        this.enableTime = false; // Enable time picker (hours & minutes)
-        // BACKWARD COMPATIBILITY: Default to false (24-hour format)
-        // When true, displays 12-hour format with AM/PM toggle
-        this.useMeridian = false; // Enable 12-hour format with AM/PM
-        // BACKWARD COMPATIBILITY: Default to 'single' (existing behavior)
-        // 'range' enables range selection mode (first click = start, second click = end)
-        this.selectionMode = 'single';
-        /// Outputs
-        this.onSubmit = new EventEmitter();
-        this.onDaySelect = new EventEmitter();
-        this.onMonthChange = new EventEmitter();
-        this.onYearChange = new EventEmitter();
-        /// Variables
-        this.ummAlQuraMonths = [
-            { labelAr: 'محرم', labelEn: 'Muharram', value: 1 },
-            { labelAr: 'صفر', labelEn: 'Safar', value: 2 },
-            { labelAr: 'ربيع الأول', labelEn: 'Rabi al-Awwal', value: 3 },
-            { labelAr: 'ربيع الثاني', labelEn: 'Rabi al-Thani', value: 4 },
-            { labelAr: 'جمادى الأولى', labelEn: 'Jumada al-Awwal', value: 5 },
-            { labelAr: 'جمادى الآخرة', labelEn: 'Jumada al-Thani', value: 6 },
-            { labelAr: 'رجب', labelEn: 'Rajab', value: 7 },
-            { labelAr: 'شعبان', labelEn: 'Shaban', value: 8 },
-            { labelAr: 'رمضان', labelEn: 'Ramadan', value: 9 },
-            { labelAr: 'شوال', labelEn: 'Shawwal', value: 10 },
-            { labelAr: 'ذو القعدة', labelEn: 'Dhu al-Qadah', value: 11 },
-            { labelAr: 'ذو الحجة', labelEn: 'Dhu al-Hijjah', value: 12 },
-        ];
-        this.gregMonths = [
-            { labelAr: 'يناير', labelEn: 'January', value: 1 },
-            { labelAr: 'فبراير', labelEn: 'February', value: 2 },
-            { labelAr: 'مارس', labelEn: 'March', value: 3 },
-            { labelAr: 'ابريل', labelEn: 'April', value: 4 },
-            { labelAr: 'مايو', labelEn: 'May', value: 5 },
-            { labelAr: 'يونيو', labelEn: 'June', value: 6 },
-            { labelAr: 'يوليو', labelEn: 'July', value: 7 },
-            { labelAr: 'اغسطس', labelEn: 'August', value: 8 },
-            { labelAr: 'سبتمبر', labelEn: 'September', value: 9 },
-            { labelAr: 'اكتوبر', labelEn: 'October', value: 10 },
-            { labelAr: 'نوفمبر', labelEn: 'November', value: 11 },
-            { labelAr: 'ديسمبر', labelEn: 'December', value: 12 },
-        ];
-        this.weekdaysEn = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-        this.weekdaysAr = ['سبت', 'جمعة', 'خميس', 'أربعاء', 'ثلاثاء', 'اثنين', 'أحد'];
-        // weekdaysAr = ['س', 'ج', 'خ', 'أر', 'ث', 'إث', 'أح'];
-        this.todaysDate = {};
-        this.multipleSelectedDates = [];
-        this.themes = [];
-        // Time picker variables
-        // BACKWARD COMPATIBILITY: selectedTime defaults to 0:0 to preserve existing behavior when enableTime=false
-        // When enableTime=true, this will be initialized to current system time in ngOnInit
-        this.selectedTime = { hour: 0, minute: 0 };
-        // Track if time has been initialized to avoid re-initializing at midnight
-        this.timeInitialized = false;
-        // BACKWARD COMPATIBILITY: Meridian only used when useMeridian=true
-        // Tracks AM/PM state for 12-hour format
-        this.meridian = 'AM';
-        // Range selection state
-        // BACKWARD COMPATIBILITY: These are only used when selectionMode='range'
-        // They do not affect single or multiple selection modes
-        this.rangeStart = undefined;
-        this.rangeEnd = undefined;
-    }
-    ngOnInit() {
-        this.initTheme();
-        this.initializeForm();
-        this.getTodaysDateInfo();
-        this.initializeYearsAndMonths();
-        // Initialize time from current system time or initialDate
-        // BACKWARD COMPATIBILITY: This only runs when enableTime=true
-        if (this.enableTime) {
-            this.initializeTime();
-        }
-    }
-    ngAfterViewInit() {
-        // Double-check time initialization after view is ready
-        // This handles cases where enableTime might be set after ngOnInit
-        if (this.enableTime && !this.timeInitialized) {
-            this.initializeTime();
-        }
-    }
-    ngOnChanges(changes) {
-        if (!changes['mode'].isFirstChange()) {
-            this.changeCalendarMode();
-        }
-    }
-    initTheme() {
-        if (this.theme != '') {
-            this.themes = themesConfig;
-            for (const themeItem of this.themes['default']) {
-                if (themeItem.name == this.theme) {
-                    this.styles = themeItem.stylesConfig;
-                    break;
-                }
-            }
-        }
-        this.fontFamilyStyle = this.styles.fontFamily;
-    }
-    /// Initialize form control for month and year select
-    initializeForm() {
-        this.periodForm = this.formBuilder.group({
-            year: [{ value: '', disabled: this.disableYearPicker }, []],
-            month: [{ value: '', disabled: this.disableMonthPicker }, []],
-        });
-    }
-    // Initialize years and months for calendar
-    initializeYearsAndMonths() {
-        this.years = [];
-        this.months = [];
-        // Determine the date to use for initialization (initialDate or today)
-        let referenceDate;
-        if (this.initialDate) {
-            const normalizedInitialDate = this._dateUtilsService.normalizeDateToString(this.initialDate);
-            if (normalizedInitialDate) {
-                if (this.mode == 'greg') {
-                    referenceDate = normalizedInitialDate;
-                }
-                else {
-                    const hijriDate = this._dateUtilsService.convertDate(normalizedInitialDate, true);
-                    referenceDate = hijriDate?.uD || this.todaysDate.ummAlQura;
-                }
-            }
-            else {
-                referenceDate =
-                    this.mode == 'greg'
-                        ? this.todaysDate.gregorian
-                        : this.todaysDate.ummAlQura;
-            }
-        }
-        else {
-            referenceDate =
-                this.mode == 'greg'
-                    ? this.todaysDate.gregorian
-                    : this.todaysDate.ummAlQura;
-        }
-        if (this.mode == 'greg') {
-            this.gregYear =
-                this.futureYearsLimit == 0
-                    ? Number(referenceDate?.split('/')[2])
-                    : Number(referenceDate?.split('/')[2]) + this.futureYearsLimit;
-            for (let i = 0; i < this.gregYear; i++) {
-                if (i < this.pastYearsLimit) {
-                    let val = this.gregYear--;
-                    this.years.push(val);
-                }
-                else {
-                    break;
-                }
-            }
-            this.months = this.gregMonths;
-        }
-        else {
-            this.ummAlQuraYear =
-                this.futureYearsLimit == 0
-                    ? Number(referenceDate?.split('/')[2])
-                    : Number(referenceDate?.split('/')[2]) + this.futureYearsLimit;
-            for (let i = 0; i < this.ummAlQuraYear; i++) {
-                if (i < this.pastYearsLimit) {
-                    let val = this.ummAlQuraYear--;
-                    this.years.push(val);
-                }
-                else {
-                    break;
-                }
-            }
-            this.months = this.ummAlQuraMonths;
-        }
-        this.years.map((year) => {
-            if (year == referenceDate?.split('/')[2]) {
-                this.periodForm.controls['year'].setValue(year);
-            }
-        });
-        this.months.map((month) => {
-            if (month.value == referenceDate?.split('/')[1]) {
-                this.periodForm.controls['month'].setValue(month.value);
-            }
-        });
-    }
-    /// On change event of years and months
-    onPeriodChange(type) {
-        if (type == 'year') {
-            this.onYearChange.emit(this.periodForm.controls['year'].value);
-        }
-        else {
-            this.onMonthChange.emit(this.periodForm.controls['month'].value);
-        }
-        const days = this._dateUtilsService.getMonthData('01/' +
-            this.periodForm.controls['month'].value +
-            '/' +
-            this.periodForm.controls['year'].value, this.mode);
-        this.weeks = this.generateWeeksArray(days);
-    }
-    /// Get todays(greg and umm al qura) date info
-    getTodaysDateInfo() {
-        this.todaysDate.gregorian = this._dateUtilsService.formatDate(new Date());
-        this.todaysDate.ummAlQura = this._dateUtilsService.convertDate(this.todaysDate.gregorian, true)?.uD;
-        // Use initialDate if provided, otherwise use today's date
-        let dateToNavigate;
-        if (this.initialDate) {
-            // Normalize initialDate to DD/MM/YYYY format
-            const normalizedInitialDate = this._dateUtilsService.normalizeDateToString(this.initialDate);
-            if (normalizedInitialDate) {
-                if (this.mode == 'greg') {
-                    dateToNavigate = normalizedInitialDate;
-                }
-                else {
-                    // Convert to Hijri for ummAlQura mode
-                    const hijriDate = this._dateUtilsService.convertDate(normalizedInitialDate, true);
-                    dateToNavigate = hijriDate?.uD || this.todaysDate.ummAlQura;
-                }
-            }
-            else {
-                // Invalid initialDate, fall back to today
-                dateToNavigate =
-                    this.mode == 'greg'
-                        ? this.todaysDate.gregorian
-                        : this.todaysDate.ummAlQura;
-            }
-        }
-        else {
-            // No initialDate provided, use today
-            dateToNavigate =
-                this.mode == 'greg'
-                    ? this.todaysDate.gregorian
-                    : this.todaysDate.ummAlQura;
-        }
-        this.generatetMonthData(dateToNavigate);
-        // Highlight initialDate or initialRange if provided
-        if (this.selectionMode === 'range' && (this.initialRangeStart || this.initialRangeEnd)) {
-            this.highlightInitialRange();
-        }
-        else if (this.initialDate) {
-            this.highlightInitialDate();
-        }
-    }
-    /// Generate month days from JSON
-    generatetMonthData(date) {
-        const days = this._dateUtilsService.getMonthData(date, this.mode);
-        this.weeks = this.generateWeeksArray(days);
-    }
-    /// Highlight initialDate on the calendar
-    highlightInitialDate() {
-        if (!this.initialDate) {
-            return;
-        }
-        const normalizedInitialDate = this._dateUtilsService.normalizeDateToString(this.initialDate);
-        if (!normalizedInitialDate) {
-            return;
-        }
-        // Find the day in the weeks array that matches initialDate
-        for (const week of this.weeks) {
-            for (const day of week) {
-                if (day && day.gD === normalizedInitialDate) {
-                    // Don't select if date is disabled
-                    if (!this.isDateDisabled(day)) {
-                        // Mark as selected without triggering events
-                        day.selected = true;
-                        // Set as selectedDay based on selection mode
-                        if (this.selectionMode === 'range') {
-                            this.rangeStart = day;
-                        }
-                        else if (this.multiple) {
-                            this.multipleSelectedDates = [day];
-                        }
-                        else {
-                            this.selectedDay = day;
-                        }
-                        // Initialize time if enableTime is active
-                        if (this.enableTime && !this.timeInitialized) {
-                            this.initializeTime();
-                        }
-                        // Attach time to the day if it's a Date object with time
-                        if (this.enableTime && this.initialDate instanceof Date) {
-                            day.time = {
-                                hour: this.initialDate.getHours(),
-                                minute: this.initialDate.getMinutes()
-                            };
-                        }
-                    }
-                    return;
-                }
-            }
-        }
-    }
-    /// Highlight initial range (start and end dates) on the calendar
-    highlightInitialRange() {
-        if (!this.initialRangeStart && !this.initialRangeEnd) {
-            return;
-        }
-        const normalizedStartDate = this.initialRangeStart
-            ? this._dateUtilsService.normalizeDateToString(this.initialRangeStart)
-            : null;
-        const normalizedEndDate = this.initialRangeEnd
-            ? this._dateUtilsService.normalizeDateToString(this.initialRangeEnd)
-            : null;
-        let startDay = null;
-        let endDay = null;
-        // Find both start and end dates in the weeks array
-        for (const week of this.weeks) {
-            for (const day of week) {
-                if (day && normalizedStartDate && day.gD === normalizedStartDate) {
-                    if (!this.isDateDisabled(day)) {
-                        startDay = day;
-                    }
-                }
-                if (day && normalizedEndDate && day.gD === normalizedEndDate) {
-                    if (!this.isDateDisabled(day)) {
-                        endDay = day;
-                    }
-                }
-            }
-        }
-        // Set range start
-        if (startDay) {
-            startDay.selected = true;
-            this.rangeStart = startDay;
-            this.selectedDay = startDay;
-            // Initialize and attach time to start date
-            if (this.enableTime) {
-                if (!this.timeInitialized) {
-                    this.initializeTime();
-                }
-                if (this.initialRangeStart instanceof Date) {
-                    startDay.time = {
-                        hour: this.initialRangeStart.getHours(),
-                        minute: this.initialRangeStart.getMinutes()
-                    };
-                }
-                else {
-                    startDay.time = { ...this.selectedTime };
-                }
-            }
-        }
-        // Set range end if provided
-        if (endDay && startDay) {
-            // Swap if end is before start
-            const startDate = this.parseDateString(startDay.gD);
-            const endDate = this.parseDateString(endDay.gD);
-            if (endDate && startDate && endDate < startDate) {
-                // Swap
-                this.rangeEnd = startDay;
-                this.rangeStart = endDay;
-                endDay.selected = true;
-            }
-            else {
-                this.rangeEnd = endDay;
-            }
-            // Attach time to end date (inherit from start)
-            if (this.enableTime) {
-                const timeToUse = this.rangeStart.time || { ...this.selectedTime };
-                if (this.initialRangeEnd instanceof Date) {
-                    this.rangeEnd.time = {
-                        hour: this.initialRangeEnd.getHours(),
-                        minute: this.initialRangeEnd.getMinutes()
-                    };
-                }
-                else {
-                    this.rangeEnd.time = { ...timeToUse };
-                }
-                // Ensure start also has time
-                this.rangeStart.time = { ...timeToUse };
-            }
-            // Highlight the range
-            this.highlightRange();
-            this.selectedDay = this.rangeEnd;
-        }
-    }
-    /// Generate month weeks
-    generateWeeksArray(daysArray) {
-        const firstDayName = daysArray[0]?.dN;
-        const startIndex = this.weekdaysEn.indexOf(firstDayName);
-        const weeks = [[]];
-        let currentWeek = 0;
-        let currentDayIndex = startIndex;
-        daysArray?.forEach((day) => {
-            if (!weeks[currentWeek]) {
-                weeks[currentWeek] = [];
-            }
-            weeks[currentWeek][currentDayIndex] = day;
-            currentDayIndex++;
-            if (currentDayIndex === 7) {
-                currentDayIndex = 0;
-                currentWeek++;
-            }
-        });
-        weeks.forEach((week) => {
-            while (week.length < 7) {
-                week.push({});
-            }
-        });
-        return weeks;
-    }
-    /// Change calendar mode 'greg' or 'ummAlQura'
-    changeCalendarMode() {
-        this.mode = this.mode == 'greg' ? 'ummAlQura' : 'greg';
-        this.initializeYearsAndMonths();
-        this.generatetMonthData('01/' +
-            this.periodForm.controls['month'].value +
-            '/' +
-            this.periodForm.controls['year'].value);
-    }
-    /// On day clicked handler
-    onDayClicked(day) {
-        if (day && day?.gD) {
-            // Check if day is disabled by min/max constraints
-            if (this.isDateDisabled(day)) {
-                return; // Don't allow selection of disabled dates
-            }
-            if (this.futureValidation) {
-                if (this.checkFutureValidation(day)) {
-                    this.futureValidationMessage = true;
-                }
-                else {
-                    this.futureValidationMessage = false;
-                    this.markDaySelected(day);
-                }
-            }
-            else {
-                this.markDaySelected(day);
-            }
-        }
-    }
-    /// Mark day as selected
-    markDaySelected(dayInfo) {
-        // BACKWARD COMPATIBILITY: Range selection only when selectionMode='range'
-        if (this.selectionMode === 'range') {
-            this.handleRangeSelection(dayInfo);
-            return;
-        }
-        // BACKWARD COMPATIBILITY: Original behavior for single/multiple selection
-        if (dayInfo.selected) {
-            dayInfo.selected = false;
-            this.multipleSelectedDates = this.multipleSelectedDates.filter((day) => day !== dayInfo);
-            if (!this.multiple) {
-                this.selectedDay = undefined;
-            }
-        }
-        else {
-            if (!this.multiple) {
-                this.weeks.forEach((week) => {
-                    week.forEach((day) => {
-                        day.selected = false;
-                    });
-                });
-                dayInfo.selected = true;
-                this.selectedDay = dayInfo;
-                this.multipleSelectedDates = [dayInfo];
-                // Attach current time if enableTime is active
-                if (this.enableTime) {
-                    // Ensure time is initialized before attaching
-                    if (!this.timeInitialized) {
-                        this.initializeTime();
-                    }
-                    dayInfo.time = { ...this.selectedTime };
-                }
-                this.onDaySelect.emit(dayInfo);
-            }
-            else {
-                dayInfo.selected = true;
-                // Attach current time if enableTime is active
-                if (this.enableTime) {
-                    // Ensure time is initialized before attaching
-                    if (!this.timeInitialized) {
-                        this.initializeTime();
-                    }
-                    dayInfo.time = { ...this.selectedTime };
-                }
-                this.onDaySelect.emit(dayInfo);
-                if (!this.multipleSelectedDates.includes(dayInfo)) {
-                    this.multipleSelectedDates.push(dayInfo);
-                }
-            }
-        }
-    }
-    /**
-     * Handle range selection logic
-     * BACKWARD COMPATIBILITY: Only called when selectionMode='range'
-     *
-     * Range selection lifecycle:
-     * 1. First click → Sets rangeStart
-     * 2. Second click → Sets rangeEnd, highlights range
-     * 3. Third click → Resets range, starts new selection
-     */
-    handleRangeSelection(dayInfo) {
-        // First click or resetting range
-        if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
-            this.resetRange();
-            this.rangeStart = dayInfo;
-            dayInfo.selected = true;
-            this.selectedDay = dayInfo;
-            // Attach current time if enableTime is active
-            if (this.enableTime) {
-                // Ensure selectedTime is initialized
-                // If time hasn't been initialized yet, initialize it now
-                if (!this.timeInitialized) {
-                    this.initializeTime();
-                }
-                dayInfo.time = { ...this.selectedTime };
-            }
-            this.onDaySelect.emit({ start: dayInfo, end: null });
-        }
-        // Second click - complete the range
-        else if (this.rangeStart && !this.rangeEnd) {
-            const startDate = this.parseDateString(this.rangeStart.gD);
-            const endDate = this.parseDateString(dayInfo.gD);
-            // Swap if end is before start
-            if (endDate && startDate && endDate < startDate) {
-                this.rangeEnd = this.rangeStart;
-                this.rangeStart = dayInfo;
-            }
-            else {
-                this.rangeEnd = dayInfo;
-            }
-            // Attach time if enableTime is active
-            // IMPORTANT: Range end inherits time from range start (not current selectedTime)
-            if (this.enableTime) {
-                // Use rangeStart's time if it exists, otherwise use current selectedTime
-                const timeToUse = this.rangeStart.time || { ...this.selectedTime };
-                this.rangeStart.time = { ...timeToUse };
-                this.rangeEnd.time = { ...timeToUse };
-            }
-            this.highlightRange();
-            this.selectedDay = this.rangeEnd;
-            this.onDaySelect.emit({ start: this.rangeStart, end: this.rangeEnd });
-        }
-    }
-    /// On confirm button clicked
-    onConfirmClicked() {
-        // BACKWARD COMPATIBILITY: Range selection output when selectionMode='range'
-        if (this.selectionMode === 'range') {
-            if (this.rangeStart && this.rangeEnd) {
-                // Collect all dates in range
-                const rangeDates = [];
-                this.weeks.forEach((week) => {
-                    week.forEach((day) => {
-                        if (day && day.gD && (this.isInRange(day) || this.isRangeStart(day) || this.isRangeEnd(day))) {
-                            // Attach current time if enableTime is active
-                            if (this.enableTime && !day.time) {
-                                day.time = { ...this.selectedTime };
-                            }
-                            rangeDates.push(day);
-                        }
-                    });
-                });
-                this.onSubmit.emit({
-                    start: this.rangeStart,
-                    end: this.rangeEnd,
-                    dates: rangeDates
-                });
-            }
-            else {
-                // Incomplete range
-                this.onSubmit.emit({ start: this.rangeStart, end: null, dates: [] });
-            }
-            return;
-        }
-        // BACKWARD COMPATIBILITY: Original behavior for multiple/single selection
-        if (this.multiple) {
-            // For multiple dates, attach time to each if enableTime is active
-            if (this.enableTime) {
-                this.multipleSelectedDates.forEach((day) => {
-                    if (!day.time) {
-                        day.time = { ...this.selectedTime };
-                    }
-                });
-            }
-            this.onSubmit.emit(this.multipleSelectedDates);
-        }
-        else {
-            // For single date, attach time if enableTime is active
-            if (this.enableTime && this.selectedDay) {
-                this.selectedDay.time = { ...this.selectedTime };
-            }
-            this.onSubmit.emit(this.selectedDay);
-        }
-    }
-    /// Check if date from future
-    checkFutureValidation(day) {
-        if (this._dateUtilsService.checkPastOrFuture(day?.gD, new Date()) == 'Future') {
-            return true;
-        }
-    }
-    /// Check if passed day is today or not
-    checkTodaysDate(day) {
-        return (this.todaysDate?.gregorian == day?.gD ||
-            this.todaysDate?.ummAlQura == day?.uD);
-    }
-    /**
-     * Check if a day is disabled based on min/max date constraints
-     * Works for both Gregorian and Hijri modes
-     */
-    isDateDisabled(day) {
-        if (!day || !day.gD)
-            return true;
-        // Normalize min/max dates to Gregorian DD/MM/YYYY format
-        const minDateStr = this.minDate
-            ? this._dateUtilsService.normalizeDateToString(this.minDate)
-            : null;
-        const maxDateStr = this.maxDate
-            ? this._dateUtilsService.normalizeDateToString(this.maxDate)
-            : null;
-        // Check if the day's Gregorian date is within range
-        return !this._dateUtilsService.isDateInRange(day.gD, minDateStr, maxDateStr);
-    }
-    /**
-     * Initialize time from current system time or initialDate
-     * BACKWARD COMPATIBILITY: Only called when enableTime=true
-     *
-     * Priority:
-     * 1. If initialDate has time, use that
-     * 2. If selectedDay has time, use that
-     * 3. Otherwise, use current system time
-     */
-    initializeTime() {
-        let timeSet = false;
-        // Check if initialDate has time information
-        if (this.initialDate && this.initialDate instanceof Date) {
-            this.selectedTime = {
-                hour: this.initialDate.getHours(),
-                minute: this.initialDate.getMinutes(),
-            };
-            timeSet = true;
-        }
-        // If no time from initialDate, use current system time
-        if (!timeSet) {
-            const now = new Date();
-            this.selectedTime = {
-                hour: now.getHours(),
-                minute: now.getMinutes(),
-            };
-        }
-        // Mark that time has been initialized
-        this.timeInitialized = true;
-        // BACKWARD COMPATIBILITY: Only set meridian when useMeridian=true
-        if (this.useMeridian) {
-            this.meridian = this.selectedTime.hour >= 12 ? 'PM' : 'AM';
-        }
-    }
-    /**
-     * Increment hour value with wraparound (0-23)
-     * BACKWARD COMPATIBILITY: Only available when enableTime=true
-     */
-    incrementHour() {
-        this.selectedTime.hour = (this.selectedTime.hour + 1) % 24;
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Decrement hour value with wraparound (0-23)
-     * BACKWARD COMPATIBILITY: Only available when enableTime=true
-     */
-    decrementHour() {
-        this.selectedTime.hour = (this.selectedTime.hour - 1 + 24) % 24;
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Increment minute value with wraparound (0-59)
-     * BACKWARD COMPATIBILITY: Only available when enableTime=true
-     */
-    incrementMinute() {
-        this.selectedTime.minute = (this.selectedTime.minute + 1) % 60;
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Decrement minute value with wraparound (0-59)
-     * BACKWARD COMPATIBILITY: Only available when enableTime=true
-     */
-    decrementMinute() {
-        this.selectedTime.minute = (this.selectedTime.minute - 1 + 60) % 60;
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Handle keyboard input for hours
-     * Validates and clamps to 0-23 range
-     * BACKWARD COMPATIBILITY: Only available when enableTime=true
-     */
-    onHourInputChange(event) {
-        let value = parseInt(event.target.value, 10);
-        if (isNaN(value) || value < 0) {
-            value = 0;
-        }
-        else if (value > 23) {
-            value = 23;
-        }
-        this.selectedTime.hour = value;
-        event.target.value = value;
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Handle keyboard input for minutes
-     * Validates and clamps to 0-59 range
-     * BACKWARD COMPATIBILITY: Only available when enableTime=true
-     */
-    onMinuteInputChange(event) {
-        let value = parseInt(event.target.value, 10);
-        if (isNaN(value) || value < 0) {
-            value = 0;
-        }
-        else if (value > 59) {
-            value = 59;
-        }
-        this.selectedTime.minute = value;
-        event.target.value = value;
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Handle keyboard arrow keys for hour/minute input
-     * BACKWARD COMPATIBILITY: Only available when enableTime=true
-     */
-    onTimeKeydown(event, type) {
-        if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            if (type === 'hour') {
-                this.incrementHour();
-            }
-            else {
-                this.incrementMinute();
-            }
-        }
-        else if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            if (type === 'hour') {
-                this.decrementHour();
-            }
-            else {
-                this.decrementMinute();
-            }
-        }
-    }
-    /**
-     * Update the selected day's time property when time changes
-     * BACKWARD COMPATIBILITY: Only called when enableTime=true
-     */
-    updateSelectedDayTime() {
-        if (this.selectedDay) {
-            this.selectedDay.time = { ...this.selectedTime };
-        }
-    }
-    /**
-     * Get display hour for 12-hour format
-     * BACKWARD COMPATIBILITY: Only used when useMeridian=true
-     *
-     * Conversion:
-     * - 0 (midnight) → 12 AM
-     * - 1-11 (AM) → 1-11 AM
-     * - 12 (noon) → 12 PM
-     * - 13-23 (PM) → 1-11 PM
-     *
-     * IMPORTANT: Hour 0 is NEVER displayed as 0, always as 12
-     */
-    getDisplayHour() {
-        if (!this.useMeridian) {
-            return this.selectedTime.hour;
-        }
-        const hour = this.selectedTime.hour;
-        // Midnight (0) → 12
-        if (hour === 0) {
-            return 12;
-        }
-        // 1-12 → 1-12 (no change)
-        else if (hour <= 12) {
-            return hour;
-        }
-        // 13-23 → 1-11 (subtract 12)
-        else {
-            return hour - 12;
-        }
-    }
-    /**
-     * Toggle AM/PM meridian
-     * BACKWARD COMPATIBILITY: Only available when useMeridian=true
-     *
-     * When toggling:
-     * - Adds or subtracts 12 hours
-     * - Maintains internal 24-hour format
-     */
-    toggleMeridian() {
-        if (this.meridian === 'AM') {
-            this.meridian = 'PM';
-            // Add 12 hours if not already in PM range
-            if (this.selectedTime.hour < 12) {
-                this.selectedTime.hour += 12;
-            }
-        }
-        else {
-            this.meridian = 'AM';
-            // Subtract 12 hours if in PM range
-            if (this.selectedTime.hour >= 12) {
-                this.selectedTime.hour -= 12;
-            }
-        }
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Increment hour in 12-hour mode
-     * BACKWARD COMPATIBILITY: Only used when useMeridian=true
-     */
-    incrementHour12() {
-        let displayHour = this.getDisplayHour();
-        displayHour = (displayHour % 12) + 1; // 1-12 cycle
-        // Convert back to 24-hour format
-        if (this.meridian === 'AM') {
-            this.selectedTime.hour = displayHour === 12 ? 0 : displayHour;
-        }
-        else {
-            this.selectedTime.hour = displayHour === 12 ? 12 : displayHour + 12;
-        }
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Decrement hour in 12-hour mode
-     * BACKWARD COMPATIBILITY: Only used when useMeridian=true
-     */
-    decrementHour12() {
-        let displayHour = this.getDisplayHour();
-        displayHour = displayHour === 1 ? 12 : displayHour - 1; // 1-12 cycle
-        // Convert back to 24-hour format
-        if (this.meridian === 'AM') {
-            this.selectedTime.hour = displayHour === 12 ? 0 : displayHour;
-        }
-        else {
-            this.selectedTime.hour = displayHour === 12 ? 12 : displayHour + 12;
-        }
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Handle 12-hour input change
-     * BACKWARD COMPATIBILITY: Only used when useMeridian=true
-     *
-     * IMPORTANT: Input must be 1-12, never 0
-     * - User types 0 → converted to 12
-     * - User types > 12 → clamped to 12
-     */
-    onHour12InputChange(event) {
-        let value = parseInt(event.target.value, 10);
-        // Validate 1-12 range (0 is not allowed in 12-hour format)
-        if (isNaN(value) || value < 1 || value === 0) {
-            value = 12; // Default to 12 if invalid or 0
-        }
-        else if (value > 12) {
-            value = 12;
-        }
-        // Convert to 24-hour format
-        if (this.meridian === 'AM') {
-            this.selectedTime.hour = value === 12 ? 0 : value;
-        }
-        else {
-            this.selectedTime.hour = value === 12 ? 12 : value + 12;
-        }
-        event.target.value = value;
-        this.updateSelectedDayTime();
-    }
-    /**
-     * Check if a date is within the current range
-     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
-     */
-    isInRange(day) {
-        if (this.selectionMode !== 'range' || !this.rangeStart || !this.rangeEnd || !day?.gD) {
-            return false;
-        }
-        const dayDate = this.parseDateString(day.gD);
-        const startDate = this.parseDateString(this.rangeStart.gD);
-        const endDate = this.parseDateString(this.rangeEnd.gD);
-        if (!dayDate || !startDate || !endDate) {
-            return false;
-        }
-        return dayDate >= startDate && dayDate <= endDate;
-    }
-    /**
-     * Check if a date is the range start
-     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
-     */
-    isRangeStart(day) {
-        return this.selectionMode === 'range' &&
-            this.rangeStart?.gD === day?.gD;
-    }
-    /**
-     * Check if a date is the range end
-     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
-     */
-    isRangeEnd(day) {
-        return this.selectionMode === 'range' &&
-            this.rangeEnd?.gD === day?.gD;
-    }
-    /**
-     * Reset range selection
-     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
-     */
-    resetRange() {
-        if (this.selectionMode !== 'range') {
-            return;
-        }
-        // Clear range highlighting
-        this.weeks.forEach((week) => {
-            week.forEach((day) => {
-                if (day && day.gD) {
-                    day.selected = false;
-                }
-            });
-        });
-        this.rangeStart = undefined;
-        this.rangeEnd = undefined;
-        this.selectedDay = undefined;
-    }
-    /**
-     * Parse date string (DD/MM/YYYY) to Date object
-     * Helper for range comparison
-     */
-    parseDateString(dateStr) {
-        if (!dateStr)
-            return null;
-        const parts = dateStr.split('/');
-        if (parts.length !== 3)
-            return null;
-        const day = parseInt(parts[0], 10);
-        const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed
-        const year = parseInt(parts[2], 10);
-        return new Date(year, month, day);
-    }
-    /**
-     * Highlight all dates in range
-     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
-     */
-    highlightRange() {
-        if (this.selectionMode !== 'range' || !this.rangeStart || !this.rangeEnd) {
-            return;
-        }
-        this.weeks.forEach((week) => {
-            week.forEach((day) => {
-                if (day && day.gD) {
-                    day.selected = this.isInRange(day) ||
-                        this.isRangeStart(day) ||
-                        this.isRangeEnd(day);
-                }
-            });
-        });
-    }
-}
-HijriGregorianDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HijriGregorianDatepickerComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: DateUtilitiesService }], target: i0.ɵɵFactoryTarget.Component });
-HijriGregorianDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: { markToday: "markToday", canChangeMode: "canChangeMode", todaysDateSection: "todaysDateSection", futureValidation: "futureValidation", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", multiple: "multiple", isRequired: "isRequired", showConfirmButton: "showConfirmButton", futureValidationMessage: "futureValidationMessage", arabicLayout: "arabicLayout", mode: "mode", dir: "dir", locale: "locale", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", monthSelectLabel: "monthSelectLabel", yearSelectLabel: "yearSelectLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", theme: "theme", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", styles: "styles", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd", useMeridian: "useMeridian", selectionMode: "selectionMode" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.backgroundColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div\n      class=\"text-info\"\n      [ngClass]=\"{\n        order: dir == 'rtl'\n      }\"\n    >\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        <!-- {{todaysDate.ummAlQura}} -->\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(todaysDate.ummAlQura, \"ar\")\n            : todaysDate.ummAlQura\n        }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(todaysDate.gregorian, \"ar\")\n            : todaysDate.gregorian\n        }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.secondaryColor\n                  : '',\n              'background-color':\n                day?.selected == true ? styles.secondaryColor : '',\n              color:\n                (day?.selected == true ? styles.todaysDateTextColor : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.gD?.split(\"/\")[0] | number\n                  )\n                : (day?.gD?.split(\"/\")[0] | number)\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.uD?.split(\"/\")[0] | number\n                  )\n                : (day?.uD?.split(\"/\")[0] | number)\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span class=\"time-colon\">:</span>\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          aria-label=\"Select AM\"\n        >\n          AM\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          aria-label=\"Select PM\"\n        >\n          PM\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && !multiple) ||\n          (!multipleSelectedDates.length && multiple))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.secondaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Zain,Arabic Typesetting,Tahoma,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:17px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:16px;font-weight:500;display:block;margin:auto;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly}.calendar-layout .day{display:inline-flex;width:13%;height:5.5vh;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px}.calendar-layout #greg-day span{font-size:14px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #ummAlQura-day{font-size:11px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .todays-date,.calendar-layout .selected-date{padding:10px;border-radius:5px}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0;font-family:Poppins,sans-serif}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;background:#ffffff;color:#5b479c;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#ffffff;font-size:18px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:700}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1;font-family:Poppins,sans-serif}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#ffffff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:rgb(0,77,97);border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HijriGregorianDatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'hijri-gregorian-datepicker', template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.backgroundColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div\n      class=\"text-info\"\n      [ngClass]=\"{\n        order: dir == 'rtl'\n      }\"\n    >\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        <!-- {{todaysDate.ummAlQura}} -->\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(todaysDate.ummAlQura, \"ar\")\n            : todaysDate.ummAlQura\n        }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(todaysDate.gregorian, \"ar\")\n            : todaysDate.gregorian\n        }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.secondaryColor\n                  : '',\n              'background-color':\n                day?.selected == true ? styles.secondaryColor : '',\n              color:\n                (day?.selected == true ? styles.todaysDateTextColor : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.gD?.split(\"/\")[0] | number\n                  )\n                : (day?.gD?.split(\"/\")[0] | number)\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.uD?.split(\"/\")[0] | number\n                  )\n                : (day?.uD?.split(\"/\")[0] | number)\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span class=\"time-colon\">:</span>\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          aria-label=\"Select AM\"\n        >\n          AM\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          aria-label=\"Select PM\"\n        >\n          PM\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && !multiple) ||\n          (!multipleSelectedDates.length && multiple))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.secondaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Zain,Arabic Typesetting,Tahoma,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:17px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:16px;font-weight:500;display:block;margin:auto;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly}.calendar-layout .day{display:inline-flex;width:13%;height:5.5vh;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px}.calendar-layout #greg-day span{font-size:14px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #ummAlQura-day{font-size:11px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .todays-date,.calendar-layout .selected-date{padding:10px;border-radius:5px}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0;font-family:Poppins,sans-serif}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;background:#ffffff;color:#5b479c;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#ffffff;font-size:18px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:700}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1;font-family:Poppins,sans-serif}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#ffffff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:rgb(0,77,97);border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: DateUtilitiesService }]; }, propDecorators: { markToday: [{
-                type: Input
-            }], canChangeMode: [{
-                type: Input
-            }], todaysDateSection: [{
-                type: Input
-            }], futureValidation: [{
-                type: Input
-            }], disableYearPicker: [{
-                type: Input
-            }], disableMonthPicker: [{
-                type: Input
-            }], disableDayPicker: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], isRequired: [{
-                type: Input
-            }], showConfirmButton: [{
-                type: Input
-            }], futureValidationMessage: [{
-                type: Input
-            }], arabicLayout: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], dir: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], submitTextButton: [{
-                type: Input
-            }], todaysDateText: [{
-                type: Input
-            }], ummAlQuraDateText: [{
-                type: Input
-            }], monthSelectLabel: [{
-                type: Input
-            }], yearSelectLabel: [{
-                type: Input
-            }], futureValidationMessageEn: [{
-                type: Input
-            }], futureValidationMessageAr: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], pastYearsLimit: [{
-                type: Input
-            }], futureYearsLimit: [{
-                type: Input
-            }], styles: [{
-                type: Input
-            }], enableTime: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], initialDate: [{
-                type: Input
-            }], initialRangeStart: [{
-                type: Input
-            }], initialRangeEnd: [{
-                type: Input
-            }], useMeridian: [{
-                type: Input
-            }], selectionMode: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }], onDaySelect: [{
-                type: Output
-            }], onMonthChange: [{
-                type: Output
-            }], onYearChange: [{
-                type: Output
-            }], fontFamilyStyle: [{
-                type: HostBinding,
-                args: ['style.font-family']
+class HijriGregorianDatepickerComponent {
+    constructor(formBuilder, _dateUtilsService) {
+        this.formBuilder = formBuilder;
+        this._dateUtilsService = _dateUtilsService;
+        /// Inputs
+        this.markToday = true;
+        this.canChangeMode = true;
+        this.todaysDateSection = true;
+        this.futureValidation = true;
+        this.disableYearPicker = false;
+        this.disableMonthPicker = false;
+        this.disableDayPicker = false;
+        this.multiple = false;
+        this.isRequired = false;
+        this.showConfirmButton = true;
+        this.futureValidationMessage = false;
+        this.arabicLayout = false;
+        this.mode = 'greg';
+        this.dir = 'ltr';
+        this.locale = 'en';
+        this.submitTextButton = 'Confirm';
+        this.todaysDateText = "Today's Date";
+        this.ummAlQuraDateText = 'Hijri Date';
+        this.monthSelectLabel = 'Month';
+        this.yearSelectLabel = 'Year';
+        this.theme = '';
+        this.pastYearsLimit = 90;
+        this.futureYearsLimit = 0;
+        this.styles = {};
+        // New inputs for extended functionality
+        this.enableTime = false; // Enable time picker (hours & minutes)
+        // BACKWARD COMPATIBILITY: Default to false (24-hour format)
+        // When true, displays 12-hour format with AM/PM toggle
+        this.useMeridian = false; // Enable 12-hour format with AM/PM
+        // BACKWARD COMPATIBILITY: Default to 'single' (existing behavior)
+        // 'range' enables range selection mode (first click = start, second click = end)
+        this.selectionMode = 'single';
+        /// Outputs
+        this.onSubmit = new EventEmitter();
+        this.onDaySelect = new EventEmitter();
+        this.onMonthChange = new EventEmitter();
+        this.onYearChange = new EventEmitter();
+        /// Variables
+        this.ummAlQuraMonths = [
+            { labelAr: 'محرم', labelEn: 'Muharram', value: 1 },
+            { labelAr: 'صفر', labelEn: 'Safar', value: 2 },
+            { labelAr: 'ربيع الأول', labelEn: 'Rabi al-Awwal', value: 3 },
+            { labelAr: 'ربيع الثاني', labelEn: 'Rabi al-Thani', value: 4 },
+            { labelAr: 'جمادى الأولى', labelEn: 'Jumada al-Awwal', value: 5 },
+            { labelAr: 'جمادى الآخرة', labelEn: 'Jumada al-Thani', value: 6 },
+            { labelAr: 'رجب', labelEn: 'Rajab', value: 7 },
+            { labelAr: 'شعبان', labelEn: 'Shaban', value: 8 },
+            { labelAr: 'رمضان', labelEn: 'Ramadan', value: 9 },
+            { labelAr: 'شوال', labelEn: 'Shawwal', value: 10 },
+            { labelAr: 'ذو القعدة', labelEn: 'Dhu al-Qadah', value: 11 },
+            { labelAr: 'ذو الحجة', labelEn: 'Dhu al-Hijjah', value: 12 },
+        ];
+        this.gregMonths = [
+            { labelAr: 'يناير', labelEn: 'January', value: 1 },
+            { labelAr: 'فبراير', labelEn: 'February', value: 2 },
+            { labelAr: 'مارس', labelEn: 'March', value: 3 },
+            { labelAr: 'ابريل', labelEn: 'April', value: 4 },
+            { labelAr: 'مايو', labelEn: 'May', value: 5 },
+            { labelAr: 'يونيو', labelEn: 'June', value: 6 },
+            { labelAr: 'يوليو', labelEn: 'July', value: 7 },
+            { labelAr: 'اغسطس', labelEn: 'August', value: 8 },
+            { labelAr: 'سبتمبر', labelEn: 'September', value: 9 },
+            { labelAr: 'اكتوبر', labelEn: 'October', value: 10 },
+            { labelAr: 'نوفمبر', labelEn: 'November', value: 11 },
+            { labelAr: 'ديسمبر', labelEn: 'December', value: 12 },
+        ];
+        this.weekdaysEn = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        this.weekdaysAr = ['سبت', 'جمعة', 'خميس', 'أربعاء', 'ثلاثاء', 'اثنين', 'أحد'];
+        // weekdaysAr = ['س', 'ج', 'خ', 'أر', 'ث', 'إث', 'أح'];
+        this.todaysDate = {};
+        this.multipleSelectedDates = [];
+        this.themes = [];
+        // Time picker variables
+        // BACKWARD COMPATIBILITY: selectedTime defaults to 0:0 to preserve existing behavior when enableTime=false
+        // When enableTime=true, this will be initialized to current system time in ngOnInit
+        this.selectedTime = { hour: 0, minute: 0 };
+        // Track if time has been initialized to avoid re-initializing at midnight
+        this.timeInitialized = false;
+        // BACKWARD COMPATIBILITY: Meridian only used when useMeridian=true
+        // Tracks AM/PM state for 12-hour format
+        this.meridian = 'AM';
+        // Range selection state
+        // BACKWARD COMPATIBILITY: These are only used when selectionMode='range'
+        // They do not affect single or multiple selection modes
+        this.rangeStart = undefined;
+        this.rangeEnd = undefined;
+    }
+    ngOnInit() {
+        this.initTheme();
+        this.initializeForm();
+        this.getTodaysDateInfo();
+        this.initializeYearsAndMonths();
+        // Initialize time from current system time or initialDate
+        // BACKWARD COMPATIBILITY: This only runs when enableTime=true
+        if (this.enableTime) {
+            this.initializeTime();
+        }
+    }
+    ngAfterViewInit() {
+        // Double-check time initialization after view is ready
+        // This handles cases where enableTime might be set after ngOnInit
+        if (this.enableTime && !this.timeInitialized) {
+            this.initializeTime();
+        }
+    }
+    ngOnChanges(changes) {
+        if (!changes['mode'].isFirstChange()) {
+            this.changeCalendarMode();
+        }
+    }
+    initTheme() {
+        if (this.theme != '') {
+            this.themes = themesConfig;
+            for (const themeItem of this.themes['default']) {
+                if (themeItem.name == this.theme) {
+                    this.styles = themeItem.stylesConfig;
+                    break;
+                }
+            }
+        }
+        this.fontFamilyStyle = this.styles.fontFamily;
+    }
+    /// Initialize form control for month and year select
+    initializeForm() {
+        this.periodForm = this.formBuilder.group({
+            year: [{ value: '', disabled: this.disableYearPicker }, []],
+            month: [{ value: '', disabled: this.disableMonthPicker }, []],
+        });
+    }
+    // Initialize years and months for calendar
+    initializeYearsAndMonths() {
+        this.years = [];
+        this.months = [];
+        // Determine the date to use for initialization (initialDate or today)
+        let referenceDate;
+        if (this.initialDate) {
+            const normalizedInitialDate = this._dateUtilsService.normalizeDateToString(this.initialDate);
+            if (normalizedInitialDate) {
+                if (this.mode == 'greg') {
+                    referenceDate = normalizedInitialDate;
+                }
+                else {
+                    const hijriDate = this._dateUtilsService.convertDate(normalizedInitialDate, true);
+                    referenceDate = hijriDate?.uD || this.todaysDate.ummAlQura;
+                }
+            }
+            else {
+                referenceDate =
+                    this.mode == 'greg'
+                        ? this.todaysDate.gregorian
+                        : this.todaysDate.ummAlQura;
+            }
+        }
+        else {
+            referenceDate =
+                this.mode == 'greg'
+                    ? this.todaysDate.gregorian
+                    : this.todaysDate.ummAlQura;
+        }
+        if (this.mode == 'greg') {
+            this.gregYear =
+                this.futureYearsLimit == 0
+                    ? Number(referenceDate?.split('/')[2])
+                    : Number(referenceDate?.split('/')[2]) + this.futureYearsLimit;
+            for (let i = 0; i < this.gregYear; i++) {
+                if (i < this.pastYearsLimit) {
+                    let val = this.gregYear--;
+                    this.years.push(val);
+                }
+                else {
+                    break;
+                }
+            }
+            this.months = this.gregMonths;
+        }
+        else {
+            this.ummAlQuraYear =
+                this.futureYearsLimit == 0
+                    ? Number(referenceDate?.split('/')[2])
+                    : Number(referenceDate?.split('/')[2]) + this.futureYearsLimit;
+            for (let i = 0; i < this.ummAlQuraYear; i++) {
+                if (i < this.pastYearsLimit) {
+                    let val = this.ummAlQuraYear--;
+                    this.years.push(val);
+                }
+                else {
+                    break;
+                }
+            }
+            this.months = this.ummAlQuraMonths;
+        }
+        this.years.map((year) => {
+            if (year == referenceDate?.split('/')[2]) {
+                this.periodForm.controls['year'].setValue(year);
+            }
+        });
+        this.months.map((month) => {
+            if (month.value == referenceDate?.split('/')[1]) {
+                this.periodForm.controls['month'].setValue(month.value);
+            }
+        });
+    }
+    /// On change event of years and months
+    onPeriodChange(type) {
+        if (type == 'year') {
+            this.onYearChange.emit(this.periodForm.controls['year'].value);
+        }
+        else {
+            this.onMonthChange.emit(this.periodForm.controls['month'].value);
+        }
+        const days = this._dateUtilsService.getMonthData('01/' +
+            this.periodForm.controls['month'].value +
+            '/' +
+            this.periodForm.controls['year'].value, this.mode);
+        this.weeks = this.generateWeeksArray(days);
+    }
+    /// Get todays(greg and umm al qura) date info
+    getTodaysDateInfo() {
+        this.todaysDate.gregorian = this._dateUtilsService.formatDate(new Date());
+        this.todaysDate.ummAlQura = this._dateUtilsService.convertDate(this.todaysDate.gregorian, true)?.uD;
+        // Use initialDate if provided, otherwise use today's date
+        let dateToNavigate;
+        if (this.initialDate) {
+            // Normalize initialDate to DD/MM/YYYY format
+            const normalizedInitialDate = this._dateUtilsService.normalizeDateToString(this.initialDate);
+            if (normalizedInitialDate) {
+                if (this.mode == 'greg') {
+                    dateToNavigate = normalizedInitialDate;
+                }
+                else {
+                    // Convert to Hijri for ummAlQura mode
+                    const hijriDate = this._dateUtilsService.convertDate(normalizedInitialDate, true);
+                    dateToNavigate = hijriDate?.uD || this.todaysDate.ummAlQura;
+                }
+            }
+            else {
+                // Invalid initialDate, fall back to today
+                dateToNavigate =
+                    this.mode == 'greg'
+                        ? this.todaysDate.gregorian
+                        : this.todaysDate.ummAlQura;
+            }
+        }
+        else {
+            // No initialDate provided, use today
+            dateToNavigate =
+                this.mode == 'greg'
+                    ? this.todaysDate.gregorian
+                    : this.todaysDate.ummAlQura;
+        }
+        this.generatetMonthData(dateToNavigate);
+        // Highlight initialDate or initialRange if provided
+        if (this.selectionMode === 'range' && (this.initialRangeStart || this.initialRangeEnd)) {
+            this.highlightInitialRange();
+        }
+        else if (this.initialDate) {
+            this.highlightInitialDate();
+        }
+    }
+    /// Generate month days from JSON
+    generatetMonthData(date) {
+        const days = this._dateUtilsService.getMonthData(date, this.mode);
+        this.weeks = this.generateWeeksArray(days);
+    }
+    /// Highlight initialDate on the calendar
+    highlightInitialDate() {
+        if (!this.initialDate) {
+            return;
+        }
+        const normalizedInitialDate = this._dateUtilsService.normalizeDateToString(this.initialDate);
+        if (!normalizedInitialDate) {
+            return;
+        }
+        // Find the day in the weeks array that matches initialDate
+        for (const week of this.weeks) {
+            for (const day of week) {
+                if (day && day.gD === normalizedInitialDate) {
+                    // Don't select if date is disabled
+                    if (!this.isDateDisabled(day)) {
+                        // Mark as selected without triggering events
+                        day.selected = true;
+                        // Set as selectedDay based on selection mode
+                        if (this.selectionMode === 'range') {
+                            this.rangeStart = day;
+                        }
+                        else if (this.multiple) {
+                            this.multipleSelectedDates = [day];
+                        }
+                        else {
+                            this.selectedDay = day;
+                        }
+                        // Initialize time if enableTime is active
+                        if (this.enableTime && !this.timeInitialized) {
+                            this.initializeTime();
+                        }
+                        // Attach time to the day if it's a Date object with time
+                        if (this.enableTime && this.initialDate instanceof Date) {
+                            day.time = {
+                                hour: this.initialDate.getHours(),
+                                minute: this.initialDate.getMinutes()
+                            };
+                        }
+                    }
+                    return;
+                }
+            }
+        }
+    }
+    /// Highlight initial range (start and end dates) on the calendar
+    highlightInitialRange() {
+        if (!this.initialRangeStart && !this.initialRangeEnd) {
+            return;
+        }
+        const normalizedStartDate = this.initialRangeStart
+            ? this._dateUtilsService.normalizeDateToString(this.initialRangeStart)
+            : null;
+        const normalizedEndDate = this.initialRangeEnd
+            ? this._dateUtilsService.normalizeDateToString(this.initialRangeEnd)
+            : null;
+        let startDay = null;
+        let endDay = null;
+        // Find both start and end dates in the weeks array
+        for (const week of this.weeks) {
+            for (const day of week) {
+                if (day && normalizedStartDate && day.gD === normalizedStartDate) {
+                    if (!this.isDateDisabled(day)) {
+                        startDay = day;
+                    }
+                }
+                if (day && normalizedEndDate && day.gD === normalizedEndDate) {
+                    if (!this.isDateDisabled(day)) {
+                        endDay = day;
+                    }
+                }
+            }
+        }
+        // Set range start
+        if (startDay) {
+            startDay.selected = true;
+            this.rangeStart = startDay;
+            this.selectedDay = startDay;
+            // Initialize and attach time to start date
+            if (this.enableTime) {
+                if (!this.timeInitialized) {
+                    this.initializeTime();
+                }
+                if (this.initialRangeStart instanceof Date) {
+                    startDay.time = {
+                        hour: this.initialRangeStart.getHours(),
+                        minute: this.initialRangeStart.getMinutes()
+                    };
+                }
+                else {
+                    startDay.time = { ...this.selectedTime };
+                }
+            }
+        }
+        // Set range end if provided
+        if (endDay && startDay) {
+            // Swap if end is before start
+            const startDate = this.parseDateString(startDay.gD);
+            const endDate = this.parseDateString(endDay.gD);
+            if (endDate && startDate && endDate < startDate) {
+                // Swap
+                this.rangeEnd = startDay;
+                this.rangeStart = endDay;
+                endDay.selected = true;
+            }
+            else {
+                this.rangeEnd = endDay;
+            }
+            // Attach time to end date (inherit from start)
+            if (this.enableTime) {
+                const timeToUse = this.rangeStart.time || { ...this.selectedTime };
+                if (this.initialRangeEnd instanceof Date) {
+                    this.rangeEnd.time = {
+                        hour: this.initialRangeEnd.getHours(),
+                        minute: this.initialRangeEnd.getMinutes()
+                    };
+                }
+                else {
+                    this.rangeEnd.time = { ...timeToUse };
+                }
+                // Ensure start also has time
+                this.rangeStart.time = { ...timeToUse };
+            }
+            // Highlight the range
+            this.highlightRange();
+            this.selectedDay = this.rangeEnd;
+        }
+    }
+    /// Generate month weeks
+    generateWeeksArray(daysArray) {
+        const firstDayName = daysArray[0]?.dN;
+        const startIndex = this.weekdaysEn.indexOf(firstDayName);
+        const weeks = [[]];
+        let currentWeek = 0;
+        let currentDayIndex = startIndex;
+        daysArray?.forEach((day) => {
+            if (!weeks[currentWeek]) {
+                weeks[currentWeek] = [];
+            }
+            weeks[currentWeek][currentDayIndex] = day;
+            currentDayIndex++;
+            if (currentDayIndex === 7) {
+                currentDayIndex = 0;
+                currentWeek++;
+            }
+        });
+        weeks.forEach((week) => {
+            while (week.length < 7) {
+                week.push({});
+            }
+        });
+        return weeks;
+    }
+    /// Change calendar mode 'greg' or 'ummAlQura'
+    changeCalendarMode() {
+        this.mode = this.mode == 'greg' ? 'ummAlQura' : 'greg';
+        this.initializeYearsAndMonths();
+        this.generatetMonthData('01/' +
+            this.periodForm.controls['month'].value +
+            '/' +
+            this.periodForm.controls['year'].value);
+    }
+    /// On day clicked handler
+    onDayClicked(day) {
+        if (day && day?.gD) {
+            // Check if day is disabled by min/max constraints
+            if (this.isDateDisabled(day)) {
+                return; // Don't allow selection of disabled dates
+            }
+            if (this.futureValidation) {
+                if (this.checkFutureValidation(day)) {
+                    this.futureValidationMessage = true;
+                }
+                else {
+                    this.futureValidationMessage = false;
+                    this.markDaySelected(day);
+                }
+            }
+            else {
+                this.markDaySelected(day);
+            }
+        }
+    }
+    /// Mark day as selected
+    markDaySelected(dayInfo) {
+        // BACKWARD COMPATIBILITY: Range selection only when selectionMode='range'
+        if (this.selectionMode === 'range') {
+            this.handleRangeSelection(dayInfo);
+            return;
+        }
+        // BACKWARD COMPATIBILITY: Original behavior for single/multiple selection
+        if (dayInfo.selected) {
+            dayInfo.selected = false;
+            this.multipleSelectedDates = this.multipleSelectedDates.filter((day) => day !== dayInfo);
+            if (!this.multiple) {
+                this.selectedDay = undefined;
+            }
+        }
+        else {
+            if (!this.multiple) {
+                this.weeks.forEach((week) => {
+                    week.forEach((day) => {
+                        day.selected = false;
+                    });
+                });
+                dayInfo.selected = true;
+                this.selectedDay = dayInfo;
+                this.multipleSelectedDates = [dayInfo];
+                // Attach current time if enableTime is active
+                if (this.enableTime) {
+                    // Ensure time is initialized before attaching
+                    if (!this.timeInitialized) {
+                        this.initializeTime();
+                    }
+                    dayInfo.time = { ...this.selectedTime };
+                }
+                this.onDaySelect.emit(dayInfo);
+            }
+            else {
+                dayInfo.selected = true;
+                // Attach current time if enableTime is active
+                if (this.enableTime) {
+                    // Ensure time is initialized before attaching
+                    if (!this.timeInitialized) {
+                        this.initializeTime();
+                    }
+                    dayInfo.time = { ...this.selectedTime };
+                }
+                this.onDaySelect.emit(dayInfo);
+                if (!this.multipleSelectedDates.includes(dayInfo)) {
+                    this.multipleSelectedDates.push(dayInfo);
+                }
+            }
+        }
+    }
+    /**
+     * Handle range selection logic
+     * BACKWARD COMPATIBILITY: Only called when selectionMode='range'
+     *
+     * Range selection lifecycle:
+     * 1. First click → Sets rangeStart
+     * 2. Second click → Sets rangeEnd, highlights range
+     * 3. Third click → Resets range, starts new selection
+     */
+    handleRangeSelection(dayInfo) {
+        // First click or resetting range
+        if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
+            this.resetRange();
+            this.rangeStart = dayInfo;
+            dayInfo.selected = true;
+            this.selectedDay = dayInfo;
+            // Attach current time if enableTime is active
+            if (this.enableTime) {
+                // Ensure selectedTime is initialized
+                // If time hasn't been initialized yet, initialize it now
+                if (!this.timeInitialized) {
+                    this.initializeTime();
+                }
+                dayInfo.time = { ...this.selectedTime };
+            }
+            this.onDaySelect.emit({ start: dayInfo, end: null });
+        }
+        // Second click - complete the range
+        else if (this.rangeStart && !this.rangeEnd) {
+            const startDate = this.parseDateString(this.rangeStart.gD);
+            const endDate = this.parseDateString(dayInfo.gD);
+            // Swap if end is before start
+            if (endDate && startDate && endDate < startDate) {
+                this.rangeEnd = this.rangeStart;
+                this.rangeStart = dayInfo;
+            }
+            else {
+                this.rangeEnd = dayInfo;
+            }
+            // Attach time if enableTime is active
+            // IMPORTANT: Range end inherits time from range start (not current selectedTime)
+            if (this.enableTime) {
+                // Use rangeStart's time if it exists, otherwise use current selectedTime
+                const timeToUse = this.rangeStart.time || { ...this.selectedTime };
+                this.rangeStart.time = { ...timeToUse };
+                this.rangeEnd.time = { ...timeToUse };
+            }
+            this.highlightRange();
+            this.selectedDay = this.rangeEnd;
+            this.onDaySelect.emit({ start: this.rangeStart, end: this.rangeEnd });
+        }
+    }
+    /// On confirm button clicked
+    onConfirmClicked() {
+        // BACKWARD COMPATIBILITY: Range selection output when selectionMode='range'
+        if (this.selectionMode === 'range') {
+            if (this.rangeStart && this.rangeEnd) {
+                // Collect all dates in range
+                const rangeDates = [];
+                this.weeks.forEach((week) => {
+                    week.forEach((day) => {
+                        if (day && day.gD && (this.isInRange(day) || this.isRangeStart(day) || this.isRangeEnd(day))) {
+                            // Attach current time if enableTime is active
+                            if (this.enableTime && !day.time) {
+                                day.time = { ...this.selectedTime };
+                            }
+                            rangeDates.push(day);
+                        }
+                    });
+                });
+                this.onSubmit.emit({
+                    start: this.rangeStart,
+                    end: this.rangeEnd,
+                    dates: rangeDates
+                });
+            }
+            else {
+                // Incomplete range
+                this.onSubmit.emit({ start: this.rangeStart, end: null, dates: [] });
+            }
+            return;
+        }
+        // BACKWARD COMPATIBILITY: Original behavior for multiple/single selection
+        if (this.multiple) {
+            // For multiple dates, attach time to each if enableTime is active
+            if (this.enableTime) {
+                this.multipleSelectedDates.forEach((day) => {
+                    if (!day.time) {
+                        day.time = { ...this.selectedTime };
+                    }
+                });
+            }
+            this.onSubmit.emit(this.multipleSelectedDates);
+        }
+        else {
+            // For single date, attach time if enableTime is active
+            if (this.enableTime && this.selectedDay) {
+                this.selectedDay.time = { ...this.selectedTime };
+            }
+            this.onSubmit.emit(this.selectedDay);
+        }
+    }
+    /// Check if date from future
+    checkFutureValidation(day) {
+        if (this._dateUtilsService.checkPastOrFuture(day?.gD, new Date()) == 'Future') {
+            return true;
+        }
+    }
+    /// Check if passed day is today or not
+    checkTodaysDate(day) {
+        return (this.todaysDate?.gregorian == day?.gD ||
+            this.todaysDate?.ummAlQura == day?.uD);
+    }
+    /**
+     * Check if a day is disabled based on min/max date constraints
+     * Works for both Gregorian and Hijri modes
+     */
+    isDateDisabled(day) {
+        if (!day || !day.gD)
+            return true;
+        // Normalize min/max dates to Gregorian DD/MM/YYYY format
+        const minDateStr = this.minDate
+            ? this._dateUtilsService.normalizeDateToString(this.minDate)
+            : null;
+        const maxDateStr = this.maxDate
+            ? this._dateUtilsService.normalizeDateToString(this.maxDate)
+            : null;
+        // Check if the day's Gregorian date is within range
+        return !this._dateUtilsService.isDateInRange(day.gD, minDateStr, maxDateStr);
+    }
+    /**
+     * Initialize time from current system time or initialDate
+     * BACKWARD COMPATIBILITY: Only called when enableTime=true
+     *
+     * Priority:
+     * 1. If initialDate has time, use that
+     * 2. If selectedDay has time, use that
+     * 3. Otherwise, use current system time
+     */
+    initializeTime() {
+        let timeSet = false;
+        // Check if initialDate has time information
+        if (this.initialDate && this.initialDate instanceof Date) {
+            this.selectedTime = {
+                hour: this.initialDate.getHours(),
+                minute: this.initialDate.getMinutes(),
+            };
+            timeSet = true;
+        }
+        // If no time from initialDate, use current system time
+        if (!timeSet) {
+            const now = new Date();
+            this.selectedTime = {
+                hour: now.getHours(),
+                minute: now.getMinutes(),
+            };
+        }
+        // Mark that time has been initialized
+        this.timeInitialized = true;
+        // BACKWARD COMPATIBILITY: Only set meridian when useMeridian=true
+        if (this.useMeridian) {
+            this.meridian = this.selectedTime.hour >= 12 ? 'PM' : 'AM';
+        }
+    }
+    /**
+     * Increment hour value with wraparound (0-23)
+     * BACKWARD COMPATIBILITY: Only available when enableTime=true
+     */
+    incrementHour() {
+        this.selectedTime.hour = (this.selectedTime.hour + 1) % 24;
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Decrement hour value with wraparound (0-23)
+     * BACKWARD COMPATIBILITY: Only available when enableTime=true
+     */
+    decrementHour() {
+        this.selectedTime.hour = (this.selectedTime.hour - 1 + 24) % 24;
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Increment minute value with wraparound (0-59)
+     * BACKWARD COMPATIBILITY: Only available when enableTime=true
+     */
+    incrementMinute() {
+        this.selectedTime.minute = (this.selectedTime.minute + 1) % 60;
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Decrement minute value with wraparound (0-59)
+     * BACKWARD COMPATIBILITY: Only available when enableTime=true
+     */
+    decrementMinute() {
+        this.selectedTime.minute = (this.selectedTime.minute - 1 + 60) % 60;
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Handle keyboard input for hours
+     * Validates and clamps to 0-23 range
+     * BACKWARD COMPATIBILITY: Only available when enableTime=true
+     */
+    onHourInputChange(event) {
+        let value = parseInt(event.target.value, 10);
+        if (isNaN(value) || value < 0) {
+            value = 0;
+        }
+        else if (value > 23) {
+            value = 23;
+        }
+        this.selectedTime.hour = value;
+        event.target.value = value;
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Handle keyboard input for minutes
+     * Validates and clamps to 0-59 range
+     * BACKWARD COMPATIBILITY: Only available when enableTime=true
+     */
+    onMinuteInputChange(event) {
+        let value = parseInt(event.target.value, 10);
+        if (isNaN(value) || value < 0) {
+            value = 0;
+        }
+        else if (value > 59) {
+            value = 59;
+        }
+        this.selectedTime.minute = value;
+        event.target.value = value;
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Handle keyboard arrow keys for hour/minute input
+     * BACKWARD COMPATIBILITY: Only available when enableTime=true
+     */
+    onTimeKeydown(event, type) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (type === 'hour') {
+                this.incrementHour();
+            }
+            else {
+                this.incrementMinute();
+            }
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (type === 'hour') {
+                this.decrementHour();
+            }
+            else {
+                this.decrementMinute();
+            }
+        }
+    }
+    /**
+     * Update the selected day's time property when time changes
+     * BACKWARD COMPATIBILITY: Only called when enableTime=true
+     */
+    updateSelectedDayTime() {
+        if (this.selectedDay) {
+            this.selectedDay.time = { ...this.selectedTime };
+        }
+    }
+    /**
+     * Get display hour for 12-hour format
+     * BACKWARD COMPATIBILITY: Only used when useMeridian=true
+     *
+     * Conversion:
+     * - 0 (midnight) → 12 AM
+     * - 1-11 (AM) → 1-11 AM
+     * - 12 (noon) → 12 PM
+     * - 13-23 (PM) → 1-11 PM
+     *
+     * IMPORTANT: Hour 0 is NEVER displayed as 0, always as 12
+     */
+    getDisplayHour() {
+        if (!this.useMeridian) {
+            return this.selectedTime.hour;
+        }
+        const hour = this.selectedTime.hour;
+        // Midnight (0) → 12
+        if (hour === 0) {
+            return 12;
+        }
+        // 1-12 → 1-12 (no change)
+        else if (hour <= 12) {
+            return hour;
+        }
+        // 13-23 → 1-11 (subtract 12)
+        else {
+            return hour - 12;
+        }
+    }
+    /**
+     * Toggle AM/PM meridian
+     * BACKWARD COMPATIBILITY: Only available when useMeridian=true
+     *
+     * When toggling:
+     * - Adds or subtracts 12 hours
+     * - Maintains internal 24-hour format
+     */
+    toggleMeridian() {
+        if (this.meridian === 'AM') {
+            this.meridian = 'PM';
+            // Add 12 hours if not already in PM range
+            if (this.selectedTime.hour < 12) {
+                this.selectedTime.hour += 12;
+            }
+        }
+        else {
+            this.meridian = 'AM';
+            // Subtract 12 hours if in PM range
+            if (this.selectedTime.hour >= 12) {
+                this.selectedTime.hour -= 12;
+            }
+        }
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Increment hour in 12-hour mode
+     * BACKWARD COMPATIBILITY: Only used when useMeridian=true
+     */
+    incrementHour12() {
+        let displayHour = this.getDisplayHour();
+        displayHour = (displayHour % 12) + 1; // 1-12 cycle
+        // Convert back to 24-hour format
+        if (this.meridian === 'AM') {
+            this.selectedTime.hour = displayHour === 12 ? 0 : displayHour;
+        }
+        else {
+            this.selectedTime.hour = displayHour === 12 ? 12 : displayHour + 12;
+        }
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Decrement hour in 12-hour mode
+     * BACKWARD COMPATIBILITY: Only used when useMeridian=true
+     */
+    decrementHour12() {
+        let displayHour = this.getDisplayHour();
+        displayHour = displayHour === 1 ? 12 : displayHour - 1; // 1-12 cycle
+        // Convert back to 24-hour format
+        if (this.meridian === 'AM') {
+            this.selectedTime.hour = displayHour === 12 ? 0 : displayHour;
+        }
+        else {
+            this.selectedTime.hour = displayHour === 12 ? 12 : displayHour + 12;
+        }
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Handle 12-hour input change
+     * BACKWARD COMPATIBILITY: Only used when useMeridian=true
+     *
+     * IMPORTANT: Input must be 1-12, never 0
+     * - User types 0 → converted to 12
+     * - User types > 12 → clamped to 12
+     */
+    onHour12InputChange(event) {
+        let value = parseInt(event.target.value, 10);
+        // Validate 1-12 range (0 is not allowed in 12-hour format)
+        if (isNaN(value) || value < 1 || value === 0) {
+            value = 12; // Default to 12 if invalid or 0
+        }
+        else if (value > 12) {
+            value = 12;
+        }
+        // Convert to 24-hour format
+        if (this.meridian === 'AM') {
+            this.selectedTime.hour = value === 12 ? 0 : value;
+        }
+        else {
+            this.selectedTime.hour = value === 12 ? 12 : value + 12;
+        }
+        event.target.value = value;
+        this.updateSelectedDayTime();
+    }
+    /**
+     * Check if a date is within the current range
+     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
+     */
+    isInRange(day) {
+        if (this.selectionMode !== 'range' || !this.rangeStart || !this.rangeEnd || !day?.gD) {
+            return false;
+        }
+        const dayDate = this.parseDateString(day.gD);
+        const startDate = this.parseDateString(this.rangeStart.gD);
+        const endDate = this.parseDateString(this.rangeEnd.gD);
+        if (!dayDate || !startDate || !endDate) {
+            return false;
+        }
+        return dayDate >= startDate && dayDate <= endDate;
+    }
+    /**
+     * Check if a date is the range start
+     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
+     */
+    isRangeStart(day) {
+        return this.selectionMode === 'range' &&
+            this.rangeStart?.gD === day?.gD;
+    }
+    /**
+     * Check if a date is the range end
+     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
+     */
+    isRangeEnd(day) {
+        return this.selectionMode === 'range' &&
+            this.rangeEnd?.gD === day?.gD;
+    }
+    /**
+     * Reset range selection
+     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
+     */
+    resetRange() {
+        if (this.selectionMode !== 'range') {
+            return;
+        }
+        // Clear range highlighting
+        this.weeks.forEach((week) => {
+            week.forEach((day) => {
+                if (day && day.gD) {
+                    day.selected = false;
+                }
+            });
+        });
+        this.rangeStart = undefined;
+        this.rangeEnd = undefined;
+        this.selectedDay = undefined;
+    }
+    /**
+     * Parse date string (DD/MM/YYYY) to Date object
+     * Helper for range comparison
+     */
+    parseDateString(dateStr) {
+        if (!dateStr)
+            return null;
+        const parts = dateStr.split('/');
+        if (parts.length !== 3)
+            return null;
+        const day = parseInt(parts[0], 10);
+        const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed
+        const year = parseInt(parts[2], 10);
+        return new Date(year, month, day);
+    }
+    /**
+     * Highlight all dates in range
+     * BACKWARD COMPATIBILITY: Only used when selectionMode='range'
+     */
+    highlightRange() {
+        if (this.selectionMode !== 'range' || !this.rangeStart || !this.rangeEnd) {
+            return;
+        }
+        this.weeks.forEach((week) => {
+            week.forEach((day) => {
+                if (day && day.gD) {
+                    day.selected = this.isInRange(day) ||
+                        this.isRangeStart(day) ||
+                        this.isRangeEnd(day);
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: DateUtilitiesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriGregorianDatepickerComponent, isStandalone: false, selector: "hijri-gregorian-datepicker", inputs: { markToday: "markToday", canChangeMode: "canChangeMode", todaysDateSection: "todaysDateSection", futureValidation: "futureValidation", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", multiple: "multiple", isRequired: "isRequired", showConfirmButton: "showConfirmButton", futureValidationMessage: "futureValidationMessage", arabicLayout: "arabicLayout", mode: "mode", dir: "dir", locale: "locale", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", monthSelectLabel: "monthSelectLabel", yearSelectLabel: "yearSelectLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", theme: "theme", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", styles: "styles", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd", useMeridian: "useMeridian", selectionMode: "selectionMode" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\r\n  <div\r\n    class=\"toggle-section\"\r\n    [dir]=\"dir\"\r\n    *ngIf=\"canChangeMode\"\r\n    [ngStyle]=\"{ color: styles.primaryColor }\"\r\n  >\r\n    <span> {{ ummAlQuraDateText }} </span>\r\n    <label class=\"switch\">\r\n      <input\r\n        type=\"checkbox\"\r\n        [disabled]=\"!canChangeMode\"\r\n        [checked]=\"mode === 'ummAlQura'\"\r\n        (change)=\"changeCalendarMode()\"\r\n        #calendarCheckbox\r\n      />\r\n      <span\r\n        class=\"slider\"\r\n        [ngStyle]=\"\r\n          calendarCheckbox.checked\r\n            ? { 'background-color': styles.primaryColor }\r\n            : { 'background-color': styles.backgroundColor }\r\n        \"\r\n      ></span>\r\n    </label>\r\n  </div>\r\n\r\n  <div\r\n    class=\"todays-date-section\"\r\n    *ngIf=\"todaysDateSection\"\r\n    [ngStyle]=\"{\r\n      'background-color': styles.backgroundColor,\r\n      color: styles.primaryColor,\r\n      'border-radius': styles.borderRadius\r\n    }\"\r\n  >\r\n    <div\r\n      class=\"text-info\"\r\n      [ngClass]=\"{\r\n        order: dir == 'rtl'\r\n      }\"\r\n    >\r\n      <p>{{ todaysDateText }}</p>\r\n    </div>\r\n\r\n    <div\r\n      class=\"data\"\r\n      [dir]=\"dir\"\r\n      [ngStyle]=\"{\r\n        'background-color': styles.todaysDateBgColor,\r\n        color: styles.todaysDateTextColor\r\n      }\"\r\n    >\r\n      <p *ngIf=\"mode == 'ummAlQura'\">\r\n        <!-- {{todaysDate.ummAlQura}} -->\r\n        {{\r\n          locale == \"ar\"\r\n            ? _dateUtilsService.convertDateNumerals(todaysDate.ummAlQura, \"ar\")\r\n            : todaysDate.ummAlQura\r\n        }}\r\n      </p>\r\n      <p *ngIf=\"mode == 'greg'\">\r\n        {{\r\n          locale == \"ar\"\r\n            ? _dateUtilsService.convertDateNumerals(todaysDate.gregorian, \"ar\")\r\n            : todaysDate.gregorian\r\n        }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"period-container\">\r\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\r\n      <div\r\n        class=\"select-item\"\r\n        [ngClass]=\"{\r\n          order: dir == 'ltr'\r\n        }\"\r\n        [ngStyle]=\"{\r\n          'background-color': styles.backgroundColor,\r\n          'border-radius': styles.borderRadius\r\n        }\"\r\n      >\r\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\r\n          yearSelectLabel\r\n        }}</label>\r\n\r\n        <select\r\n          formControlName=\"year\"\r\n          class=\"{{ 'icon-' + dir }}\"\r\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\r\n          (change)=\"onPeriodChange('year')\"\r\n          [dir]=\"dir\"\r\n          [ngStyle]=\"{\r\n            color: styles.primaryColor,\r\n            'font-family': styles.fontFamily\r\n          }\"\r\n        >\r\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\r\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n\r\n      <div\r\n        class=\"select-item\"\r\n        [ngClass]=\"{\r\n          order: dir == 'rtl'\r\n        }\"\r\n        [ngStyle]=\"{\r\n          'background-color': styles.backgroundColor,\r\n          'border-radius': styles.borderRadius\r\n        }\"\r\n      >\r\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\r\n          monthSelectLabel\r\n        }}</label>\r\n        <select\r\n          class=\"{{ 'icon-' + dir }}\"\r\n          formControlName=\"month\"\r\n          (change)=\"onPeriodChange('month')\"\r\n          [dir]=\"dir\"\r\n          [ngStyle]=\"{\r\n            color: styles.primaryColor,\r\n            'font-family': styles.fontFamily\r\n          }\"\r\n        >\r\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\r\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div\r\n    class=\"calendar-layout\"\r\n    [ngStyle]=\"{\r\n      'background-color': styles.backgroundColor,\r\n      'border-radius': styles.borderRadius\r\n    }\"\r\n  >\r\n    <div class=\"week-days\">\r\n      <div\r\n        class=\"week-day\"\r\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\r\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\r\n      >\r\n        {{ date }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [dir]=\"dir\">\r\n      <div class=\"week\" *ngFor=\"let week of weeks\">\r\n        <div\r\n          class=\"day\"\r\n          *ngFor=\"let day of week\"\r\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.backgroundColor,\r\n            color: styles.dayColor\r\n          }\"\r\n        >\r\n          <div\r\n            id=\"greg-day\"\r\n            [ngClass]=\"{\r\n              'todays-date': checkTodaysDate(day),\r\n              'selected-date': day?.selected == true\r\n            }\"\r\n            [ngStyle]=\"{\r\n              border:\r\n                markToday && checkTodaysDate(day)\r\n                  ? '1px solid ' + styles.secondaryColor\r\n                  : '',\r\n              'background-color':\r\n                day?.selected == true ? styles.secondaryColor : '',\r\n              color:\r\n                (day?.selected == true ? styles.todaysDateTextColor : '') ||\r\n                (checkFutureValidation(day) && futureValidation\r\n                  ? styles.disabledDayColor\r\n                  : '') ||\r\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\r\n              opacity: isDateDisabled(day) ? '0.4' : '1',\r\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\r\n            }\"\r\n          >\r\n            <span *ngIf=\"mode == 'greg'\">{{\r\n              locale == \"ar\"\r\n                ? _dateUtilsService.parseEnglish(\r\n                    day?.gD?.split(\"/\")[0] | number\r\n                  )\r\n                : (day?.gD?.split(\"/\")[0] | number)\r\n            }}</span>\r\n\r\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\r\n              locale == \"ar\"\r\n                ? _dateUtilsService.parseEnglish(\r\n                    day?.uD?.split(\"/\")[0] | number\r\n                  )\r\n                : (day?.uD?.split(\"/\")[0] | number)\r\n            }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\r\n    <span *ngIf=\"locale == 'ar'\">\r\n      {{ futureValidationMessageAr }}\r\n    </span>\r\n    <span *ngIf=\"locale == 'en'\">\r\n      {{ futureValidationMessageEn }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- Time Picker Section -->\r\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\r\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\r\n    <div class=\"time-picker-wrapper\">\r\n      <!-- Hour Input with Arrows -->\r\n      <div class=\"time-input-container\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"time-arrow time-arrow-up\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerArrowColor || '#5b479c'\r\n          }\"\r\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Increment hour\"\r\n        >\r\n          <i class=\"ri-arrow-drop-up-line\"></i>\r\n        </button>\r\n        <input\r\n          type=\"number\"\r\n          class=\"time-field\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerTextColor || '#333'\r\n          }\"\r\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\r\n          (input)=\"\r\n            useMeridian\r\n              ? onHour12InputChange($event)\r\n              : onHourInputChange($event)\r\n          \"\r\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\r\n          [min]=\"useMeridian ? 1 : 0\"\r\n          [max]=\"useMeridian ? 12 : 23\"\r\n          aria-label=\"Hour\"\r\n        />\r\n        <button\r\n          type=\"button\"\r\n          class=\"time-arrow time-arrow-down\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerArrowColor || '#5b479c'\r\n          }\"\r\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Decrement hour\"\r\n        >\r\n          <i class=\"ri-arrow-drop-down-line\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Colon Separator -->\r\n      <span\r\n        class=\"time-colon\"\r\n        [ngStyle]=\"{\r\n          color: styles.timePickerColonColor || '#5b479c'\r\n        }\"\r\n        >:</span\r\n      >\r\n\r\n      <!-- Minute Input with Arrows -->\r\n      <div class=\"time-input-container\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"time-arrow time-arrow-up\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerArrowColor || '#5b479c'\r\n          }\"\r\n          (click)=\"incrementMinute()\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Increment minute\"\r\n        >\r\n          <i class=\"ri-arrow-drop-up-line\"></i>\r\n        </button>\r\n        <input\r\n          type=\"number\"\r\n          class=\"time-field\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerTextColor || '#333'\r\n          }\"\r\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\r\n          (input)=\"onMinuteInputChange($event)\"\r\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\r\n          min=\"0\"\r\n          max=\"59\"\r\n          aria-label=\"Minute\"\r\n        />\r\n        <button\r\n          type=\"button\"\r\n          class=\"time-arrow time-arrow-down\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerArrowColor || '#5b479c'\r\n          }\"\r\n          (click)=\"decrementMinute()\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Decrement minute\"\r\n        >\r\n          <i class=\"ri-arrow-drop-down-line\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\r\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\r\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"meridian-btn\"\r\n          [class.active]=\"meridian === 'AM'\"\r\n          [ngStyle]=\"\r\n            meridian === 'AM'\r\n              ? {\r\n                  'background-color':\r\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\r\n                  'border-color':\r\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\r\n                  color: styles.meridianActiveTextColor || '#ffffff'\r\n                }\r\n              : {\r\n                  'background-color': styles.meridianBgColor || '#ffffff',\r\n                  'border-color': styles.timePickerBorderColor || '#ddd',\r\n                  color: styles.meridianTextColor || '#666'\r\n                }\r\n          \"\r\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\r\n          aria-label=\"Select AM\"\r\n        >\r\n          AM\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"meridian-btn\"\r\n          [class.active]=\"meridian === 'PM'\"\r\n          [ngStyle]=\"\r\n            meridian === 'PM'\r\n              ? {\r\n                  'background-color':\r\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\r\n                  'border-color':\r\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\r\n                  color: styles.meridianActiveTextColor || '#ffffff'\r\n                }\r\n              : {\r\n                  'background-color': styles.meridianBgColor || '#ffffff',\r\n                  'border-color': styles.timePickerBorderColor || '#ddd',\r\n                  color: styles.meridianTextColor || '#666'\r\n                }\r\n          \"\r\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\r\n          aria-label=\"Select PM\"\r\n        >\r\n          PM\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"confirm-btn\"\r\n      [disabled]=\"\r\n        isRequired &&\r\n        ((!selectedDay && !multiple) ||\r\n          (!multipleSelectedDates.length && multiple))\r\n      \"\r\n      (click)=\"onConfirmClicked()\"\r\n      *ngIf=\"showConfirmButton\"\r\n      [ngStyle]=\"{\r\n        'background-color': styles.secondaryColor,\r\n        color: styles.confirmBtnTextColor,\r\n        'font-family': styles.fontFamily,\r\n        'border-radius': styles.borderRadius\r\n      }\"\r\n    >\r\n      {{ submitTextButton }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Zain,Arabic Typesetting,Tahoma,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:17px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:16px;font-weight:500;display:block;margin:auto;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly}.calendar-layout .day{display:inline-flex;width:13%;height:5.5vh;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px}.calendar-layout #greg-day span{font-size:14px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #ummAlQura-day{font-size:11px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .todays-date,.calendar-layout .selected-date{padding:10px;border-radius:5px}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0;font-family:Poppins,sans-serif}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:18px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:700}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1;font-family:Poppins,sans-serif}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'hijri-gregorian-datepicker', template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\r\n  <div\r\n    class=\"toggle-section\"\r\n    [dir]=\"dir\"\r\n    *ngIf=\"canChangeMode\"\r\n    [ngStyle]=\"{ color: styles.primaryColor }\"\r\n  >\r\n    <span> {{ ummAlQuraDateText }} </span>\r\n    <label class=\"switch\">\r\n      <input\r\n        type=\"checkbox\"\r\n        [disabled]=\"!canChangeMode\"\r\n        [checked]=\"mode === 'ummAlQura'\"\r\n        (change)=\"changeCalendarMode()\"\r\n        #calendarCheckbox\r\n      />\r\n      <span\r\n        class=\"slider\"\r\n        [ngStyle]=\"\r\n          calendarCheckbox.checked\r\n            ? { 'background-color': styles.primaryColor }\r\n            : { 'background-color': styles.backgroundColor }\r\n        \"\r\n      ></span>\r\n    </label>\r\n  </div>\r\n\r\n  <div\r\n    class=\"todays-date-section\"\r\n    *ngIf=\"todaysDateSection\"\r\n    [ngStyle]=\"{\r\n      'background-color': styles.backgroundColor,\r\n      color: styles.primaryColor,\r\n      'border-radius': styles.borderRadius\r\n    }\"\r\n  >\r\n    <div\r\n      class=\"text-info\"\r\n      [ngClass]=\"{\r\n        order: dir == 'rtl'\r\n      }\"\r\n    >\r\n      <p>{{ todaysDateText }}</p>\r\n    </div>\r\n\r\n    <div\r\n      class=\"data\"\r\n      [dir]=\"dir\"\r\n      [ngStyle]=\"{\r\n        'background-color': styles.todaysDateBgColor,\r\n        color: styles.todaysDateTextColor\r\n      }\"\r\n    >\r\n      <p *ngIf=\"mode == 'ummAlQura'\">\r\n        <!-- {{todaysDate.ummAlQura}} -->\r\n        {{\r\n          locale == \"ar\"\r\n            ? _dateUtilsService.convertDateNumerals(todaysDate.ummAlQura, \"ar\")\r\n            : todaysDate.ummAlQura\r\n        }}\r\n      </p>\r\n      <p *ngIf=\"mode == 'greg'\">\r\n        {{\r\n          locale == \"ar\"\r\n            ? _dateUtilsService.convertDateNumerals(todaysDate.gregorian, \"ar\")\r\n            : todaysDate.gregorian\r\n        }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"period-container\">\r\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\r\n      <div\r\n        class=\"select-item\"\r\n        [ngClass]=\"{\r\n          order: dir == 'ltr'\r\n        }\"\r\n        [ngStyle]=\"{\r\n          'background-color': styles.backgroundColor,\r\n          'border-radius': styles.borderRadius\r\n        }\"\r\n      >\r\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\r\n          yearSelectLabel\r\n        }}</label>\r\n\r\n        <select\r\n          formControlName=\"year\"\r\n          class=\"{{ 'icon-' + dir }}\"\r\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\r\n          (change)=\"onPeriodChange('year')\"\r\n          [dir]=\"dir\"\r\n          [ngStyle]=\"{\r\n            color: styles.primaryColor,\r\n            'font-family': styles.fontFamily\r\n          }\"\r\n        >\r\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\r\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n\r\n      <div\r\n        class=\"select-item\"\r\n        [ngClass]=\"{\r\n          order: dir == 'rtl'\r\n        }\"\r\n        [ngStyle]=\"{\r\n          'background-color': styles.backgroundColor,\r\n          'border-radius': styles.borderRadius\r\n        }\"\r\n      >\r\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\r\n          monthSelectLabel\r\n        }}</label>\r\n        <select\r\n          class=\"{{ 'icon-' + dir }}\"\r\n          formControlName=\"month\"\r\n          (change)=\"onPeriodChange('month')\"\r\n          [dir]=\"dir\"\r\n          [ngStyle]=\"{\r\n            color: styles.primaryColor,\r\n            'font-family': styles.fontFamily\r\n          }\"\r\n        >\r\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\r\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div\r\n    class=\"calendar-layout\"\r\n    [ngStyle]=\"{\r\n      'background-color': styles.backgroundColor,\r\n      'border-radius': styles.borderRadius\r\n    }\"\r\n  >\r\n    <div class=\"week-days\">\r\n      <div\r\n        class=\"week-day\"\r\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\r\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\r\n      >\r\n        {{ date }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [dir]=\"dir\">\r\n      <div class=\"week\" *ngFor=\"let week of weeks\">\r\n        <div\r\n          class=\"day\"\r\n          *ngFor=\"let day of week\"\r\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.backgroundColor,\r\n            color: styles.dayColor\r\n          }\"\r\n        >\r\n          <div\r\n            id=\"greg-day\"\r\n            [ngClass]=\"{\r\n              'todays-date': checkTodaysDate(day),\r\n              'selected-date': day?.selected == true\r\n            }\"\r\n            [ngStyle]=\"{\r\n              border:\r\n                markToday && checkTodaysDate(day)\r\n                  ? '1px solid ' + styles.secondaryColor\r\n                  : '',\r\n              'background-color':\r\n                day?.selected == true ? styles.secondaryColor : '',\r\n              color:\r\n                (day?.selected == true ? styles.todaysDateTextColor : '') ||\r\n                (checkFutureValidation(day) && futureValidation\r\n                  ? styles.disabledDayColor\r\n                  : '') ||\r\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\r\n              opacity: isDateDisabled(day) ? '0.4' : '1',\r\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\r\n            }\"\r\n          >\r\n            <span *ngIf=\"mode == 'greg'\">{{\r\n              locale == \"ar\"\r\n                ? _dateUtilsService.parseEnglish(\r\n                    day?.gD?.split(\"/\")[0] | number\r\n                  )\r\n                : (day?.gD?.split(\"/\")[0] | number)\r\n            }}</span>\r\n\r\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\r\n              locale == \"ar\"\r\n                ? _dateUtilsService.parseEnglish(\r\n                    day?.uD?.split(\"/\")[0] | number\r\n                  )\r\n                : (day?.uD?.split(\"/\")[0] | number)\r\n            }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\r\n    <span *ngIf=\"locale == 'ar'\">\r\n      {{ futureValidationMessageAr }}\r\n    </span>\r\n    <span *ngIf=\"locale == 'en'\">\r\n      {{ futureValidationMessageEn }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- Time Picker Section -->\r\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\r\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\r\n    <div class=\"time-picker-wrapper\">\r\n      <!-- Hour Input with Arrows -->\r\n      <div class=\"time-input-container\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"time-arrow time-arrow-up\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerArrowColor || '#5b479c'\r\n          }\"\r\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Increment hour\"\r\n        >\r\n          <i class=\"ri-arrow-drop-up-line\"></i>\r\n        </button>\r\n        <input\r\n          type=\"number\"\r\n          class=\"time-field\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerTextColor || '#333'\r\n          }\"\r\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\r\n          (input)=\"\r\n            useMeridian\r\n              ? onHour12InputChange($event)\r\n              : onHourInputChange($event)\r\n          \"\r\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\r\n          [min]=\"useMeridian ? 1 : 0\"\r\n          [max]=\"useMeridian ? 12 : 23\"\r\n          aria-label=\"Hour\"\r\n        />\r\n        <button\r\n          type=\"button\"\r\n          class=\"time-arrow time-arrow-down\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerArrowColor || '#5b479c'\r\n          }\"\r\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Decrement hour\"\r\n        >\r\n          <i class=\"ri-arrow-drop-down-line\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Colon Separator -->\r\n      <span\r\n        class=\"time-colon\"\r\n        [ngStyle]=\"{\r\n          color: styles.timePickerColonColor || '#5b479c'\r\n        }\"\r\n        >:</span\r\n      >\r\n\r\n      <!-- Minute Input with Arrows -->\r\n      <div class=\"time-input-container\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"time-arrow time-arrow-up\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerArrowColor || '#5b479c'\r\n          }\"\r\n          (click)=\"incrementMinute()\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Increment minute\"\r\n        >\r\n          <i class=\"ri-arrow-drop-up-line\"></i>\r\n        </button>\r\n        <input\r\n          type=\"number\"\r\n          class=\"time-field\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerTextColor || '#333'\r\n          }\"\r\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\r\n          (input)=\"onMinuteInputChange($event)\"\r\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\r\n          min=\"0\"\r\n          max=\"59\"\r\n          aria-label=\"Minute\"\r\n        />\r\n        <button\r\n          type=\"button\"\r\n          class=\"time-arrow time-arrow-down\"\r\n          [ngStyle]=\"{\r\n            'background-color': styles.timePickerBgColor || '#ffffff',\r\n            'border-color': styles.timePickerBorderColor || '#ddd',\r\n            color: styles.timePickerArrowColor || '#5b479c'\r\n          }\"\r\n          (click)=\"decrementMinute()\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Decrement minute\"\r\n        >\r\n          <i class=\"ri-arrow-drop-down-line\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\r\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\r\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"meridian-btn\"\r\n          [class.active]=\"meridian === 'AM'\"\r\n          [ngStyle]=\"\r\n            meridian === 'AM'\r\n              ? {\r\n                  'background-color':\r\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\r\n                  'border-color':\r\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\r\n                  color: styles.meridianActiveTextColor || '#ffffff'\r\n                }\r\n              : {\r\n                  'background-color': styles.meridianBgColor || '#ffffff',\r\n                  'border-color': styles.timePickerBorderColor || '#ddd',\r\n                  color: styles.meridianTextColor || '#666'\r\n                }\r\n          \"\r\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\r\n          aria-label=\"Select AM\"\r\n        >\r\n          AM\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"meridian-btn\"\r\n          [class.active]=\"meridian === 'PM'\"\r\n          [ngStyle]=\"\r\n            meridian === 'PM'\r\n              ? {\r\n                  'background-color':\r\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\r\n                  'border-color':\r\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\r\n                  color: styles.meridianActiveTextColor || '#ffffff'\r\n                }\r\n              : {\r\n                  'background-color': styles.meridianBgColor || '#ffffff',\r\n                  'border-color': styles.timePickerBorderColor || '#ddd',\r\n                  color: styles.meridianTextColor || '#666'\r\n                }\r\n          \"\r\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\r\n          aria-label=\"Select PM\"\r\n        >\r\n          PM\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"confirm-btn\"\r\n      [disabled]=\"\r\n        isRequired &&\r\n        ((!selectedDay && !multiple) ||\r\n          (!multipleSelectedDates.length && multiple))\r\n      \"\r\n      (click)=\"onConfirmClicked()\"\r\n      *ngIf=\"showConfirmButton\"\r\n      [ngStyle]=\"{\r\n        'background-color': styles.secondaryColor,\r\n        color: styles.confirmBtnTextColor,\r\n        'font-family': styles.fontFamily,\r\n        'border-radius': styles.borderRadius\r\n      }\"\r\n    >\r\n      {{ submitTextButton }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Zain,Arabic Typesetting,Tahoma,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:17px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:16px;font-weight:500;display:block;margin:auto;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly}.calendar-layout .day{display:inline-flex;width:13%;height:5.5vh;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px}.calendar-layout #greg-day span{font-size:14px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #ummAlQura-day{font-size:11px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .todays-date,.calendar-layout .selected-date{padding:10px;border-radius:5px}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-family:Poppins,sans-serif;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0;font-family:Poppins,sans-serif}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:18px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:700}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1;font-family:Poppins,sans-serif}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: DateUtilitiesService }], propDecorators: { markToday: [{
+                type: Input
+            }], canChangeMode: [{
+                type: Input
+            }], todaysDateSection: [{
+                type: Input
+            }], futureValidation: [{
+                type: Input
+            }], disableYearPicker: [{
+                type: Input
+            }], disableMonthPicker: [{
+                type: Input
+            }], disableDayPicker: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], showConfirmButton: [{
+                type: Input
+            }], futureValidationMessage: [{
+                type: Input
+            }], arabicLayout: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], submitTextButton: [{
+                type: Input
+            }], todaysDateText: [{
+                type: Input
+            }], ummAlQuraDateText: [{
+                type: Input
+            }], monthSelectLabel: [{
+                type: Input
+            }], yearSelectLabel: [{
+                type: Input
+            }], futureValidationMessageEn: [{
+                type: Input
+            }], futureValidationMessageAr: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], pastYearsLimit: [{
+                type: Input
+            }], futureYearsLimit: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], enableTime: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], initialDate: [{
+                type: Input
+            }], initialRangeStart: [{
+                type: Input
+            }], initialRangeEnd: [{
+                type: Input
+            }], useMeridian: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }], onDaySelect: [{
+                type: Output
+            }], onMonthChange: [{
+                type: Output
+            }], onYearChange: [{
+                type: Output
+            }], fontFamilyStyle: [{
+                type: HostBinding,
+                args: ['style.font-family']
             }] } });
 
-class HijriGregorianDatepickerModule {
-}
-HijriGregorianDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HijriGregorianDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-HijriGregorianDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: HijriGregorianDatepickerModule, declarations: [HijriGregorianDatepickerComponent], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [HijriGregorianDatepickerComponent] });
-HijriGregorianDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HijriGregorianDatepickerModule, imports: [FormsModule, ReactiveFormsModule, CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HijriGregorianDatepickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [HijriGregorianDatepickerComponent],
-                    imports: [FormsModule, ReactiveFormsModule, CommonModule],
-                    exports: [HijriGregorianDatepickerComponent],
-                }]
+class HijriGregorianDatepickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerModule, declarations: [HijriGregorianDatepickerComponent], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [HijriGregorianDatepickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerModule, imports: [FormsModule, ReactiveFormsModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HijriGregorianDatepickerComponent],
+                    imports: [FormsModule, ReactiveFormsModule, CommonModule],
+                    exports: [HijriGregorianDatepickerComponent],
+                }]
         }] });
 
-/*
- * Public API Surface of hijri-gregorian-datepicker
+/*
+ * Public API Surface of hijri-gregorian-datepicker
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { DateUtilitiesService, HijriGregorianDatepickerComponent, HijriGregorianDatepickerModule };