-
Notifications
You must be signed in to change notification settings - Fork 2
/
tab.ts
100 lines (86 loc) · 2.48 KB
/
tab.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { themes } from '../../theming/theming-decorator.js';
import { registerComponent } from '../common/definitions/register.js';
import { createCounter } from '../common/util.js';
import { styles as shared } from './themes/shared/tab/tab.common.css.js';
import { all } from './themes/tab-themes.js';
import { styles } from './themes/tab.base.css.js';
/**
* Represents the tab header.
*
* @element igc-tab
*
* @slot prefix - Renders before the tab header content.
* @slot - Renders the tab header content.
* @slot suffix - Renders after the tab header content.
*
* @csspart content - The content wrapper.
* @csspart prefix - The prefix wrapper.
* @csspart suffix - The suffix wrapper.
*/
@themes(all)
export default class IgcTabComponent extends LitElement {
public static readonly tagName = 'igc-tab';
public static override styles = [styles, shared];
/* blazorSuppress */
public static register() {
registerComponent(IgcTabComponent);
}
private static readonly increment = createCounter();
@query('[part="base"]', true)
private tab!: HTMLElement;
/**
* The id of the tab panel which will be controlled by the tab.
* @attr
*/
@property()
public panel = '';
/**
* Determines whether the tab is selected.
* @attr
*/
@property({ type: Boolean, reflect: true })
public selected = false;
/**
* Determines whether the tab is disabled.
* @attr
*/
@property({ type: Boolean, reflect: true })
public disabled = false;
public override connectedCallback(): void {
super.connectedCallback();
this.id =
this.getAttribute('id') || `igc-tab-${IgcTabComponent.increment()}`;
}
/** Sets focus to the tab. */
public override focus(options?: FocusOptions) {
this.tab.focus(options);
}
/** Removes focus from the tab. */
public override blur() {
this.tab.blur();
}
protected override render() {
return html`
<div
part="base"
role="tab"
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-selected=${this.selected ? 'true' : 'false'}
tabindex=${this.disabled || !this.selected ? -1 : 0}
>
<slot name="prefix" part="prefix"></slot>
<div part="content">
<slot></slot>
</div>
<slot name="suffix" part="suffix"></slot>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'igc-tab': IgcTabComponent;
}
}