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 | 125x 135x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x | 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 var(--color-widget-border);
border-radius: var(--curvature-widget);
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>`;
}
}
|