Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 92x 100x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x | import { LitElement, TemplateResult, css, html } from 'lit';
import { property } from 'lit/decorators.js';
import { AccordionSection } from './AccordionSection';
export class Accordion extends LitElement {
static get styles() {
return css`
:host {
display: block;
border: 1px solid #e0e0e0;
border-radius: 6px;
overflow: hidden;
}
`;
}
@property({ type: Boolean })
multi = false;
connectedCallback() {
super.connectedCallback();
this.addEventListener('toggle', this.handleToggle as EventListener);
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('toggle', this.handleToggle as EventListener);
}
private handleToggle = (evt: CustomEvent) => {
if (this.multi) return;
const toggled = evt.target as AccordionSection;
// If the toggled section was expanded (not collapsed), collapse all others
if (!toggled.collapsed) {
const sections = this.querySelectorAll('temba-accordion-section');
sections.forEach((section: AccordionSection) => {
if (section !== toggled && !section.collapsed) {
section.collapsed = true;
}
});
}
};
public render(): TemplateResult {
return html`<slot></slot>`;
}
}
|