@api-client/ui 0.5.58 → 0.6.0

package/build/src/elements/file-system/internals/QuickApiFilesystem.js

@@ -0,0 +1,434 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { consume } from '@lit/context';
+import { FolderKind } from '@api-client/core/models/kinds.js';
+import { organizationContext } from '../../../providers/organization.js';
+import { userContext } from '../../../providers/user.js';
+import { api, folderFilled, schemaModel } from '../../../md/icons/Icons.js';
+import '../../../md/icons/ui-icon.js';
+import '../../../md/icon-button/ui-icon-button.js';
+import '../../../md/button/ui-button.js';
+import '../../../md/divider/ui-divider.js';
+import '../../../md/menu/ui-menu.js';
+import '../../../md/menu/ui-menu-item.js';
+import '../ui-breadcrumbs.js';
+import '../../data-table/filesystem-table.js';
+let QuickApiFilesystem = (() => {
+    let _classSuper = LitElement;
+    let _source_decorators;
+    let _source_initializers = [];
+    let _source_extraInitializers = [];
+    let _organization_decorators;
+    let _organization_initializers = [];
+    let _organization_extraInitializers = [];
+    let _user_decorators;
+    let _user_initializers = [];
+    let _user_extraInitializers = [];
+    let _files_decorators;
+    let _files_initializers = [];
+    let _files_extraInitializers = [];
+    let _breadcrumbs_decorators;
+    let _breadcrumbs_initializers = [];
+    let _breadcrumbs_extraInitializers = [];
+    let _parent_decorators;
+    let _parent_initializers = [];
+    let _parent_extraInitializers = [];
+    let _selectedItems_decorators;
+    let _selectedItems_initializers = [];
+    let _selectedItems_extraInitializers = [];
+    return class QuickApiFilesystem extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _source_decorators = [property({ type: String })];
+            _organization_decorators = [property({ type: Object, attribute: false }), consume({ context: organizationContext, subscribe: true })];
+            _user_decorators = [property({ type: Object, attribute: false }), consume({ context: userContext })];
+            _files_decorators = [property({ type: Object })];
+            _breadcrumbs_decorators = [property({ type: Object })];
+            _parent_decorators = [property({ type: Object })];
+            _selectedItems_decorators = [state()];
+            __esDecorate(this, null, _source_decorators, { kind: "accessor", name: "source", static: false, private: false, access: { has: obj => "source" in obj, get: obj => obj.source, set: (obj, value) => { obj.source = value; } }, metadata: _metadata }, _source_initializers, _source_extraInitializers);
+            __esDecorate(this, null, _organization_decorators, { kind: "accessor", name: "organization", static: false, private: false, access: { has: obj => "organization" in obj, get: obj => obj.organization, set: (obj, value) => { obj.organization = value; } }, metadata: _metadata }, _organization_initializers, _organization_extraInitializers);
+            __esDecorate(this, null, _user_decorators, { kind: "accessor", name: "user", static: false, private: false, access: { has: obj => "user" in obj, get: obj => obj.user, set: (obj, value) => { obj.user = value; } }, metadata: _metadata }, _user_initializers, _user_extraInitializers);
+            __esDecorate(this, null, _files_decorators, { kind: "accessor", name: "files", static: false, private: false, access: { has: obj => "files" in obj, get: obj => obj.files, set: (obj, value) => { obj.files = value; } }, metadata: _metadata }, _files_initializers, _files_extraInitializers);
+            __esDecorate(this, null, _breadcrumbs_decorators, { kind: "accessor", name: "breadcrumbs", static: false, private: false, access: { has: obj => "breadcrumbs" in obj, get: obj => obj.breadcrumbs, set: (obj, value) => { obj.breadcrumbs = value; } }, metadata: _metadata }, _breadcrumbs_initializers, _breadcrumbs_extraInitializers);
+            __esDecorate(this, null, _parent_decorators, { kind: "accessor", name: "parent", static: false, private: false, access: { has: obj => "parent" in obj, get: obj => obj.parent, set: (obj, value) => { obj.parent = value; } }, metadata: _metadata }, _parent_initializers, _parent_extraInitializers);
+            __esDecorate(this, null, _selectedItems_decorators, { kind: "accessor", name: "selectedItems", static: false, private: false, access: { has: obj => "selectedItems" in obj, get: obj => obj.selectedItems, set: (obj, value) => { obj.selectedItems = value; } }, metadata: _metadata }, _selectedItems_initializers, _selectedItems_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #source_accessor_storage = __runInitializers(this, _source_initializers, 'own'
+        /**
+         * The currently selected organization, if any.
+         *
+         * This property consumes the `organizationContext`.
+         */
+        );
+        /**
+         * What kind of files we render.
+         * @attribute
+         */
+        get source() { return this.#source_accessor_storage; }
+        set source(value) { this.#source_accessor_storage = value; }
+        #organization_accessor_storage = (__runInitializers(this, _source_extraInitializers), __runInitializers(this, _organization_initializers, void 0));
+        /**
+         * The currently selected organization, if any.
+         *
+         * This property consumes the `organizationContext`.
+         */
+        get organization() { return this.#organization_accessor_storage; }
+        set organization(value) { this.#organization_accessor_storage = value; }
+        #user_accessor_storage = (__runInitializers(this, _organization_extraInitializers), __runInitializers(this, _user_initializers, void 0));
+        /**
+         * The user object to use with the file system.
+         *
+         * This property consumes the `userContext`.
+         */
+        get user() { return this.#user_accessor_storage; }
+        set user(value) { this.#user_accessor_storage = value; }
+        #files_accessor_storage = (__runInitializers(this, _user_extraInitializers), __runInitializers(this, _files_initializers, void 0));
+        /**
+         * The list of files to render.
+         */
+        get files() { return this.#files_accessor_storage; }
+        set files(value) { this.#files_accessor_storage = value; }
+        #breadcrumbs_accessor_storage = (__runInitializers(this, _files_extraInitializers), __runInitializers(this, _breadcrumbs_initializers, void 0));
+        /**
+         * The breadcrumbs to render.
+         */
+        get breadcrumbs() { return this.#breadcrumbs_accessor_storage; }
+        set breadcrumbs(value) { this.#breadcrumbs_accessor_storage = value; }
+        #parent_accessor_storage = (__runInitializers(this, _breadcrumbs_extraInitializers), __runInitializers(this, _parent_initializers, void 0));
+        /**
+         * The parent folder of the current view.
+         * It is used to compute the permissions for the current view.
+         */
+        get parent() { return this.#parent_accessor_storage; }
+        set parent(value) { this.#parent_accessor_storage = value; }
+        #selectedItems_accessor_storage = (__runInitializers(this, _parent_extraInitializers), __runInitializers(this, _selectedItems_initializers, []
+        /**
+         * Dispatches the `open-folder` event.
+         *
+         * @param key The key of the folder to open.
+         */
+        ));
+        /**
+         * The list of currently selected items.
+         */
+        get selectedItems() { return this.#selectedItems_accessor_storage; }
+        set selectedItems(value) { this.#selectedItems_accessor_storage = value; }
+        /**
+         * Dispatches the `open-folder` event.
+         *
+         * @param key The key of the folder to open.
+         */
+        openFolder(key) {
+            this.clearSelection();
+            this.dispatchEvent(new CustomEvent('open-folder', {
+                detail: { key },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * Dispatches the `open-file` event.
+         *
+         * @param file The file to open.
+         */
+        openFile(file) {
+            this.dispatchEvent(new CustomEvent('open-file', {
+                detail: { key: file.key, kind: file.kind },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * Dispatches the `share-files` event.
+         *
+         * @param files The list of files to share.
+         */
+        shareFiles(files) {
+            this.dispatchEvent(new CustomEvent('share-files', {
+                detail: { keys: files.map((file) => file.key) },
+            }));
+        }
+        /**
+         * Handler for the item activation event from the data table.
+         * Depending on the item kind it opens the folder or the file.
+         *
+         * @param e The activation event.
+         * @throws {Error} When the item kind is unknown.
+         */
+        itemActivateHandler(e) {
+            const item = e.detail;
+            const { kind } = item;
+            if (kind === FolderKind) {
+                this.openFolder(item.key);
+            }
+            else {
+                this.openFile(item);
+            }
+        }
+        /**
+         * Handler for the selection event from the data table.
+         * Updates the `selectedItems` state.
+         *
+         * @param e The selection event.
+         */
+        handleTableSelect(e) {
+            this.selectedItems = [...e.detail.selectedItems];
+        }
+        /**
+         * Clears the current selection.
+         */
+        clearSelection() {
+            this.selectedItems = [];
+        }
+        /**
+         * Shares the currently selected files.
+         */
+        shareSelection() {
+            const { selectedItems } = this;
+            this.shareFiles(selectedItems);
+        }
+        /**
+         * Removes files from the selection.
+         * @param keys The keys of the files to remove from the selection.
+         */
+        removeFromSelection(keys) {
+            const { selectedItems } = this;
+            this.selectedItems = selectedItems.filter((item) => !keys.some((key) => key === item.key));
+        }
+        /**
+         * Logic to handle file actions from the data table (e.g. rename, delete, share, open).
+         *
+         * @param e The file action event.
+         */
+        handleFileAction(e) {
+            const { key } = e.detail;
+            const action = e.detail.action;
+            switch (action) {
+                case 'rename':
+                case 'move':
+                    this.dispatchEvent(new CustomEvent(`file-${action}`, {
+                        detail: { key },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                    break;
+                case 'delete':
+                    this.deleteFiles([key]);
+                    break;
+                case 'share':
+                case 'open': {
+                    const item = this.files?.value?.find((item) => item.key === key);
+                    if (!item) {
+                        return;
+                    }
+                    if (action === 'share') {
+                        this.shareFiles([item]);
+                    }
+                    else if (action === 'open') {
+                        if (item.kind !== FolderKind) {
+                            this.openFile(item);
+                        }
+                        else {
+                            this.openFolder(key);
+                        }
+                    }
+                    break;
+                }
+                default:
+                // Unknown action
+            }
+        }
+        /**
+         * Handler for the "add file" menu selection.
+         * Dispatches the `file-create` event.
+         *
+         * @param e The menu selection event.
+         */
+        handleAddMenuSelect(e) {
+            const action = e.detail.item.value;
+            if (!action || !['folder', 'api', 'domain', 'import'].includes(action)) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('file-create', {
+                detail: { action },
+            }));
+        }
+        /**
+         * Handler for the breadcrumbs navigation event.
+         * Opens the folder corresponding to the breadcrumb.
+         *
+         * @param e The breadcrumb navigation event.
+         */
+        handleBreadcrumbsNavigate(e) {
+            const { key } = e.detail;
+            this.openFolder(key);
+        }
+        /**
+         * Deletes the currently selected files.
+         */
+        handleDeleteSelected() {
+            const { selectedItems } = this;
+            this.deleteFiles(selectedItems.map((item) => item.key));
+        }
+        /**
+         * Deletes a list of files identified by their keys.
+         * Dispatches the `delete-files` event and removes the files from the selection.
+         *
+         * @param keys The keys of the files to delete.
+         */
+        async deleteFiles(keys) {
+            this.dispatchEvent(new CustomEvent('delete-files', {
+                detail: { keys },
+            }));
+            this.removeFromSelection(keys);
+        }
+        handleScrollEnd() {
+            this.dispatchEvent(new CustomEvent('scroll-end'));
+        }
+        render() {
+            const { selectedItems, files } = this;
+            const own = this.source === 'own';
+            const ariaLabel = own ? 'Your files' : 'Shared files';
+            const content = html `
+      <div class="section-header">
+        ${selectedItems && selectedItems.length ? this.renderSelection(selectedItems) : this.renderHeader()}
+      </div>
+      <filesystem-table
+        .oid="${this.organization?.key}"
+        .user="${this.user}"
+        .items="${files}"
+        selection="multi"
+        active
+        sort="name"
+        sortDirection="desc"
+        ariaLabel="${ariaLabel}"
+        .selectedItems="${selectedItems}"
+        @activate="${this.itemActivateHandler}"
+        @select="${this.handleTableSelect}"
+        @rowaction="${this.handleFileAction}"
+        @scrollend="${this.handleScrollEnd}"
+        class="table"
+      >
+        ${own
+                ? html `<p slot="empty" class="empty">You have no files.</p>`
+                : html `<p slot="empty" class="empty">You have no shared files.</p>`}
+      </filesystem-table>
+    `;
+            return content;
+        }
+        renderSelection(selected) {
+            const { length } = selected;
+            return html `
+      <div class="file-selection-info">
+        <ui-icon-button @click="${this.clearSelection}" title="Clear selection" aria-label="Clear selection">
+          <ui-icon>close</ui-icon>
+        </ui-icon-button>
+        <span class="selection-label body-large">${length} selected</span>
+        <ui-icon-button
+          @click="${this.shareSelection}"
+          title="Share selected"
+          aria-label="Share selected"
+          ?disabled="${length !== 1}"
+        >
+          <ui-icon>person_add</ui-icon>
+        </ui-icon-button>
+        <!-- <ui-icon-button>
+          <ui-icon>drive_file_move</ui-icon>
+        </ui-icon-button> -->
+        <ui-icon-button
+          @click="${this.handleDeleteSelected}"
+          title="Move selected to trash"
+          aria-label="Move selected to trash"
+        >
+          <ui-icon>delete</ui-icon>
+        </ui-icon-button>
+      </div>
+    `;
+        }
+        renderHeader() {
+            return html ` ${this.renderBreadcrumbs()}${this.renderAddFileMenu()} `;
+        }
+        renderBreadcrumbs() {
+            const rootName = this.source === 'own' ? 'Files' : 'Shared';
+            return html `
+      <div class="breadcrumbs">
+        <ui-breadcrumbs
+          .breadcrumbs="${this.breadcrumbs}"
+          root-name="${rootName}"
+          @navigate="${this.handleBreadcrumbsNavigate}"
+        ></ui-breadcrumbs>
+      </div>
+    `;
+        }
+        renderAddFileMenu() {
+            const own = this.source === 'own';
+            if (!own) {
+                if (this.parent) {
+                    const caps = this.parent.value?.capabilities;
+                    if (!caps?.canAddChildren) {
+                        return nothing;
+                    }
+                }
+                else {
+                    return nothing;
+                }
+            }
+            return html `
+      <span class="menu-area">
+        <ui-button color="filled" id="new-file-anchor" trailingicon popoverTarget="new-file-menu">
+          Add
+          <ui-icon slot="icon">arrow_drop_down</ui-icon>
+        </ui-button>
+        <ui-menu id="new-file-menu" popover="auto" @select="${this.handleAddMenuSelect}">
+          <ui-menu-item value="folder">
+            <div>Folder</div>
+            <div slot="supporting-text">A folder for your domains</div>
+            <ui-icon slot="start">${folderFilled}</ui-icon>
+          </ui-menu-item>
+          <ui-menu-item value="domain">
+            <div>Domain model</div>
+            <div slot="supporting-text">Define your data</div>
+            <ui-icon slot="start">${schemaModel}</ui-icon>
+          </ui-menu-item>
+          <ui-menu-item value="api">
+            <div>API</div>
+            <div slot="supporting-text">Make data actionable</div>
+            <ui-icon slot="start">${api}</ui-icon>
+          </ui-menu-item>
+          <ui-divider role="separator"></ui-divider>
+          <ui-menu-item value="import">
+            <div>Import data model</div>
+            <div slot="supporting-text">Use well-know domains</div>
+            <ui-icon slot="start">download_2</ui-icon>
+          </ui-menu-item>
+        </ui-menu>
+      </span>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _selectedItems_extraInitializers);
+        }
+    };
+})();
+/**
+ * A component that renders a file system view.
+ * It supports listing files, navigating folders, and performing actions on files.
+ *
+ * The whole logic related to querying files, manipulating them, requesting breadcrumbs
+ * or a parent folder is delegated to the parent component or a controller.
+ *
+ * @fires open-folder - Dispatched when a folder is opened.
+ * @fires open-file - Dispatched when a file is opened.
+ * @fires share-files - Dispatched when files are shared.
+ * @fires file-rename - Dispatched when a file is renamed.
+ * @fires file-move - Dispatched when a file is moved.
+ * @fires file-create - Dispatched when a file create action is triggered.
+ * @fires delete-files - Dispatched when files are deleted.
+ * @fires scroll-end - Dispatched when the scroll end on the data table is reached.
+ */
+export default QuickApiFilesystem;
+//# sourceMappingURL=QuickApiFilesystem.js.map

package/build/src/elements/file-system/internals/QuickApiFilesystem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickApiFilesystem.js","sourceRoot":"","sources":["../../../../../src/elements/file-system/internals/QuickApiFilesystem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { FolderKind } from '@api-client/core/models/kinds.js'\nimport type { FilesSource } from '../../../data/FilesModel.js'\nimport { type FileBreadcrumb, type IFile } from '@api-client/core/models/store/File.js'\nimport type { LiveData } from '../../../reactive/LiveData.js'\nimport { type IOrganization, organizationContext } from '../../../providers/organization.js'\nimport { type IUser, userContext } from '../../../providers/user.js'\nimport { api, folderFilled, schemaModel } from '../../../md/icons/Icons.js'\nimport type { UiMenuItemElement } from '../../../md/menu/ui-menu-item.js'\n\nimport '../../../md/icons/ui-icon.js'\nimport '../../../md/icon-button/ui-icon-button.js'\nimport '../../../md/button/ui-button.js'\nimport '../../../md/divider/ui-divider.js'\nimport '../../../md/menu/ui-menu.js'\nimport '../../../md/menu/ui-menu-item.js'\nimport '../ui-breadcrumbs.js'\nimport '../../data-table/filesystem-table.js'\n\nexport interface QuickApiFilesystemOpenFolderDetails {\n  /**\n   * The key of the folder to open.\n   * When not set, it opens the root folder.\n   */\n  key?: string\n}\n\nexport interface QuickApiFilesystemOpenFileDetail {\n  /**\n   * The key of the file to open.\n   */\n  key: string\n  /**\n   * The kind of the file to open.\n   */\n  kind: string\n}\n\nexport interface QuickApiFilesystemFilesDetail {\n  /**\n   * The keys of files to process.\n   */\n  keys: string[]\n}\n\nexport interface QuickApiFilesystemFileActionDetail {\n  /**\n   * The key of the file.\n   */\n  key: string\n}\n\nexport interface QuickApiFilesystemFileCreateDetail {\n  /**\n   * The action to perform from the \"add file\" menu.\n   */\n  action: 'folder' | 'api' | 'domain' | 'import'\n}\n\n/**\n * The supported file actions.\n */\nexport type FileAction = 'rename' | 'move' | 'delete' | 'share' | 'open'\n\n/**\n * A component that renders a file system view.\n * It supports listing files, navigating folders, and performing actions on files.\n *\n * The whole logic related to querying files, manipulating them, requesting breadcrumbs\n * or a parent folder is delegated to the parent component or a controller.\n *\n * @fires open-folder - Dispatched when a folder is opened.\n * @fires open-file - Dispatched when a file is opened.\n * @fires share-files - Dispatched when files are shared.\n * @fires file-rename - Dispatched when a file is renamed.\n * @fires file-move - Dispatched when a file is moved.\n * @fires file-create - Dispatched when a file create action is triggered.\n * @fires delete-files - Dispatched when files are deleted.\n * @fires scroll-end - Dispatched when the scroll end on the data table is reached.\n */\nexport default class QuickApiFilesystem extends LitElement {\n  /**\n   * What kind of files we render.\n   * @attribute\n   */\n  @property({ type: String })\n  accessor source: FilesSource = 'own'\n  /**\n   * The currently selected organization, if any.\n   *\n   * This property consumes the `organizationContext`.\n   */\n  @property({ type: Object, attribute: false })\n  @consume({ context: organizationContext, subscribe: true })\n  accessor organization: IOrganization | undefined\n\n  /**\n   * The user object to use with the file system.\n   *\n   * This property consumes the `userContext`.\n   */\n  @property({ type: Object, attribute: false })\n  @consume({ context: userContext })\n  accessor user: IUser | undefined\n\n  /**\n   * The list of files to render.\n   */\n  @property({ type: Object })\n  accessor files: LiveData<IFile[]> | undefined\n\n  /**\n   * The breadcrumbs to render.\n   */\n  @property({ type: Object })\n  accessor breadcrumbs: LiveData<FileBreadcrumb[]> | undefined\n\n  /**\n   * The parent folder of the current view.\n   * It is used to compute the permissions for the current view.\n   */\n  @property({ type: Object })\n  accessor parent: LiveData<IFile> | undefined\n\n  /**\n   * The list of currently selected items.\n   */\n  @state()\n  accessor selectedItems: IFile[] = []\n\n  /**\n   * Dispatches the `open-folder` event.\n   *\n   * @param key The key of the folder to open.\n   */\n  protected openFolder(key?: string): void {\n    this.clearSelection()\n    this.dispatchEvent(\n      new CustomEvent<QuickApiFilesystemOpenFolderDetails>('open-folder', {\n        detail: { key },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  /**\n   * Dispatches the `open-file` event.\n   *\n   * @param file The file to open.\n   */\n  protected openFile(file: IFile): void {\n    this.dispatchEvent(\n      new CustomEvent<QuickApiFilesystemOpenFileDetail>('open-file', {\n        detail: { key: file.key, kind: file.kind },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  /**\n   * Dispatches the `share-files` event.\n   *\n   * @param files The list of files to share.\n   */\n  protected shareFiles(files: IFile[]): void {\n    this.dispatchEvent(\n      new CustomEvent<QuickApiFilesystemFilesDetail>('share-files', {\n        detail: { keys: files.map((file) => file.key) },\n      })\n    )\n  }\n\n  /**\n   * Handler for the item activation event from the data table.\n   * Depending on the item kind it opens the folder or the file.\n   *\n   * @param e The activation event.\n   * @throws {Error} When the item kind is unknown.\n   */\n  protected itemActivateHandler(e: CustomEvent<IFile>): void {\n    const item = e.detail\n    const { kind } = item\n    if (kind === FolderKind) {\n      this.openFolder(item.key)\n    } else {\n      this.openFile(item)\n    }\n  }\n\n  /**\n   * Handler for the selection event from the data table.\n   * Updates the `selectedItems` state.\n   *\n   * @param e The selection event.\n   */\n  protected handleTableSelect(e: CustomEvent<{ selectedItems: IFile[] }>): void {\n    this.selectedItems = [...e.detail.selectedItems]\n  }\n\n  /**\n   * Clears the current selection.\n   */\n  clearSelection(): void {\n    this.selectedItems = []\n  }\n\n  /**\n   * Shares the currently selected files.\n   */\n  shareSelection(): void {\n    const { selectedItems } = this\n    this.shareFiles(selectedItems)\n  }\n\n  /**\n   * Removes files from the selection.\n   * @param keys The keys of the files to remove from the selection.\n   */\n  removeFromSelection(keys: string[]): void {\n    const { selectedItems } = this\n    this.selectedItems = selectedItems.filter((item) => !keys.some((key) => key === item.key))\n  }\n\n  /**\n   * Logic to handle file actions from the data table (e.g. rename, delete, share, open).\n   *\n   * @param e The file action event.\n   */\n  protected handleFileAction(e: CustomEvent<{ key: string; action: string }>): void {\n    const { key } = e.detail\n    const action = e.detail.action as FileAction\n\n    switch (action) {\n      case 'rename':\n      case 'move':\n        this.dispatchEvent(\n          new CustomEvent<QuickApiFilesystemFileActionDetail>(`file-${action}`, {\n            detail: { key },\n            bubbles: true,\n            composed: true,\n          })\n        )\n        break\n      case 'delete':\n        this.deleteFiles([key])\n        break\n      case 'share':\n      case 'open': {\n        const item = this.files?.value?.find((item) => item.key === key)\n        if (!item) {\n          return\n        }\n        if (action === 'share') {\n          this.shareFiles([item])\n        } else if (action === 'open') {\n          if (item.kind !== FolderKind) {\n            this.openFile(item)\n          } else {\n            this.openFolder(key)\n          }\n        }\n        break\n      }\n      default:\n      // Unknown action\n    }\n  }\n\n  /**\n   * Handler for the \"add file\" menu selection.\n   * Dispatches the `file-create` event.\n   *\n   * @param e The menu selection event.\n   */\n  protected handleAddMenuSelect(e: CustomEvent<{ item: UiMenuItemElement }>): void {\n    const action = e.detail.item.value as QuickApiFilesystemFileCreateDetail['action'] | undefined\n    if (!action || !['folder', 'api', 'domain', 'import'].includes(action)) {\n      return\n    }\n    this.dispatchEvent(\n      new CustomEvent<QuickApiFilesystemFileCreateDetail>('file-create', {\n        detail: { action },\n      })\n    )\n  }\n\n  /**\n   * Handler for the breadcrumbs navigation event.\n   * Opens the folder corresponding to the breadcrumb.\n   *\n   * @param e The breadcrumb navigation event.\n   */\n  protected handleBreadcrumbsNavigate(e: CustomEvent<FileBreadcrumb>): void {\n    const { key } = e.detail\n    this.openFolder(key)\n  }\n\n  /**\n   * Deletes the currently selected files.\n   */\n  protected handleDeleteSelected(): void {\n    const { selectedItems } = this\n    this.deleteFiles(selectedItems.map((item) => item.key))\n  }\n\n  /**\n   * Deletes a list of files identified by their keys.\n   * Dispatches the `delete-files` event and removes the files from the selection.\n   *\n   * @param keys The keys of the files to delete.\n   */\n  async deleteFiles(keys: string[]): Promise<void> {\n    this.dispatchEvent(\n      new CustomEvent<QuickApiFilesystemFilesDetail>('delete-files', {\n        detail: { keys },\n      })\n    )\n    this.removeFromSelection(keys)\n  }\n\n  protected handleScrollEnd(): void {\n    this.dispatchEvent(new CustomEvent('scroll-end'))\n  }\n\n  protected override render(): TemplateResult {\n    const { selectedItems, files } = this\n    const own = this.source === 'own'\n    const ariaLabel = own ? 'Your files' : 'Shared files'\n    const content = html`\n      <div class=\"section-header\">\n        ${selectedItems && selectedItems.length ? this.renderSelection(selectedItems) : this.renderHeader()}\n      </div>\n      <filesystem-table\n        .oid=\"${this.organization?.key}\"\n        .user=\"${this.user}\"\n        .items=\"${files}\"\n        selection=\"multi\"\n        active\n        sort=\"name\"\n        sortDirection=\"desc\"\n        ariaLabel=\"${ariaLabel}\"\n        .selectedItems=\"${selectedItems}\"\n        @activate=\"${this.itemActivateHandler}\"\n        @select=\"${this.handleTableSelect}\"\n        @rowaction=\"${this.handleFileAction}\"\n        @scrollend=\"${this.handleScrollEnd}\"\n        class=\"table\"\n      >\n        ${own\n          ? html`<p slot=\"empty\" class=\"empty\">You have no files.</p>`\n          : html`<p slot=\"empty\" class=\"empty\">You have no shared files.</p>`}\n      </filesystem-table>\n    `\n    return content\n  }\n\n  protected renderSelection(selected: IFile[]): TemplateResult {\n    const { length } = selected\n    return html`\n      <div class=\"file-selection-info\">\n        <ui-icon-button @click=\"${this.clearSelection}\" title=\"Clear selection\" aria-label=\"Clear selection\">\n          <ui-icon>close</ui-icon>\n        </ui-icon-button>\n        <span class=\"selection-label body-large\">${length} selected</span>\n        <ui-icon-button\n          @click=\"${this.shareSelection}\"\n          title=\"Share selected\"\n          aria-label=\"Share selected\"\n          ?disabled=\"${length !== 1}\"\n        >\n          <ui-icon>person_add</ui-icon>\n        </ui-icon-button>\n        <!-- <ui-icon-button>\n          <ui-icon>drive_file_move</ui-icon>\n        </ui-icon-button> -->\n        <ui-icon-button\n          @click=\"${this.handleDeleteSelected}\"\n          title=\"Move selected to trash\"\n          aria-label=\"Move selected to trash\"\n        >\n          <ui-icon>delete</ui-icon>\n        </ui-icon-button>\n      </div>\n    `\n  }\n\n  protected renderHeader(): TemplateResult {\n    return html` ${this.renderBreadcrumbs()}${this.renderAddFileMenu()} `\n  }\n\n  protected renderBreadcrumbs(): TemplateResult {\n    const rootName = this.source === 'own' ? 'Files' : 'Shared'\n    return html`\n      <div class=\"breadcrumbs\">\n        <ui-breadcrumbs\n          .breadcrumbs=\"${this.breadcrumbs}\"\n          root-name=\"${rootName}\"\n          @navigate=\"${this.handleBreadcrumbsNavigate}\"\n        ></ui-breadcrumbs>\n      </div>\n    `\n  }\n\n  protected renderAddFileMenu(): TemplateResult | typeof nothing {\n    const own = this.source === 'own'\n    if (!own) {\n      if (this.parent) {\n        const caps = this.parent.value?.capabilities\n        if (!caps?.canAddChildren) {\n          return nothing\n        }\n      } else {\n        return nothing\n      }\n    }\n    return html`\n      <span class=\"menu-area\">\n        <ui-button color=\"filled\" id=\"new-file-anchor\" trailingicon popoverTarget=\"new-file-menu\">\n          Add\n          <ui-icon slot=\"icon\">arrow_drop_down</ui-icon>\n        </ui-button>\n        <ui-menu id=\"new-file-menu\" popover=\"auto\" @select=\"${this.handleAddMenuSelect}\">\n          <ui-menu-item value=\"folder\">\n            <div>Folder</div>\n            <div slot=\"supporting-text\">A folder for your domains</div>\n            <ui-icon slot=\"start\">${folderFilled}</ui-icon>\n          </ui-menu-item>\n          <ui-menu-item value=\"domain\">\n            <div>Domain model</div>\n            <div slot=\"supporting-text\">Define your data</div>\n            <ui-icon slot=\"start\">${schemaModel}</ui-icon>\n          </ui-menu-item>\n          <ui-menu-item value=\"api\">\n            <div>API</div>\n            <div slot=\"supporting-text\">Make data actionable</div>\n            <ui-icon slot=\"start\">${api}</ui-icon>\n          </ui-menu-item>\n          <ui-divider role=\"separator\"></ui-divider>\n          <ui-menu-item value=\"import\">\n            <div>Import data model</div>\n            <div slot=\"supporting-text\">Use well-know domains</div>\n            <ui-icon slot=\"start\">download_2</ui-icon>\n          </ui-menu-item>\n        </ui-menu>\n      </span>\n    `\n  }\n}\n"]}

package/build/src/elements/file-system/internals/QuickApiFilesystem.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=QuickApiFilesystem.styles.d.ts.map

package/build/src/elements/file-system/internals/QuickApiFilesystem.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickApiFilesystem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/file-system/internals/QuickApiFilesystem.styles.ts"],"names":[],"mappings":";AAEA,wBA8CC"}

package/build/src/elements/file-system/internals/QuickApiFilesystem.styles.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    flex: 1 0 0;
+    align-self: stretch;
+    align-items: stretch;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+    background: var(--md-sys-color-surface);
+  }
+
+  .menu-area {
+    position: relative;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    color: var(--md-sys-color-on-surface);
+    gap: 12px;
+  }
+
+  .breadcrumbs {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .file-selection-info {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    align-self: stretch;
+    background: var(--md-sys-color-surface-container-high);
+    border-radius: var(--md-sys-shape-corner-extra-large);
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .table {
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+  }
+`;
+//# sourceMappingURL=QuickApiFilesystem.styles.js.map

package/build/src/elements/file-system/internals/QuickApiFilesystem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickApiFilesystem.styles.js","sourceRoot":"","sources":["../../../../../src/elements/file-system/internals/QuickApiFilesystem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: flex;\n    padding: 20px;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n    flex: 1 0 0;\n    align-self: stretch;\n    align-items: stretch;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n    background: var(--md-sys-color-surface);\n  }\n\n  .menu-area {\n    position: relative;\n  }\n\n  .section-header {\n    display: flex;\n    align-items: center;\n    color: var(--md-sys-color-on-surface);\n    gap: 12px;\n  }\n\n  .breadcrumbs {\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .file-selection-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    align-self: stretch;\n    background: var(--md-sys-color-surface-container-high);\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .table {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n  }\n`\n"]}