@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
125 lines (124 loc) • 3.68 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.
*/
import { Component, Element, h, Host, Prop, Method } from "@stencil/core";
import { CSS } from "./resources";
import { updateHostInteraction } from "../../utils/interactive";
/**
* A general purpose list that enables users to construct list items that conform to Calcite styling.
* @slot - A slot for adding `calcite-list-item` elements.
*/
export class List {
constructor() {
// --------------------------------------------------------------------------
//
// Properties
//
// --------------------------------------------------------------------------
/**
* When true, disabled prevents user interaction.
*/
this.disabled = false;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentDidRender() {
updateHostInteraction(this);
}
// --------------------------------------------------------------------------
//
// Public Methods
//
// --------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
const firstListItem = this.el.querySelector(`calcite-list-item:not([non-interactive])`);
firstListItem === null || firstListItem === void 0 ? void 0 : firstListItem.setFocus();
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
return (h(Host, { role: "list" },
h("div", { class: CSS.container },
h("slot", null))));
}
static get is() { return "calcite-list"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["list.scss"]
}; }
static get styleUrls() { return {
"$": ["list.css"]
}; }
static get properties() { return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When true, disabled prevents user interaction."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"headingLevel": {
"type": "number",
"mutable": false,
"complexType": {
"original": "HeadingLevel",
"resolved": "1 | 2 | 3 | 4 | 5 | 6",
"references": {
"HeadingLevel": {
"location": "import",
"path": "../functional/Heading"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number at which section headings should start for this component."
},
"attribute": "heading-level",
"reflect": false
}
}; }
static get methods() { return {
"setFocus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
},
"HTMLCalciteListItemElement": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the component.",
"tags": []
}
}
}; }
static get elementRef() { return "el"; }
}