d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    ChangeDetectionStrategy,
    Component,
    EventEmitter,
    HostBinding,
    Input,
    OnChanges,
    Output,
    SimpleChanges,
    TemplateRef
} from '@angular/core';

import { coerceBooleanProperty, FunctionProp, TinyDate } from 'ngx-tethys/util';
import { DateHelperService } from '../../date-helper.service';
import { RangePartType } from '../../inner-types';
import { isAfterMoreThanLessOneYear, isAfterMoreThanOneDecade, isAfterMoreThanOneMonth, isAfterMoreThanOneYear } from '../../picker.util';
import { DisabledDateFn, ThyPanelMode } from '../../standard-types';
import { DateHeaderComponent } from '../date/date-header.component';
import { DateTableComponent } from '../date/date-table.component';

import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
import { ThyInputDirective } from 'ngx-tethys/input';
import { DecadeHeaderComponent } from '../decade/decade-header.component';
import { DecadeTableComponent } from '../decade/decade-table.component';
import { MonthHeaderComponent } from '../month/month-header.component';
import { MonthTableComponent } from '../month/month-table.component';
import { YearHeaderComponent } from '../year/year-header.component';
import { YearTableComponent } from '../year/year-table.component';

/**
 * @private
 */
@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'inner-popup',
    exportAs: 'innerPopup',
    templateUrl: 'inner-popup.component.html',
    standalone: true,
    imports: [
        NgIf,
        ThyInputDirective,
        NgSwitch,
        NgSwitchCase,
        DecadeHeaderComponent,
        DecadeTableComponent,
        YearHeaderComponent,
        YearTableComponent,
        MonthHeaderComponent,
        MonthTableComponent,
        NgSwitchDefault,
        DateHeaderComponent,
        DateTableComponent
    ]
})
export class InnerPopupComponent implements OnChanges {
    @HostBinding('class.thy-calendar-picker-inner-popup') className = true;
    @HostBinding('class.thy-calendar-picker-inner-popup-with-range-input') _showDateRangeInput = false;

    @Input() showWeek: boolean;
    @Input() isRange: boolean;
    @Input() activeDate: TinyDate;
    @Input() rangeActiveDate: TinyDate[]; // Range ONLY
    @Input() enablePrev: boolean;
    @Input() enableNext: boolean;
    @Input() disabledDate: DisabledDateFn;
    @Input() dateRender: FunctionProp<TemplateRef<Date> | string>;
    @Input() selectedValue: TinyDate[]; // Range ONLY
    @Input() hoverValue: TinyDate[]; // Range ONLY

    @Input() panelMode: ThyPanelMode;

    @Input() set showDateRangeInput(value: boolean) {
        this._showDateRangeInput = coerceBooleanProperty(value);
    }

    get showDateRangeInput() {
        return this._showDateRangeInput;
    }

    @Input() partType: RangePartType;

    @Input() endPanelMode: ThyPanelMode;

    @Output() readonly panelModeChange = new EventEmitter<ThyPanelMode>();

    @Input() value: TinyDate;

    @Output() readonly headerChange = new EventEmitter<TinyDate>();
    @Output() readonly selectDate = new EventEmitter<TinyDate>();
    @Output() readonly dayHover = new EventEmitter<TinyDate>();

    prefixCls = 'thy-calendar';

    constructor(private dateHelper: DateHelperService) {}

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.activeDate && !changes.activeDate.currentValue) {
            this.activeDate = new TinyDate();
        }
        if (changes.panelMode && changes.panelMode.currentValue === 'time') {
            this.panelMode = 'date';
        }
    }

    getReadableValue(value: TinyDate) {
        return value ? this.dateHelper.format(value.nativeDate, 'yyyy-MM-dd') : '';
    }

    onSelectDate(date: TinyDate | Date): void {
        const value = date instanceof TinyDate ? date : new TinyDate(date);

        this.selectDate.emit(value);
    }

    onChooseMonth(value: TinyDate): void {
        this.activeDate = this.activeDate.setMonth(value.getMonth());
        if (this.endPanelMode === 'month') {
            this.value = value;
            this.selectDate.emit(value);
        } else {
            this.headerChange.emit(value);
            this.panelModeChange.emit(this.endPanelMode);
        }
    }
    onChooseYear(value: TinyDate): void {
        this.activeDate = this.activeDate.setYear(value.getYear());
        if (this.endPanelMode === 'year') {
            this.value = value;
            this.selectDate.emit(value);
        } else {
            this.headerChange.emit(value);
            this.panelModeChange.emit(this.endPanelMode);
        }
    }

    onChooseDecade(value: TinyDate): void {
        this.activeDate = this.activeDate.setYear(value.getYear());
        if (this.endPanelMode === 'decade') {
            this.value = value;
            this.selectDate.emit(value);
        } else {
            this.headerChange.emit(value);
            this.panelModeChange.emit('year');
        }
    }

    enablePrevNext(direction: 'prev' | 'next', mode: ThyPanelMode): boolean {
        if (this.isRange) {
            if ((this.partType === 'left' && direction === 'next') || (this.partType === 'right' && direction === 'prev')) {
                const [headerLeftDate, headerRightDate] = this.rangeActiveDate;
                return isAfterMoreThanOneMonth(headerRightDate, headerLeftDate);
            } else {
                return true;
            }
        } else {
            return true;
        }
    }

    enableSuperPrevNext(direction: 'prev' | 'next', panelMode: ThyPanelMode) {
        if (this.isRange) {
            if ((this.partType === 'left' && direction === 'next') || (this.partType === 'right' && direction === 'prev')) {
                const [headerLeftDate, headerRightDate] = this.rangeActiveDate;
                if (panelMode === 'date') {
                    return isAfterMoreThanLessOneYear(headerRightDate, headerLeftDate);
                } else if (panelMode === 'month') {
                    return isAfterMoreThanOneYear(headerRightDate, headerLeftDate);
                } else if (panelMode === 'year') {
                    return isAfterMoreThanOneDecade(headerRightDate, headerLeftDate);
                }
            } else {
                return true;
            }
        } else {
            return true;
        }
    }
}

1	import {
2	ChangeDetectionStrategy,
3	Component,
4	EventEmitter,
5	HostBinding,
6	Input,
7	OnChanges,
8	Output,
9	SimpleChanges,
10	TemplateRef
11	} from '@angular/core';
12
13	import { coerceBooleanProperty, FunctionProp, TinyDate } from 'ngx-tethys/util';
14	import { DateHelperService } from '../../date-helper.service';
15	import { RangePartType } from '../../inner-types';
16	import { isAfterMoreThanLessOneYear, isAfterMoreThanOneDecade, isAfterMoreThanOneMonth, isAfterMoreThanOneYear } from '../../picker.util';
17	import { DisabledDateFn, ThyPanelMode } from '../../standard-types';
18	import { DateHeaderComponent } from '../date/date-header.component';
19	import { DateTableComponent } from '../date/date-table.component';
20		1✔
21	import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
22	import { ThyInputDirective } from 'ngx-tethys/input';	×
23	import { DecadeHeaderComponent } from '../decade/decade-header.component';
24	import { DecadeTableComponent } from '../decade/decade-table.component';
25	import { MonthHeaderComponent } from '../month/month-header.component';	×
26	import { MonthTableComponent } from '../month/month-table.component';
27	import { YearHeaderComponent } from '../year/year-header.component';
28	import { YearTableComponent } from '../year/year-table.component';	×
29		×
30	/**	×
31	* @private	×
32	*/	×
33	@Component({	×
34	changeDetection: ChangeDetectionStrategy.OnPush,	×
35	// eslint-disable-next-line @angular-eslint/component-selector	×
36	selector: 'inner-popup',
37	exportAs: 'innerPopup',
38	templateUrl: 'inner-popup.component.html',	×
39	standalone: true,	×
40	imports: [
41	NgIf,	×
42	ThyInputDirective,	×
43	NgSwitch,
44	NgSwitchCase,
45	DecadeHeaderComponent,
46	DecadeTableComponent,	×
47	YearHeaderComponent,
48	YearTableComponent,
49	MonthHeaderComponent,	×
50	MonthTableComponent,	×
51	NgSwitchDefault,
52	DateHeaderComponent,
53	DateTableComponent	×
54	]	×
55	})	×
56	export class InnerPopupComponent implements OnChanges {	×
57	@HostBinding('class.thy-calendar-picker-inner-popup') className = true;
58	@HostBinding('class.thy-calendar-picker-inner-popup-with-range-input') _showDateRangeInput = false;
59		×
60	@Input() showWeek: boolean;	×
61	@Input() isRange: boolean;
62	@Input() activeDate: TinyDate;
63	@Input() rangeActiveDate: TinyDate[]; // Range ONLY
64	@Input() enablePrev: boolean;	×
65	@Input() enableNext: boolean;	×
66	@Input() disabledDate: DisabledDateFn;	×
67	@Input() dateRender: FunctionProp<TemplateRef<Date> \| string>;	×
68	@Input() selectedValue: TinyDate[]; // Range ONLY
69	@Input() hoverValue: TinyDate[]; // Range ONLY
70		×
71	@Input() panelMode: ThyPanelMode;	×
72
73	@Input() set showDateRangeInput(value: boolean) {
74	this._showDateRangeInput = coerceBooleanProperty(value);
75	}	×
76		×
77	get showDateRangeInput() {	×
78	return this._showDateRangeInput;	×
79	}
80
81	@Input() partType: RangePartType;	×
82		×
83	@Input() endPanelMode: ThyPanelMode;
84
85	@Output() readonly panelModeChange = new EventEmitter<ThyPanelMode>();
86		×
87	@Input() value: TinyDate;	×
88		×
89	@Output() readonly headerChange = new EventEmitter<TinyDate>();	×
90	@Output() readonly selectDate = new EventEmitter<TinyDate>();
91	@Output() readonly dayHover = new EventEmitter<TinyDate>();
92		×
93	prefixCls = 'thy-calendar';
94
95	constructor(private dateHelper: DateHelperService) {}
96		×
97	ngOnChanges(changes: SimpleChanges): void {
98	if (changes.activeDate && !changes.activeDate.currentValue) {
99	this.activeDate = new TinyDate();
100	}	×
101	if (changes.panelMode && changes.panelMode.currentValue === 'time') {	×
102	this.panelMode = 'date';	×
103	}	×
104	}	×
105
106	getReadableValue(value: TinyDate) {	×
107	return value ? this.dateHelper.format(value.nativeDate, 'yyyy-MM-dd') : '';	×
108	}
109		×
110	onSelectDate(date: TinyDate \| Date): void {	×
111	const value = date instanceof TinyDate ? date : new TinyDate(date);
112
113	this.selectDate.emit(value);
114	}	×
115
116	onChooseMonth(value: TinyDate): void {
117	this.activeDate = this.activeDate.setMonth(value.getMonth());
118	if (this.endPanelMode === 'month') {	×
119	this.value = value;
120	this.selectDate.emit(value);
121	} else {	1✔
122	this.headerChange.emit(value);
123	this.panelModeChange.emit(this.endPanelMode);
124	}	1✔
125	}
126	onChooseYear(value: TinyDate): void {
127	this.activeDate = this.activeDate.setYear(value.getYear());
128	if (this.endPanelMode === 'year') {
129	this.value = value;
130	this.selectDate.emit(value);
131	} else {
132	this.headerChange.emit(value);
133	this.panelModeChange.emit(this.endPanelMode);
134	}
135	}
136
137	onChooseDecade(value: TinyDate): void {
138	this.activeDate = this.activeDate.setYear(value.getYear());
139	if (this.endPanelMode === 'decade') {
140	this.value = value;
141	this.selectDate.emit(value);
142	} else {
143	this.headerChange.emit(value);
144	this.panelModeChange.emit('year');
145	}
146	}
147
148	enablePrevNext(direction: 'prev' \| 'next', mode: ThyPanelMode): boolean {	1✔
149	if (this.isRange) {
150	if ((this.partType === 'left' && direction === 'next') \|\| (this.partType === 'right' && direction === 'prev')) {
151	const [headerLeftDate, headerRightDate] = this.rangeActiveDate;
152	return isAfterMoreThanOneMonth(headerRightDate, headerLeftDate);
153	} else {
154	return true;
155	}
156	} else {
157	return true;
158	}
159	}
160
161	enableSuperPrevNext(direction: 'prev' \| 'next', panelMode: ThyPanelMode) {
162	if (this.isRange) {
163	if ((this.partType === 'left' && direction === 'next') \|\| (this.partType === 'right' && direction === 'prev')) {
164	const [headerLeftDate, headerRightDate] = this.rangeActiveDate;
165	if (panelMode === 'date') {
166	return isAfterMoreThanLessOneYear(headerRightDate, headerLeftDate);
167	} else if (panelMode === 'month') {
168	return isAfterMoreThanOneYear(headerRightDate, headerLeftDate);
169	} else if (panelMode === 'year') {
170	return isAfterMoreThanOneDecade(headerRightDate, headerLeftDate);
171	}
172	} else {
173	return true;
174	}
175	} else {
176	return true;
177	}
178	}
179	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous