gov-gui
Version:
Gov UI Component Library Typscript Build
238 lines (237 loc) • 8.38 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class Tabs {
constructor() {
this.tabList = []; // Can be string (JSON) or an array
this.activeTab = '';
this.disabledTabs = [];
this.parsedTabList = []; // Hold the actual array of tabList
this.hasContent = false;
this.internalActiveTab = this.activeTab;
this.animationDelay = '2s';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
setActiveTab(tab) {
if (!this.disabledTabs.includes(tab)) {
this.internalActiveTab = tab;
}
requestAnimationFrame(() => this.checkSlotContent());
}
componentWillLoad() {
if (typeof this.tabList === 'string') {
try {
this.parsedTabList = JSON.parse(this.tabList);
}
catch (e) {
console.error('Failed to parse tabList:', e);
this.parsedTabList = [];
}
}
else if (Array.isArray(this.tabList)) {
this.parsedTabList = this.tabList;
}
else {
this.parsedTabList = [];
}
this.setActiveTab(this.activeTab);
this.checkSlotContent();
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed,
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
// componentDidLoad() {
// this.checkSlotContent();
// }
checkSlotContent() {
this.hasContent = this.hasSlotContent(this.internalActiveTab);
}
//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: 'ce97255e938c946c0c916bf350d6c352bda60788', class: this.allClasses }, h("div", { key: '1717ae0d3264b15cb8784d2214f22a2a6cffdecc', class: "tabs" }, this.parsedTabList.map(tab => (h("button", { class: `tab-button ${this.internalActiveTab === tab ? 'active' : ''} ${this.disabledTabs.includes(tab) ? 'deactivated' : ''}`, onClick: () => this.setActiveTab(tab) }, tab)))), h("div", { key: 'ed359ec4e100b86e67b0d76743c5a1ca60cdeef3', class: "tab-content" }, h("div", { key: 'b740835e4d6727ec0e96162c9268cf5814cbfb98', class: "card" }, h("slot", { key: '1e99f34218dbc3b890789e34ec5496fce6b570c9', name: this.internalActiveTab }), !this.hasContent && h("p", { key: '017100dc2e0e54214a00565097b574b92417f9bb' }, "No matching content for this tab")))));
}
hasSlotContent(name) {
const slot = this.el.shadowRoot.querySelector(`slot[name="${name}"]`);
return slot && slot.assignedNodes().length > 0;
}
static get is() { return "gov-tabs"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-tabs.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-tabs.css"]
};
}
static get properties() {
return {
"tabList": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | string[]",
"resolved": "string | string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "tab-list",
"reflect": false,
"defaultValue": "[]"
},
"activeTab": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "active-tab",
"reflect": false,
"defaultValue": "''"
},
"disabledTabs": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | string[]",
"resolved": "string | string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "disabled-tabs",
"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 {
"parsedTabList": {},
"hasContent": {},
"internalActiveTab": {}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-tabs.js.map