@webilix/ngx-calendar-m3
Version:
Jalali calendar components for Angular and Material 3
1,206 lines • 98.1 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, HostBinding, Component, inject, Injectable } from '@angular/core';
import { MatIconButton, MatButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { JalaliDateTime } from '@webilix/jalali-date-time';
import * as i1 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import * as i1$1 from '@webilix/ngx-helper-m3';
import { NgxHelperDatePipe, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_CLOSE } from '@webilix/ngx-helper-m3';
import { Helper } from '@webilix/helper-library';
import * as i1$2 from '@angular/router';
class NgxCalendarDateComponent {
className = 'ngx-calendar-m3-date';
value;
minDate;
maxDate;
onChange = new EventEmitter();
view = 'CALENDAR';
values;
calendar;
year;
years = [];
seasons = [
[
{ title: 'فروردین', month: '' },
{ title: 'اردیبهشت', month: '' },
{ title: 'خرداد', month: '' },
],
[
{ title: 'تیر', month: '' },
{ title: 'مرداد', month: '' },
{ title: 'شهریور', month: '' },
],
[
{ title: 'مهر', month: '' },
{ title: 'آبان', month: '' },
{ title: 'آذر', month: '' },
],
[
{ title: 'دی', month: '' },
{ title: 'بهمن', month: '' },
{ title: 'اسفند', month: '' },
],
];
jalali = JalaliDateTime();
ngOnInit() {
this.initValues();
}
ngOnChanges(changes) {
this.initValues();
}
formatDate(date) {
return this.jalali.toString(date, { format: 'Y-M-D' });
}
initValues() {
let minDate = this.minDate === 'NOW' ? new Date() : this.minDate;
let maxDate = this.maxDate === 'NOW' ? new Date() : this.maxDate;
// Check MIN and MAX Dates
if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {
const date = new Date(minDate);
minDate = maxDate;
maxDate = date;
}
// Check Value
if (this.value && minDate && this.formatDate(this.value) < this.formatDate(minDate))
this.value = undefined;
if (this.value && maxDate && this.formatDate(this.value) > this.formatDate(maxDate))
this.value = undefined;
this.values = {
today: this.formatDate(new Date()),
selected: this.value ? this.formatDate(this.value) : '',
minDate: minDate ? this.formatDate(minDate) : '0000-00-00',
maxDate: maxDate ? this.formatDate(maxDate) : '9999-99-99',
};
const month = this.jalali.toString(this.value || new Date(), { format: 'Y-M' });
this.calendar = this.jalali.calendar(month);
this.view = 'CALENDAR';
}
changeMonth(change) {
let [year, month] = this.calendar.month.split('-').map((v) => +v);
switch (change) {
case 12:
case -12:
year += change === 12 ? 1 : -1;
break;
case 1:
case -1:
month += change;
if (month === 13) {
year++;
month = 1;
}
if (month === 0) {
year--;
month = 12;
}
break;
case 0:
[year, month] = this.values.today.split('-').map((v) => +v);
break;
}
this.calendar = this.jalali.calendar(year.toString() + '-' + month.toString().padStart(2, '0'));
}
setDate(value) {
const gregorian = this.jalali.gregorian(value).date;
const date = this.jalali.periodDay(1, new Date(gregorian + 'T00:00:00.000Z')).from;
const title = this.jalali.toFullText(date, { format: 'W، d N Y' });
const jalali = this.formatDate(date);
this.values.selected = value;
this.onChange.next({ date, title, jalali });
}
toggleView() {
this.view = this.view === 'CALENDAR' ? 'MONTH' : 'CALENDAR';
if (this.view === 'MONTH')
this.changeYear(+this.calendar.month.substring(0, 4));
}
changeYear(year) {
if (year && year < 1000)
return;
this.year = year || +this.values.today.substring(0, 4);
let decade = this.year - (this.year % 10);
if (decade <= 1020)
decade = 1020;
this.years = [decade - 20, decade - 10, decade, decade + 10, decade + 20];
this.seasons.forEach((season, s) => {
season.forEach((month, m) => {
month.month = `${this.year.toString()}-${(s * 3 + m + 1).toString().padStart(2, '0')}`;
});
});
}
setMonth(month) {
this.calendar = this.jalali.calendar(month);
this.view = 'CALENDAR';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxCalendarDateComponent, isStandalone: true, selector: "ngx-calendar-date", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { onChange: "onChange" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<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 ['\u0634', '\u06CC', '\u062F', '\u0633', '\u0686', '\u067E', '\u062C']; 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", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarDateComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-calendar-date', imports: [MatIconButton, MatIcon], template: "<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 ['\u0634', '\u06CC', '\u062F', '\u0633', '\u0686', '\u067E', '\u062C']; 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" }]
}], propDecorators: { className: [{
type: HostBinding,
args: ['className']
}], value: [{
type: Input,
args: [{ required: false }]
}], minDate: [{
type: Input,
args: [{ required: false }]
}], maxDate: [{
type: Input,
args: [{ required: false }]
}], onChange: [{
type: Output
}] } });
class NgxCalendarMomentComponent {
className = 'ngx-calendar-m3-moment';
value;
minDate;
maxDate;
onChange = new EventEmitter();
canSubmit = false;
dateString;
hour;
hours = [...Array(24).keys()].map((hour) => hour.toString().padStart(2, '0'));
minute;
minutes = [...Array(60).keys()].map((minute) => minute.toString().padStart(2, '0'));
jalali = JalaliDateTime();
ngOnInit() {
this.initValues();
}
ngOnChanges(changes) {
this.initValues();
}
formatDate(date) {
return this.jalali.toString(date, { format: 'Y-M-D H:I' });
}
getMinMax() {
const minDate = this.minDate === 'NOW' ? new Date() : this.minDate;
const maxDate = this.maxDate === 'NOW' ? new Date() : this.maxDate;
return { minDate, maxDate };
}
initValues() {
const updateDate = (date) => {
date.setSeconds(0);
date.setMilliseconds(0);
};
let { minDate, maxDate } = this.getMinMax();
if (this.value)
updateDate(this.value);
if (minDate)
updateDate(minDate);
if (maxDate)
updateDate(maxDate);
// Check MIN and MAX Dates
if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {
const date = new Date(minDate);
minDate = maxDate;
maxDate = date;
}
// Check Value
if (this.value && minDate && this.formatDate(this.value) < this.formatDate(minDate))
this.value = undefined;
if (this.value && maxDate && this.formatDate(this.value) > this.formatDate(maxDate))
this.value = undefined;
this.hour = (this.value || new Date()).getHours().toString().padStart(2, '0');
this.minute = (this.value || new Date()).getMinutes().toString().padStart(2, '0');
this.updateValue();
}
updateValue() {
this.canSubmit = false;
if (!this.value)
return;
const { minDate, maxDate } = this.getMinMax();
this.value.setHours(+this.hour);
this.value.setMinutes(+this.minute);
this.value.setSeconds(0);
this.value.setMilliseconds(0);
if (minDate && this.formatDate(this.value) < this.formatDate(minDate)) {
this.value.setHours(minDate.getHours());
this.value.setMinutes(minDate.getMinutes());
}
if (maxDate && this.formatDate(this.value) > this.formatDate(maxDate)) {
this.value.setHours(maxDate.getHours());
this.value.setMinutes(maxDate.getMinutes());
}
this.hour = this.value.getHours().toString().padStart(2, '0');
this.minute = this.value.getMinutes().toString().padStart(2, '0');
this.canSubmit = true;
}
setDate(date) {
this.value = date.date;
this.updateValue();
}
isActiveHour(hour) {
const { minDate, maxDate } = this.getMinMax();
if (!this.value)
return false;
if (!minDate && !maxDate)
return true;
const check = this.jalali.toString(this.value, { format: `Y-M-D ${hour}` });
if (minDate && check < this.formatDate(minDate).substring(0, 13))
return false;
if (maxDate && check > this.formatDate(maxDate).substring(0, 13))
return false;
return true;
}
setHour(hour) {
this.hour = hour;
this.updateValue();
}
isActiveMinute(minute) {
const { minDate, maxDate } = this.getMinMax();
if (!this.value)
return false;
if (!minDate && !maxDate)
return true;
const check = this.jalali.toString(this.value, { format: `Y-M-D H:${minute}` });
if (minDate && check < this.formatDate(minDate))
return false;
if (maxDate && check > this.formatDate(maxDate))
return false;
return true;
}
setMinute(minute) {
this.minute = minute;
this.updateValue();
}
onSubmit() {
if (!this.value || !this.canSubmit)
return;
const moment = new Date(this.value.getTime());
const title = this.jalali.toFullText(moment, { format: 'W، d N Y H:I' });
const jalali = this.formatDate(moment);
this.onChange.next({ moment, title, jalali });
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarMomentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxCalendarMomentComponent, isStandalone: true, selector: "ngx-calendar-moment", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { onChange: "onChange" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<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\">\u062A\u0627\u06CC\u06CC\u062F</button>\n</div>\n", styles: ["::ng-deep .ngx-calendar-m3-moment-minute{max-width:fit-content!important;direction:ltr}::ng-deep .ngx-calendar-m3-moment-minute .mat-mdc-menu-content{padding:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;row-gap:.25rem;column-gap:.25rem;width:fit-content!important}::ng-deep .ngx-calendar-m3-moment-minute .mat-mdc-menu-content button{padding:.5rem;min-width:auto;min-height:auto;border-radius:0;text-align:center}::ng-deep .ngx-calendar-m3-moment-minute .mat-mdc-menu-content button span.minute{font-size:90%}::ng-deep .ngx-calendar-m3-moment-minute .mat-mdc-menu-content button.selected{color:var(--primary);border:1px solid var(--primary)}::ng-deep .ngx-calendar-m3-moment-hour{max-width:fit-content!important;direction:ltr}::ng-deep .ngx-calendar-m3-moment-hour .mat-mdc-menu-content{padding:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;row-gap:.25rem;column-gap:.25rem;width:fit-content!important}::ng-deep .ngx-calendar-m3-moment-hour .mat-mdc-menu-content button{padding:.75rem;min-width:auto;min-height:auto;border-radius:0;text-align:center}::ng-deep .ngx-calendar-m3-moment-hour .mat-mdc-menu-content button span.hour{font-size:90%}::ng-deep .ngx-calendar-m3-moment-hour .mat-mdc-menu-content button.selected{color:var(--primary);border:1px solid var(--primary)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: NgxCalendarDateComponent, selector: "ngx-calendar-date", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarMomentComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-calendar-moment', imports: [MatButton, MatMenuModule, NgxHelperDatePipe, NgxCalendarDateComponent], template: "<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\">\u062A\u0627\u06CC\u06CC\u062F</button>\n</div>\n", styles: ["::ng-deep .ngx-calendar-m3-moment-minute{max-width:fit-content!important;direction:ltr}::ng-deep .ngx-calendar-m3-moment-minute .mat-mdc-menu-content{padding:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;row-gap:.25rem;column-gap:.25rem;width:fit-content!important}::ng-deep .ngx-calendar-m3-moment-minute .mat-mdc-menu-content button{padding:.5rem;min-width:auto;min-height:auto;border-radius:0;text-align:center}::ng-deep .ngx-calendar-m3-moment-minute .mat-mdc-menu-content button span.minute{font-size:90%}::ng-deep .ngx-calendar-m3-moment-minute .mat-mdc-menu-content button.selected{color:var(--primary);border:1px solid var(--primary)}::ng-deep .ngx-calendar-m3-moment-hour{max-width:fit-content!important;direction:ltr}::ng-deep .ngx-calendar-m3-moment-hour .mat-mdc-menu-content{padding:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;row-gap:.25rem;column-gap:.25rem;width:fit-content!important}::ng-deep .ngx-calendar-m3-moment-hour .mat-mdc-menu-content button{padding:.75rem;min-width:auto;min-height:auto;border-radius:0;text-align:center}::ng-deep .ngx-calendar-m3-moment-hour .mat-mdc-menu-content button span.hour{font-size:90%}::ng-deep .ngx-calendar-m3-moment-hour .mat-mdc-menu-content button.selected{color:var(--primary);border:1px solid var(--primary)}\n"] }]
}], propDecorators: { className: [{
type: HostBinding,
args: ['className']
}], value: [{
type: Input,
args: [{ required: false }]
}], minDate: [{
type: Input,
args: [{ required: false }]
}], maxDate: [{
type: Input,
args: [{ required: false }]
}], onChange: [{
type: Output
}] } });
class NgxCalendarWeekComponent {
className = 'ngx-calendar-m3-week';
value;
minDate;
maxDate;
onChange = new EventEmitter();
view = 'CALENDAR';
values;
calendar;
year;
years = [];
seasons = [
[
{ title: 'فروردین', month: '' },
{ title: 'اردیبهشت', month: '' },
{ title: 'خرداد', month: '' },
],
[
{ title: 'تیر', month: '' },
{ title: 'مرداد', month: '' },
{ title: 'شهریور', month: '' },
],
[
{ title: 'مهر', month: '' },
{ title: 'آبان', month: '' },
{ title: 'آذر', month: '' },
],
[
{ title: 'دی', month: '' },
{ title: 'بهمن', month: '' },
{ title: 'اسفند', month: '' },
],
];
jalali = JalaliDateTime();
ngOnInit() {
this.initValues();
}
ngOnChanges(changes) {
this.initValues();
}
formatDate(date) {
return this.jalali.toString(date, { format: 'Y-M-D' });
}
initValues() {
let minDate = this.minDate === 'NOW' ? new Date() : this.minDate;
let maxDate = this.maxDate === 'NOW' ? new Date() : this.maxDate;
const getWeek = (date, period) => {
const week = this.jalali.periodWeek(1, date);
return this.formatDate(period === 'from' ? week.from : week.to);
};
// Check MIN and MAX Dates
if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {
const date = new Date(minDate);
minDate = maxDate;
maxDate = date;
}
// Check Value
let value = this.value ? ('from' in this.value ? this.value.from : this.value) : undefined;
if (value && minDate && this.formatDate(value) < getWeek(minDate, 'from'))
value = undefined;
if (value && maxDate && this.formatDate(value) > getWeek(maxDate, 'to'))
value = undefined;
this.values = {
today: this.formatDate(new Date()),
selected: value ? getWeek(value, 'from') : '',
minDate: minDate ? getWeek(minDate, 'from') : '0000-00-00',
maxDate: maxDate ? getWeek(maxDate, 'to') : '9999-99-99',
};
const month = this.jalali.toString(value || new Date(), { format: 'Y-M' });
this.calendar = this.jalali.calendar(month);
this.view = 'CALENDAR';
}
changeMonth(change) {
let [year, month] = this.calendar.month.split('-').map((v) => +v);
switch (change) {
case 12:
case -12:
year += change === 12 ? 1 : -1;
break;
case 1:
case -1:
month += change;
if (month === 13) {
year++;
month = 1;
}
if (month === 0) {
year--;
month = 12;
}
break;
case 0:
[year, month] = this.values.today.split('-').map((v) => +v);
break;
}
this.calendar = this.jalali.calendar(year.toString() + '-' + month.toString().padStart(2, '0'));
}
setDate(value) {
const gregorian = this.jalali.gregorian(value).date;
const date = this.jalali.periodDay(1, new Date(gregorian + 'T00:00:00.000Z')).from;
const period = this.jalali.periodWeek(1, date);
const title = Helper.DATE.jalaliPeriod(period.from, period.to);
this.values.selected = this.formatDate(period.from);
this.onChange.next({ period, title });
}
toggleView() {
this.view = this.view === 'CALENDAR' ? 'MONTH' : 'CALENDAR';
if (this.view === 'MONTH')
this.changeYear(+this.calendar.month.substring(0, 4));
}
changeYear(year) {
if (year && year < 1000)
return;
this.year = year || +this.values.today.substring(0, 4);
let decade = this.year - (this.year % 10);
if (decade <= 1020)
decade = 1020;
this.years = [decade - 20, decade - 10, decade, decade + 10, decade + 20];
this.seasons.forEach((season, s) => {
season.forEach((month, m) => {
month.month = `${this.year.toString()}-${(s * 3 + m + 1).toString().padStart(2, '0')}`;
});
});
}
setMonth(month) {
this.calendar = this.jalali.calendar(month);
this.view = 'CALENDAR';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarWeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxCalendarWeekComponent, isStandalone: true, selector: "ngx-calendar-week", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { onChange: "onChange" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<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 ['\u0634', '\u06CC', '\u062F', '\u0633', '\u0686', '\u067E', '\u062C']; 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", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarWeekComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-calendar-week', imports: [MatIconButton, MatIcon], template: "<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 ['\u0634', '\u06CC', '\u062F', '\u0633', '\u0686', '\u067E', '\u062C']; 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" }]
}], propDecorators: { className: [{
type: HostBinding,
args: ['className']
}], value: [{
type: Input,
args: [{ required: false }]
}], minDate: [{
type: Input,
args: [{ required: false }]
}], maxDate: [{
type: Input,
args: [{ required: false }]
}], onChange: [{
type: Output
}] } });
class NgxCalendarMonthComponent {
className = 'ngx-calendar-m3-month';
value;
minDate;
maxDate;
onChange = new EventEmitter();
values;
year;
years = [];
seasons = [
[
{ title: 'فروردین', month: '' },
{ title: 'اردیبهشت', month: '' },
{ title: 'خرداد', month: '' },
],
[
{ title: 'تیر', month: '' },
{ title: 'مرداد', month: '' },
{ title: 'شهریور', month: '' },
],
[
{ title: 'مهر', month: '' },
{ title: 'آبان', month: '' },
{ title: 'آذر', month: '' },
],
[
{ title: 'دی', month: '' },
{ title: 'بهمن', month: '' },
{ title: 'اسفند', month: '' },
],
];
jalali = JalaliDateTime();
ngOnInit() {
this.initValues();
}
ngOnChanges(changes) {
this.initValues();
}
initValues() {
const getMonth = (date) => this.jalali.toString(date, { format: 'Y-M' });
let minDate = this.minDate === 'NOW' ? new Date() : this.minDate;
let maxDate = this.maxDate === 'NOW' ? new Date() : this.maxDate;
// Check MIN and MAX Dates
if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {
const date = new Date(minDate);
minDate = maxDate;
maxDate = date;
}
// Check Value
let value = this.value ? ('from' in this.value ? this.value.from : this.value) : undefined;
if (value && minDate && getMonth(value) < getMonth(minDate))
value = undefined;
if (value && maxDate && getMonth(value) > getMonth(maxDate))
value = undefined;
this.values = {
today: getMonth(new Date()),
selected: value ? getMonth(value) : '',
minDate: minDate ? getMonth(minDate) : '0000-00',
maxDate: maxDate ? getMonth(maxDate) : '9999-99',
};
const year = this.values.selected ? this.values.selected : this.values.today;
this.changeYear(+year.substring(0, 4));
}
changeYear(year) {
if (year && year < 1000)
return;
this.year = year || +this.values.today.substring(0, 4);
let decade = this.year - (this.year % 10);
if (decade <= 1020)
decade = 1020;
this.years = [decade - 20, decade - 10, decade, decade + 10, decade + 20];
this.seasons.forEach((season, s) => {
season.forEach((month, m) => {
month.month = `${this.year.toString()}-${(s * 3 + m + 1).toString().padStart(2, '0')}`;
});
});
}
setMonth(value) {
const gregorian = this.jalali.gregorian(`${value}-01`).date;
const date = this.jalali.periodDay(1, new Date(gregorian + 'T00:00:00.000Z')).from;
const period = this.jalali.periodMonth(1, date);
const title = this.jalali.toFullText(period.from, { format: 'N Y' });
this.values.selected = value;
this.onChange.next({ period, title, jalali: value });
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxCalendarMonthComponent, isStandalone: true, selector: "ngx-calendar-month", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { onChange: "onChange" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<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", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarMonthComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-calendar-month', imports: [MatIconButton, MatIcon], template: "<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" }]
}], propDecorators: { className: [{
type: HostBinding,
args: ['className']
}], value: [{
type: Input,
args: [{ required: false }]
}], minDate: [{
type: Input,
args: [{ required: false }]
}], maxDate: [{
type: Input,
args: [{ required: false }]
}], onChange: [{
type: Output
}] } });
class NgxCalendarYearComponent {
className = 'ngx-calendar-m3-year';
value;
minDate;
maxDate;
onChange = new EventEmitter();
values;
years;
jalali = JalaliDateTime();
ngOnInit() {
this.initValues();
}
ngOnChanges(changes) {
this.initValues();
}
initValues() {
const getYear = (date) => this.jalali.toString(date, { format: 'Y' });
let minDate = this.minDate === 'NOW' ? new Date() : this.minDate;
let maxDate = this.maxDate === 'NOW' ? new Date() : this.maxDate;
// Check MIN and MAX Dates
if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {
const date = new Date(minDate);
minDate = maxDate;
maxDate = date;
}
// Check Value
let value = this.value ? ('from' in this.value ? this.value.from : this.value) : undefined;
if (value && minDate && getYear(value) < getYear(minDate))
value = undefined;
if (value && maxDate && getYear(value) > getYear(maxDate))
value = undefined;
this.values = {
today: getYear(new Date()),
selected: value ? getYear(value) : '',
minDate: minDate ? getYear(minDate) : '0000',
maxDate: maxDate ? getYear(maxDate) : '9999',
};
const year = this.values.selected ? this.values.selected : this.values.today;
this.changeYear(+year.substring(0, 4));
}
changeYear(year) {
if (year < 1000)
year = 1000;
const count = 25;
const start = year - (year % count);
this.years = [...Array(count).keys()].map((n) => start + n);
}
setYear(value) {
if (value < '1000' ||
(this.values.minDate && value < this.values.minDate) ||
(this.values.maxDate && value > this.values.maxDate))
return;
const lastDayInYear = this.jalali.daysInMonth(`${value}-12`).toString();
const from = new Date(this.jalali.gregorian(`${value}-01-01`).date + 'T00:00:00.000Z');
const to = new Date(this.jalali.gregorian(`${value}-12-${lastDayInYear}`).date + 'T00:00:00.000Z');
const period = {
from: this.jalali.periodDay(1, from).from,
to: this.jalali.periodDay(1, to).to,
};
this.values.selected = value;
this.onChange.next({ period, year: +value });
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarYearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxCalendarYearComponent, isStandalone: true, selector: "ngx-calendar-year", inputs: { value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { onChange: "onChange" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<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", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarYearComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-calendar-year', imports: [MatIconButton, MatIcon], template: "<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" }]
}], propDecorators: { className: [{
type: HostBinding,
args: ['className']
}], value: [{
type: Input,
args: [{ required: false }]
}], minDate: [{
type: Input,
args: [{ required: false }]
}], maxDate: [{
type: Input,
args: [{ required: false }]
}], onChange: [{
type: Output
}] } });
class BottomSheetComponent {
data = inject(NGX_HELPER_CONTAINER_DATA);
closeContainer = inject(NGX_HELPER_CONTAINER_CLOSE);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "bottom-sheet" } }, ngImport: i0, template: "@switch (data.calendar) {\n<!-- MOMENT -->\n@case ('MOMENT') {\n<ngx-calendar-moment\n [value]=\"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]=\"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", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgxCalendarMomentComponent, selector: "ngx-calendar-moment", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "component", type: NgxCalendarDateComponent, selector: "ngx-calendar-date", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "component", type: NgxCalendarWeekComponent, selector: "ngx-calendar-week", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "component", type: NgxCalendarMonthComponent, selector: "ngx-calendar-month", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "component", type: NgxCalendarYearComponent, selector: "ngx-calendar-year", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BottomSheetComponent, decorators: [{
type: Component,
args: [{ host: { selector: 'bottom-sheet' }, imports: [
NgxCalendarMomentComponent,
NgxCalendarDateComponent,
NgxCalendarWeekComponent,
NgxCalendarMonthComponent,
NgxCalendarYearComponent,
], template: "@switch (data.calendar) {\n<!-- MOMENT -->\n@case ('MOMENT') {\n<ngx-calendar-moment\n [value]=\"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]=\"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", styles: [":host{display:block;overflow:hidden}\n"] }]
}] });
class DialogComponent {
data = inject(NGX_HELPER_CONTAINER_DATA);
closeContainer = inject(NGX_HELPER_CONTAINER_CLOSE);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "dialog" } }, ngImport: i0, template: "<content>\n @switch (data.calendar) {\n <!-- MOMENT -->\n @case ('MOMENT') {\n <ngx-calendar-moment\n [value]=\"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]=\"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</content>\n", styles: [":host{display:block;overflow:hidden}:host content{box-sizing:border-box;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgxCalendarMomentComponent, selector: "ngx-calendar-moment", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "component", type: NgxCalendarDateComponent, selector: "ngx-calendar-date", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "component", type: NgxCalendarWeekComponent, selector: "ngx-calendar-week", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "component", type: NgxCalendarMonthComponent, selector: "ngx-calendar-month", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }, { kind: "component", type: NgxCalendarYearComponent, selector: "ngx-calendar-year", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogComponent, decorators: [{
type: Component,
args: [{ host: { selector: 'dialog' }, imports: [
NgxCalendarMomentComponent,
NgxCalendarDateComponent,
NgxCalendarWeekComponent,
NgxCalendarMonthComponent,
NgxCalendarYearComponent,
], template: "<content>\n @switch (data.calendar) {\n <!-- MOMENT -->\n @case ('MOMENT') {\n <ngx-calendar-moment\n [value]=\"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]=\"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</content>\n", styles: [":host{display:block;overflow:hidden}:host content{box-sizing:border-box;overflow:hidden}\n"] }]
}] });
class NgxCalendarClass {
calendar;
container;
ngxHelperContainerService;
title;
constructor(calendar, container, ngxHelperContainerService, title) {
this.calendar = calendar;
this.container = container;
this.ngxHelperContainerService = ngxHelperContainerService;
this.title = title;
}
getTitle(calendar, title) {
if (title)
return title;
switch (calendar) {
case 'DATE':
return 'انتخاب تاریخ';
case 'MOMENT':
return 'انتخاب زمان';
case 'WEEK':
return 'انتخاب هفته';
case 'MONTH':
return 'انتخاب ماه';
case 'YEAR':
return 'انتخاب سال';
case 'PERIOD':
return 'انتخاب دوره زمانی';
}
}
dialog(onResponse, onDismiss) {
this.ngxHelperContainerService
.init(DialogComponent, this.getTitle(this.calendar, this.title), {
data: { calendar: this.calendar, container: this.container },
padding: '0',
})
.dialog(onResponse, onDismiss || (() => { }));
}
bottomSheet(onResponse, onDismiss) {
this.ngxHelperContainerService
.init(BottomSheetComponent, this.getTitle(this.calendar, this.title), {
data: { calendar: this.calendar, container: this.container },
padding: '0',
})
.bottomSheet(onResponse, onDismiss || (() => { }));
}
}
class NgxCalendarService {
ngxHelperContainerService;
constructor(ngxHelperContainerService) {
this.ngxHelperContainerService = ngxHelperContainerService;
}
getDate(arg1) {
const options = arg1 || {};
const container = {
value: options.value ? { from: options.value, to: options.value } : undefined,
minDate: options.minDate,
maxDate: options.maxDate,
};
return new NgxCalendarClass('DATE', container, this.ngxHelperContainerService, options.title);
}
getMoment(arg1) {
const options = arg1 || {};
const container = {
value: options.value ? { from: options.value, to: options.value } : undefined,
minDate: options.minDate,
maxDate: options.maxDate,
};
return new NgxCalendarClass('MOMENT', container, this.ngxHelperContainerService, options.title);
}
getWeek(arg1) {
const options = arg1 || {};
const container = {
value: options.value
? 'from' in options.value
? options.value
: { from: options.value, to: options.value }
: undefined,
minDate: options.minDate,
maxDate: options.maxDate,
};
return new NgxCalendarClass('WEEK', container, this.ngxHelperContainerService, options.title);
}
getMonth(arg1) {
const options = arg1 || {};
const container = {
value: options.value
? 'from' in options.value
? options.value
: { from: options.value, to: options.value }
: undefined,
minDate: options.minDate,
maxDate: options.maxDate,
};
return new NgxCalendarClass('MONTH', container, this.ngxHelperContainerService, options.title);
}
getYear(arg1) {
const options = arg1 || {};
const container = {
value: options.value
? 'from' in options.value
? options.value
: { from: options.value, to: options.value }
: undefined,
minDate: options.minDate,
maxDate: options.maxDate,
};
return new NgxCalendarClass('YEAR', container, this.ngxHelperContainerService, options.title);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarService, deps: [{ token: i1$1.NgxHelperContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [{ type: i1$1.NgxHelperContainerService }] });
class NgxCalendarComponent {
activatedRoute;
router;
ngxCalendarService;
className = 'ngx-calendar-m3';
cssWidth = '';
cssHeight = '';
calendars;
minDate;
maxDate;
width;
height = '40px';
route = [];
container = 'DIALOG';
onChanged = new EventEmitter();
calendar;
calendarTitle;
periodTitle;
from;
to;
previous = { active: false, date: new Date() };
next = { active: false, date: new Date() };
jalali = JalaliDateTime();
list = ['DATE', 'WEEK', 'MONTH', 'YEAR', 'PERIOD'];
calendarsList = {
DATE: { title: 'روزانه', icon: 'today', method: this.jalali.periodDay },
WEEK: { title: 'هفتگی', icon: 'date_range', method: this.jalali.periodWeek },
MONTH: { title: 'ماهانه', icon: 'calendar_month', method: this.jalali.periodMonth },
YEAR: { title: 'سالانه', icon: 'calendar_today', method: this.jalali.periodYear },
PERIOD: { title: 'دوره زمانی', icon: 'event_note', method: this.jalali.periodDay },
};
constructor(activatedRoute, router, ngxCalendarService) {
this.activatedRoute = activatedRoute;
this.router = router;
this.ngxCalendarService = ngxCalendarService;
}
ngOnInit() {
this.cssWidth = this.width || '100%';
this.cssHeight = this.height;
this.calendars = this.calendars
.filter((calendar) => !!this.calendarsList[calendar])
.filter((calendar, index, arr) => arr.indexOf(calendar) === index);
if (this.calendars.length === 0)
this.calendars = ['DATE', 'WEEK', 'MONTH', 'YEAR', 'PERIOD'];
let { minDate, maxDate } = this.getMinMax();
// Check MIN and MAX Dates
if (minDate && maxDate && minDate.getTime() > maxDate.getTime()) {
const date = new Date(minDate);
minDate = maxDate;
maxDate = date;
}
const queryParams = { ...this.activatedRoute.snapshot.queryParams };
const calendar = this.route.length > 0 && this.calendars.includes(queryParams['ngx-calendar'])
? queryParams['ngx-calendar']
: this.calendars[0];
const from = this.route.length > 0 && Helper.IS.STRING.date(queryParams['ngx-calendar-from'])
? new Date(this.jalali.gregorian(queryParams['ngx-calendar-from']).date + 'T00:00:00.000Z')
: new Date();
const to = this.route.length > 0 && Helper.IS.STRING.date(queryParams['ngx-calendar-to'])
? new Date(this.jalali.gregorian(queryParams['ngx-calendar-to']).date + 'T00:00:00.000Z')
: new Date();
this.setCalendar(calendar, from, to);
}
getMinMax() {
const minDate = this.minDate === 'NOW' ? new Date() : this.minDate;
const maxDate = this.maxDate === 'NOW' ? new Date() : this.maxDate;
return { minDate, maxDate };
}
updateView() {
switch (this.calendar) {
case 'DATE':
this.periodTitle = this.jalali.toTitle(this.from, { format: 'W، d N Y' });
break;
case 'WEEK':
this.periodTitle = Helper.DATE.jalaliPeriod(this.from, this.to).replace('-', ' تا ');
break;
case 'MONTH':
this.periodTitle = this.jalali.toTitle(this.from, { format: 'N Y' });
break;
case 'YEAR':
this.periodTitle = this.jalali.toTitle(this.from, { format: 'Y' });
break;
case 'PERIOD':
this.periodTitle = [
this.jalali.toTitle(this.from, { format: 'd N Y' }),
this.jalali.toTitle(this.to, { format: 'd N Y' }),
];
break;
}
const { minDate, maxDate } = this.getMinMax();
// Update Previous and Next
if (this.calendar !== 'PERIOD') {
const previousCheck = minDate ? this.calendarsList[this.calendar].method(1, minDate).from : undefined;
this.previous.date = this.calendarsList[this.calendar].method(1, new Date(this.from.getTime() - 1)).from;
this.previous.active = !previousCheck || this.previous.date.getTime() >= previousCheck.getTime();
const nextCheck = maxDate ? this.calendarsList[this.calendar].method(1, maxDate).to : undefined;
this.next.date = this.calendarsList[this.calendar].method(1, new Date(this.to.getTime() + 1)).to;
this.next.active = !nextCheck || this.next.date.getTime() <= nextCheck.getTime();
}
// Update Routes
if (this.route.length !== 0) {
const queryParams = { ...this.activatedRoute.snapshot.queryParams };
queryParams['ngx-calendar'] = this.calendar;
queryParams['ngx-calendar-from'] = this.jalali.toString(this.from, { format: 'Y-M-D' });
queryParams['ngx-calendar-to'] = this.jalali.toString(this.to, { format: 'Y-M-D' });
this.router.navigate(this.route, { queryParams });
}
const title = typeof this.periodTitle === 'string'
? this.periodTitle
: Helper.DATE.jalaliPeriod(this.from, this.to).replace('-', ' تا ');
this.onChanged.next({
calendar: this.calendar,
period: { from: this.from, to: this.to },
title,
});
}
setCalendar(calendar, from, to) {
const { minDate, maxDate } = this.getMinMax();
const checkDate = (date) => {
if (minDate && date.getTime() < minDate.getTime())
date = minDate;
if (maxDate && date.getTime() > maxDate.getTime())
date = maxDate;
return date;
};
this.calendar = calendar;
this.calendarTitle = this.calendarsList[this.calendar].title;
const date = checkDate(from || new Date());
switch (this.calendar) {
case 'DATE':
case 'WEEK':
case 'MONTH':
case 'YEAR':
const period = this.calendarsList[this.calendar].method(1, date);
this.from = period.from;
this.to = period.to;
break;
case 'PERIOD':
this.from = checkDate(this.jalali.periodMonth(1, date).from);
this.to = checkDate(this.jalali.periodDay(1, checkDate(to || date)).to);
break;
}
this.updateView();
}
setPrevious() {
if (this.calendar === 'PERIOD' || !this.previous.active)
return;
this.from = this.previous.date;
this.to = this.calendarsList[this.calendar].method(1, this.previous.date).to;
this.updateView();
}
setNext() {
if (this.calendar === 'PERIOD' || !this.next.active)
return;
this.from = this.calendarsList[this.calendar].method(1, this.next.date).from;
this.to = this.next.date;
this.updateView();
}
getDate() {
const setDate = (date) => {
this.from = this.to = date.date;
this.updateView();
};
const calendar = this.ngxCalendarService.getDate({ value: this.from, minDate: this.minDate, maxDate: this.maxDate });
this.container === 'DIALOG' ? calendar.dialog(setDate) : calendar.bottomSheet(setDate);
}
getWeek() {
const setWeek = (week) => {
this.from = week.period.from;
this.to = week.period.to;
this.updateView();
};
const calendar = this.ngxCalendarService.getWeek({ value: this.from, minDate: this.minDate, maxDate: this.maxDate });
this.container === 'DIALOG' ? calendar.dialog(setWeek) : calendar.bottomSheet(setWeek);
}
getMonth() {
const setMonth = (week) => {
this.from = week.period.from;
this.to = week.period.to;
this.updateView();
};
const calendar = this.ngxCalendarService.getMonth({
value: this.from,
minDate: this.minDate,
maxDate: this.maxDate,
});
this.container === 'DIALOG' ? calendar.dialog(setMonth) : calendar.bottomSheet(setMonth);
}
getYear() {
const setYear = (year) => {
this.from = year.period.from;
this.to = year.period.to;
this.updateView();
};
const calendar = this.ngxCalendarService.getYear({
value: this.from,
minDate: this.minDate,
maxDate: this.maxDate,
});
this.container === 'DIALOG' ? calendar.dialog(setYear) : calendar.bottomSheet(setYear);
}
getPeriodFrom() {
const setDate = (date) => {
this.from = date.date;
this.updateView();
};
const calendar = this.ngxCalendarService.getDate({
value: this.from,
minDate: this.minDate,
maxDate: this.to || this.maxDate,
});
this.container === 'DIALOG' ? calendar.dialog(setDate) : calendar.bottomSheet(setDate);
}
getPeriodTo() {
const setDate = (date) => {
this.to = date.date;
this.updateView();
};
const calendar = this.ngxCalendarService.getDate({
value: this.to,
minDate: this.from || this.minDate,
maxDate: this.maxDate,
});
this.container === 'DIALOG' ? calendar.dialog(setDate) : calendar.bottomSheet(setDate);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxCalendarComponent, isStandalone: true, selector: "ngx-calendar", inputs: { calendars: "calendars", minDate: "minDate", maxDate: "maxDate", width: "width", height: "height", route: "route", container: "container" }, outputs: { onChanged: "onChanged" }, host: { properties: { "className": "this.className", "style.--ngx-calendar-m3-width": "this.cssWidth", "style.--ngx-calendar-m3-height": "this.cssHeight" } }, ngImport: i0, template: "<!-- CALENDAR -->\n@if (calendars.length > 1) {\n<div class=\"calendar-types\" [matMenuTriggerFor]=\"calendarMenu\">\n <span>{{ calendarTitle }}</span>\n <mat-icon>keyboard_arrow_down</mat-icon>\n\n <mat-menu #calendarMenu=\"matMenu\" class=\"ngx-calendar-menu\">\n @for (item of list; track $index) {\n <!-- CHECK CALENDAR -->\n @if (calendars.includes(item)) {\n <button mat-menu-item (click)=\"setCalendar(item)\" [disabled]=\"item === calendar\">\n <mat-icon [style.margin-right]=\"'0'\" [style.margin-left]=\"'0.5rem'\" [style.font-size]=\"'18px'\">\n {{ calendarsList[item].icon }}\n </mat-icon>\n <span>{{ calendarsList[item].title }}</span>\n </button>\n } }\n </mat-menu>\n</div>\n}\n\n<!-- DAY, WEEK, MONTH, YEAR -->\n@if (calendar === 'DATE' || calendar === 'WEEK' || calendar === 'MONTH' || calendar === 'YEAR') {\n<div\n class=\"calendar-title\"\n (click)=\"\n calendar === 'DATE' ? getDate() : calendar === 'WEEK' ? getWeek() : calendar === 'MONTH' ? getMonth() : getYear()\n \"\n>\n {{ periodTitle }}\n</div>\n\n<div class=\"calendar-buttons\">\n <button mat-icon-button type=\"button\" [disabled]=\"!previous.active\" (click)=\"setPrevious()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"!next.active\" (click)=\"setNext()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n @switch (calendar) {\n <!-- DATE -->\n @case ('DATE') {\n <button mat-icon-button type=\"button\" (click)=\"getDate()\">\n <mat-icon>today</mat-icon>\n </button>\n }\n\n <!-- WEEK -->\n @case ('WEEK') {\n <button mat-icon-button type=\"button\" (click)=\"getWeek()\">\n <mat-icon>date_range</mat-icon>\n </button>\n }\n\n <!-- MONTH -->\n @case ('MONTH') {\n <button mat-icon-button type=\"button\" (click)=\"getMonth()\">\n <mat-icon>calendar_month</mat-icon>\n </button>\n }\n\n <!-- YEAR -->\n @case ('YEAR') {\n <button mat-icon-button type=\"button\" (click)=\"getYear()\">\n <mat-icon>calendar_today</mat-icon>\n </button>\n } }\n</div>\n}\n\n<!-- PERIOD -->\n@if (calendar === 'PERIOD') {\n<div class=\"calendar-title\" (click)=\"getPeriodFrom()\">{{ periodTitle[0] }}</div>\n<div class=\"calendar-buttons square\">\n <button mat-icon-button type=\"button\" (click)=\"getPeriodFrom()\">\n <mat-icon>today</mat-icon>\n </button>\n</div>\n<div class=\"calendar-title\" (click)=\"getPeriodTo()\">{{ periodTitle[1] }}</div>\n<div class=\"calendar-buttons\">\n <button mat-icon-button type=\"button\" (click)=\"getPeriodTo()\">\n <mat-icon>today</mat-icon>\n </button>\n</div>\n}\n", styles: [":host{height:var(--ngx-calendar-m3-height);width:min(var(--ngx-calendar-m3-width),100%)}::ng-deep .ngx-calendar-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-calendar-menu button .title{font-size:90%!important}::ng-deep .ngx-calendar-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-calendar-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-calendar', imports: [MatIconButton, MatIcon, MatMenuModule], template: "<!-- CALENDAR -->\n@if (calendars.length > 1) {\n<div class=\"calendar-types\" [matMenuTriggerFor]=\"calendarMenu\">\n <span>{{ calendarTitle }}</span>\n <mat-icon>keyboard_arrow_down</mat-icon>\n\n <mat-menu #calendarMenu=\"matMenu\" class=\"ngx-calendar-menu\">\n @for (item of list; track $index) {\n <!-- CHECK CALENDAR -->\n @if (calendars.includes(item)) {\n <button mat-menu-item (click)=\"setCalendar(item)\" [disabled]=\"item === calendar\">\n <mat-icon [style.margin-right]=\"'0'\" [style.margin-left]=\"'0.5rem'\" [style.font-size]=\"'18px'\">\n {{ calendarsList[item].icon }}\n </mat-icon>\n <span>{{ calendarsList[item].title }}</span>\n </button>\n } }\n </mat-menu>\n</div>\n}\n\n<!-- DAY, WEEK, MONTH, YEAR -->\n@if (calendar === 'DATE' || calendar === 'WEEK' || calendar === 'MONTH' || calendar === 'YEAR') {\n<div\n class=\"calendar-title\"\n (click)=\"\n calendar === 'DATE' ? getDate() : calendar === 'WEEK' ? getWeek() : calendar === 'MONTH' ? getMonth() : getYear()\n \"\n>\n {{ periodTitle }}\n</div>\n\n<div class=\"calendar-buttons\">\n <button mat-icon-button type=\"button\" [disabled]=\"!previous.active\" (click)=\"setPrevious()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"!next.active\" (click)=\"setNext()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n @switch (calendar) {\n <!-- DATE -->\n @case ('DATE') {\n <button mat-icon-button type=\"button\" (click)=\"getDate()\">\n <mat-icon>today</mat-icon>\n </button>\n }\n\n <!-- WEEK -->\n @case ('WEEK') {\n <button mat-icon-button type=\"button\" (click)=\"getWeek()\">\n <mat-icon>date_range</mat-icon>\n </button>\n }\n\n <!-- MONTH -->\n @case ('MONTH') {\n <button mat-icon-button type=\"button\" (click)=\"getMonth()\">\n <mat-icon>calendar_month</mat-icon>\n </button>\n }\n\n <!-- YEAR -->\n @case ('YEAR') {\n <button mat-icon-button type=\"button\" (click)=\"getYear()\">\n <mat-icon>calendar_today</mat-icon>\n </button>\n } }\n</div>\n}\n\n<!-- PERIOD -->\n@if (calendar === 'PERIOD') {\n<div class=\"calendar-title\" (click)=\"getPeriodFrom()\">{{ periodTitle[0] }}</div>\n<div class=\"calendar-buttons square\">\n <button mat-icon-button type=\"button\" (click)=\"getPeriodFrom()\">\n <mat-icon>today</mat-icon>\n </button>\n</div>\n<div class=\"calendar-title\" (click)=\"getPeriodTo()\">{{ periodTitle[1] }}</div>\n<div class=\"calendar-buttons\">\n <button mat-icon-button type=\"button\" (click)=\"getPeriodTo()\">\n <mat-icon>today</mat-icon>\n </button>\n</div>\n}\n", styles: [":host{height:var(--ngx-calendar-m3-height);width:min(var(--ngx-calendar-m3-width),100%)}::ng-deep .ngx-calendar-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-calendar-menu button .title{font-size:90%!important}::ng-deep .ngx-calendar-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-calendar-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"] }]
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: NgxCalendarService }], propDecorators: { className: [{
type: HostBinding,
args: ['className']
}], cssWidth: [{
type: HostBinding,
args: ['style.--ngx-calendar-m3-width']
}], cssHeight: [{
type: HostBinding,
args: ['style.--ngx-calendar-m3-height']
}], calendars: [{
type: Input,
args: [{ required: true }]
}], minDate: [{
type: Input,
args: [{ required: false }]
}], maxDate: [{
type: Input,
args: [{ required: false }]
}], width: [{
type: Input,
args: [{ required: false }]
}], height: [{
type: Input,
args: [{ required: false }]
}], route: [{
type: Input,
args: [{ required: false }]
}], container: [{
type: Input,
args: [{ required: false }]
}], onChanged: [{
type: Output
}] } });
class NgxCalendarDayComponent {
activatedRoute;
router;
className = 'ngx-calendar-m3';
cssWidth = '';
cssHeight = '';
width;
height = '40px';
route = [];
onChanged = new EventEmitter();
day = '';
title = '';
view;
selected;
months = [
['فروردین', 'اردیبهشت', 'خرداد'],
['تیر', 'مرداد', 'شهریور'],
['مهر', 'آبان', 'آذر'],
['دی', 'بهمن', 'اسفند'],
];
days = [];
jalali = JalaliDateTime();
constructor(activatedRoute, router) {
this.activatedRoute = activatedRoute;
this.router = router;
}
ngOnInit() {
this.cssWidth = this.width || '100%';
this.cssHeight = this.height;
const isDay = (day) => {
if (!Helper.IS.string(day) || day.length !== 5)
return false;
if (!new RegExp('^[0-9]{2}-[0-9]{2}$').test(day))
return false;
const [m, d] = day.split('-').map((v) => +v);
if (m < 1 || m > 12)
return false;
if (d < 1 || d > 31)
return false;
if (m > 6 && d === 31)
return false;
return true;
};
const queryParams = { ...this.activatedRoute.snapshot.queryParams };
this.day =
this.route.length > 0 && isDay(queryParams['ngx-calendar-day'])
? queryParams['ngx-calendar-day']
: this.jalali.toString(new Date(), { format: 'M-D' });
this.updateView();
}
updateView() {
// Update Routes
if (this.route.length !== 0) {
const queryParams = { ...this.activatedRoute.snapshot.queryParams };
queryParams['ngx-calendar-day'] = this.day;
this.router.navigate(this.route, { queryParams });
}
const [month, day] = this.day.split('-').map((v) => +v);
this.title = Helper.STRING.changeNumbers(`${day} ${this.months.flat()[month - 1]}`);
this.onChanged.next({ day: this.day, title: this.title });
}
setPrevious() {
let [month, day] = this.day.split('-').map((v) => +v);
day--;
if (day < 1) {
month--;
if (month < 1)
month = 12;
day = month < 7 ? 31 : 30;
}
this.day = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
this.updateView();
}
setNext() {
let [month, day] = this.day.split('-').map((v) => +v);
day++;
if ((month < 7 && day > 31) || (month > 6 && day > 30)) {
month++;
if (month > 12)
month = 1;
day = 1;
}
this.day = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
this.updateView();
}
setMonth(month) {
if (this.view !== 'MONTH')
return;
if (month < 1 || month > 12)
return;
this.selected = { month, title: this.months.flat()[month - 1] };
this.days = [
[1, 2, 3, 4, 5, 6, 7],
[8, 9, 10, 11, 12, 13, 14],
[15, 16, 17, 18, 19, 20, 21],
[22, 23, 24, 25, 26, 27, 28],
[29, 30, this.selected.month < 7 ? 31 : null, null, null, null, null],
];
this.view = 'DAY';
}
setDay(day) {
if (this.view !== 'DAY' || !day || !this.selected)
return;
if (day < 1 || day > 31)
return;
if (this.selected.month > 6 && day > 30)
return;
this.day = `${this.selected.month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
this.updateView();
this.view = undefined;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarDayComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxCalendarDayComponent, isStandalone: true, selector: "ngx-calendar-day", inputs: { width: "width", height: "height", route: "route" }, outputs: { onChanged: "onChanged" }, host: { properties: { "className": "this.className", "style.--ngx-calendar-m3-width": "this.cssWidth", "style.--ngx-calendar-m3-height": "this.cssHeight" } }, ngImport: i0, template: "<div class=\"calendar-title\" (click)=\"view = 'MONTH'\">\n {{ title }}\n</div>\n\n<div class=\"calendar-buttons\">\n <button mat-icon-button type=\"button\" (click)=\"setPrevious()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button mat-icon-button type=\"button\" (click)=\"setNext()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\" (click)=\"view = 'MONTH'\">\n <mat-icon>calendar_month</mat-icon>\n </button>\n</div>\n\n@if (view) {\n<div class=\"calendar-background\" (click)=\"view = undefined\"></div>\n<div class=\"calendar-view\">\n @switch (view) {\n <!-- MONTH -->\n @case ('MONTH') {\n <!-- SEASON -->\n @for (season of months; track $index; let $sIndex = $index) {\n <div class=\"months\">\n @for (month of season; track $index; let $mIndex = $index) {\n <div class=\"month\" (click)=\"setMonth($sIndex * 3 + $mIndex + 1)\">{{ month }}</div>\n }\n </div>\n } }\n <!-- DAY -->\n @case ('DAY') {\n <div class=\"header\">{{ selected?.title }}</div>\n <!-- WEEK -->\n @for (week of days; track $index) {\n <div class=\"week\">\n @for (day of week; track $index) {\n <div class=\"day\" [class.empty]=\"!day\" (click)=\"setDay(day)\">{{ day }}</div>\n }\n </div>\n } } }\n</div>\n}\n", styles: [":host{position:relative;height:var(--ngx-calendar-m3-height);width:min(var(--ngx-calendar-m3-width),100%)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxCalendarDayComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-calendar-day', imports: [MatIcon, MatIconButton], template: "<div class=\"calendar-title\" (click)=\"view = 'MONTH'\">\n {{ title }}\n</div>\n\n<div class=\"calendar-buttons\">\n <button mat-icon-button type=\"button\" (click)=\"setPrevious()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button mat-icon-button type=\"button\" (click)=\"setNext()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\" (click)=\"view = 'MONTH'\">\n <mat-icon>calendar_month</mat-icon>\n </button>\n</div>\n\n@if (view) {\n<div class=\"calendar-background\" (click)=\"view = undefined\"></div>\n<div class=\"calendar-view\">\n @switch (view) {\n <!-- MONTH -->\n @case ('MONTH') {\n <!-- SEASON -->\n @for (season of months; track $index; let $sIndex = $index) {\n <div class=\"months\">\n @for (month of season; track $index; let $mIndex = $index) {\n <div class=\"month\" (click)=\"setMonth($sIndex * 3 + $mIndex + 1)\">{{ month }}</div>\n }\n </div>\n } }\n <!-- DAY -->\n @case ('DAY') {\n <div class=\"header\">{{ selected?.title }}</div>\n <!-- WEEK -->\n @for (week of days; track $index) {\n <div class=\"week\">\n @for (day of week; track $index) {\n <div class=\"day\" [class.empty]=\"!day\" (click)=\"setDay(day)\">{{ day }}</div>\n }\n </div>\n } } }\n</div>\n}\n", styles: [":host{position:relative;height:var(--ngx-calendar-m3-height);width:min(var(--ngx-calendar-m3-width),100%)}\n"] }]
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }], propDecorators: { className: [{
type: HostBinding,
args: ['className']
}], cssWidth: [{
type: HostBinding,
args: ['style.--ngx-calendar-m3-width']
}], cssHeight: [{
type: HostBinding,
args: ['style.--ngx-calendar-m3-height']
}], width: [{
type: Input,
args: [{ required: false }]
}], height: [{
type: Input,
args: [{ required: false }]
}], route: [{
type: Input,
args: [{ required: false }]
}], onChanged: [{
type: Output
}] } });
/*
* Public API Surface of ngx-calendar-m3
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxCalendarComponent, NgxCalendarDateComponent, NgxCalendarDayComponent, NgxCalendarMomentComponent, NgxCalendarMonthComponent, NgxCalendarService, NgxCalendarWeekComponent, NgxCalendarYearComponent };
//# sourceMappingURL=webilix-ngx-calendar-m3.mjs.map