@yoozsoft/yoozsoft-ng 1.3.2-alpha.0 → 2.0.1

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

@@ -1,7 +1,7 @@
 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, NgbCalendarPersian, NgbDatepickerModule, NgbDate } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDateParserFormatter, NgbDatepickerI18n, NgbCalendar, NgbDatepickerModule, NgbCalendarPersian, NgbDate } from '@ng-bootstrap/ng-bootstrap';
 import { NgIf, JsonPipe } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -103,10 +103,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: "16.1.0", ngImport: i0, type: YsDateParserFormatterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDateParserFormatterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDateParserFormatterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDateParserFormatterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDateParserFormatterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDateParserFormatterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -140,10 +140,10 @@ class I18n {
     constructor() {
         this.language = LanguageType[LanguageType.en];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: I18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: I18n }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: I18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: I18n }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: I18n, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: I18n, decorators: [{
             type: Injectable
         }] });
 class YsDatepickerI18nService extends NgbDatepickerI18n {
@@ -166,15 +166,232 @@ class YsDatepickerI18nService extends NgbDatepickerI18n {
     getDayAriaLabel(date) {
         return `${date.day}-${date.month}-${date.year}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerI18nService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerI18nService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerI18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], 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));
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this.value = null;
+            return;
+        }
+        var date = obj;
+        this.value = { year: date.getFullYear(), month: (date.getMonth() + 1), day: date.getDate() };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    valueChanged(newDate) {
+        if (newDate) {
+            if (typeof newDate == 'string') {
+                let temp = newDate.split('/');
+                let res = new Date(+temp[0], (+temp[1]) - 1, +temp[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+            else {
+                let res = new Date(newDate.year, newDate.month - 1, newDate.day);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+        }
+        else {
+            this.onChange(null);
+            this.onTouched(null);
+        }
+    }
+    setToday() {
+        this.value = this.today;
+        this.valueChanged(this.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: YsDatepickerComponent, isStandalone: true, selector: "ys-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => YsDatepickerComponent),
+                multi: true
+            },
+            I18n,
+            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+            { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
+        ], ngImport: i0, template: "<ngb-datepicker #dp [(ngModel)]=\"value\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n    [footerTemplate]=\"footerTemplate\" placeholder=\"yyyy/mm/dd\" [disabled]=\"disabled\"\r\n    (ngModelChange)=\"valueChanged(value)\" />\r\n\r\n<ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-datepicker', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDatepickerComponent),
+                            multi: true
+                        },
+                        I18n,
+                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
+                    ], template: "<ngb-datepicker #dp [(ngModel)]=\"value\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n    [footerTemplate]=\"footerTemplate\" placeholder=\"yyyy/mm/dd\" [disabled]=\"disabled\"\r\n    (ngModelChange)=\"valueChanged(value)\" />\r\n\r\n<ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-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: [{
+                type: Input
+            }], weekend: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], todayLabel: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class YsDatepickerPersianComponent {
+    get language() {
+        return this._language;
+    }
+    set language(value) {
+        this._language = value;
+        this.i18N.language = this._language;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+    }
+    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) {
+        if (!obj) {
+            this.value = null;
+            return;
+        }
+        var date = obj;
+        let persianDate = JalaliDate.gregorianToJalali(date.getFullYear(), date.getMonth() + 1, date.getDate());
+        this.value = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    valueChanged(newDate) {
+        if (newDate) {
+            if (typeof newDate == 'string') {
+                let temp = newDate.split('/');
+                let convertedDate = JalaliDate.jalaliToGregorian(+temp[0], (+temp[1]) - 1, +temp[2]);
+                let res = new Date(+convertedDate[0], (+convertedDate[1]) - 1, +convertedDate[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+            else {
+                let convertedDate = JalaliDate.jalaliToGregorian(newDate.year, newDate.month, newDate.day);
+                var res = new Date(+convertedDate[0], +convertedDate[1] - 1, +convertedDate[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+        }
+        else {
+            this.onChange(null);
+            this.onTouched(null);
+        }
+    }
+    setToday() {
+        this.value = this.today;
+        this.valueChanged(this.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: YsDatepickerPersianComponent, isStandalone: true, selector: "ys-datepicker-persian", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => YsDatepickerPersianComponent),
+                multi: true
+            },
+            I18n,
+            { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerPersianComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-datepicker-persian', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDatepickerPersianComponent),
+                            multi: true
+                        },
+                        I18n,
+                        { 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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { firstDayOfWeek: [{
+                type: Input
+            }], weekend: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], todayLabel: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
 
 class YsDatepickerPopupPersianComponent {
     get value() {
@@ -195,7 +412,7 @@ class YsDatepickerPopupPersianComponent {
         this.calendar = inject(NgbCalendar);
         this.today = inject(NgbCalendar).getToday();
         this._value = null;
-        this.container = '';
+        this.container = null;
         this.firstDayOfWeek = 6;
         this.weekend = [5];
         this._language = LanguageType[LanguageType.fa];
@@ -203,6 +420,7 @@ class YsDatepickerPopupPersianComponent {
         this.closeLabel = "بستن";
         this.todayLabel = "امروز";
         this.footer = null;
+        this.calendarIconClass = "fa-solid fa-calendar-days";
         this.disabled = false;
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -253,8 +471,8 @@ class YsDatepickerPopupPersianComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerPopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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", disabled: "disabled" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerPopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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),
@@ -264,9 +482,9 @@ 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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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)\" />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\">\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerPopupPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerPopupPersianComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-popup-persian', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
                         {
@@ -278,8 +496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", 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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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"] }]
-        }], ctorParameters: function () { return [{ type: I18n }]; }, propDecorators: { container: [{
+                    ], 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\">\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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
                 type: Input
             }], firstDayOfWeek: [{
                 type: Input
@@ -295,6 +513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], footer: [{
                 type: Input
+            }], calendarIconClass: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }] } });
@@ -318,7 +538,7 @@ class YsDatepickerPopupComponent {
         this.calendar = inject(NgbCalendar);
         this.today = inject(NgbCalendar).getToday();
         this._value = null;
-        this.container = '';
+        this.container = null;
         this.firstDayOfWeek = 1;
         this.weekend = [6, 7];
         this._language = LanguageType[LanguageType.en];
@@ -326,6 +546,7 @@ class YsDatepickerPopupComponent {
         this.closeLabel = "Close";
         this.todayLabel = "Today";
         this.footer = null;
+        this.calendarIconClass = "fa-solid fa-calendar-days";
         this.disabled = false;
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -373,8 +594,8 @@ class YsDatepickerPopupComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerPopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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", disabled: "disabled" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerPopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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),
@@ -383,9 +604,9 @@ 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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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)\" />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\">\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-popup', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
                         {
@@ -396,8 +617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", 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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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"] }]
-        }], ctorParameters: function () { return [{ type: I18n }]; }, propDecorators: { container: [{
+                    ], 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\">\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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
                 type: Input
             }], firstDayOfWeek: [{
                 type: Input
@@ -413,6 +634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], footer: [{
                 type: Input
+            }], calendarIconClass: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }] } });
@@ -441,7 +664,7 @@ class YsDatepickerRangePopupPersianComponent {
         this.hoveredDate = null;
         this._fromDate = null;
         this._toDate = null;
-        this.container = '';
+        this.container = null;
         this.firstDayOfWeek = 6;
         this.weekend = [5];
         this._language = LanguageType[LanguageType.fa];
@@ -449,6 +672,7 @@ class YsDatepickerRangePopupPersianComponent {
         this.closeLabel = "بستن";
         this.todayLabel = "امروز";
         this.footer = null;
+        this.calendarIconClass = "fa-solid fa-calendar-days";
         this.disabled = false;
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -525,8 +749,8 @@ class YsDatepickerRangePopupPersianComponent {
         this.toDate = this.today;
         this.valueChanged();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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", disabled: "disabled" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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),
@@ -536,9 +760,9 @@ 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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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\" />\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\">\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\">\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-range-popup-persian', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
                         {
@@ -550,8 +774,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", 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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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"] }]
-        }], ctorParameters: function () { return [{ type: I18n }]; }, propDecorators: { container: [{
+                    ], 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\">\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\">\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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
                 type: Input
             }], firstDayOfWeek: [{
                 type: Input
@@ -567,6 +791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], footer: [{
                 type: Input
+            }], calendarIconClass: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }] } });
@@ -595,7 +821,7 @@ class YsDatepickerRangePopupComponent {
         this.hoveredDate = null;
         this._fromDate = null;
         this._toDate = null;
-        this.container = '';
+        this.container = null;
         this.firstDayOfWeek = 1;
         this.weekend = [6, 7];
         this._language = LanguageType[LanguageType.en];
@@ -603,6 +829,7 @@ class YsDatepickerRangePopupComponent {
         this.closeLabel = "Close";
         this.todayLabel = "Today";
         this.footer = null;
+        this.calendarIconClass = "fa-solid fa-calendar-days";
         this.disabled = false;
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -672,8 +899,8 @@ class YsDatepickerRangePopupComponent {
         this.toDate = this.today;
         this.valueChanged();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerRangePopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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", disabled: "disabled" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerRangePopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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),
@@ -682,9 +909,9 @@ 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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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\" />\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\">\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\">\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: YsDatepickerRangePopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: YsDatepickerRangePopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-range-popup', standalone: true, imports: [NgbDatepickerModule, FormsModule, JsonPipe, NgIf], providers: [
                         {
@@ -695,8 +922,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", 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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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\">\r\n                <i class=\"fa-solid fa-calendar-days\"></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"] }]
-        }], ctorParameters: function () { return [{ type: I18n }]; }, propDecorators: { container: [{
+                    ], 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\">\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\">\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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
                 type: Input
             }], firstDayOfWeek: [{
                 type: Input
@@ -712,6 +939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], footer: [{
                 type: Input
+            }], calendarIconClass: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }] } });
@@ -724,5 +953,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DateTimeFormat, I18n, JalaliDate, LanguageType, YsDateParserFormatterService, YsDatepickerI18nService, YsDatepickerPopupComponent, YsDatepickerPopupPersianComponent, YsDatepickerRangePopupComponent, YsDatepickerRangePopupPersianComponent };
+export { DateTimeFormat, I18n, JalaliDate, LanguageType, YsDateParserFormatterService, YsDatepickerComponent, YsDatepickerI18nService, YsDatepickerPersianComponent, YsDatepickerPopupComponent, YsDatepickerPopupPersianComponent, YsDatepickerRangePopupComponent, YsDatepickerRangePopupPersianComponent };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-datepicker.mjs.map