gov-gui
Version:
Gov UI Component Library Typscript Build
211 lines (210 loc) • 6.95 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class List {
constructor() {
this.items = 'Default Item 1, Default Item 2, Default Item 3';
this.alignment = 'vertical';
this.activeIndex = 0;
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() {
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,
});
}
handleSelectedItem(index) {
this.selectedItem.emit(index);
}
get itemArray() {
return this.items.match(/<[^>]+>[^<]*<\/[^>]+>|[^,]+/g).map(item => item.trim());
}
setActiveIndex(index) {
this.activeIndex = index;
this.handleSelectedItem(index);
}
render() {
return (h("div", { key: 'eecb852209f35159bed7d3f36695d2a1119a60e8', class: `list-container ${this.alignment} ${this.allClasses}` }, h("ul", { key: '50a8a6ea7045d1d61ed8cfa20a3e6c40e77ada5d' }, this.itemArray.map((item, index) => (h("li", { class: {
'list-item': true,
'active': index === this.activeIndex,
}, onClick: () => this.setActiveIndex(index), innerHTML: item }))))));
}
static get is() { return "gov-list"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-list.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-list.css"]
};
}
static get properties() {
return {
"items": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "items",
"reflect": false,
"defaultValue": "'Default Item 1, Default Item 2, Default Item 3'"
},
"alignment": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "alignment",
"reflect": false,
"defaultValue": "'vertical'"
},
"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 {
"activeIndex": {}
};
}
static get events() {
return [{
"method": "selectedItem",
"name": "selectedItem",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-list.js.map