@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
144 lines (143 loc) • 9.89 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 { createRef, ref } from "lit-html/directives/ref.js";
import { LitElement, createEvent, safeClassMap, nothing, setAttribute } from "@arcgis/lumina";
import { t as toAriaBoolean } from "../../chunks/dom.js";
import { c as componentFocusable, g as getIconScale } from "../../chunks/component.js";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { C as CSS } from "../../chunks/resources6.js";
import { css } from "@lit/reactive-element/css-tag.js";
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;flex-grow:1;align-items:center;outline-color:transparent}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3));text-align:start;outline-color:transparent}.container a{outline:none;position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3))}.dropdown-item-content{flex:1 1 auto;padding-block:.125rem}.dropdown-item-icon{position:relative;opacity:0;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .dropdown-item-icon,:host([scale=s]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-block:.5rem;padding-inline:.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .dropdown-item-icon,:host([scale=m]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:.625rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .dropdown-item-icon,:host([scale=l]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container{text-decoration-line:none;outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:hover:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2))}:host(:active:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3))}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{text-decoration-line:none;color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .dropdown-link,:host(:active:not([disabled])) .dropdown-link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .dropdown-link calcite-icon{color:var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host(:hover:not([disabled])) .dropdown-item-icon{color:var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .dropdown-item-icon{opacity:1}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
class DropdownItem extends LitElement {
constructor() {
super();
this.childLink = createRef();
this.disabled = false;
this.scale = "m";
this.selected = false;
this.selectionMode = "single";
this.calciteDropdownItemSelect = createEvent({ cancelable: false });
this.calciteInternalDropdownCloseRequest = createEvent({ cancelable: false });
this.calciteInternalDropdownItemKeyEvent = createEvent({ cancelable: false });
this.calciteInternalDropdownItemSelect = createEvent({ cancelable: false });
this.listen("click", this.onClick);
this.listen("keydown", this.keyDownHandler);
this.listenOn(document.body, "calciteInternalDropdownItemChange", this.updateActiveItemOnChange);
}
static {
this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], href: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], label: 1, rel: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, target: [3, {}, { reflect: true }] };
}
static {
this.styles = styles;
}
async setFocus() {
await componentFocusable(this);
this.el?.focus();
}
connectedCallback() {
super.connectedCallback();
this.initialize();
}
load() {
this.initialize();
}
updated() {
updateHostInteraction(this);
}
onClick() {
this.emitRequestedItem();
}
keyDownHandler(event) {
switch (event.key) {
case " ":
case "Enter":
this.emitRequestedItem();
if (this.href) {
this.childLink.value.click();
}
event.preventDefault();
break;
case "Escape":
this.calciteInternalDropdownCloseRequest.emit();
event.preventDefault();
break;
case "Tab":
this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
break;
case "ArrowUp":
case "ArrowDown":
case "Home":
case "End":
event.preventDefault();
this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
break;
}
}
updateActiveItemOnChange(event) {
const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
if (parentEmittedChange) {
this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
this.requestedDropdownItem = event.detail.requestedDropdownItem;
this.determineActiveItem();
}
event.stopPropagation();
}
initialize() {
this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
if (this.selectionMode === "none") {
this.selected = false;
}
}
determineActiveItem() {
switch (this.selectionMode) {
case "multiple":
if (this.el === this.requestedDropdownItem) {
this.selected = !this.selected;
}
break;
case "single":
if (this.el === this.requestedDropdownItem) {
this.selected = true;
} else if (this.requestedDropdownGroup === this.parentDropdownGroupEl) {
this.selected = false;
}
break;
case "none":
this.selected = false;
break;
}
}
emitRequestedItem() {
this.calciteDropdownItemSelect.emit();
this.calciteInternalDropdownItemSelect.emit({
requestedDropdownItem: this.el,
requestedDropdownGroup: this.parentDropdownGroupEl
});
}
render() {
const { href, selectionMode, label, iconFlipRtl } = this;
const iconStartEl = html`<calcite-icon class=${safeClassMap(CSS.iconStart)} .flipRtl=${iconFlipRtl === "start" || iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`;
const contentNode = html`<span class=${safeClassMap(CSS.itemContent)}><slot></slot></span>`;
const iconEndEl = html`<calcite-icon class=${safeClassMap(CSS.iconEnd)} .flipRtl=${iconFlipRtl === "end" || iconFlipRtl === "both"} .icon=${this.iconEnd} .scale=${getIconScale(this.scale)}></calcite-icon>`;
const slottedContent = this.iconStart && this.iconEnd ? [iconStartEl, contentNode, iconEndEl] : this.iconStart ? [iconStartEl, contentNode] : this.iconEnd ? [contentNode, iconEndEl] : contentNode;
const contentEl = !href ? slottedContent : html`<a .ariaLabel=${label} class=${safeClassMap(CSS.link)} href=${href ?? nothing} rel=${this.rel ?? nothing} tabindex=-1 target=${this.target ?? nothing} ${ref(this.childLink)}>${slottedContent}</a>`;
const itemRole = href ? null : selectionMode === "single" ? "menuitemradio" : selectionMode === "multiple" ? "menuitemcheckbox" : "menuitem";
const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
const { disabled } = this;
this.el.ariaChecked = itemAria;
this.el.ariaLabel = !href ? label : "";
this.el.role = itemRole;
setAttribute(this.el, "tabIndex", disabled ? -1 : 0);
return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({
[CSS.container]: true,
[CSS.containerNone]: selectionMode === "none"
})}>${selectionMode !== "none" ? html`<calcite-icon class=${safeClassMap(CSS.icon)} .icon=${selectionMode === "multiple" ? "check" : "bullet-point"} .scale=${getIconScale(this.scale)}></calcite-icon>` : null}${contentEl}</div>` });
}
}
customElement("calcite-dropdown-item", DropdownItem);
export {
DropdownItem
};