import { r as e, c as t, h as i, H as o, a } 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";

const s = ":host{display:grid;block-size:100%}.opacity-0{opacity:0}.gxi-hidden{display:none !important}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-style-regular);font-size:var(--font-size-body-m);font-family:var(--font-family-body);height:100%;display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.buttons-container{display:flex;gap:var(--spacing-gap-m)}.giu-static-pill-icon-and-text,.giu-static-pill{background-color:var(--elevation-background-color, var(--color-accent-surface-elevation-1));padding-inline:var(--spacing-padding-m);color:var(--color-text-neutral-default);font-size:var(--font-size-body-s);line-height:var(--line-height-relaxed);font-weight:var(--font-style-regular);border-radius:4px;min-block-size:25px;display:inline-grid;align-items:center;pointer-events:none;inline-size:max-content}.giu-static-pill-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--spacing-gap-m)}.tab-full-width-buttons::part(tab-list block-start),.tab-full-width-buttons::part(tab-list block-end){grid-auto-columns:1fr}.tab-full-width-buttons::part(tab block-start){justify-content:center}.tree-view::part(item__header){--icon__system_warning_warning--disabled:var(\n    --icon__system_warning_warning--enabled\n  )}.tabular-grid{--focus-outline-width:1px}ch-popover{background-color:var(--color-accent-surface-elevation-1);border:1px solid var(--color-border-surface-on-surface);border-radius:var(--border-radius-s);box-shadow:var(--shadow-elevation-2)}ch-popover>div{display:flex;flex-direction:column;gap:0;padding:var(--spacing-padding-m);max-block-size:300px;overflow-y:auto}.checkbox-item{display:flex;inline-size:100%;padding-block:var(--spacing-padding-xs);padding-inline:var(--spacing-padding-m);cursor:pointer;border-radius:var(--border-radius-s)}.checkbox-item:hover{background-color:var(--color-accent-item-selected)}.checkbox-item::part(checkbox){inline-size:100%}.checkbox-item::part(label){inline-size:100%;cursor:pointer;flex:1}.multi-select__button{display:flex;align-items:center;gap:var(--spacing-gap-s);overflow:hidden}.multi-select__chevron{flex-shrink:0;margin-inline-start:auto}.multi-select__placeholder{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multi-select__items{display:flex;flex-wrap:wrap;gap:var(--spacing-gap-xs);flex:1;align-items:center}.multi-select__item{display:inline-flex;align-items:center;gap:var(--spacing-gap-xs);padding:2px var(--spacing-padding-xs);background-color:var(--color-accent-item-pressed);border-radius:var(--border-radius-s)}.multi-select__item button{padding:0}.multi-select__caption{color:var(--color-text-neutral-on-disabled)}.multi-select__close{padding:0;margin:0}ch-checkbox.checkbox::part(label){font-weight:var(--font-style-regular);color:var(--color-text-neutral-default)}";

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

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

var c, d, p, h, u, m, g;

const f = [ "resets/box-sizing", "components/button", "components/icon", "components/checkbox", "utils/typography", "utils/spacing", "chameleon/scrollbar", "components/combo-box" ];

const b = n({
  category: "navigation",
  name: "chevron-down",
  colorType: "on-interactive"
});

const v = n({
  category: "system",
  name: "close",
  colorType: "on-interactive"
});

const x = class {
  constructor(o) {
    e(this, o);
    this.gxSelectionChange = t(this, "gxSelectionChange", 7);
    c.set(this, void 0);
    d.set(this, void 0);
    p.set(this, (() => {
      if (!this.disabled) {
        this.showPopover = !this.showPopover;
      }
    }));
    h.set(this, ((e, t) => {
      const i = t.target;
      const o = i.value === i.checkedValue;
      let a;
      if (o) {
        a = [ ...this.value, e ];
      } else {
        a = this.value.filter((t => t !== e));
      }
      this.gxSelectionChange.emit(a);
    }));
    u.set(this, (e => {
      const t = this.value.filter((t => t !== e));
      this.gxSelectionChange.emit(t);
    }));
    m.set(this, (e => this.value.includes(e)));
    g.set(this, (() => {
      if (this.value.length === 0) {
        return i("span", {
          class: "multi-select__placeholder body-italic-m"
        }, this.placeholder);
      }
      const e = this.model.filter((e => this.value.includes(e.value)));
      return i("div", {
        class: "multi-select__items"
      }, e.map((e => i("div", {
        class: "multi-select__item",
        key: e.value
      }, i("span", {
        class: "multi-select__caption body-regular-s"
      }, e.caption), i("button", {
        type: "button",
        class: "button-tertiary button-icon-only multi-select__close",
        onClick: t => {
          t.stopPropagation();
          t.preventDefault();
          r(this, u, "f").call(this, e.value);
        },
        "aria-label": `Remove ${e.caption}`
      }, i("ch-image", {
        class: "icon-xs",
        src: v,
        type: "mask"
      }))))));
    }));
    this.showPopover = false;
    this.model = [];
    this.value = [];
    this.placeholder = "Select options";
    this.disabled = false;
  }
  componentDidLoad() {
    if (r(this, d, "f") && r(this, c, "f")) {
      r(this, d, "f").actionElement = r(this, c, "f");
    }
  }
  render() {
    return i(o, null, i("ch-theme", {
      model: f
    }), i("button", {
      class: "combo-box multi-select__button",
      type: "button",
      ref: e => l(this, c, e, "f"),
      onClick: r(this, p, "f"),
      disabled: this.disabled
    }, r(this, g, "f").call(this), i("ch-image", {
      class: "icon-m multi-select__chevron",
      src: b,
      type: "mask"
    })), i("ch-popover", {
      ref: e => l(this, d, e, "f"),
      closeOnClickOutside: true,
      show: this.showPopover,
      blockAlign: "outside-end",
      inlineAlign: "inside-end",
      inlineSizeMatch: "action-element",
      class: "scrollable"
    }, i("div", null, this.model.map((e => i("ch-checkbox", {
      class: "checkbox checkbox-item",
      caption: e.caption,
      checkedValue: "true",
      value: r(this, m, "f").call(this, e.value) ? "true" : "false",
      startImgSrc: e.startImgSrc,
      onInput: t => r(this, h, "f").call(this, e.value, t)
    }))))));
  }
  get el() {
    return a(this);
  }
};

c = new WeakMap, d = new WeakMap, p = new WeakMap, h = new WeakMap, u = new WeakMap, 
m = new WeakMap, g = new WeakMap;

x.style = s;

export { x as gx_ide_multi_select };
//# sourceMappingURL=p-0745a565.entry.js.map