-
Notifications
You must be signed in to change notification settings - Fork 42
/
breadcrumb.element.ts
76 lines (68 loc) · 1.98 KB
/
breadcrumb.element.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
import { html, LitElement } from 'lit';
import { baseStyles, createId, state, querySlot } from '@cds/core/internal';
import styles from './breadcrumb.element.scss';
/**
* ```typescript
* import '@cds/core/breadcrumb/register.js';
* ```
*
* ```html
* <cds-breadcrumb aria-label="breadcrumb">
* <a href="/home" cds-text="link">Home</a>
* <a href="/parent" cds-text="link">Parent page</a>
* <span aria-current="page">Current page</span>
* </cds-breadcrumb>
* ```
*
* @beta
* @element cds-breadcrumb
* @cssprop --font-size
* @cssprop --font-weight
* @cssprop --letter-spacing
* @cssprop --color
*/
export class CdsBreadcrumb extends LitElement {
@state({ type: Array }) private navItems: Element[] = [];
@querySlot('[slot="cds-separator"]') private customSeparator: HTMLElement;
role = 'navigation';
render() {
return html`
<div class="private-host">
<ol cds-layout="horizontal gap:sm align:vertical-center">
${this.slotNames.map(
slotName => html`
<li cds-layout="horizontal gap:sm align:vertical-center">
<slot name="${slotName}"></slot>
<span part="separator" aria-hidden="true">${this.separator}</span>
</li>
`
)}
</ol>
</div>
<slot @slotchange=${this.assignSlots}></slot>
`;
}
private get separator() {
if (this.customSeparator) {
const separatorClone = this.customSeparator.cloneNode(true) as Element;
separatorClone.removeAttribute('slot');
return separatorClone;
} else {
return html`/`;
}
}
private assignSlots() {
this.navItems = Array.from(this.children)
.filter(c => c.getAttribute('slot') !== 'cds-separator')
.map(element => {
element.setAttribute('slot', createId());
return element;
});
}
private get slotNames(): string[] {
return this.navItems.map(element => element.slot);
}
static get styles() {
return [baseStyles, styles];
}
}