@qeydar/datepicker
Version:
A comprehensive Date and Time Picker for Angular with Jalali calendar support
53 lines • 8.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { NgIf } from '@angular/common';
import * as i0 from "@angular/core";
export class CalendarFooterComponent {
constructor() {
this.footerDescription = '';
this.showTimePicker = false;
this.showToday = false;
this.okLabel = 'OK';
this.todayLabel = 'Today';
this.todayClick = new EventEmitter();
this.okClick = new EventEmitter();
}
}
CalendarFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CalendarFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarFooterComponent, isStandalone: true, selector: "qeydar-calendar-footer", inputs: { footerDescription: "footerDescription", showTimePicker: "showTimePicker", showToday: "showToday", okLabel: "okLabel", todayLabel: "todayLabel" }, outputs: { todayClick: "todayClick", okClick: "okClick" }, ngImport: i0, template: `
<div class="date-picker-footer" *ngIf="footerDescription || showTimePicker || showToday">
<div class="footer-description" *ngIf="footerDescription" [innerHtml]="footerDescription">
</div>
<div class="footer-actions">
<button *ngIf="showTimePicker" class="footer-button ok" (click)="okClick.emit()">{{ okLabel }}</button>
<button *ngIf="showToday" class="footer-button" (click)="todayClick.emit()">{{ todayLabel }}</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}.footer-description{font-size:13px;color:var(--dp-color-text)}.footer-actions{display:flex;gap:10px;justify-content:end;flex-direction:row-reverse}.footer-button{background:none;border:none;color:var(--dp-color-primary-button);cursor:pointer;font-size:14px;padding:2px 6px;transition:color .3s}.footer-button.ok{background:var(--dp-color-primary-button);border-radius:1px;color:var(--dp-color-primary-contrast)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarFooterComponent, decorators: [{
type: Component,
args: [{ selector: 'qeydar-calendar-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf], template: `
<div class="date-picker-footer" *ngIf="footerDescription || showTimePicker || showToday">
<div class="footer-description" *ngIf="footerDescription" [innerHtml]="footerDescription">
</div>
<div class="footer-actions">
<button *ngIf="showTimePicker" class="footer-button ok" (click)="okClick.emit()">{{ okLabel }}</button>
<button *ngIf="showToday" class="footer-button" (click)="todayClick.emit()">{{ todayLabel }}</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}.footer-description{font-size:13px;color:var(--dp-color-text)}.footer-actions{display:flex;gap:10px;justify-content:end;flex-direction:row-reverse}.footer-button{background:none;border:none;color:var(--dp-color-primary-button);cursor:pointer;font-size:14px;padding:2px 6px;transition:color .3s}.footer-button.ok{background:var(--dp-color-primary-button);border-radius:1px;color:var(--dp-color-primary-contrast)}\n"] }]
}], propDecorators: { footerDescription: [{
type: Input
}], showTimePicker: [{
type: Input
}], showToday: [{
type: Input
}], okLabel: [{
type: Input
}], todayLabel: [{
type: Input
}], todayClick: [{
type: Output
}], okClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsZW5kYXItZm9vdGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3FleWRhci1kYXRlcGlja2VyL3NyYy9kYXRlLXBpY2tlci1wb3B1cC9jb21wb25lbnRzL2NhbGVuZGFyLWZvb3Rlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBbUJ2QyxNQUFNLE9BQU8sdUJBQXVCO0lBakJwQztRQWtCVyxzQkFBaUIsR0FBRyxFQUFFLENBQUM7UUFDdkIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFDdkIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixZQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ2YsZUFBVSxHQUFHLE9BQU8sQ0FBQztRQUVwQixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUN0QyxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQUM5Qzs7b0hBVFksdUJBQXVCO3dHQUF2Qix1QkFBdUIseVNBWHhCOzs7Ozs7Ozs7R0FTVCxvdkNBWFMsSUFBSTsyRkFhSCx1QkFBdUI7a0JBakJuQyxTQUFTOytCQUNFLHdCQUF3QixjQUN0QixJQUFJLG1CQUNDLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQyxJQUFJLENBQUMsWUFFTDs7Ozs7Ozs7O0dBU1Q7OEJBR1EsaUJBQWlCO3NCQUF6QixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNO2dCQUNHLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3FleWRhci1jYWxlbmRhci1mb290ZXInLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbiAgaW1wb3J0czogW05nSWZdLFxyXG4gIHN0eWxlVXJsczogWycuL2NhbGVuZGFyLWZvb3Rlci5jb21wb25lbnQuc2NzcyddLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2IGNsYXNzPVwiZGF0ZS1waWNrZXItZm9vdGVyXCIgKm5nSWY9XCJmb290ZXJEZXNjcmlwdGlvbiB8fCBzaG93VGltZVBpY2tlciB8fCBzaG93VG9kYXlcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cImZvb3Rlci1kZXNjcmlwdGlvblwiICpuZ0lmPVwiZm9vdGVyRGVzY3JpcHRpb25cIiBbaW5uZXJIdG1sXT1cImZvb3RlckRlc2NyaXB0aW9uXCI+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICA8ZGl2IGNsYXNzPVwiZm9vdGVyLWFjdGlvbnNcIj5cclxuICAgICAgICA8YnV0dG9uICpuZ0lmPVwic2hvd1RpbWVQaWNrZXJcIiBjbGFzcz1cImZvb3Rlci1idXR0b24gb2tcIiAoY2xpY2spPVwib2tDbGljay5lbWl0KClcIj57eyBva0xhYmVsIH19PC9idXR0b24+XHJcbiAgICAgICAgPGJ1dHRvbiAqbmdJZj1cInNob3dUb2RheVwiIGNsYXNzPVwiZm9vdGVyLWJ1dHRvblwiIChjbGljayk9XCJ0b2RheUNsaWNrLmVtaXQoKVwiPnt7IHRvZGF5TGFiZWwgfX08L2J1dHRvbj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICBgXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDYWxlbmRhckZvb3RlckNvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgZm9vdGVyRGVzY3JpcHRpb24gPSAnJztcclxuICBASW5wdXQoKSBzaG93VGltZVBpY2tlciA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHNob3dUb2RheSA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIG9rTGFiZWwgPSAnT0snO1xyXG4gIEBJbnB1dCgpIHRvZGF5TGFiZWwgPSAnVG9kYXknO1xyXG5cclxuICBAT3V0cHV0KCkgdG9kYXlDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuICBAT3V0cHV0KCkgb2tDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxufVxyXG5cclxuXHJcbiJdfQ==