@codeenvision/ui-webcomponents 1.0.0

package/dist/components/FileManager/FileManager.js

@@ -0,0 +1,740 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+export class FileManager extends BaseComponent {
+    options;
+    itemEls = [];
+    selectedId;
+    treeEls = [];
+    currentFolderId;
+    listEl;
+    detailEl;
+    previewEl;
+    versionsEl;
+    dropOverlay;
+    dragDepth = 0;
+    dragHandlersBound = false;
+    constructor(options) {
+        super(options.selector);
+        this.options = {
+            view: "grid",
+            title: "Files",
+            actions: ["rename", "delete", "download"],
+            showPreview: true,
+            showVersions: true,
+            dropEnabled: true,
+            ...options,
+        };
+        this.selectedId = this.options.selectedId;
+        this.currentFolderId = this.options.currentFolderId ?? this.options.breadcrumbs?.at(-1)?.id;
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            return;
+        }
+        this.destroy();
+        this.render();
+    }
+    destroy() {
+        this.el.innerHTML = "";
+        this.itemEls = [];
+    }
+    render() {
+        const view = this.options.view ?? "grid";
+        this.el.className = `ce-file-manager ce-file-manager--${view}`;
+        this.el.setAttribute("data-ce-component", "file-manager");
+        this.el.setAttribute("part", "base");
+        const header = document.createElement("div");
+        header.className = "ce-file-manager__header";
+        header.setAttribute("part", "header");
+        const title = document.createElement("div");
+        title.className = "ce-file-manager__title";
+        title.setAttribute("part", "title");
+        title.textContent = this.options.title ?? "Files";
+        const meta = document.createElement("div");
+        meta.className = "ce-file-manager__meta";
+        meta.setAttribute("part", "meta");
+        meta.textContent = this.describeCount(this.options.items.length);
+        header.append(title, meta);
+        const breadcrumbs = this.renderBreadcrumbs(this.options.breadcrumbs ?? []);
+        const body = document.createElement("div");
+        body.className = "ce-file-manager__body";
+        body.setAttribute("part", "body");
+        if (this.options.showPreview || this.options.showVersions) {
+            body.classList.add("ce-file-manager__body--detail");
+        }
+        if (view === "tree") {
+            const tree = this.renderTree(this.options.tree ?? []);
+            body.appendChild(tree);
+        }
+        const list = document.createElement("div");
+        list.className = "ce-file-manager__list";
+        list.setAttribute("part", "list");
+        this.listEl = list;
+        this.ensureDropZone(list);
+        this.itemEls = [];
+        this.options.items.forEach((item) => {
+            list.appendChild(this.buildItem(item));
+        });
+        body.appendChild(list);
+        if (this.options.showPreview || this.options.showVersions) {
+            const detail = this.buildDetailPanel();
+            body.appendChild(detail);
+        }
+        this.el.append(header, breadcrumbs, body);
+        this.updateDetailPanel();
+        this.applyParts(this.el);
+    }
+    buildItem(item) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "ce-file-manager__item";
+        button.setAttribute("part", "item");
+        button.dataset.id = item.id;
+        button.dataset.type = item.type;
+        if (item.size != null) {
+            button.dataset.size = String(item.size);
+        }
+        if (item.modified) {
+            button.dataset.modified = item.modified;
+        }
+        if (item.permissions?.length) {
+            button.dataset.permissions = JSON.stringify(item.permissions);
+        }
+        if (item.preview) {
+            button.dataset.preview = JSON.stringify(item.preview);
+        }
+        if (item.versions?.length) {
+            button.dataset.versions = JSON.stringify(item.versions);
+        }
+        if (this.selectedId === item.id) {
+            button.classList.add("is-selected");
+            button.setAttribute("aria-selected", "true");
+        }
+        const name = document.createElement("span");
+        name.className = "ce-file-manager__item-name";
+        name.setAttribute("part", "item-name");
+        name.textContent = item.name;
+        const meta = document.createElement("span");
+        meta.className = "ce-file-manager__item-meta";
+        meta.setAttribute("part", "item-meta");
+        meta.textContent = this.formatItemMeta(item);
+        const actions = this.buildActions(item);
+        const permissions = this.buildPermissions(item.permissions);
+        if (actions) {
+            button.append(name, meta, permissions, actions);
+        }
+        else {
+            button.append(name, meta, permissions);
+        }
+        button.addEventListener("click", () => this.handleSelect(item, button));
+        button.addEventListener("dblclick", () => this.handleOpen(item, button));
+        button.addEventListener("keydown", (event) => this.handleKeydown(event, item, button));
+        this.itemEls.push(button);
+        return button;
+    }
+    buildActions(item) {
+        const actions = this.options.actions ?? [];
+        if (!actions.length) {
+            return null;
+        }
+        const wrap = document.createElement("div");
+        wrap.className = "ce-file-manager__item-actions";
+        wrap.setAttribute("part", "item-actions");
+        actions.forEach((action) => {
+            if (action === "download" && item.type === "folder") {
+                return;
+            }
+            const btn = document.createElement("button");
+            btn.type = "button";
+            btn.className = "ce-file-manager__item-action";
+            btn.setAttribute("part", "item-action");
+            btn.dataset.action = action;
+            btn.textContent = this.mapActionLabel(action);
+            btn.addEventListener("click", (event) => {
+                event.stopPropagation();
+                this.handleAction(action, item, buttonForActionTarget(btn));
+            });
+            wrap.appendChild(btn);
+        });
+        return wrap.childElementCount ? wrap : null;
+    }
+    handleSelect(item, button) {
+        this.selectButton(button);
+        this.updateDetailPanel(item);
+        if (item.preview) {
+            this.options.onPreview?.(item);
+        }
+        this.options.onSelect?.(item);
+    }
+    handleOpen(item, button) {
+        if (item.type !== "folder") {
+            return;
+        }
+        this.selectButton(button);
+        this.options.onOpen?.(item);
+    }
+    handleAction(action, item, button) {
+        if (button) {
+            this.selectButton(button);
+        }
+        this.options.onAction?.(action, item);
+    }
+    handleKeydown(event, item, button) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            if (item.type === "folder") {
+                this.handleOpen(item, button);
+            }
+            else {
+                this.handleSelect(item, button);
+            }
+        }
+    }
+    selectButton(button) {
+        this.itemEls.forEach((el) => {
+            el.classList.remove("is-selected");
+            el.removeAttribute("aria-selected");
+        });
+        button.classList.add("is-selected");
+        button.setAttribute("aria-selected", "true");
+        this.selectedId = button.dataset.id;
+    }
+    tryHydrate() {
+        const root = this.el.classList.contains("ce-file-manager")
+            ? this.el
+            : this.el.querySelector(".ce-file-manager");
+        if (!root) {
+            return false;
+        }
+        if (root !== this.el) {
+            this.el = root;
+        }
+        const view = this.options.view ?? "grid";
+        this.el.className = `ce-file-manager ce-file-manager--${view}`;
+        this.el.setAttribute("data-ce-component", "file-manager");
+        this.el.setAttribute("part", "base");
+        const header = this.el.querySelector(".ce-file-manager__header") ?? this.createHeader();
+        const title = header.querySelector(".ce-file-manager__title") ?? this.createHeaderItem(header, "ce-file-manager__title");
+        const meta = header.querySelector(".ce-file-manager__meta") ?? this.createHeaderItem(header, "ce-file-manager__meta");
+        title.textContent = this.options.title ?? "Files";
+        meta.textContent = this.describeCount(this.options.items.length);
+        const breadcrumbs = this.el.querySelector(".ce-file-manager__breadcrumbs") ?? this.createBreadcrumbs();
+        if (!this.currentFolderId && this.options.breadcrumbs?.length) {
+            this.currentFolderId = this.options.breadcrumbs[this.options.breadcrumbs.length - 1]?.id;
+        }
+        this.renderBreadcrumbItems(breadcrumbs, this.options.breadcrumbs ?? []);
+        const body = this.el.querySelector(".ce-file-manager__body") ?? this.createBody();
+        if (this.options.showPreview || this.options.showVersions) {
+            body.classList.add("ce-file-manager__body--detail");
+        }
+        else {
+            body.classList.remove("ce-file-manager__body--detail");
+        }
+        const list = body.querySelector(".ce-file-manager__list") ??
+            this.createList(body);
+        this.listEl = list;
+        this.ensureDropZone(list);
+        if (view === "tree") {
+            const tree = body.querySelector(".ce-file-manager__tree") ??
+                this.createTree(body);
+            this.renderTreeItems(tree, this.options.tree ?? []);
+        }
+        if (this.options.showPreview || this.options.showVersions) {
+            const detail = body.querySelector(".ce-file-manager__detail") ??
+                this.createDetailPanel(body);
+            this.bindDetailPanel(detail);
+        }
+        this.itemEls = [];
+        const items = Array.from(list.querySelectorAll(".ce-file-manager__item"));
+        items.forEach((button, index) => {
+            const item = this.resolveItemFromDom(button, index);
+            button.addEventListener("click", () => this.handleSelect(item, button));
+            button.addEventListener("dblclick", () => this.handleOpen(item, button));
+            button.addEventListener("keydown", (event) => this.handleKeydown(event, item, button));
+            button.querySelectorAll(".ce-file-manager__item-action").forEach((actionBtn) => {
+                const action = actionBtn.dataset.action;
+                if (!action) {
+                    return;
+                }
+                actionBtn.addEventListener("click", (event) => {
+                    event.stopPropagation();
+                    this.handleAction(action, item, button);
+                });
+            });
+            if (this.selectedId && item.id === this.selectedId) {
+                button.classList.add("is-selected");
+                button.setAttribute("aria-selected", "true");
+            }
+            this.itemEls.push(button);
+        });
+        this.updateDetailPanel();
+        this.applyParts(this.el);
+        return true;
+    }
+    createHeader() {
+        const header = document.createElement("div");
+        header.className = "ce-file-manager__header";
+        header.setAttribute("part", "header");
+        this.el.prepend(header);
+        return header;
+    }
+    createHeaderItem(header, className) {
+        const item = document.createElement("div");
+        item.className = className;
+        if (className === "ce-file-manager__title") {
+            item.setAttribute("part", "title");
+        }
+        if (className === "ce-file-manager__meta") {
+            item.setAttribute("part", "meta");
+        }
+        header.appendChild(item);
+        return item;
+    }
+    createBreadcrumbs() {
+        const nav = document.createElement("div");
+        nav.className = "ce-file-manager__breadcrumbs";
+        nav.setAttribute("part", "breadcrumbs");
+        this.el.appendChild(nav);
+        return nav;
+    }
+    createBody() {
+        const body = document.createElement("div");
+        body.className = "ce-file-manager__body";
+        body.setAttribute("part", "body");
+        this.el.appendChild(body);
+        return body;
+    }
+    createTree(body) {
+        const tree = document.createElement("div");
+        tree.className = "ce-file-manager__tree";
+        tree.setAttribute("part", "tree");
+        body.prepend(tree);
+        return tree;
+    }
+    createList(body) {
+        const list = document.createElement("div");
+        list.className = "ce-file-manager__list";
+        list.setAttribute("part", "list");
+        body.appendChild(list);
+        return list;
+    }
+    buildDetailPanel() {
+        const detail = document.createElement("div");
+        detail.className = "ce-file-manager__detail";
+        detail.setAttribute("part", "detail");
+        this.bindDetailPanel(detail);
+        return detail;
+    }
+    createDetailPanel(body) {
+        const detail = document.createElement("div");
+        detail.className = "ce-file-manager__detail";
+        detail.setAttribute("part", "detail");
+        body.appendChild(detail);
+        return detail;
+    }
+    bindDetailPanel(detail) {
+        this.detailEl = detail;
+        const preview = detail.querySelector(".ce-file-manager__preview") ?? this.createPreview(detail);
+        const versions = detail.querySelector(".ce-file-manager__versions") ?? this.createVersions(detail);
+        this.previewEl = preview;
+        this.versionsEl = versions;
+    }
+    createPreview(detail) {
+        const panel = document.createElement("div");
+        panel.className = "ce-file-manager__preview";
+        panel.setAttribute("part", "preview");
+        detail.appendChild(panel);
+        return panel;
+    }
+    createVersions(detail) {
+        const panel = document.createElement("div");
+        panel.className = "ce-file-manager__versions";
+        panel.setAttribute("part", "versions");
+        detail.appendChild(panel);
+        return panel;
+    }
+    renderBreadcrumbs(breadcrumbs) {
+        const nav = document.createElement("div");
+        nav.className = "ce-file-manager__breadcrumbs";
+        nav.setAttribute("part", "breadcrumbs");
+        this.renderBreadcrumbItems(nav, breadcrumbs);
+        return nav;
+    }
+    renderBreadcrumbItems(nav, breadcrumbs) {
+        nav.innerHTML = "";
+        if (!breadcrumbs.length) {
+            nav.hidden = true;
+            return;
+        }
+        nav.hidden = false;
+        breadcrumbs.forEach((crumb, index) => {
+            const btn = document.createElement("button");
+            btn.type = "button";
+            btn.className = "ce-file-manager__breadcrumb";
+            btn.setAttribute("part", "breadcrumb");
+            btn.dataset.id = crumb.id;
+            btn.textContent = crumb.label;
+            const isCurrent = this.currentFolderId ? this.currentFolderId === crumb.id : index === breadcrumbs.length - 1;
+            if (isCurrent) {
+                btn.classList.add("is-current");
+            }
+            btn.addEventListener("click", () => this.handleNavigate(crumb.id));
+            nav.appendChild(btn);
+            if (index < breadcrumbs.length - 1) {
+                const sep = document.createElement("span");
+                sep.className = "ce-file-manager__breadcrumb-sep";
+                sep.setAttribute("part", "breadcrumb-sep");
+                sep.textContent = "/";
+                nav.appendChild(sep);
+            }
+        });
+    }
+    renderTree(nodes) {
+        const tree = document.createElement("div");
+        tree.className = "ce-file-manager__tree";
+        tree.setAttribute("part", "tree");
+        this.renderTreeItems(tree, nodes);
+        return tree;
+    }
+    renderTreeItems(container, nodes) {
+        container.innerHTML = "";
+        this.treeEls = [];
+        const list = document.createElement("ul");
+        list.className = "ce-file-manager__tree-list";
+        list.setAttribute("part", "tree-list");
+        nodes.forEach((node) => {
+            list.appendChild(this.buildTreeNode(node));
+        });
+        container.appendChild(list);
+        this.updateTreeSelection();
+    }
+    buildTreeNode(node) {
+        const li = document.createElement("li");
+        li.className = "ce-file-manager__tree-node";
+        li.setAttribute("part", "tree-node");
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "ce-file-manager__tree-item";
+        btn.setAttribute("part", "tree-item");
+        btn.dataset.id = node.id;
+        btn.textContent = node.label;
+        btn.addEventListener("click", () => this.handleNavigate(node.id));
+        this.treeEls.push(btn);
+        li.appendChild(btn);
+        if (node.children?.length) {
+            const childList = document.createElement("ul");
+            childList.className = "ce-file-manager__tree-list";
+            childList.setAttribute("part", "tree-list");
+            node.children.forEach((child) => childList.appendChild(this.buildTreeNode(child)));
+            li.appendChild(childList);
+        }
+        return li;
+    }
+    handleNavigate(folderId) {
+        this.currentFolderId = folderId;
+        this.updateTreeSelection();
+        this.updateBreadcrumbSelection();
+        this.options.onNavigate?.(folderId);
+    }
+    updateTreeSelection() {
+        this.treeEls.forEach((btn) => {
+            const isActive = btn.dataset.id === this.currentFolderId;
+            btn.classList.toggle("is-active", isActive);
+        });
+    }
+    updateBreadcrumbSelection() {
+        const crumbs = Array.from(this.el.querySelectorAll(".ce-file-manager__breadcrumb"));
+        if (!crumbs.length) {
+            return;
+        }
+        crumbs.forEach((btn, index) => {
+            const isCurrent = this.currentFolderId ? btn.dataset.id === this.currentFolderId : index === crumbs.length - 1;
+            btn.classList.toggle("is-current", isCurrent);
+        });
+    }
+    resolveItemFromDom(button, index) {
+        const id = button.dataset.id ?? `ce-file-${index}`;
+        const name = button.querySelector(".ce-file-manager__item-name")?.textContent?.trim() ?? button.textContent?.trim() ?? id;
+        const type = button.dataset.type ?? "file";
+        const size = button.dataset.size ? Number(button.dataset.size) : undefined;
+        const modified = button.dataset.modified ?? undefined;
+        const permissions = this.parseJson(button.dataset.permissions);
+        const preview = this.parseJson(button.dataset.preview);
+        const versions = this.parseJson(button.dataset.versions);
+        return this.findItemById(id) ?? { id, name, type, size, modified, permissions, preview, versions };
+    }
+    findItemById(id) {
+        return this.options.items.find((item) => item.id === id);
+    }
+    describeCount(count) {
+        return count === 1 ? "1 item" : `${count} items`;
+    }
+    formatItemMeta(item) {
+        const parts = [];
+        if (item.type === "folder") {
+            parts.push("Folder");
+        }
+        else if (item.size != null) {
+            parts.push(this.formatBytes(item.size));
+        }
+        else {
+            parts.push("File");
+        }
+        if (item.modified) {
+            parts.push(item.modified);
+        }
+        return parts.join(" - ");
+    }
+    formatBytes(bytes) {
+        if (!bytes) {
+            return "0 B";
+        }
+        const units = ["B", "KB", "MB", "GB", "TB"];
+        const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+        const value = bytes / 1024 ** exponent;
+        return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[exponent]}`;
+    }
+    mapActionLabel(action) {
+        switch (action) {
+            case "rename":
+                return "Rename";
+            case "delete":
+                return "Delete";
+            case "download":
+                return "Download";
+            default:
+                return action;
+        }
+    }
+    buildPermissions(permissions) {
+        const wrap = document.createElement("div");
+        wrap.className = "ce-file-manager__item-permissions";
+        wrap.setAttribute("part", "item-permissions");
+        (permissions ?? []).forEach((permission) => {
+            const badge = document.createElement("span");
+            badge.className = "ce-file-manager__permission";
+            badge.setAttribute("part", "permission");
+            badge.textContent = permission;
+            wrap.appendChild(badge);
+        });
+        return wrap;
+    }
+    updateDetailPanel(item) {
+        if (!this.detailEl || (!this.previewEl && !this.versionsEl)) {
+            return;
+        }
+        const resolved = item ?? (this.selectedId ? this.findItemById(this.selectedId) : undefined);
+        const hasSelection = Boolean(resolved);
+        if (this.previewEl) {
+            this.previewEl.innerHTML = "";
+            const title = document.createElement("div");
+            title.className = "ce-file-manager__detail-title";
+            title.setAttribute("part", "detail-title");
+            title.textContent = "Preview";
+            const body = document.createElement("div");
+            body.className = "ce-file-manager__detail-body";
+            body.setAttribute("part", "detail-body");
+            if (!hasSelection) {
+                body.textContent = "Select a file to preview.";
+            }
+            else if (resolved?.preview) {
+                this.renderPreview(body, resolved.preview);
+            }
+            else {
+                body.textContent = "No preview available.";
+            }
+            this.previewEl.append(title, body);
+        }
+        if (this.versionsEl) {
+            this.versionsEl.innerHTML = "";
+            const title = document.createElement("div");
+            title.className = "ce-file-manager__detail-title";
+            title.setAttribute("part", "detail-title");
+            title.textContent = "Versions";
+            const body = document.createElement("div");
+            body.className = "ce-file-manager__detail-body";
+            body.setAttribute("part", "detail-body");
+            if (!hasSelection) {
+                body.textContent = "Select a file to view versions.";
+            }
+            else if (resolved?.versions?.length) {
+                const list = document.createElement("ul");
+                list.className = "ce-file-manager__version-list";
+                list.setAttribute("part", "version-list");
+                resolved.versions.forEach((version) => {
+                    const li = document.createElement("li");
+                    li.className = "ce-file-manager__version";
+                    li.setAttribute("part", "version");
+                    const btn = document.createElement("button");
+                    btn.type = "button";
+                    btn.className = "ce-file-manager__version-btn";
+                    btn.setAttribute("part", "version-btn");
+                    btn.dataset.versionId = version.id;
+                    btn.textContent = this.formatVersion(version);
+                    btn.addEventListener("click", () => this.options.onVersionSelect?.(resolved, version));
+                    li.appendChild(btn);
+                    list.appendChild(li);
+                });
+                body.appendChild(list);
+            }
+            else {
+                body.textContent = "No versions recorded.";
+            }
+            this.versionsEl.append(title, body);
+        }
+    }
+    renderPreview(container, preview) {
+        if (preview.type === "image" && preview.src) {
+            const img = document.createElement("img");
+            img.src = preview.src;
+            img.alt = "Preview";
+            img.className = "ce-file-manager__preview-image";
+            img.setAttribute("part", "preview-image");
+            container.appendChild(img);
+            return;
+        }
+        if (preview.type === "link" && preview.src) {
+            const link = document.createElement("a");
+            link.href = preview.src;
+            link.className = "ce-file-manager__preview-link";
+            link.setAttribute("part", "preview-link");
+            link.textContent = preview.src;
+            link.target = "_blank";
+            link.rel = "noreferrer";
+            container.appendChild(link);
+            return;
+        }
+        if (preview.content) {
+            const text = document.createElement("pre");
+            text.className = "ce-file-manager__preview-text";
+            text.setAttribute("part", "preview-text");
+            text.textContent = preview.content;
+            container.appendChild(text);
+            return;
+        }
+        container.textContent = "No preview available.";
+    }
+    formatVersion(version) {
+        const parts = [version.label];
+        if (version.updated) {
+            parts.push(version.updated);
+        }
+        if (typeof version.size === "number") {
+            parts.push(this.formatBytes(version.size));
+        }
+        return parts.join(" - ");
+    }
+    ensureDropZone(list) {
+        if (!this.options.dropEnabled) {
+            return;
+        }
+        list.classList.add("ce-file-manager__list--drop");
+        const overlay = list.querySelector(".ce-file-manager__dropzone") ?? this.createDropOverlay(list);
+        this.dropOverlay = overlay;
+        if (this.dragHandlersBound) {
+            return;
+        }
+        list.addEventListener("dragenter", (event) => this.handleDragEnter(event));
+        list.addEventListener("dragover", (event) => this.handleDragOver(event));
+        list.addEventListener("dragleave", (event) => this.handleDragLeave(event));
+        list.addEventListener("drop", (event) => this.handleDrop(event));
+        this.dragHandlersBound = true;
+    }
+    createDropOverlay(list) {
+        const overlay = document.createElement("div");
+        overlay.className = "ce-file-manager__dropzone";
+        overlay.setAttribute("part", "dropzone");
+        overlay.textContent = "Drop files to upload";
+        list.appendChild(overlay);
+        return overlay;
+    }
+    applyParts(root) {
+        const container = root ?? (this.el.classList.contains("ce-file-manager")
+            ? this.el
+            : this.el.querySelector(".ce-file-manager"));
+        if (!container) {
+            return;
+        }
+        container.setAttribute("data-ce-component", "file-manager");
+        container.setAttribute("part", "base");
+        container.querySelectorAll(".ce-file-manager__header").forEach((node) => node.setAttribute("part", "header"));
+        container.querySelectorAll(".ce-file-manager__title").forEach((node) => node.setAttribute("part", "title"));
+        container.querySelectorAll(".ce-file-manager__meta").forEach((node) => node.setAttribute("part", "meta"));
+        container.querySelectorAll(".ce-file-manager__breadcrumbs").forEach((node) => node.setAttribute("part", "breadcrumbs"));
+        container.querySelectorAll(".ce-file-manager__breadcrumb").forEach((node) => node.setAttribute("part", "breadcrumb"));
+        container.querySelectorAll(".ce-file-manager__breadcrumb-sep").forEach((node) => node.setAttribute("part", "breadcrumb-sep"));
+        container.querySelectorAll(".ce-file-manager__body").forEach((node) => node.setAttribute("part", "body"));
+        container.querySelectorAll(".ce-file-manager__list").forEach((node) => node.setAttribute("part", "list"));
+        container.querySelectorAll(".ce-file-manager__item").forEach((node) => node.setAttribute("part", "item"));
+        container.querySelectorAll(".ce-file-manager__item-name").forEach((node) => node.setAttribute("part", "item-name"));
+        container.querySelectorAll(".ce-file-manager__item-meta").forEach((node) => node.setAttribute("part", "item-meta"));
+        container.querySelectorAll(".ce-file-manager__item-actions").forEach((node) => node.setAttribute("part", "item-actions"));
+        container.querySelectorAll(".ce-file-manager__item-action").forEach((node) => node.setAttribute("part", "item-action"));
+        container.querySelectorAll(".ce-file-manager__item-permissions").forEach((node) => node.setAttribute("part", "item-permissions"));
+        container.querySelectorAll(".ce-file-manager__permission").forEach((node) => node.setAttribute("part", "permission"));
+        container.querySelectorAll(".ce-file-manager__tree").forEach((node) => node.setAttribute("part", "tree"));
+        container.querySelectorAll(".ce-file-manager__tree-list").forEach((node) => node.setAttribute("part", "tree-list"));
+        container.querySelectorAll(".ce-file-manager__tree-node").forEach((node) => node.setAttribute("part", "tree-node"));
+        container.querySelectorAll(".ce-file-manager__tree-item").forEach((node) => node.setAttribute("part", "tree-item"));
+        container.querySelectorAll(".ce-file-manager__detail").forEach((node) => node.setAttribute("part", "detail"));
+        container.querySelectorAll(".ce-file-manager__preview").forEach((node) => node.setAttribute("part", "preview"));
+        container.querySelectorAll(".ce-file-manager__versions").forEach((node) => node.setAttribute("part", "versions"));
+        container.querySelectorAll(".ce-file-manager__detail-title").forEach((node) => node.setAttribute("part", "detail-title"));
+        container.querySelectorAll(".ce-file-manager__detail-body").forEach((node) => node.setAttribute("part", "detail-body"));
+        container.querySelectorAll(".ce-file-manager__version-list").forEach((node) => node.setAttribute("part", "version-list"));
+        container.querySelectorAll(".ce-file-manager__version").forEach((node) => node.setAttribute("part", "version"));
+        container.querySelectorAll(".ce-file-manager__version-btn").forEach((node) => node.setAttribute("part", "version-btn"));
+        container.querySelectorAll(".ce-file-manager__preview-image").forEach((node) => node.setAttribute("part", "preview-image"));
+        container.querySelectorAll(".ce-file-manager__preview-link").forEach((node) => node.setAttribute("part", "preview-link"));
+        container.querySelectorAll(".ce-file-manager__preview-text").forEach((node) => node.setAttribute("part", "preview-text"));
+        container.querySelectorAll(".ce-file-manager__dropzone").forEach((node) => node.setAttribute("part", "dropzone"));
+    }
+    handleDragEnter(event) {
+        event.preventDefault();
+        if (!this.options.dropEnabled) {
+            return;
+        }
+        this.dragDepth += 1;
+        this.listEl?.classList.add("is-drop-active");
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+    }
+    handleDragLeave(event) {
+        event.preventDefault();
+        if (!this.options.dropEnabled) {
+            return;
+        }
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+        if (this.dragDepth === 0) {
+            this.listEl?.classList.remove("is-drop-active");
+        }
+    }
+    handleDrop(event) {
+        event.preventDefault();
+        if (!this.options.dropEnabled) {
+            return;
+        }
+        this.dragDepth = 0;
+        this.listEl?.classList.remove("is-drop-active");
+        const files = Array.from(event.dataTransfer?.files ?? []);
+        if (!files.length) {
+            return;
+        }
+        const targetFolderId = this.currentFolderId ||
+            (this.selectedId && this.findItemById(this.selectedId)?.type === "folder" ? this.selectedId : undefined);
+        this.options.onUpload?.(files, targetFolderId);
+    }
+    parseJson(value) {
+        if (!value) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(value);
+        }
+        catch {
+            return undefined;
+        }
+    }
+}
+const buttonForActionTarget = (button) => button.closest(".ce-file-manager__item") ?? undefined;
+//# sourceMappingURL=FileManager.js.map