gov-gui
Version:
Gov UI Component Library Typscript Build
299 lines (298 loc) • 10.6 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class DateTimePicker {
constructor() {
this.selectedDate = '';
this.selectedTime = '12:00';
this.isAM = true;
this.error = '';
this.date = '';
this.time = '';
this.required = false;
this.animationDelay = '2s';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
handleDateChange(event) {
this.selectedDate = event.target.value;
this.selectedDateEvent.emit(this.selectedDate);
this.date = this.selectedDate;
if (!this.time) {
this.time = this.selectedTime;
}
// Clear any existing error when a date is provided.
if (this.selectedDate) {
this.error = '';
}
}
handleTimeChange(event) {
this.selectedTime = event.target.value;
this.selectedTimeEvent.emit(this.selectedTime);
this.time = this.selectedTime;
}
toggleAMPM() {
this.isAM = !this.isAM;
}
get value() {
if (!this.selectedDate)
return '';
const ampm = this.isAM ? 'AM' : 'PM';
return `${this.selectedDate} ${this.selectedTime} ${ampm}`.trim();
}
/**
* Public method to validate the component.
* If the component is required and no date is selected, it sets an error message.
*/
async validate() {
if (this.required && !this.selectedDate) {
this.error = 'Please select date and time.';
return false;
}
this.error = '';
return true;
}
// inject the animations and styles on component load
componentWillLoad() {
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,
});
}
render() {
return (h("div", { key: 'd73ab9d38189009ed24be143d91a9f3a316932da', class: `picker-container` }, h("div", { key: 'bd89eb65b7c8da5079aff879a5f7ea6c8e8bdac2', class: `date-picker ${this.allClasses}` }, h("input", { key: '042250224330d51db9450e5786b62a666a3d4866', class: "custom-date-input", type: "date", value: this.selectedDate, required: this.required, onInput: event => this.handleDateChange(event) }), this.error && (h("div", { key: 'e558b942590df1166830965e8e9a0ec11f3f9570', class: "error-message", style: { color: 'red', fontSize: '14px', marginTop: '0.5rem' } }, this.error))), h("div", { key: 'afc51842e672c758ad775d37610f83c5c49fdaa2', class: `time-picker ${this.allClasses}` }, h("div", { key: '50039033448b5263b4e4fe97a5c5079ce1a3361b', class: "custom-time-input" }, h("input", { key: '64eefa8f2f7d622f304ac979804ca09d7a924859', class: "input-time", type: "time", value: this.selectedTime, onInput: event => this.handleTimeChange(event) }), h("button", { key: 'c09572260625294345d9905d4bdd05d736487d6c', class: "ampm-toggle", onClick: () => this.toggleAMPM() }, this.isAM ? 'AM' : 'PM')))));
}
static get is() { return "gov-date-time-picker"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-date-time-picker.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-date-time-picker.css"]
};
}
static get properties() {
return {
"date": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "date",
"reflect": false,
"defaultValue": "''"
},
"time": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "time",
"reflect": false,
"defaultValue": "''"
},
"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 {
"selectedDate": {},
"selectedTime": {},
"isAM": {},
"error": {}
};
}
static get events() {
return [{
"method": "selectedDateEvent",
"name": "selectedDateEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "selectedTimeEvent",
"name": "selectedTimeEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get methods() {
return {
"validate": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "Public method to validate the component.\r\nIf the component is required and no date is selected, it sets an error message.",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-date-time-picker.js.map