@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
73 lines (72 loc) • 6 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, createEvent, safeClassMap } from "@arcgis/lumina";
import { g as getIconScale } from "../../chunks/component.js";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { g as guid } from "../../chunks/guid.js";
import { h as highlightText } from "../../chunks/text.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
container: "container",
containerActive: "container--active",
contentCenter: "content-center",
description: "description",
heading: "heading",
iconEnd: "icon-end",
iconStart: "icon-start",
scale: (scale) => `scale--${scale}`
};
const SLOTS = {
contentEnd: "content-end",
contentStart: "content-start"
};
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}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: .625rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);word-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{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))))}.content-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}: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 AutocompleteItem extends LitElement {
constructor() {
super(...arguments);
this.active = false;
this.disabled = false;
this.guid = `autocomplete-item-${guid()}`;
this.scale = "m";
this.calciteInternalAutocompleteItemSelect = createEvent({ cancelable: false });
}
static {
this.properties = { active: [5, {}, { type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], guid: 1, heading: 1, iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], inputValueMatchPattern: [2, {}, { reflect: true, attribute: false }], label: 1, scale: 1, value: 1 };
}
static {
this.styles = styles;
}
updated() {
updateHostInteraction(this);
}
handleClick(event) {
event.preventDefault();
this.calciteInternalAutocompleteItemSelect.emit();
}
render() {
const { active, description, heading, disabled, inputValueMatchPattern } = this;
return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({
[CSS.container]: true,
[CSS.containerActive]: active && !disabled,
[CSS.scale(this.scale)]: true
})} @click=${this.handleClick}>${this.renderIcon("start")}<slot name=${SLOTS.contentStart}></slot><div class=${safeClassMap(CSS.contentCenter)}><div class=${safeClassMap(CSS.heading)}>${highlightText({
text: heading,
pattern: inputValueMatchPattern
})}</div><div class=${safeClassMap(CSS.description)}>${highlightText({
text: description,
pattern: inputValueMatchPattern
})}</div></div><slot name=${SLOTS.contentEnd}></slot>${this.renderIcon("end")}</div>` });
}
renderIcon(position) {
const { iconFlipRtl } = this;
const icon = position === "start" ? this.iconStart : this.iconEnd;
return icon ? html`<calcite-icon class=${safeClassMap(position === "start" ? CSS.iconStart : CSS.iconEnd)} .flipRtl=${iconFlipRtl === position || iconFlipRtl === "both"} .icon=${icon} .scale=${getIconScale(this.scale)}></calcite-icon>` : null;
}
}
customElement("calcite-autocomplete-item", AutocompleteItem);
export {
AutocompleteItem
};