soft-components
Version:
Simple soft flexible set of web components
75 lines (74 loc) • 1.91 kB
JavaScript
import { Component, Host, h, Prop, Element, Listen } from '@stencil/core';
export class ScAccordion {
constructor() {
/**
* If multiple `<sc-accordion-item>`s can open at the same time
*/
this.multiple = false;
}
componentWillLoad() {
this.items = this.el.querySelectorAll(':scope > sc-accordion-item');
if (!this.multiple) {
this.activeItem = this.el.querySelector(':scope > sc-accordion-item[active]');
if (this.activeItem) {
this.activeItem.open();
}
this.closeNonActive();
}
}
openHandler(e) {
e.stopPropagation();
const eventTarget = e.target;
if (!this.multiple) {
this.activeItem = eventTarget;
this.closeNonActive();
}
}
closeNonActive() {
this.items.forEach(item => {
if (!item.isEqualNode(this.activeItem)) {
item.close();
}
});
}
render() {
return (h(Host, null,
h("slot", null)));
}
static get is() { return "sc-accordion"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["sc-accordion.scss"]
}; }
static get styleUrls() { return {
"$": ["sc-accordion.css"]
}; }
static get properties() { return {
"multiple": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If multiple `<sc-accordion-item>`s can open at the same time"
},
"attribute": "multiple",
"reflect": false,
"defaultValue": "false"
}
}; }
static get elementRef() { return "el"; }
static get listeners() { return [{
"name": "opened",
"method": "openHandler",
"target": undefined,
"capture": false,
"passive": false
}]; }
}