@esri/calcite-components/dist/collection/components/combobox-item-group/combobox-item-group.js

Web Components for Esri's Calcite Design System.

/*!
 * 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 } from "@stencil/core";
import { getElementProp } from "../../utils/dom";
import { guid } from "../../utils/guid";
import { getAncestors, getDepth } from "../combobox/utils";
import { CSS } from "./resources";
/**
 * @slot - A slot for adding `calcite-combobox-item`s.
 */
export class ComboboxItemGroup {
  constructor() {
    this.guid = guid();
    this.scale = "m";
    this.ancestors = undefined;
    this.label = undefined;
  }
  // --------------------------------------------------------------------------
  //
  //  Lifecycle
  //
  // --------------------------------------------------------------------------
  connectedCallback() {
    this.ancestors = getAncestors(this.el);
    this.scale = getElementProp(this.el, "scale", this.scale);
  }
  // --------------------------------------------------------------------------
  //
  //  Render Methods
  //
  // --------------------------------------------------------------------------
  render() {
    const { el, scale } = this;
    const depth = getDepth(el);
    return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
  }
  static get is() { return "calcite-combobox-item-group"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["combobox-item-group.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["combobox-item-group.css"]
    };
  }
  static get properties() {
    return {
      "ancestors": {
        "type": "unknown",
        "mutable": true,
        "complexType": {
          "original": "ComboboxChildElement[]",
          "resolved": "ComboboxChildElement[]",
          "references": {
            "ComboboxChildElement": {
              "location": "import",
              "path": "../combobox/interfaces"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`."
        }
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Specifies the title of the component."
        },
        "attribute": "label",
        "reflect": false
      }
    };
  }
  static get elementRef() { return "el"; }
}