@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
103 lines (102 loc) • 3.04 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 { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
import { MAX_COLUMNS } from "../list-item/resources";
import { getDepth } from "../list-item/utils";
import { CSS } from "./resources";
/**
* @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
*/
export class ListItemGroup {
constructor() {
this.disabled = false;
this.heading = undefined;
this.visualLevel = null;
}
// --------------------------------------------------------------------------
//
// Lifecycle
//
// --------------------------------------------------------------------------
connectedCallback() {
const { el } = this;
this.visualLevel = getDepth(el, true);
connectInteractive(this);
}
componentDidRender() {
updateHostInteraction(this);
}
disconnectedCallback() {
disconnectInteractive(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { heading, visualLevel } = this;
return (h(Host, null, h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", null)));
}
static get is() { return "calcite-list-item-group"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["list-item-group.scss"]
};
}
static get styleUrls() {
return {
"$": ["list-item-group.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`, interaction is prevented and the component is displayed with lower opacity."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The header text for all nested `calcite-list-item` rows."
},
"attribute": "heading",
"reflect": true
}
};
}
static get states() {
return {
"visualLevel": {}
};
}
static get elementRef() { return "el"; }
}