hijri-date-time-picker 1.0.0 → 1.0.2

package/dist/fesm2022/hijri-date-time-picker.mjs

@@ -0,0 +1,634 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import HijriDate, { toHijri } from 'hijri-date/lib/safe';
+
+/**
+ * Month names in different locales
+ */
+const GREGORIAN_MONTHS_EN = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+];
+const GREGORIAN_MONTHS_AR = [
+    'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+];
+const HIJRI_MONTHS_EN = [
+    'Muharram', 'Safar', 'Rabi\' al-Awwal', 'Rabi\' al-Thani', 'Jumada al-Awwal', 'Jumada al-Thani',
+    'Rajab', 'Sha\'ban', 'Ramadan', 'Shawwal', 'Dhu al-Qi\'dah', 'Dhu al-Hijjah'
+];
+const HIJRI_MONTHS_AR = [
+    'محرم', 'صفر', 'ربيع الأول', 'ربيع الثاني', 'جمادى الأولى', 'جمادى الثانية',
+    'رجب', 'شعبان', 'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة'
+];
+const WEEKDAY_NAMES_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const WEEKDAY_NAMES_AR = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
+
+class HijriDatePickerComponent {
+    // Mode & Configuration
+    canChangeMode = true;
+    mode = 'greg';
+    dir = 'ltr';
+    locale = 'en';
+    // Validation
+    futureValidation = true;
+    futureYearsLimit = 10;
+    isRequired = false;
+    minDate; // Minimum selectable date
+    maxDate; // Maximum selectable date
+    // Selection
+    multiple = false;
+    showConfirmButton = false;
+    initialSelectedDate; // For single selection mode - bind initial date
+    initialSelectedDates; // For multiple selection mode - bind initial dates
+    // Labels
+    submitTextButton = 'Submit';
+    todaysDateText = 'Today';
+    ummAlQuraDateText = 'Umm Al-Qura Calendar';
+    yearSelectLabel = 'Year';
+    monthSelectLabel = 'Month';
+    // Display Options
+    todaysDateSection = true;
+    markToday = true;
+    disableYearPicker = false;
+    disableMonthPicker = false;
+    disableDayPicker = false;
+    // Styling
+    styles = {};
+    // Time Configuration
+    enableTime = false;
+    timeFormat = '24';
+    minuteStep = 1;
+    enableSeconds = false;
+    defaultTime;
+    // Outputs
+    dateSelected = new EventEmitter();
+    modeChanged = new EventEmitter();
+    // Internal State
+    currentYear = new Date().getFullYear();
+    currentMonth = new Date().getMonth();
+    currentHijriYear = 0;
+    currentHijriMonth = 0;
+    selectedDates = [];
+    calendarDays = [];
+    today = new Date();
+    years = [];
+    months = [];
+    weekdays = [];
+    // Time state
+    selectedTime = {
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+    };
+    isPM = false;
+    ngOnInit() {
+        this.initializeCalendar();
+        this.initializeSelectedDates();
+        this.initializeTime();
+        this.updateLocaleData();
+        this.generateYears();
+        this.generateCalendar();
+    }
+    ngOnChanges(changes) {
+        if (changes['mode'] || changes['locale']) {
+            this.updateLocaleData();
+            this.generateCalendar();
+        }
+        // Handle changes to initial selected dates
+        if (changes['initialSelectedDate'] || changes['initialSelectedDates']) {
+            this.initializeSelectedDates();
+            this.generateCalendar();
+        }
+    }
+    initializeCalendar() {
+        const hijriToday = new HijriDate();
+        this.currentHijriYear = hijriToday.getFullYear();
+        this.currentHijriMonth = hijriToday.getMonth();
+    }
+    initializeSelectedDates() {
+        // Handle single selection mode
+        if (!this.multiple && this.initialSelectedDate) {
+            this.selectedDates = [this.createSelectedDate(this.initialSelectedDate)];
+        }
+        // Handle multiple selection mode
+        if (this.multiple && this.initialSelectedDates && this.initialSelectedDates.length > 0) {
+            this.selectedDates = this.initialSelectedDates.map(date => this.createSelectedDate(date));
+        }
+    }
+    initializeTime() {
+        if (!this.enableTime) {
+            return;
+        }
+        // Set default time if provided
+        if (this.defaultTime) {
+            this.selectedTime = {
+                hours: this.defaultTime.hours,
+                minutes: this.defaultTime.minutes,
+                seconds: this.defaultTime.seconds || 0
+            };
+            // Set AM/PM for 12-hour format
+            if (this.timeFormat === '12') {
+                this.isPM = this.selectedTime.hours >= 12;
+            }
+        }
+        else {
+            // Default to current time
+            const now = new Date();
+            this.selectedTime = {
+                hours: now.getHours(),
+                minutes: now.getMinutes(),
+                seconds: now.getSeconds()
+            };
+            this.isPM = this.selectedTime.hours >= 12;
+        }
+    }
+    updateLocaleData() {
+        // Update weekday names
+        this.weekdays = this.locale === 'ar' ? WEEKDAY_NAMES_AR : WEEKDAY_NAMES_EN;
+        // Update month names based on mode and locale
+        if (this.mode === 'hijri') {
+            this.months = this.locale === 'ar' ? HIJRI_MONTHS_AR : HIJRI_MONTHS_EN;
+        }
+        else {
+            this.months = this.locale === 'ar' ? GREGORIAN_MONTHS_AR : GREGORIAN_MONTHS_EN;
+        }
+    }
+    generateYears() {
+        const currentYear = this.mode === 'hijri' ? this.currentHijriYear : this.currentYear;
+        const startYear = currentYear - 100;
+        const endYear = currentYear + this.futureYearsLimit;
+        this.years = [];
+        for (let year = startYear; year <= endYear; year++) {
+            this.years.push(year);
+        }
+    }
+    generateCalendar() {
+        this.calendarDays = [];
+        if (this.mode === 'hijri') {
+            this.generateHijriCalendar();
+        }
+        else {
+            this.generateGregorianCalendar();
+        }
+    }
+    generateGregorianCalendar() {
+        const firstDay = new Date(this.currentYear, this.currentMonth, 1);
+        const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
+        const startingDayOfWeek = firstDay.getDay();
+        const daysInMonth = lastDay.getDate();
+        // Add empty cells for days before the first day of the month
+        for (let i = 0; i < startingDayOfWeek; i++) {
+            this.calendarDays.push({ day: null, disabled: true });
+        }
+        // Add days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(this.currentYear, this.currentMonth, day);
+            const isToday = this.isSameDay(date, this.today);
+            const isDisabled = this.isDateDisabled(date);
+            const isSelected = this.isDateSelected(date);
+            this.calendarDays.push({
+                day,
+                date,
+                isToday,
+                isDisabled,
+                isSelected,
+                disabled: false
+            });
+        }
+    }
+    generateHijriCalendar() {
+        const hijriDate = new HijriDate(this.currentHijriYear, this.currentHijriMonth, 1);
+        const gregorianDate = hijriDate.toGregorian();
+        const startingDayOfWeek = gregorianDate.getDay();
+        // Get days in Hijri month (typically 29 or 30)
+        const daysInMonth = this.getDaysInHijriMonth(this.currentHijriYear, this.currentHijriMonth);
+        // Add empty cells for days before the first day of the month
+        for (let i = 0; i < startingDayOfWeek; i++) {
+            this.calendarDays.push({ day: null, disabled: true });
+        }
+        // Add days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const hijriDay = new HijriDate(this.currentHijriYear, this.currentHijriMonth, day);
+            const gregorianDay = hijriDay.toGregorian();
+            const isToday = this.isSameDay(gregorianDay, this.today);
+            const isDisabled = this.isDateDisabled(gregorianDay);
+            const isSelected = this.isDateSelected(gregorianDay);
+            this.calendarDays.push({
+                day,
+                date: gregorianDay,
+                hijriDate: hijriDay,
+                isToday,
+                isDisabled,
+                isSelected,
+                disabled: false
+            });
+        }
+    }
+    getDaysInHijriMonth(year, month) {
+        // Try to create the 30th day; if it fails, the month has 29 days
+        try {
+            new HijriDate(year, month, 30);
+            return 30;
+        }
+        catch {
+            return 29;
+        }
+    }
+    isSameDay(date1, date2) {
+        return date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate();
+    }
+    isDateDisabled(date) {
+        // Check minDate constraint
+        if (this.minDate) {
+            const minDateOnly = new Date(this.minDate);
+            minDateOnly.setHours(0, 0, 0, 0);
+            const checkDate = new Date(date);
+            checkDate.setHours(0, 0, 0, 0);
+            if (checkDate < minDateOnly) {
+                return true;
+            }
+        }
+        // Check maxDate constraint
+        if (this.maxDate) {
+            const maxDateOnly = new Date(this.maxDate);
+            maxDateOnly.setHours(23, 59, 59, 999);
+            const checkDate = new Date(date);
+            checkDate.setHours(0, 0, 0, 0);
+            if (checkDate > maxDateOnly) {
+                return true;
+            }
+        }
+        // Check futureValidation constraint
+        if (this.futureValidation) {
+            const maxDate = new Date();
+            maxDate.setFullYear(maxDate.getFullYear() + this.futureYearsLimit);
+            return date > maxDate;
+        }
+        return false;
+    }
+    isDateSelected(date) {
+        return this.selectedDates.some(selected => this.isSameDay(selected.gregorian, date));
+    }
+    onDayClick(dayInfo) {
+        if (dayInfo.disabled || dayInfo.isDisabled) {
+            return;
+        }
+        const selectedDate = this.createSelectedDate(dayInfo.date);
+        if (this.multiple) {
+            const index = this.selectedDates.findIndex(d => this.isSameDay(d.gregorian, dayInfo.date));
+            if (index > -1) {
+                this.selectedDates.splice(index, 1);
+            }
+            else {
+                this.selectedDates.push(selectedDate);
+            }
+            if (!this.showConfirmButton) {
+                this.dateSelected.emit([...this.selectedDates]);
+            }
+        }
+        else {
+            this.selectedDates = [selectedDate];
+            if (!this.showConfirmButton) {
+                this.dateSelected.emit(selectedDate);
+            }
+        }
+        this.generateCalendar();
+    }
+    createSelectedDate(date) {
+        const hijriDate = toHijri(date);
+        // If time is enabled, set the time on the date object
+        if (this.enableTime) {
+            let hours24 = this.selectedTime.hours;
+            if (this.timeFormat === '12') {
+                if (this.isPM && this.selectedTime.hours !== 12) {
+                    hours24 = this.selectedTime.hours + 12;
+                }
+                else if (!this.isPM && this.selectedTime.hours === 12) {
+                    hours24 = 0;
+                }
+            }
+            date.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
+        }
+        return {
+            gregorian: date,
+            hijri: {
+                year: hijriDate.getFullYear(),
+                month: hijriDate.getMonth(),
+                day: hijriDate.getDate()
+            },
+            time: this.enableTime ? {
+                hours: date.getHours(),
+                minutes: date.getMinutes(),
+                seconds: date.getSeconds()
+            } : undefined,
+            formatted: {
+                gregorian: this.formatGregorianDate(date),
+                hijri: this.formatHijriDate(hijriDate),
+                time: this.enableTime ? this.formatTime(date.getHours(), date.getMinutes(), date.getSeconds()) : undefined
+            }
+        };
+    }
+    formatGregorianDate(date) {
+        const day = date.getDate();
+        const month = this.locale === 'ar' ? GREGORIAN_MONTHS_AR[date.getMonth()] : GREGORIAN_MONTHS_EN[date.getMonth()];
+        const year = date.getFullYear();
+        return this.locale === 'ar'
+            ? `${day} ${month} ${year}`
+            : `${month} ${day}, ${year}`;
+    }
+    formatHijriDate(hijriDate) {
+        const day = hijriDate.getDate();
+        const month = this.locale === 'ar'
+            ? HIJRI_MONTHS_AR[hijriDate.getMonth()]
+            : HIJRI_MONTHS_EN[hijriDate.getMonth()];
+        const year = hijriDate.getFullYear();
+        return this.locale === 'ar'
+            ? `${day} ${month} ${year} هـ`
+            : `${day} ${month} ${year} AH`;
+    }
+    onYearChange(event) {
+        const year = parseInt(event.target.value);
+        if (this.mode === 'hijri') {
+            this.currentHijriYear = year;
+        }
+        else {
+            this.currentYear = year;
+        }
+        this.generateCalendar();
+    }
+    onMonthChange(event) {
+        const month = parseInt(event.target.value);
+        if (this.mode === 'hijri') {
+            this.currentHijriMonth = month;
+        }
+        else {
+            this.currentMonth = month;
+        }
+        this.generateCalendar();
+    }
+    previousMonth() {
+        if (this.mode === 'hijri') {
+            if (this.currentHijriMonth === 0) {
+                this.currentHijriMonth = 11;
+                this.currentHijriYear--;
+            }
+            else {
+                this.currentHijriMonth--;
+            }
+        }
+        else {
+            if (this.currentMonth === 0) {
+                this.currentMonth = 11;
+                this.currentYear--;
+            }
+            else {
+                this.currentMonth--;
+            }
+        }
+        this.generateCalendar();
+    }
+    nextMonth() {
+        if (this.mode === 'hijri') {
+            if (this.currentHijriMonth === 11) {
+                this.currentHijriMonth = 0;
+                this.currentHijriYear++;
+            }
+            else {
+                this.currentHijriMonth++;
+            }
+        }
+        else {
+            if (this.currentMonth === 11) {
+                this.currentMonth = 0;
+                this.currentYear++;
+            }
+            else {
+                this.currentMonth++;
+            }
+        }
+        this.generateCalendar();
+    }
+    toggleMode() {
+        if (!this.canChangeMode) {
+            return;
+        }
+        this.mode = this.mode === 'greg' ? 'hijri' : 'greg';
+        this.updateLocaleData();
+        this.generateYears();
+        this.generateCalendar();
+        this.modeChanged.emit(this.mode);
+    }
+    selectToday() {
+        const today = new Date();
+        this.onDayClick({ date: today, disabled: false, isDisabled: false });
+    }
+    onSubmit() {
+        if (this.isRequired && this.selectedDates.length === 0) {
+            return;
+        }
+        if (this.multiple) {
+            this.dateSelected.emit([...this.selectedDates]);
+        }
+        else if (this.selectedDates.length > 0) {
+            this.dateSelected.emit(this.selectedDates[0]);
+        }
+    }
+    // Time handling methods
+    incrementTime(type) {
+        if (type === 'hours') {
+            const max = this.timeFormat === '12' ? 12 : 23;
+            this.selectedTime.hours = (this.selectedTime.hours + 1) > max ? (this.timeFormat === '12' ? 1 : 0) : this.selectedTime.hours + 1;
+        }
+        else if (type === 'minutes') {
+            this.selectedTime.minutes = (this.selectedTime.minutes + this.minuteStep) > 59 ? 0 : this.selectedTime.minutes + this.minuteStep;
+        }
+        else if (type === 'seconds') {
+            this.selectedTime.seconds = (this.selectedTime.seconds + 1) > 59 ? 0 : this.selectedTime.seconds + 1;
+        }
+        this.updateSelectedDateTime();
+    }
+    decrementTime(type) {
+        if (type === 'hours') {
+            const min = this.timeFormat === '12' ? 1 : 0;
+            const max = this.timeFormat === '12' ? 12 : 23;
+            this.selectedTime.hours = (this.selectedTime.hours - 1) < min ? max : this.selectedTime.hours - 1;
+        }
+        else if (type === 'minutes') {
+            this.selectedTime.minutes = (this.selectedTime.minutes - this.minuteStep) < 0 ? 59 : this.selectedTime.minutes - this.minuteStep;
+        }
+        else if (type === 'seconds') {
+            this.selectedTime.seconds = (this.selectedTime.seconds - 1) < 0 ? 59 : this.selectedTime.seconds - 1;
+        }
+        this.updateSelectedDateTime();
+    }
+    onTimeChange(type, event) {
+        const value = parseInt(event.target.value) || 0;
+        if (type === 'hours') {
+            const min = this.timeFormat === '12' ? 1 : 0;
+            const max = this.timeFormat === '12' ? 12 : 23;
+            this.selectedTime.hours = Math.max(min, Math.min(max, value));
+        }
+        else if (type === 'minutes') {
+            this.selectedTime.minutes = Math.max(0, Math.min(59, value));
+        }
+        else if (type === 'seconds') {
+            this.selectedTime.seconds = Math.max(0, Math.min(59, value));
+        }
+        this.updateSelectedDateTime();
+    }
+    setAMPM(pm) {
+        this.isPM = pm;
+        this.updateSelectedDateTime();
+    }
+    formatTime(hours, minutes, seconds) {
+        if (this.timeFormat === '12') {
+            const displayHours = hours % 12 || 12;
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            const minutesStr = minutes.toString().padStart(2, '0');
+            if (this.enableSeconds) {
+                const secondsStr = seconds.toString().padStart(2, '0');
+                return `${displayHours}:${minutesStr}:${secondsStr} ${ampm}`;
+            }
+            return `${displayHours}:${minutesStr} ${ampm}`;
+        }
+        else {
+            const hoursStr = hours.toString().padStart(2, '0');
+            const minutesStr = minutes.toString().padStart(2, '0');
+            if (this.enableSeconds) {
+                const secondsStr = seconds.toString().padStart(2, '0');
+                return `${hoursStr}:${minutesStr}:${secondsStr}`;
+            }
+            return `${hoursStr}:${minutesStr}`;
+        }
+    }
+    updateSelectedDateTime() {
+        if (!this.enableTime || this.selectedDates.length === 0) {
+            return;
+        }
+        // Convert 12-hour to 24-hour if needed
+        let hours24 = this.selectedTime.hours;
+        if (this.timeFormat === '12') {
+            if (this.isPM && this.selectedTime.hours !== 12) {
+                hours24 = this.selectedTime.hours + 12;
+            }
+            else if (!this.isPM && this.selectedTime.hours === 12) {
+                hours24 = 0;
+            }
+        }
+        // Update all selected dates with new time
+        this.selectedDates = this.selectedDates.map(selectedDate => {
+            const newDate = new Date(selectedDate.gregorian);
+            newDate.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
+            return {
+                ...selectedDate,
+                gregorian: newDate,
+                time: {
+                    hours: hours24,
+                    minutes: this.selectedTime.minutes,
+                    seconds: this.selectedTime.seconds
+                },
+                formatted: {
+                    ...selectedDate.formatted,
+                    time: this.formatTime(hours24, this.selectedTime.minutes, this.selectedTime.seconds)
+                }
+            };
+        });
+    }
+    getCustomStyles() {
+        return {
+            '--primary-color': this.styles.primaryColor || '#4f46e5',
+            '--secondary-color': this.styles.secondaryColor || '#818cf8',
+            '--background-color': this.styles.backgroundColor || '#ffffff',
+            '--text-color': this.styles.textColor || '#1f2937',
+            '--selected-date-color': this.styles.selectedDateColor || '#ffffff',
+            '--selected-date-background': this.styles.selectedDateBackground || '#4f46e5',
+            '--today-color': this.styles.todayColor || '#10b981',
+            '--disabled-color': this.styles.disabledColor || '#d1d5db',
+            '--border-color': this.styles.borderColor || '#e5e7eb',
+            '--hover-color': this.styles.hoverColor || '#f3f4f6',
+            '--font-family': this.styles.fontFamily || 'system-ui, -apple-system, sans-serif',
+            '--font-size': this.styles.fontSize || '14px',
+            '--border-radius': this.styles.borderRadius || '8px'
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HijriDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HijriDatePickerComponent, isStandalone: true, selector: "hijri-date-picker", inputs: { canChangeMode: "canChangeMode", mode: "mode", dir: "dir", locale: "locale", futureValidation: "futureValidation", futureYearsLimit: "futureYearsLimit", isRequired: "isRequired", minDate: "minDate", maxDate: "maxDate", multiple: "multiple", showConfirmButton: "showConfirmButton", initialSelectedDate: "initialSelectedDate", initialSelectedDates: "initialSelectedDates", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", yearSelectLabel: "yearSelectLabel", monthSelectLabel: "monthSelectLabel", todaysDateSection: "todaysDateSection", markToday: "markToday", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", styles: "styles", enableTime: "enableTime", timeFormat: "timeFormat", minuteStep: "minuteStep", enableSeconds: "enableSeconds", defaultTime: "defaultTime" }, outputs: { dateSelected: "dateSelected", modeChanged: "modeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"hijri-date-picker\" [dir]=\"dir\" [style]=\"getCustomStyles()\">\n  <!-- Header Section -->\n  <div class=\"picker-header\">\n    <!-- Mode Toggle Button -->\n    <button \n      *ngIf=\"canChangeMode\" \n      class=\"mode-toggle-btn\"\n      (click)=\"toggleMode()\"\n      [attr.aria-label]=\"mode === 'greg' ? 'Switch to Hijri' : 'Switch to Gregorian'\">\n      {{ mode === 'greg' ? (locale === 'ar' ? '\u062A\u0642\u0648\u064A\u0645 \u0647\u062C\u0631\u064A' : 'Hijri') : (locale === 'ar' ? '\u062A\u0642\u0648\u064A\u0645 \u0645\u064A\u0644\u0627\u062F\u064A' : 'Gregorian') }}\n    </button>\n\n    <!-- Today's Date Section -->\n    <div *ngIf=\"todaysDateSection\" class=\"todays-date\">\n      <button class=\"today-btn\" (click)=\"selectToday()\">\n        {{ todaysDateText }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Calendar Controls -->\n  <div class=\"calendar-controls\">\n    <!-- Year Picker -->\n    <div class=\"control-group\" *ngIf=\"!disableYearPicker\">\n      <label [attr.for]=\"'year-select'\">{{ yearSelectLabel }}</label>\n      <select \n        id=\"year-select\"\n        [value]=\"mode === 'hijri' ? currentHijriYear : currentYear\"\n        (change)=\"onYearChange($event)\"\n        class=\"year-select\">\n        <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\n      </select>\n    </div>\n\n    <!-- Month Picker -->\n    <div class=\"control-group\" *ngIf=\"!disableMonthPicker\">\n      <label [attr.for]=\"'month-select'\">{{ monthSelectLabel }}</label>\n      <select \n        id=\"month-select\"\n        [value]=\"mode === 'hijri' ? currentHijriMonth : currentMonth\"\n        (change)=\"onMonthChange($event)\"\n        class=\"month-select\">\n        <option *ngFor=\"let month of months; let i = index\" [value]=\"i\">\n          {{ month }}\n        </option>\n      </select>\n    </div>\n\n    <!-- Navigation Buttons -->\n    <div class=\"navigation-buttons\">\n      <button \n        class=\"nav-btn prev-btn\"\n        (click)=\"previousMonth()\"\n        [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u0633\u0627\u0628\u0642' : 'Previous Month'\">\n        {{ dir === 'rtl' ? '\u2190' : '\u2192' }}\n      </button>\n      <button \n        class=\"nav-btn next-btn\"\n        (click)=\"nextMonth()\"\n        [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062A\u0627\u0644\u064A' : 'Next Month'\">\n        {{ dir === 'rtl' ? '\u2192' : '\u2190' }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Calendar Grid -->\n  <div class=\"calendar-grid\" *ngIf=\"!disableDayPicker\">\n    <!-- Weekday Headers -->\n    <div class=\"weekday-header\">\n      <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">\n        {{ weekday }}\n      </div>\n    </div>\n\n    <!-- Calendar Days -->\n    <div class=\"calendar-days\">\n      <div \n        *ngFor=\"let dayInfo of calendarDays\"\n        class=\"day-cell\"\n        [class.empty]=\"dayInfo.day === null\"\n        [class.today]=\"markToday && dayInfo.isToday\"\n        [class.selected]=\"dayInfo.isSelected\"\n        [class.disabled]=\"dayInfo.isDisabled\"\n        (click)=\"onDayClick(dayInfo)\">\n        <span *ngIf=\"dayInfo.day !== null\">{{ dayInfo.day }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Time Picker Section -->\n  <div class=\"time-picker\" *ngIf=\"enableTime\">\n    <div class=\"time-picker-label\">\n      {{ locale === 'ar' ? '\u0627\u0644\u0648\u0642\u062A' : 'Time' }}\n    </div>\n    \n    <div class=\"time-inputs\">\n      <!-- Hours Input -->\n      <div class=\"time-input-group\">\n        <button class=\"time-btn\" (click)=\"incrementTime('hours')\">\u25B2</button>\n        <input \n          type=\"number\" \n          class=\"time-input\"\n          [value]=\"timeFormat === '12' ? (selectedTime.hours % 12 || 12) : selectedTime.hours\"\n          (input)=\"onTimeChange('hours', $event)\"\n          [min]=\"timeFormat === '12' ? 1 : 0\"\n          [max]=\"timeFormat === '12' ? 12 : 23\"\n          [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u0633\u0627\u0639\u0627\u062A' : 'Hours'\">\n        <button class=\"time-btn\" (click)=\"decrementTime('hours')\">\u25BC</button>\n      </div>\n      \n      <span class=\"time-separator\">:</span>\n      \n      <!-- Minutes Input -->\n      <div class=\"time-input-group\">\n        <button class=\"time-btn\" (click)=\"incrementTime('minutes')\">\u25B2</button>\n        <input \n          type=\"number\" \n          class=\"time-input\"\n          [value]=\"selectedTime.minutes\"\n          (input)=\"onTimeChange('minutes', $event)\"\n          [min]=\"0\"\n          [max]=\"59\"\n          [step]=\"minuteStep\"\n          [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u062F\u0642\u0627\u0626\u0642' : 'Minutes'\">\n        <button class=\"time-btn\" (click)=\"decrementTime('minutes')\">\u25BC</button>\n      </div>\n      \n      <!-- Seconds Input (Optional) -->\n      <ng-container *ngIf=\"enableSeconds\">\n        <span class=\"time-separator\">:</span>\n        <div class=\"time-input-group\">\n          <button class=\"time-btn\" (click)=\"incrementTime('seconds')\">\u25B2</button>\n          <input \n            type=\"number\" \n            class=\"time-input\"\n            [value]=\"selectedTime.seconds\"\n            (input)=\"onTimeChange('seconds', $event)\"\n            [min]=\"0\"\n            [max]=\"59\"\n            [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u062B\u0648\u0627\u0646\u064A' : 'Seconds'\">\n          <button class=\"time-btn\" (click)=\"decrementTime('seconds')\">\u25BC</button>\n        </div>\n      </ng-container>\n      \n      <!-- AM/PM Toggle (12-hour format) -->\n      <div class=\"ampm-toggle\" *ngIf=\"timeFormat === '12'\">\n        <button \n          class=\"ampm-btn\"\n          [class.active]=\"!isPM\"\n          (click)=\"setAMPM(false)\">\n          AM\n        </button>\n        <button \n          class=\"ampm-btn\"\n          [class.active]=\"isPM\"\n          (click)=\"setAMPM(true)\">\n          PM\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Selected Dates Display -->\n  <div class=\"selected-dates\" *ngIf=\"selectedDates.length > 0\">\n    <div class=\"selected-label\">\n      {{ locale === 'ar' ? '\u0627\u0644\u062A\u0648\u0627\u0631\u064A\u062E \u0627\u0644\u0645\u062D\u062F\u062F\u0629:' : 'Selected Dates:' }}\n    </div>\n    <div class=\"selected-list\">\n      <div class=\"selected-item\" *ngFor=\"let date of selectedDates\">\n        <div class=\"selected-date-info\">\n          <span class=\"date-text\">\n            {{ mode === 'hijri' ? date.formatted.hijri : date.formatted.gregorian }}\n          </span>\n          <span class=\"time-text\" *ngIf=\"enableTime && date.formatted.time\">\n            {{ date.formatted.time }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Submit Button -->\n  <div class=\"picker-footer\" *ngIf=\"showConfirmButton\">\n    <button \n      class=\"submit-btn\"\n      (click)=\"onSubmit()\"\n      [disabled]=\"isRequired && selectedDates.length === 0\">\n      {{ submitTextButton }}\n    </button>\n  </div>\n\n  <!-- Calendar Type Label -->\n  <div class=\"calendar-type\" *ngIf=\"mode === 'hijri'\">\n    <small>{{ ummAlQuraDateText }}</small>\n  </div>\n</div>\n", styles: [".hijri-date-picker{font-family:var(--font-family);font-size:var(--font-size);background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:20px;max-width:400px;box-shadow:0 4px 6px #0000001a}.picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.mode-toggle-btn{background-color:var(--secondary-color);color:#fff;border:none;padding:8px 16px;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease}.mode-toggle-btn:hover{opacity:.9;transform:translateY(-1px)}.mode-toggle-btn:active{transform:translateY(0)}.todays-date{flex:1;display:flex;justify-content:flex-end}.today-btn{background-color:var(--today-color);color:#fff;border:none;padding:8px 16px;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease}.today-btn:hover{opacity:.9;transform:translateY(-1px)}.calendar-controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;align-items:flex-end}.control-group{flex:1;min-width:120px;display:flex;flex-direction:column;gap:4px}.control-group label{font-size:12px;font-weight:500;color:var(--text-color);opacity:.8}.year-select,.month-select{padding:8px 12px;border:1px solid var(--border-color);border-radius:calc(var(--border-radius) / 2);background-color:var(--background-color);color:var(--text-color);font-size:14px;cursor:pointer;transition:border-color .2s ease}.year-select:hover,.month-select:hover{border-color:var(--primary-color)}.year-select:focus,.month-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.navigation-buttons{display:flex;gap:8px}.nav-btn{background-color:var(--primary-color);color:#fff;border:none;width:36px;height:36px;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.nav-btn:hover{opacity:.9;transform:scale(1.05)}.nav-btn:active{transform:scale(.95)}.calendar-grid{margin-bottom:16px}.weekday-header{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}.weekday{text-align:center;font-size:12px;font-weight:600;color:var(--text-color);opacity:.7;padding:8px 4px}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;position:relative}.day-cell:not(.empty):not(.disabled):hover{background-color:var(--hover-color);transform:scale(1.05)}.day-cell.empty{cursor:default;pointer-events:none}.day-cell.today{color:var(--today-color);font-weight:700}.day-cell.today:after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--today-color);border-radius:50%}.day-cell.selected{background-color:var(--selected-date-background);color:var(--selected-date-color);font-weight:700}.day-cell.disabled{color:var(--disabled-color);cursor:not-allowed;opacity:.5}.day-cell.disabled:hover{background-color:transparent;transform:none}.selected-dates{margin-bottom:16px;padding:12px;background-color:var(--hover-color);border-radius:calc(var(--border-radius) / 2)}.selected-label{font-size:12px;font-weight:600;margin-bottom:8px;color:var(--text-color);opacity:.8}.selected-list{display:flex;flex-wrap:wrap;gap:8px}.selected-item{background-color:var(--primary-color);color:#fff;padding:6px 12px;border-radius:calc(var(--border-radius) / 2);font-size:13px;font-weight:500}.picker-footer{margin-bottom:12px}.submit-btn{width:100%;background-color:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:15px;font-weight:600;transition:all .2s ease}.submit-btn:hover:not(:disabled){opacity:.9;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.calendar-type{text-align:center;color:var(--text-color);opacity:.6;font-size:11px}.hijri-date-picker[dir=rtl]{direction:rtl}.hijri-date-picker[dir=rtl] .picker-header{flex-direction:row-reverse}.hijri-date-picker[dir=rtl] .todays-date{justify-content:flex-start}@media (max-width: 480px){.hijri-date-picker{padding:16px;max-width:100%}.calendar-controls{flex-direction:column}.control-group{width:100%}.navigation-buttons{width:100%;justify-content:space-between}.weekday{font-size:11px;padding:6px 2px}.day-cell{font-size:13px}}@media (prefers-color-scheme: dark){.hijri-date-picker{--background-color: #1f2937;--text-color: #f9fafb;--border-color: #374151;--hover-color: #374151}}.time-picker{margin-top:10px;margin-bottom:20px;padding:16px;background:linear-gradient(135deg,var(--hover-color) 0%,transparent 100%);border-radius:var(--border-radius);border:1px solid var(--border-color);box-shadow:inset 0 2px 4px #0000000d}.time-picker-label{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text-color);opacity:.9;text-align:center;text-transform:uppercase;letter-spacing:.5px}.time-inputs{display:flex;align-items:center;justify-content:center;gap:12px}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:6px}.time-btn{background-color:var(--primary-color);color:#fff;border:none;width:36px;height:28px;border-radius:calc(var(--border-radius) / 3);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-user-select:none;user-select:none}.time-btn:hover{filter:brightness(1.1);transform:scale(1.05)}.time-btn:active{transform:scale(.95)}.time-input{width:60px;padding:10px 4px;text-align:center;border:2px solid var(--border-color);border-radius:calc(var(--border-radius) / 2);background-color:var(--background-color);color:var(--text-color);font-size:20px;font-weight:700;transition:all .2s ease;box-shadow:0 2px 4px #0000000d}.time-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px #4f46e526}.time-input::-webkit-inner-spin-button,.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.time-separator{font-size:28px;font-weight:700;color:var(--text-color);opacity:.4;padding-bottom:4px}.ampm-toggle{display:flex;flex-direction:column;gap:6px;margin-left:12px}.ampm-btn{background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);padding:8px 14px;border-radius:calc(var(--border-radius) / 3);cursor:pointer;font-size:11px;font-weight:700;transition:all .2s ease;box-shadow:0 2px 4px #0000000d}.ampm-btn.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 4px 6px #00000026}.ampm-btn:hover:not(.active){background-color:var(--hover-color);border-color:var(--primary-color)}.selected-date-info{display:flex;flex-direction:column;align-items:center;gap:2px}.selected-item .time-text{font-size:11px;opacity:.85;font-weight:500;background-color:#fff3;padding:2px 8px;border-radius:10px;margin-top:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HijriDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hijri-date-picker', standalone: true, imports: [CommonModule], template: "<div class=\"hijri-date-picker\" [dir]=\"dir\" [style]=\"getCustomStyles()\">\n  <!-- Header Section -->\n  <div class=\"picker-header\">\n    <!-- Mode Toggle Button -->\n    <button \n      *ngIf=\"canChangeMode\" \n      class=\"mode-toggle-btn\"\n      (click)=\"toggleMode()\"\n      [attr.aria-label]=\"mode === 'greg' ? 'Switch to Hijri' : 'Switch to Gregorian'\">\n      {{ mode === 'greg' ? (locale === 'ar' ? '\u062A\u0642\u0648\u064A\u0645 \u0647\u062C\u0631\u064A' : 'Hijri') : (locale === 'ar' ? '\u062A\u0642\u0648\u064A\u0645 \u0645\u064A\u0644\u0627\u062F\u064A' : 'Gregorian') }}\n    </button>\n\n    <!-- Today's Date Section -->\n    <div *ngIf=\"todaysDateSection\" class=\"todays-date\">\n      <button class=\"today-btn\" (click)=\"selectToday()\">\n        {{ todaysDateText }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Calendar Controls -->\n  <div class=\"calendar-controls\">\n    <!-- Year Picker -->\n    <div class=\"control-group\" *ngIf=\"!disableYearPicker\">\n      <label [attr.for]=\"'year-select'\">{{ yearSelectLabel }}</label>\n      <select \n        id=\"year-select\"\n        [value]=\"mode === 'hijri' ? currentHijriYear : currentYear\"\n        (change)=\"onYearChange($event)\"\n        class=\"year-select\">\n        <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\n      </select>\n    </div>\n\n    <!-- Month Picker -->\n    <div class=\"control-group\" *ngIf=\"!disableMonthPicker\">\n      <label [attr.for]=\"'month-select'\">{{ monthSelectLabel }}</label>\n      <select \n        id=\"month-select\"\n        [value]=\"mode === 'hijri' ? currentHijriMonth : currentMonth\"\n        (change)=\"onMonthChange($event)\"\n        class=\"month-select\">\n        <option *ngFor=\"let month of months; let i = index\" [value]=\"i\">\n          {{ month }}\n        </option>\n      </select>\n    </div>\n\n    <!-- Navigation Buttons -->\n    <div class=\"navigation-buttons\">\n      <button \n        class=\"nav-btn prev-btn\"\n        (click)=\"previousMonth()\"\n        [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u0633\u0627\u0628\u0642' : 'Previous Month'\">\n        {{ dir === 'rtl' ? '\u2190' : '\u2192' }}\n      </button>\n      <button \n        class=\"nav-btn next-btn\"\n        (click)=\"nextMonth()\"\n        [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062A\u0627\u0644\u064A' : 'Next Month'\">\n        {{ dir === 'rtl' ? '\u2192' : '\u2190' }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Calendar Grid -->\n  <div class=\"calendar-grid\" *ngIf=\"!disableDayPicker\">\n    <!-- Weekday Headers -->\n    <div class=\"weekday-header\">\n      <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">\n        {{ weekday }}\n      </div>\n    </div>\n\n    <!-- Calendar Days -->\n    <div class=\"calendar-days\">\n      <div \n        *ngFor=\"let dayInfo of calendarDays\"\n        class=\"day-cell\"\n        [class.empty]=\"dayInfo.day === null\"\n        [class.today]=\"markToday && dayInfo.isToday\"\n        [class.selected]=\"dayInfo.isSelected\"\n        [class.disabled]=\"dayInfo.isDisabled\"\n        (click)=\"onDayClick(dayInfo)\">\n        <span *ngIf=\"dayInfo.day !== null\">{{ dayInfo.day }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Time Picker Section -->\n  <div class=\"time-picker\" *ngIf=\"enableTime\">\n    <div class=\"time-picker-label\">\n      {{ locale === 'ar' ? '\u0627\u0644\u0648\u0642\u062A' : 'Time' }}\n    </div>\n    \n    <div class=\"time-inputs\">\n      <!-- Hours Input -->\n      <div class=\"time-input-group\">\n        <button class=\"time-btn\" (click)=\"incrementTime('hours')\">\u25B2</button>\n        <input \n          type=\"number\" \n          class=\"time-input\"\n          [value]=\"timeFormat === '12' ? (selectedTime.hours % 12 || 12) : selectedTime.hours\"\n          (input)=\"onTimeChange('hours', $event)\"\n          [min]=\"timeFormat === '12' ? 1 : 0\"\n          [max]=\"timeFormat === '12' ? 12 : 23\"\n          [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u0633\u0627\u0639\u0627\u062A' : 'Hours'\">\n        <button class=\"time-btn\" (click)=\"decrementTime('hours')\">\u25BC</button>\n      </div>\n      \n      <span class=\"time-separator\">:</span>\n      \n      <!-- Minutes Input -->\n      <div class=\"time-input-group\">\n        <button class=\"time-btn\" (click)=\"incrementTime('minutes')\">\u25B2</button>\n        <input \n          type=\"number\" \n          class=\"time-input\"\n          [value]=\"selectedTime.minutes\"\n          (input)=\"onTimeChange('minutes', $event)\"\n          [min]=\"0\"\n          [max]=\"59\"\n          [step]=\"minuteStep\"\n          [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u062F\u0642\u0627\u0626\u0642' : 'Minutes'\">\n        <button class=\"time-btn\" (click)=\"decrementTime('minutes')\">\u25BC</button>\n      </div>\n      \n      <!-- Seconds Input (Optional) -->\n      <ng-container *ngIf=\"enableSeconds\">\n        <span class=\"time-separator\">:</span>\n        <div class=\"time-input-group\">\n          <button class=\"time-btn\" (click)=\"incrementTime('seconds')\">\u25B2</button>\n          <input \n            type=\"number\" \n            class=\"time-input\"\n            [value]=\"selectedTime.seconds\"\n            (input)=\"onTimeChange('seconds', $event)\"\n            [min]=\"0\"\n            [max]=\"59\"\n            [attr.aria-label]=\"locale === 'ar' ? '\u0627\u0644\u062B\u0648\u0627\u0646\u064A' : 'Seconds'\">\n          <button class=\"time-btn\" (click)=\"decrementTime('seconds')\">\u25BC</button>\n        </div>\n      </ng-container>\n      \n      <!-- AM/PM Toggle (12-hour format) -->\n      <div class=\"ampm-toggle\" *ngIf=\"timeFormat === '12'\">\n        <button \n          class=\"ampm-btn\"\n          [class.active]=\"!isPM\"\n          (click)=\"setAMPM(false)\">\n          AM\n        </button>\n        <button \n          class=\"ampm-btn\"\n          [class.active]=\"isPM\"\n          (click)=\"setAMPM(true)\">\n          PM\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Selected Dates Display -->\n  <div class=\"selected-dates\" *ngIf=\"selectedDates.length > 0\">\n    <div class=\"selected-label\">\n      {{ locale === 'ar' ? '\u0627\u0644\u062A\u0648\u0627\u0631\u064A\u062E \u0627\u0644\u0645\u062D\u062F\u062F\u0629:' : 'Selected Dates:' }}\n    </div>\n    <div class=\"selected-list\">\n      <div class=\"selected-item\" *ngFor=\"let date of selectedDates\">\n        <div class=\"selected-date-info\">\n          <span class=\"date-text\">\n            {{ mode === 'hijri' ? date.formatted.hijri : date.formatted.gregorian }}\n          </span>\n          <span class=\"time-text\" *ngIf=\"enableTime && date.formatted.time\">\n            {{ date.formatted.time }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Submit Button -->\n  <div class=\"picker-footer\" *ngIf=\"showConfirmButton\">\n    <button \n      class=\"submit-btn\"\n      (click)=\"onSubmit()\"\n      [disabled]=\"isRequired && selectedDates.length === 0\">\n      {{ submitTextButton }}\n    </button>\n  </div>\n\n  <!-- Calendar Type Label -->\n  <div class=\"calendar-type\" *ngIf=\"mode === 'hijri'\">\n    <small>{{ ummAlQuraDateText }}</small>\n  </div>\n</div>\n", styles: [".hijri-date-picker{font-family:var(--font-family);font-size:var(--font-size);background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:20px;max-width:400px;box-shadow:0 4px 6px #0000001a}.picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.mode-toggle-btn{background-color:var(--secondary-color);color:#fff;border:none;padding:8px 16px;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease}.mode-toggle-btn:hover{opacity:.9;transform:translateY(-1px)}.mode-toggle-btn:active{transform:translateY(0)}.todays-date{flex:1;display:flex;justify-content:flex-end}.today-btn{background-color:var(--today-color);color:#fff;border:none;padding:8px 16px;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease}.today-btn:hover{opacity:.9;transform:translateY(-1px)}.calendar-controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;align-items:flex-end}.control-group{flex:1;min-width:120px;display:flex;flex-direction:column;gap:4px}.control-group label{font-size:12px;font-weight:500;color:var(--text-color);opacity:.8}.year-select,.month-select{padding:8px 12px;border:1px solid var(--border-color);border-radius:calc(var(--border-radius) / 2);background-color:var(--background-color);color:var(--text-color);font-size:14px;cursor:pointer;transition:border-color .2s ease}.year-select:hover,.month-select:hover{border-color:var(--primary-color)}.year-select:focus,.month-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.navigation-buttons{display:flex;gap:8px}.nav-btn{background-color:var(--primary-color);color:#fff;border:none;width:36px;height:36px;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.nav-btn:hover{opacity:.9;transform:scale(1.05)}.nav-btn:active{transform:scale(.95)}.calendar-grid{margin-bottom:16px}.weekday-header{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}.weekday{text-align:center;font-size:12px;font-weight:600;color:var(--text-color);opacity:.7;padding:8px 4px}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;position:relative}.day-cell:not(.empty):not(.disabled):hover{background-color:var(--hover-color);transform:scale(1.05)}.day-cell.empty{cursor:default;pointer-events:none}.day-cell.today{color:var(--today-color);font-weight:700}.day-cell.today:after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--today-color);border-radius:50%}.day-cell.selected{background-color:var(--selected-date-background);color:var(--selected-date-color);font-weight:700}.day-cell.disabled{color:var(--disabled-color);cursor:not-allowed;opacity:.5}.day-cell.disabled:hover{background-color:transparent;transform:none}.selected-dates{margin-bottom:16px;padding:12px;background-color:var(--hover-color);border-radius:calc(var(--border-radius) / 2)}.selected-label{font-size:12px;font-weight:600;margin-bottom:8px;color:var(--text-color);opacity:.8}.selected-list{display:flex;flex-wrap:wrap;gap:8px}.selected-item{background-color:var(--primary-color);color:#fff;padding:6px 12px;border-radius:calc(var(--border-radius) / 2);font-size:13px;font-weight:500}.picker-footer{margin-bottom:12px}.submit-btn{width:100%;background-color:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-size:15px;font-weight:600;transition:all .2s ease}.submit-btn:hover:not(:disabled){opacity:.9;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.calendar-type{text-align:center;color:var(--text-color);opacity:.6;font-size:11px}.hijri-date-picker[dir=rtl]{direction:rtl}.hijri-date-picker[dir=rtl] .picker-header{flex-direction:row-reverse}.hijri-date-picker[dir=rtl] .todays-date{justify-content:flex-start}@media (max-width: 480px){.hijri-date-picker{padding:16px;max-width:100%}.calendar-controls{flex-direction:column}.control-group{width:100%}.navigation-buttons{width:100%;justify-content:space-between}.weekday{font-size:11px;padding:6px 2px}.day-cell{font-size:13px}}@media (prefers-color-scheme: dark){.hijri-date-picker{--background-color: #1f2937;--text-color: #f9fafb;--border-color: #374151;--hover-color: #374151}}.time-picker{margin-top:10px;margin-bottom:20px;padding:16px;background:linear-gradient(135deg,var(--hover-color) 0%,transparent 100%);border-radius:var(--border-radius);border:1px solid var(--border-color);box-shadow:inset 0 2px 4px #0000000d}.time-picker-label{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text-color);opacity:.9;text-align:center;text-transform:uppercase;letter-spacing:.5px}.time-inputs{display:flex;align-items:center;justify-content:center;gap:12px}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:6px}.time-btn{background-color:var(--primary-color);color:#fff;border:none;width:36px;height:28px;border-radius:calc(var(--border-radius) / 3);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-user-select:none;user-select:none}.time-btn:hover{filter:brightness(1.1);transform:scale(1.05)}.time-btn:active{transform:scale(.95)}.time-input{width:60px;padding:10px 4px;text-align:center;border:2px solid var(--border-color);border-radius:calc(var(--border-radius) / 2);background-color:var(--background-color);color:var(--text-color);font-size:20px;font-weight:700;transition:all .2s ease;box-shadow:0 2px 4px #0000000d}.time-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px #4f46e526}.time-input::-webkit-inner-spin-button,.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.time-separator{font-size:28px;font-weight:700;color:var(--text-color);opacity:.4;padding-bottom:4px}.ampm-toggle{display:flex;flex-direction:column;gap:6px;margin-left:12px}.ampm-btn{background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);padding:8px 14px;border-radius:calc(var(--border-radius) / 3);cursor:pointer;font-size:11px;font-weight:700;transition:all .2s ease;box-shadow:0 2px 4px #0000000d}.ampm-btn.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 4px 6px #00000026}.ampm-btn:hover:not(.active){background-color:var(--hover-color);border-color:var(--primary-color)}.selected-date-info{display:flex;flex-direction:column;align-items:center;gap:2px}.selected-item .time-text{font-size:11px;opacity:.85;font-weight:500;background-color:#fff3;padding:2px 8px;border-radius:10px;margin-top:2px}\n"] }]
+        }], propDecorators: { canChangeMode: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], futureValidation: [{
+                type: Input
+            }], futureYearsLimit: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], showConfirmButton: [{
+                type: Input
+            }], initialSelectedDate: [{
+                type: Input
+            }], initialSelectedDates: [{
+                type: Input
+            }], submitTextButton: [{
+                type: Input
+            }], todaysDateText: [{
+                type: Input
+            }], ummAlQuraDateText: [{
+                type: Input
+            }], yearSelectLabel: [{
+                type: Input
+            }], monthSelectLabel: [{
+                type: Input
+            }], todaysDateSection: [{
+                type: Input
+            }], markToday: [{
+                type: Input
+            }], disableYearPicker: [{
+                type: Input
+            }], disableMonthPicker: [{
+                type: Input
+            }], disableDayPicker: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], enableTime: [{
+                type: Input
+            }], timeFormat: [{
+                type: Input
+            }], minuteStep: [{
+                type: Input
+            }], enableSeconds: [{
+                type: Input
+            }], defaultTime: [{
+                type: Input
+            }], dateSelected: [{
+                type: Output
+            }], modeChanged: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GREGORIAN_MONTHS_AR, GREGORIAN_MONTHS_EN, HIJRI_MONTHS_AR, HIJRI_MONTHS_EN, HijriDatePickerComponent, WEEKDAY_NAMES_AR, WEEKDAY_NAMES_EN };
+//# sourceMappingURL=hijri-date-time-picker.mjs.map