gov-gui
Version:
Gov UI Component Library Typscript Build
339 lines (338 loc) • 13.4 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class CalendarComponent {
constructor() {
this.currentDate = null;
this.view = 'day';
this.error = '';
this.date = new Map();
this.required = false;
this.animationDelay = '2s';
this.allClasses = '';
this.months = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
// inject the animations and styles on component load
componentWillLoad() {
const today = new Date();
this.currentYear = today.getFullYear();
this.currentMonth = today.getMonth();
this.currentDate = today.getDate();
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
getYearRange() {
const startYear = this.currentYear - 5;
return Array.from({ length: 12 }, (_, i) => startYear + i);
}
getDaysInMonth(year, month) {
const numDays = new Date(year, month + 1, 0).getDate();
return Array.from({ length: numDays }, (_, i) => i + 1);
}
handlePrevClick() {
switch (this.view) {
case 'year':
this.currentYear--;
break;
case 'month':
if (this.currentMonth === 0) {
this.currentYear--;
this.currentMonth = 11;
}
else {
this.currentMonth--;
}
break;
case 'day':
const prevDate = new Date(this.currentYear, this.currentMonth, this.currentDate);
prevDate.setDate(prevDate.getDate() - 1);
this.currentYear = prevDate.getFullYear();
this.currentMonth = prevDate.getMonth();
this.currentDate = prevDate.getDate();
break;
}
this.adjustCurrentDateToValidDay();
this.updateDateMap();
}
handleNextClick() {
switch (this.view) {
case 'year':
this.currentYear++;
break;
case 'month':
if (this.currentMonth === 11) {
this.currentYear++;
this.currentMonth = 0;
}
else {
this.currentMonth++;
}
break;
case 'day':
const nextDate = new Date(this.currentYear, this.currentMonth, this.currentDate);
nextDate.setDate(nextDate.getDate() + 1);
this.currentYear = nextDate.getFullYear();
this.currentMonth = nextDate.getMonth();
this.currentDate = nextDate.getDate();
break;
}
this.adjustCurrentDateToValidDay();
this.updateDateMap();
}
handleYearClick(year) {
this.currentYear = year;
this.view = 'month';
if (this.date) {
this.date.set('Year', this.currentYear);
}
}
handleMonthClick(monthIndex) {
this.currentMonth = monthIndex;
this.view = 'day';
if (this.date) {
this.date.set('Month', this.months[this.currentMonth]);
}
}
handleDateClick(date) {
this.currentDate = date;
this.view = 'day';
if (this.date) {
this.date.set('Day', this.currentDate);
}
if (this.currentDate) {
this.error = '';
}
}
toggleView(viewType) {
this.view = viewType;
}
adjustCurrentDateToValidDay() {
if (!this.currentDate)
return;
const daysInMonth = this.getDaysInMonth(this.currentYear, this.currentMonth).length;
if (this.currentDate > daysInMonth) {
this.currentDate = daysInMonth;
if (this.date) {
this.date.set('Day', this.currentDate);
}
}
}
updateDateMap() {
if (this.date) {
this.date.set('Year', this.currentYear);
this.date.set('Month', this.months[this.currentMonth]);
if (this.currentDate) {
this.date.set('Day', this.currentDate);
}
}
}
get value() {
if (!this.currentDate)
return '';
const month = (this.currentMonth + 1).toString().padStart(2, '0');
const day = this.currentDate.toString().padStart(2, '0');
return `${this.currentYear}-${month}-${day}`;
}
async validate() {
if (this.required && !this.currentDate) {
this.error = 'Please select a date.';
return false;
}
this.error = '';
return true;
}
render() {
return (h("div", { key: 'bf2c0fdf2bf6a4e582af99088344fdc8f308e631', class: `calendar-container ${this.allClasses}` }, h("div", { key: '5e846a89ead76825e7634c50a2dffdd3d32b9118', class: "header" }, h("div", { key: 'b2d327953f59ba1286577f1a99cd3c6c81e1a70f', class: "calendar-footer" }, h("gov-button", { key: 'e44027d64d4d660298130e45a0e9937115ab7640', class: "footer-btn", onClick: () => this.toggleView('year'), label: "Year" }), h("gov-button", { key: 'dfaeee9ed298982e1884af911428432ffb935a02', class: "footer-btn", onClick: () => this.toggleView('month'), label: "Month" }), h("gov-button", { key: '46f07c4999b8508617c24d2d2931e4d5458560f5', class: "footer-btn", onClick: () => this.toggleView('day'), label: "Day" })), h("div", { key: '64b6c7eea3af97376dec7cb60c641a5bfa715ff9', class: "calendar-header" }, h("gov-button", { key: '28335655e51845b6d4e8bf521d4d954f07e2251e', class: "arrow-btn", onClick: () => this.handlePrevClick(), label: "\u2190" }), h("div", { key: '7b78a85f23aa07c977b7099a0cece1405490c146', class: "calendar-month-year" }, this.view === 'year' && this.currentYear, this.view === 'month' && `${this.months[this.currentMonth]} ${this.currentYear}`, this.view === 'day' &&
`${this.months[this.currentMonth]} ${this.currentDate}, ${this.currentYear}`), h("gov-button", { key: '09e35ca26b2c498ba34f0f9783dcfc2fffaa0959', class: "arrow-btn", onClick: () => this.handleNextClick(), label: "\u2192" }))), this.view === 'year' ? (h("div", { class: "calendar-grid year-grid" }, this.getYearRange().map((year) => (h("div", { class: `year ${year === this.currentYear ? 'selected-year' : ''}`, onClick: () => this.handleYearClick(year) }, year))))) : this.view === 'month' ? (h("div", { class: "calendar-grid month-grid" }, this.months.map((month, index) => (h("div", { class: `month ${index === this.currentMonth ? 'selected-month' : ''}`, onClick: () => this.handleMonthClick(index) }, month))))) : (h("div", { class: "calendar" }, h("div", { class: "calendar-grid day-headers" }, ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day) => (h("div", { class: "day-header" }, day)))), h("div", { class: "calendar-grid day-grid" }, this.getDaysInMonth(this.currentYear, this.currentMonth).map((date) => (h("div", { class: `day ${date === this.currentDate ? 'selected-day' : ''}`, onClick: () => this.handleDateClick(date) }, date)))))), this.error && (h("div", { key: '1321071c4ed3fda139f6d5929f1070cfc87639e4', class: "error-message", style: { color: 'red', fontSize: '14px', marginTop: '0.5rem' } }, this.error))));
}
static get is() { return "gov-calender"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-calender.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-calender.css"]
};
}
static get properties() {
return {
"date": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Map<string, any>",
"resolved": "Map<string, any>",
"references": {
"Map": {
"location": "global",
"id": "global::Map"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "new Map()"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get states() {
return {
"currentYear": {},
"currentMonth": {},
"currentDate": {},
"view": {},
"error": {}
};
}
static get methods() {
return {
"validate": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-calender.js.map