@qeydar/datepicker
Version:
A comprehensive Date and Time Picker for Angular with Jalali calendar support
67 lines • 9.07 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 YearsGridComponent {
constructor() {
this.viewMode = 'days';
this.mode = 'day';
this.yearList = [];
this.yearTemplate = null;
this.selectYear = new EventEmitter();
}
}
YearsGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: YearsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
YearsGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: YearsGridComponent, isStandalone: true, selector: "qeydar-years-grid", inputs: { viewMode: "viewMode", mode: "mode", yearList: "yearList", yearTemplate: "yearTemplate", isActiveYear: "isActiveYear", isYearDisabled: "isYearDisabled" }, outputs: { selectYear: "selectYear" }, ngImport: i0, template: `
<div *ngIf="viewMode === 'years' || mode == 'year'" class="years">
<button
*ngFor="let year of yearList"
tabindex="-1"
[class.selected]="isActiveYear(year)"
[disabled]="isYearDisabled(year)"
(click)="selectYear.emit(year)"
>
<ng-container *ngIf="yearTemplate; else yearDefTemplate">
<ng-container *ngTemplateOutlet="$any(yearTemplate); context: { $implicit: year }"></ng-container>
</ng-container>
<ng-template #yearDefTemplate>
{{ year }}
</ng-template>
</button>
</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}.years{display:grid;grid-template-columns:repeat(3,1fr)}.years button{padding:10px;border:none;background:none;cursor:pointer;font-size:14px;position:relative}.years button.selected{background-color:var(--dp-color-primary);color:var(--dp-color-primary-text)}.years{gap:.5rem .3rem!important}\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: YearsGridComponent, decorators: [{
type: Component,
args: [{ selector: 'qeydar-years-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgFor, NgTemplateOutlet], template: `
<div *ngIf="viewMode === 'years' || mode == 'year'" class="years">
<button
*ngFor="let year of yearList"
tabindex="-1"
[class.selected]="isActiveYear(year)"
[disabled]="isYearDisabled(year)"
(click)="selectYear.emit(year)"
>
<ng-container *ngIf="yearTemplate; else yearDefTemplate">
<ng-container *ngTemplateOutlet="$any(yearTemplate); context: { $implicit: year }"></ng-container>
</ng-container>
<ng-template #yearDefTemplate>
{{ year }}
</ng-template>
</button>
</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}.years{display:grid;grid-template-columns:repeat(3,1fr)}.years button{padding:10px;border:none;background:none;cursor:pointer;font-size:14px;position:relative}.years button.selected{background-color:var(--dp-color-primary);color:var(--dp-color-primary-text)}.years{gap:.5rem .3rem!important}\n"] }]
}], propDecorators: { viewMode: [{
type: Input
}], mode: [{
type: Input
}], yearList: [{
type: Input
}], yearTemplate: [{
type: Input
}], isActiveYear: [{
type: Input
}], isYearDisabled: [{
type: Input
}], selectYear: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoieWVhcnMtZ3JpZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9xZXlkYXItZGF0ZXBpY2tlci9zcmMvZGF0ZS1waWNrZXItcG9wdXAvY29tcG9uZW50cy95ZWFycy1ncmlkLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBMkJoRSxNQUFNLE9BQU8sa0JBQWtCO0lBekIvQjtRQTBCVyxhQUFRLEdBQWdDLE1BQU0sQ0FBQztRQUMvQyxTQUFJLEdBQTZCLEtBQUssQ0FBQztRQUN2QyxhQUFRLEdBQWEsRUFBRSxDQUFDO1FBQ3hCLGlCQUFZLEdBQTRCLElBQUksQ0FBQztRQUs1QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQUNuRDs7K0dBVlksa0JBQWtCO21HQUFsQixrQkFBa0Isd1JBbkJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQlQsNG5DQW5CUyxJQUFJLDZGQUFFLEtBQUssbUhBQUUsZ0JBQWdCOzJGQXFCNUIsa0JBQWtCO2tCQXpCOUIsU0FBUzsrQkFDRSxtQkFBbUIsY0FDakIsSUFBSSxtQkFDQyx1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxnQkFBZ0IsQ0FBQyxZQUU5Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQlQ7OEJBR1EsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOZ0ZvciwgTmdJZiwgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3FleWRhci15ZWFycy1ncmlkJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG4gIGltcG9ydHM6IFtOZ0lmLCBOZ0ZvciwgTmdUZW1wbGF0ZU91dGxldF0sXHJcbiAgc3R5bGVVcmxzOiBbJy4veWVhcnMtZ3JpZC5jb21wb25lbnQuc2NzcyddLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2ICpuZ0lmPVwidmlld01vZGUgPT09ICd5ZWFycycgfHwgbW9kZSA9PSAneWVhcidcIiBjbGFzcz1cInllYXJzXCI+XHJcbiAgICAgIDxidXR0b25cclxuICAgICAgICAqbmdGb3I9XCJsZXQgeWVhciBvZiB5ZWFyTGlzdFwiXHJcbiAgICAgICAgdGFiaW5kZXg9XCItMVwiXHJcbiAgICAgICAgW2NsYXNzLnNlbGVjdGVkXT1cImlzQWN0aXZlWWVhcih5ZWFyKVwiXHJcbiAgICAgICAgW2Rpc2FibGVkXT1cImlzWWVhckRpc2FibGVkKHllYXIpXCJcclxuICAgICAgICAoY2xpY2spPVwic2VsZWN0WWVhci5lbWl0KHllYXIpXCJcclxuICAgICAgPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ5ZWFyVGVtcGxhdGU7IGVsc2UgeWVhckRlZlRlbXBsYXRlXCI+XHJcbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiJGFueSh5ZWFyVGVtcGxhdGUpOyBjb250ZXh0OiB7ICRpbXBsaWNpdDogeWVhciB9XCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPG5nLXRlbXBsYXRlICN5ZWFyRGVmVGVtcGxhdGU+XHJcbiAgICAgICAgICB7eyB5ZWFyIH19XHJcbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICBgXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBZZWFyc0dyaWRDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIHZpZXdNb2RlOiAnZGF5cycgfCAnbW9udGhzJyB8ICd5ZWFycycgPSAnZGF5cyc7XHJcbiAgQElucHV0KCkgbW9kZTogJ2RheScgfCAnbW9udGgnIHwgJ3llYXInID0gJ2RheSc7XHJcbiAgQElucHV0KCkgeWVhckxpc3Q6IG51bWJlcltdID0gW107XHJcbiAgQElucHV0KCkgeWVhclRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+IHwgbnVsbCA9IG51bGw7XHJcblxyXG4gIEBJbnB1dCgpIGlzQWN0aXZlWWVhcjogKHllYXI6IG51bWJlcikgPT4gYm9vbGVhbjtcclxuICBASW5wdXQoKSBpc1llYXJEaXNhYmxlZDogKHllYXI6IG51bWJlcikgPT4gYm9vbGVhbjtcclxuXHJcbiAgQE91dHB1dCgpIHNlbGVjdFllYXIgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcclxufVxyXG5cclxuXHJcbiJdfQ==