tiny-forge/web/.svelte-kit/output/server/chunks/EntityPicker.js

import { a as attr, b as attr_class, c as clsx, e as escape_html, s as store_get, f as ensure_array_like, u as unsubscribe_stores, k as bind_props, i as derived } from "./index.js";
import { I as IconX } from "./IconX.js";
import { t } from "./index2.js";
/* empty css                                           */
function html(value) {
  var html2 = String(value ?? "");
  var open = "<!---->";
  return open + html2 + "<!---->";
}
function IconSearch($$renderer, $$props) {
  const { size = 20, class: c = "" } = $$props;
  $$renderer.push(`<svg xmlns="http://www.w3.org/2000/svg"${attr("width", size)}${attr("height", size)} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"${attr_class(clsx(c))} aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>`);
}
function EntityPicker($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    var $$store_subs;
    const {
      open = void 0,
      items,
      current = "",
      placeholder,
      title = "",
      onselect,
      onclose
    } = $$props;
    let query = "";
    let highlightIndex = 0;
    const filtered = derived(() => {
      const q = query.toLowerCase().trim();
      if (!q) return items;
      return items.filter((item) => item.label.toLowerCase().includes(q) || (item.description?.toLowerCase().includes(q) ?? false));
    });
    const grouped = derived(() => {
      const groups = [];
      const seen = /* @__PURE__ */ new Map();
      for (const item of filtered()) {
        const groupName = item.group ?? "";
        const idx = seen.get(groupName);
        if (idx !== void 0) {
          groups[idx].items.push(item);
        } else {
          seen.set(groupName, groups.length);
          groups.push({ name: groupName, items: [item] });
        }
      }
      return groups;
    });
    const flatFiltered = derived(filtered);
    function flatIndexOf(groupIdx, itemIdx) {
      let index = 0;
      for (let g = 0; g < groupIdx; g++) {
        index += grouped()[g].items.length;
      }
      return index + itemIdx;
    }
    if (open) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<div class="entity-picker-backdrop svelte-1bxz98v"></div>  <div class="entity-picker-container svelte-1bxz98v"><div class="entity-picker-modal svelte-1bxz98v" role="dialog" aria-modal="true"${attr("aria-label", title)}>`);
      if (title) {
        $$renderer2.push("<!--[0-->");
        $$renderer2.push(`<div class="entity-picker-header svelte-1bxz98v"><h2 class="entity-picker-title svelte-1bxz98v">${escape_html(title)}</h2> <button type="button" class="entity-picker-close svelte-1bxz98v" aria-label="Close">`);
        IconX($$renderer2, { size: 18 });
        $$renderer2.push(`<!----></button></div>`);
      } else {
        $$renderer2.push("<!--[-1-->");
      }
      $$renderer2.push(`<!--]--> <div class="entity-picker-search svelte-1bxz98v">`);
      IconSearch($$renderer2, { size: 16, class: "entity-picker-search-icon" });
      $$renderer2.push(`<!----> <input${attr("value", query)} type="text" class="entity-picker-search-input svelte-1bxz98v"${attr("placeholder", placeholder ?? store_get($$store_subs ??= {}, "$t", t)("entityPicker.search"))} autocomplete="off" spellcheck="false"/> `);
      if (!title) {
        $$renderer2.push("<!--[0-->");
        $$renderer2.push(`<button type="button" class="entity-picker-close-inline svelte-1bxz98v" aria-label="Close">`);
        IconX($$renderer2, { size: 16 });
        $$renderer2.push(`<!----></button>`);
      } else {
        $$renderer2.push("<!--[-1-->");
      }
      $$renderer2.push(`<!--]--></div> <div class="entity-picker-list svelte-1bxz98v">`);
      if (flatFiltered().length === 0) {
        $$renderer2.push("<!--[0-->");
        $$renderer2.push(`<div class="entity-picker-empty svelte-1bxz98v">${escape_html(store_get($$store_subs ??= {}, "$t", t)("entityPicker.noResults"))}</div>`);
      } else {
        $$renderer2.push("<!--[-1-->");
        $$renderer2.push(`<!--[-->`);
        const each_array = ensure_array_like(grouped());
        for (let gIdx = 0, $$length = each_array.length; gIdx < $$length; gIdx++) {
          let group = each_array[gIdx];
          if (group.name) {
            $$renderer2.push("<!--[0-->");
            $$renderer2.push(`<div class="entity-picker-group-header svelte-1bxz98v">${escape_html(group.name)}</div>`);
          } else {
            $$renderer2.push("<!--[-1-->");
          }
          $$renderer2.push(`<!--]--> <!--[-->`);
          const each_array_1 = ensure_array_like(group.items);
          for (let iIdx = 0, $$length2 = each_array_1.length; iIdx < $$length2; iIdx++) {
            let item = each_array_1[iIdx];
            const flatIdx = flatIndexOf(gIdx, iIdx);
            const isHighlighted = flatIdx === highlightIndex;
            const isCurrent = item.value === current;
            $$renderer2.push(`<button type="button"${attr_class("entity-picker-item svelte-1bxz98v", void 0, {
              "entity-picker-item--highlighted": isHighlighted && !item.disabled,
              "entity-picker-item--current": isCurrent,
              "entity-picker-item--disabled": item.disabled
            })}${attr("data-highlighted", isHighlighted)}${attr("disabled", item.disabled, true)}>`);
            if (item.icon) {
              $$renderer2.push("<!--[0-->");
              $$renderer2.push(`<span class="entity-picker-item-icon svelte-1bxz98v">${html(item.icon)}</span>`);
            } else {
              $$renderer2.push("<!--[-1-->");
            }
            $$renderer2.push(`<!--]--> <span class="entity-picker-item-content svelte-1bxz98v"><span class="entity-picker-item-label svelte-1bxz98v">${escape_html(item.label)}</span> `);
            if (item.disabledHint) {
              $$renderer2.push("<!--[0-->");
              $$renderer2.push(`<span class="entity-picker-item-hint svelte-1bxz98v">${escape_html(item.disabledHint)}</span>`);
            } else if (item.description) {
              $$renderer2.push("<!--[1-->");
              $$renderer2.push(`<span class="entity-picker-item-description svelte-1bxz98v">${escape_html(item.description)}</span>`);
            } else {
              $$renderer2.push("<!--[-1-->");
            }
            $$renderer2.push(`<!--]--></span></button>`);
          }
          $$renderer2.push(`<!--]-->`);
        }
        $$renderer2.push(`<!--]-->`);
      }
      $$renderer2.push(`<!--]--></div></div></div>`);
    } else {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]-->`);
    if ($$store_subs) unsubscribe_stores($$store_subs);
    bind_props($$props, { open });
  });
}
export {
  EntityPicker as E,
  IconSearch as I
};