import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { Router } from '@vaadin/router';
import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
import '@shoelace-style/shoelace/dist/components/tab/tab.js';
@customElement('settings-tabs')
export class SettingsTabs extends LitElement {
@property({ type: String })
active = '';
@property({ type: Object })
features: { [key: string]: boolean | string[] } = {};
static styles = css`
:host {
display: block;
margin-bottom: 2rem;
}
sl-tab-group {
--indicator-color: var(--sl-color-primary-600);
}
`;
private get tabs() {
const hasUserMgmt = this.features['user_management'] === true;
const allTabs = [
{ path: '/console/settings/profile', label: 'Profile' },
{ path: '/console/settings/security', label: 'Security' },
{ path: '/console/settings/account', label: 'Account', ee: true },
{ path: '/console/settings/users', label: 'Users', ee: true },
{ path: '/console/settings/teams', label: 'Teams', ee: true },
{ path: '/console/settings/invitations', label: 'Invitations', ee: true },
{ path: '/console/settings/api-keys', label: 'API Keys' },
{ path: '/console/settings/ai-models', label: 'AI Models' },
{ path: '/console/settings/appearance', label: 'Appearance' },
];
return allTabs.filter((t) => !t.ee || hasUserMgmt);
}
private onTabSelect(e: CustomEvent) {
const panel = e.detail.name;
if (panel) {
Router.go(panel);
}
}
render() {
return html`
<sl-tab-group @sl-tab-show=${this.onTabSelect}>
${this.tabs.map(
(tab) => html`
<sl-tab
slot="nav"
panel=${tab.path}
?active=${this.active === tab.path}
>
${tab.label}
</sl-tab>
`
)}
</sl-tab-group>
`;
}
}
