@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
249 lines (248 loc) • 7.37 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { h } from "@stencil/core";
/**
* @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
*/
export class Accordion {
constructor() {
//--------------------------------------------------------------------------
//
// Private State/Props
//
//--------------------------------------------------------------------------
/** created list of Accordion items */
this.items = [];
/** keep track of whether the items have been sorted so we don't re-sort */
this.sorted = false;
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
this.appearance = "solid";
this.iconPosition = "end";
this.iconType = "chevron";
this.scale = "m";
this.selectionMode = "multiple";
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentDidLoad() {
if (!this.sorted) {
this.items = this.sortItems(this.items);
this.sorted = true;
}
}
render() {
const transparent = this.appearance === "transparent";
return (h("div", { class: {
"accordion--transparent": transparent,
accordion: !transparent
} }, h("slot", null)));
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
registerCalciteAccordionItem(event) {
const item = {
item: event.target,
parent: event.detail.parent,
position: event.detail.position
};
if (this.el === item.parent) {
this.items.push(item);
}
event.stopPropagation();
}
updateActiveItemOnChange(event) {
this.requestedAccordionItem = event.detail.requestedAccordionItem;
this.calciteInternalAccordionChange.emit({
requestedAccordionItem: this.requestedAccordionItem
});
event.stopPropagation();
}
static get is() { return "calcite-accordion"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["accordion.scss"]
};
}
static get styleUrls() {
return {
"$": ["accordion.css"]
};
}
static get properties() {
return {
"appearance": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Extract<\"solid\" | \"transparent\", Appearance>",
"resolved": "\"solid\" | \"transparent\"",
"references": {
"Extract": {
"location": "global"
},
"Appearance": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the appearance of the component."
},
"attribute": "appearance",
"reflect": true,
"defaultValue": "\"solid\""
},
"iconPosition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Position",
"resolved": "\"end\" | \"start\"",
"references": {
"Position": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the placement of the icon in the header."
},
"attribute": "icon-position",
"reflect": true,
"defaultValue": "\"end\""
},
"iconType": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"chevron\" | \"caret\" | \"plus-minus\"",
"resolved": "\"caret\" | \"chevron\" | \"plus-minus\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the type of the icon in the header."
},
"attribute": "icon-type",
"reflect": true,
"defaultValue": "\"chevron\""
},
"scale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size of the component."
},
"attribute": "scale",
"reflect": true,
"defaultValue": "\"m\""
},
"selectionMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Extract<\n \"single\" | \"single-persist\" | \"multiple\",\n SelectionMode\n >",
"resolved": "\"multiple\" | \"single\" | \"single-persist\"",
"references": {
"Extract": {
"location": "global"
},
"SelectionMode": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the selection mode - `\"multiple\"` (allow any number of open items), `\"single\"` (allow one open item),\nor `\"single-persist\"` (allow and require one open item)."
},
"attribute": "selection-mode",
"reflect": true,
"defaultValue": "\"multiple\""
}
};
}
static get events() {
return [{
"method": "calciteInternalAccordionChange",
"name": "calciteInternalAccordionChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "RequestedItem",
"resolved": "RequestedItem",
"references": {
"RequestedItem": {
"location": "import",
"path": "./interfaces"
}
}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "calciteInternalAccordionItemRegister",
"method": "registerCalciteAccordionItem",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "calciteInternalAccordionItemSelect",
"method": "updateActiveItemOnChange",
"target": undefined,
"capture": false,
"passive": false
}];
}
}