@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
106 lines (105 loc) • 3.41 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 { Fragment, h } from "@stencil/core";
import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
import { getSlotted } from "../../utils/dom";
import { constrainHeadingLevel, Heading } from "../functional/Heading";
import { CSS, SLOTS } from "./resources";
/**
* @deprecated Use the `list` component instead.
* @slot - A slot for adding `calcite-pick-list-item` elements.
*/
export class PickListGroup {
constructor() {
this.groupTitle = undefined;
this.headingLevel = undefined;
}
// --------------------------------------------------------------------------
//
// Lifecycle
//
// --------------------------------------------------------------------------
connectedCallback() {
connectConditionalSlotComponent(this);
}
disconnectedCallback() {
disconnectConditionalSlotComponent(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { el, groupTitle, headingLevel } = this;
const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
const sectionClasses = {
[CSS.container]: true,
[CSS.indented]: hasParentItem
};
const title = groupTitle;
const parentLevel = el.closest("calcite-pick-list")?.headingLevel;
const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
const level = headingLevel || relativeLevel;
return (h(Fragment, null, title ? (h(Heading, { class: CSS.heading, level: level }, title)) : null, h("slot", { name: SLOTS.parentItem }), h("section", { class: sectionClasses }, h("slot", null))));
}
static get is() { return "calcite-pick-list-group"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["pick-list-group.scss"]
};
}
static get styleUrls() {
return {
"$": ["pick-list-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 the title for all nested `calcite-pick-list-item`s."
},
"attribute": "group-title",
"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": "Specifies the number at which section headings should start."
},
"attribute": "heading-level",
"reflect": true
}
};
}
static get elementRef() { return "el"; }
}