/* 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, createEvent, safeClassMap } from "@arcgis/lumina";
import { g as getIconScale } from "../../chunks/component.js";
import { g as guid } from "../../chunks/guid.js";
import { h as highlightText } from "../../chunks/text.js";
import { u as useInteractive } from "../../chunks/useInteractive.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 idPrefix = "autocomplete-item";
const IDS = {
  host: (id) => `${idPrefix}-${id}`
};
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-relative-sm);line-height:var(--calcite-font-line-height-sm);--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-relative-base);line-height:var(--calcite-font-line-height-base);--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-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: var(--calcite-space-sm-plus);--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([selected]) .container{color:var(--calcite-color-text-1);background-color:var(--calcite-color-surface-highlight)}:host([selected]) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}: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:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(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.interactiveContainer = useInteractive(this);
    this.active = false;
    this.disabled = false;
    this.guid = IDS.host(guid());
    this.scale = "m";
    this.selected = false;
    this.calciteAutocompleteItemSelect = createEvent({ cancelable: false });
  }
  static {
    this.properties = { active: [5, {}, { type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], guid: 1, heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], inputValueMatchPattern: [3, {}, { reflect: true }], label: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], value: 1 };
  }
  static {
    this.styles = styles;
  }
  toggleSelection() {
    this.selected = !this.selected;
    this.calciteAutocompleteItemSelect.emit();
  }
  handleClick(event) {
    event.preventDefault();
    if (this.disabled) {
      return;
    }
    this.toggleSelection();
  }
  render() {
    const { active, description, heading, disabled, inputValueMatchPattern } = this;
    return this.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
};
