@webilix/ngx-calendar-m3/fesm2022/webilix-ngx-calendar-m3.mjs.map

Jalali calendar components for Angular and Material 3

{"version":3,"file":"webilix-ngx-calendar-m3.mjs","sources":["../../../ngx-calendar-m3/src/lib/components/date/ngx-calendar-date.component.ts","../../../ngx-calendar-m3/src/lib/components/date/ngx-calendar-date.component.html","../../../ngx-calendar-m3/src/lib/components/moment/ngx-calendar-moment.component.ts","../../../ngx-calendar-m3/src/lib/components/moment/ngx-calendar-moment.component.html","../../../ngx-calendar-m3/src/lib/components/week/ngx-calendar-week.component.ts","../../../ngx-calendar-m3/src/lib/components/week/ngx-calendar-week.component.html","../../../ngx-calendar-m3/src/lib/components/month/ngx-calendar-month.component.ts","../../../ngx-calendar-m3/src/lib/components/month/ngx-calendar-month.component.html","../../../ngx-calendar-m3/src/lib/components/year/ngx-calendar-year.component.ts","../../../ngx-calendar-m3/src/lib/components/year/ngx-calendar-year.component.html","../../../ngx-calendar-m3/src/lib/container/bottom-sheet/bottom-sheet.component.ts","../../../ngx-calendar-m3/src/lib/container/bottom-sheet/bottom-sheet.component.html","../../../ngx-calendar-m3/src/lib/container/dialog/dialog.component.ts","../../../ngx-calendar-m3/src/lib/container/dialog/dialog.component.html","../../../ngx-calendar-m3/src/lib/ngx-calendar.service.ts","../../../ngx-calendar-m3/src/lib/ngx-calendar.component.ts","../../../ngx-calendar-m3/src/lib/ngx-calendar.component.html","../../../ngx-calendar-m3/src/lib/day/ngx-calendar-day.component.ts","../../../ngx-calendar-m3/src/lib/day/ngx-calendar-day.component.html","../../../ngx-calendar-m3/src/public-api.ts","../../../ngx-calendar-m3/src/webilix-ngx-calendar-m3.ts"],"sourcesContent":["import {\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    SimpleChanges,\n    ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\n\nimport { JalaliDateTime, JalaliDateTimeCalendar } from '@webilix/jalali-date-time';\n\nimport { INgxCalendarDate } from '../../ngx-calendar.interface';\n\n@Component({\n    selector: 'ngx-calendar-date',\n    imports: [MatIconButton, MatIcon],\n    templateUrl: './ngx-calendar-date.component.html',\n    changeDetection: ChangeDetectionStrategy.Eager,\n    styleUrl: './ngx-calendar-date.component.scss',\n})\nexport class NgxCalendarDateComponent implements OnInit, OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-calendar-m3-date';\n\n    @Input({ required: false }) value?: Date;\n    @Input({ required: false }) minDate?: 'NOW' | Date;\n    @Input({ required: false }) maxDate?: 'NOW' | Date;\n    @Output() onChange: EventEmitter<INgxCalendarDate> = new EventEmitter<INgxCalendarDate>();\n\n    public view: 'CALENDAR' | 'MONTH' = 'CALENDAR';\n    public values!: { today: string; selected: string; minDate: string; maxDate: string };\n    public calendar!: JalaliDateTimeCalendar;\n\n    public year!: number;\n    public years: number[] = [];\n    public seasons: { title: string; month: string }[][] = [\n        [\n            { title: 'فروردین', month: '' },\n            { title: 'اردیبهشت', month: '' },\n            { title: 'خرداد', month: '' },\n        ],\n        [\n            { title: 'تیر', month: '' },\n            { title: 'مرداد', month: '' },\n            { title: 'شهریور', month: '' },\n        ],\n        [\n            { title: 'مهر', month: '' },\n            { title: 'آبان', month: '' },\n            { title: 'آذر', month: '' },\n        ],\n        [\n            { title: 'دی', month: '' },\n            { title: 'بهمن', month: '' },\n            { title: 'اسفند', month: '' },\n        ],\n    ];\n\n    private jalali = JalaliDateTime();\n\n    ngOnInit(): void {\n        this.initValues();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.initValues();\n    }\n\n    formatDate(date: Date): string {\n        return this.jalali.toString(date, { format: 'Y-M-D' });\n    }\n\n    initValues(): void {\n        let minDate: Date | undefined = this.minDate === 'NOW' ? new Date() : this.minDate;\n        let maxDate: Date | undefined = this.maxDate === 'NOW' ? new Date() : this.maxDate;\n\n        // Check MIN and MAX Dates\n        if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {\n            const date: Date = new Date(minDate);\n            minDate = maxDate;\n            maxDate = date;\n        }\n\n        // Check Value\n        if (this.value && minDate && this.formatDate(this.value) < this.formatDate(minDate)) this.value = undefined;\n        if (this.value && maxDate && this.formatDate(this.value) > this.formatDate(maxDate)) this.value = undefined;\n\n        this.values = {\n            today: this.formatDate(new Date()),\n            selected: this.value ? this.formatDate(this.value) : '',\n            minDate: minDate ? this.formatDate(minDate) : '0000-00-00',\n            maxDate: maxDate ? this.formatDate(maxDate) : '9999-99-99',\n        };\n\n        const month: string = this.jalali.toString(this.value || new Date(), { format: 'Y-M' });\n        this.calendar = this.jalali.calendar(month);\n        this.view = 'CALENDAR';\n    }\n\n    changeMonth(change: number): void {\n        let [year, month] = this.calendar.month.split('-').map((v: string) => +v);\n        switch (change) {\n            case 12:\n            case -12:\n                year += change === 12 ? 1 : -1;\n                break;\n\n            case 1:\n            case -1:\n                month += change;\n                if (month === 13) {\n                    year++;\n                    month = 1;\n                }\n                if (month === 0) {\n                    year--;\n                    month = 12;\n                }\n                break;\n\n            case 0:\n                [year, month] = this.values.today.split('-').map((v: string) => +v);\n                break;\n        }\n\n        this.calendar = this.jalali.calendar(year.toString() + '-' + month.toString().padStart(2, '0'));\n    }\n\n    setDate(value: string): void {\n        const gregorian: string = this.jalali.gregorian(value).date;\n        const date: Date = this.jalali.periodDay(1, new Date(gregorian + 'T00:00:00.000Z')).from;\n        const title: string = this.jalali.toFullText(date, { format: 'W، d N Y' });\n        const jalali: string = this.formatDate(date);\n\n        this.values.selected = value;\n        this.onChange.next({ date, title, jalali });\n    }\n\n    toggleView(): void {\n        this.view = this.view === 'CALENDAR' ? 'MONTH' : 'CALENDAR';\n        if (this.view === 'MONTH') this.changeYear(+this.calendar.month.substring(0, 4));\n    }\n\n    changeYear(year?: number): void {\n        if (year && year < 1000) return;\n        this.year = year || +this.values.today.substring(0, 4);\n\n        let decade: number = this.year - (this.year % 10);\n        if (decade <= 1020) decade = 1020;\n        this.years = [decade - 20, decade - 10, decade, decade + 10, decade + 20];\n        this.seasons.forEach((season, s: number) => {\n            season.forEach((month, m: number) => {\n                month.month = `${this.year.toString()}-${(s * 3 + m + 1).toString().padStart(2, '0')}`;\n            });\n        });\n    }\n\n    setMonth(month: string): void {\n        this.calendar = this.jalali.calendar(month);\n        this.view = 'CALENDAR';\n    }\n}\n","<div class=\"calendar-header\">\n    <button mat-icon-button type=\"button\" (click)=\"toggleView()\">\n        <mat-icon>{{ view === 'CALENDAR' ? 'calendar_month' : 'close' }}</mat-icon>\n    </button>\n    <div class=\"title\">{{ view === 'CALENDAR' ? calendar.title : year }}</div>\n\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(-12) : changeYear(year - 10)\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(-1) : changeYear(year - 1)\">\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(0) : changeYear(year)\">\n        <mat-icon>radio_button_checked</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(1) : changeYear(year + 1)\">\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(12) : changeYear(year + 10)\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n</div>\n\n<div class=\"calendar-nav\">\n    @switch (view) {\n    <!-- CALENDAR -->\n    @case ('CALENDAR') {\n    <!-- NAMES  -->\n    @for (day of ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج']; track $index) {\n    <div class=\"item\">{{ day }}</div>\n    } } @case ('MONTH') {\n    <!-- YEARS -->\n    @for (item of years; track $index) {\n    <div class=\"item click\" (click)=\"changeYear(item)\">{{ item }}</div>\n    } } }\n</div>\n\n<div class=\"calendar-content\">\n    <!-- CALENDAR VIEW -->\n    <section class=\"calendar-view\" [style.visibility]=\"view === 'CALENDAR' ? 'visible' : 'hidden'\">\n        <!-- WEEK -->\n        @for ( week of calendar.weeks; track $index) {\n        <div class=\"week\">\n            <!-- DAYS -->\n            @for (day of week; track $index) {\n            <div\n                class=\"day\"\n                [class.day-today]=\"day.date === values.today\"\n                [class.day-selected]=\"day.date === values.selected\"\n                [class.day-disable]=\"day.month !== calendar.month || day.date > values.maxDate || day.date < values.minDate\"\n                (click)=\"\n                    day.month !== calendar.month || day.date > values.maxDate || day.date < values.minDate\n                        ? null\n                        : setDate(day.date)\n                \"\n            >\n                {{ day.day }}\n            </div>\n            }\n        </div>\n        }\n    </section>\n\n    <!-- MONTH VIEW -->\n    @if (view === 'MONTH') {\n    <section class=\"month-view\">\n        <!-- SEASON -->\n        @for (season of seasons; track $index) {\n        <div class=\"season\">\n            <!-- MONTH -->\n            @for (month of season; track $index) {\n            <div\n                class=\"month\"\n                [class.month-disable]=\"\n                    (values.minDate && month.month < values.minDate) || (values.maxDate && month.month > values.maxDate)\n                \"\n                (click)=\"\n                    (values.minDate && month.month < values.minDate) || (values.maxDate && month.month > values.maxDate)\n                        ? null\n                        : setMonth(month.month)\n                \"\n            >\n                {{ month.title }}\n            </div>\n            }\n        </div>\n        }\n    </section>\n    }\n</div>\n","import {\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    SimpleChanges,\n    ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatButton } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\n\nimport { JalaliDateTime } from '@webilix/jalali-date-time';\nimport { NgxHelperDatePipe } from '@webilix/ngx-helper-m3';\n\nimport { INgxCalendarDate, INgxCalendarMoment } from '../../ngx-calendar.interface';\n\nimport { NgxCalendarDateComponent } from '../date/ngx-calendar-date.component';\n\n@Component({\n    selector: 'ngx-calendar-moment',\n    imports: [MatButton, MatMenuModule, NgxHelperDatePipe, NgxCalendarDateComponent],\n    templateUrl: './ngx-calendar-moment.component.html',\n    changeDetection: ChangeDetectionStrategy.Eager,\n    styleUrl: './ngx-calendar-moment.component.scss',\n})\nexport class NgxCalendarMomentComponent implements OnInit, OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-calendar-m3-moment';\n\n    @Input({ required: false }) value?: Date;\n    @Input({ required: false }) minDate?: 'NOW' | Date;\n    @Input({ required: false }) maxDate?: 'NOW' | Date;\n    @Output() onChange: EventEmitter<INgxCalendarMoment> = new EventEmitter<INgxCalendarMoment>();\n\n    public canSubmit: boolean = false;\n    public dateString!: string;\n\n    public hour!: string;\n    public hours: string[] = [...Array(24).keys()].map((hour: number) => hour.toString().padStart(2, '0'));\n\n    public minute!: string;\n    public minutes: string[] = [...Array(60).keys()].map((minute: number) => minute.toString().padStart(2, '0'));\n\n    private jalali = JalaliDateTime();\n\n    ngOnInit(): void {\n        this.initValues();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.initValues();\n    }\n\n    formatDate(date: Date): string {\n        return this.jalali.toString(date, { format: 'Y-M-D H:I' });\n    }\n\n    getMinMax(): { minDate: Date | undefined; maxDate: Date | undefined } {\n        const minDate: Date | undefined = this.minDate === 'NOW' ? new Date() : this.minDate;\n        const maxDate: Date | undefined = this.maxDate === 'NOW' ? new Date() : this.maxDate;\n\n        return { minDate, maxDate };\n    }\n\n    initValues(): void {\n        const updateDate = (date: Date): void => {\n            date.setSeconds(0);\n            date.setMilliseconds(0);\n        };\n        let { minDate, maxDate } = this.getMinMax();\n\n        if (this.value) updateDate(this.value);\n        if (minDate) updateDate(minDate);\n        if (maxDate) updateDate(maxDate);\n\n        // Check MIN and MAX Dates\n        if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {\n            const date: Date = new Date(minDate);\n            minDate = maxDate;\n            maxDate = date;\n        }\n\n        // Check Value\n        if (this.value && minDate && this.formatDate(this.value) < this.formatDate(minDate)) this.value = undefined;\n        if (this.value && maxDate && this.formatDate(this.value) > this.formatDate(maxDate)) this.value = undefined;\n\n        this.hour = (this.value || new Date()).getHours().toString().padStart(2, '0');\n        this.minute = (this.value || new Date()).getMinutes().toString().padStart(2, '0');\n        this.updateValue();\n    }\n\n    updateValue(): void {\n        this.canSubmit = false;\n        if (!this.value) return;\n\n        const { minDate, maxDate } = this.getMinMax();\n\n        this.value.setHours(+this.hour);\n        this.value.setMinutes(+this.minute);\n        this.value.setSeconds(0);\n        this.value.setMilliseconds(0);\n\n        if (minDate && this.formatDate(this.value) < this.formatDate(minDate)) {\n            this.value.setHours(minDate.getHours());\n            this.value.setMinutes(minDate.getMinutes());\n        }\n\n        if (maxDate && this.formatDate(this.value) > this.formatDate(maxDate)) {\n            this.value.setHours(maxDate.getHours());\n            this.value.setMinutes(maxDate.getMinutes());\n        }\n\n        this.hour = this.value.getHours().toString().padStart(2, '0');\n        this.minute = this.value.getMinutes().toString().padStart(2, '0');\n        this.canSubmit = true;\n    }\n\n    setDate(date: INgxCalendarDate): void {\n        this.value = date.date;\n        this.updateValue();\n    }\n\n    isActiveHour(hour: string): boolean {\n        const { minDate, maxDate } = this.getMinMax();\n\n        if (!this.value) return false;\n        if (!minDate && !maxDate) return true;\n\n        const check: string = this.jalali.toString(this.value, { format: `Y-M-D ${hour}` });\n        if (minDate && check < this.formatDate(minDate).substring(0, 13)) return false;\n        if (maxDate && check > this.formatDate(maxDate).substring(0, 13)) return false;\n        return true;\n    }\n\n    setHour(hour: string) {\n        this.hour = hour;\n        this.updateValue();\n    }\n\n    isActiveMinute(minute: string): boolean {\n        const { minDate, maxDate } = this.getMinMax();\n\n        if (!this.value) return false;\n        if (!minDate && !maxDate) return true;\n\n        const check: string = this.jalali.toString(this.value, { format: `Y-M-D H:${minute}` });\n        if (minDate && check < this.formatDate(minDate)) return false;\n        if (maxDate && check > this.formatDate(maxDate)) return false;\n        return true;\n    }\n\n    setMinute(minute: string) {\n        this.minute = minute;\n        this.updateValue();\n    }\n\n    onSubmit(): void {\n        if (!this.value || !this.canSubmit) return;\n\n        const moment: Date = new Date(this.value.getTime());\n        const title: string = this.jalali.toFullText(moment, { format: 'W، d N Y H:I' });\n        const jalali: string = this.formatDate(moment);\n        this.onChange.next({ moment, title, jalali });\n    }\n}\n","<ngx-calendar-date [value]=\"value\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" (onChange)=\"setDate($event)\"></ngx-calendar-date>\n<div class=\"time\">\n    <div class=\"date\">{{ value | ngxHelperDate }}</div>\n\n    @if (value) {\n    <button mat-button type=\"button\" class=\"value\" [matMenuTriggerFor]=\"minuteMenu\" [disabled]=\"!value\">{{ minute }}</button>\n    <mat-menu #minuteMenu=\"matMenu\" [yPosition]=\"'above'\" class=\"ngx-calendar-m3-moment-minute\">\n        @for (m of minutes; track $index) {\n        <button\n            mat-menu-item\n            (click)=\"setMinute(m)\"\n            [disabled]=\"!isActiveMinute(m) || m === minute\"\n            [class.selected]=\"m === minute\"\n        >\n            <span class=\"minute\" [style.color]=\"+m % 5 === 0 ? 'var(--secondary)' : ''\">{{ m }}</span>\n        </button>\n        }\n    </mat-menu>\n\n    <div class=\"colon\" [style.opacity]=\"value ? 1 : 0.5\">:</div>\n\n    <button mat-button type=\"button\" class=\"value\" [matMenuTriggerFor]=\"hourMenu\" [disabled]=\"!value\">{{ hour }}</button>\n    <mat-menu #hourMenu=\"matMenu\" [yPosition]=\"'above'\" class=\"ngx-calendar-m3-moment-hour\">\n        @for (h of hours; track $index) {\n        <button mat-menu-item (click)=\"setHour(h)\" [disabled]=\"!isActiveHour(h) || h === hour\" [class.selected]=\"h === hour\">\n            <span class=\"hour\">{{ h }}</span>\n        </button>\n        }\n    </mat-menu>\n    }\n\n    <button mat-button type=\"button\" class=\"submit\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">تایید</button>\n</div>\n","import {\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    SimpleChanges,\n    ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\n\nimport { Helper } from '@webilix/helper-library';\nimport { JalaliDateTime, JalaliDateTimeCalendar, JalaliDateTimePeriod } from '@webilix/jalali-date-time';\n\nimport { INgxCalendarWeek } from '../../ngx-calendar.interface';\n\n@Component({\n    selector: 'ngx-calendar-week',\n    imports: [MatIconButton, MatIcon],\n    templateUrl: './ngx-calendar-week.component.html',\n    changeDetection: ChangeDetectionStrategy.Eager,\n    styleUrl: './ngx-calendar-week.component.scss',\n})\nexport class NgxCalendarWeekComponent implements OnInit, OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-calendar-m3-week';\n\n    @Input({ required: false }) value?: Date | { from: Date; to: Date };\n    @Input({ required: false }) minDate?: 'NOW' | Date;\n    @Input({ required: false }) maxDate?: 'NOW' | Date;\n    @Output() onChange: EventEmitter<INgxCalendarWeek> = new EventEmitter<INgxCalendarWeek>();\n\n    public view: 'CALENDAR' | 'MONTH' = 'CALENDAR';\n    public values!: { today: string; selected: string; minDate: string; maxDate: string };\n    public calendar!: JalaliDateTimeCalendar;\n\n    public year!: number;\n    public years: number[] = [];\n    public seasons: { title: string; month: string }[][] = [\n        [\n            { title: 'فروردین', month: '' },\n            { title: 'اردیبهشت', month: '' },\n            { title: 'خرداد', month: '' },\n        ],\n        [\n            { title: 'تیر', month: '' },\n            { title: 'مرداد', month: '' },\n            { title: 'شهریور', month: '' },\n        ],\n        [\n            { title: 'مهر', month: '' },\n            { title: 'آبان', month: '' },\n            { title: 'آذر', month: '' },\n        ],\n        [\n            { title: 'دی', month: '' },\n            { title: 'بهمن', month: '' },\n            { title: 'اسفند', month: '' },\n        ],\n    ];\n\n    private jalali = JalaliDateTime();\n\n    ngOnInit(): void {\n        this.initValues();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.initValues();\n    }\n\n    formatDate(date: Date): string {\n        return this.jalali.toString(date, { format: 'Y-M-D' });\n    }\n\n    initValues(): void {\n        let minDate: Date | undefined = this.minDate === 'NOW' ? new Date() : this.minDate;\n        let maxDate: Date | undefined = this.maxDate === 'NOW' ? new Date() : this.maxDate;\n\n        const getWeek = (date: Date, period: 'from' | 'to'): string => {\n            const week: JalaliDateTimePeriod = this.jalali.periodWeek(1, date);\n            return this.formatDate(period === 'from' ? week.from : week.to);\n        };\n\n        // Check MIN and MAX Dates\n        if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {\n            const date: Date = new Date(minDate);\n            minDate = maxDate;\n            maxDate = date;\n        }\n\n        // Check Value\n        let value: Date | undefined = this.value ? ('from' in this.value ? this.value.from : this.value) : undefined;\n        if (value && minDate && this.formatDate(value) < getWeek(minDate, 'from')) value = undefined;\n        if (value && maxDate && this.formatDate(value) > getWeek(maxDate, 'to')) value = undefined;\n\n        this.values = {\n            today: this.formatDate(new Date()),\n            selected: value ? getWeek(value, 'from') : '',\n            minDate: minDate ? getWeek(minDate, 'from') : '0000-00-00',\n            maxDate: maxDate ? getWeek(maxDate, 'to') : '9999-99-99',\n        };\n\n        const month: string = this.jalali.toString(value || new Date(), { format: 'Y-M' });\n        this.calendar = this.jalali.calendar(month);\n        this.view = 'CALENDAR';\n    }\n\n    changeMonth(change: number): void {\n        let [year, month] = this.calendar.month.split('-').map((v: string) => +v);\n        switch (change) {\n            case 12:\n            case -12:\n                year += change === 12 ? 1 : -1;\n                break;\n\n            case 1:\n            case -1:\n                month += change;\n                if (month === 13) {\n                    year++;\n                    month = 1;\n                }\n                if (month === 0) {\n                    year--;\n                    month = 12;\n                }\n                break;\n\n            case 0:\n                [year, month] = this.values.today.split('-').map((v: string) => +v);\n                break;\n        }\n\n        this.calendar = this.jalali.calendar(year.toString() + '-' + month.toString().padStart(2, '0'));\n    }\n\n    setDate(value: string): void {\n        const gregorian: string = this.jalali.gregorian(value).date;\n        const date: Date = this.jalali.periodDay(1, new Date(gregorian + 'T00:00:00.000Z')).from;\n        const period: JalaliDateTimePeriod = this.jalali.periodWeek(1, date);\n        const title: string = Helper.DATE.jalaliPeriod(period.from, period.to);\n\n        this.values.selected = this.formatDate(period.from);\n        this.onChange.next({ period, title });\n    }\n\n    toggleView(): void {\n        this.view = this.view === 'CALENDAR' ? 'MONTH' : 'CALENDAR';\n        if (this.view === 'MONTH') this.changeYear(+this.calendar.month.substring(0, 4));\n    }\n\n    changeYear(year?: number): void {\n        if (year && year < 1000) return;\n        this.year = year || +this.values.today.substring(0, 4);\n\n        let decade: number = this.year - (this.year % 10);\n        if (decade <= 1020) decade = 1020;\n        this.years = [decade - 20, decade - 10, decade, decade + 10, decade + 20];\n        this.seasons.forEach((season, s: number) => {\n            season.forEach((month, m: number) => {\n                month.month = `${this.year.toString()}-${(s * 3 + m + 1).toString().padStart(2, '0')}`;\n            });\n        });\n    }\n\n    setMonth(month: string): void {\n        this.calendar = this.jalali.calendar(month);\n        this.view = 'CALENDAR';\n    }\n}\n","<div class=\"calendar-header\">\n    <button mat-icon-button type=\"button\" (click)=\"toggleView()\">\n        <mat-icon>{{ view === 'CALENDAR' ? 'calendar_month' : 'close' }}</mat-icon>\n    </button>\n    <div class=\"title\">{{ view === 'CALENDAR' ? calendar.title : year }}</div>\n\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(-12) : changeYear(year - 10)\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(-1) : changeYear(year - 1)\">\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(0) : changeYear(year)\">\n        <mat-icon>radio_button_checked</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(1) : changeYear(year + 1)\">\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"view === 'CALENDAR' ? changeMonth(12) : changeYear(year + 10)\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n</div>\n\n<div class=\"calendar-nav\">\n    @switch (view) {\n    <!-- CALENDAR -->\n    @case ('CALENDAR') {\n    <!-- NAMES  -->\n    @for (day of ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج']; track $index) {\n    <div class=\"item\">{{ day }}</div>\n    } } @case ('MONTH') {\n    <!-- YEARS -->\n    @for (item of years; track $index) {\n    <div class=\"item click\" (click)=\"changeYear(item)\">{{ item }}</div>\n    } } }\n</div>\n\n<div class=\"calendar-content\">\n    <!-- CALENDAR VIEW -->\n    <section class=\"calendar-view\" [style.visibility]=\"view === 'CALENDAR' ? 'visible' : 'hidden'\">\n        <!-- WEEK -->\n        @for ( week of calendar.weeks; track $index) {\n        <div class=\"week\" [class.week-selected]=\"week[0].date === values.selected\">\n            <!-- DAYS -->\n            @for (day of week; track $index) {\n            <div\n                class=\"day\"\n                [class.day-today]=\"day.date === values.today\"\n                [class.day-selected]=\"week[0].date === values.selected\"\n                [class.day-disable]=\"day.month !== calendar.month || day.date > values.maxDate || day.date < values.minDate\"\n                (click)=\"\n                    day.month !== calendar.month || day.date > values.maxDate || day.date < values.minDate\n                        ? null\n                        : setDate(day.date)\n                \"\n            >\n                {{ day.day }}\n            </div>\n            }\n        </div>\n        }\n    </section>\n\n    <!-- MONTH VIEW -->\n    @if (view === 'MONTH') {\n    <section class=\"month-view\">\n        <!-- SEASON -->\n        @for (season of seasons; track $index) {\n        <div class=\"season\">\n            <!-- MONTH -->\n            @for (month of season; track $index) {\n            <div\n                class=\"month\"\n                [class.month-disable]=\"\n                    (values.minDate && month.month < values.minDate) || (values.maxDate && month.month > values.maxDate)\n                \"\n                (click)=\"\n                    (values.minDate && month.month < values.minDate) || (values.maxDate && month.month > values.maxDate)\n                        ? null\n                        : setMonth(month.month)\n                \"\n            >\n                {{ month.title }}\n            </div>\n            }\n        </div>\n        }\n    </section>\n    }\n</div>\n","import {\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    SimpleChanges,\n    ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\n\nimport { JalaliDateTime, JalaliDateTimePeriod } from '@webilix/jalali-date-time';\n\nimport { INgxCalendarMonth } from '../../ngx-calendar.interface';\n\n@Component({\n    selector: 'ngx-calendar-month',\n    imports: [MatIconButton, MatIcon],\n    templateUrl: './ngx-calendar-month.component.html',\n    changeDetection: ChangeDetectionStrategy.Eager,\n    styleUrl: './ngx-calendar-month.component.scss',\n})\nexport class NgxCalendarMonthComponent implements OnInit, OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-calendar-m3-month';\n\n    @Input({ required: false }) value?: Date | { from: Date; to: Date };\n    @Input({ required: false }) minDate?: 'NOW' | Date;\n    @Input({ required: false }) maxDate?: 'NOW' | Date;\n    @Output() onChange: EventEmitter<INgxCalendarMonth> = new EventEmitter<INgxCalendarMonth>();\n\n    public values!: { today: string; selected: string; minDate: string; maxDate: string };\n    public year!: number;\n\n    public years: number[] = [];\n    public seasons: { title: string; month: string }[][] = [\n        [\n            { title: 'فروردین', month: '' },\n            { title: 'اردیبهشت', month: '' },\n            { title: 'خرداد', month: '' },\n        ],\n        [\n            { title: 'تیر', month: '' },\n            { title: 'مرداد', month: '' },\n            { title: 'شهریور', month: '' },\n        ],\n        [\n            { title: 'مهر', month: '' },\n            { title: 'آبان', month: '' },\n            { title: 'آذر', month: '' },\n        ],\n        [\n            { title: 'دی', month: '' },\n            { title: 'بهمن', month: '' },\n            { title: 'اسفند', month: '' },\n        ],\n    ];\n\n    private jalali = JalaliDateTime();\n\n    ngOnInit(): void {\n        this.initValues();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.initValues();\n    }\n\n    initValues(): void {\n        const getMonth = (date: Date): string => this.jalali.toString(date, { format: 'Y-M' });\n        let minDate: Date | undefined = this.minDate === 'NOW' ? new Date() : this.minDate;\n        let maxDate: Date | undefined = this.maxDate === 'NOW' ? new Date() : this.maxDate;\n\n        // Check MIN and MAX Dates\n        if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {\n            const date: Date = new Date(minDate);\n            minDate = maxDate;\n            maxDate = date;\n        }\n\n        // Check Value\n        let value: Date | undefined = this.value ? ('from' in this.value ? this.value.from : this.value) : undefined;\n        if (value && minDate && getMonth(value) < getMonth(minDate)) value = undefined;\n        if (value && maxDate && getMonth(value) > getMonth(maxDate)) value = undefined;\n\n        this.values = {\n            today: getMonth(new Date()),\n            selected: value ? getMonth(value) : '',\n            minDate: minDate ? getMonth(minDate) : '0000-00',\n            maxDate: maxDate ? getMonth(maxDate) : '9999-99',\n        };\n\n        const year: string = this.values.selected ? this.values.selected : this.values.today;\n        this.changeYear(+year.substring(0, 4));\n    }\n\n    changeYear(year?: number): void {\n        if (year && year < 1000) return;\n        this.year = year || +this.values.today.substring(0, 4);\n\n        let decade: number = this.year - (this.year % 10);\n        if (decade <= 1020) decade = 1020;\n        this.years = [decade - 20, decade - 10, decade, decade + 10, decade + 20];\n        this.seasons.forEach((season, s: number) => {\n            season.forEach((month, m: number) => {\n                month.month = `${this.year.toString()}-${(s * 3 + m + 1).toString().padStart(2, '0')}`;\n            });\n        });\n    }\n\n    setMonth(value: string): void {\n        const gregorian: string = this.jalali.gregorian(`${value}-01`).date;\n        const date: Date = this.jalali.periodDay(1, new Date(gregorian + 'T00:00:00.000Z')).from;\n        const period: JalaliDateTimePeriod = this.jalali.periodMonth(1, date);\n        const title: string = this.jalali.toFullText(period.from, { format: 'N Y' });\n\n        this.values.selected = value;\n        this.onChange.next({ period, title, jalali: value });\n    }\n}\n","<div class=\"calendar-header\">\n    <div class=\"title\">{{ year }}</div>\n\n    <button mat-icon-button type=\"button\" (click)=\"changeYear(year - 10)\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"changeYear(year - 1)\">\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"changeYear()\">\n        <mat-icon>radio_button_checked</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"changeYear(year + 1)\">\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"changeYear(year + 12)\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n</div>\n\n<div class=\"calendar-nav\">\n    @for (item of years; track $index) {\n    <div class=\"item click\" (click)=\"changeYear(item)\">{{ item }}</div>\n    }\n</div>\n\n<!-- SEASON -->\n@for (season of seasons; track $index) {\n<div class=\"calendar-content\">\n    <!-- MONTH -->\n    @for (month of season; track $index) {\n    <div\n        class=\"month\"\n        [class.month-today]=\"month.month === values.today\"\n        [class.month-selected]=\"month.month === values.selected\"\n        [class.month-disable]=\"\n            (values.minDate && month.month < values.minDate) || (values.maxDate && month.month > values.maxDate)\n        \"\n        (click)=\"\n            (values.minDate && month.month < values.minDate) || (values.maxDate && month.month > values.maxDate)\n                ? null\n                : setMonth(month.month)\n        \"\n    >\n        {{ month.title }}\n    </div>\n    }\n</div>\n}\n","import {\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    SimpleChanges,\n    ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\n\nimport { JalaliDateTime } from '@webilix/jalali-date-time';\n\nimport { INgxCalendarYear } from '../../ngx-calendar.interface';\n\n@Component({\n    selector: 'ngx-calendar-year',\n    imports: [MatIconButton, MatIcon],\n    templateUrl: './ngx-calendar-year.component.html',\n    changeDetection: ChangeDetectionStrategy.Eager,\n    styleUrl: './ngx-calendar-year.component.scss',\n})\nexport class NgxCalendarYearComponent implements OnInit, OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-calendar-m3-year';\n\n    @Input({ required: false }) value?: Date | { from: Date; to: Date };\n    @Input({ required: false }) minDate?: 'NOW' | Date;\n    @Input({ required: false }) maxDate?: 'NOW' | Date;\n    @Output() onChange: EventEmitter<INgxCalendarYear> = new EventEmitter<INgxCalendarYear>();\n\n    public values!: { today: string; selected: string; minDate: string; maxDate: string };\n    public years!: number[];\n\n    private jalali = JalaliDateTime();\n\n    ngOnInit(): void {\n        this.initValues();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.initValues();\n    }\n\n    initValues(): void {\n        const getYear = (date: Date): string => this.jalali.toString(date, { format: 'Y' });\n        let minDate: Date | undefined = this.minDate === 'NOW' ? new Date() : this.minDate;\n        let maxDate: Date | undefined = this.maxDate === 'NOW' ? new Date() : this.maxDate;\n\n        // Check MIN and MAX Dates\n        if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {\n            const date: Date = new Date(minDate);\n            minDate = maxDate;\n            maxDate = date;\n        }\n\n        // Check Value\n        let value: Date | undefined = this.value ? ('from' in this.value ? this.value.from : this.value) : undefined;\n        if (value && minDate && getYear(value) < getYear(minDate)) value = undefined;\n        if (value && maxDate && getYear(value) > getYear(maxDate)) value = undefined;\n\n        this.values = {\n            today: getYear(new Date()),\n            selected: value ? getYear(value) : '',\n            minDate: minDate ? getYear(minDate) : '0000',\n            maxDate: maxDate ? getYear(maxDate) : '9999',\n        };\n\n        const year: string = this.values.selected ? this.values.selected : this.values.today;\n        this.changeYear(+year.substring(0, 4));\n    }\n\n    changeYear(year: number): void {\n        if (year < 1000) year = 1000;\n\n        const count: number = 25;\n        const start: number = year - (year % count);\n        this.years = [...Array(count).keys()].map((n: number) => start + n);\n    }\n\n    setYear(value: string): void {\n        if (\n            value < '1000' ||\n            (this.values.minDate && value < this.values.minDate) ||\n            (this.values.maxDate && value > this.values.maxDate)\n        )\n            return;\n\n        const lastDayInYear: string = this.jalali.daysInMonth(`${value}-12`).toString();\n        const from: Date = new Date(this.jalali.gregorian(`${value}-01-01`).date + 'T00:00:00.000Z');\n        const to: Date = new Date(this.jalali.gregorian(`${value}-12-${lastDayInYear}`).date + 'T00:00:00.000Z');\n        const period = {\n            from: this.jalali.periodDay(1, from).from,\n            to: this.jalali.periodDay(1, to).to,\n        };\n\n        this.values.selected = value;\n        this.onChange.next({ period, year: +value });\n    }\n}\n","<div class=\"calendar-header\">\n    <div class=\"title\">{{ years[0] }} - {{ years[years.length - 1] }}</div>\n\n    <button mat-icon-button type=\"button\" (click)=\"changeYear(years[0] - 1)\">\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"changeYear(+values.today)\">\n        <mat-icon>radio_button_checked</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" (click)=\"changeYear(years[years.length - 1] + 1)\">\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n</div>\n\n<!-- YEARS -->\n<div class=\"calendar-content\">\n    @for (year of years; track $index) {\n    <div\n        class=\"year\"\n        [class.year-today]=\"+values.today === year\"\n        [class.year-selected]=\"+values.selected === year\"\n        [class.year-disable]=\"(values.minDate && year < +values.minDate) || (values.maxDate && year > +values.maxDate)\"\n        (click)=\"\n            (values.minDate && year < +values.minDate) || (values.maxDate && year > +values.maxDate)\n                ? null\n                : setYear(year.toString())\n        \"\n    >\n        {{ year }}\n    </div>\n    }\n</div>\n","import { Component, inject, ChangeDetectionStrategy } from '@angular/core';\n\nimport { NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA } from '@webilix/ngx-helper-m3';\n\nimport {\n    NgxCalendarDateComponent,\n    NgxCalendarMomentComponent,\n    NgxCalendarMonthComponent,\n    NgxCalendarWeekComponent,\n    NgxCalendarYearComponent,\n} from '../../components';\nimport { NgxCalendar } from '../../ngx-calendar.interface';\n\nimport { IContainer } from '../container.interface';\n\n@Component({\n    host: { selector: 'bottom-sheet' },\n    imports: [\n        NgxCalendarMomentComponent,\n        NgxCalendarDateComponent,\n        NgxCalendarWeekComponent,\n        NgxCalendarMonthComponent,\n        NgxCalendarYearComponent,\n    ],\n    templateUrl: './bottom-sheet.component.html',\n    changeDetection: ChangeDetectionStrategy.Eager,\n    styleUrl: './bottom-sheet.component.scss',\n})\nexport class BottomSheetComponent<R> {\n    public data: { calendar: NgxCalendar | 'MOMENT'; container: IContainer } = inject(NGX_HELPER_CONTAINER_DATA);\n    public closeContainer = inject(NGX_HELPER_CONTAINER_CLOSE);\n}\n","@switch (data.calendar) {\n    <!-- MOMENT -->\n    @case ('MOMENT') {\n        <ngx-calendar-moment\n            [value]=\"$safeNavigationMigration(data.container.value?.from)\"\n            [minDate]=\"data.container.minDate\"\n            [maxDate]=\"data.container.maxDate\"\n            (onChange)=\"closeContainer($event)\"\n        ></ngx-calendar-moment>\n    }\n    <!-- DATE -->\n    @case ('DATE') {\n        <ngx-calendar-date\n            [value]=\"$safeNavigationMigration(data.container.value?.from)\"\n            [minDate]=\"data.container.minDate\"\n            [maxDate]=\"data.container.maxDate\"\n            (onChange)=\"closeContainer($event)\"\n        ></ngx-calendar-date>\n    }\n    <!-- WEEK -->\n    @case ('WEEK') {\n        <ngx-calendar-week\n            [value]=\"data.container.value\"\n            [minDate]=\"data.container.minDate\"\n            [maxDate]=\"data.container.maxDate\"\n            (onChange)=\"closeContainer($event)\"\n        ></ngx-calendar-week>\n    }\n    <!-- MONTH -->\n    @case ('MONTH') {\n        <ngx-calendar-month\n            [value]=\"data.container.value\"\n            [minDate]=\"data.container.minDate\"\n            [maxDate]=\"data.container.maxDate\"\n            (onChange)=\"closeContainer($event)\"\n        ></ngx-calendar-month>\n    }\n    <!-- YEAR -->\n    @case ('YEAR') {\n        <ngx-calendar-year\n            [value]=\"data.container.value\"\n            [minDate]=\"data.container.minDate\"\n            [maxDate]=\"data.container.maxDate\"\n            (onChange)=\"closeContainer($event)\"\n        ></ngx-calendar-year>\n    }\n}\n","import { Component, inject, ChangeDetectionStrategy } from '@angular/core';\n\nimport { NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA } from '@webilix/ngx-helper-m3';\n\nimport {\n    NgxCalendarDateComponent,\n    NgxCalendarMomentComponent,\n    NgxCalendarMonthComponent,\n    NgxCalendarWeekComponent,\n    NgxCalendarYearComponent,\n} from '../../components';\nimport { NgxCalendar } from '../../ngx-calendar.interface';\n\nimport { IContainer } from '../container.interface';\n\n@Component({\n    host: { selector: 'dialog' },\n    imports: [\n        NgxCalendarMomentComponent,\n        NgxCalendarDateComponent,\n        NgxCalendarWeekComponent,\n        NgxCalendarMonthComponent,\n        NgxCalendarYearComponent,\n    ],\n    templateUrl: './dialog.component.html',\n    changeDetection: ChangeDetectionStrategy.Eager,\n    styleUrl: './dialog.component.scss',\n})\nexport class DialogComponent<R> {\n    public data: { calendar: NgxCalendar | 'MOMENT'; container: IContainer } = inject(NGX_HELPER_CONTAINER_DATA);\n    public closeContainer = inject(NGX_HELPER_CONTAINER_CLOSE);\n}\n","<content>\n    @switch (data.calendar) {\n        <!-- MOMENT -->\n        @case ('MOMENT') {\n            <ngx-calendar-moment\n                [value]=\"$safeNavigationMigration(data.container.value?.from)\"\n                [minDate]=\"data.container.minDate\"\n                [maxDate]=\"data.container.maxDate\"\n                (onChange)=\"closeContainer($event)\"\n            ></ngx-calendar-moment>\n        }\n        <!-- DATE -->\n        @case ('DATE') {\n            <ngx-calendar-date\n                [value]=\"$safeNavigationMigration(data.container.value?.from)\"\n                [minDate]=\"data.container.minDate\"\n                [maxDate]=\"data.container.maxDate\"\n                (onChange)=\"closeContainer($event)\"\n            ></ngx-calendar-date>\n        }\n        <!-- WEEK -->\n        @case ('WEEK') {\n            <ngx-calendar-week\n                [value]=\"data.container.value\"\n                [minDate]=\"data.container.minDate\"\n                [maxDate]=\"data.container.maxDate\"\n                (onChange)=\"closeContainer($event)\"\n            ></ngx-calendar-week>\n        }\n        <!-- MONTH -->\n        @case ('MONTH') {\n            <ngx-calendar-month\n                [value]=\"data.container.value\"\n                [minDate]=\"data.container.minDate\"\n                [maxDate]=\"data.container.maxDate\"\n                (onChange)=\"closeContainer($event)\"\n            ></ngx-calendar-month>\n        }\n        <!-- YEAR -->\n        @case ('YEAR') {\n            <ngx-calendar-year\n                [value]=\"data.container.value\"\n                [minDate]=\"data.container.minDate\"\n                [maxDate]=\"data.container.maxDate\"\n                (onChange)=\"closeContainer($event)\"\n            ></ngx-calendar-year>\n        }\n    }\n</content>\n","import { Injectable } from '@angular/core';\n\nimport { NgxHelperContainerService } from '@webilix/ngx-helper-m3';\n\nimport { BottomSheetComponent, DialogComponent, IContainer } from './container';\nimport {\n    INgxCalendarDate,\n    INgxCalendarMoment,\n    INgxCalendarMonth,\n    INgxCalendarWeek,\n    INgxCalendarYear,\n    NgxCalendar,\n} from './ngx-calendar.interface';\n\ninterface ICalendar {\n    readonly title: string;\n    readonly value: Date;\n    readonly minDate: 'NOW' | Date;\n    readonly maxDate: 'NOW' | Date;\n}\n\ninterface ICalendarMoment extends ICalendar {}\n\ninterface ICalendarDate extends ICalendar {}\n\ninterface ICalendarWeek extends Omit<ICalendar, 'value'> {\n    readonly value: Date | { readonly from: Date; readonly to: Date };\n}\ninterface ICalendarMonth extends Omit<ICalendar, 'value'> {\n    readonly value: Date | { readonly from: Date; readonly to: Date };\n}\ninterface ICalendarYear extends Omit<ICalendar, 'value'> {\n    readonly value: Date | { readonly from: Date; readonly to: Date };\n}\n\nclass NgxCalendarClass<R /* RESPONSE */> {\n    constructor(\n        private readonly calendar: NgxCalendar | 'MOMENT',\n        private readonly container: IContainer,\n        private readonly ngxHelperContainerService: NgxHelperContainerService,\n        private readonly title?: string,\n    ) {}\n\n    private getTitle(calendar: NgxCalendar | 'MOMENT', title?: string): string {\n        if (title) return title;\n\n        switch (calendar) {\n            case 'DATE':\n                return 'انتخاب تاریخ';\n            case 'MOMENT':\n                return 'انتخاب زمان';\n            case 'WEEK':\n                return 'انتخاب هفته';\n            case 'MONTH':\n                return 'انتخاب ماه';\n            case 'YEAR':\n                return 'انتخاب سال';\n            case 'PERIOD':\n                return 'انتخاب دوره زمانی';\n        }\n    }\n\n    dialog(onResponse: (response: R) => void): void;\n    dialog(onResponse: (response: R) => void, onDismiss: () => void): void;\n    dialog(onResponse: (response: R) => void, onDismiss?: () => void): void {\n        this.ngxHelperContainerService\n            .init(DialogComponent, this.getTitle(this.calendar, this.title), {\n                data: { calendar: this.calendar, container: this.container },\n                padding: '0',\n            })\n            .dialog<R>(onResponse, onDismiss || (() => {}));\n    }\n\n    bottomSheet(onResponse: (response: R) => void): void;\n    bottomSheet(onResponse: (response: R) => void, onDismiss: () => void): void;\n    bottomSheet(onResponse: (response: R) => void, onDismiss?: () => void): void {\n        this.ngxHelperContainerService\n            .init(BottomSheetComponent, this.getTitle(this.calendar, this.title), {\n                data: { calendar: this.calendar, container: this.container },\n                padding: '0',\n            })\n            .bottomSheet<R>(onResponse, onDismiss || (() => {}));\n    }\n}\n\n@Injectable({ providedIn: 'root' })\nexport class NgxCalendarService {\n    constructor(private readonly ngxHelperContainerService: NgxHelperContainerService) {}\n\n    getDate(): NgxCalendarClass<INgxCalendarDate>;\n    getDate(options: Partial<ICalendarDate>): NgxCalendarClass<INgxCalendarDate>;\n    getDate(arg1?: any): NgxCalendarClass<INgxCalendarDate> {\n        const options: Partial<ICalendarDate> = arg1 || {};\n        const container: IContainer = {\n            value: options.value ? { from: options.value, to: options.value } : undefined,\n            minDate: options.minDate,\n            maxDate: options.maxDate,\n        };\n\n        return new NgxCalendarClass<INgxCalendarDate>('DATE', container, this.ngxHelperContainerService, options.title);\n    }\n\n    getMoment(): NgxCalendarClass<INgxCalendarMoment>;\n    getMoment(options: Partial<ICalendarMoment>): NgxCalendarClass<INgxCalendarMoment>;\n    getMoment(arg1?: any): NgxCalendarClass<INgxCalendarMoment> {\n        const options: Partial<ICalendarMoment> = arg1 || {};\n        const container: IContainer = {\n            value: options.value ? { from: options.value, to: options.value } : undefined,\n            minDate: options.minDate,\n            maxDate: options.maxDate,\n        };\n\n        return new NgxCalendarClass<INgxCalendarMoment>('MOMENT', container, this.ngxHelperContainerService, options.title);\n    }\n\n    getWeek(): NgxCalendarClass<INgxCalendarWeek>;\n    getWeek(options: Partial<ICalen