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

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

@@ -27978,6 +27978,8 @@ class HijriGregorianDatepickerComponent {
     constructor(formBuilder, _dateUtilsService) {
         this.formBuilder = formBuilder;
         this._dateUtilsService = _dateUtilsService;
+        // Local storage key for persisting calendar mode
+        this.STORAGE_KEY = 'hg_datepicker_mode';
         /// Inputs
         this.markToday = true;
         this.canChangeMode = true;
@@ -28078,6 +28080,16 @@ class HijriGregorianDatepickerComponent {
         if (this.enableTime) {
             this.initializeTime();
         }
+        // Load persisted calendar mode if available
+        try {
+            const stored = localStorage.getItem(this.STORAGE_KEY);
+            if (stored) {
+                this.mode = stored;
+            }
+        }
+        catch (e) {
+            // ignore storage errors (e.g., SSR or disabled storage)
+        }
     }
     ngAfterViewInit() {
         // Double-check time initialization after view is ready
@@ -28413,6 +28425,13 @@ class HijriGregorianDatepickerComponent {
             this.periodForm.controls['year'].value);
         // Reapply selection after mode change
         this.reapplySelection();
+        // Persist new mode
+        try {
+            localStorage.setItem(this.STORAGE_KEY, this.mode);
+        }
+        catch (e) {
+            // ignore storage errors
+        }
     }
     /**
      * Reapply selection state after calendar regeneration
@@ -29045,11 +29064,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" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(formatDisplayDate(todaysDate.ummAlQura), \"ar\")\n            : formatDisplayDate(todaysDate.ummAlQura)\n        }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(formatDisplayDate(todaysDate.gregorian), \"ar\")\n            : formatDisplayDate(todaysDate.gregorian)\n        }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day)\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                  ? styles.primaryColor + '33'\n                  : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.gD?.split(\"/\")[0] | number\n                  )\n                : (day?.gD?.split(\"/\")[0] | number)\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.uD?.split(\"/\")[0] | number\n                  )\n                : (day?.uD?.split(\"/\")[0] | number)\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c'\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.secondaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriGregorianDatepickerComponent, isStandalone: false, selector: "hijri-gregorian-datepicker", inputs: { markToday: "markToday", canChangeMode: "canChangeMode", todaysDateSection: "todaysDateSection", futureValidation: "futureValidation", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", isRequired: "isRequired", showConfirmButton: "showConfirmButton", futureValidationMessage: "futureValidationMessage", mode: "mode", dir: "dir", locale: "locale", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", monthSelectLabel: "monthSelectLabel", yearSelectLabel: "yearSelectLabel", amLabel: "amLabel", pmLabel: "pmLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", theme: "theme", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", styles: "styles", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd", useMeridian: "useMeridian", selectionMode: "selectionMode", dateDisplayFormat: "dateDisplayFormat" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day)\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                  ? styles.primaryColor + '33'\n                  : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{ day?.gD?.split(\"/\")[0] | number }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{ day?.uD?.split(\"/\")[0] | number }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c'\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.secondaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'hijri-gregorian-datepicker', template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(formatDisplayDate(todaysDate.ummAlQura), \"ar\")\n            : formatDisplayDate(todaysDate.ummAlQura)\n        }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{\n          locale == \"ar\"\n            ? _dateUtilsService.convertDateNumerals(formatDisplayDate(todaysDate.gregorian), \"ar\")\n            : formatDisplayDate(todaysDate.gregorian)\n        }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ locale == \"ar\" ? _dateUtilsService.parseEnglish(year) : year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day)\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                  ? styles.primaryColor + '33'\n                  : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.gD?.split(\"/\")[0] | number\n                  )\n                : (day?.gD?.split(\"/\")[0] | number)\n            }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{\n              locale == \"ar\"\n                ? _dateUtilsService.parseEnglish(\n                    day?.uD?.split(\"/\")[0] | number\n                  )\n                : (day?.uD?.split(\"/\")[0] | number)\n            }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c'\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.secondaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"] }]
+            args: [{ standalone: false, selector: 'hijri-gregorian-datepicker', template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n  <div\n    class=\"toggle-section\"\n    [dir]=\"dir\"\n    *ngIf=\"canChangeMode\"\n    [ngStyle]=\"{ color: styles.primaryColor }\"\n  >\n    <span> {{ ummAlQuraDateText }} </span>\n    <label class=\"switch\">\n      <input\n        type=\"checkbox\"\n        [disabled]=\"!canChangeMode\"\n        [checked]=\"mode === 'ummAlQura'\"\n        (change)=\"changeCalendarMode()\"\n        #calendarCheckbox\n      />\n      <span\n        class=\"slider\"\n        [ngStyle]=\"\n          calendarCheckbox.checked\n            ? { 'background-color': styles.primaryColor }\n            : { 'background-color': styles.secondaryColor }\n        \"\n      ></span>\n    </label>\n  </div>\n\n  <div\n    class=\"todays-date-section\"\n    *ngIf=\"todaysDateSection\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      color: styles.primaryColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"text-info\">\n      <p>{{ todaysDateText }}</p>\n    </div>\n\n    <div\n      class=\"data\"\n      [dir]=\"dir\"\n      [ngStyle]=\"{\n        'background-color': styles.todaysDateBgColor,\n        color: styles.todaysDateTextColor\n      }\"\n    >\n      <p *ngIf=\"mode == 'ummAlQura'\">\n        {{ formatDisplayDate(todaysDate.ummAlQura) }}\n      </p>\n      <p *ngIf=\"mode == 'greg'\">\n        {{ formatDisplayDate(todaysDate.gregorian) }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"period-container\">\n    <form [formGroup]=\"periodForm\" class=\"period-form\">\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'ltr'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['year'].value\">{{\n          yearSelectLabel\n        }}</label>\n\n        <select\n          formControlName=\"year\"\n          class=\"{{ 'icon-' + dir }}\"\n          placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n          (change)=\"onPeriodChange('year')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n\n      <div\n        class=\"select-item\"\n        [ngClass]=\"{\n          order: dir == 'rtl'\n        }\"\n        [ngStyle]=\"{\n          'background-color': styles.backgroundColor,\n          'border-radius': styles.borderRadius\n        }\"\n      >\n        <label *ngIf=\"!periodForm.controls['month'].value\">{{\n          monthSelectLabel\n        }}</label>\n        <select\n          class=\"{{ 'icon-' + dir }}\"\n          formControlName=\"month\"\n          (change)=\"onPeriodChange('month')\"\n          [dir]=\"dir\"\n          [ngStyle]=\"{\n            color: styles.primaryColor,\n            'font-family': styles.fontFamily\n          }\"\n        >\n          <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n            {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n          </option>\n        </select>\n      </div>\n    </form>\n  </div>\n\n  <div\n    class=\"calendar-layout\"\n    [ngStyle]=\"{\n      'background-color': styles.backgroundColor,\n      'border-radius': styles.borderRadius\n    }\"\n  >\n    <div class=\"week-days\">\n      <div\n        class=\"week-day\"\n        [ngStyle]=\"{ color: styles.dayNameColor }\"\n        *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n      >\n        {{ date }}\n      </div>\n    </div>\n\n    <div [dir]=\"dir\">\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <div\n          class=\"day\"\n          *ngFor=\"let day of week\"\n          (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n          [ngStyle]=\"{\n            'background-color': styles.backgroundColor,\n            color: styles.dayColor\n          }\"\n        >\n          <div\n            id=\"greg-day\"\n            [ngClass]=\"{\n              'todays-date': checkTodaysDate(day),\n              'selected-date': day?.selected == true,\n              'disabled-day':\n                isDateDisabled(day) ||\n                (checkFutureValidation(day) && futureValidation),\n              'range-start': isRangeStart(day),\n              'range-end': isRangeEnd(day),\n              'in-range': isInRange(day)\n            }\"\n            [ngStyle]=\"{\n              border:\n                markToday && checkTodaysDate(day)\n                  ? '1px solid ' + styles.primaryColor\n                  : '',\n              'background-color':\n                day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n                  ? styles.primaryColor\n                  : isInRange(day)\n                  ? styles.primaryColor + '33'\n                  : '',\n              color:\n                (day?.selected == true ||\n                isRangeStart(day) ||\n                isRangeEnd(day) ||\n                isInRange(day)\n                  ? styles.todaysDateTextColor\n                  : '') ||\n                (checkFutureValidation(day) && futureValidation\n                  ? styles.disabledDayColor\n                  : '') ||\n                (isDateDisabled(day) ? styles.disabledDayColor : ''),\n              opacity: isDateDisabled(day) ? '0.4' : '1',\n              cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n            }\"\n          >\n            <span *ngIf=\"mode == 'greg'\">{{ day?.gD?.split(\"/\")[0] | number }}</span>\n\n            <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{ day?.uD?.split(\"/\")[0] | number }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n    <span *ngIf=\"locale == 'ar'\">\n      {{ futureValidationMessageAr }}\n    </span>\n    <span *ngIf=\"locale == 'en'\">\n      {{ futureValidationMessageEn }}\n    </span>\n  </div>\n\n  <!-- Time Picker Section -->\n  <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n  <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n    <div class=\"time-picker-wrapper\">\n      <!-- Hour Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment hour\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n          (input)=\"\n            useMeridian\n              ? onHour12InputChange($event)\n              : onHourInputChange($event)\n          \"\n          (keydown)=\"onTimeKeydown($event, 'hour')\"\n          [min]=\"useMeridian ? 1 : 0\"\n          [max]=\"useMeridian ? 12 : 23\"\n          aria-label=\"Hour\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement hour\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- Colon Separator -->\n      <span\n        class=\"time-colon\"\n        [ngStyle]=\"{\n          color: styles.timePickerColonColor || '#5b479c'\n        }\"\n        >:</span\n      >\n\n      <!-- Minute Input with Arrows -->\n      <div class=\"time-input-container\">\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-up\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"incrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Increment minute\"\n        >\n          <i class=\"ri-arrow-drop-up-line\"></i>\n        </button>\n        <input\n          type=\"number\"\n          class=\"time-field\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerTextColor || '#333'\n          }\"\n          [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n          (input)=\"onMinuteInputChange($event)\"\n          (keydown)=\"onTimeKeydown($event, 'minute')\"\n          min=\"0\"\n          max=\"59\"\n          aria-label=\"Minute\"\n        />\n        <button\n          type=\"button\"\n          class=\"time-arrow time-arrow-down\"\n          [ngStyle]=\"{\n            'background-color': styles.timePickerBgColor || '#ffffff',\n            'border-color': styles.timePickerBorderColor || '#ddd',\n            color: styles.timePickerArrowColor || '#5b479c'\n          }\"\n          (click)=\"decrementMinute()\"\n          tabindex=\"-1\"\n          aria-label=\"Decrement minute\"\n        >\n          <i class=\"ri-arrow-drop-down-line\"></i>\n        </button>\n      </div>\n\n      <!-- AM/PM Button Group (only when useMeridian=true) -->\n      <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n      <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'AM'\"\n          [ngStyle]=\"\n            meridian === 'AM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'AM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + amLabel\"\n        >\n          {{ amLabel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"meridian-btn\"\n          [class.active]=\"meridian === 'PM'\"\n          [ngStyle]=\"\n            meridian === 'PM'\n              ? {\n                  'background-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  'border-color':\n                    styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n                  color: styles.meridianActiveTextColor || '#ffffff'\n                }\n              : {\n                  'background-color': styles.meridianBgColor || '#ffffff',\n                  'border-color': styles.timePickerBorderColor || '#ddd',\n                  color: styles.meridianTextColor || '#666'\n                }\n          \"\n          (click)=\"meridian !== 'PM' && toggleMeridian()\"\n          [attr.aria-label]=\"'Select ' + pmLabel\"\n        >\n          {{ pmLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <button\n      type=\"button\"\n      class=\"confirm-btn\"\n      [disabled]=\"\n        isRequired &&\n        ((!selectedDay && selectionMode !== 'multiple') ||\n          (!multipleSelectedDates.length && selectionMode === 'multiple'))\n      \"\n      (click)=\"onConfirmClicked()\"\n      *ngIf=\"showConfirmButton\"\n      [ngStyle]=\"{\n        'background-color': styles.secondaryColor,\n        color: styles.confirmBtnTextColor,\n        'font-family': styles.fontFamily,\n        'border-radius': styles.borderRadius\n      }\"\n    >\n      {{ submitTextButton }}\n    </button>\n  </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: DateUtilitiesService }], propDecorators: { markToday: [{
                 type: Input
             }], canChangeMode: [{
@@ -29155,6 +29174,8 @@ class HijriGregorianDatetimeInputComponent {
     // ============================================================
     constructor(dateUtilitiesService) {
         this.dateUtilitiesService = dateUtilitiesService;
+        // Local storage key for persisting calendar mode
+        this.STORAGE_KEY = 'hg_datepicker_mode';
         // ============================================================
         // CONFIGURATION INPUTS
         // ============================================================
@@ -29255,7 +29276,14 @@ class HijriGregorianDatetimeInputComponent {
     // ============================================================
     ngOnInit() {
         // Initialize current mode from input
-        this.currentMode = this.mode;
+        // Prefer persisted mode if available, otherwise use input
+        try {
+            const stored = localStorage.getItem(this.STORAGE_KEY);
+            this.currentMode = stored ? stored : this.mode;
+        }
+        catch (e) {
+            this.currentMode = this.mode;
+        }
         // Initialize with initialDate if provided
         if (this.initialDate) {
             this.initializeWithDate(this.initialDate);
@@ -29331,6 +29359,12 @@ class HijriGregorianDatetimeInputComponent {
         // Save the current mode from the calendar before closing
         if (this.calendarComponent) {
             this.currentMode = this.calendarComponent.mode;
+            try {
+                localStorage.setItem(this.STORAGE_KEY, this.currentMode);
+            }
+            catch (e) {
+                // ignore storage errors
+            }
         }
         this.isDropdownOpen = false;
         this.dropdownClosed.emit();
@@ -29376,6 +29410,10 @@ class HijriGregorianDatetimeInputComponent {
         // Update currentMode from calendar before formatting
         if (this.calendarComponent) {
             this.currentMode = this.calendarComponent.mode;
+            try {
+                localStorage.setItem(this.STORAGE_KEY, this.currentMode);
+            }
+            catch (e) { }
         }
         this.currentValue = event;
         this.updateDisplayValue(event);
@@ -29392,6 +29430,10 @@ class HijriGregorianDatetimeInputComponent {
         // Update currentMode from calendar before formatting
         if (this.calendarComponent) {
             this.currentMode = this.calendarComponent.mode;
+            try {
+                localStorage.setItem(this.STORAGE_KEY, this.currentMode);
+            }
+            catch (e) { }
         }
         // Update current value
         this.currentValue = event;
@@ -29520,7 +29562,7 @@ class HijriGregorianDatetimeInputComponent {
             const minute = dayInfo.time.minute.toString().padStart(2, '0');
             if (this.useMeridian) {
                 // 12-hour format
-                const period = hour >= 12 ? 'PM' : 'AM';
+                const period = hour >= 12 ? this.pmLabel : this.amLabel;
                 const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
                 result += ` ${displayHour}:${minute} ${period}`;
             }