@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
177 lines (176 loc) • 5.66 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, Host } from "@stencil/core";
import { getElementProp } from "../../utils/dom";
import { CSS } from "./resources";
/**
* @slot - A slot for adding `calcite-dropdown-item`s.
*/
export class DropdownGroup {
constructor() {
this.groupTitle = undefined;
this.selectionMode = "single";
this.scale = undefined;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
this.groupPosition = this.getGroupPosition();
}
render() {
const scale = this.scale || getElementProp(this.el, "scale", "m");
const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
return (h(Host, { "aria-label": this.groupTitle, role: "group" }, h("div", { class: {
container: true,
[CSS.containerSmall]: scale === "s",
[CSS.containerMedium]: scale === "m",
[CSS.containerLarge]: scale === "l"
}, title: this.groupTitle }, dropdownSeparator, groupTitle, h("slot", null))));
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
updateActiveItemOnChange(event) {
this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
this.requestedDropdownItem = event.detail.requestedDropdownItem;
this.calciteInternalDropdownItemChange.emit({
requestedDropdownGroup: this.requestedDropdownGroup,
requestedDropdownItem: this.requestedDropdownItem
});
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
getGroupPosition() {
return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-dropdown-group"), this.el);
}
static get is() { return "calcite-dropdown-group"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["dropdown-group.scss"]
};
}
static get styleUrls() {
return {
"$": ["dropdown-group.css"]
};
}
static get properties() {
return {
"groupTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies and displays a group title."
},
"attribute": "group-title",
"reflect": true
},
"selectionMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Extract<\"single\" | \"none\" | \"multiple\", SelectionMode>",
"resolved": "\"multiple\" | \"none\" | \"single\"",
"references": {
"Extract": {
"location": "global"
},
"SelectionMode": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the component's selection mode, where\n`\"multiple\"` allows any number of (or no) selected `calcite-dropdown-item`s,\n`\"single\"` allows and requires one selected `calcite-dropdown-item`, and\n`\"none\"` does not allow selection on `calcite-dropdown-item`s."
},
"attribute": "selection-mode",
"reflect": true,
"defaultValue": "\"single\""
},
"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
}
};
}
static get events() {
return [{
"method": "calciteInternalDropdownItemChange",
"name": "calciteInternalDropdownItemChange",
"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": "calciteInternalDropdownItemSelect",
"method": "updateActiveItemOnChange",
"target": undefined,
"capture": false,
"passive": false
}];
}
}