'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-75aef097.js');
const assetsManager = require('./assets-manager-089e91b1.js');
require('./mer-animated-dots-78490ca4.js');
require('lit');
require('lit/directives/when.js');
require('lit/directives/if-defined.js');

const fileItemCss = ":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 __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _FileItem_handleNameChange, _FileItem_handleBlur, _FileItem_handleDelete, _FileItem_handleCancelClick, _FileItem_startEditing;
const FILE_ICON = assetsManager.getIconPath({
    category: "gemini-tools",
    name: "file",
    colorType: "primary"
});
const EDIT_ICON = assetsManager.getIconPath({
    category: "gemini-tools",
    name: "edit",
    colorType: "primary"
});
const DELETE_ICON = assetsManager.getIconPath({
    category: "gemini-tools",
    name: "delete",
    colorType: "primary"
});
const CANCEL_ICON = assetsManager.getIconPath({
    category: "gemini-tools",
    name: "close",
    colorType: "primary"
});
const CSS_BUNDLES = [
    "resets/box-sizing",
    "components/button",
    "components/icon",
    "components/edit",
    "utils/typography",
    "utils/spacing",
    "utils/form",
    "utils/layout",
    "utils/elevation"
];
const FileItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.fileNameChange = index.createEvent(this, "fileNameChange", 7);
        this.fileDelete = index.createEvent(this, "fileDelete", 7);
        this.fileCancel = index.createEvent(this, "fileCancel", 7);
        _FileItem_handleNameChange.set(this, (event) => {
            const newName = event.detail;
            if (newName && newName !== this.currentName) {
                this.currentName = newName;
                this.fileNameChange.emit({
                    id: this.file.id,
                    name: newName
                });
            }
        });
        _FileItem_handleBlur.set(this, () => {
            this.isEditing = false;
        });
        /** Handles file deletion */
        _FileItem_handleDelete.set(this, () => {
            this.fileDelete.emit(this.file.id);
        });
        /** Handles upload cancellation */
        _FileItem_handleCancelClick.set(this, (e) => {
            e.preventDefault();
            this.fileCancel.emit(this.file.id);
        });
        /** Starts file name editing */
        _FileItem_startEditing.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(newFile) {
        this.currentName = newFile.name;
    }
    componentWillLoad() {
        this.currentName = this.file.name;
    }
    render() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
        const displayItemActions = !this.file.pending;
        const displayProgressContainer = this.file.pending;
        const labelId = "progress-label-" + this.file.id;
        let liAriaLabel;
        if (this.file.pending) {
            liAriaLabel = ((_d = (_c = (_b = (_a = this.componentLocale) === null || _a === void 0 ? void 0 : _a.fileItem) === null || _b === void 0 ? void 0 : _b.uploadingAriaLabel) === null || _c === void 0 ? void 0 : _c.replace("{fileName}", this.currentName)) === null || _d === void 0 ? void 0 : _d.replace("{fileProgress}", this.file.progress.toString())) || this.currentName;
        }
        else if (this.file.remoteId) {
            liAriaLabel = ((_g = (_f = (_e = this.componentLocale) === null || _e === void 0 ? void 0 : _e.fileItem) === null || _f === void 0 ? void 0 : _f.uploadedSuccessfullyAriaLabel) === null || _g === void 0 ? void 0 : _g.replace("{fileName}", this.currentName)) || this.currentName;
        }
        else {
            liAriaLabel = this.currentName;
        }
        return (index.h("li", { class: {
                "file-item": true,
                "file-item--without-actions": !displayItemActions,
                "file-item--with-actions": displayItemActions
            }, "aria-label": liAriaLabel }, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("div", { class: "file-item__icon" }, index.h("ch-image", { disabled: !this.file.pending, src: FILE_ICON, class: "icon-m" })), index.h("div", { class: "file-item__name" }, this.isEditing ? (index.h("ch-edit", { accessibleName: (_k = (_j = (_h = this.componentLocale) === null || _h === void 0 ? void 0 : _h.fileItem) === null || _j === void 0 ? void 0 : _j.editNamePlaceholderAriaLabel) === null || _k === void 0 ? void 0 : _k.replace("{fileName}", this.currentName), value: this.currentName, autoFocus: true, onInput: __classPrivateFieldGet(this, _FileItem_handleNameChange, "f"), onBlur: __classPrivateFieldGet(this, _FileItem_handleBlur, "f"), class: "input", id: labelId })) : (index.h("span", { class: "label", id: labelId }, this.currentName))), displayItemActions ? (index.h("div", { class: "file-item__actions" }, !this.file.pending && this.editable && (index.h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_startEditing, "f") }, index.h("ch-image", { src: EDIT_ICON, class: "icon-m" }))), !this.file.pending && (index.h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleDelete, "f"), "aria-label": "Delete file" }, index.h("ch-image", { src: DELETE_ICON, class: "icon-m" }))))) : (null), displayProgressContainer && (index.h("div", { class: "file-item__progress-container" }, index.h("div", { class: "file-item__progress-header" }, index.h("span", { class: "file-item__uploading-text typography-body-italic-s" }, "Uploading ", this.currentName, "..."), index.h("button", { "aria-label": ((_o = (_m = (_l = this.componentLocale) === null || _l === void 0 ? void 0 : _l.fileItem) === null || _m === void 0 ? void 0 : _m.cancelUploadButtonAriaLabel) === null || _o === void 0 ? void 0 : _o.replace("{fileName}", this.currentName)) || "Cancel upload", class: "button-tertiary button-icon-only file-item__cancel-upload", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleCancelClick, "f") }, index.h("ch-image", { src: CANCEL_ICON, class: "icon-m" }))), index.h("div", { class: "file-item__progress-bar" }, index.h("progress", { class: "elevation-1", value: this.file.progress, max: "100", "aria-labelledby": labelId }))))));
    }
    static get watchers() { return {
        "file": ["handleFileChange"]
    }; }
};
_FileItem_handleNameChange = new WeakMap(), _FileItem_handleBlur = new WeakMap(), _FileItem_handleDelete = new WeakMap(), _FileItem_handleCancelClick = new WeakMap(), _FileItem_startEditing = new WeakMap();
FileItem.style = fileItemCss;

exports.gx_ide_file_item = FileItem;

//# sourceMappingURL=gx-ide-file-item.cjs.entry.js.map