-
Notifications
You must be signed in to change notification settings - Fork 18
/
rh-tabs.ts
79 lines (61 loc) · 2.37 KB
/
rh-tabs.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { html } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { classMap } from 'lit/directives/class-map.js';
import { cascades } from '@patternfly/pfe-core/decorators.js';
import { BaseTabs } from '@patternfly/elements/pf-tabs/BaseTabs.js';
import { RhTab } from './rh-tab.js';
import { RhTabPanel } from './rh-tab-panel.js';
import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
import styles from './rh-tabs.css';
export { RhTab };
/**
* Tabs
* @summary Organizes content into sections in a contained view
*/
@customElement('rh-tabs')
export class RhTabs extends BaseTabs {
static readonly styles = [...BaseTabs.styles, styles];
static isTab(element: HTMLElement): element is RhTab {
return element instanceof RhTab;
}
static isPanel(element: HTMLElement): element is RhTabPanel {
return element instanceof RhTabPanel;
}
/**
* Sets color theme based on parent context
*/
@colorContextConsumer() private on?: ColorTheme;
/**
* Sets color palette, which affects the element's styles as well as descendants' color theme.
* Overrides parent color context.
* Your theme will influence these colors so check there first if you are seeing inconsistencies.
* See [CSS Custom Properties](#css-custom-properties) for default values
*/
@colorContextProvider()
@property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
@property({ reflect: true, type: Boolean }) centered? = false;
// cascade doesn't like undefined values as default
@cascades('rh-tab')
@property({ reflect: true }) theme?: 'base' | null = null;
// cascade doesn't like undefined values as default
@cascades('rh-tab', 'rh-tab-panel')
@property({ reflect: true }) box?: 'box' | 'inset' | null = null;
@cascades('rh-tab', 'rh-tab-panel')
@property({ reflect: true, type: Boolean }) vertical = false;
protected get canShowScrollButtons(): boolean {
return !this.vertical;
}
render() {
const { on = '' } = this;
return html`
<div id="rhds-container" class="${classMap({ [on]: !!on })}">${super.render()}</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'rh-tabs': RhTabs;
}
}