angular-hijri-gregorian-date-time-picker 1.5.9 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -27978,6 +27978,8 @@ class HijriGregorianDatepickerComponent {
|
|
|
27978
27978
|
constructor(formBuilder, _dateUtilsService) {
|
|
27979
27979
|
this.formBuilder = formBuilder;
|
|
27980
27980
|
this._dateUtilsService = _dateUtilsService;
|
|
27981
|
+
// Local storage key for persisting calendar mode
|
|
27982
|
+
this.STORAGE_KEY = 'hg_datepicker_mode';
|
|
27981
27983
|
/// Inputs
|
|
27982
27984
|
this.markToday = true;
|
|
27983
27985
|
this.canChangeMode = true;
|
|
@@ -28019,6 +28021,7 @@ class HijriGregorianDatepickerComponent {
|
|
|
28019
28021
|
this.onDaySelect = new EventEmitter();
|
|
28020
28022
|
this.onMonthChange = new EventEmitter();
|
|
28021
28023
|
this.onYearChange = new EventEmitter();
|
|
28024
|
+
this.onModeChange = new EventEmitter();
|
|
28022
28025
|
/// Variables
|
|
28023
28026
|
this.ummAlQuraMonths = [
|
|
28024
28027
|
{ labelAr: 'محرم', labelEn: 'Muharram', value: 1 },
|
|
@@ -28078,6 +28081,16 @@ class HijriGregorianDatepickerComponent {
|
|
|
28078
28081
|
if (this.enableTime) {
|
|
28079
28082
|
this.initializeTime();
|
|
28080
28083
|
}
|
|
28084
|
+
// Load persisted calendar mode if available
|
|
28085
|
+
try {
|
|
28086
|
+
const stored = localStorage.getItem(this.STORAGE_KEY);
|
|
28087
|
+
if (stored) {
|
|
28088
|
+
this.mode = stored;
|
|
28089
|
+
}
|
|
28090
|
+
}
|
|
28091
|
+
catch (e) {
|
|
28092
|
+
// ignore storage errors (e.g., SSR or disabled storage)
|
|
28093
|
+
}
|
|
28081
28094
|
}
|
|
28082
28095
|
ngAfterViewInit() {
|
|
28083
28096
|
// Double-check time initialization after view is ready
|
|
@@ -28088,11 +28101,17 @@ class HijriGregorianDatepickerComponent {
|
|
|
28088
28101
|
}
|
|
28089
28102
|
ngOnChanges(changes) {
|
|
28090
28103
|
if (changes['mode'] && !changes['mode'].isFirstChange()) {
|
|
28091
|
-
//
|
|
28092
|
-
|
|
28104
|
+
// When mode input changes from parent, update calendar display
|
|
28105
|
+
// Don't call changeCalendarMode() as that toggles - just accept the new value
|
|
28093
28106
|
const currentMode = changes['mode'].currentValue;
|
|
28094
|
-
if (
|
|
28095
|
-
this.
|
|
28107
|
+
if (this.mode !== currentMode) {
|
|
28108
|
+
this.mode = currentMode;
|
|
28109
|
+
this.initializeYearsAndMonths();
|
|
28110
|
+
this.generatetMonthData('01/' +
|
|
28111
|
+
this.periodForm.controls['month'].value +
|
|
28112
|
+
'/' +
|
|
28113
|
+
this.periodForm.controls['year'].value);
|
|
28114
|
+
this.reapplySelection();
|
|
28096
28115
|
}
|
|
28097
28116
|
}
|
|
28098
28117
|
}
|
|
@@ -28413,6 +28432,15 @@ class HijriGregorianDatepickerComponent {
|
|
|
28413
28432
|
this.periodForm.controls['year'].value);
|
|
28414
28433
|
// Reapply selection after mode change
|
|
28415
28434
|
this.reapplySelection();
|
|
28435
|
+
// Persist new mode immediately
|
|
28436
|
+
try {
|
|
28437
|
+
localStorage.setItem(this.STORAGE_KEY, this.mode);
|
|
28438
|
+
}
|
|
28439
|
+
catch (e) {
|
|
28440
|
+
// ignore storage errors
|
|
28441
|
+
}
|
|
28442
|
+
// Emit mode change event for parent components
|
|
28443
|
+
this.onModeChange.emit(this.mode);
|
|
28416
28444
|
}
|
|
28417
28445
|
/**
|
|
28418
28446
|
* Reapply selection state after calendar regeneration
|
|
@@ -29045,7 +29073,7 @@ class HijriGregorianDatepickerComponent {
|
|
|
29045
29073
|
return this._dateUtilsService.formatDateString(dateStr, this.dateDisplayFormat);
|
|
29046
29074
|
}
|
|
29047
29075
|
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 }); }
|
|
29048
|
-
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" }] }); }
|
|
29076
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriGregorianDatepickerComponent, isStandalone: false, selector: "hijri-gregorian-datepicker", inputs: { markToday: "markToday", canChangeMode: "canChangeMode", todaysDateSection: "todaysDateSection", futureValidation: "futureValidation", disableYearPicker: "disableYearPicker", disableMonthPicker: "disableMonthPicker", disableDayPicker: "disableDayPicker", isRequired: "isRequired", showConfirmButton: "showConfirmButton", futureValidationMessage: "futureValidationMessage", mode: "mode", dir: "dir", locale: "locale", submitTextButton: "submitTextButton", todaysDateText: "todaysDateText", ummAlQuraDateText: "ummAlQuraDateText", monthSelectLabel: "monthSelectLabel", yearSelectLabel: "yearSelectLabel", amLabel: "amLabel", pmLabel: "pmLabel", futureValidationMessageEn: "futureValidationMessageEn", futureValidationMessageAr: "futureValidationMessageAr", theme: "theme", pastYearsLimit: "pastYearsLimit", futureYearsLimit: "futureYearsLimit", styles: "styles", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", initialDate: "initialDate", initialRangeStart: "initialRangeStart", initialRangeEnd: "initialRangeEnd", useMeridian: "useMeridian", selectionMode: "selectionMode", dateDisplayFormat: "dateDisplayFormat" }, outputs: { onSubmit: "onSubmit", onDaySelect: "onDaySelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onModeChange: "onModeChange" }, host: { properties: { "style.font-family": "this.fontFamilyStyle" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container\" [dir]=\"dir\" [attr.lang]=\"locale\">\n <div\n class=\"toggle-section\"\n [dir]=\"dir\"\n *ngIf=\"canChangeMode\"\n [ngStyle]=\"{ color: styles.primaryColor }\"\n >\n <span> {{ ummAlQuraDateText }} </span>\n <label class=\"switch\">\n <input\n type=\"checkbox\"\n [disabled]=\"!canChangeMode\"\n [checked]=\"mode === 'ummAlQura'\"\n (change)=\"changeCalendarMode()\"\n #calendarCheckbox\n />\n <span\n class=\"slider\"\n [ngStyle]=\"\n calendarCheckbox.checked\n ? { 'background-color': styles.primaryColor }\n : { 'background-color': styles.secondaryColor }\n \"\n ></span>\n </label>\n </div>\n\n <div\n class=\"todays-date-section\"\n *ngIf=\"todaysDateSection\"\n [ngStyle]=\"{\n 'background-color': styles.backgroundColor,\n color: styles.primaryColor,\n 'border-radius': styles.borderRadius\n }\"\n >\n <div class=\"text-info\">\n <p>{{ todaysDateText }}</p>\n </div>\n\n <div\n class=\"data\"\n [dir]=\"dir\"\n [ngStyle]=\"{\n 'background-color': styles.todaysDateBgColor,\n color: styles.todaysDateTextColor\n }\"\n >\n <p *ngIf=\"mode == 'ummAlQura'\">\n {{ formatDisplayDate(todaysDate.ummAlQura) }}\n </p>\n <p *ngIf=\"mode == 'greg'\">\n {{ formatDisplayDate(todaysDate.gregorian) }}\n </p>\n </div>\n </div>\n\n <div class=\"period-container\">\n <form [formGroup]=\"periodForm\" class=\"period-form\">\n <div\n class=\"select-item\"\n [ngClass]=\"{\n order: dir == 'ltr'\n }\"\n [ngStyle]=\"{\n 'background-color': styles.backgroundColor,\n 'border-radius': styles.borderRadius\n }\"\n >\n <label *ngIf=\"!periodForm.controls['year'].value\">{{\n yearSelectLabel\n }}</label>\n\n <select\n formControlName=\"year\"\n class=\"{{ 'icon-' + dir }}\"\n placeholder=\"\u0627\u0644\u0633\u0646\u0629\"\n (change)=\"onPeriodChange('year')\"\n [dir]=\"dir\"\n [ngStyle]=\"{\n color: styles.primaryColor,\n 'font-family': styles.fontFamily\n }\"\n >\n <option *ngFor=\"let year of years\" [ngValue]=\"year\">\n {{ year }}\n </option>\n </select>\n </div>\n\n <div\n class=\"select-item\"\n [ngClass]=\"{\n order: dir == 'rtl'\n }\"\n [ngStyle]=\"{\n 'background-color': styles.backgroundColor,\n 'border-radius': styles.borderRadius\n }\"\n >\n <label *ngIf=\"!periodForm.controls['month'].value\">{{\n monthSelectLabel\n }}</label>\n <select\n class=\"{{ 'icon-' + dir }}\"\n formControlName=\"month\"\n (change)=\"onPeriodChange('month')\"\n [dir]=\"dir\"\n [ngStyle]=\"{\n color: styles.primaryColor,\n 'font-family': styles.fontFamily\n }\"\n >\n <option *ngFor=\"let month of months\" [ngValue]=\"month.value\">\n {{ locale == \"ar\" ? month?.labelAr : month?.labelEn }}\n </option>\n </select>\n </div>\n </form>\n </div>\n\n <div\n class=\"calendar-layout\"\n [ngStyle]=\"{\n 'background-color': styles.backgroundColor,\n 'border-radius': styles.borderRadius\n }\"\n >\n <div class=\"week-days\">\n <div\n class=\"week-day\"\n [ngStyle]=\"{ color: styles.dayNameColor }\"\n *ngFor=\"let date of locale == 'ar' ? weekdaysAr : weekdaysEn\"\n >\n {{ date }}\n </div>\n </div>\n\n <div [dir]=\"dir\">\n <div class=\"week\" *ngFor=\"let week of weeks\">\n <div\n class=\"day\"\n *ngFor=\"let day of week\"\n (click)=\"disableDayPicker == false ? onDayClicked(day) : ''\"\n [ngStyle]=\"{\n 'background-color': styles.backgroundColor,\n color: styles.dayColor\n }\"\n >\n <div\n id=\"greg-day\"\n [ngClass]=\"{\n 'todays-date': checkTodaysDate(day),\n 'selected-date': day?.selected == true,\n 'disabled-day':\n isDateDisabled(day) ||\n (checkFutureValidation(day) && futureValidation),\n 'range-start': isRangeStart(day),\n 'range-end': isRangeEnd(day),\n 'in-range': isInRange(day)\n }\"\n [ngStyle]=\"{\n border:\n markToday && checkTodaysDate(day)\n ? '1px solid ' + styles.primaryColor\n : '',\n 'background-color':\n day?.selected == true || isRangeStart(day) || isRangeEnd(day)\n ? styles.primaryColor\n : isInRange(day)\n ? styles.primaryColor + '33'\n : '',\n color:\n (day?.selected == true ||\n isRangeStart(day) ||\n isRangeEnd(day) ||\n isInRange(day)\n ? styles.todaysDateTextColor\n : '') ||\n (checkFutureValidation(day) && futureValidation\n ? styles.disabledDayColor\n : '') ||\n (isDateDisabled(day) ? styles.disabledDayColor : ''),\n opacity: isDateDisabled(day) ? '0.4' : '1',\n cursor: isDateDisabled(day) ? 'not-allowed' : 'pointer'\n }\"\n >\n <span *ngIf=\"mode == 'greg'\">{{ day?.gD?.split(\"/\")[0] | number }}</span>\n\n <span id=\"ummAlQura-day\" *ngIf=\"mode == 'ummAlQura'\">{{ day?.uD?.split(\"/\")[0] | number }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"future-validation\" dir=\"auto\" *ngIf=\"futureValidationMessage\">\n <span *ngIf=\"locale == 'ar'\">\n {{ futureValidationMessageAr }}\n </span>\n <span *ngIf=\"locale == 'en'\">\n {{ futureValidationMessageEn }}\n </span>\n </div>\n\n <!-- Time Picker Section -->\n <!-- BACKWARD COMPATIBILITY: This section only renders when enableTime=true -->\n <div class=\"time-picker-section\" *ngIf=\"enableTime\" [dir]=\"'ltr'\">\n <div class=\"time-picker-wrapper\">\n <!-- Hour Input with Arrows -->\n <div class=\"time-input-container\">\n <button\n type=\"button\"\n class=\"time-arrow time-arrow-up\"\n [ngStyle]=\"{\n 'background-color': styles.timePickerBgColor || '#ffffff',\n 'border-color': styles.timePickerBorderColor || '#ddd',\n color: styles.timePickerArrowColor || '#5b479c'\n }\"\n (click)=\"useMeridian ? incrementHour12() : incrementHour()\"\n tabindex=\"-1\"\n aria-label=\"Increment hour\"\n >\n <i class=\"ri-arrow-drop-up-line\"></i>\n </button>\n <input\n type=\"number\"\n class=\"time-field\"\n [ngStyle]=\"{\n 'background-color': styles.timePickerBgColor || '#ffffff',\n 'border-color': styles.timePickerBorderColor || '#ddd',\n color: styles.timePickerTextColor || '#333'\n }\"\n [value]=\"getDisplayHour().toString().padStart(2, '0')\"\n (input)=\"\n useMeridian\n ? onHour12InputChange($event)\n : onHourInputChange($event)\n \"\n (keydown)=\"onTimeKeydown($event, 'hour')\"\n [min]=\"useMeridian ? 1 : 0\"\n [max]=\"useMeridian ? 12 : 23\"\n aria-label=\"Hour\"\n />\n <button\n type=\"button\"\n class=\"time-arrow time-arrow-down\"\n [ngStyle]=\"{\n 'background-color': styles.timePickerBgColor || '#ffffff',\n 'border-color': styles.timePickerBorderColor || '#ddd',\n color: styles.timePickerArrowColor || '#5b479c'\n }\"\n (click)=\"useMeridian ? decrementHour12() : decrementHour()\"\n tabindex=\"-1\"\n aria-label=\"Decrement hour\"\n >\n <i class=\"ri-arrow-drop-down-line\"></i>\n </button>\n </div>\n\n <!-- Colon Separator -->\n <span\n class=\"time-colon\"\n [ngStyle]=\"{\n color: styles.timePickerColonColor || '#5b479c'\n }\"\n >:</span\n >\n\n <!-- Minute Input with Arrows -->\n <div class=\"time-input-container\">\n <button\n type=\"button\"\n class=\"time-arrow time-arrow-up\"\n [ngStyle]=\"{\n 'background-color': styles.timePickerBgColor || '#ffffff',\n 'border-color': styles.timePickerBorderColor || '#ddd',\n color: styles.timePickerArrowColor || '#5b479c'\n }\"\n (click)=\"incrementMinute()\"\n tabindex=\"-1\"\n aria-label=\"Increment minute\"\n >\n <i class=\"ri-arrow-drop-up-line\"></i>\n </button>\n <input\n type=\"number\"\n class=\"time-field\"\n [ngStyle]=\"{\n 'background-color': styles.timePickerBgColor || '#ffffff',\n 'border-color': styles.timePickerBorderColor || '#ddd',\n color: styles.timePickerTextColor || '#333'\n }\"\n [value]=\"selectedTime.minute.toString().padStart(2, '0')\"\n (input)=\"onMinuteInputChange($event)\"\n (keydown)=\"onTimeKeydown($event, 'minute')\"\n min=\"0\"\n max=\"59\"\n aria-label=\"Minute\"\n />\n <button\n type=\"button\"\n class=\"time-arrow time-arrow-down\"\n [ngStyle]=\"{\n 'background-color': styles.timePickerBgColor || '#ffffff',\n 'border-color': styles.timePickerBorderColor || '#ddd',\n color: styles.timePickerArrowColor || '#5b479c'\n }\"\n (click)=\"decrementMinute()\"\n tabindex=\"-1\"\n aria-label=\"Decrement minute\"\n >\n <i class=\"ri-arrow-drop-down-line\"></i>\n </button>\n </div>\n\n <!-- AM/PM Button Group (only when useMeridian=true) -->\n <!-- BACKWARD COMPATIBILITY: This only renders when useMeridian=true -->\n <div class=\"meridian-toggle-group\" *ngIf=\"useMeridian\">\n <button\n type=\"button\"\n class=\"meridian-btn\"\n [class.active]=\"meridian === 'AM'\"\n [ngStyle]=\"\n meridian === 'AM'\n ? {\n 'background-color':\n styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n 'border-color':\n styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n color: styles.meridianActiveTextColor || '#ffffff'\n }\n : {\n 'background-color': styles.meridianBgColor || '#ffffff',\n 'border-color': styles.timePickerBorderColor || '#ddd',\n color: styles.meridianTextColor || '#666'\n }\n \"\n (click)=\"meridian !== 'AM' && toggleMeridian()\"\n [attr.aria-label]=\"'Select ' + amLabel\"\n >\n {{ amLabel }}\n </button>\n <button\n type=\"button\"\n class=\"meridian-btn\"\n [class.active]=\"meridian === 'PM'\"\n [ngStyle]=\"\n meridian === 'PM'\n ? {\n 'background-color':\n styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n 'border-color':\n styles.meridianActiveBgColor || 'rgb(0, 77, 97)',\n color: styles.meridianActiveTextColor || '#ffffff'\n }\n : {\n 'background-color': styles.meridianBgColor || '#ffffff',\n 'border-color': styles.timePickerBorderColor || '#ddd',\n color: styles.meridianTextColor || '#666'\n }\n \"\n (click)=\"meridian !== 'PM' && toggleMeridian()\"\n [attr.aria-label]=\"'Select ' + pmLabel\"\n >\n {{ pmLabel }}\n </button>\n </div>\n </div>\n </div>\n\n <div>\n <button\n type=\"button\"\n class=\"confirm-btn\"\n [disabled]=\"\n isRequired &&\n ((!selectedDay && selectionMode !== 'multiple') ||\n (!multipleSelectedDates.length && selectionMode === 'multiple'))\n \"\n (click)=\"onConfirmClicked()\"\n *ngIf=\"showConfirmButton\"\n [ngStyle]=\"{\n 'background-color': styles.secondaryColor,\n color: styles.confirmBtnTextColor,\n 'font-family': styles.fontFamily,\n 'border-radius': styles.borderRadius\n }\"\n >\n {{ submitTextButton }}\n </button>\n </div>\n</div>\n", styles: [".calendar-container{margin:auto;display:block;border-radius:20px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}.calendar-container[dir=rtl],.calendar-container[lang=ar]{font-family:Default-Regular,sans-serif;font-weight:300;letter-spacing:0;line-height:1.7}.calendar-container .todays-date-section{border-radius:4px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;padding-right:10px}.calendar-container .todays-date-section .text-info{display:flex;align-items:center}.calendar-container .todays-date-section .text-info p{font-size:16px;font-weight:500;letter-spacing:.02em}[dir=rtl] .calendar-container .todays-date-section .text-info p,[lang=ar] .calendar-container .todays-date-section .text-info p{font-weight:400;letter-spacing:0}[dir=rtl] .calendar-container .todays-date-section .data p,[lang=ar] .calendar-container .todays-date-section .data p{font-weight:300}.calendar-container .todays-date-section .data{border-radius:8px}.calendar-container .todays-date-section .data p{font-size:14px;font-weight:400;margin:5px 10px}.calendar-container .period-container{display:flex;justify-content:space-between;margin-top:8px}.calendar-container .period-container .period-form{width:100%;display:flex;justify-content:space-between}.calendar-container .period-container .period-form .select-item{width:42.5%;border-radius:4px;height:50px;padding-left:10px;padding-right:10px}.calendar-container .period-container .period-form label{margin-right:10px;font-weight:500}[dir=rtl] .calendar-container .period-container .period-form label,[lang=ar] .calendar-container .period-container .period-form label{font-weight:400}.calendar-container .period-container .period-form select{width:100%;height:50px;border:none;font-size:15px;font-weight:500;display:block;margin:auto;padding-left:15px;padding-right:15px;background:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>\") no-repeat 95% 50%;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.calendar-container .period-container .period-form select option,.calendar-container [dir=rtl] .period-container select{font-weight:400}.calendar-container [dir=rtl] .period-container select option{font-weight:300}.icon-ltr{background-position:right}.icon-rtl{background-position:left!important}select:focus{outline:none}.calendar-layout{border-radius:4px;margin:8px auto auto;display:block;padding-bottom:5px}.calendar-layout .week-days{text-align:center;margin-top:5px;display:flex;justify-content:space-evenly}.calendar-layout .week-days .week-day{display:inline-block;width:13%;text-align:center;padding:15px 0 10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}[dir=rtl] .calendar-layout .week-days{flex-direction:row-reverse!important}[dir=rtl] .calendar-layout .week-days .week-day{font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}.calendar-layout .week{text-align:center;display:flex;justify-content:space-evenly;margin-bottom:.3rem}.calendar-layout .day{display:inline-flex;width:13%;justify-content:center;align-items:center;cursor:pointer;font-weight:500;transition:all .2s ease;border-radius:4px}.calendar-layout .day:hover:not(.disabled-day){transform:scale(1.05)}[dir=rtl] .calendar-layout .day{font-weight:400}.calendar-layout #greg-day{position:relative;min-width:20px;padding:10px;border-radius:5px;transition:all .2s ease}.calendar-layout #greg-day span{font-size:14px;font-weight:500}[dir=rtl] .calendar-layout #greg-day span,[lang=ar] .calendar-layout #greg-day span{font-weight:400}.calendar-layout #greg-day.disabled-day{opacity:.4;cursor:not-allowed!important;pointer-events:none}.calendar-layout #greg-day.disabled-day:hover{transform:none;background-color:transparent!important}.calendar-layout #ummAlQura-day{font-size:11px;font-weight:500}[dir=rtl] .calendar-layout #ummAlQura-day,[lang=ar] .calendar-layout #ummAlQura-day{font-weight:400}.calendar-layout .selected-date,.calendar-layout .range-start,.calendar-layout .range-end{font-weight:600!important;box-shadow:0 2px 4px #0000001a}.calendar-layout .in-range{font-weight:500}.confirm-btn{height:50px;width:100%;border:none;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px auto 0;box-shadow:none!important;cursor:pointer;transition:all .2s ease;border-radius:8px}.confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026!important}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}[dir=rtl] .confirm-btn{font-weight:700;letter-spacing:0;text-transform:none;font-size:17px}.toggle-section{display:flex;align-items:center;justify-content:space-between}.toggle-section label{text-align:right;font-size:19px;font-weight:500}[dir=rtl] .toggle-section label,[lang=ar] .toggle-section label{font-weight:400}.toggle-section .switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-section .switch input{opacity:0;width:0;height:0}.toggle-section .slider{position:absolute;cursor:pointer;inset:0;background-color:#00ace4;transition:.4s;border-radius:24px}.toggle-section .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-section input:checked+.slider:before{transform:translate(26px)}.order{order:1}.future-validation{text-align:center;color:#eb445a;margin-top:8px;font-size:13px;font-weight:500}[dir=rtl] .future-validation,[lang=ar] .future-validation{font-weight:400;line-height:1.8}.time-picker-section{padding:10px;background:transparent;border-radius:0}.time-picker-section .time-picker-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.time-picker-section .time-picker-wrapper .time-input-container{position:relative;display:inline-flex;flex-direction:column;align-items:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{width:100%;height:20px;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow i{font-size:20px;line-height:1;pointer-events:none;opacity:.7;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:hover i{opacity:1}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:active{background:#e9ecef}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow:focus{outline:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-up{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow.time-arrow-down{border-radius:0 0 4px 4px;border-top:none}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:25px;border:1px solid #ddd;border-top:none;border-bottom:none;background:#fff;font-size:16px;font-weight:600;color:#333;text-align:center;padding:0;margin:0;transition:all .2s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield}[dir=rtl] .time-picker-section .time-picker-wrapper .time-input-container .time-field,[lang=ar] .time-picker-section .time-picker-wrapper .time-input-container .time-field{font-weight:600}.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-outer-spin-button,.time-picker-section .time-picker-wrapper .time-input-container .time-field::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.time-picker-section .time-picker-wrapper .time-input-container .time-field:focus{outline:none;box-shadow:0 0 0 2px #5b479c1a;z-index:1}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px;font-weight:600;color:#5b479c;padding:0 4px;-webkit-user-select:none;user-select:none;line-height:1}[dir=rtl] .time-picker-section .time-picker-wrapper .time-colon,[lang=ar] .time-picker-section .time-picker-wrapper .time-colon{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group{display:flex;flex-direction:column;gap:0;margin-left:8px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:25px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;font-weight:600;text-align:center;padding:0;cursor:pointer;transition:all .2s ease}[dir=rtl] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn,[lang=ar] .time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{font-weight:700}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:first-child{border-radius:4px 4px 0 0;border-bottom:none}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:last-child{border-radius:0 0 4px 4px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:hover:not(.active){background:#f8f9fa;border-color:#00ace4;color:#00ace4}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:active{transform:scale(.98)}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn:focus{outline:none;border-color:#00ace4;box-shadow:0 0 0 2px #00ace41a;z-index:1}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn.active{background:#004d61;border-color:#004d61;color:#fff;cursor:default}@media (max-width: 480px){.time-picker-section{padding:12px}.time-picker-section .time-picker-wrapper{gap:6px}.time-picker-section .time-picker-wrapper .time-input-container .time-arrow{height:18px}.time-picker-section .time-picker-wrapper .time-input-container .time-field{width:50px;height:36px;font-size:20px}.time-picker-section .time-picker-wrapper .time-colon{font-size:24px}.time-picker-section .time-picker-wrapper .meridian-toggle-group{margin-left:6px}.time-picker-section .time-picker-wrapper .meridian-toggle-group .meridian-btn{width:45px;height:27px;font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }] }); }
|
|
29049
29077
|
}
|
|
29050
29078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatepickerComponent, decorators: [{
|
|
29051
29079
|
type: Component,
|
|
@@ -29128,6 +29156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
29128
29156
|
type: Output
|
|
29129
29157
|
}], onYearChange: [{
|
|
29130
29158
|
type: Output
|
|
29159
|
+
}], onModeChange: [{
|
|
29160
|
+
type: Output
|
|
29131
29161
|
}], fontFamilyStyle: [{
|
|
29132
29162
|
type: HostBinding,
|
|
29133
29163
|
args: ['style.font-family']
|
|
@@ -29155,6 +29185,8 @@ class HijriGregorianDatetimeInputComponent {
|
|
|
29155
29185
|
// ============================================================
|
|
29156
29186
|
constructor(dateUtilitiesService) {
|
|
29157
29187
|
this.dateUtilitiesService = dateUtilitiesService;
|
|
29188
|
+
// Local storage key for persisting calendar mode
|
|
29189
|
+
this.STORAGE_KEY = 'hg_datepicker_mode';
|
|
29158
29190
|
// ============================================================
|
|
29159
29191
|
// CONFIGURATION INPUTS
|
|
29160
29192
|
// ============================================================
|
|
@@ -29255,7 +29287,14 @@ class HijriGregorianDatetimeInputComponent {
|
|
|
29255
29287
|
// ============================================================
|
|
29256
29288
|
ngOnInit() {
|
|
29257
29289
|
// Initialize current mode from input
|
|
29258
|
-
|
|
29290
|
+
// Prefer persisted mode if available, otherwise use input
|
|
29291
|
+
try {
|
|
29292
|
+
const stored = localStorage.getItem(this.STORAGE_KEY);
|
|
29293
|
+
this.currentMode = stored ? stored : this.mode;
|
|
29294
|
+
}
|
|
29295
|
+
catch (e) {
|
|
29296
|
+
this.currentMode = this.mode;
|
|
29297
|
+
}
|
|
29259
29298
|
// Initialize with initialDate if provided
|
|
29260
29299
|
if (this.initialDate) {
|
|
29261
29300
|
this.initializeWithDate(this.initialDate);
|
|
@@ -29328,7 +29367,7 @@ class HijriGregorianDatetimeInputComponent {
|
|
|
29328
29367
|
* Close the dropdown panel
|
|
29329
29368
|
*/
|
|
29330
29369
|
closeDropdown() {
|
|
29331
|
-
//
|
|
29370
|
+
// Sync the current mode from the calendar before closing
|
|
29332
29371
|
if (this.calendarComponent) {
|
|
29333
29372
|
this.currentMode = this.calendarComponent.mode;
|
|
29334
29373
|
}
|
|
@@ -29376,6 +29415,10 @@ class HijriGregorianDatetimeInputComponent {
|
|
|
29376
29415
|
// Update currentMode from calendar before formatting
|
|
29377
29416
|
if (this.calendarComponent) {
|
|
29378
29417
|
this.currentMode = this.calendarComponent.mode;
|
|
29418
|
+
try {
|
|
29419
|
+
localStorage.setItem(this.STORAGE_KEY, this.currentMode);
|
|
29420
|
+
}
|
|
29421
|
+
catch (e) { }
|
|
29379
29422
|
}
|
|
29380
29423
|
this.currentValue = event;
|
|
29381
29424
|
this.updateDisplayValue(event);
|
|
@@ -29392,6 +29435,10 @@ class HijriGregorianDatetimeInputComponent {
|
|
|
29392
29435
|
// Update currentMode from calendar before formatting
|
|
29393
29436
|
if (this.calendarComponent) {
|
|
29394
29437
|
this.currentMode = this.calendarComponent.mode;
|
|
29438
|
+
try {
|
|
29439
|
+
localStorage.setItem(this.STORAGE_KEY, this.currentMode);
|
|
29440
|
+
}
|
|
29441
|
+
catch (e) { }
|
|
29395
29442
|
}
|
|
29396
29443
|
// Update current value
|
|
29397
29444
|
this.currentValue = event;
|
|
@@ -29429,6 +29476,21 @@ class HijriGregorianDatetimeInputComponent {
|
|
|
29429
29476
|
onCancelClicked() {
|
|
29430
29477
|
this.closeDropdown();
|
|
29431
29478
|
}
|
|
29479
|
+
/**
|
|
29480
|
+
* Handle calendar mode change (when user clicks the toggle button)
|
|
29481
|
+
* Mode is saved immediately to localStorage
|
|
29482
|
+
*/
|
|
29483
|
+
onModeChangeHandler(mode) {
|
|
29484
|
+
// Update currentMode immediately so next open uses correct mode
|
|
29485
|
+
this.currentMode = mode;
|
|
29486
|
+
// Persist the mode immediately when user toggles
|
|
29487
|
+
try {
|
|
29488
|
+
localStorage.setItem(this.STORAGE_KEY, mode);
|
|
29489
|
+
}
|
|
29490
|
+
catch (e) {
|
|
29491
|
+
// ignore storage errors
|
|
29492
|
+
}
|
|
29493
|
+
}
|
|
29432
29494
|
// ============================================================
|
|
29433
29495
|
// HELPER METHODS
|
|
29434
29496
|
// ============================================================
|
|
@@ -29644,7 +29706,7 @@ class HijriGregorianDatetimeInputComponent {
|
|
|
29644
29706
|
useExisting: forwardRef(() => HijriGregorianDatetimeInputComponent),
|
|
29645
29707
|
multi: true,
|
|
29646
29708
|
},
|
|
29647
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: HijriGregorianDatepickerComponent, descendants: true }], ngImport: i0, template: "<!--\r\n DateTime Input Component Template\r\n
|
|
29709
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: HijriGregorianDatepickerComponent, descendants: true }], ngImport: i0, template: "<!--\r\n DateTime Input Component Template\r\n\r\n Structure:\r\n 1. Input field (click to open dropdown)\r\n 2. Dropdown container (positioned absolutely)\r\n 3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n 4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n <!-- INPUT FIELD -->\r\n <div class=\"input-container\">\r\n <input\r\n #inputElement\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [class]=\"'datetime-input ' + inputClass\"\r\n [class.rtl-input]=\"dir === 'rtl'\"\r\n [value]=\"displayValue\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggleDropdown()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n readonly\r\n [attr.aria-expanded]=\"isDropdownOpen\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-label]=\"placeholder\"\r\n />\r\n\r\n <!-- Calendar Icon -->\r\n <span\r\n class=\"input-icon\"\r\n [class.rtl-icon]=\"dir === 'rtl'\"\r\n (click)=\"!disabled && toggleDropdown()\"\r\n [class.disabled]=\"disabled\"\r\n >\r\n <svg\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n </span>\r\n\r\n <!-- Clear Button (only if value exists) -->\r\n <button\r\n *ngIf=\"displayValue && !disabled\"\r\n type=\"button\"\r\n class=\"clear-button\"\r\n [class.rtl-clear]=\"dir === 'rtl'\"\r\n (click)=\"clearValue(); $event.stopPropagation()\"\r\n aria-label=\"Clear value\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL -->\r\n <div\r\n #dropdownContainer\r\n class=\"dropdown-panel\"\r\n [class]=\"'dropdown-panel ' + dropdownClass\"\r\n [class.open]=\"isDropdownOpen\"\r\n [class.closed]=\"!isDropdownOpen\"\r\n *ngIf=\"isDropdownOpen\"\r\n >\r\n <!-- Calendar Component (reuses existing component) -->\r\n <div class=\"calendar-wrapper\">\r\n <hijri-gregorian-datepicker\r\n [mode]=\"currentMode\"\r\n [locale]=\"locale\"\r\n [dir]=\"dir\"\r\n [enableTime]=\"enableTime\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [initialDate]=\"getInitialDateForCalendar()\"\r\n [initialRangeStart]=\"getInitialRangeStart()\"\r\n [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n [theme]=\"theme\"\r\n [styles]=\"styles\"\r\n [futureValidation]=\"futureValidation\"\r\n [markToday]=\"markToday\"\r\n [todaysDateSection]=\"todaysDateSection\"\r\n [todaysDateText]=\"todaysDateText\"\r\n [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n [amLabel]=\"amLabel\"\r\n [pmLabel]=\"pmLabel\"\r\n [useMeridian]=\"useMeridian\"\r\n [selectionMode]=\"selectionMode\"\r\n [showConfirmButton]=\"false\"\r\n [submitTextButton]=\"submitTextButton\"\r\n [canChangeMode]=\"canChangeMode\"\r\n [disableYearPicker]=\"disableYearPicker\"\r\n [disableMonthPicker]=\"disableMonthPicker\"\r\n [disableDayPicker]=\"disableDayPicker\"\r\n [futureValidationMessage]=\"futureValidationMessage\"\r\n [yearSelectLabel]=\"yearSelectLabel\"\r\n [monthSelectLabel]=\"monthSelectLabel\"\r\n [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n [pastYearsLimit]=\"pastYearsLimit\"\r\n [futureYearsLimit]=\"futureYearsLimit\"\r\n [dateDisplayFormat]=\"dateFormat\"\r\n (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n (onDaySelect)=\"onDaySelect($any($event))\"\r\n (onModeChange)=\"onModeChangeHandler($event)\"\r\n >\r\n </hijri-gregorian-datepicker>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: ["markToday", "canChangeMode", "todaysDateSection", "futureValidation", "disableYearPicker", "disableMonthPicker", "disableDayPicker", "isRequired", "showConfirmButton", "futureValidationMessage", "mode", "dir", "locale", "submitTextButton", "todaysDateText", "ummAlQuraDateText", "monthSelectLabel", "yearSelectLabel", "amLabel", "pmLabel", "futureValidationMessageEn", "futureValidationMessageAr", "theme", "pastYearsLimit", "futureYearsLimit", "styles", "enableTime", "minDate", "maxDate", "initialDate", "initialRangeStart", "initialRangeEnd", "useMeridian", "selectionMode", "dateDisplayFormat"], outputs: ["onSubmit", "onDaySelect", "onMonthChange", "onYearChange", "onModeChange"] }] }); }
|
|
29648
29710
|
}
|
|
29649
29711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriGregorianDatetimeInputComponent, decorators: [{
|
|
29650
29712
|
type: Component,
|
|
@@ -29654,7 +29716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
29654
29716
|
useExisting: forwardRef(() => HijriGregorianDatetimeInputComponent),
|
|
29655
29717
|
multi: true,
|
|
29656
29718
|
},
|
|
29657
|
-
], template: "<!--\r\n DateTime Input Component Template\r\n
|
|
29719
|
+
], template: "<!--\r\n DateTime Input Component Template\r\n\r\n Structure:\r\n 1. Input field (click to open dropdown)\r\n 2. Dropdown container (positioned absolutely)\r\n 3. Calendar component (reuses existing hijri-gregorian-datepicker)\r\n 4. Action buttons (Confirm/Cancel)\r\n-->\r\n\r\n<div class=\"datetime-input-wrapper\" [attr.dir]=\"dir\">\r\n <!-- INPUT FIELD -->\r\n <div class=\"input-container\">\r\n <input\r\n #inputElement\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [class]=\"'datetime-input ' + inputClass\"\r\n [class.rtl-input]=\"dir === 'rtl'\"\r\n [value]=\"displayValue\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggleDropdown()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n readonly\r\n [attr.aria-expanded]=\"isDropdownOpen\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-label]=\"placeholder\"\r\n />\r\n\r\n <!-- Calendar Icon -->\r\n <span\r\n class=\"input-icon\"\r\n [class.rtl-icon]=\"dir === 'rtl'\"\r\n (click)=\"!disabled && toggleDropdown()\"\r\n [class.disabled]=\"disabled\"\r\n >\r\n <svg\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n </span>\r\n\r\n <!-- Clear Button (only if value exists) -->\r\n <button\r\n *ngIf=\"displayValue && !disabled\"\r\n type=\"button\"\r\n class=\"clear-button\"\r\n [class.rtl-clear]=\"dir === 'rtl'\"\r\n (click)=\"clearValue(); $event.stopPropagation()\"\r\n aria-label=\"Clear value\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL -->\r\n <div\r\n #dropdownContainer\r\n class=\"dropdown-panel\"\r\n [class]=\"'dropdown-panel ' + dropdownClass\"\r\n [class.open]=\"isDropdownOpen\"\r\n [class.closed]=\"!isDropdownOpen\"\r\n *ngIf=\"isDropdownOpen\"\r\n >\r\n <!-- Calendar Component (reuses existing component) -->\r\n <div class=\"calendar-wrapper\">\r\n <hijri-gregorian-datepicker\r\n [mode]=\"currentMode\"\r\n [locale]=\"locale\"\r\n [dir]=\"dir\"\r\n [enableTime]=\"enableTime\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [initialDate]=\"getInitialDateForCalendar()\"\r\n [initialRangeStart]=\"getInitialRangeStart()\"\r\n [initialRangeEnd]=\"getInitialRangeEnd()\"\r\n [theme]=\"theme\"\r\n [styles]=\"styles\"\r\n [futureValidation]=\"futureValidation\"\r\n [markToday]=\"markToday\"\r\n [todaysDateSection]=\"todaysDateSection\"\r\n [todaysDateText]=\"todaysDateText\"\r\n [ummAlQuraDateText]=\"ummAlQuraDateText\"\r\n [amLabel]=\"amLabel\"\r\n [pmLabel]=\"pmLabel\"\r\n [useMeridian]=\"useMeridian\"\r\n [selectionMode]=\"selectionMode\"\r\n [showConfirmButton]=\"false\"\r\n [submitTextButton]=\"submitTextButton\"\r\n [canChangeMode]=\"canChangeMode\"\r\n [disableYearPicker]=\"disableYearPicker\"\r\n [disableMonthPicker]=\"disableMonthPicker\"\r\n [disableDayPicker]=\"disableDayPicker\"\r\n [futureValidationMessage]=\"futureValidationMessage\"\r\n [yearSelectLabel]=\"yearSelectLabel\"\r\n [monthSelectLabel]=\"monthSelectLabel\"\r\n [futureValidationMessageEn]=\"futureValidationMessageEn\"\r\n [futureValidationMessageAr]=\"futureValidationMessageAr\"\r\n [pastYearsLimit]=\"pastYearsLimit\"\r\n [futureYearsLimit]=\"futureYearsLimit\"\r\n [dateDisplayFormat]=\"dateFormat\"\r\n (onSubmit)=\"onCalendarSubmit($any($event))\"\r\n (onDaySelect)=\"onDaySelect($any($event))\"\r\n (onModeChange)=\"onModeChangeHandler($event)\"\r\n >\r\n </hijri-gregorian-datepicker>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".datetime-input-wrapper{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.datetime-input-wrapper .input-container{position:relative;display:flex;align-items:center}.datetime-input-wrapper .datetime-input{width:100%;padding:.625rem 3rem .625rem .875rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datetime-input-wrapper .datetime-input::placeholder{color:#6c757d;opacity:1}.datetime-input-wrapper .datetime-input:hover:not(:disabled){border-color:#80bdff}.datetime-input-wrapper .datetime-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .datetime-input:disabled{background-color:#e9ecef;opacity:1;cursor:not-allowed}.datetime-input-wrapper .datetime-input[aria-expanded=true]{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.datetime-input-wrapper .input-icon{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-in-out;pointer-events:none}.datetime-input-wrapper .input-icon:hover:not(.disabled){color:#495057}.datetime-input-wrapper .input-icon.disabled{cursor:not-allowed;opacity:.5}.datetime-input-wrapper .input-icon svg{display:block}.datetime-input-wrapper .clear-button{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6c757d;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s ease-in-out}.datetime-input-wrapper .clear-button:hover{color:#dc3545;background-color:#dc35451a}.datetime-input-wrapper .clear-button:focus{outline:2px solid #80bdff;outline-offset:2px}.datetime-input-wrapper .clear-button svg{display:block}.datetime-input-wrapper .dropdown-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:320px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;box-shadow:0 .5rem 1rem #0000002d;padding:1rem;opacity:0;transform:translateY(-10px);transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none;max-height:calc(100vh - 100px);overflow-y:auto}.datetime-input-wrapper .dropdown-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-wrapper .dropdown-panel.closed{opacity:0;transform:translateY(-10px);pointer-events:none}.datetime-input-wrapper .calendar-wrapper{margin:0;padding:0}.datetime-input-wrapper .calendar-wrapper ::ng-deep hijri-gregorian-datepicker{display:block;width:100%}@media (max-width: 576px){.datetime-input-wrapper .dropdown-panel{left:0;right:0;min-width:unset;width:100%}}.datetime-input-wrapper .datetime-input.rtl-input{padding:.625rem .875rem .625rem 3rem}.datetime-input-wrapper .input-icon.rtl-icon{right:auto;left:.875rem}.datetime-input-wrapper .clear-button.rtl-clear{right:auto;left:2.75rem}.datetime-input-wrapper *:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast: high){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.datetime-input-wrapper .datetime-input,.datetime-input-wrapper .dropdown-panel,.datetime-input-wrapper .input-icon,.datetime-input-wrapper .clear-button{transition:none}}\n"] }]
|
|
29658
29720
|
}], ctorParameters: () => [{ type: DateUtilitiesService }], propDecorators: { placeholder: [{
|
|
29659
29721
|
type: Input
|
|
29660
29722
|
}], dateFormat: [{
|