@qeydar/datepicker
Version:
A comprehensive Date and Time Picker for Angular with Jalali calendar support
66 lines • 9.17 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 MonthsGridComponent {
constructor() {
this.viewMode = 'days';
this.monthListNum = [];
this.monthTemplate = null;
this.selectMonth = new EventEmitter();
}
}
MonthsGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MonthsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MonthsGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MonthsGridComponent, isStandalone: true, selector: "qeydar-months-grid", inputs: { viewMode: "viewMode", monthListNum: "monthListNum", monthTemplate: "monthTemplate", isActiveMonthNumber: "isActiveMonthNumber", isMonthDisabled: "isMonthDisabled", getMonthName: "getMonthName" }, outputs: { selectMonth: "selectMonth" }, ngImport: i0, template: `
<div *ngIf="viewMode === 'months'" class="months">
<button
*ngFor="let month of monthListNum"
tabindex="-1"
[class.selected]="isActiveMonthNumber(month)"
[disabled]="isMonthDisabled(month)"
(click)="selectMonth.emit(month)"
>
<ng-container *ngIf="monthTemplate; else monthDefTemplate">
<ng-container *ngTemplateOutlet="$any(monthTemplate); context: { $implicit: month }"></ng-container>
</ng-container>
<ng-template #monthDefTemplate>
{{ getMonthName(month) }}
</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}.months{display:grid;grid-template-columns:repeat(3,1fr)}.months button{padding:10px;border:none;background:none;cursor:pointer;font-size:14px;position:relative}.months button.selected{background-color:var(--dp-color-primary);color:var(--dp-color-primary-text)}.months{gap:1rem .3rem}\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: MonthsGridComponent, decorators: [{
type: Component,
args: [{ selector: 'qeydar-months-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgFor, NgTemplateOutlet], template: `
<div *ngIf="viewMode === 'months'" class="months">
<button
*ngFor="let month of monthListNum"
tabindex="-1"
[class.selected]="isActiveMonthNumber(month)"
[disabled]="isMonthDisabled(month)"
(click)="selectMonth.emit(month)"
>
<ng-container *ngIf="monthTemplate; else monthDefTemplate">
<ng-container *ngTemplateOutlet="$any(monthTemplate); context: { $implicit: month }"></ng-container>
</ng-container>
<ng-template #monthDefTemplate>
{{ getMonthName(month) }}
</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}.months{display:grid;grid-template-columns:repeat(3,1fr)}.months button{padding:10px;border:none;background:none;cursor:pointer;font-size:14px;position:relative}.months button.selected{background-color:var(--dp-color-primary);color:var(--dp-color-primary-text)}.months{gap:1rem .3rem}\n"] }]
}], propDecorators: { viewMode: [{
type: Input
}], monthListNum: [{
type: Input
}], monthTemplate: [{
type: Input
}], isActiveMonthNumber: [{
type: Input
}], isMonthDisabled: [{
type: Input
}], getMonthName: [{
type: Input
}], selectMonth: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9udGhzLWdyaWQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcWV5ZGFyLWRhdGVwaWNrZXIvc3JjL2RhdGUtcGlja2VyLXBvcHVwL2NvbXBvbmVudHMvbW9udGhzLWdyaWQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWUsTUFBTSxlQUFlLENBQUM7QUFDN0csT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUEyQmhFLE1BQU0sT0FBTyxtQkFBbUI7SUF6QmhDO1FBMEJXLGFBQVEsR0FBZ0MsTUFBTSxDQUFDO1FBQy9DLGlCQUFZLEdBQWEsRUFBRSxDQUFDO1FBQzVCLGtCQUFhLEdBQTRCLElBQUksQ0FBQztRQU03QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FDcEQ7O2dIQVZZLG1CQUFtQjtvR0FBbkIsbUJBQW1CLHFVQW5CcEI7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJULHFuQ0FuQlMsSUFBSSw2RkFBRSxLQUFLLG1IQUFFLGdCQUFnQjsyRkFxQjVCLG1CQUFtQjtrQkF6Qi9CLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLENBQUMsWUFFOUI7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJUOzhCQUdRLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUVHLG1CQUFtQjtzQkFBM0IsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmdGb3IsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdxZXlkYXItbW9udGhzLWdyaWQnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbiAgaW1wb3J0czogW05nSWYsIE5nRm9yLCBOZ1RlbXBsYXRlT3V0bGV0XSxcclxuICBzdHlsZVVybHM6IFsnLi9tb250aHMtZ3JpZC5jb21wb25lbnQuc2NzcyddLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2ICpuZ0lmPVwidmlld01vZGUgPT09ICdtb250aHMnXCIgY2xhc3M9XCJtb250aHNcIj5cclxuICAgICAgPGJ1dHRvblxyXG4gICAgICAgICpuZ0Zvcj1cImxldCBtb250aCBvZiBtb250aExpc3ROdW1cIlxyXG4gICAgICAgIHRhYmluZGV4PVwiLTFcIlxyXG4gICAgICAgIFtjbGFzcy5zZWxlY3RlZF09XCJpc0FjdGl2ZU1vbnRoTnVtYmVyKG1vbnRoKVwiXHJcbiAgICAgICAgW2Rpc2FibGVkXT1cImlzTW9udGhEaXNhYmxlZChtb250aClcIlxyXG4gICAgICAgIChjbGljayk9XCJzZWxlY3RNb250aC5lbWl0KG1vbnRoKVwiXHJcbiAgICAgID5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibW9udGhUZW1wbGF0ZTsgZWxzZSBtb250aERlZlRlbXBsYXRlXCI+XHJcbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiJGFueShtb250aFRlbXBsYXRlKTsgY29udGV4dDogeyAkaW1wbGljaXQ6IG1vbnRoIH1cIj48L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8bmctdGVtcGxhdGUgI21vbnRoRGVmVGVtcGxhdGU+XHJcbiAgICAgICAgICB7eyBnZXRNb250aE5hbWUobW9udGgpIH19XHJcbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICBgXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNb250aHNHcmlkQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSB2aWV3TW9kZTogJ2RheXMnIHwgJ21vbnRocycgfCAneWVhcnMnID0gJ2RheXMnO1xyXG4gIEBJbnB1dCgpIG1vbnRoTGlzdE51bTogbnVtYmVyW10gPSBbXTtcclxuICBASW5wdXQoKSBtb250aFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+IHwgbnVsbCA9IG51bGw7XHJcblxyXG4gIEBJbnB1dCgpIGlzQWN0aXZlTW9udGhOdW1iZXI6IChtb250aDogbnVtYmVyKSA9PiBib29sZWFuO1xyXG4gIEBJbnB1dCgpIGlzTW9udGhEaXNhYmxlZDogKG1vbnRoOiBudW1iZXIpID0+IGJvb2xlYW47XHJcbiAgQElucHV0KCkgZ2V0TW9udGhOYW1lOiAobW9udGg6IG51bWJlcikgPT4gc3RyaW5nO1xyXG5cclxuICBAT3V0cHV0KCkgc2VsZWN0TW9udGggPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcclxufVxyXG5cclxuXHJcbiJdfQ==