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

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

@@ -27469,7 +27469,9 @@ class DateUtilitiesService {
                 dN: this.getDayShortHand(currentGregorianDate),
                 uC: 0,
             });
+            // Increment date and normalize time to avoid DST issues
             currentGregorianDate.setDate(currentGregorianDate.getDate() + 1);
+            currentGregorianDate.setHours(0, 0, 0, 0); // Normalize to midnight
             currentUmmAlQuraDay += 1;
             if (currentUmmAlQuraDay > daysInCurrentUmmAlQuraMonth) {
                 currentUmmAlQuraDay = 1;
@@ -27510,7 +27512,20 @@ class DateUtilitiesService {
             if (!gregorianDate)
                 return null;
             const formattedDate = this.formatDate(gregorianDate);
-            // Search through calendar data to find matching Gregorian date
+            // Extract year and month for direct lookup (remove leading zeros from month)
+            const [, monthStr, yearStr] = formattedDate.split('/');
+            const monthKey = String(Number(monthStr)); // Remove leading zero: "04" -> "4"
+            // Try direct lookup first (much faster)
+            if (this.calendarData[yearStr] && this.calendarData[yearStr][monthKey]) {
+                const monthData = this.calendarData[yearStr][monthKey];
+                if (this.isDateInMonthRange(formattedDate, monthData.fD?.gD, monthData.lD?.gD)) {
+                    const daysInMonth = this.generateDates(monthData.fD, monthData.lD, monthData.fD?.uC);
+                    const dayMatch = daysInMonth.find((d) => d.gD === formattedDate);
+                    if (dayMatch)
+                        return dayMatch;
+                }
+            }
+            // Fallback: search all years and months if direct lookup fails
             for (const yearKey in this.calendarData) {
                 for (const monthKey in this.calendarData[yearKey]) {
                     const monthData = this.calendarData[yearKey][monthKey];
@@ -27557,7 +27572,9 @@ class DateUtilitiesService {
         return checkDate >= startDate && checkDate <= endDate;
     }
     getMonthData(inputDate, type) {
-        const [day, month, year] = inputDate?.split('/').map(Number);
+        if (!inputDate)
+            return null;
+        const [day, month, year] = inputDate.split('/').map(Number);
         let isGregorian;
         if (type == 'greg') {
             isGregorian = true;
@@ -28321,6 +28338,10 @@ class HijriGregorianDatepickerComponent {
                     ? this.todaysDate.gregorian
                     : this.todaysDate.ummAlQura;
         }
+        // Fallback to default date if referenceDate is invalid
+        if (!referenceDate || referenceDate.split('/').length !== 3) {
+            referenceDate = this.mode == 'greg' ? '01/01/2020' : '01/01/1446';
+        }
         if (this.mode == 'greg') {
             this.gregYear =
                 this.futureYearsLimit == 0
@@ -28381,7 +28402,8 @@ class HijriGregorianDatepickerComponent {
     /// Get todays(greg and umm al qura) date info
     getTodaysDateInfo() {
         this.todaysDate.gregorian = this._dateUtilsService.formatDate(new Date());
-        this.todaysDate.ummAlQura = this._dateUtilsService.convertDate(this.todaysDate.gregorian, true)?.uD;
+        const convertedDate = this._dateUtilsService.convertDate(this.todaysDate.gregorian, true);
+        this.todaysDate.ummAlQura = convertedDate?.uD || '01/01/1446'; // Fallback to a default Hijri date if conversion fails
         // Use initialDate if provided, otherwise use today's date
         let dateToNavigate;
         if (this.initialDate) {
@@ -28556,6 +28578,9 @@ class HijriGregorianDatepickerComponent {
     }
     /// Generate month weeks
     generateWeeksArray(daysArray) {
+        if (!daysArray || daysArray.length === 0) {
+            return [[]];
+        }
         const firstDayName = daysArray[0]?.dN;
         const startIndex = this.weekdaysEn.indexOf(firstDayName);
         const weeks = [[]];
@@ -29230,11 +29255,11 @@ class HijriGregorianDatepickerComponent {
         return this._dateUtilsService.formatDateString(dateStr, this.dateDisplayFormat);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: DateUtilitiesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriGregorianDatepickerComponent, isStandalone: false, selector: "hijri-gregorian-datepicker", inputs: { markToday: "markToday", canChangeMode: "canChangeMode", todaysDateSection: "todaysDateSection", futureValidation: "futureValidation", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", isRequired: "isRequired", showConfirmButton: "showConfirmButton", futureValidationMessage: "futureValidationMessage", mode: "mode", dir: "dir", locale: "locale", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", monthSelectLabel: "monthSelectLabel", yearSelectLabel: "yearSelectLabel", amLabel: "amLabel", pmLabel: "pmLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", theme: "theme", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", styles: "styles", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd", useMeridian: "useMeridian", selectionMode: "selectionMode", dateDisplayFormat: "dateDisplayFormat" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onModeChange: "onModeChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor,\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor,\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day),\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                    ? styles.primaryColor + '33'\n                    : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer',\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              day?.gD?.split(\"/\")[0] | number\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              day?.uD?.split(\"/\")[0] | number\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c',\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.primaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius,\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriGregorianDatepickerComponent, isStandalone: false, selector: "hijri-gregorian-datepicker", inputs: { markToday: "markToday", canChangeMode: "canChangeMode", todaysDateSection: "todaysDateSection", futureValidation: "futureValidation", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", isRequired: "isRequired", showConfirmButton: "showConfirmButton", futureValidationMessage: "futureValidationMessage", mode: "mode", dir: "dir", locale: "locale", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", monthSelectLabel: "monthSelectLabel", yearSelectLabel: "yearSelectLabel", amLabel: "amLabel", pmLabel: "pmLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", theme: "theme", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", styles: "styles", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd", useMeridian: "useMeridian", selectionMode: "selectionMode", dateDisplayFormat: "dateDisplayFormat" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onModeChange: "onModeChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor,\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor,\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day),\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                    ? styles.primaryColor + '33'\n                    : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer',\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              day?.gD?.split(\"/\")[0] | number\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              day?.uD?.split(\"/\")[0] | number\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c',\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.primaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius,\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:10px;padding-right:10px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'hijri-gregorian-datepicker', template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor,\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor,\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day),\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                    ? styles.primaryColor + '33'\n                    : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer',\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              day?.gD?.split(\"/\")[0] | number\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              day?.uD?.split(\"/\")[0] | number\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c',\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.primaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius,\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"] }]
+            args: [{ standalone: false, selector: 'hijri-gregorian-datepicker', template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor,\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl',\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius,\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily,\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius,\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor,\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day),\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                    ? styles.primaryColor + '33'\n                    : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer',\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              day?.gD?.split(\"/\")[0] | number\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              day?.uD?.split(\"/\")[0] | number\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c',\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333',\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c',\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff',\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666',\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.primaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius,\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:10px;padding-right:10px;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: [{
@@ -29863,7 +29888,7 @@ class HijriGregorianDatetimeInputComponent {
                 useExisting: forwardRef(() => HijriGregorianDatetimeInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: HijriGregorianDatepickerComponent, descendants: true }], ngImport: i0, template: "<!--\r\n  DateTime Input Component Template\r\n\r\n  Structure:\r\n  1. Input field (click to open dropdown)\r\n  2. Dropdown container (positioned absolutely)\r\n  3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n  4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n  <!-- INPUT FIELD -->\r\n  <div class=\"input-container\">\r\n    <input\r\n      #inputElement\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [class]=\"'datetime-input ' + inputClass\"\r\n      [class.rtl-input]=\"dir === 'rtl'\"\r\n      [value]=\"displayValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      (click)=\"toggleDropdown()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      readonly\r\n      [attr.aria-expanded]=\"isDropdownOpen\"\r\n      [attr.aria-haspopup]=\"true\"\r\n      [attr.aria-label]=\"placeholder\"\r\n    />\r\n\r\n    <!-- Calendar Icon -->\r\n    <span\r\n      class=\"input-icon\"\r\n      [class.rtl-icon]=\"dir === 'rtl'\"\r\n      (click)=\"!disabled && toggleDropdown()\"\r\n      [class.disabled]=\"disabled\"\r\n    >\r\n      <svg\r\n        width=\"20\"\r\n        height=\"20\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n      </svg>\r\n    </span>\r\n\r\n    <!-- Clear Button (only if value exists) -->\r\n    <button\r\n      *ngIf=\"displayValue && !disabled\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      [class.rtl-clear]=\"dir === 'rtl'\"\r\n      (click)=\"clearValue(); $event.stopPropagation()\"\r\n      aria-label=\"Clear value\"\r\n    >\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- DROPDOWN PANEL -->\r\n  <div\r\n    #dropdownContainer\r\n    class=\"dropdown-panel\"\r\n    [class]=\"'dropdown-panel ' + dropdownClass\"\r\n    [class.open]=\"isDropdownOpen\"\r\n    [class.closed]=\"!isDropdownOpen\"\r\n    *ngIf=\"isDropdownOpen\"\r\n  >\r\n    <!-- Calendar Component (reuses existing component) -->\r\n    <div class=\"calendar-wrapper\">\r\n      <hijri-gregorian-datepicker\r\n        [mode]=\"currentMode\"\r\n        [locale]=\"locale\"\r\n        [dir]=\"dir\"\r\n        [enableTime]=\"enableTime\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [initialDate]=\"getInitialDateForCalendar()\"\r\n        [initialRangeStart]=\"getInitialRangeStart()\"\r\n        [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n        [theme]=\"theme\"\r\n        [styles]=\"styles\"\r\n        [futureValidation]=\"futureValidation\"\r\n        [markToday]=\"markToday\"\r\n        [todaysDateSection]=\"todaysDateSection\"\r\n        [todaysDateText]=\"todaysDateText\"\r\n        [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n        [amLabel]=\"amLabel\"\r\n        [pmLabel]=\"pmLabel\"\r\n        [useMeridian]=\"useMeridian\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [showConfirmButton]=\"showConfirmButton\"\r\n        [submitTextButton]=\"submitTextButton\"\r\n        [canChangeMode]=\"canChangeMode\"\r\n        [disableYearPicker]=\"disableYearPicker\"\r\n        [disableMonthPicker]=\"disableMonthPicker\"\r\n        [disableDayPicker]=\"disableDayPicker\"\r\n        [futureValidationMessage]=\"futureValidationMessage\"\r\n        [yearSelectLabel]=\"yearSelectLabel\"\r\n        [monthSelectLabel]=\"monthSelectLabel\"\r\n        [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n        [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n        [pastYearsLimit]=\"pastYearsLimit\"\r\n        [futureYearsLimit]=\"futureYearsLimit\"\r\n        [dateDisplayFormat]=\"dateFormat\"\r\n        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($event))\"\r\n        (onModeChange)=\"onModeChangeHandler($event)\"\r\n      >\r\n      </hijri-gregorian-datepicker>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: ["markToday", "canChangeMode", "todaysDateSection", "futureValidation", "disableYearPicker", "disableMonthPicker", "disableDayPicker", "isRequired", "showConfirmButton", "futureValidationMessage", "mode", "dir", "locale", "submitTextButton", "todaysDateText", "ummAlQuraDateText", "monthSelectLabel", "yearSelectLabel", "amLabel", "pmLabel", "futureValidationMessageEn", "futureValidationMessageAr", "theme", "pastYearsLimit", "futureYearsLimit", "styles", "enableTime", "minDate", "maxDate", "initialDate", "initialRangeStart", "initialRangeEnd", "useMeridian", "selectionMode", "dateDisplayFormat"], outputs: ["onSubmit", "onDaySelect", "onMonthChange", "onYearChange", "onModeChange"] }] }); }
+        ], 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  Structure:\r\n  1. Input field (click to open dropdown)\r\n  2. Dropdown container (positioned absolutely)\r\n  3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n  4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n  <!-- INPUT FIELD -->\r\n  <div class=\"input-container\">\r\n    <input\r\n      #inputElement\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [class]=\"'datetime-input ' + inputClass\"\r\n      [class.rtl-input]=\"dir === 'rtl'\"\r\n      [value]=\"displayValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      (click)=\"toggleDropdown()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      readonly\r\n      [attr.aria-expanded]=\"isDropdownOpen\"\r\n      [attr.aria-haspopup]=\"true\"\r\n      [attr.aria-label]=\"placeholder\"\r\n    />\r\n\r\n    <!-- Calendar Icon -->\r\n    <span\r\n      class=\"input-icon\"\r\n      [class.rtl-icon]=\"dir === 'rtl'\"\r\n      (click)=\"!disabled && toggleDropdown()\"\r\n      [class.disabled]=\"disabled\"\r\n    >\r\n      <svg\r\n        width=\"20\"\r\n        height=\"20\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n      </svg>\r\n    </span>\r\n\r\n    <!-- Clear Button (only if value exists) -->\r\n    <button\r\n      *ngIf=\"displayValue && !disabled\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      [class.rtl-clear]=\"dir === 'rtl'\"\r\n      (click)=\"clearValue(); $event.stopPropagation()\"\r\n      aria-label=\"Clear value\"\r\n    >\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- DROPDOWN PANEL -->\r\n  <div\r\n    #dropdownContainer\r\n    class=\"dropdown-panel\"\r\n    [class]=\"'dropdown-panel ' + dropdownClass\"\r\n    [class.open]=\"isDropdownOpen\"\r\n    [class.closed]=\"!isDropdownOpen\"\r\n    *ngIf=\"isDropdownOpen\"\r\n  >\r\n    <!-- Calendar Component (reuses existing component) -->\r\n    <div class=\"calendar-wrapper\">\r\n      <hijri-gregorian-datepicker\r\n        [mode]=\"currentMode\"\r\n        [locale]=\"locale\"\r\n        [dir]=\"dir\"\r\n        [enableTime]=\"enableTime\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [initialDate]=\"getInitialDateForCalendar()\"\r\n        [initialRangeStart]=\"getInitialRangeStart()\"\r\n        [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n        [theme]=\"theme\"\r\n        [styles]=\"styles\"\r\n        [futureValidation]=\"futureValidation\"\r\n        [markToday]=\"markToday\"\r\n        [todaysDateSection]=\"todaysDateSection\"\r\n        [todaysDateText]=\"todaysDateText\"\r\n        [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n        [amLabel]=\"amLabel\"\r\n        [pmLabel]=\"pmLabel\"\r\n        [useMeridian]=\"useMeridian\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [showConfirmButton]=\"showConfirmButton\"\r\n        [submitTextButton]=\"submitTextButton\"\r\n        [canChangeMode]=\"canChangeMode\"\r\n        [disableYearPicker]=\"disableYearPicker\"\r\n        [disableMonthPicker]=\"disableMonthPicker\"\r\n        [disableDayPicker]=\"disableDayPicker\"\r\n        [futureValidationMessage]=\"futureValidationMessage\"\r\n        [yearSelectLabel]=\"yearSelectLabel\"\r\n        [monthSelectLabel]=\"monthSelectLabel\"\r\n        [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n        [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n        [pastYearsLimit]=\"pastYearsLimit\"\r\n        [futureYearsLimit]=\"futureYearsLimit\"\r\n        [dateDisplayFormat]=\"dateFormat\"\r\n        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($event))\"\r\n        (onModeChange)=\"onModeChangeHandler($event)\"\r\n      >\r\n      </hijri-gregorian-datepicker>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: ["markToday", "canChangeMode", "todaysDateSection", "futureValidation", "disableYearPicker", "disableMonthPicker", "disableDayPicker", "isRequired", "showConfirmButton", "futureValidationMessage", "mode", "dir", "locale", "submitTextButton", "todaysDateText", "ummAlQuraDateText", "monthSelectLabel", "yearSelectLabel", "amLabel", "pmLabel", "futureValidationMessageEn", "futureValidationMessageAr", "theme", "pastYearsLimit", "futureYearsLimit", "styles", "enableTime", "minDate", "maxDate", "initialDate", "initialRangeStart", "initialRangeEnd", "useMeridian", "selectionMode", "dateDisplayFormat"], outputs: ["onSubmit", "onDaySelect", "onMonthChange", "onYearChange", "onModeChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatetimeInputComponent, decorators: [{
             type: Component,
@@ -29873,7 +29898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => HijriGregorianDatetimeInputComponent),
                             multi: true,
                         },
-                    ], template: "<!--\r\n  DateTime Input Component Template\r\n\r\n  Structure:\r\n  1. Input field (click to open dropdown)\r\n  2. Dropdown container (positioned absolutely)\r\n  3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n  4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n  <!-- INPUT FIELD -->\r\n  <div class=\"input-container\">\r\n    <input\r\n      #inputElement\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [class]=\"'datetime-input ' + inputClass\"\r\n      [class.rtl-input]=\"dir === 'rtl'\"\r\n      [value]=\"displayValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      (click)=\"toggleDropdown()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      readonly\r\n      [attr.aria-expanded]=\"isDropdownOpen\"\r\n      [attr.aria-haspopup]=\"true\"\r\n      [attr.aria-label]=\"placeholder\"\r\n    />\r\n\r\n    <!-- Calendar Icon -->\r\n    <span\r\n      class=\"input-icon\"\r\n      [class.rtl-icon]=\"dir === 'rtl'\"\r\n      (click)=\"!disabled && toggleDropdown()\"\r\n      [class.disabled]=\"disabled\"\r\n    >\r\n      <svg\r\n        width=\"20\"\r\n        height=\"20\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n      </svg>\r\n    </span>\r\n\r\n    <!-- Clear Button (only if value exists) -->\r\n    <button\r\n      *ngIf=\"displayValue && !disabled\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      [class.rtl-clear]=\"dir === 'rtl'\"\r\n      (click)=\"clearValue(); $event.stopPropagation()\"\r\n      aria-label=\"Clear value\"\r\n    >\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- DROPDOWN PANEL -->\r\n  <div\r\n    #dropdownContainer\r\n    class=\"dropdown-panel\"\r\n    [class]=\"'dropdown-panel ' + dropdownClass\"\r\n    [class.open]=\"isDropdownOpen\"\r\n    [class.closed]=\"!isDropdownOpen\"\r\n    *ngIf=\"isDropdownOpen\"\r\n  >\r\n    <!-- Calendar Component (reuses existing component) -->\r\n    <div class=\"calendar-wrapper\">\r\n      <hijri-gregorian-datepicker\r\n        [mode]=\"currentMode\"\r\n        [locale]=\"locale\"\r\n        [dir]=\"dir\"\r\n        [enableTime]=\"enableTime\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [initialDate]=\"getInitialDateForCalendar()\"\r\n        [initialRangeStart]=\"getInitialRangeStart()\"\r\n        [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n        [theme]=\"theme\"\r\n        [styles]=\"styles\"\r\n        [futureValidation]=\"futureValidation\"\r\n        [markToday]=\"markToday\"\r\n        [todaysDateSection]=\"todaysDateSection\"\r\n        [todaysDateText]=\"todaysDateText\"\r\n        [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n        [amLabel]=\"amLabel\"\r\n        [pmLabel]=\"pmLabel\"\r\n        [useMeridian]=\"useMeridian\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [showConfirmButton]=\"showConfirmButton\"\r\n        [submitTextButton]=\"submitTextButton\"\r\n        [canChangeMode]=\"canChangeMode\"\r\n        [disableYearPicker]=\"disableYearPicker\"\r\n        [disableMonthPicker]=\"disableMonthPicker\"\r\n        [disableDayPicker]=\"disableDayPicker\"\r\n        [futureValidationMessage]=\"futureValidationMessage\"\r\n        [yearSelectLabel]=\"yearSelectLabel\"\r\n        [monthSelectLabel]=\"monthSelectLabel\"\r\n        [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n        [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n        [pastYearsLimit]=\"pastYearsLimit\"\r\n        [futureYearsLimit]=\"futureYearsLimit\"\r\n        [dateDisplayFormat]=\"dateFormat\"\r\n        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($event))\"\r\n        (onModeChange)=\"onModeChangeHandler($event)\"\r\n      >\r\n      </hijri-gregorian-datepicker>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"] }]
+                    ], template: "<!--\r\n  DateTime Input Component Template\r\n  Structure:\r\n  1. Input field (click to open dropdown)\r\n  2. Dropdown container (positioned absolutely)\r\n  3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n  4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n  <!-- INPUT FIELD -->\r\n  <div class=\"input-container\">\r\n    <input\r\n      #inputElement\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [class]=\"'datetime-input ' + inputClass\"\r\n      [class.rtl-input]=\"dir === 'rtl'\"\r\n      [value]=\"displayValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      (click)=\"toggleDropdown()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      readonly\r\n      [attr.aria-expanded]=\"isDropdownOpen\"\r\n      [attr.aria-haspopup]=\"true\"\r\n      [attr.aria-label]=\"placeholder\"\r\n    />\r\n\r\n    <!-- Calendar Icon -->\r\n    <span\r\n      class=\"input-icon\"\r\n      [class.rtl-icon]=\"dir === 'rtl'\"\r\n      (click)=\"!disabled && toggleDropdown()\"\r\n      [class.disabled]=\"disabled\"\r\n    >\r\n      <svg\r\n        width=\"20\"\r\n        height=\"20\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n      </svg>\r\n    </span>\r\n\r\n    <!-- Clear Button (only if value exists) -->\r\n    <button\r\n      *ngIf=\"displayValue && !disabled\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      [class.rtl-clear]=\"dir === 'rtl'\"\r\n      (click)=\"clearValue(); $event.stopPropagation()\"\r\n      aria-label=\"Clear value\"\r\n    >\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- DROPDOWN PANEL -->\r\n  <div\r\n    #dropdownContainer\r\n    class=\"dropdown-panel\"\r\n    [class]=\"'dropdown-panel ' + dropdownClass\"\r\n    [class.open]=\"isDropdownOpen\"\r\n    [class.closed]=\"!isDropdownOpen\"\r\n    *ngIf=\"isDropdownOpen\"\r\n  >\r\n    <!-- Calendar Component (reuses existing component) -->\r\n    <div class=\"calendar-wrapper\">\r\n      <hijri-gregorian-datepicker\r\n        [mode]=\"currentMode\"\r\n        [locale]=\"locale\"\r\n        [dir]=\"dir\"\r\n        [enableTime]=\"enableTime\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [initialDate]=\"getInitialDateForCalendar()\"\r\n        [initialRangeStart]=\"getInitialRangeStart()\"\r\n        [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n        [theme]=\"theme\"\r\n        [styles]=\"styles\"\r\n        [futureValidation]=\"futureValidation\"\r\n        [markToday]=\"markToday\"\r\n        [todaysDateSection]=\"todaysDateSection\"\r\n        [todaysDateText]=\"todaysDateText\"\r\n        [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n        [amLabel]=\"amLabel\"\r\n        [pmLabel]=\"pmLabel\"\r\n        [useMeridian]=\"useMeridian\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [showConfirmButton]=\"showConfirmButton\"\r\n        [submitTextButton]=\"submitTextButton\"\r\n        [canChangeMode]=\"canChangeMode\"\r\n        [disableYearPicker]=\"disableYearPicker\"\r\n        [disableMonthPicker]=\"disableMonthPicker\"\r\n        [disableDayPicker]=\"disableDayPicker\"\r\n        [futureValidationMessage]=\"futureValidationMessage\"\r\n        [yearSelectLabel]=\"yearSelectLabel\"\r\n        [monthSelectLabel]=\"monthSelectLabel\"\r\n        [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n        [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n        [pastYearsLimit]=\"pastYearsLimit\"\r\n        [futureYearsLimit]=\"futureYearsLimit\"\r\n        [dateDisplayFormat]=\"dateFormat\"\r\n        (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n        (onDaySelect)=\"onDaySelect($any($event))\"\r\n        (onModeChange)=\"onModeChangeHandler($event)\"\r\n      >\r\n      </hijri-gregorian-datepicker>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"] }]
         }], ctorParameters: () => [{ type: DateUtilitiesService }], propDecorators: { placeholder: [{
                 type: Input
             }], dateFormat: [{