import { r as t, h as e, H as s, a as i } from "./p-9b9ccd0c.js";

import { g as n } from "./p-d42e842b.js";

import "./p-6534555e.js";

import "lit";

import "lit/directives/when.js";

import "lit/directives/if-defined.js";

import { L as o } from "./p-311eedf3.js";

const mapCategoryToListItemGroup = t => {
  const e = {
    caption: t.name,
    id: t.name,
    type: "group",
    expanded: true,
    expandable: true,
    items: t.types.map((t => ({
      caption: t.name,
      id: t.name,
      selected: t.selected,
      additionalInformation: {
        "stretch-start": {
          center: [ {
            imgSrc: t.icon
          } ]
        }
      },
      type: "actionable"
    })))
  };
  return e;
};

const mapDataTypesToList = t => t.map(((t, e) => ({
  caption: t.name,
  id: t.name,
  selected: t.selected,
  additionalInformation: {
    "stretch-start": {
      center: [ {
        imgSrc: t.icon || undefined
      } ]
    }
  },
  type: "actionable",
  order: e
})));

const a = "button.button-secondary{border-color:var(--color-border-neutral-default)}:host{position:relative;display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr max-content;--control-border-width:1px;--control-border-radius:4px}.main{display:contents}.selected-category{margin:0;text-transform:capitalize;margin-inline-start:16px;white-space:nowrap}.footer{overflow:auto;padding:var(--spacing-padding-m)}.list-box::part(item__action),.list-box::part(group__action){font-size:var(--font-size-body-s) !important}.pseudo-icon{inline-size:var(--icon-m);block-size:var(--icon-m);display:flex;align-items:center;justify-content:center}";

var r = undefined && undefined.__classPrivateFieldGet || function(t, e, s, i) {
  if (s === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
  if (typeof e === "function" ? t !== e || !i : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return s === "m" ? i : s === "a" ? i.call(t) : i ? i.value : e.get(t);
};

var c = undefined && undefined.__classPrivateFieldSet || function(t, e, s, i, n) {
  if (i === "m") throw new TypeError("Private method is not writable");
  if (i === "a" && !n) throw new TypeError("Private accessor was defined without a setter");
  if (typeof e === "function" ? t !== e || !n : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return i === "a" ? n.call(t, s) : n ? n.value = s : e.set(t, s), s;
};

var h, l, f, d, p, u, w, m, y, b, g, k, v, M, T, W, x;

const C = [ "resets/box-sizing", "components/list-box", "utils/form--full", "utils/typography", "utils/layout", "utils/spacing", "chameleon/scrollbar" ];

const I = "ArrowUp";

const $ = "ArrowDown";

const j = "Enter";

const E = "Tab";

const _ = "all";

const z = "recenttly-used";

const D = n({
  category: "system",
  name: "time",
  colorType: "primary"
});

const A = class {
  constructor(s) {
    t(this, s);
    h.set(this, void 0);
    l.set(this, false);
    f.set(this, new Map);
    d.set(this, new Map);
    p.set(this, new Map);
    u.set(this, null);
    w.set(this, {
      // For setting focus
      categoryId: undefined,
      dataTypeId: undefined
    });
    m.set(this, false);
    y.set(this, void 0);
    b.set(this, (t => {
      const e = t.find((t => t.tagName === "CH-ACTION-LIST-ITEM"));
      if (e) {
        const t = e.id;
        const s = r(this, p, "f").get(t);
        this.dataTypeSelectedCallback(s);
      }
    }));
    g.set(this, (t => {
      const e = t.key;
      const s = t.composedPath();
      if (e === I || e === $) {
        c(this, u, e, "f");
        if (e === I) {
          // Check if this is the first group. IF it is, let the host know,
          // so it can close the dialog.
          const t = s.find((t => t.tagName === "CH-ACTION-LIST-ITEM"));
          if (t !== undefined) {
            return;
          }
          // This is a ch-action-list-group
                    const e = s.find((t => t.tagName === "CH-ACTION-LIST-GROUP"));
          const i = e.id;
          const n = r(this, y, "f").shadowRoot.firstElementChild.id;
          if (i === n) {
            this.arrowUpOnFirstElement();
          }
        }
      } else if (e === j) {
        r(this, b, "f").call(this, s);
      } else if (e === E) {
        t.stopPropagation();
      }
    }));
    k.set(this, (t => {
      if (r(this, u, "f")) ; else if (t.detail === 0) {
        // ignore keyboard Enter (Enter happens by default on buttons on onClick)
        return;
      } else {
        const e = t.composedPath();
        r(this, b, "f").call(this, e);
      }
      c(this, u, null, "f");
    }));
    v.set(this, (() => {
      if (!r(this, l, "f")) {
        const t = [];
        let e = 1;
        const s = r(this, f, "f").size;
        for (const i of r(this, f, "f").keys()) {
          t.push(r(this, f, "f").get(i));
          if (e !== s) {
            t.push({
              type: "separator"
            });
          }
          e++;
        }
        this.categoriesListBoxModel = t;
        c(this, l, true, "f");
        this.selectedCategory = _;
      }
    }));
    M.set(this, (() => {
      c(this, l, false, "f");
      this.categoriesListBoxModel = this.recentlyUsedActionListModel;
      this.selectedCategory = z;
    }));
    this.selectedCategoryHandler = t => {
      this.selectedCategory = t.currentTarget.dataset.name;
      const e = [ r(this, f, "f").get(this.selectedCategory) ];
      this.categoriesListBoxModel = e;
      c(this, l, false, "f");
    };
    T.set(this, (t => {
      // Prevents bubbling, which causes this component to close, due to how the IDE handles Tab event
      // in a parent element.
      if (t.key === E || t.key === j) {
        t.stopPropagation();
      }
    }));
    W.set(this, (() => {
      const t = this.selectedCategory === z ? "button-secondary" : "button-tertiary";
      const s = this.selectedCategory === _ ? "button-secondary" : "button-tertiary";
      let i = this.selectedCategory;
      if (this.selectedCategory === z) {
        i = r(this, h, "f").fixedTypes.recentlyUsed;
      } else if (this.selectedCategory === _) {
        i = r(this, h, "f").fixedTypes.all;
      } else {
        i = this.selectedCategory;
      }
      return e("footer", {
        class: "footer dialog-footer dialog-footer-start scrollable\n      "
      }, e("div", {
        class: "buttons-spacer"
      }, this.recentlyUsed && this.recentlyUsed.length > 0 && e("button", {
        class: `button-icon-only ${t}`,
        "aria-label": `${r(this, h, "f").select} ${r(this, h, "f").fixedTypes.recentlyUsed}`,
        title: `${r(this, h, "f").select} ${r(this, h, "f").fixedTypes.recentlyUsed}`,
        onClick: r(this, M, "f"),
        onKeyDown: r(this, T, "f")
      }, e("ch-image", {
        class: "icon-m",
        src: D
      })), e("button", {
        class: `button-icon-only ${s}`,
        onClick: r(this, v, "f"),
        onKeyDown: r(this, T, "f"),
        "aria-label": `${r(this, h, "f").select} ${r(this, h, "f").fixedTypes.all}`,
        title: `${r(this, h, "f").select} ${r(this, h, "f").fixedTypes.all}`
      }, e("span", {
        class: "pseudo-icon"
      }, "[*]")), this.categories.map((t => {
        const s = t.name === this.selectedCategory ? "button-secondary" : "button-tertiary";
        return e("button", {
          class: `button-icon-only ${s}`,
          "aria-label": t.name,
          title: t.name,
          onClick: this.selectedCategoryHandler,
          onKeyDown: r(this, T, "f"),
          "data-name": t.name
        }, e("ch-image", {
          class: "icon-m",
          src: t.icon
        }));
      }))), e("p", {
        class: "body-regular-s selected-category"
      }, i));
    }));
    x.set(this, (async () => {
      if (r(this, m, "f")) {
        return;
      }
      let t;
      setTimeout((() => {
        // setTimeout as a WA, since the list-box elements are not rendered/read immediatelly
        if (this.focusType === "selected" && r(this, w, "f").categoryId && r(this, w, "f").dataTypeId) {
          // set focus on the selected element
          const e = r(this, y, "f").shadowRoot.getElementById(r(this, w, "f").dataTypeId);
          if (e) {
            t = e;
          }
        } else {
          // set focus of the first element
          const e = r(this, y, "f").shadowRoot.firstElementChild;
          const s = e.shadowRoot.firstElementChild;
          t = s;
        }
        t && t.focus();
        c(this, m, true, "f");
      }), 150);
    }));
    this.categoriesListBoxModel = [];
    this.selectedCategory = undefined;
    this.recentlyUsedActionListModel = [];
    this.loading = true;
    this.categoriesJustChanged = false;
    this.actionListDidRender = false;
    this.categories = undefined;
    this.dataTypeSelectedCallback = undefined;
    this.arrowUpOnFirstElement = undefined;
    this.focusType = "first-element";
    this.recentlyUsed = [];
  }
  categoriesChanged(t) {
    if (!(t === null || t === void 0 ? void 0 : t.length)) {
      return;
    }
    r(this, f, "f").clear();
    t.forEach((t => {
      const e = mapCategoryToListItemGroup(t);
      r(this, f, "f").set(t.name, e);
      t.types.forEach((e => {
        const s = e.selected;
        if (s) {
          // For setting focus
          r(this, w, "f").categoryId = t.name;
          r(this, w, "f").dataTypeId = e.name;
        }
        r(this, d, "f").set(e.name, t.id);
        r(this, p, "f").set(e.name, {
          id: t.id,
          name: e.name,
          icon: e.icon,
          selected: e.selected
        });
      }));
    }));
    this.loading = false;
    r(this, v, "f").call(this);
    this.categoriesJustChanged = true;
  }
  recentlyUsedChanged(t) {
    this.recentlyUsedActionListModel = null;
    this.recentlyUsedActionListModel = mapDataTypesToList(t);
  }
  async componentWillLoad() {
    c(this, h, await o.getComponentStrings(this.el), "f");
    // initialize models
        this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);
  }
  render() {
    return e(s, {
      class: "widget"
    }, e("ch-theme", {
      model: C
    }), this.loading ? e("gx-ide-loader", {
      loaderTitle: r(this, h, "f").loader.title,
      description: r(this, h, "f").loader.description,
      show: true
    }) : e("section", {
      class: "main"
    }, e("ch-action-list-render", {
      ref: async t => {
        c(this, y, t, "f");
        r(this, x, "f").call(this);
      },
      class: "list-box",
      model: this.categoriesListBoxModel,
      selection: "single",
      onKeyDown: r(this, g, "f"),
      onClick: r(this, k, "f")
    }), r(this, W, "f").call(this)));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/data-type-selector" ];
  }
  get el() {
    return i(this);
  }
  static get watchers() {
    return {
      categories: [ "categoriesChanged" ],
      recentlyUsed: [ "recentlyUsedChanged" ]
    };
  }
};

h = new WeakMap, l = new WeakMap, f = new WeakMap, d = new WeakMap, p = new WeakMap, 
u = new WeakMap, w = new WeakMap, m = new WeakMap, y = new WeakMap, b = new WeakMap, 
g = new WeakMap, k = new WeakMap, v = new WeakMap, M = new WeakMap, T = new WeakMap, 
W = new WeakMap, x = new WeakMap;

A.style = a;

export { A as gx_ide_data_type_selector };
//# sourceMappingURL=p-ebb56b65.entry.js.map