gov-gui
Version:
Gov UI Component Library Typscript Build
234 lines (233 loc) • 8.39 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class ComboBoxComponent {
constructor() {
this.options = [];
this.parsedOptions = [];
this.isOpen = false;
this.searchQuery = '';
this.selectedOption = '';
this.animationDelay = '2s';
this.allClasses = '';
}
//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() {
if (typeof this.options === 'string') {
try {
this.parsedOptions = JSON.parse(this.options);
}
catch (error) {
console.error('Invalid options format. Expected a JSON array.');
this.parsedOptions = [];
}
}
else {
this.parsedOptions = this.options;
}
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,
});
}
get filteredOptions() {
return this.parsedOptions.filter((option) => option.toLowerCase().includes(this.searchQuery.toLowerCase()));
}
handleInputChange(event) {
const input = event.target;
this.searchQuery = input.value;
this.isOpen = true;
}
handleInputClick() {
this.isOpen = true;
}
toggleDropdown() {
this.isOpen = !this.isOpen;
}
selectItem(item) {
this.selectedOption = item;
this.searchQuery = item;
this.isOpen = false;
}
render() {
return (h("div", { key: 'f47884caf10a9bb3599c29924b4ab6acfd6d19ca', class: `combo-box-container ${this.allClasses}` }, h("h2", { key: '0e81bd328d090cf9a7a0baff8da4bf604fbe17c1' }, this.label), h("p", { key: '828191db46b74c042bd4ca1c78afdd4cb1cbc05f' }, this.description), h("div", { key: '53ff4ea6209e036717b202639231bd4d307a39cf', class: "combo-box" }, h("input", { key: '3932525a8baa758b12a3bb7f45e58976488e888c', type: "text", class: "combo-input", value: this.searchQuery, placeholder: "Type to filter...", onInput: (event) => this.handleInputChange(event), onClick: () => this.handleInputClick() }), h("span", { key: '5118f05ac7c3e8a3b0a8595e58a6433b23308337', class: "arrow-icon", onClick: () => this.toggleDropdown() }, this.isOpen ? '▲' : '▼')), this.isOpen && (h("div", { key: 'a409fb4c92f4d8318555d9a4715aec2afb609484', class: "combo-dropdown" }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option) => (h("div", { class: "combo-option", onClick: () => this.selectItem(option) }, option)))) : (h("div", { class: "combo-option" }, "No results found"))))));
}
static get is() { return "gov-combo-box"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-combo-box.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-combo-box.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"description": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "description",
"reflect": false
},
"options": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | string[]",
"resolved": "string | string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "options",
"reflect": false,
"defaultValue": "[]"
},
"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 {
"parsedOptions": {},
"isOpen": {},
"searchQuery": {},
"selectedOption": {}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-combo-box.js.map