@yoozsoft/yoozsoft-ng 3.1.4 → 4.0.0

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

@@ -2,19 +2,18 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, forwardRef, Component, Input } from '@angular/core';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDateParserFormatter, NgbDatepickerI18n, NgbCalendar, NgbDatepickerModule, NgbCalendarPersian, NgbDate } from '@ng-bootstrap/ng-bootstrap';
-import { NgIf, JsonPipe } from '@angular/common';
+import { NgIf } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
 class DateTimeFormat {
-    static twoDigit(s) { return ("0" + (s + 1)).slice(-2); }
 }
 
 class JalaliDate {
-    static { this.daysInMonth = {
+    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}`);
@@ -85,10 +84,7 @@ class JalaliDate {
 }
 
 class YsDateParserFormatterService extends NgbDateParserFormatter {
-    constructor() {
-        super(...arguments);
-        this.DELIMITER = '/';
-    }
+    DELIMITER = '/';
     parse(value) {
         if (value) {
             const date = value.split(this.DELIMITER);
@@ -103,10 +99,10 @@ class YsDateParserFormatterService extends NgbDateParserFormatter {
     format(date) {
         return date ? date.year + this.DELIMITER + date.month + this.DELIMITER + date.day : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDateParserFormatterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDateParserFormatterService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDateParserFormatterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDateParserFormatterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDateParserFormatterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDateParserFormatterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -137,19 +133,17 @@ const I18N_VALUES = {
     }
 };
 class I18n {
-    constructor() {
-        this.language = LanguageType[LanguageType.en];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: I18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: I18n }); }
+    language = LanguageType[LanguageType.en];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: I18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: I18n });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: I18n, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: I18n, decorators: [{
             type: Injectable
         }] });
 class YsDatepickerI18nService extends NgbDatepickerI18n {
+    _i18n = inject(I18n);
     constructor() {
         super();
-        this._i18n = inject(I18n);
     }
     getWeekdayLabel(weekday) {
         return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
@@ -166,10 +160,10 @@ class YsDatepickerI18nService extends NgbDatepickerI18n {
     getDayAriaLabel(date) {
         return `${date.day}-${date.month}-${date.year}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerI18nService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerI18nService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerI18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -177,27 +171,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
         }], ctorParameters: () => [] });
 
 class YsDatepickerComponent {
-    constructor() {
-        this.calendar = inject(NgbCalendar);
-        this.today = inject(NgbCalendar).getToday();
-        this.firstDayOfWeek = 1;
-        this.weekend = [6, 7];
-        this.isFooter = true;
-        this.todayLabel = "Today";
-        this.footer = null;
-        this._value = null;
-        this.disabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.markDisabled = (date, current) => date.month !== current?.month;
-        this.isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
+    i18N;
+    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;
@@ -215,6 +217,8 @@ class YsDatepickerComponent {
     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') {
@@ -238,8 +242,8 @@ class YsDatepickerComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: YsDatepickerComponent, isStandalone: true, selector: "ys-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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),
@@ -248,11 +252,11 @@ class YsDatepickerComponent {
             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-primary]=\"selected\"\r\n        [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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n        </span>\r\n    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
+            args: [{ selector: 'ys-datepicker', imports: [NgbDatepickerModule, FormsModule, NgIf], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsDatepickerComponent),
@@ -261,11 +265,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         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-primary]=\"selected\"\r\n        [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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n        </span>\r\n    </span>\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"] }]
-        }], propDecorators: { firstDayOfWeek: [{
+                    ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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: [{
@@ -277,6 +283,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class YsDatepickerPersianComponent {
+    i18N;
+    calendar = inject(NgbCalendar);
+    today = inject(NgbCalendar).getToday();
+    firstDayOfWeek = 6;
+    weekend = [5];
+    _language = LanguageType[LanguageType.fa];
     get language() {
         return this._language;
     }
@@ -284,28 +296,21 @@ class YsDatepickerPersianComponent {
         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.calendar = inject(NgbCalendar);
-        this.today = inject(NgbCalendar).getToday();
-        this.firstDayOfWeek = 6;
-        this.weekend = [5];
-        this._language = LanguageType[LanguageType.fa];
-        this.isFooter = true;
-        this.todayLabel = "امروز";
-        this.footer = null;
-        this._value = null;
-        this.disabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.markDisabled = (date, current) => date.month !== current?.month;
-        this.isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
         this.language = LanguageType[LanguageType.fa];
     }
     writeValue(obj) {
@@ -326,6 +331,8 @@ class YsDatepickerPersianComponent {
     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') {
@@ -351,8 +358,8 @@ class YsDatepickerPersianComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: YsDatepickerPersianComponent, isStandalone: true, selector: "ys-datepicker-persian", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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),
@@ -362,11 +369,11 @@ class YsDatepickerPersianComponent {
             { 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\" (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-primary]=\"selected\"\r\n        [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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n        </span>\r\n    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerPersianComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-persian', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
+            args: [{ selector: 'ys-datepicker-persian', imports: [NgbDatepickerModule, FormsModule, NgIf], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsDatepickerPersianComponent),
@@ -376,7 +383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         { 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\" (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-primary]=\"selected\"\r\n        [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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n        </span>\r\n    </span>\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"] }]
+                    ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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: [{
@@ -394,12 +401,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 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;
     }
@@ -407,25 +422,16 @@ class YsDatepickerPopupPersianComponent {
         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.calendar = inject(NgbCalendar);
-        this.today = inject(NgbCalendar).getToday();
-        this._value = null;
-        this.container = null;
-        this.firstDayOfWeek = 6;
-        this.weekend = [5];
-        this._language = LanguageType[LanguageType.fa];
-        this.isFooter = true;
-        this.closeLabel = "بستن";
-        this.todayLabel = "امروز";
-        this.footer = null;
-        this.calendarIconClass = "fa-solid fa-calendar-days";
-        this.disabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.markDisabled = (date, current) => date.month !== current?.month;
-        this.isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
         this.language = LanguageType[LanguageType.fa];
     }
     writeValue(obj) {
@@ -446,6 +452,8 @@ class YsDatepickerPopupPersianComponent {
     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') {
@@ -471,8 +479,8 @@ class YsDatepickerPopupPersianComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerPopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", 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: "19.1.3", ngImport: i0, type: YsDatepickerPopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerPopupPersianComponent),
@@ -482,11 +490,11 @@ class YsDatepickerPopupPersianComponent {
             { 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)\" />\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-primary]=\"selected\"\r\n        [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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday(); datepicker.close()\"\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerPopupPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerPopupPersianComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-popup-persian', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
+            args: [{ selector: 'ys-datepicker-popup-persian', imports: [NgbDatepickerModule, FormsModule, NgIf], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsDatepickerPopupPersianComponent),
@@ -496,7 +504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         { 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)\" />\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-primary]=\"selected\"\r\n        [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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday(); datepicker.close()\"\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    </span>\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"] }]
+                    ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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: [{
@@ -520,12 +528,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 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;
     }
@@ -533,26 +549,16 @@ class YsDatepickerPopupComponent {
         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 = () => { };
+    onTouched = () => { };
     constructor(i18N) {
         this.i18N = i18N;
-        this.calendar = inject(NgbCalendar);
-        this.today = inject(NgbCalendar).getToday();
-        this._value = null;
-        this.container = null;
-        this.firstDayOfWeek = 1;
-        this.weekend = [6, 7];
-        this._language = LanguageType[LanguageType.en];
-        this.isFooter = true;
-        this.closeLabel = "Close";
-        this.todayLabel = "Today";
-        this.footer = null;
-        this.calendarIconClass = "fa-solid fa-calendar-days";
-        this.disabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.markDisabled = (date, current) => date.month !== current?.month;
-        this.isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
-        this.language = LanguageType[LanguageType.en];
     }
     writeValue(obj) {
         if (!obj) {
@@ -571,6 +577,8 @@ class YsDatepickerPopupComponent {
     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') {
@@ -594,8 +602,8 @@ class YsDatepickerPopupComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerPopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", 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: "19.1.3", ngImport: i0, type: YsDatepickerPopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerPopupComponent),
@@ -604,11 +612,11 @@ class YsDatepickerPopupComponent {
             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)\" />\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-primary]=\"selected\"\r\n        [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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday(); datepicker.close()\"\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-popup', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
+            args: [{ selector: 'ys-datepicker-popup', imports: [NgbDatepickerModule, FormsModule, NgIf], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsDatepickerPopupComponent),
@@ -617,7 +625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         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)\" />\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-primary]=\"selected\"\r\n        [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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday(); datepicker.close()\"\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    </span>\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"] }]
+                    ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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: [{
@@ -641,14 +649,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 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;
     }
@@ -656,28 +676,16 @@ class YsDatepickerRangePopupPersianComponent {
         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.calendar = inject(NgbCalendar);
-        this.formatter = inject(NgbDateParserFormatter);
-        this.today = inject(NgbCalendar).getToday();
-        this.hoveredDate = null;
-        this._fromDate = null;
-        this._toDate = null;
-        this.container = null;
-        this.firstDayOfWeek = 6;
-        this.weekend = [5];
-        this._language = LanguageType[LanguageType.fa];
-        this.isFooter = true;
-        this.closeLabel = "بستن";
-        this.todayLabel = "امروز";
-        this.footer = null;
-        this.calendarIconClass = "fa-solid fa-calendar-days";
-        this.disabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.markDisabled = (date, current) => date.month !== current?.month;
-        this.isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
         this.language = LanguageType[LanguageType.fa];
     }
     writeValue(obj) {
@@ -727,6 +735,8 @@ class YsDatepickerRangePopupPersianComponent {
             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;
@@ -749,8 +759,8 @@ class YsDatepickerRangePopupPersianComponent {
         this.toDate = this.today;
         this.valueChanged();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", 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: "19.1.3", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerRangePopupPersianComponent),
@@ -760,11 +770,11 @@ class YsDatepickerRangePopupPersianComponent {
             { 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\" />\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    <!-- [class.bg-primary]=\"selected\" -->\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday(); datepicker.close()\"\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-range-popup-persian', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
+            args: [{ selector: 'ys-datepicker-range-popup-persian', imports: [NgbDatepickerModule, FormsModule, NgIf], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsDatepickerRangePopupPersianComponent),
@@ -774,7 +784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         { 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\" />\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    <!-- [class.bg-primary]=\"selected\" -->\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday(); datepicker.close()\"\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    </span>\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"] }]
+                    ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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: [{
@@ -798,14 +808,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 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;
     }
@@ -813,29 +834,16 @@ class YsDatepickerRangePopupComponent {
         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 = () => { };
+    onTouched = () => { };
     constructor(i18N) {
         this.i18N = i18N;
-        this.calendar = inject(NgbCalendar);
-        this.formatter = inject(NgbDateParserFormatter);
-        this.today = inject(NgbCalendar).getToday();
-        this.hoveredDate = null;
-        this._fromDate = null;
-        this._toDate = null;
-        this.container = null;
-        this.firstDayOfWeek = 1;
-        this.weekend = [6, 7];
-        this._language = LanguageType[LanguageType.en];
-        this.isFooter = true;
-        this.closeLabel = "Close";
-        this.todayLabel = "Today";
-        this.footer = null;
-        this.calendarIconClass = "fa-solid fa-calendar-days";
-        this.disabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.markDisabled = (date, current) => date.month !== current?.month;
-        this.isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
-        this.language = LanguageType[LanguageType.en];
     }
     writeValue(obj) {
         if (!obj) {
@@ -883,6 +891,8 @@ class YsDatepickerRangePopupComponent {
             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;
@@ -899,8 +909,8 @@ class YsDatepickerRangePopupComponent {
         this.toDate = this.today;
         this.valueChanged();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerRangePopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", 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: "19.1.3", ngImport: i0, type: YsDatepickerRangePopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerRangePopupComponent),
@@ -909,11 +919,11 @@ class YsDatepickerRangePopupComponent {
             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\" />\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    <!-- [class.bg-primary]=\"selected\" -->\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday(); datepicker.close()\"\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsDatepickerRangePopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsDatepickerRangePopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-datepicker-range-popup', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
+            args: [{ selector: 'ys-datepicker-range-popup', imports: [NgbDatepickerModule, FormsModule, NgIf], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsDatepickerRangePopupComponent),
@@ -922,7 +932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         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\" />\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    <!-- [class.bg-primary]=\"selected\" -->\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"setToday(); datepicker.close()\"\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    </span>\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"] }]
+                    ], 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    <span *ngIf=\"isFooter\">\r\n        <hr class=\"my-0\" />\r\n        <span *ngIf=\"footer\">\r\n            {{footer}}\r\n        </span>\r\n        <span *ngIf=\"!footer\">\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    </span>\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: [{