@qeydar/datepicker
Version:
A comprehensive Date and Time Picker for Angular with Jalali calendar support
108 lines • 14.4 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
export class DaysGridComponent {
constructor() {
this.viewMode = 'days';
this.days = [];
this.weekDays = [];
this.dayTemplate = null;
this.selectDay = new EventEmitter();
this.mouseEnter = new EventEmitter();
}
}
DaysGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DaysGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DaysGridComponent, isStandalone: true, selector: "qeydar-days-grid", inputs: { viewMode: "viewMode", days: "days", weekDays: "weekDays", currentDate: "currentDate", dayTemplate: "dayTemplate", isSameMonth: "isSameMonth", isSelected: "isSelected", isInRange: "isInRange", isRangeStart: "isRangeStart", isRangeEnd: "isRangeEnd", isToday: "isToday", isDateDisabled: "isDateDisabled", getDayNumber: "getDayNumber" }, outputs: { selectDay: "selectDay", mouseEnter: "mouseEnter" }, ngImport: i0, template: `
<div *ngIf="viewMode === 'days'">
<div *ngIf="viewMode === 'days'" class="weekdays">
<span *ngFor="let day of weekDays">{{ day }}</span>
</div>
<div *ngIf="viewMode === 'days'" class="days">
<button
*ngFor="let day of days"
tabindex="-1"
[class.different-month]="!isSameMonth(day, currentDate)"
[class.selected]="isSelected(day)"
[class.in-range]="isInRange(day)"
[class.range-start]="isRangeStart(day)"
[class.range-end]="isRangeEnd(day)"
[class.today]="isToday(day)"
[class.disabled]="isDateDisabled(day)"
[disabled]="isDateDisabled(day)"
(click)="selectDay.emit(day)"
(mouseenter)="mouseEnter.emit(day)"
>
<ng-container *ngIf="dayTemplate; else dayDefTemplate">
<ng-container *ngTemplateOutlet="$any(dayTemplate); context: { $implicit: day }"></ng-container>
</ng-container>
<ng-template #dayDefTemplate>
{{ getDayNumber(day) }}
</ng-template>
</button>
</div>
</div>
`, isInline: true, styles: [":root{--dp-color-bg: #fff;--dp-color-surface: #fff;--dp-color-text: #555;--dp-color-muted: #8a8a8a;--dp-color-border: #e5e5e5;--dp-color-primary: #bfeaff;--dp-color-primary-contrast: #fff;--dp-color-primary-text: #0175e0;--dp-color-primary-button: #1890ff;--dp-color-primary-week: #18396cb0;--dp-color-accent: #ff4081;--dp-color-danger: #d32f2f;--dp-color-success: #2e7d32;--dp-color-warning: #f9a825;--dp-color-hover: #e6f7ff;--dp-spacing-0: 0;--dp-spacing-1: 4px;--dp-spacing-2: 8px;--dp-spacing-3: 12px;--dp-spacing-4: 16px;--dp-spacing-5: 20px;--dp-spacing-6: 24px;--dp-spacing-7: 28px;--dp-spacing-8: 32px;--dp-radius-0: 0;--dp-radius-1: 4px;--dp-radius-2: 6px;--dp-radius-3: 8px;--dp-font-size-xs: 11px;--dp-font-size-sm: 12px;--dp-font-size-md: 14px;--dp-font-size-lg: 16px}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:5px;font-size:14px;color:var(--dp-color-primary-week)}.weekdays span{font-weight:700}.days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.days button{position:relative;aspect-ratio:1;border:none;background:none;cursor:pointer;border-radius:50%;font-size:14px;color:var(--dp-color-text);transition:background-color .3s,color .3s}.days button:hover{background-color:var(--dp-color-hover)}.days button.different-month{color:var(--dp-color-muted)}.days button.selected,.days button.range-end.in-range,.days button.range-start.in-range{background-color:var(--dp-color-primary-button);color:var(--dp-color-primary-contrast)}.days button.in-range{background-color:var(--dp-color-hover);color:var(--dp-color-text)}.days button.today{border:2px solid var(--dp-color-accent)}.days button.today span{position:absolute;bottom:-1rem;right:.6rem;padding:0;margin:0;font-size:36px;color:var(--dp-color-accent)}.days button.disabled{color:var(--dp-color-muted);background:var(--dp-color-bg);opacity:1}.days button.disabled:after{content:\"\";background:rgba(252,103,143,.6666666667);position:absolute;right:20%;top:45%;width:20px;height:1px;transform:rotate(145deg)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysGridComponent, decorators: [{
type: Component,
args: [{ selector: 'qeydar-days-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgFor, NgTemplateOutlet], template: `
<div *ngIf="viewMode === 'days'">
<div *ngIf="viewMode === 'days'" class="weekdays">
<span *ngFor="let day of weekDays">{{ day }}</span>
</div>
<div *ngIf="viewMode === 'days'" class="days">
<button
*ngFor="let day of days"
tabindex="-1"
[class.different-month]="!isSameMonth(day, currentDate)"
[class.selected]="isSelected(day)"
[class.in-range]="isInRange(day)"
[class.range-start]="isRangeStart(day)"
[class.range-end]="isRangeEnd(day)"
[class.today]="isToday(day)"
[class.disabled]="isDateDisabled(day)"
[disabled]="isDateDisabled(day)"
(click)="selectDay.emit(day)"
(mouseenter)="mouseEnter.emit(day)"
>
<ng-container *ngIf="dayTemplate; else dayDefTemplate">
<ng-container *ngTemplateOutlet="$any(dayTemplate); context: { $implicit: day }"></ng-container>
</ng-container>
<ng-template #dayDefTemplate>
{{ getDayNumber(day) }}
</ng-template>
</button>
</div>
</div>
`, styles: [":root{--dp-color-bg: #fff;--dp-color-surface: #fff;--dp-color-text: #555;--dp-color-muted: #8a8a8a;--dp-color-border: #e5e5e5;--dp-color-primary: #bfeaff;--dp-color-primary-contrast: #fff;--dp-color-primary-text: #0175e0;--dp-color-primary-button: #1890ff;--dp-color-primary-week: #18396cb0;--dp-color-accent: #ff4081;--dp-color-danger: #d32f2f;--dp-color-success: #2e7d32;--dp-color-warning: #f9a825;--dp-color-hover: #e6f7ff;--dp-spacing-0: 0;--dp-spacing-1: 4px;--dp-spacing-2: 8px;--dp-spacing-3: 12px;--dp-spacing-4: 16px;--dp-spacing-5: 20px;--dp-spacing-6: 24px;--dp-spacing-7: 28px;--dp-spacing-8: 32px;--dp-radius-0: 0;--dp-radius-1: 4px;--dp-radius-2: 6px;--dp-radius-3: 8px;--dp-font-size-xs: 11px;--dp-font-size-sm: 12px;--dp-font-size-md: 14px;--dp-font-size-lg: 16px}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:5px;font-size:14px;color:var(--dp-color-primary-week)}.weekdays span{font-weight:700}.days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.days button{position:relative;aspect-ratio:1;border:none;background:none;cursor:pointer;border-radius:50%;font-size:14px;color:var(--dp-color-text);transition:background-color .3s,color .3s}.days button:hover{background-color:var(--dp-color-hover)}.days button.different-month{color:var(--dp-color-muted)}.days button.selected,.days button.range-end.in-range,.days button.range-start.in-range{background-color:var(--dp-color-primary-button);color:var(--dp-color-primary-contrast)}.days button.in-range{background-color:var(--dp-color-hover);color:var(--dp-color-text)}.days button.today{border:2px solid var(--dp-color-accent)}.days button.today span{position:absolute;bottom:-1rem;right:.6rem;padding:0;margin:0;font-size:36px;color:var(--dp-color-accent)}.days button.disabled{color:var(--dp-color-muted);background:var(--dp-color-bg);opacity:1}.days button.disabled:after{content:\"\";background:rgba(252,103,143,.6666666667);position:absolute;right:20%;top:45%;width:20px;height:1px;transform:rotate(145deg)}\n"] }]
}], propDecorators: { viewMode: [{
type: Input
}], days: [{
type: Input
}], weekDays: [{
type: Input
}], currentDate: [{
type: Input
}], dayTemplate: [{
type: Input
}], isSameMonth: [{
type: Input
}], isSelected: [{
type: Input
}], isInRange: [{
type: Input
}], isRangeStart: [{
type: Input
}], isRangeEnd: [{
type: Input
}], isToday: [{
type: Input
}], isDateDisabled: [{
type: Input
}], getDayNumber: [{
type: Input
}], selectDay: [{
type: Output
}], mouseEnter: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF5cy1ncmlkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3FleWRhci1kYXRlcGlja2VyL3NyYy9kYXRlLXBpY2tlci1wb3B1cC9jb21wb25lbnRzL2RheXMtZ3JpZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBZSxNQUFNLGVBQWUsQ0FBQztBQUM3RyxPQUFPLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQXNDaEUsTUFBTSxPQUFPLGlCQUFpQjtJQXJDOUI7UUFzQ1csYUFBUSxHQUFnQyxNQUFNLENBQUM7UUFDL0MsU0FBSSxHQUFXLEVBQUUsQ0FBQztRQUNsQixhQUFRLEdBQWEsRUFBRSxDQUFDO1FBRXhCLGdCQUFXLEdBQTRCLElBQUksQ0FBQztRQVczQyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUNyQyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQUNqRDs7OEdBbEJZLGlCQUFpQjtrR0FBakIsaUJBQWlCLG1lQS9CbEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkJULDZqRUEvQlMsSUFBSSw2RkFBRSxLQUFLLG1IQUFFLGdCQUFnQjsyRkFpQzVCLGlCQUFpQjtrQkFyQzdCLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLENBQUMsWUFFOUI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkJUOzhCQUdRLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUVJLFNBQVM7c0JBQWxCLE1BQU07Z0JBQ0csVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmdGb3IsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3FleWRhci1kYXlzLWdyaWQnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbiAgaW1wb3J0czogW05nSWYsIE5nRm9yLCBOZ1RlbXBsYXRlT3V0bGV0XSxcclxuICBzdHlsZVVybHM6IFsnLi9kYXlzLWdyaWQuY29tcG9uZW50LnNjc3MnXSxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGRpdiAqbmdJZj1cInZpZXdNb2RlID09PSAnZGF5cydcIj5cclxuICAgICAgPGRpdiAqbmdJZj1cInZpZXdNb2RlID09PSAnZGF5cydcIiBjbGFzcz1cIndlZWtkYXlzXCI+XHJcbiAgICAgICAgPHNwYW4gKm5nRm9yPVwibGV0IGRheSBvZiB3ZWVrRGF5c1wiPnt7IGRheSB9fTwvc3Bhbj5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxkaXYgKm5nSWY9XCJ2aWV3TW9kZSA9PT0gJ2RheXMnXCIgY2xhc3M9XCJkYXlzXCI+XHJcbiAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgKm5nRm9yPVwibGV0IGRheSBvZiBkYXlzXCJcclxuICAgICAgICAgIHRhYmluZGV4PVwiLTFcIlxyXG4gICAgICAgICAgW2NsYXNzLmRpZmZlcmVudC1tb250aF09XCIhaXNTYW1lTW9udGgoZGF5LCBjdXJyZW50RGF0ZSlcIlxyXG4gICAgICAgICAgW2NsYXNzLnNlbGVjdGVkXT1cImlzU2VsZWN0ZWQoZGF5KVwiXHJcbiAgICAgICAgICBbY2xhc3MuaW4tcmFuZ2VdPVwiaXNJblJhbmdlKGRheSlcIlxyXG4gICAgICAgICAgW2NsYXNzLnJhbmdlLXN0YXJ0XT1cImlzUmFuZ2VTdGFydChkYXkpXCJcclxuICAgICAgICAgIFtjbGFzcy5yYW5nZS1lbmRdPVwiaXNSYW5nZUVuZChkYXkpXCJcclxuICAgICAgICAgIFtjbGFzcy50b2RheV09XCJpc1RvZGF5KGRheSlcIlxyXG4gICAgICAgICAgW2NsYXNzLmRpc2FibGVkXT1cImlzRGF0ZURpc2FibGVkKGRheSlcIlxyXG4gICAgICAgICAgW2Rpc2FibGVkXT1cImlzRGF0ZURpc2FibGVkKGRheSlcIlxyXG4gICAgICAgICAgKGNsaWNrKT1cInNlbGVjdERheS5lbWl0KGRheSlcIlxyXG4gICAgICAgICAgKG1vdXNlZW50ZXIpPVwibW91c2VFbnRlci5lbWl0KGRheSlcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJkYXlUZW1wbGF0ZTsgZWxzZSBkYXlEZWZUZW1wbGF0ZVwiPlxyXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiJGFueShkYXlUZW1wbGF0ZSk7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBkYXkgfVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICA8bmctdGVtcGxhdGUgI2RheURlZlRlbXBsYXRlPlxyXG4gICAgICAgICAgICB7eyBnZXREYXlOdW1iZXIoZGF5KSB9fVxyXG4gICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICBgXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEYXlzR3JpZENvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgdmlld01vZGU6ICdkYXlzJyB8ICdtb250aHMnIHwgJ3llYXJzJyA9ICdkYXlzJztcclxuICBASW5wdXQoKSBkYXlzOiBEYXRlW10gPSBbXTtcclxuICBASW5wdXQoKSB3ZWVrRGF5czogc3RyaW5nW10gPSBbXTtcclxuICBASW5wdXQoKSBjdXJyZW50RGF0ZTogRGF0ZTtcclxuICBASW5wdXQoKSBkYXlUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IG51bGwgPSBudWxsO1xyXG5cclxuICBASW5wdXQoKSBpc1NhbWVNb250aDogKGQxOiBEYXRlLCBkMjogRGF0ZSkgPT4gYm9vbGVhbjtcclxuICBASW5wdXQoKSBpc1NlbGVjdGVkOiAoZDogRGF0ZSkgPT4gYm9vbGVhbjtcclxuICBASW5wdXQoKSBpc0luUmFuZ2U6IChkOiBEYXRlKSA9PiBib29sZWFuO1xyXG4gIEBJbnB1dCgpIGlzUmFuZ2VTdGFydDogKGQ6IERhdGUpID0+IGJvb2xlYW47XHJcbiAgQElucHV0KCkgaXNSYW5nZUVuZDogKGQ6IERhdGUpID0+IGJvb2xlYW47XHJcbiAgQElucHV0KCkgaXNUb2RheTogKGQ6IERhdGUpID0+IGJvb2xlYW47XHJcbiAgQElucHV0KCkgaXNEYXRlRGlzYWJsZWQ6IChkOiBEYXRlKSA9PiBib29sZWFuO1xyXG4gIEBJbnB1dCgpIGdldERheU51bWJlcjogKGQ6IERhdGUpID0+IG51bWJlcjtcclxuXHJcbiAgQE91dHB1dCgpIHNlbGVjdERheSA9IG5ldyBFdmVudEVtaXR0ZXI8RGF0ZT4oKTtcclxuICBAT3V0cHV0KCkgbW91c2VFbnRlciA9IG5ldyBFdmVudEVtaXR0ZXI8RGF0ZT4oKTtcclxufVxyXG5cclxuXHJcbiJdfQ==