@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
80 lines (79 loc) • 2.62 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, Prop, h, Host } from "@stencil/core";
import { CSS } from "./resources";
import { HEADING_LEVEL } from "./resources";
import { Heading, constrainHeadingLevel } from "../functional/Heading";
/**
* @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
*/
export class ListItemGroup {
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
var _a;
const { el, heading, headingLevel } = this;
const parentLevel = (_a = el.closest("calcite-list, calcite-list-item-group")) === null || _a === void 0 ? void 0 : _a.headingLevel;
const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
const level = headingLevel || relativeLevel || HEADING_LEVEL;
return (h(Host, null,
heading ? (h(Heading, { class: CSS.heading, level: level }, heading)) : null,
h("div", { class: CSS.container, role: "group" },
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 {
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The title used for all nested `calcite-list-item` rows."
},
"attribute": "heading",
"reflect": true
},
"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 elementRef() { return "el"; }
}