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

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

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

import "lit";

import "lit/directives/when.js";

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

const a = ':host{display:block}.file-item{display:grid;column-gap:var(--spacing-gap-l);row-gap:var(--spacing-gap-s);align-items:center;border-radius:var(--border-radius-s)}.file-item--without-actions{grid-template-columns:max-content 1fr;grid-template-areas:"icon name"}.file-item--with-actions{grid-template-columns:max-content 1fr max-content;grid-template-areas:"icon name actions"}.file-item__icon{display:flex;align-items:center;grid-area:icon;padding-block:calc(32px - var(--ch-image-size))}.file-item__name{grid-area:name;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-inline-size:0}.file-item__name ch-edit{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-item__name .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-item__actions{grid-area:actions;display:flex}.file-item__cancel-upload{transform:translateX(7px)}.file-item__progress-container{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--spacing-gap-xs);border:2px dashed var(--color-border-neutral-default);border-radius:var(--border-radius-m);padding:var(--spacing-padding-xxs) var(--spacing-padding-l) var(--spacing-padding-m) var(--spacing-padding-l)}.file-item__progress-header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-gap-l)}.file-item__uploading-text{color:var(--color-text-neutral-disabled);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-inline-size:calc(100% - 40px)}.file-item__progress-bar progress{block-size:8px;line-height:0;border:none;border-radius:var(--border-radius-s);overflow:hidden}.file-item__progress-bar progress::-webkit-progress-bar{background-color:transparent}.file-item__progress-bar progress::-webkit-progress-value{background-color:var(--color-accent-primary-default)}.file-item__progress-bar progress::-moz-progress-bar{background-color:var(--color-accent-primary-default)}';

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

var l, r, n, c, d;

const p = s({
  category: "gemini-tools",
  name: "file",
  colorType: "primary"
});

const m = s({
  category: "gemini-tools",
  name: "edit",
  colorType: "primary"
});

const h = s({
  category: "gemini-tools",
  name: "delete",
  colorType: "primary"
});

const f = s({
  category: "gemini-tools",
  name: "close",
  colorType: "primary"
});

const u = [ "resets/box-sizing", "components/button", "components/icon", "components/edit", "utils/typography", "utils/spacing", "utils/form", "utils/layout", "utils/elevation" ];

const g = class {
  constructor(t) {
    i(this, t);
    this.fileNameChange = e(this, "fileNameChange", 7);
    this.fileDelete = e(this, "fileDelete", 7);
    this.fileCancel = e(this, "fileCancel", 7);
    l.set(this, (i => {
      const e = i.detail;
      if (e && e !== this.currentName) {
        this.currentName = e;
        this.fileNameChange.emit({
          id: this.file.id,
          name: e
        });
      }
    }));
    r.set(this, (() => {
      this.isEditing = false;
    }));
    /** Handles file deletion */    n.set(this, (() => {
      this.fileDelete.emit(this.file.id);
    }));
    /** Handles upload cancellation */    c.set(this, (i => {
      i.preventDefault();
      this.fileCancel.emit(this.file.id);
    }));
    /** Starts file name editing */    d.set(this, (() => {
      if (this.editable) {
        this.isEditing = true;
      }
    }));
    this.file = undefined;
    this.editable = false;
    this.componentLocale = undefined;
    this.fileDeletedCallback = undefined;
    this.fileDeletionErrorCallback = undefined;
    this.isEditing = false;
    this.currentName = undefined;
  }
  /** Updates current name when file prop changes */  handleFileChange(i) {
    this.currentName = i.name;
  }
  componentWillLoad() {
    this.currentName = this.file.name;
  }
  render() {
    var i, e, s, a, g, v, b, _, y, w, x, k, C;
    const j = !this.file.pending;
    const z = this.file.pending;
    const N = "progress-label-" + this.file.id;
    let T;
    if (this.file.pending) {
      T = ((a = (s = (e = (i = this.componentLocale) === null || i === void 0 ? void 0 : i.fileItem) === null || e === void 0 ? void 0 : e.uploadingAriaLabel) === null || s === void 0 ? void 0 : s.replace("{fileName}", this.currentName)) === null || a === void 0 ? void 0 : a.replace("{fileProgress}", this.file.progress.toString())) || this.currentName;
    } else if (this.file.remoteId) {
      T = ((b = (v = (g = this.componentLocale) === null || g === void 0 ? void 0 : g.fileItem) === null || v === void 0 ? void 0 : v.uploadedSuccessfullyAriaLabel) === null || b === void 0 ? void 0 : b.replace("{fileName}", this.currentName)) || this.currentName;
    } else {
      T = this.currentName;
    }
    return t("li", {
      class: {
        "file-item": true,
        "file-item--without-actions": !j,
        "file-item--with-actions": j
      },
      "aria-label": T
    }, t("ch-theme", {
      model: u
    }), t("div", {
      class: "file-item__icon"
    }, t("ch-image", {
      disabled: !this.file.pending,
      src: p,
      class: "icon-m"
    })), t("div", {
      class: "file-item__name"
    }, this.isEditing ? t("ch-edit", {
      accessibleName: (w = (y = (_ = this.componentLocale) === null || _ === void 0 ? void 0 : _.fileItem) === null || y === void 0 ? void 0 : y.editNamePlaceholderAriaLabel) === null || w === void 0 ? void 0 : w.replace("{fileName}", this.currentName),
      value: this.currentName,
      autoFocus: true,
      onInput: o(this, l, "f"),
      onBlur: o(this, r, "f"),
      class: "input",
      id: N
    }) : t("span", {
      class: "label",
      id: N
    }, this.currentName)), j ? t("div", {
      class: "file-item__actions"
    }, !this.file.pending && this.editable && t("button", {
      class: "button-tertiary button-icon-only",
      type: "button",
      onClick: o(this, d, "f")
    }, t("ch-image", {
      src: m,
      class: "icon-m"
    })), !this.file.pending && t("button", {
      class: "button-tertiary button-icon-only",
      type: "button",
      onClick: o(this, n, "f"),
      "aria-label": "Delete file"
    }, t("ch-image", {
      src: h,
      class: "icon-m"
    }))) : null, z && t("div", {
      class: "file-item__progress-container"
    }, t("div", {
      class: "file-item__progress-header"
    }, t("span", {
      class: "file-item__uploading-text typography-body-italic-s"
    }, "Uploading ", this.currentName, "..."), t("button", {
      "aria-label": ((C = (k = (x = this.componentLocale) === null || x === void 0 ? void 0 : x.fileItem) === null || k === void 0 ? void 0 : k.cancelUploadButtonAriaLabel) === null || C === void 0 ? void 0 : C.replace("{fileName}", this.currentName)) || "Cancel upload",
      class: "button-tertiary button-icon-only file-item__cancel-upload",
      type: "button",
      onClick: o(this, c, "f")
    }, t("ch-image", {
      src: f,
      class: "icon-m"
    }))), t("div", {
      class: "file-item__progress-bar"
    }, t("progress", {
      class: "elevation-1",
      value: this.file.progress,
      max: "100",
      "aria-labelledby": N
    }))));
  }
  static get watchers() {
    return {
      file: [ "handleFileChange" ]
    };
  }
};

l = new WeakMap, r = new WeakMap, n = new WeakMap, c = new WeakMap, d = new WeakMap;

g.style = a;

export { g as gx_ide_file_item };
//# sourceMappingURL=p-c460c9e7.entry.js.map