@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
44 lines (43 loc) • 3.16 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit-html";
import { LitElement, nothing, safeClassMap, safeStyleMap } from "@arcgis/lumina";
import { g as guid } from "../../chunks/guid.js";
import { g as getAncestors, a as getDepth } from "../../chunks/utils3.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
list: "list",
label: "label",
title: "title"
};
const styles = css`.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit: .5rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit: .75rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit: 1rem}:host,.list{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.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-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier) );border:0 solid;display:block;flex:1 1 0%;border-block-end-width:1px;font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;padding:var(--calcite-combobox-item-spacing-unit);margin-inline-start:var(--calcite-combobox-item-indent-value);color:var(--calcite-combobox-item-group-text-color, var(--calcite-color-text-2));border-block-end-color:var(--calcite-combobox-item-group-border-color, var(--calcite-color-border-3))}::slotted(calcite-combobox-item-group:not([after-empty-group])){padding-block-start:var(--calcite-combobox-item-spacing-unit)}: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.scale = "m";
this.itemHidden = false;
}
static {
this.properties = { afterEmptyGroup: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], label: 1, 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);
return html`<ul aria-labelledby=${this.guid ?? nothing} class=${safeClassMap({ [CSS.list]: true, [`scale--${scale}`]: true })} role=group><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)}>${this.label}</span></li><slot></slot></ul>`;
}
}
customElement("calcite-combobox-item-group", ComboboxItemGroup);
export {
ComboboxItemGroup
};