angular-hijri-gregorian-date-time-picker 1.6.1 → 1.6.3

package/fesm2022/angular-hijri-gregorian-date-time-picker.mjs

@@ -27484,15 +27484,33 @@ class DateUtilitiesService {
         }
         return daysInMonth;
     }
+    /**
+     * Convert date between Gregorian and Hijri calendars
+     * Accepts any common date format and automatically normalizes it
+     * @param dateStr - Input date string in any common format
+     * @param isGregorian - True if input is Gregorian, false if Hijri (optional - auto-detected if not provided)
+     * @returns DayInfo object with both Gregorian and Hijri dates, or null if invalid
+     */
     convertDate(dateStr, isGregorian) {
         if (!dateStr)
             return null;
-        if (isGregorian) {
-            // Preprocess Gregorian date
-            const gregorianDate = this.parseDate(dateStr);
+        // Step 1: Normalize the input date to handle any format
+        const normalizedResult = this.normalizeDate(dateStr);
+        if (!normalizedResult)
+            return null;
+        const { normalized, isGregorian: detectedIsGregorian } = normalizedResult;
+        // Use provided isGregorian flag, or fall back to auto-detected value
+        const isGregorianDate = isGregorian !== undefined ? isGregorian : detectedIsGregorian;
+        if (isGregorianDate) {
+            // Process Gregorian date (normalized format: YYYY/MM/DD)
+            // Convert to DD/MM/YYYY for parseDate compatibility
+            const [year, month, day] = normalized.split('/');
+            const ddmmyyyy = `${day}/${month}/${year}`;
+            const gregorianDate = this.parseDate(ddmmyyyy);
             if (!gregorianDate)
                 return null;
             const formattedDate = this.formatDate(gregorianDate);
+            // Search through calendar data to find matching Gregorian date
             for (const yearKey in this.calendarData) {
                 for (const monthKey in this.calendarData[yearKey]) {
                     const monthData = this.calendarData[yearKey][monthKey];
@@ -27506,9 +27524,11 @@ class DateUtilitiesService {
             }
         }
         else {
-            const [day, month, year] = dateStr.split('/').map(Number);
+            // Process Hijri date (normalized format: DD/MM/YYYY)
+            const [day, month, year] = normalized.split('/').map(Number);
             if (isNaN(day) || isNaN(month) || isNaN(year))
                 return null;
+            // Search through calendar data to find matching Hijri date
             for (const yearKey in this.calendarData) {
                 for (const monthKey in this.calendarData[yearKey]) {
                     const monthData = this.calendarData[yearKey][monthKey];
@@ -27679,14 +27699,143 @@ class DateUtilitiesService {
             return d.charCodeAt(0) - 1632;
         });
     }
-    ///
+    /**
+     * Normalize date string to a consistent format with automatic detection
+     * Handles any common date format and returns standardized output
+     * @param dateStr - Input date string in any common format
+     * @returns Object with normalized date string and format type, or null if invalid
+     */
+    normalizeDate(dateStr) {
+        if (!dateStr || typeof dateStr !== 'string') {
+            return null;
+        }
+        const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
+        const englishNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        // Step 1: Convert Arabic-Indic numerals to English numerals
+        let normalized = dateStr.trim()
+            .split('')
+            .map((char) => {
+            const index = arabicNumbers.indexOf(char);
+            return index > -1 ? englishNumbers[index] : char;
+        })
+            .join('');
+        // Step 2: Replace all hyphens with forward slashes for consistency
+        normalized = normalized.replace(/-/g, '/');
+        // Step 3: Split by separator and validate
+        const parts = normalized.split('/').filter(part => part.length > 0);
+        if (parts.length !== 3) {
+            return null; // Invalid: must have exactly 3 parts
+        }
+        // Validate that all parts are numeric
+        if (!parts.every(part => /^\d+$/.test(part))) {
+            return null; // Invalid: all parts must be numeric
+        }
+        let year, month, day;
+        let isGregorian = false;
+        // Step 4: Smart detection - identify year by finding 4-digit number
+        const yearIndex = parts.findIndex(part => part.length === 4);
+        if (yearIndex === -1) {
+            // No 4-digit part found - try 2-digit year (ambiguous, default to Hijri DD/MM/YY)
+            if (parts.every(part => part.length <= 2)) {
+                // Assume DD/MM/YY format (Hijri)
+                day = parts[0].padStart(2, '0');
+                month = parts[1].padStart(2, '0');
+                // Convert 2-digit year to 4-digit (assume 20xx for years 00-99)
+                const yearNum = parseInt(parts[2], 10);
+                year = yearNum < 100 ? `20${parts[2].padStart(2, '0')}` : parts[2].padStart(4, '0');
+                isGregorian = false;
+            }
+            else {
+                return null; // Invalid: ambiguous format
+            }
+        }
+        else if (yearIndex === 0) {
+            // Format: YYYY/MM/DD or YYYY/DD/MM (could be Gregorian or Hijri)
+            year = parts[0].padStart(4, '0');
+            month = parts[1].padStart(2, '0');
+            day = parts[2].padStart(2, '0');
+            // Determine if Gregorian or Hijri based on year value
+            const yearNum = parseInt(year, 10);
+            // Hijri years typically 1300-1500, Gregorian years typically > 1800
+            isGregorian = yearNum > 1800;
+            // Smart validation: if month > 12, swap day and month
+            const monthNum = parseInt(month, 10);
+            const dayNum = parseInt(day, 10);
+            if (monthNum > 12 && dayNum <= 12) {
+                [month, day] = [day, month];
+            }
+        }
+        else if (yearIndex === 2) {
+            // Format: DD/MM/YYYY or MM/DD/YYYY (could be either)
+            year = parts[2].padStart(4, '0');
+            const first = parts[0].padStart(2, '0');
+            const second = parts[1].padStart(2, '0');
+            // Smart detection: determine if it's DD/MM or MM/DD
+            const firstNum = parseInt(first, 10);
+            const secondNum = parseInt(second, 10);
+            if (firstNum > 12) {
+                // First part > 12, must be day
+                day = first;
+                month = second;
+            }
+            else if (secondNum > 12) {
+                // Second part > 12, must be day (so first is month)
+                month = first;
+                day = second;
+            }
+            else {
+                // Ambiguous (both <= 12) - default to DD/MM/YYYY format
+                day = first;
+                month = second;
+            }
+            // Determine if Gregorian or Hijri based on year value
+            const yearNum = parseInt(year, 10);
+            // Gregorian years typically > 1900, Hijri years typically 1300-1500
+            isGregorian = yearNum > 1800;
+        }
+        else {
+            // Middle position (rare, e.g., DD/YYYY/MM or MM/YYYY/DD)
+            return null; // Unsupported format
+        }
+        // Step 5: Validate extracted values
+        const yearNum = parseInt(year, 10);
+        const monthNum = parseInt(month, 10);
+        const dayNum = parseInt(day, 10);
+        if (yearNum < 1 || yearNum > 9999 ||
+            monthNum < 1 || monthNum > 12 ||
+            dayNum < 1 || dayNum > 31) {
+            return null; // Invalid date values
+        }
+        // Step 6: Return normalized date in appropriate format
+        // Gregorian: YYYY/MM/DD
+        // Hijri: DD/MM/YYYY
+        const normalizedDate = isGregorian
+            ? `${year}/${month}/${day}`
+            : `${day}/${month}/${year}`;
+        return {
+            normalized: normalizedDate,
+            isGregorian: isGregorian
+        };
+    }
+    /**
+     * Convert date numerals between Arabic-Indic and Western Arabic
+     * Accepts any common date format and automatically normalizes before conversion
+     * @param date - Input date string in any common format
+     * @param targetLang - Target language: 'ar' for Arabic-Indic numerals, 'en' for Western Arabic
+     * @returns Date string with converted numerals in the detected format, or original string if invalid
+     */
     convertDateNumerals(date, targetLang) {
+        if (!date || typeof date !== 'string') {
+            return date;
+        }
         const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
         const englishNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        // Helper: Convert Western Arabic numerals to Arabic-Indic
         const toArabic = (value) => value
             .split('')
             .map((char) => (/\d/.test(char) ? arabicNumbers[+char] : char))
             .join('');
+        // Helper: Convert Arabic-Indic numerals to Western Arabic
         const toEnglish = (value) => value
             .split('')
             .map((char) => {
@@ -27694,13 +27843,21 @@ class DateUtilitiesService {
             return index > -1 ? englishNumbers[index] : char;
         })
             .join('');
+        // Step 1: Normalize the input date to handle any format
+        const normalizedResult = this.normalizeDate(date);
+        if (!normalizedResult) {
+            // If normalization fails, attempt basic conversion on original string
+            return targetLang === 'ar' ? toArabic(date) : toEnglish(date);
+        }
+        const { normalized } = normalizedResult;
+        // Step 2: Apply numeral conversion based on target language
         if (targetLang === 'ar') {
-            const [day, month, year] = date.split('/');
-            return `${toArabic(year)}/${toArabic(month)}/${toArabic(day)}`;
+            // Convert to Arabic-Indic numerals
+            return toArabic(normalized);
         }
         else {
-            const [year, month, day] = date.split('/');
-            return `${toEnglish(day)}/${toEnglish(month)}/${toEnglish(year)}`;
+            // Convert to English numerals (already normalized to English)
+            return normalized;
         }
     }
     /**
@@ -29073,11 +29230,11 @@ class HijriGregorianDatepickerComponent {
         return this._dateUtilsService.formatDateString(dateStr, this.dateDisplayFormat);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: DateUtilitiesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriGregorianDatepickerComponent, isStandalone: false, selector: "hijri-gregorian-datepicker", inputs: { markToday: "markToday", canChangeMode: "canChangeMode", todaysDateSection: "todaysDateSection", futureValidation: "futureValidation", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", isRequired: "isRequired", showConfirmButton: "showConfirmButton", futureValidationMessage: "futureValidationMessage", mode: "mode", dir: "dir", locale: "locale", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", monthSelectLabel: "monthSelectLabel", yearSelectLabel: "yearSelectLabel", amLabel: "amLabel", pmLabel: "pmLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", theme: "theme", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", styles: "styles", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd", useMeridian: "useMeridian", selectionMode: "selectionMode", dateDisplayFormat: "dateDisplayFormat" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onModeChange: "onModeChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day)\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                  ? styles.primaryColor + '33'\n                  : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{ day?.gD?.split(\"/\")[0] | number }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{ day?.uD?.split(\"/\")[0] | number }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c'\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.secondaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriGregorianDatepickerComponent, isStandalone: false, selector: "hijri-gregorian-datepicker", inputs: { markToday: "markToday", canChangeMode: "canChangeMode", todaysDateSection: "todaysDateSection", futureValidation: "futureValidation", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", isRequired: "isRequired", showConfirmButton: "showConfirmButton", futureValidationMessage: "futureValidationMessage", mode: "mode", dir: "dir", locale: "locale", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", monthSelectLabel: "monthSelectLabel", yearSelectLabel: "yearSelectLabel", amLabel: "amLabel", pmLabel: "pmLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", theme: "theme", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", styles: "styles", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd", useMeridian: "useMeridian", selectionMode: "selectionMode", dateDisplayFormat: "dateDisplayFormat" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onModeChange: "onModeChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor,\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor,\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day),\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                    ? styles.primaryColor + '33'\n                    : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer',\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              day?.gD?.split(\"/\")[0] | number\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              day?.uD?.split(\"/\")[0] | number\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c',\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.primaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius,\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'hijri-gregorian-datepicker', template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day)\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                  ? styles.primaryColor + '33'\n                  : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{ day?.gD?.split(\"/\")[0] | number }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{ day?.uD?.split(\"/\")[0] | number }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c'\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.secondaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"] }]
+            args: [{ standalone: false, selector: 'hijri-gregorian-datepicker', template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor,\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor,\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day),\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                    ? styles.primaryColor + '33'\n                    : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer',\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              day?.gD?.split(\"/\")[0] | number\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              day?.uD?.split(\"/\")[0] | number\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c',\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.primaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius,\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: DateUtilitiesService }], propDecorators: { markToday: [{
                 type: Input
             }], canChangeMode: [{
@@ -29706,7 +29863,7 @@ class HijriGregorianDatetimeInputComponent {
                 useExisting: forwardRef(() => HijriGregorianDatetimeInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: HijriGregorianDatepickerComponent, descendants: true }], ngImport: i0, template: "<!--\r\n  DateTime Input Component Template\r\n\r\n  Structure:\r\n  1. Input field (click to open dropdown)\r\n  2. Dropdown container (positioned absolutely)\r\n  3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n  4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n  <!-- INPUT FIELD -->\r\n  <div class=\"input-container\">\r\n    <input\r\n      #inputElement\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [class]=\"'datetime-input ' + inputClass\"\r\n      [class.rtl-input]=\"dir === 'rtl'\"\r\n      [value]=\"displayValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      (click)=\"toggleDropdown()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      readonly\r\n      [attr.aria-expanded]=\"isDropdownOpen\"\r\n      [attr.aria-haspopup]=\"true\"\r\n      [attr.aria-label]=\"placeholder\"\r\n    />\r\n\r\n    <!-- Calendar Icon -->\r\n    <span\r\n      class=\"input-icon\"\r\n      [class.rtl-icon]=\"dir === 'rtl'\"\r\n      (click)=\"!disabled && toggleDropdown()\"\r\n      [class.disabled]=\"disabled\"\r\n    >\r\n      <svg\r\n        width=\"20\"\r\n        height=\"20\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n      </svg>\r\n    </span>\r\n\r\n    <!-- Clear Button (only if value exists) -->\r\n    <button\r\n      *ngIf=\"displayValue && !disabled\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      [class.rtl-clear]=\"dir === 'rtl'\"\r\n      (click)=\"clearValue(); $event.stopPropagation()\"\r\n      aria-label=\"Clear value\"\r\n    >\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- DROPDOWN PANEL -->\r\n  <div\r\n    #dropdownContainer\r\n    class=\"dropdown-panel\"\r\n    [class]=\"'dropdown-panel ' + dropdownClass\"\r\n    [class.open]=\"isDropdownOpen\"\r\n    [class.closed]=\"!isDropdownOpen\"\r\n    *ngIf=\"isDropdownOpen\"\r\n  >\r\n    <!-- Calendar Component (reuses existing component) -->\r\n    <div class=\"calendar-wrapper\">\r\n      <hijri-gregorian-datepicker\r\n        [mode]=\"currentMode\"\r\n        [locale]=\"locale\"\r\n        [dir]=\"dir\"\r\n        [enableTime]=\"enableTime\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [initialDate]=\"getInitialDateForCalendar()\"\r\n        [initialRangeStart]=\"getInitialRangeStart()\"\r\n        [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n        [theme]=\"theme\"\r\n        [styles]=\"styles\"\r\n        [futureValidation]=\"futureValidation\"\r\n        [markToday]=\"markToday\"\r\n        [todaysDateSection]=\"todaysDateSection\"\r\n        [todaysDateText]=\"todaysDateText\"\r\n        [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n        [amLabel]=\"amLabel\"\r\n        [pmLabel]=\"pmLabel\"\r\n        [useMeridian]=\"useMeridian\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [showConfirmButton]=\"false\"\r\n        [submitTextButton]=\"submitTextButton\"\r\n        [canChangeMode]=\"canChangeMode\"\r\n        [disableYearPicker]=\"disableYearPicker\"\r\n        [disableMonthPicker]=\"disableMonthPicker\"\r\n        [disableDayPicker]=\"disableDayPicker\"\r\n        [futureValidationMessage]=\"futureValidationMessage\"\r\n        [yearSelectLabel]=\"yearSelectLabel\"\r\n        [monthSelectLabel]=\"monthSelectLabel\"\r\n        [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n        [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n        [pastYearsLimit]=\"pastYearsLimit\"\r\n        [futureYearsLimit]=\"futureYearsLimit\"\r\n        [dateDisplayFormat]=\"dateFormat\"\r\n        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($event))\"\r\n        (onModeChange)=\"onModeChangeHandler($event)\"\r\n      >\r\n      </hijri-gregorian-datepicker>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: ["markToday", "canChangeMode", "todaysDateSection", "futureValidation", "disableYearPicker", "disableMonthPicker", "disableDayPicker", "isRequired", "showConfirmButton", "futureValidationMessage", "mode", "dir", "locale", "submitTextButton", "todaysDateText", "ummAlQuraDateText", "monthSelectLabel", "yearSelectLabel", "amLabel", "pmLabel", "futureValidationMessageEn", "futureValidationMessageAr", "theme", "pastYearsLimit", "futureYearsLimit", "styles", "enableTime", "minDate", "maxDate", "initialDate", "initialRangeStart", "initialRangeEnd", "useMeridian", "selectionMode", "dateDisplayFormat"], outputs: ["onSubmit", "onDaySelect", "onMonthChange", "onYearChange", "onModeChange"] }] }); }
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: HijriGregorianDatepickerComponent, descendants: true }], ngImport: i0, template: "<!--\r\n  DateTime Input Component Template\r\n\r\n  Structure:\r\n  1. Input field (click to open dropdown)\r\n  2. Dropdown container (positioned absolutely)\r\n  3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n  4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n  <!-- INPUT FIELD -->\r\n  <div class=\"input-container\">\r\n    <input\r\n      #inputElement\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [class]=\"'datetime-input ' + inputClass\"\r\n      [class.rtl-input]=\"dir === 'rtl'\"\r\n      [value]=\"displayValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      (click)=\"toggleDropdown()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      readonly\r\n      [attr.aria-expanded]=\"isDropdownOpen\"\r\n      [attr.aria-haspopup]=\"true\"\r\n      [attr.aria-label]=\"placeholder\"\r\n    />\r\n\r\n    <!-- Calendar Icon -->\r\n    <span\r\n      class=\"input-icon\"\r\n      [class.rtl-icon]=\"dir === 'rtl'\"\r\n      (click)=\"!disabled && toggleDropdown()\"\r\n      [class.disabled]=\"disabled\"\r\n    >\r\n      <svg\r\n        width=\"20\"\r\n        height=\"20\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n      </svg>\r\n    </span>\r\n\r\n    <!-- Clear Button (only if value exists) -->\r\n    <button\r\n      *ngIf=\"displayValue && !disabled\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      [class.rtl-clear]=\"dir === 'rtl'\"\r\n      (click)=\"clearValue(); $event.stopPropagation()\"\r\n      aria-label=\"Clear value\"\r\n    >\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- DROPDOWN PANEL -->\r\n  <div\r\n    #dropdownContainer\r\n    class=\"dropdown-panel\"\r\n    [class]=\"'dropdown-panel ' + dropdownClass\"\r\n    [class.open]=\"isDropdownOpen\"\r\n    [class.closed]=\"!isDropdownOpen\"\r\n    *ngIf=\"isDropdownOpen\"\r\n  >\r\n    <!-- Calendar Component (reuses existing component) -->\r\n    <div class=\"calendar-wrapper\">\r\n      <hijri-gregorian-datepicker\r\n        [mode]=\"currentMode\"\r\n        [locale]=\"locale\"\r\n        [dir]=\"dir\"\r\n        [enableTime]=\"enableTime\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [initialDate]=\"getInitialDateForCalendar()\"\r\n        [initialRangeStart]=\"getInitialRangeStart()\"\r\n        [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n        [theme]=\"theme\"\r\n        [styles]=\"styles\"\r\n        [futureValidation]=\"futureValidation\"\r\n        [markToday]=\"markToday\"\r\n        [todaysDateSection]=\"todaysDateSection\"\r\n        [todaysDateText]=\"todaysDateText\"\r\n        [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n        [amLabel]=\"amLabel\"\r\n        [pmLabel]=\"pmLabel\"\r\n        [useMeridian]=\"useMeridian\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [showConfirmButton]=\"showConfirmButton\"\r\n        [submitTextButton]=\"submitTextButton\"\r\n        [canChangeMode]=\"canChangeMode\"\r\n        [disableYearPicker]=\"disableYearPicker\"\r\n        [disableMonthPicker]=\"disableMonthPicker\"\r\n        [disableDayPicker]=\"disableDayPicker\"\r\n        [futureValidationMessage]=\"futureValidationMessage\"\r\n        [yearSelectLabel]=\"yearSelectLabel\"\r\n        [monthSelectLabel]=\"monthSelectLabel\"\r\n        [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n        [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n        [pastYearsLimit]=\"pastYearsLimit\"\r\n        [futureYearsLimit]=\"futureYearsLimit\"\r\n        [dateDisplayFormat]=\"dateFormat\"\r\n        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($event))\"\r\n        (onModeChange)=\"onModeChangeHandler($event)\"\r\n      >\r\n      </hijri-gregorian-datepicker>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: ["markToday", "canChangeMode", "todaysDateSection", "futureValidation", "disableYearPicker", "disableMonthPicker", "disableDayPicker", "isRequired", "showConfirmButton", "futureValidationMessage", "mode", "dir", "locale", "submitTextButton", "todaysDateText", "ummAlQuraDateText", "monthSelectLabel", "yearSelectLabel", "amLabel", "pmLabel", "futureValidationMessageEn", "futureValidationMessageAr", "theme", "pastYearsLimit", "futureYearsLimit", "styles", "enableTime", "minDate", "maxDate", "initialDate", "initialRangeStart", "initialRangeEnd", "useMeridian", "selectionMode", "dateDisplayFormat"], outputs: ["onSubmit", "onDaySelect", "onMonthChange", "onYearChange", "onModeChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatetimeInputComponent, decorators: [{
             type: Component,
@@ -29716,7 +29873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => HijriGregorianDatetimeInputComponent),
                             multi: true,
                         },
-                    ], template: "<!--\r\n  DateTime Input Component Template\r\n\r\n  Structure:\r\n  1. Input field (click to open dropdown)\r\n  2. Dropdown container (positioned absolutely)\r\n  3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n  4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n  <!-- INPUT FIELD -->\r\n  <div class=\"input-container\">\r\n    <input\r\n      #inputElement\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [class]=\"'datetime-input ' + inputClass\"\r\n      [class.rtl-input]=\"dir === 'rtl'\"\r\n      [value]=\"displayValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      (click)=\"toggleDropdown()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      readonly\r\n      [attr.aria-expanded]=\"isDropdownOpen\"\r\n      [attr.aria-haspopup]=\"true\"\r\n      [attr.aria-label]=\"placeholder\"\r\n    />\r\n\r\n    <!-- Calendar Icon -->\r\n    <span\r\n      class=\"input-icon\"\r\n      [class.rtl-icon]=\"dir === 'rtl'\"\r\n      (click)=\"!disabled && toggleDropdown()\"\r\n      [class.disabled]=\"disabled\"\r\n    >\r\n      <svg\r\n        width=\"20\"\r\n        height=\"20\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n      </svg>\r\n    </span>\r\n\r\n    <!-- Clear Button (only if value exists) -->\r\n    <button\r\n      *ngIf=\"displayValue && !disabled\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      [class.rtl-clear]=\"dir === 'rtl'\"\r\n      (click)=\"clearValue(); $event.stopPropagation()\"\r\n      aria-label=\"Clear value\"\r\n    >\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- DROPDOWN PANEL -->\r\n  <div\r\n    #dropdownContainer\r\n    class=\"dropdown-panel\"\r\n    [class]=\"'dropdown-panel ' + dropdownClass\"\r\n    [class.open]=\"isDropdownOpen\"\r\n    [class.closed]=\"!isDropdownOpen\"\r\n    *ngIf=\"isDropdownOpen\"\r\n  >\r\n    <!-- Calendar Component (reuses existing component) -->\r\n    <div class=\"calendar-wrapper\">\r\n      <hijri-gregorian-datepicker\r\n        [mode]=\"currentMode\"\r\n        [locale]=\"locale\"\r\n        [dir]=\"dir\"\r\n        [enableTime]=\"enableTime\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [initialDate]=\"getInitialDateForCalendar()\"\r\n        [initialRangeStart]=\"getInitialRangeStart()\"\r\n        [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n        [theme]=\"theme\"\r\n        [styles]=\"styles\"\r\n        [futureValidation]=\"futureValidation\"\r\n        [markToday]=\"markToday\"\r\n        [todaysDateSection]=\"todaysDateSection\"\r\n        [todaysDateText]=\"todaysDateText\"\r\n        [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n        [amLabel]=\"amLabel\"\r\n        [pmLabel]=\"pmLabel\"\r\n        [useMeridian]=\"useMeridian\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [showConfirmButton]=\"false\"\r\n        [submitTextButton]=\"submitTextButton\"\r\n        [canChangeMode]=\"canChangeMode\"\r\n        [disableYearPicker]=\"disableYearPicker\"\r\n        [disableMonthPicker]=\"disableMonthPicker\"\r\n        [disableDayPicker]=\"disableDayPicker\"\r\n        [futureValidationMessage]=\"futureValidationMessage\"\r\n        [yearSelectLabel]=\"yearSelectLabel\"\r\n        [monthSelectLabel]=\"monthSelectLabel\"\r\n        [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n        [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n        [pastYearsLimit]=\"pastYearsLimit\"\r\n        [futureYearsLimit]=\"futureYearsLimit\"\r\n        [dateDisplayFormat]=\"dateFormat\"\r\n        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($event))\"\r\n        (onModeChange)=\"onModeChangeHandler($event)\"\r\n      >\r\n      </hijri-gregorian-datepicker>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"] }]
+                    ], template: "<!--\r\n  DateTime Input Component Template\r\n\r\n  Structure:\r\n  1. Input field (click to open dropdown)\r\n  2. Dropdown container (positioned absolutely)\r\n  3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n  4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n  <!-- INPUT FIELD -->\r\n  <div class=\"input-container\">\r\n    <input\r\n      #inputElement\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [class]=\"'datetime-input ' + inputClass\"\r\n      [class.rtl-input]=\"dir === 'rtl'\"\r\n      [value]=\"displayValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      (click)=\"toggleDropdown()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      readonly\r\n      [attr.aria-expanded]=\"isDropdownOpen\"\r\n      [attr.aria-haspopup]=\"true\"\r\n      [attr.aria-label]=\"placeholder\"\r\n    />\r\n\r\n    <!-- Calendar Icon -->\r\n    <span\r\n      class=\"input-icon\"\r\n      [class.rtl-icon]=\"dir === 'rtl'\"\r\n      (click)=\"!disabled && toggleDropdown()\"\r\n      [class.disabled]=\"disabled\"\r\n    >\r\n      <svg\r\n        width=\"20\"\r\n        height=\"20\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n      </svg>\r\n    </span>\r\n\r\n    <!-- Clear Button (only if value exists) -->\r\n    <button\r\n      *ngIf=\"displayValue && !disabled\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      [class.rtl-clear]=\"dir === 'rtl'\"\r\n      (click)=\"clearValue(); $event.stopPropagation()\"\r\n      aria-label=\"Clear value\"\r\n    >\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- DROPDOWN PANEL -->\r\n  <div\r\n    #dropdownContainer\r\n    class=\"dropdown-panel\"\r\n    [class]=\"'dropdown-panel ' + dropdownClass\"\r\n    [class.open]=\"isDropdownOpen\"\r\n    [class.closed]=\"!isDropdownOpen\"\r\n    *ngIf=\"isDropdownOpen\"\r\n  >\r\n    <!-- Calendar Component (reuses existing component) -->\r\n    <div class=\"calendar-wrapper\">\r\n      <hijri-gregorian-datepicker\r\n        [mode]=\"currentMode\"\r\n        [locale]=\"locale\"\r\n        [dir]=\"dir\"\r\n        [enableTime]=\"enableTime\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [initialDate]=\"getInitialDateForCalendar()\"\r\n        [initialRangeStart]=\"getInitialRangeStart()\"\r\n        [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n        [theme]=\"theme\"\r\n        [styles]=\"styles\"\r\n        [futureValidation]=\"futureValidation\"\r\n        [markToday]=\"markToday\"\r\n        [todaysDateSection]=\"todaysDateSection\"\r\n        [todaysDateText]=\"todaysDateText\"\r\n        [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n        [amLabel]=\"amLabel\"\r\n        [pmLabel]=\"pmLabel\"\r\n        [useMeridian]=\"useMeridian\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [showConfirmButton]=\"showConfirmButton\"\r\n        [submitTextButton]=\"submitTextButton\"\r\n        [canChangeMode]=\"canChangeMode\"\r\n        [disableYearPicker]=\"disableYearPicker\"\r\n        [disableMonthPicker]=\"disableMonthPicker\"\r\n        [disableDayPicker]=\"disableDayPicker\"\r\n        [futureValidationMessage]=\"futureValidationMessage\"\r\n        [yearSelectLabel]=\"yearSelectLabel\"\r\n        [monthSelectLabel]=\"monthSelectLabel\"\r\n        [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n        [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n        [pastYearsLimit]=\"pastYearsLimit\"\r\n        [futureYearsLimit]=\"futureYearsLimit\"\r\n        [dateDisplayFormat]=\"dateFormat\"\r\n        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($event))\"\r\n        (onModeChange)=\"onModeChangeHandler($event)\"\r\n      >\r\n      </hijri-gregorian-datepicker>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"] }]
         }], ctorParameters: () => [{ type: DateUtilitiesService }], propDecorators: { placeholder: [{
                 type: Input
             }], dateFormat: [{