hijri-date-time-picker 1.0.2 → 1.0.31

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

@@ -1,634 +0,0 @@
-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