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

Web Components for Esri's Calcite Design System.

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, safeClassMap, safeStyleMap, nothing } from "@arcgis/lumina";
import { g as guid } from "../../chunks/guid.js";
import { c as getAncestors, d as getDepth } from "../../chunks/utils2.js";
const CSS = {
  firstTitle: "first-title",
  list: "list",
  label: "label",
  separator: "separator",
  title: "title",
  scale: (scale) => `scale--${scale}`
};
const styles = css`.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-sm);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-xxs)}.scale--s .first-title{padding-block-start:var(--calcite-spacing-sm)}.scale--s .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-md);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-xs)}.scale--m .first-title{padding-block-start:var(--calcite-spacing-md)}.scale--m .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-lg);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-sm-plus)}.scale--l .first-title{padding-block-start:var(--calcite-spacing-xl)}.scale--l .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}:host,.list{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.separator{block-size:var(--calcite-spacing-px);background-color:var(--calcite-combobox-item-group-border-color, var(--calcite-color-border-3))}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%}.title{--calcite-combobox-item-indent-value: calc( var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier) );border:0 solid;display:block;flex:1 1 0%;font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-vertical-spacing-unit);padding-inline-start:calc(var(--calcite-combobox-item-indent-value) + var(--calcite-combobox-item-horizontal-spacing-unit));padding-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit);color:var(--calcite-combobox-item-group-text-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}:host([item-hidden]){display:none}`;
class ComboboxItemGroup extends LitElement {
  constructor() {
    super(...arguments);
    this.guid = guid();
    this.afterEmptyGroup = false;
    this.position = 0;
    this.scale = "m";
    this.itemHidden = false;
  }
  static {
    this.properties = { afterEmptyGroup: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], label: 1, position: [9, {}, { type: Number }], scale: 1, itemHidden: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  connectedCallback() {
    super.connectedCallback();
    this.ancestors = getAncestors(this.el);
  }
  render() {
    const { el, scale } = this;
    const depth = getDepth(el);
    const comboboxSeparator = this.position > 0 ? html`<div class=${safeClassMap(CSS.separator)} role=separator style=${safeStyleMap({ "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` })}></div>` : null;
    return html`<ul aria-labelledby=${this.guid ?? nothing} class=${safeClassMap({ [CSS.list]: true, [CSS.scale(scale)]: true })} role=group>${comboboxSeparator}<li class=${safeClassMap({ [CSS.label]: true })} id=${this.guid ?? nothing} role=presentation style=${safeStyleMap({ "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` })}><span class=${safeClassMap({ [CSS.title]: true, [CSS.firstTitle]: this.position === 0 })}>${this.label}</span></li><slot></slot></ul>`;
  }
}
customElement("calcite-combobox-item-group", ComboboxItemGroup);
export {
  ComboboxItemGroup
};