-
Notifications
You must be signed in to change notification settings - Fork 2
/
nav-drawer.ts
112 lines (96 loc) · 2.64 KB
/
nav-drawer.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
101
102
103
104
105
106
107
108
109
110
111
112
import { LitElement, html } from 'lit';
import { property, queryAssignedElements } from 'lit/decorators.js';
import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
import IgcNavDrawerItemComponent from './nav-drawer-item.js';
import { styles } from './themes/container.base.css.js';
import { all } from './themes/container.js';
import { styles as shared } from './themes/shared/container/nav-drawer.common.css.js';
import { themes } from '../../theming/theming-decorator.js';
import { registerComponent } from '../common/definitions/register.js';
import { partNameMap } from '../common/util.js';
/**
* Represents a side navigation container that provides
* quick access between views.
*
* @element igc-nav-drawer
*
* @slot - The default slot for the drawer.
* @slot mini - The slot for the mini variant of the drawer.
*
* @csspart base - The base wrapper of the navigation drawer.
* @csspart main - The main container.
* @csspart mini - The mini container.
*/
@themes(all)
export default class IgcNavDrawerComponent extends LitElement {
public static readonly tagName = 'igc-nav-drawer';
public static override styles = [styles, shared];
/* blazorSuppress */
public static register() {
registerComponent(
this,
IgcNavDrawerHeaderItemComponent,
IgcNavDrawerItemComponent
);
}
@queryAssignedElements({ slot: 'mini' })
private _miniSlotElements!: Array<HTMLElement>;
/**
* The position of the drawer.
* @attr
*/
@property({ reflect: true })
public position: 'start' | 'end' | 'top' | 'bottom' | 'relative' = 'start';
/**
* Determines whether the drawer is opened.
* @attr
*/
@property({ type: Boolean, reflect: true })
public open = false;
/** Opens the drawer. */
public show() {
if (this.open) {
return;
}
this.open = true;
}
/** Closes the drawer. */
public hide() {
if (!this.open) {
return;
}
this.open = false;
}
/** Toggles the open state of the drawer. */
public toggle() {
if (this.open) {
this.hide();
} else {
this.show();
}
}
private resolvePartNames(base: string) {
return {
[base]: true,
hidden: this._miniSlotElements.length < 1,
};
}
protected override render() {
return html`
<div part="overlay" @click=${this.hide}></div>
<div part="base">
<div part="main">
<slot></slot>
</div>
</div>
<div part="${partNameMap(this.resolvePartNames('mini'))}">
<slot name="mini"></slot>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'igc-nav-drawer': IgcNavDrawerComponent;
}
}