gov-gui
Version:
Gov UI Component Library Typscript Build
225 lines (224 loc) • 8.49 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovMenubar {
constructor() {
/** The type of menu: 'horizontal', 'vertical', or 'sticky' */
this.type = 'horizontal';
this.parsedItems = [];
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() {
this.provideItems();
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,
});
}
handleItems() {
this.provideItems();
}
provideItems() {
if (typeof this.items === 'string') {
try {
this.parsedItems = JSON.parse(this.items);
}
catch (error) {
console.error("Invalid JSON format for 'items' prop:", error);
this.parsedItems = [];
}
}
else {
this.parsedItems = this.items || [];
}
}
renderSubItems(subItems) {
return (h("ul", { class: "submenu shadow-lg" }, subItems.map(sub => (h("li", { onClick: (e) => this.handleItemClick(e, sub.link) }, sub.icon && h("gov-icon", { name: sub.icon, variant: '' }), sub.label, sub.subSubItems && h("gov-icon", { name: 'angleDownOutline', size: 'sm' }), sub.subSubItems && this.renderSubItems(sub.subSubItems))))));
}
handleItemClick(event, link) {
// Stop event propagation to prevent parent handlers from firing
event.stopPropagation();
if (link) {
// Check if it's an external link (starts with http or https)
if (link.startsWith('http://') || link.startsWith('https://')) {
window.location.href = link;
}
// Check if it's an anchor link
else if (link.startsWith('#')) {
window.location.hash = link;
}
// It's an internal link
else {
// You can use History API if you're using a router
// history.push(link);
// For simple navigation:
window.location.pathname = link;
}
}
}
render() {
var _a;
return (h("nav", { key: 'a765051c24f88740f8f144edc67813904fea4e43', class: { 'menu-bar': true, [this.type]: true, [this.allClasses]: true } }, h("ul", { key: 'be776c2bab14c96263b151c32e15b6eb66eb0f9b' }, (_a = this.parsedItems) === null || _a === void 0 ? void 0 : _a.map(item => (h("li", { onClick: (e) => this.handleItemClick(e, item.link) }, item.icon && h("gov-icon", { name: item.icon }), item.label, item.subItems && h("gov-icon", { name: 'angleDownOutline', size: 'sm' }), item.subItems && this.renderSubItems(item.subItems)))))));
}
static get is() { return "gov-menubar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-menubar.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-menubar.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'horizontal' | 'vertical' | 'sticky'",
"resolved": "\"horizontal\" | \"sticky\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The type of menu: 'horizontal', 'vertical', or 'sticky'"
},
"getter": false,
"setter": false,
"attribute": "type",
"reflect": false,
"defaultValue": "'horizontal'"
},
"items": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | { label: string; link?: string; icon?: string; subItems?: { label: string; link?: string; icon?: string; subSubItems?: { label: string; link?: string; icon?: string }[] }[] }[]",
"resolved": "string | { label: string; link?: string; icon?: string; subItems?: { label: string; link?: string; icon?: string; subSubItems?: { label: string; link?: string; icon?: string; }[]; }[]; }[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The menu items passed as an array of objects"
},
"getter": false,
"setter": false,
"attribute": "items",
"reflect": 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 {
"parsedItems": {}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}, {
"propName": "items",
"methodName": "handleItems"
}];
}
}
//# sourceMappingURL=gov-menubar.js.map