@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
73 lines (72 loc) • 3.79 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";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { c as createObserver } from "../../chunks/observers.js";
import { C as CSS$1 } from "../../chunks/resources6.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
title: "dropdown-title",
separator: "dropdown-separator"
};
const styles = css`:host{display:block}.container{text-align:start}.dropdown-title{margin-block-end:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-block-end-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-bold);border-color:var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));color:var(--calcite-dropdown-group-title-text-color, var(--calcite-color-text-2))}.dropdown-separator{display:block;block-size:1px;background-color:var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3))}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .dropdown-title{padding:.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .dropdown-title{padding:.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .dropdown-title{padding:1rem}:host([hidden]){display:none}[hidden]{display:none}`;
class DropdownGroup extends LitElement {
constructor() {
super();
this.mutationObserver = createObserver("mutation", () => this.updateItems());
this.position = -1;
this.scale = "m";
this.selectionMode = "single";
this.calciteInternalDropdownItemChange = createEvent({ cancelable: false });
this.listen("calciteInternalDropdownItemSelect", this.updateActiveItemOnChange);
}
static {
this.properties = { groupTitle: [3, {}, { reflect: true }], position: [9, {}, { type: Number }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
}
static {
this.shadowRootOptions = { mode: "open", delegatesFocus: true };
}
static {
this.styles = styles;
}
connectedCallback() {
super.connectedCallback();
this.updateItems();
this.mutationObserver?.observe(this.el, { childList: true });
}
willUpdate(changes) {
if (changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "single")) {
this.updateItems();
}
}
disconnectedCallback() {
super.disconnectedCallback();
this.mutationObserver?.disconnect();
}
updateActiveItemOnChange(event) {
this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
this.requestedDropdownItem = event.detail.requestedDropdownItem;
this.calciteInternalDropdownItemChange.emit({
requestedDropdownGroup: this.requestedDropdownGroup,
requestedDropdownItem: this.requestedDropdownItem
});
}
updateItems() {
Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach((item) => item.selectionMode = this.selectionMode);
}
render() {
const groupTitle = this.groupTitle ? html`<span aria-hidden=true class=${safeClassMap(CSS.title)}>${this.groupTitle}</span>` : null;
const dropdownSeparator = this.position > 0 ? html`<div class=${safeClassMap(CSS.separator)} role=separator></div>` : null;
this.el.ariaLabel = this.groupTitle;
this.el.role = "group";
return html`<div class=${safeClassMap({
[CSS$1.container]: true
})}>${dropdownSeparator}${groupTitle}<slot></slot></div>`;
}
}
customElement("calcite-dropdown-group", DropdownGroup);
export {
DropdownGroup
};