@yoozsoft/yoozsoft-ng 5.3.5 → 7.1.1

package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs

@@ -1,446 +1,380 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, forwardRef, Input, Component } from '@angular/core';
-import * as i2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbDateParserFormatter, NgbDatepickerI18n, NgbCalendar, NgbDatepickerModule, NgbCalendarPersian, NgbDate } from '@ng-bootstrap/ng-bootstrap';
-import * as i3 from '@angular/forms';
+import { input, output, signal, effect, ChangeDetectionStrategy, Component, Injectable, inject, computed, forwardRef } from '@angular/core';
+import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerModule, NgbDatepickerI18n, NgbCalendar, NgbCalendarPersian, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { YsPersianDatePipe } from '@yoozsoft/yoozsoft-ng/pipes';
+import { PERSIAN_WEEKDAYS_SHORT, PERSIAN_MONTHS, JalaliDate, compareDates } from '@yoozsoft/yoozsoft-ng/date';
 
-class DateTimeFormat {
-}
-
-class JalaliDate {
-    static daysInMonth = {
-        g_days_in_month: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
-        j_days_in_month: [31, 31, 31, 31, 31, 31, 30, 30, 30, 30, 30, 29]
-    };
-    static jalaliToGregorian(jalaliYear, jalaliMonth, jalaliDay) {
-        jalaliYear = parseInt(`${jalaliYear}`);
-        jalaliMonth = parseInt(`${jalaliMonth}`);
-        jalaliDay = parseInt(`${jalaliDay}`);
-        var jy = jalaliYear - 979;
-        var jm = jalaliMonth - 1;
-        var jd = jalaliDay - 1;
-        var j_day_no = 365 * jy + parseInt(`${jy / 33}`) * 8 + parseInt(`${(jy % 33 + 3) / 4}`);
-        for (var i = 0; i < jm; ++i)
-            j_day_no += this.daysInMonth.j_days_in_month[i];
-        j_day_no += jd;
-        var g_day_no = j_day_no + 79;
-        var gy = 1600 + 400 * parseInt(`${g_day_no / 146097}`);
-        g_day_no = g_day_no % 146097;
-        var leap = true;
-        if (g_day_no >= 36525) {
-            g_day_no--;
-            gy += 100 * parseInt(`${g_day_no / 36524}`);
-            g_day_no = g_day_no % 36524;
-            if (g_day_no >= 365)
-                g_day_no++;
-            else
-                leap = false;
-        }
-        gy += 4 * parseInt(`${g_day_no / 1461}`);
-        g_day_no %= 1461;
-        if (g_day_no >= 366) {
-            leap = false;
-            g_day_no--;
-            gy += parseInt(`${g_day_no / 365}`);
-            g_day_no = g_day_no % 365;
+class YsDatepickerGregorian {
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    weekend = input([6, 7], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekend" }] : /* istanbul ignore next */ []));
+    showFooter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+    todayLabel = input('Today', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    outsideDays = input('visible', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideDays" }] : /* istanbul ignore next */ []));
+    displayMonths = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMonths" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    model = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    /*------------Range fields */
+    rangeMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeMode" }] : /* istanbul ignore next */ []));
+    fromDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fromDate" }] : /* istanbul ignore next */ []));
+    toDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toDate" }] : /* istanbul ignore next */ []));
+    hoveredDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    dateSelect = output();
+    dateHover = output();
+    /*------------Range fields */
+    constructor() {
+        effect(() => {
+            const value = this.value();
+            if (!value) {
+                this.model.set(null);
+                return;
+            }
+            this.model.set({
+                year: value.getFullYear(),
+                month: value.getMonth() + 1,
+                day: value.getDate()
+            });
+        });
+    }
+    valueChanged(date) {
+        this.model.set(date);
+        if (!date) {
+            this.valueChange.emit(null);
+            return;
         }
-        for (var i = 0; g_day_no >= this.daysInMonth.g_days_in_month[i] + ((i == 1 && leap) ? 1 : 0); i++)
-            g_day_no -= this.daysInMonth.g_days_in_month[i] + ((i == 1 && leap) ? 1 : 0);
-        var gm = i + 1;
-        var gd = g_day_no + 1;
-        return [gy, gm, gd];
-    }
-    static gregorianToJalali(gregorianYear, gregorianMonth, gregorianDay) {
-        gregorianYear = parseInt(`${gregorianYear}`);
-        gregorianMonth = parseInt(`${gregorianMonth}`);
-        gregorianDay = parseInt(`${gregorianDay}`);
-        var gy = gregorianYear - 1600;
-        var gm = gregorianMonth - 1;
-        var gd = gregorianDay - 1;
-        var g_day_no = 365 * gy + parseInt(`${(gy + 3) / 4}`) - parseInt(`${(gy + 99) / 100}`) + parseInt(`${(gy + 399) / 400}`);
-        for (var i = 0; i < gm; ++i)
-            g_day_no += this.daysInMonth.g_days_in_month[i];
-        if (gm > 1 && ((gy % 4 == 0 && gy % 100 != 0) || (gy % 400 == 0)))
-            ++g_day_no;
-        g_day_no += gd;
-        var j_day_no = g_day_no - 79;
-        var j_np = parseInt(`${j_day_no / 12053}`);
-        j_day_no %= 12053;
-        var jy = 979 + 33 * j_np + 4 * parseInt(`${j_day_no / 1461}`);
-        j_day_no %= 1461;
-        if (j_day_no >= 366) {
-            jy += parseInt(`${(j_day_no - 1) / 365}`);
-            j_day_no = (j_day_no - 1) % 365;
+        this.valueChange.emit(new Date(date.year, date.month - 1, date.day));
+    }
+    setToday(dp) {
+        const today = new Date();
+        const model = {
+            year: today.getFullYear(),
+            month: today.getMonth() + 1,
+            day: today.getDate()
+        };
+        this.model.set(model);
+        this.valueChange.emit(today);
+        dp.navigateTo({
+            year: model.year,
+            month: model.month
+        });
+    }
+    isWeekend(date) {
+        const day = new Date(date.year, date.month - 1, date.day).getDay();
+        const weekday = day === 0
+            ? 7
+            : day;
+        return this.weekend().includes(weekday);
+    }
+    /*------------Range helpers */
+    compare(a, b) {
+        if (a.year !== b.year) {
+            return a.year - b.year;
         }
-        for (var i = 0; i < 11 && j_day_no >= this.daysInMonth.j_days_in_month[i]; ++i) {
-            j_day_no -= this.daysInMonth.j_days_in_month[i];
+        if (a.month !== b.month) {
+            return a.month - b.month;
         }
-        var jm = i + 1;
-        var jd = j_day_no + 1;
-        return [jy, jm, jd];
+        return a.day - b.day;
     }
-}
-
-class YsDateParserFormatterService extends NgbDateParserFormatter {
-    DELIMITER = '/';
-    parse(value) {
-        if (value) {
-            const date = value.split(this.DELIMITER);
-            return {
-                day: parseInt(date[0], 10),
-                month: parseInt(date[1], 10),
-                year: parseInt(date[2], 10),
-            };
-        }
-        return null;
+    isHovered(date) {
+        const hovered = this.hoveredDate();
+        const from = this.fromDate();
+        const to = this.toDate();
+        return !!(from &&
+            !to &&
+            hovered &&
+            this.compare(date, from) > 0 &&
+            this.compare(date, hovered) < 0);
     }
-    format(date) {
-        return date ? date.year + this.DELIMITER + date.month + this.DELIMITER + date.day : '';
+    isInside(date) {
+        const from = this.fromDate();
+        const to = this.toDate();
+        return !!(from &&
+            to &&
+            this.compare(date, from) > 0 &&
+            this.compare(date, to) < 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDateParserFormatterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDateParserFormatterService, providedIn: 'root' });
+    isRange(date) {
+        const from = this.fromDate();
+        const to = this.toDate();
+        return !!((from &&
+            date.year === from.year &&
+            date.month === from.month &&
+            date.day === from.day)
+            ||
+                (to &&
+                    date.year === to.year &&
+                    date.month === to.month &&
+                    date.day === to.day)
+            ||
+                this.isInside(date)
+            ||
+                this.isHovered(date));
+    }
+    isStart(date) {
+        const from = this.fromDate();
+        return !!(from &&
+            date.year === from.year &&
+            date.month === from.month &&
+            date.day === from.day);
+    }
+    isEnd(date) {
+        const to = this.toDate();
+        return !!(to &&
+            date.year === to.year &&
+            date.month === to.month &&
+            date.day === to.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerGregorian, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsDatepickerGregorian, isStandalone: true, selector: "ys-datepicker-gregorian", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null }, displayMonths: { classPropertyName: "displayMonths", publicName: "displayMonths", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, fromDate: { classPropertyName: "fromDate", publicName: "fromDate", isSignal: true, isRequired: false, transformFunction: null }, toDate: { classPropertyName: "toDate", publicName: "toDate", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateSelect: "dateSelect", dateHover: "dateHover" }, ngImport: i0, template: "<ngb-datepicker #dp [navigation]=\"'select'\" [firstDayOfWeek]=\"firstDayOfWeek()\" [disabled]=\"disabled()\"\n    [dayTemplate]=\"dayTemplate\" [footerTemplate]=\"footerTemplate\" [ngModel]=\"model()\"\n    (ngModelChange)=\"valueChanged($event)\" [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n</ngb-datepicker>\n\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-focused=\"focused\">\n\n    <span class=\"ys-day\" [class.ys-selected]=\"selected\" [class.ys-focused]=\"focused\"\n        [class.ys-weekend]=\"isWeekend(date)\" [class.ys-hidden]=\"date.month !== currentMonth\"\n        [class.text-muted]=\"date.month !== currentMonth\" [class.ys-range]=\"rangeMode() && isRange(date)\"\n        [class.ys-range-start]=\"rangeMode() && isStart(date)\" [class.ys-range-end]=\"rangeMode() && isEnd(date)\"\n        (click)=\"dateSelect.emit(date)\" (mouseenter)=\"dateHover.emit(date)\">\n\n        {{ date.day }}\n\n    </span>\n\n</ng-template>\n\n<ng-template #footerTemplate>\n    @if(showFooter()) {\n    <div class=\"ys-datepicker-footer border-top\">\n\n        <button type=\"button\" class=\"btn btn-sm btn-primary float-start mb-2\" [disabled]=\"disabled()\"\n            (click)=\"setToday(dp)\">\n\n            {{ todayLabel() }}\n\n        </button>\n\n    </div>\n    }\n</ng-template>", styles: [".ys-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.ys-day:hover,.ys-focused{background:var(--bs-secondary-bg)}.ys-selected{background:var(--bs-primary);color:var(--bs-white)}.ys-selected.ys-day:hover{color:var(--bs-body-color)}.ys-weekend{color:var(--bs-danger)}.ys-hidden{opacity:.5}.ys-datepicker-footer{padding:.5rem}.ys-range{background-color:var(--bs-primary-bg-subtle);border-radius:0}.ys-range-start,.ys-range-end{background-color:var(--bs-primary);color:var(--bs-white)}.ys-range-start{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.ys-range-end{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ys-range-start.ys-day:hover,.ys-range-end.ys-day:hover{color:var(--bs-body-color)}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDateParserFormatterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerGregorian, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-datepicker-gregorian', imports: [
+                        NgbDatepickerModule,
+                        FormsModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngb-datepicker #dp [navigation]=\"'select'\" [firstDayOfWeek]=\"firstDayOfWeek()\" [disabled]=\"disabled()\"\n    [dayTemplate]=\"dayTemplate\" [footerTemplate]=\"footerTemplate\" [ngModel]=\"model()\"\n    (ngModelChange)=\"valueChanged($event)\" [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n</ngb-datepicker>\n\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-focused=\"focused\">\n\n    <span class=\"ys-day\" [class.ys-selected]=\"selected\" [class.ys-focused]=\"focused\"\n        [class.ys-weekend]=\"isWeekend(date)\" [class.ys-hidden]=\"date.month !== currentMonth\"\n        [class.text-muted]=\"date.month !== currentMonth\" [class.ys-range]=\"rangeMode() && isRange(date)\"\n        [class.ys-range-start]=\"rangeMode() && isStart(date)\" [class.ys-range-end]=\"rangeMode() && isEnd(date)\"\n        (click)=\"dateSelect.emit(date)\" (mouseenter)=\"dateHover.emit(date)\">\n\n        {{ date.day }}\n\n    </span>\n\n</ng-template>\n\n<ng-template #footerTemplate>\n    @if(showFooter()) {\n    <div class=\"ys-datepicker-footer border-top\">\n\n        <button type=\"button\" class=\"btn btn-sm btn-primary float-start mb-2\" [disabled]=\"disabled()\"\n            (click)=\"setToday(dp)\">\n\n            {{ todayLabel() }}\n\n        </button>\n\n    </div>\n    }\n</ng-template>", styles: [".ys-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.ys-day:hover,.ys-focused{background:var(--bs-secondary-bg)}.ys-selected{background:var(--bs-primary);color:var(--bs-white)}.ys-selected.ys-day:hover{color:var(--bs-body-color)}.ys-weekend{color:var(--bs-danger)}.ys-hidden{opacity:.5}.ys-datepicker-footer{padding:.5rem}.ys-range{background-color:var(--bs-primary-bg-subtle);border-radius:0}.ys-range-start,.ys-range-end{background-color:var(--bs-primary);color:var(--bs-white)}.ys-range-start{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.ys-range-end{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ys-range-start.ys-day:hover,.ys-range-end.ys-day:hover{color:var(--bs-body-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }], displayMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMonths", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], fromDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromDate", required: false }] }], toDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "toDate", required: false }] }], hoveredDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoveredDate", required: false }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }], dateHover: [{ type: i0.Output, args: ["dateHover"] }] } });
 
-var LanguageType;
-(function (LanguageType) {
-    LanguageType[LanguageType["en"] = 0] = "en";
-    LanguageType[LanguageType["fa"] = 1] = "fa";
-    LanguageType[LanguageType["fr"] = 2] = "fr";
-})(LanguageType || (LanguageType = {}));
-const I18N_VALUES = {
-    "en": {
-        weekdays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
-        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-        weekLabel: 'week'
-    },
-    "fa": {
-        weekdays: ['د', 'س', 'چ', 'پ', 'ج', 'ش', 'ی'],
-        months: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
-        weekLabel: 'هفته'
-    },
-    "fr": {
-        weekdays: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
-        months: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Déc'],
-        weekLabel: 'sem'
-    }
-};
-class I18n {
-    language = LanguageType[LanguageType.en];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: I18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: I18n });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: I18n, decorators: [{
-            type: Injectable
-        }] });
-class YsDatepickerI18nService extends NgbDatepickerI18n {
-    _i18n = inject(I18n);
-    constructor() {
-        super();
-    }
+class YsPersianDatepickerI18n extends NgbDatepickerI18n {
     getWeekdayLabel(weekday) {
-        return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
-    }
-    getWeekLabel() {
-        return I18N_VALUES[this._i18n.language].weekLabel;
+        return PERSIAN_WEEKDAYS_SHORT[weekday - 1];
     }
     getMonthShortName(month) {
-        return I18N_VALUES[this._i18n.language].months[month - 1];
+        return PERSIAN_MONTHS[month - 1];
     }
     getMonthFullName(month) {
-        return this.getMonthShortName(month);
+        return PERSIAN_MONTHS[month - 1];
     }
     getDayAriaLabel(date) {
-        return `${date.day}-${date.month}-${date.year}`;
+        return `${date.year}/${date.month}/${date.day}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerI18nService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPersianDatepickerI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPersianDatepickerI18n });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerI18nService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class YsDatepickerComponent {
-    i18N;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPersianDatepickerI18n, decorators: [{
+            type: Injectable
+        }] });
+class YsDatepickerJalali {
     calendar = inject(NgbCalendar);
-    today = inject(NgbCalendar).getToday();
-    firstDayOfWeek = 1;
-    weekend = [6, 7];
-    _language = LanguageType[LanguageType.en];
-    get language() {
-        return this._language;
-    }
-    set language(value) {
-        this._language = value;
-        this.i18N.language = this._language;
-    }
-    isFooter = true;
-    todayLabel = "Today";
-    footer = null;
-    _value = null;
-    get value() {
-        return this._value;
-    }
-    set value(val) {
-        this._value = val;
-    }
-    disabled = false;
-    onChange = () => { };
-    onTouched = () => { };
-    constructor(i18N) {
-        this.i18N = i18N;
-    }
-    writeValue(obj) {
-        if (!obj) {
-            this.value = null;
-            return;
-        }
-        var date = obj;
-        this.value = { year: date.getFullYear(), month: (date.getMonth() + 1), day: date.getDate() };
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    markDisabled = (date, current) => date.month !== current?.month;
-    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
-    valueChanged(newDate) {
-        if (newDate) {
-            if (typeof newDate == 'string') {
-                let temp = newDate.split('/');
-                let res = new Date(+temp[0], (+temp[1]) - 1, +temp[2]);
-                this.onChange(res);
-                this.onTouched(res);
-            }
-            else {
-                let res = new Date(newDate.year, newDate.month - 1, newDate.day);
-                this.onChange(res);
-                this.onTouched(res);
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    weekend = input([5], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekend" }] : /* istanbul ignore next */ []));
+    showFooter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+    todayLabel = input('امروز', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    outsideDays = input('visible', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideDays" }] : /* istanbul ignore next */ []));
+    displayMonths = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMonths" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    model = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    /*------------Range fields */
+    rangeMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeMode" }] : /* istanbul ignore next */ []));
+    fromDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fromDate" }] : /* istanbul ignore next */ []));
+    toDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toDate" }] : /* istanbul ignore next */ []));
+    hoveredDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    dateSelect = output();
+    dateHover = output();
+    /*------------Range fields */
+    constructor() {
+        effect(() => {
+            const value = this.value();
+            if (!value) {
+                this.model.set(null);
+                return;
             }
-        }
-        else {
-            this.onChange(null);
-            this.onTouched(null);
-        }
-    }
-    setToday() {
-        this.value = this.today;
-        this.valueChanged(this.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerComponent, isStandalone: true, selector: "ys-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => YsDatepickerComponent),
-                multi: true
-            },
-            I18n,
-            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-            { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<ngb-datepicker #dp [(ngModel)]=\"value\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n  [footerTemplate]=\"footerTemplate\" placeholder=\"yyyy/mm/dd\" [disabled]=\"disabled\"\r\n  (ngModelChange)=\"valueChanged(value)\" />\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"dp.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i2.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ys-datepicker', imports: [NgbDatepickerModule, FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => YsDatepickerComponent),
-                            multi: true
-                        },
-                        I18n,
-                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-                    ], template: "<ngb-datepicker #dp [(ngModel)]=\"value\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n  [footerTemplate]=\"footerTemplate\" placeholder=\"yyyy/mm/dd\" [disabled]=\"disabled\"\r\n  (ngModelChange)=\"valueChanged(value)\" />\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"dp.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: I18n }], propDecorators: { firstDayOfWeek: [{
-                type: Input
-            }], weekend: [{
-                type: Input
-            }], language: [{
-                type: Input
-            }], isFooter: [{
-                type: Input
-            }], todayLabel: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-
-class YsDatepickerPersianComponent {
-    i18N;
-    calendar = inject(NgbCalendar);
-    today = inject(NgbCalendar).getToday();
-    firstDayOfWeek = 6;
-    weekend = [5];
-    _language = LanguageType[LanguageType.fa];
-    get language() {
-        return this._language;
-    }
-    set language(value) {
-        this._language = value;
-        this.i18N.language = this._language;
-    }
-    isFooter = true;
-    todayLabel = "امروز";
-    footer = null;
-    _value = null;
-    get value() {
-        return this._value;
-    }
-    set value(val) {
-        this._value = val;
-    }
-    disabled = false;
-    onChange = () => { };
-    onTouched = () => { };
-    constructor(i18N) {
-        this.i18N = i18N;
-        this.language = LanguageType[LanguageType.fa];
-    }
-    writeValue(obj) {
-        if (!obj) {
-            this.value = null;
+            const jalali = JalaliDate.fromDate(value);
+            this.model.set({
+                year: jalali.year,
+                month: jalali.month,
+                day: jalali.day
+            });
+        });
+    }
+    valueChanged(date) {
+        this.model.set(date);
+        if (!date) {
+            this.valueChange.emit(null);
             return;
         }
-        var date = obj;
-        let persianDate = JalaliDate.gregorianToJalali(date.getFullYear(), date.getMonth() + 1, date.getDate());
-        this.value = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    markDisabled = (date, current) => date.month !== current?.month;
-    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
-    valueChanged(newDate) {
-        if (newDate) {
-            if (typeof newDate == 'string') {
-                let temp = newDate.split('/');
-                let convertedDate = JalaliDate.jalaliToGregorian(+temp[0], (+temp[1]) - 1, +temp[2]);
-                let res = new Date(+convertedDate[0], (+convertedDate[1]) - 1, +convertedDate[2]);
-                this.onChange(res);
-                this.onTouched(res);
-            }
-            else {
-                let convertedDate = JalaliDate.jalaliToGregorian(newDate.year, newDate.month, newDate.day);
-                var res = new Date(+convertedDate[0], +convertedDate[1] - 1, +convertedDate[2]);
-                this.onChange(res);
-                this.onTouched(res);
-            }
+        const gregorian = JalaliDate.toDate({
+            year: date.year,
+            month: date.month,
+            day: date.day
+        });
+        this.valueChange.emit(gregorian);
+    }
+    setToday(dp) {
+        const today = this.calendar.getToday();
+        this.model.set(today);
+        this.valueChange.emit(JalaliDate.toDate({
+            year: today.year,
+            month: today.month,
+            day: today.day
+        }));
+        dp.navigateTo({
+            year: today.year,
+            month: today.month
+        });
+    }
+    isWeekend(date) {
+        return this.weekend().includes(JalaliDate.dayOfWeek(date.year, date.month, date.day));
+    }
+    /*------------Range helpers */
+    compare(a, b) {
+        if (a.year !== b.year) {
+            return a.year - b.year;
         }
-        else {
-            this.onChange(null);
-            this.onTouched(null);
+        if (a.month !== b.month) {
+            return a.month - b.month;
         }
+        return a.day - b.day;
     }
-    setToday() {
-        this.value = this.today;
-        this.valueChanged(this.value);
+    isHovered(date) {
+        const hovered = this.hoveredDate();
+        const from = this.fromDate();
+        const to = this.toDate();
+        return !!(from &&
+            !to &&
+            hovered &&
+            this.compare(date, from) > 0 &&
+            this.compare(date, hovered) < 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerPersianComponent, isStandalone: true, selector: "ys-datepicker-persian", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => YsDatepickerPersianComponent),
-                multi: true
-            },
-            I18n,
+    isInside(date) {
+        const from = this.fromDate();
+        const to = this.toDate();
+        return !!(from &&
+            to &&
+            this.compare(date, from) > 0 &&
+            this.compare(date, to) < 0);
+    }
+    isRange(date) {
+        const from = this.fromDate();
+        const to = this.toDate();
+        return !!((from &&
+            date.year === from.year &&
+            date.month === from.month &&
+            date.day === from.day)
+            ||
+                (to &&
+                    date.year === to.year &&
+                    date.month === to.month &&
+                    date.day === to.day)
+            ||
+                this.isInside(date)
+            ||
+                this.isHovered(date));
+    }
+    isStart(date) {
+        const from = this.fromDate();
+        return !!(from &&
+            date.year === from.year &&
+            date.month === from.month &&
+            date.day === from.day);
+    }
+    isEnd(date) {
+        const to = this.toDate();
+        return !!(to &&
+            date.year === to.year &&
+            date.month === to.month &&
+            date.day === to.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerJalali, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsDatepickerJalali, isStandalone: true, selector: "ys-datepicker-jalali", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null }, displayMonths: { classPropertyName: "displayMonths", publicName: "displayMonths", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, fromDate: { classPropertyName: "fromDate", publicName: "fromDate", isSignal: true, isRequired: false, transformFunction: null }, toDate: { classPropertyName: "toDate", publicName: "toDate", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateSelect: "dateSelect", dateHover: "dateHover" }, providers: [
             { provide: NgbCalendar, useClass: NgbCalendarPersian },
-            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-            { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<ngb-datepicker #dp [(ngModel)]=\"value\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n  [footerTemplate]=\"footerTemplate\" placeholder=\"yyyy/mm/dd\" [disabled]=\"disabled\"\r\n  (ngModelChange)=\"valueChanged(value)\" />\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"dp.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i2.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+            { provide: NgbDatepickerI18n, useClass: YsPersianDatepickerI18n }
+        ], ngImport: i0, template: "<ngb-datepicker #dp [navigation]=\"'select'\" [firstDayOfWeek]=\"firstDayOfWeek()\" [disabled]=\"disabled()\"\n    [dayTemplate]=\"dayTemplate\" [footerTemplate]=\"footerTemplate\" [ngModel]=\"model()\"\n    (ngModelChange)=\"valueChanged($event)\" [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n</ngb-datepicker>\n\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-focused=\"focused\">\n\n    <span class=\"ys-day\" [class.ys-selected]=\"selected\" [class.ys-focused]=\"focused\"\n        [class.ys-weekend]=\"isWeekend(date)\" [class.ys-hidden]=\"date.month !== currentMonth\"\n        [class.text-muted]=\"date.month !== currentMonth\" [class.ys-range]=\"rangeMode() && isRange(date)\"\n        [class.ys-range-start]=\"rangeMode() && isStart(date)\" [class.ys-range-end]=\"rangeMode() && isEnd(date)\"\n        (click)=\"dateSelect.emit(date)\" (mouseenter)=\"dateHover.emit(date)\">\n\n        {{ date.day }}\n\n    </span>\n\n</ng-template>\n\n<ng-template #footerTemplate>\n    @if(showFooter()) {\n    <div class=\"ys-datepicker-footer border-top\">\n\n        <button type=\"button\" class=\"btn btn-sm btn-primary float-start mb-2\" [disabled]=\"disabled()\"\n            (click)=\"setToday(dp)\">\n\n            {{ todayLabel() }}\n\n        </button>\n\n    </div>\n    }\n</ng-template>", styles: [".ys-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.ys-day:hover,.ys-focused{background:var(--bs-secondary-bg)}.ys-selected{background:var(--bs-primary);color:var(--bs-white)}.ys-selected.ys-day:hover{color:var(--bs-body-color)}.ys-weekend{color:var(--bs-danger)}.ys-hidden{opacity:.5}.ys-datepicker-footer{padding:.5rem}.ys-range{background-color:var(--bs-primary-bg-subtle);border-radius:0}.ys-range-start,.ys-range-end{background-color:var(--bs-primary);color:var(--bs-white)}.ys-range-start{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.ys-range-end{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ys-range-start.ys-day:hover,.ys-range-end.ys-day:hover{color:var(--bs-body-color)}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerJalali, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-persian', imports: [NgbDatepickerModule, FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => YsDatepickerPersianComponent),
-                            multi: true
-                        },
-                        I18n,
+            args: [{ selector: 'ys-datepicker-jalali', imports: [
+                        NgbDatepickerModule,
+                        FormsModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NgbCalendar, useClass: NgbCalendarPersian },
-                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-                    ], template: "<ngb-datepicker #dp [(ngModel)]=\"value\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n  [footerTemplate]=\"footerTemplate\" placeholder=\"yyyy/mm/dd\" [disabled]=\"disabled\"\r\n  (ngModelChange)=\"valueChanged(value)\" />\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"dp.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: I18n }], propDecorators: { firstDayOfWeek: [{
-                type: Input
-            }], weekend: [{
-                type: Input
-            }], language: [{
-                type: Input
-            }], isFooter: [{
-                type: Input
-            }], todayLabel: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+                        { provide: NgbDatepickerI18n, useClass: YsPersianDatepickerI18n }
+                    ], template: "<ngb-datepicker #dp [navigation]=\"'select'\" [firstDayOfWeek]=\"firstDayOfWeek()\" [disabled]=\"disabled()\"\n    [dayTemplate]=\"dayTemplate\" [footerTemplate]=\"footerTemplate\" [ngModel]=\"model()\"\n    (ngModelChange)=\"valueChanged($event)\" [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n</ngb-datepicker>\n\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-focused=\"focused\">\n\n    <span class=\"ys-day\" [class.ys-selected]=\"selected\" [class.ys-focused]=\"focused\"\n        [class.ys-weekend]=\"isWeekend(date)\" [class.ys-hidden]=\"date.month !== currentMonth\"\n        [class.text-muted]=\"date.month !== currentMonth\" [class.ys-range]=\"rangeMode() && isRange(date)\"\n        [class.ys-range-start]=\"rangeMode() && isStart(date)\" [class.ys-range-end]=\"rangeMode() && isEnd(date)\"\n        (click)=\"dateSelect.emit(date)\" (mouseenter)=\"dateHover.emit(date)\">\n\n        {{ date.day }}\n\n    </span>\n\n</ng-template>\n\n<ng-template #footerTemplate>\n    @if(showFooter()) {\n    <div class=\"ys-datepicker-footer border-top\">\n\n        <button type=\"button\" class=\"btn btn-sm btn-primary float-start mb-2\" [disabled]=\"disabled()\"\n            (click)=\"setToday(dp)\">\n\n            {{ todayLabel() }}\n\n        </button>\n\n    </div>\n    }\n</ng-template>", styles: [".ys-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.ys-day:hover,.ys-focused{background:var(--bs-secondary-bg)}.ys-selected{background:var(--bs-primary);color:var(--bs-white)}.ys-selected.ys-day:hover{color:var(--bs-body-color)}.ys-weekend{color:var(--bs-danger)}.ys-hidden{opacity:.5}.ys-datepicker-footer{padding:.5rem}.ys-range{background-color:var(--bs-primary-bg-subtle);border-radius:0}.ys-range-start,.ys-range-end{background-color:var(--bs-primary);color:var(--bs-white)}.ys-range-start{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.ys-range-end{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ys-range-start.ys-day:hover,.ys-range-end.ys-day:hover{color:var(--bs-body-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }], displayMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMonths", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], fromDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromDate", required: false }] }], toDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "toDate", required: false }] }], hoveredDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoveredDate", required: false }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }], dateHover: [{ type: i0.Output, args: ["dateHover"] }] } });
 
-class YsDatepickerPopupPersianComponent {
-    i18N;
-    calendar = inject(NgbCalendar);
-    today = inject(NgbCalendar).getToday();
-    _value = null;
-    get value() {
-        return this._value;
-    }
-    set value(val) {
-        this._value = val;
-    }
-    container = null;
-    firstDayOfWeek = 6;
-    weekend = [5];
-    _language = LanguageType[LanguageType.fa];
-    get language() {
-        return this._language;
-    }
-    set language(value) {
-        this._language = value;
-        this.i18N.language = this._language;
-    }
-    isFooter = true;
-    closeLabel = "بستن";
-    todayLabel = "امروز";
-    footer = null;
-    calendarIconClass = "fa-solid fa-calendar-days";
-    disabled = false;
-    onChange = () => { };
-    onTouched = () => { };
-    constructor(i18N) {
-        this.i18N = i18N;
-        this.language = LanguageType[LanguageType.fa];
-    }
-    writeValue(obj) {
-        if (!obj) {
-            this.value = null;
-            return;
+class YsDatepickerPopup {
+    calendarType = input('gregorian', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarType" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    weekend = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekend" }] : /* istanbul ignore next */ []));
+    showFooter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+    todayLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    outsideDays = input('visible', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideDays" }] : /* istanbul ignore next */ []));
+    displayMonths = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMonths" }] : /* istanbul ignore next */ []));
+    autoClose = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoClose" }] : /* istanbul ignore next */ []));
+    container = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    calendarIconClass = input('fa fa-calendar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarIconClass" }] : /* istanbul ignore next */ []));
+    clearIconClass = input('fa fa-xmark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearIconClass" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() ||
+        this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const value = this.value();
+        if (!value) {
+            return '';
         }
-        var date = obj;
-        let persianDate = JalaliDate.gregorianToJalali(date.getFullYear(), date.getMonth() + 1, date.getDate());
-        this.value = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
+        if (this.calendarType() === 'jalali') {
+            return new YsPersianDatePipe().transform(value, 'shortDate');
+        }
+        return value.toLocaleDateString('en-CA');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    onChange = (_) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? null);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -449,123 +383,89 @@ class YsDatepickerPopupPersianComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    markDisabled = (date, current) => date.month !== current?.month;
-    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
-    valueChanged(newDate) {
-        if (newDate) {
-            if (typeof newDate == 'string') {
-                let temp = newDate.split('/');
-                let convertedDate = JalaliDate.jalaliToGregorian(+temp[0], (+temp[1]) - 1, +temp[2]);
-                let res = new Date(+convertedDate[0], (+convertedDate[1]) - 1, +convertedDate[2]);
-                this.onChange(res);
-                this.onTouched(res);
-            }
-            else {
-                let convertedDate = JalaliDate.jalaliToGregorian(newDate.year, newDate.month, newDate.day);
-                var res = new Date(+convertedDate[0], +convertedDate[1] - 1, +convertedDate[2]);
-                this.onChange(res);
-                this.onTouched(res);
-            }
-        }
-        else {
-            this.onChange(null);
-            this.onTouched(null);
+        this.disabledState.set(isDisabled);
+    }
+    valueChanged(value, dropdown) {
+        this.value.set(value);
+        this.onChange(value);
+        this.onTouched();
+        if (this.autoClose() && value) {
+            dropdown.close();
         }
     }
-    setToday() {
-        this.value = this.today;
-        this.valueChanged(this.value);
+    clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+        this.onChange(null);
+        this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerPopupPersianComponent, isStandalone: true, selector: "ys-datepicker-popup-persian", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsDatepickerPopup, isStandalone: true, selector: "ys-datepicker-popup", inputs: { calendarType: { classPropertyName: "calendarType", publicName: "calendarType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null }, displayMonths: { classPropertyName: "displayMonths", publicName: "displayMonths", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, calendarIconClass: { classPropertyName: "calendarIconClass", publicName: "calendarIconClass", isSignal: true, isRequired: false, transformFunction: null }, clearIconClass: { classPropertyName: "clearIconClass", publicName: "clearIconClass", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => YsDatepickerPopupPersianComponent),
+                useExisting: forwardRef(() => YsDatepickerPopup),
                 multi: true
-            },
-            I18n,
-            { provide: NgbCalendar, useClass: NgbCalendarPersian },
-            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-            { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"input-group\">\r\n      <input class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dp\" [(ngModel)]=\"value\" ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\" [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n        [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n        (ngModelChange)=\"valueChanged(value)\" readonly />\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n          <i class=\"{{calendarIconClass}}\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n            <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+            }
+        ], ngImport: i0, template: "<div ngbDropdown #dropdown=\"ngbDropdown\" [container]=\"container()\" class=\"ys-datepicker-popup\">\n\n    <div class=\"input-group\">\n\n        <input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder()\" [value]=\"displayValue()\"\n            [readonly]=\"readonly()\" [disabled]=\"isDisabled()\" ngbDropdownToggle>\n\n        @if(value()) {\n\n        <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isDisabled()\" (click)=\"clear($event)\">\n            <i [class]=\"clearIconClass()\"></i>\n        </button>\n\n        }\n\n        <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isDisabled()\" ngbDropdownToggle>\n            <i [class]=\"calendarIconClass()\"></i>\n        </button>\n\n    </div>\n\n    <div ngbDropdownMenu class=\"p-0 border-0 shadow\">\n\n        @if(calendarType() === 'jalali') {\n\n        <ys-datepicker-jalali [value]=\"value()\" [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 6\"\n            [weekend]=\"weekend() ?? [5]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? '\u0627\u0645\u0631\u0648\u0632'\"\n            (valueChange)=\"valueChanged($event, dropdown)\" [outsideDays]=\"outsideDays()\"\n            [displayMonths]=\"displayMonths()\">\n        </ys-datepicker-jalali>\n\n        }\n\n        @else {\n\n        <ys-datepicker-gregorian [value]=\"value()\" [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 1\"\n            [weekend]=\"weekend() ?? [6,7]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? 'Today'\"\n            (valueChange)=\"valueChanged($event, dropdown)\" [outsideDays]=\"outsideDays()\"\n            [displayMonths]=\"displayMonths()\">\n        </ys-datepicker-gregorian>\n\n        }\n\n    </div>\n\n</div>", styles: [":host{display:block}.ys-datepicker-popup{width:100%}.ys-datepicker-popup .dropdown-toggle:after{display:none}.form-control[readonly]{cursor:pointer}.ys-datepicker-popup .input-group>input.dropdown-toggle{border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: YsDatepickerGregorian, selector: "ys-datepicker-gregorian", inputs: ["value", "disabled", "firstDayOfWeek", "weekend", "showFooter", "todayLabel", "outsideDays", "displayMonths", "rangeMode", "fromDate", "toDate", "hoveredDate"], outputs: ["valueChange", "dateSelect", "dateHover"] }, { kind: "component", type: YsDatepickerJalali, selector: "ys-datepicker-jalali", inputs: ["value", "disabled", "firstDayOfWeek", "weekend", "showFooter", "todayLabel", "outsideDays", "displayMonths", "rangeMode", "fromDate", "toDate", "hoveredDate"], outputs: ["valueChange", "dateSelect", "dateHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPopupPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerPopup, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-popup-persian', imports: [NgbDatepickerModule, FormsModule], providers: [
+            args: [{ selector: 'ys-datepicker-popup', imports: [
+                        NgbDropdownModule,
+                        YsDatepickerGregorian,
+                        YsDatepickerJalali,
+                        YsPersianDatePipe
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => YsDatepickerPopupPersianComponent),
+                            useExisting: forwardRef(() => YsDatepickerPopup),
                             multi: true
-                        },
-                        I18n,
-                        { provide: NgbCalendar, useClass: NgbCalendarPersian },
-                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-                    ], template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"input-group\">\r\n      <input class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dp\" [(ngModel)]=\"value\" ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\" [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n        [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n        (ngModelChange)=\"valueChanged(value)\" readonly />\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n          <i class=\"{{calendarIconClass}}\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n            <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input
-            }], weekend: [{
-                type: Input
-            }], language: [{
-                type: Input
-            }], isFooter: [{
-                type: Input
-            }], closeLabel: [{
-                type: Input
-            }], todayLabel: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], calendarIconClass: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+                        }
+                    ], template: "<div ngbDropdown #dropdown=\"ngbDropdown\" [container]=\"container()\" class=\"ys-datepicker-popup\">\n\n    <div class=\"input-group\">\n\n        <input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder()\" [value]=\"displayValue()\"\n            [readonly]=\"readonly()\" [disabled]=\"isDisabled()\" ngbDropdownToggle>\n\n        @if(value()) {\n\n        <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isDisabled()\" (click)=\"clear($event)\">\n            <i [class]=\"clearIconClass()\"></i>\n        </button>\n\n        }\n\n        <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isDisabled()\" ngbDropdownToggle>\n            <i [class]=\"calendarIconClass()\"></i>\n        </button>\n\n    </div>\n\n    <div ngbDropdownMenu class=\"p-0 border-0 shadow\">\n\n        @if(calendarType() === 'jalali') {\n\n        <ys-datepicker-jalali [value]=\"value()\" [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 6\"\n            [weekend]=\"weekend() ?? [5]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? '\u0627\u0645\u0631\u0648\u0632'\"\n            (valueChange)=\"valueChanged($event, dropdown)\" [outsideDays]=\"outsideDays()\"\n            [displayMonths]=\"displayMonths()\">\n        </ys-datepicker-jalali>\n\n        }\n\n        @else {\n\n        <ys-datepicker-gregorian [value]=\"value()\" [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 1\"\n            [weekend]=\"weekend() ?? [6,7]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? 'Today'\"\n            (valueChange)=\"valueChanged($event, dropdown)\" [outsideDays]=\"outsideDays()\"\n            [displayMonths]=\"displayMonths()\">\n        </ys-datepicker-gregorian>\n\n        }\n\n    </div>\n\n</div>", styles: [":host{display:block}.ys-datepicker-popup{width:100%}.ys-datepicker-popup .dropdown-toggle:after{display:none}.form-control[readonly]{cursor:pointer}.ys-datepicker-popup .input-group>input.dropdown-toggle{border-start-end-radius:0;border-end-end-radius:0}\n"] }]
+        }], propDecorators: { calendarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }], displayMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMonths", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], calendarIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarIconClass", required: false }] }], clearIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconClass", required: false }] }] } });
 
-class YsDatepickerPopupComponent {
-    i18N;
-    calendar = inject(NgbCalendar);
-    today = inject(NgbCalendar).getToday();
-    _value = null;
-    get value() {
-        return this._value;
-    }
-    set value(val) {
-        this._value = val;
-    }
-    container = null;
-    firstDayOfWeek = 1;
-    weekend = [6, 7];
-    _language = LanguageType[LanguageType.en];
-    get language() {
-        return this._language;
-    }
-    set language(value) {
-        this._language = value;
-        this.i18N.language = this._language;
-    }
-    isFooter = true;
-    closeLabel = "Close";
-    todayLabel = "Today";
-    footer = null;
-    calendarIconClass = "fa-solid fa-calendar-days";
-    disabled = false;
-    onChange = () => { };
+class YsDatepickerRange {
+    calendarType = input('gregorian', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarType" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    weekend = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekend" }] : /* istanbul ignore next */ []));
+    showFooter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+    todayLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    outsideDays = input('visible', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideDays" }] : /* istanbul ignore next */ []));
+    displayMonths = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMonths" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() ||
+        this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    fromDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fromDate" }] : /* istanbul ignore next */ []));
+    toDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toDate" }] : /* istanbul ignore next */ []));
+    hoveredDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    onChange = (_) => { };
     onTouched = () => { };
-    constructor(i18N) {
-        this.i18N = i18N;
-    }
-    writeValue(obj) {
-        if (!obj) {
-            this.value = null;
+    writeValue(value) {
+        if (!value) {
+            this.fromDate.set(null);
+            this.toDate.set(null);
             return;
         }
-        var date = obj;
-        this.value = { year: date.getFullYear(), month: (date.getMonth() + 1), day: date.getDate() };
+        this.fromDate.set(value.from
+            ? this.fromJsDate(value.from)
+            : null);
+        this.toDate.set(value.to
+            ? this.fromJsDate(value.to)
+            : null);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -574,131 +474,128 @@ class YsDatepickerPopupComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    markDisabled = (date, current) => date.month !== current?.month;
-    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
-    valueChanged(newDate) {
-        if (newDate) {
-            if (typeof newDate == 'string') {
-                let temp = newDate.split('/');
-                let res = new Date(+temp[0], (+temp[1]) - 1, +temp[2]);
-                this.onChange(res);
-                this.onTouched(res);
-            }
-            else {
-                let res = new Date(newDate.year, newDate.month - 1, newDate.day);
-                this.onChange(res);
-                this.onTouched(res);
-            }
+        this.disabledState.set(isDisabled);
+    }
+    select(date) {
+        const from = this.fromDate();
+        const to = this.toDate();
+        if (!from) {
+            this.fromDate.set(date);
+            return;
         }
-        else {
-            this.onChange(null);
-            this.onTouched(null);
+        if (from && !to && compareDates(date, from) >= 0) {
+            this.toDate.set(date);
+            this.emitValue();
+            return;
         }
+        this.fromDate.set(date);
+        this.toDate.set(null);
+    }
+    hover(date) {
+        this.hoveredDate.set(date);
+    }
+    emitValue() {
+        this.onChange({
+            from: this.fromDate()
+                ? this.toJsDate(this.fromDate())
+                : null,
+            to: this.toDate()
+                ? this.toJsDate(this.toDate())
+                : null
+        });
+        this.onTouched();
+    }
+    fromJsDate(date) {
+        if (this.calendarType() === 'jalali') {
+            return JalaliDate.toNgbDateStruct(JalaliDate.fromDate(date));
+        }
+        return {
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: date.getDate()
+        };
+    }
+    toJsDate(date) {
+        if (this.calendarType() === 'jalali') {
+            return JalaliDate.toDate(JalaliDate.fromNgbDateStruct(date));
+        }
+        return new Date(date.year, date.month - 1, date.day);
     }
-    setToday() {
-        this.value = this.today;
-        this.valueChanged(this.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerPopupComponent, isStandalone: true, selector: "ys-datepicker-popup", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsDatepickerRange, isStandalone: true, selector: "ys-datepicker-range", inputs: { calendarType: { classPropertyName: "calendarType", publicName: "calendarType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null }, displayMonths: { classPropertyName: "displayMonths", publicName: "displayMonths", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => YsDatepickerPopupComponent),
+                useExisting: forwardRef(() => YsDatepickerRange),
                 multi: true
-            },
-            I18n,
-            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-            { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"input-group\">\r\n      <input class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dp\" [(ngModel)]=\"value\" ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\" [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n        [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n        (ngModelChange)=\"valueChanged(value)\" readonly />\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n          <i class=\"{{calendarIconClass}}\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n            <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+            }
+        ], ngImport: i0, template: "@if(calendarType() === 'jalali') {\n\n<ys-datepicker-jalali [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 6\" [weekend]=\"weekend() ?? [5]\"\n    [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? '\u0627\u0645\u0631\u0648\u0632'\" [rangeMode]=\"true\" [fromDate]=\"fromDate()\"\n    [toDate]=\"toDate()\" [hoveredDate]=\"hoveredDate()\" (dateSelect)=\"select($event)\" (dateHover)=\"hover($event)\"\n    [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n</ys-datepicker-jalali>\n\n}\n\n@else {\n\n<ys-datepicker-gregorian [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 1\"\n    [weekend]=\"weekend() ?? [6,7]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? 'Today'\" [rangeMode]=\"true\"\n    [fromDate]=\"fromDate()\" [toDate]=\"toDate()\" [hoveredDate]=\"hoveredDate()\" (dateSelect)=\"select($event)\"\n    (dateHover)=\"hover($event)\" [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n</ys-datepicker-gregorian>\n\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: YsDatepickerGregorian, selector: "ys-datepicker-gregorian", inputs: ["value", "disabled", "firstDayOfWeek", "weekend", "showFooter", "todayLabel", "outsideDays", "displayMonths", "rangeMode", "fromDate", "toDate", "hoveredDate"], outputs: ["valueChange", "dateSelect", "dateHover"] }, { kind: "component", type: YsDatepickerJalali, selector: "ys-datepicker-jalali", inputs: ["value", "disabled", "firstDayOfWeek", "weekend", "showFooter", "todayLabel", "outsideDays", "displayMonths", "rangeMode", "fromDate", "toDate", "hoveredDate"], outputs: ["valueChange", "dateSelect", "dateHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerRange, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-popup', imports: [NgbDatepickerModule, FormsModule], providers: [
+            args: [{ selector: 'ys-datepicker-range', imports: [
+                        FormsModule,
+                        YsDatepickerGregorian,
+                        YsDatepickerJalali
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => YsDatepickerPopupComponent),
+                            useExisting: forwardRef(() => YsDatepickerRange),
                             multi: true
-                        },
-                        I18n,
-                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-                    ], template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"input-group\">\r\n      <input class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dp\" [(ngModel)]=\"value\" ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\" [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n        [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n        (ngModelChange)=\"valueChanged(value)\" readonly />\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n          <i class=\"{{calendarIconClass}}\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n            <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input
-            }], weekend: [{
-                type: Input
-            }], language: [{
-                type: Input
-            }], isFooter: [{
-                type: Input
-            }], closeLabel: [{
-                type: Input
-            }], todayLabel: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], calendarIconClass: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+                        }
+                    ], template: "@if(calendarType() === 'jalali') {\n\n<ys-datepicker-jalali [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 6\" [weekend]=\"weekend() ?? [5]\"\n    [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? '\u0627\u0645\u0631\u0648\u0632'\" [rangeMode]=\"true\" [fromDate]=\"fromDate()\"\n    [toDate]=\"toDate()\" [hoveredDate]=\"hoveredDate()\" (dateSelect)=\"select($event)\" (dateHover)=\"hover($event)\"\n    [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n</ys-datepicker-jalali>\n\n}\n\n@else {\n\n<ys-datepicker-gregorian [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 1\"\n    [weekend]=\"weekend() ?? [6,7]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? 'Today'\" [rangeMode]=\"true\"\n    [fromDate]=\"fromDate()\" [toDate]=\"toDate()\" [hoveredDate]=\"hoveredDate()\" (dateSelect)=\"select($event)\"\n    (dateHover)=\"hover($event)\" [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n</ys-datepicker-gregorian>\n\n}" }]
+        }], propDecorators: { calendarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }], displayMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMonths", required: false }] }] } });
 
-class YsDatepickerRangePopupPersianComponent {
-    i18N;
-    calendar = inject(NgbCalendar);
-    formatter = inject(NgbDateParserFormatter);
-    today = inject(NgbCalendar).getToday();
-    date;
-    hoveredDate = null;
-    _fromDate = null;
-    get fromDate() { return this._fromDate; }
-    set fromDate(value) {
-        this._fromDate = value;
-    }
-    _toDate = null;
-    get toDate() { return this._toDate; }
-    set toDate(value) {
-        this._toDate = value;
-    }
-    container = null;
-    firstDayOfWeek = 6;
-    weekend = [5];
-    _language = LanguageType[LanguageType.fa];
-    get language() {
-        return this._language;
-    }
-    set language(value) {
-        this._language = value;
-        this.i18N.language = this._language;
-    }
-    isFooter = true;
-    closeLabel = "بستن";
-    todayLabel = "امروز";
-    footer = null;
-    calendarIconClass = "fa-solid fa-calendar-days";
-    disabled = false;
-    onChange = () => { };
-    onTouched = () => { };
-    constructor(i18N) {
-        this.i18N = i18N;
-        this.language = LanguageType[LanguageType.fa];
-    }
-    writeValue(obj) {
-        if (!obj) {
-            this.fromDate = null;
-            this.toDate = null;
-            return;
+class YsDatepickerRangePopup {
+    calendarType = input('gregorian', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarType" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select date range', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    weekend = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekend" }] : /* istanbul ignore next */ []));
+    showFooter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+    todayLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    outsideDays = input('visible', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideDays" }] : /* istanbul ignore next */ []));
+    displayMonths = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMonths" }] : /* istanbul ignore next */ []));
+    autoClose = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoClose" }] : /* istanbul ignore next */ []));
+    container = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    calendarIconClass = input('fa fa-calendar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarIconClass" }] : /* istanbul ignore next */ []));
+    clearIconClass = input('fa fa-xmark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearIconClass" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() ||
+        this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const range = this.value();
+        if (!range?.from) {
+            return '';
         }
-        var fDate = obj.fromDate;
-        let persianDate = JalaliDate.gregorianToJalali(fDate.getFullYear(), fDate.getMonth() + 1, fDate.getDate());
-        this.fromDate = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
-        var tDate = obj.toDate;
-        persianDate = JalaliDate.gregorianToJalali(tDate.getFullYear(), tDate.getMonth() + 1, tDate.getDate());
-        this.toDate = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
+        if (!range.to) {
+            return this.formatDate(range.from);
+        }
+        return `${this.formatDate(range.from)} - ${this.formatDate(range.to)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    onChange = (_) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -707,154 +604,81 @@ class YsDatepickerRangePopupPersianComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    onDateSelection(date) {
-        if (!this.fromDate && !this.toDate) {
-            this.fromDate = date;
-        }
-        else if (this.fromDate && !this.toDate && date && date.after(this.fromDate)) {
-            this.toDate = date;
+        this.disabledState.set(isDisabled);
+    }
+    valueChanged(value, dropdown) {
+        this.value.set(value);
+        this.onChange(value);
+        this.onTouched();
+        if (this.autoClose() && value?.from && value?.to) {
+            dropdown.close();
         }
-        else {
-            this.toDate = null;
-            this.fromDate = date;
-        }
-        this.valueChanged();
-    }
-    isHovered(date) {
-        return (this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate));
     }
-    isInside(date) {
-        return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
+    clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+        this.onChange(null);
+        this.onTouched();
     }
-    isRange(date) {
-        return (date.equals(this.fromDate) ||
-            (this.toDate && date.equals(this.toDate)) ||
-            this.isInside(date) ||
-            this.isHovered(date));
-    }
-    markDisabled = (date, current) => date.month !== current?.month;
-    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
-    validateInput(currentValue, input) {
-        const parsed = this.formatter.parse(input);
-        return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
-    }
-    valueChanged() {
-        let range = { fromDate: null, toDate: null };
-        if (this.fromDate) {
-            let fromDateConverted = JalaliDate.jalaliToGregorian(this.fromDate.year, this.fromDate.month, this.fromDate.day);
-            range.fromDate = new Date(fromDateConverted[0], fromDateConverted[1] - 1, fromDateConverted[2]);
-        }
-        if (this.toDate) {
-            let toDateConverted = JalaliDate.jalaliToGregorian(this.toDate.year, this.toDate.month, this.toDate.day);
-            range.toDate = new Date(toDateConverted[0], toDateConverted[1] - 1, toDateConverted[2]);
+    formatDate(value) {
+        if (this.calendarType() === 'jalali') {
+            return JalaliDate.format(value, 'yyyy/MM/dd');
         }
-        this.onChange(range);
-        this.onTouched(range);
+        const year = value.getFullYear();
+        const month = String(value.getMonth() + 1).padStart(2, '0');
+        const day = String(value.getDate()).padStart(2, '0');
+        return `${year}/${month}/${day}`;
     }
-    setToday() {
-        this.fromDate = this.today;
-        this.toDate = this.today;
-        this.valueChanged();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerRangePopupPersianComponent, isStandalone: true, selector: "ys-datepicker-range-popup-persian", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerRangePopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsDatepickerRangePopup, isStandalone: true, selector: "ys-datepicker-range-popup", inputs: { calendarType: { classPropertyName: "calendarType", publicName: "calendarType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null }, displayMonths: { classPropertyName: "displayMonths", publicName: "displayMonths", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, calendarIconClass: { classPropertyName: "calendarIconClass", publicName: "calendarIconClass", isSignal: true, isRequired: false, transformFunction: null }, clearIconClass: { classPropertyName: "clearIconClass", publicName: "clearIconClass", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => YsDatepickerRangePopupPersianComponent),
+                useExisting: forwardRef(() => YsDatepickerRangePopup),
                 multi: true
-            },
-            I18n,
-            { provide: NgbCalendar, useClass: NgbCalendarPersian },
-            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-            { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"dp-hidden position-absolute\">\r\n      <div class=\"input-group\">\r\n        <input name=\"datepicker\" class=\"form-control\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n          [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\"\r\n          [dayTemplate]=\"customDay\" outsideDays=\"hidden\" [startDate]=\"fromDate!\" tabindex=\"-1\"\r\n          [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n          [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" readonly />\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpFromDate\"\r\n          [value]=\"formatter.format(fromDate)\" (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\"\r\n          [disabled]=\"disabled\" readonly />\r\n          <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n            <i class=\"{{calendarIconClass}}\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <div class=\"input-group\">\r\n          <input #dpToDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpToDate\"\r\n            [value]=\"formatter.format(toDate)\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\"\r\n            [disabled]=\"disabled\" readonly />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n              <i class=\"{{calendarIconClass}}\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n\r\n      <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n        let-focused=\"focused\">\r\n        <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\"\r\n          [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\" [class.range]=\"isRange(date)\"\r\n          [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n          (mouseleave)=\"hoveredDate = null\">\r\n          {{ date.day }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (isFooter) {\r\n          <span>\r\n            <hr class=\"my-0\" />\r\n            @if (footer) {\r\n              <span>\r\n                {{footer}}\r\n              </span>\r\n            }\r\n            @if (!footer) {\r\n              <span>\r\n                <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n                <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n              </span>\r\n            }\r\n          </span>\r\n        }\r\n      </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.dp-hidden{width:0;margin:0;border:none;padding:0}.custom-day.focused{background-color:var(--bs-gray-300)}.custom-day.range,.custom-day:hover{background-color:var(--bs-info);color:var(--bs-white)}.custom-day.faded{background-color:var(--bs-info);opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+            }
+        ], ngImport: i0, template: "<div ngbDropdown #dropdown=\"ngbDropdown\" class=\"ys-datepicker-range-popup\" [container]=\"container()\">\n\n    <div class=\"input-group\">\n\n        <input type=\"text\" class=\"form-control\" readonly ngbDropdownToggle [value]=\"displayValue()\"\n            [readonly]=\"readonly()\" [placeholder]=\"placeholder()\" [disabled]=\"isDisabled()\" />\n\n        @if(value()) {\n\n        <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isDisabled()\" (click)=\"clear($event)\">\n            <i [class]=\"clearIconClass()\"></i>\n        </button>\n\n        }\n\n        <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isDisabled()\" ngbDropdownToggle>\n            <i [class]=\"calendarIconClass()\"></i>\n        </button>\n\n    </div>\n\n    <div ngbDropdownMenu class=\"p-0 border-0 shadow\">\n\n        <ys-datepicker-range [calendarType]=\"calendarType()\" [disabled]=\"isDisabled()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\" [weekend]=\"weekend()\" [showFooter]=\"showFooter()\"\n            [todayLabel]=\"todayLabel()\" [ngModel]=\"value()\" (ngModelChange)=\"valueChanged($event, dropdown)\"\n            [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n        </ys-datepicker-range>\n\n    </div>\n\n</div>", styles: [":host{display:block}.ys-datepicker-range-popup{width:100%}.ys-datepicker-range-popup .dropdown-toggle:after{display:none}.input-group{width:100%}.form-control[readonly]{cursor:pointer}.ys-datepicker-range-popup .input-group>input.dropdown-toggle{border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: YsDatepickerRange, selector: "ys-datepicker-range", inputs: ["calendarType", "disabled", "firstDayOfWeek", "weekend", "showFooter", "todayLabel", "outsideDays", "displayMonths"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepickerRangePopup, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-range-popup-persian', imports: [NgbDatepickerModule, FormsModule], providers: [
+            args: [{ selector: 'ys-datepicker-range-popup', imports: [
+                        FormsModule,
+                        NgbDropdownModule,
+                        YsDatepickerRange
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => YsDatepickerRangePopupPersianComponent),
+                            useExisting: forwardRef(() => YsDatepickerRangePopup),
                             multi: true
-                        },
-                        I18n,
-                        { provide: NgbCalendar, useClass: NgbCalendarPersian },
-                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-                    ], template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"dp-hidden position-absolute\">\r\n      <div class=\"input-group\">\r\n        <input name=\"datepicker\" class=\"form-control\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n          [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\"\r\n          [dayTemplate]=\"customDay\" outsideDays=\"hidden\" [startDate]=\"fromDate!\" tabindex=\"-1\"\r\n          [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n          [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" readonly />\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpFromDate\"\r\n          [value]=\"formatter.format(fromDate)\" (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\"\r\n          [disabled]=\"disabled\" readonly />\r\n          <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n            <i class=\"{{calendarIconClass}}\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <div class=\"input-group\">\r\n          <input #dpToDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpToDate\"\r\n            [value]=\"formatter.format(toDate)\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\"\r\n            [disabled]=\"disabled\" readonly />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n              <i class=\"{{calendarIconClass}}\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n\r\n      <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n        let-focused=\"focused\">\r\n        <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\"\r\n          [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\" [class.range]=\"isRange(date)\"\r\n          [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n          (mouseleave)=\"hoveredDate = null\">\r\n          {{ date.day }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (isFooter) {\r\n          <span>\r\n            <hr class=\"my-0\" />\r\n            @if (footer) {\r\n              <span>\r\n                {{footer}}\r\n              </span>\r\n            }\r\n            @if (!footer) {\r\n              <span>\r\n                <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n                <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n              </span>\r\n            }\r\n          </span>\r\n        }\r\n      </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.dp-hidden{width:0;margin:0;border:none;padding:0}.custom-day.focused{background-color:var(--bs-gray-300)}.custom-day.range,.custom-day:hover{background-color:var(--bs-info);color:var(--bs-white)}.custom-day.faded{background-color:var(--bs-info);opacity:.5}\n"] }]
-        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input
-            }], weekend: [{
-                type: Input
-            }], language: [{
-                type: Input
-            }], isFooter: [{
-                type: Input
-            }], closeLabel: [{
-                type: Input
-            }], todayLabel: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], calendarIconClass: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+                        }
+                    ], template: "<div ngbDropdown #dropdown=\"ngbDropdown\" class=\"ys-datepicker-range-popup\" [container]=\"container()\">\n\n    <div class=\"input-group\">\n\n        <input type=\"text\" class=\"form-control\" readonly ngbDropdownToggle [value]=\"displayValue()\"\n            [readonly]=\"readonly()\" [placeholder]=\"placeholder()\" [disabled]=\"isDisabled()\" />\n\n        @if(value()) {\n\n        <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isDisabled()\" (click)=\"clear($event)\">\n            <i [class]=\"clearIconClass()\"></i>\n        </button>\n\n        }\n\n        <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isDisabled()\" ngbDropdownToggle>\n            <i [class]=\"calendarIconClass()\"></i>\n        </button>\n\n    </div>\n\n    <div ngbDropdownMenu class=\"p-0 border-0 shadow\">\n\n        <ys-datepicker-range [calendarType]=\"calendarType()\" [disabled]=\"isDisabled()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\" [weekend]=\"weekend()\" [showFooter]=\"showFooter()\"\n            [todayLabel]=\"todayLabel()\" [ngModel]=\"value()\" (ngModelChange)=\"valueChanged($event, dropdown)\"\n            [outsideDays]=\"outsideDays()\" [displayMonths]=\"displayMonths()\">\n        </ys-datepicker-range>\n\n    </div>\n\n</div>", styles: [":host{display:block}.ys-datepicker-range-popup{width:100%}.ys-datepicker-range-popup .dropdown-toggle:after{display:none}.input-group{width:100%}.form-control[readonly]{cursor:pointer}.ys-datepicker-range-popup .input-group>input.dropdown-toggle{border-start-end-radius:0;border-end-end-radius:0}\n"] }]
+        }], propDecorators: { calendarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }], displayMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMonths", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], calendarIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarIconClass", required: false }] }], clearIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconClass", required: false }] }] } });
 
-class YsDatepickerRangePopupComponent {
-    i18N;
-    calendar = inject(NgbCalendar);
-    formatter = inject(NgbDateParserFormatter);
-    today = inject(NgbCalendar).getToday();
-    hoveredDate = null;
-    _fromDate = null;
-    get fromDate() { return this._fromDate; }
-    set fromDate(value) {
-        this._fromDate = value;
-    }
-    _toDate = null;
-    get toDate() { return this._toDate; }
-    set toDate(value) {
-        this._toDate = value;
-    }
-    container = null;
-    firstDayOfWeek = 1;
-    weekend = [6, 7];
-    _language = LanguageType[LanguageType.en];
-    get language() {
-        return this._language;
-    }
-    set language(value) {
-        this._language = value;
-        this.i18N.language = this._language;
-    }
-    isFooter = true;
-    closeLabel = "Close";
-    todayLabel = "Today";
-    footer = null;
-    calendarIconClass = "fa-solid fa-calendar-days";
-    disabled = false;
-    onChange = () => { };
+class YsDatepicker {
+    calendarType = input('gregorian', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarType" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    weekend = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekend" }] : /* istanbul ignore next */ []));
+    showFooter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+    todayLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    outsideDays = input('visible', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideDays" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() ||
+        this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    onChange = (_) => { };
     onTouched = () => { };
-    constructor(i18N) {
-        this.i18N = i18N;
-    }
-    writeValue(obj) {
-        if (!obj) {
-            this.fromDate = null;
-            this.toDate = null;
-            return;
-        }
-        let d = obj;
-        var fDate = d.fromDate;
-        this.fromDate = { year: fDate.getFullYear(), month: (fDate.getMonth() + 1), day: fDate.getDate() };
-        var tDate = d.toDate;
-        this.toDate = { year: tDate.getFullYear(), month: (tDate.getMonth() + 1), day: tDate.getDate() };
+    writeValue(value) {
+        this.value.set(value ?? null);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -863,96 +687,35 @@ class YsDatepickerRangePopupComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.disabledState.set(isDisabled);
     }
-    onDateSelection(date) {
-        if (!this.fromDate && !this.toDate) {
-            this.fromDate = date;
-        }
-        else if (this.fromDate && !this.toDate && date && date.after(this.fromDate)) {
-            this.toDate = date;
-        }
-        else {
-            this.toDate = null;
-            this.fromDate = date;
-        }
-        this.valueChanged();
-    }
-    isHovered(date) {
-        return (this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate));
+    valueChanged(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.onTouched();
     }
-    isInside(date) {
-        return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
-    }
-    isRange(date) {
-        return (date.equals(this.fromDate) ||
-            (this.toDate && date.equals(this.toDate)) ||
-            this.isInside(date) ||
-            this.isHovered(date));
-    }
-    markDisabled = (date, current) => date.month !== current?.month;
-    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
-    validateInput(currentValue, input) {
-        const parsed = this.formatter.parse(input);
-        return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
-    }
-    valueChanged() {
-        const fromDateTemp = this.fromDate ? new Date(this.fromDate.year, this.fromDate.month - 1, this.fromDate.day) : null;
-        const toDateTemp = this.toDate ? new Date(this.toDate.year, this.toDate.month - 1, this.toDate.day) : null;
-        const res = { fromDate: fromDateTemp, toDate: toDateTemp };
-        this.onChange(res);
-        this.onTouched(res);
-    }
-    setToday() {
-        this.fromDate = this.today;
-        this.toDate = this.today;
-        this.valueChanged();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerRangePopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerRangePopupComponent, isStandalone: true, selector: "ys-datepicker-range-popup", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsDatepicker, isStandalone: true, selector: "ys-datepicker", inputs: { calendarType: { classPropertyName: "calendarType", publicName: "calendarType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => YsDatepickerRangePopupComponent),
+                useExisting: forwardRef(() => YsDatepicker),
                 multi: true
-            },
-            I18n,
-            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-            { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"dp-hidden position-absolute\">\r\n      <div class=\"input-group\">\r\n        <input name=\"datepicker\" class=\"form-control\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n          [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\"\r\n          [dayTemplate]=\"customDay\" outsideDays=\"hidden\" [startDate]=\"fromDate!\" tabindex=\"-1\"\r\n          [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n          [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" readonly />\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpFromDate\"\r\n          [value]=\"formatter.format(fromDate)\" (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\"\r\n          [disabled]=\"disabled\" readonly />\r\n          <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n            <i class=\"{{calendarIconClass}}\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <div class=\"input-group\">\r\n          <input #dpToDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpToDate\"\r\n            [value]=\"formatter.format(toDate)\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\"\r\n            [disabled]=\"disabled\" readonly />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n              <i class=\"{{calendarIconClass}}\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n\r\n      <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n        let-focused=\"focused\">\r\n        <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\"\r\n          [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\" [class.range]=\"isRange(date)\"\r\n          [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n          (mouseleave)=\"hoveredDate = null\">\r\n          {{ date.day }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (isFooter) {\r\n          <span>\r\n            <hr class=\"my-0\" />\r\n            @if (footer) {\r\n              <span>\r\n                {{footer}}\r\n              </span>\r\n            }\r\n            @if (!footer) {\r\n              <span>\r\n                <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n                <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n              </span>\r\n            }\r\n          </span>\r\n        }\r\n      </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.dp-hidden{width:0;margin:0;border:none;padding:0}.custom-day.focused{background-color:var(--bs-gray-300)}.custom-day.range,.custom-day:hover{background-color:var(--bs-info);color:var(--bs-white)}.custom-day.faded{background-color:var(--bs-info);opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+            }
+        ], ngImport: i0, template: "@if(calendarType() === 'jalali') {\n\n<ys-datepicker-jalali [value]=\"value()\" [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 6\"\n    [weekend]=\"weekend() ?? [5]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? '\u0627\u0645\u0631\u0648\u0632'\"\n    (valueChange)=\"valueChanged($event)\" [outsideDays]=\"outsideDays()\">\n</ys-datepicker-jalali>\n\n}\n@else {\n\n<ys-datepicker-gregorian [value]=\"value()\" [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 1\"\n    [weekend]=\"weekend() ?? [6,7]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? 'Today'\"\n    (valueChange)=\"valueChanged($event)\" [outsideDays]=\"outsideDays()\">\n</ys-datepicker-gregorian>\n\n}", styles: [""], dependencies: [{ kind: "component", type: YsDatepickerGregorian, selector: "ys-datepicker-gregorian", inputs: ["value", "disabled", "firstDayOfWeek", "weekend", "showFooter", "todayLabel", "outsideDays", "displayMonths", "rangeMode", "fromDate", "toDate", "hoveredDate"], outputs: ["valueChange", "dateSelect", "dateHover"] }, { kind: "component", type: YsDatepickerJalali, selector: "ys-datepicker-jalali", inputs: ["value", "disabled", "firstDayOfWeek", "weekend", "showFooter", "todayLabel", "outsideDays", "displayMonths", "rangeMode", "fromDate", "toDate", "hoveredDate"], outputs: ["valueChange", "dateSelect", "dateHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerRangePopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-range-popup', imports: [NgbDatepickerModule, FormsModule], providers: [
+            args: [{ selector: 'ys-datepicker', imports: [
+                        YsDatepickerGregorian,
+                        YsDatepickerJalali
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => YsDatepickerRangePopupComponent),
+                            useExisting: forwardRef(() => YsDatepicker),
                             multi: true
-                        },
-                        I18n,
-                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
-                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-                    ], template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"dp-hidden position-absolute\">\r\n      <div class=\"input-group\">\r\n        <input name=\"datepicker\" class=\"form-control\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n          [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\"\r\n          [dayTemplate]=\"customDay\" outsideDays=\"hidden\" [startDate]=\"fromDate!\" tabindex=\"-1\"\r\n          [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n          [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" readonly />\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpFromDate\"\r\n          [value]=\"formatter.format(fromDate)\" (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\"\r\n          [disabled]=\"disabled\" readonly />\r\n          <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n            <i class=\"{{calendarIconClass}}\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <div class=\"input-group\">\r\n          <input #dpToDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpToDate\"\r\n            [value]=\"formatter.format(toDate)\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\"\r\n            [disabled]=\"disabled\" readonly />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n              <i class=\"{{calendarIconClass}}\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n\r\n      <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n        let-focused=\"focused\">\r\n        <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\"\r\n          [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\" [class.range]=\"isRange(date)\"\r\n          [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n          (mouseleave)=\"hoveredDate = null\">\r\n          {{ date.day }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (isFooter) {\r\n          <span>\r\n            <hr class=\"my-0\" />\r\n            @if (footer) {\r\n              <span>\r\n                {{footer}}\r\n              </span>\r\n            }\r\n            @if (!footer) {\r\n              <span>\r\n                <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n                <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n              </span>\r\n            }\r\n          </span>\r\n        }\r\n      </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.dp-hidden{width:0;margin:0;border:none;padding:0}.custom-day.focused{background-color:var(--bs-gray-300)}.custom-day.range,.custom-day:hover{background-color:var(--bs-info);color:var(--bs-white)}.custom-day.faded{background-color:var(--bs-info);opacity:.5}\n"] }]
-        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input
-            }], weekend: [{
-                type: Input
-            }], language: [{
-                type: Input
-            }], isFooter: [{
-                type: Input
-            }], closeLabel: [{
-                type: Input
-            }], todayLabel: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], calendarIconClass: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+                        }
+                    ], template: "@if(calendarType() === 'jalali') {\n\n<ys-datepicker-jalali [value]=\"value()\" [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 6\"\n    [weekend]=\"weekend() ?? [5]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? '\u0627\u0645\u0631\u0648\u0632'\"\n    (valueChange)=\"valueChanged($event)\" [outsideDays]=\"outsideDays()\">\n</ys-datepicker-jalali>\n\n}\n@else {\n\n<ys-datepicker-gregorian [value]=\"value()\" [disabled]=\"isDisabled()\" [firstDayOfWeek]=\"firstDayOfWeek() ?? 1\"\n    [weekend]=\"weekend() ?? [6,7]\" [showFooter]=\"showFooter()\" [todayLabel]=\"todayLabel() ?? 'Today'\"\n    (valueChange)=\"valueChanged($event)\" [outsideDays]=\"outsideDays()\">\n</ys-datepicker-gregorian>\n\n}" }]
+        }], propDecorators: { calendarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }] } });
 
 /*
  * Public API Surface of ys-datepicker
@@ -962,5 +725,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DateTimeFormat, I18n, JalaliDate, LanguageType, YsDateParserFormatterService, YsDatepickerComponent, YsDatepickerI18nService, YsDatepickerPersianComponent, YsDatepickerPopupComponent, YsDatepickerPopupPersianComponent, YsDatepickerRangePopupComponent, YsDatepickerRangePopupPersianComponent };
+export { YsDatepicker, YsDatepickerPopup, YsDatepickerRange, YsDatepickerRangePopup };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-datepicker.mjs.map