angular-hijri-gregorian-date-time-picker 1.5.7 → 1.5.8

package/README.md

@@ -59,6 +59,7 @@ However, the Gregorian calendar is the calendar used in most of the world, and i
 - Converting dates when changing type of calendar.
 - Ability to specify min and max value for **Gregorian** and **Hijri**.
 - Ability to make it required or readonly.
+- **Customizable date display format** (DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, etc.)
 - Very easy to customize with **beautiful custom select dropdowns**.
 - Can select **Single**, **Multiple** dates, or **Date Ranges**.
 - **Time picker** with 12-hour/24-hour format support.
@@ -110,6 +111,7 @@ Use the `hijri-gregorian-datetime-input` component for a complete input field wi
   [enableTime]="true"
   [selectionMode]="'single'"
   [placeholder]="'Select date and time'"
+  [dateFormat]="'DD/MM/YYYY'"
   [minDate]="minDate"
   [maxDate]="maxDate"
   [useMeridian]="true"
@@ -118,6 +120,21 @@ Use the `hijri-gregorian-datetime-input` component for a complete input field wi
 ></hijri-gregorian-datetime-input>
 ```
 
+**Date Format Examples:**
+```html
+<!-- European format: 19/12/2024 -->
+<hijri-gregorian-datetime-input dateFormat="DD/MM/YYYY"></hijri-gregorian-datetime-input>
+
+<!-- US format: 12/19/2024 -->
+<hijri-gregorian-datetime-input dateFormat="MM/DD/YYYY"></hijri-gregorian-datetime-input>
+
+<!-- ISO format: 2024-12-19 -->
+<hijri-gregorian-datetime-input dateFormat="YYYY-MM-DD"></hijri-gregorian-datetime-input>
+
+<!-- Year first: 1446/12/19 (useful for Hijri dates) -->
+<hijri-gregorian-datetime-input mode="ummAlQura" dateFormat="YYYY/MM/DD"></hijri-gregorian-datetime-input>
+```
+
 **Features:**
 - ✅ Form integration (works with `ngModel` and `formControlName`)
 - ✅ Click-outside to close
@@ -250,6 +267,7 @@ The component supports full translation of AM/PM labels for 12-hour format:
 | Property                           |  Type   |                    Default                    | Description                                                                                                      |
 | ---------------------------------- | :-----: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------- |
 | <b>`placeholder`</b>               | string  |        `Select date and time`                 | Placeholder text for the input field                                                                              |
+| <b>`dateFormat`</b>                | string  |                `DD/MM/YYYY`                   | Display format for dates. Supported: `DD/MM/YYYY`, `MM/DD/YYYY`, `YYYY/MM/DD`, `YYYY-MM-DD`, etc.               |
 | <b>`disabled`</b>                  | boolean |                    `false`                    | When `true` the input is disabled                                                                                 |
 | <b>`enableTime`</b>                | boolean |                    `false`                    | When `true` enables time picker in the dropdown calendar                                                          |
 | <b>`minDate`</b>                   | Date    |                    `null`                     | Minimum selectable date                                                                                           |
@@ -304,6 +322,7 @@ The component supports full translation of AM/PM labels for 12-hour format:
 | <b>`minDate`</b>                   | Date    |                    `null`                     | Minimum selectable date - dates before this will be disabled                                                      |
 | <b>`maxDate`</b>                   | Date    |                    `null`                     | Maximum selectable date - dates after this will be disabled                                                       |
 | <b>`useMeridian`</b>               | boolean |                    `true`                     | When `true` the time picker uses 12-hour format with AM/PM, if `false` uses 24-hour format                        |
+| <b>`dateDisplayFormat`</b>         | string  |                `DD/MM/YYYY`                   | Display format for dates in the calendar. Supported: `DD/MM/YYYY`, `MM/DD/YYYY`, `YYYY/MM/DD`, `YYYY-MM-DD`, etc. |
 | <b>`styles`</b>                    | object  |                     `{}`                      | Styles for the calendar look and feel                                                                            |
 | <b>`theme`</b>                     | string  |                     `Midnight Blue`           | Different skins and themes for the calendar('Ocean Breeze', 'Lavender Dreams', 'Sunset Glow', 'Midnight Blue', 'Forest Canopy', 'Rosewood Elegance', 'Icy Mint', 'Golden Sand', 'Steel Grey', 'Coral Reef'), and it has priority over styles
 

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

@@ -27409,6 +27409,42 @@ class DateUtilitiesService {
         const year = date.getFullYear();
         return `${day}/${month}/${year}`;
     }
+    /**
+     * Format date string according to specified format pattern
+     * Supported formats: 'DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'YYYY-MM-DD', 'DD-MM-YYYY', 'MM-DD-YYYY'
+     * @param dateStr - Date string in DD/MM/YYYY format
+     * @param format - Desired output format pattern
+     * @returns Formatted date string
+     */
+    formatDateString(dateStr, format = 'DD/MM/YYYY') {
+        if (!dateStr)
+            return '';
+        const parts = dateStr.split('/');
+        if (parts.length !== 3)
+            return dateStr;
+        const [day, month, year] = parts;
+        // Determine separator from format
+        const separator = format.includes('-') ? '-' : '/';
+        // Build date according to format pattern
+        const formatUpper = format.toUpperCase().replace(/[-/]/g, '/');
+        switch (formatUpper) {
+            case 'DD/MM/YYYY':
+                return `${day}${separator}${month}${separator}${year}`;
+            case 'MM/DD/YYYY':
+                return `${month}${separator}${day}${separator}${year}`;
+            case 'YYYY/MM/DD':
+                return `${year}${separator}${month}${separator}${day}`;
+            case 'YYYY/DD/MM':
+                return `${year}${separator}${day}${separator}${month}`;
+            case 'DD/YYYY/MM':
+                return `${day}${separator}${year}${separator}${month}`;
+            case 'MM/YYYY/DD':
+                return `${month}${separator}${year}${separator}${day}`;
+            default:
+                // Default to DD/MM/YYYY
+                return `${day}${separator}${month}${separator}${year}`;
+        }
+    }
     getDayShortHand(date) {
         return date.toLocaleString('en-US', { weekday: 'short' });
     }
@@ -27975,6 +28011,9 @@ class HijriGregorianDatepickerComponent {
         // BACKWARD COMPATIBILITY: Default to 'single' (existing behavior)
         // 'multiple' enables multi-date selection, 'range' enables range selection (start to end)
         this.selectionMode = 'single';
+        // Date display format for input fields
+        // Supported formats: 'DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'YYYY-MM-DD', 'DD-MM-YYYY', 'MM-DD-YYYY'
+        this.dateDisplayFormat = 'DD/MM/YYYY';
         /// Outputs
         this.onSubmit = new EventEmitter();
         this.onDaySelect = new EventEmitter();
@@ -28995,12 +29034,22 @@ class HijriGregorianDatepickerComponent {
             });
         });
     }
+    /**
+     * Format a date string according to the dateDisplayFormat
+     * @param dateStr - Date string in DD/MM/YYYY format
+     * @returns Formatted date string
+     */
+    formatDisplayDate(dateStr) {
+        if (!dateStr)
+            return '';
+        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" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.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        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(todaysDate.ummAlQura, \"ar\")\n            : todaysDate.ummAlQura\n        }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(todaysDate.gregorian, \"ar\")\n            : todaysDate.gregorian\n        }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              '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              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.gD?.split(\"/\")[0] | number\n                  )\n                : (day?.gD?.split(\"/\")[0] | number)\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.uD?.split(\"/\")[0] | number\n                  )\n                : (day?.uD?.split(\"/\")[0] | number)\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [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;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly}.calendar-layout .day{display:inline-flex;width:13%;height:5.5vh;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;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" }, 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        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(formatDisplayDate(todaysDate.ummAlQura), \"ar\")\n            : formatDisplayDate(todaysDate.ummAlQura)\n        }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(formatDisplayDate(todaysDate.gregorian), \"ar\")\n            : formatDisplayDate(todaysDate.gregorian)\n        }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              '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              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.gD?.split(\"/\")[0] | number\n                  )\n                : (day?.gD?.split(\"/\")[0] | number)\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.uD?.split(\"/\")[0] | number\n                  )\n                : (day?.uD?.split(\"/\")[0] | number)\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [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;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        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(todaysDate.ummAlQura, \"ar\")\n            : todaysDate.ummAlQura\n        }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(todaysDate.gregorian, \"ar\")\n            : todaysDate.gregorian\n        }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              '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              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.gD?.split(\"/\")[0] | number\n                  )\n                : (day?.gD?.split(\"/\")[0] | number)\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.uD?.split(\"/\")[0] | number\n                  )\n                : (day?.uD?.split(\"/\")[0] | number)\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [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;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly}.calendar-layout .day{display:inline-flex;width:13%;height:5.5vh;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;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        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(formatDisplayDate(todaysDate.ummAlQura), \"ar\")\n            : formatDisplayDate(todaysDate.ummAlQura)\n        }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(formatDisplayDate(todaysDate.gregorian), \"ar\")\n            : formatDisplayDate(todaysDate.gregorian)\n        }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              '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              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.gD?.split(\"/\")[0] | number\n                  )\n                : (day?.gD?.split(\"/\")[0] | number)\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.uD?.split(\"/\")[0] | number\n                  )\n                : (day?.uD?.split(\"/\")[0] | number)\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [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;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: [{
@@ -29069,6 +29118,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], selectionMode: [{
                 type: Input
+            }], dateDisplayFormat: [{
+                type: Input
             }], onSubmit: [{
                 type: Output
             }], onDaySelect: [{
@@ -29099,7 +29150,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * - Accessibility support (keyboard)
  */
 class HijriGregorianDatetimeInputComponent {
-    constructor() {
+    // ============================================================
+    // CONSTRUCTOR
+    // ============================================================
+    constructor(dateUtilitiesService) {
+        this.dateUtilitiesService = dateUtilitiesService;
         // ============================================================
         // CONFIGURATION INPUTS
         // ============================================================
@@ -29318,6 +29373,10 @@ class HijriGregorianDatetimeInputComponent {
      * Handle date selection from calendar (Confirm button or day click)
      */
     onCalendarSubmit(event) {
+        // Update currentMode from calendar before formatting
+        if (this.calendarComponent) {
+            this.currentMode = this.calendarComponent.mode;
+        }
         this.currentValue = event;
         this.updateDisplayValue(event);
         this.onChange(event);
@@ -29330,6 +29389,10 @@ class HijriGregorianDatetimeInputComponent {
      * When time picker is enabled, emit value but keep dropdown open
      */
     onDaySelect(event) {
+        // Update currentMode from calendar before formatting
+        if (this.calendarComponent) {
+            this.currentMode = this.calendarComponent.mode;
+        }
         // Update current value
         this.currentValue = event;
         this.updateDisplayValue(event);
@@ -29442,12 +29505,14 @@ class HijriGregorianDatetimeInputComponent {
      */
     formatDayInfo(dayInfo) {
         let result = '';
-        // Use Gregorian date by default (you can make this configurable)
-        if (this.mode === 'greg') {
-            result = dayInfo.gD; // Already in DD/MM/YYYY format
+        // Use currentMode instead of mode to respect the active calendar mode
+        if (this.currentMode === 'greg') {
+            // Use the dateFormat property to format the display
+            result = this.dateUtilitiesService.formatDateString(dayInfo.gD, this.dateFormat);
         }
         else {
-            result = dayInfo.uD; // Hijri date
+            // For Hijri dates, also apply the format
+            result = this.dateUtilitiesService.formatDateString(dayInfo.uD, this.dateFormat);
         }
         // Append time if available
         if (dayInfo.time && this.enableTime) {
@@ -29490,7 +29555,9 @@ class HijriGregorianDatetimeInputComponent {
             return this.initialDate;
         }
         // If currentValue is a single DayInfo, create a Date object with time
-        if (this.currentValue && !Array.isArray(this.currentValue) && !this.currentValue.start) {
+        if (this.currentValue &&
+            !Array.isArray(this.currentValue) &&
+            !this.currentValue.start) {
             if (this.enableTime && this.currentValue.time) {
                 return this.createDateFromDayInfo(this.currentValue);
             }
@@ -29570,14 +29637,14 @@ class HijriGregorianDatetimeInputComponent {
         }
         return date;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatetimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatetimeInputComponent, deps: [{ token: DateUtilitiesService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriGregorianDatetimeInputComponent, isStandalone: false, selector: "hijri-gregorian-datetime-input", inputs: { placeholder: "placeholder", dateFormat: "dateFormat", timeFormat: "timeFormat", disabled: "disabled", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", mode: "mode", locale: "locale", dir: "dir", showConfirmButton: "showConfirmButton", submitTextButton: "submitTextButton", theme: "theme", futureValidation: "futureValidation", markToday: "markToday", todaysDateSection: "todaysDateSection", useMeridian: "useMeridian", selectionMode: "selectionMode", inputClass: "inputClass", dropdownClass: "dropdownClass", styles: "styles", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", amLabel: "amLabel", pmLabel: "pmLabel", canChangeMode: "canChangeMode", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", futureValidationMessage: "futureValidationMessage", yearSelectLabel: "yearSelectLabel", monthSelectLabel: "monthSelectLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd" }, outputs: { dateSelected: "dateSelected", dropdownOpened: "dropdownOpened", dropdownClosed: "dropdownClosed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($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"], outputs: ["onSubmit", "onDaySelect", "onMonthChange", "onYearChange"] }] }); }
+        ], 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      >\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatetimeInputComponent, decorators: [{
             type: Component,
@@ -29587,8 +29654,8 @@ 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        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($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"] }]
-        }], propDecorators: { placeholder: [{
+                    ], 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      >\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: [{
                 type: Input