@api-client/ui 0.5.58 → 0.6.0

package/build/src/elements/data-table/internals/FilesystemDataTable.js

@@ -0,0 +1,230 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html } from 'lit';
+import { DataTable } from '../DataTable.js';
+import { property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
+import { FolderKind } from '@api-client/core/models/kinds.js';
+import { relativeDay } from '../../../lib/time/Conversion.js';
+import { fileIcon } from '../../../lib/files/Utils.js';
+import services from '../../../services/api_service.js';
+let FilesystemDataTable = (() => {
+    let _classSuper = DataTable;
+    let _user_decorators;
+    let _user_initializers = [];
+    let _user_extraInitializers = [];
+    let _oid_decorators;
+    let _oid_initializers = [];
+    let _oid_extraInitializers = [];
+    return class FilesystemDataTable extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _user_decorators = [property({ type: Object })];
+            _oid_decorators = [property({ type: String })];
+            __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, _oid_decorators, { kind: "accessor", name: "oid", static: false, private: false, access: { has: obj => "oid" in obj, get: obj => obj.oid, set: (obj, value) => { obj.oid = value; } }, metadata: _metadata }, _oid_initializers, _oid_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #user_accessor_storage = __runInitializers(this, _user_initializers, void 0);
+        /**
+         * The currently logged in user.
+         */
+        get user() { return this.#user_accessor_storage; }
+        set user(value) { this.#user_accessor_storage = value; }
+        #oid_accessor_storage = (__runInitializers(this, _user_extraInitializers), __runInitializers(this, _oid_initializers, void 0));
+        /**
+         * The organization ID these files belongs to.
+         * @attribute
+         */
+        get oid() { return this.#oid_accessor_storage; }
+        set oid(value) { this.#oid_accessor_storage = value; }
+        handleFileMenuSelect(e) {
+            const { item } = e.detail;
+            const menu = e.currentTarget;
+            const { key } = menu.dataset;
+            if (!key) {
+                return;
+            }
+            if (!item.value) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('rowaction', { detail: { key, action: item.value } }));
+        }
+        renderEmpty() {
+            return html `<slot name="empty"><p class="empty">You have no files.</p></slot>`;
+        }
+        renderHeader() {
+            return [
+                this.renderHeaderCell('Name', 0, { sort: 'name' }),
+                this.renderHeaderCell('Owner', 1),
+                this.renderHeaderCell('Updated', 2),
+                this.renderHeaderCell(html `<span hidden aria-label="Row options">Menu</span>`, 3, { delegateFocus: true }),
+            ];
+        }
+        renderRowValues(item, index) {
+            return [
+                this.#nameCell(item, index, 0),
+                this.#ownerCell(item, index, 1),
+                this.#updatedCell(item, index, 2),
+                this.renderCell(this.#renderFileMenu(item), index, 3, { classes: ['actions'], delegateFocus: true }),
+            ];
+        }
+        #nameCell(item, row, col) {
+            const icon = fileIcon(item);
+            const content = html `<ui-icon class="cell-icon" role="presentation">${icon}</ui-icon> ${item.info.name}`;
+            return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true });
+        }
+        #ownerCell(item, row, col) {
+            const opts = {
+                classes: ['owner'],
+            };
+            const { user } = this;
+            if (!user) {
+                return this.renderCell(html `--`, row, col, opts);
+            }
+            const owner = item.permissions.find((p) => p.role === 'owner' && p.depth === 0);
+            if (!owner) {
+                return this.renderCell(html `<span aria-label="Unknown permission">--</span>`, row, col, opts);
+            }
+            if (owner.granteeId === user.key) {
+                return this.renderCell(html `<ui-user-avatar role="presentation" class="avatar body-small" .user="${user}" type="icon"></ui-user-avatar
+          ><span aria-label="Owned by me" class="user-label">me</span>`, row, col, opts);
+            }
+            const content = this.#ownerCellAsync(owner.granteeId);
+            const loader = html `<span class="owner-loading">loading...</span>`;
+            return this.renderCell(html `${until(content, loader)}`, row, col, opts);
+        }
+        async #ownerCellAsync(key) {
+            if (!key) {
+                return html ` <span aria-label="Owned by unknown user">invalid state</span> `;
+            }
+            // @TODO: Use a context provider and decouple from services singleton
+            const cache = await services.get('userCache');
+            const user = await cache.getUser(key);
+            if (!user) {
+                return html ` <span aria-label="Owned by unknown user">unknown</span> `;
+            }
+            return html `<ui-user-avatar
+        role="presentation"
+        class="avatar body-small"
+        .user="${user}"
+        type="icon"
+      ></ui-user-avatar
+      ><span aria-label="Owned by ${user.name}" class="user-label">${user.name}</span>`;
+        }
+        #updatedCell(item, row, col) {
+            const opts = {
+                classes: ['updated'],
+            };
+            const { lastModified } = item;
+            const relative = relativeDay(lastModified.time);
+            return this.renderCell(html `<span>${relative}</span>`, row, col, opts);
+        }
+        #renderFileMenu(item) {
+            return item.kind === FolderKind ? this.#renderFolderOptions(item) : this.#renderFileOptions(item);
+        }
+        #renderFolderOptions(item) {
+            const { key } = item;
+            return html `
+      <ui-icon-button
+        data-key="${key}"
+        id="anchor-${key}"
+        aria-controls="menu-${key}"
+        tabindex="-1"
+        popoverTarget="menu-${key}"
+      >
+        <ui-icon>more_vert</ui-icon>
+      </ui-icon-button>
+      <ui-menu
+        class="item-menu"
+        popover="auto"
+        id="menu-${key}"
+        data-key="${key}"
+        @select="${this.handleFileMenuSelect}"
+      >
+        <ui-menu-item value="open">
+          <div>Open</div>
+          <ui-icon slot="start">folder_open</ui-icon>
+        </ui-menu-item>
+        <ui-menu-item value="share">
+          <div>Share</div>
+          <ui-icon slot="start">person_add</ui-icon>
+        </ui-menu-item>
+        <ui-divider role="separator"></ui-divider>
+        <!-- <ui-menu-item value="move">
+          <div>Move</div>
+          <ui-icon slot="start">drive_file_move</ui-icon>
+        </ui-menu-item> -->
+        <ui-menu-item value="rename">
+          <div>Rename</div>
+          <ui-icon slot="start">edit</ui-icon>
+        </ui-menu-item>
+        <ui-divider role="separator"></ui-divider>
+        <ui-menu-item value="delete">
+          <div>Delete</div>
+          <ui-icon slot="start">delete</ui-icon>
+        </ui-menu-item>
+      </ui-menu>
+    `;
+        }
+        #renderFileOptions(item) {
+            const { key } = item;
+            return html `
+      <ui-icon-button
+        data-key="${key}"
+        id="anchor-${key}"
+        aria-controls="menu-${key}"
+        tabindex="-1"
+        popoverTarget="menu-${key}"
+      >
+        <ui-icon>more_vert</ui-icon>
+      </ui-icon-button>
+      <ui-menu
+        class="item-menu"
+        popover="auto"
+        id="menu-${key}"
+        data-key="${key}"
+        @select="${this.handleFileMenuSelect}"
+      >
+        <ui-menu-item value="open">
+          <div>Open</div>
+          <ui-icon slot="start">open_in_new</ui-icon>
+        </ui-menu-item>
+        <ui-menu-item value="share">
+          <div>Share</div>
+          <ui-icon slot="start">person_add</ui-icon>
+        </ui-menu-item>
+        <ui-divider role="separator"></ui-divider>
+        <!-- <ui-menu-item value="move">
+          <div>Move</div>
+          <ui-icon slot="start">drive_file_move</ui-icon>
+        </ui-menu-item> -->
+        <ui-menu-item value="rename">
+          <div>Rename</div>
+          <ui-icon slot="start">edit</ui-icon>
+        </ui-menu-item>
+        <ui-divider role="separator"></ui-divider>
+        <ui-menu-item value="delete">
+          <div>Delete</div>
+          <ui-icon slot="start">delete</ui-icon>
+        </ui-menu-item>
+      </ui-menu>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _oid_extraInitializers);
+        }
+    };
+})();
+/**
+ * A class that render QuickAPI file system.
+ * The user can browse files and perform actions on them.
+ *
+ * @fires rowaction Dispatched when the user triggers an action on the file.
+ *     - `detail`: An object with a `key` and `action` property
+ *     - Example: `{ key: 'abc', action: 'delete' }`
+ * @attribute sort
+ * @attribute sortDirection
+ */
+export default FilesystemDataTable;
+//# sourceMappingURL=FilesystemDataTable.js.map

package/build/src/elements/data-table/internals/FilesystemDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilesystemDataTable.js","sourceRoot":"","sources":["../../../../../src/elements/data-table/internals/FilesystemDataTable.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAA0B,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAE7D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,QAAQ,MAAM,kCAAkC,CAAA;;sBAaN,SAAS;;;;;;;iBAArC,mBAAoB,SAAQ,WAAgB;;;gCAI9D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+BAK1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YALC,iKAAS,IAAI,6BAAJ,IAAI,mFAAmB;YAKhC,8JAAS,GAAG,6BAAH,GAAG,iFAAoB;;;QALhC,6EAAgC;QAH5D;;WAEG;QACyB,IAAS,IAAI,0CAAmB;QAAhC,IAAS,IAAI,gDAAmB;QAKhC,+HAAgC;QAJ5D;;;WAGG;QACyB,IAAS,GAAG,yCAAoB;QAAhC,IAAS,GAAG,+CAAoB;QAKlD,oBAAoB,CAAC,CAA2C;YACxE,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YACzB,MAAM,IAAI,GAAG,CAAC,CAAC,aAA8B,CAAA;YAC7C,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;YAC5B,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,OAAM;YACR,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,OAAM;YACR,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;QAC3F,CAAC;QAEQ,WAAW;YAClB,OAAO,IAAI,CAAA,mEAAmE,CAAA;QAChF,CAAC;QAEQ,YAAY;YACnB,OAAO;gBACL,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gBAClD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC;gBACjC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC;gBACnC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAA,mDAAmD,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;aAC3G,CAAA;QACH,CAAC;QAEQ,eAAe,CAAC,IAAW,EAAE,KAAa;YACjD,OAAO;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;gBAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;gBAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;gBACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;aACrG,CAAA;QACH,CAAC;QAED,SAAS,CAAC,IAAW,EAAE,GAAW,EAAE,GAAW;YAC7C,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC3B,MAAM,OAAO,GAAG,IAAI,CAAA,kDAAkD,IAAI,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;YACxG,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,cAAc,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;QAC3F,CAAC;QAED,UAAU,CAAC,IAAW,EAAE,GAAW,EAAE,GAAW;YAC9C,MAAM,IAAI,GAAsB;gBAC9B,OAAO,EAAE,CAAC,OAAO,CAAC;aACnB,CAAA;YACD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;YACrB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAA,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;YAClD,CAAC;YACD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAA;YAC/E,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAA,iDAAiD,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;YAC/F,CAAC;YACD,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;gBACjC,OAAO,IAAI,CAAC,UAAU,CACpB,IAAI,CAAA,wEAAwE,IAAI;uEACjB,EAC/D,GAAG,EACH,GAAG,EACH,IAAI,CACL,CAAA;YACH,CAAC;YACD,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;YACrD,MAAM,MAAM,GAAG,IAAI,CAAA,+CAA+C,CAAA;YAClE,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAA,GAAG,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;QACzE,CAAC;QAED,KAAK,CAAC,eAAe,CAAC,GAAW;YAC/B,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,OAAO,IAAI,CAAA,iEAAiE,CAAA;YAC9E,CAAC;YACD,qEAAqE;YACrE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;YAC7C,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YACrC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO,IAAI,CAAA,2DAA2D,CAAA;YACxE,CAAC;YACD,OAAO,IAAI,CAAA;;;iBAGE,IAAI;;;oCAGe,IAAI,CAAC,IAAI,wBAAwB,IAAI,CAAC,IAAI,SAAS,CAAA;QACrF,CAAC;QAED,YAAY,CAAC,IAAW,EAAE,GAAW,EAAE,GAAW;YAChD,MAAM,IAAI,GAAsB;gBAC9B,OAAO,EAAE,CAAC,SAAS,CAAC;aACrB,CAAA;YACD,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAA;YAC7B,MAAM,QAAQ,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;YAC/C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAA,SAAS,QAAQ,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;QACxE,CAAC;QAED,eAAe,CAAC,IAAW;YACzB,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAA;QACnG,CAAC;QAED,oBAAoB,CAAC,IAAW;YAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;YACpB,OAAO,IAAI,CAAA;;oBAEK,GAAG;qBACF,GAAG;8BACM,GAAG;;8BAEH,GAAG;;;;;;;mBAOd,GAAG;oBACF,GAAG;mBACJ,IAAI,CAAC,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAA;QACH,CAAC;QAED,kBAAkB,CAAC,IAAW;YAC5B,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;YACpB,OAAO,IAAI,CAAA;;oBAEK,GAAG;qBACF,GAAG;8BACM,GAAG;;8BAEH,GAAG;;;;;;;mBAOd,GAAG;oBACF,GAAG;mBACJ,IAAI,CAAC,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAA;QACH,CAAC;;;;;;;AAnNH;;;;;;;;;GASG;AACH,mCA0MC","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { type CellRenderOptions, DataTable } from '../DataTable.js'\nimport { property } from 'lit/decorators.js'\nimport { until } from 'lit/directives/until.js'\nimport type { IFile } from '@api-client/core/models/store/File.js'\nimport type { IUser } from '@api-client/core/models/store/User.js'\nimport { FolderKind } from '@api-client/core/models/kinds.js'\nimport { LiveData } from '../../../reactive/LiveData.js'\nimport { relativeDay } from '../../../lib/time/Conversion.js'\nimport type { UiMenuElement } from '../../../md/menu/ui-menu.js'\nimport { fileIcon } from '../../../lib/files/Utils.js'\nimport services from '../../../services/api_service.js'\nimport type { UiMenuItemElement } from '../../../md/menu/ui-menu-item.js'\n\n/**\n * A class that render QuickAPI file system.\n * The user can browse files and perform actions on them.\n *\n * @fires rowaction Dispatched when the user triggers an action on the file.\n *     - `detail`: An object with a `key` and `action` property\n *     - Example: `{ key: 'abc', action: 'delete' }`\n * @attribute sort\n * @attribute sortDirection\n */\nexport default class FilesystemDataTable extends DataTable<IFile> {\n  /**\n   * The currently logged in user.\n   */\n  @property({ type: Object }) accessor user: IUser | undefined\n  /**\n   * The organization ID these files belongs to.\n   * @attribute\n   */\n  @property({ type: String }) accessor oid: string | undefined\n\n  // @ts-expect-error This is to explicitly declare the type as LitPlugin does not handle this situation.\n  declare items: LiveData<IFile[]> | undefined\n\n  protected handleFileMenuSelect(e: CustomEvent<{ item: UiMenuItemElement }>): void {\n    const { item } = e.detail\n    const menu = e.currentTarget as UiMenuElement\n    const { key } = menu.dataset\n    if (!key) {\n      return\n    }\n    if (!item.value) {\n      return\n    }\n    this.dispatchEvent(new CustomEvent('rowaction', { detail: { key, action: item.value } }))\n  }\n\n  override renderEmpty(): TemplateResult {\n    return html`<slot name=\"empty\"><p class=\"empty\">You have no files.</p></slot>`\n  }\n\n  override renderHeader(): TemplateResult[] {\n    return [\n      this.renderHeaderCell('Name', 0, { sort: 'name' }),\n      this.renderHeaderCell('Owner', 1),\n      this.renderHeaderCell('Updated', 2),\n      this.renderHeaderCell(html`<span hidden aria-label=\"Row options\">Menu</span>`, 3, { delegateFocus: true }),\n    ]\n  }\n\n  override renderRowValues(item: IFile, index: number): TemplateResult[] {\n    return [\n      this.#nameCell(item, index, 0),\n      this.#ownerCell(item, index, 1),\n      this.#updatedCell(item, index, 2),\n      this.renderCell(this.#renderFileMenu(item), index, 3, { classes: ['actions'], delegateFocus: true }),\n    ]\n  }\n\n  #nameCell(item: IFile, row: number, col: number): TemplateResult {\n    const icon = fileIcon(item)\n    const content = html`<ui-icon class=\"cell-icon\" role=\"presentation\">${icon}</ui-icon> ${item.info.name}`\n    return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true })\n  }\n\n  #ownerCell(item: IFile, row: number, col: number): TemplateResult {\n    const opts: CellRenderOptions = {\n      classes: ['owner'],\n    }\n    const { user } = this\n    if (!user) {\n      return this.renderCell(html`--`, row, col, opts)\n    }\n    const owner = item.permissions.find((p) => p.role === 'owner' && p.depth === 0)\n    if (!owner) {\n      return this.renderCell(html`<span aria-label=\"Unknown permission\">--</span>`, row, col, opts)\n    }\n    if (owner.granteeId === user.key) {\n      return this.renderCell(\n        html`<ui-user-avatar role=\"presentation\" class=\"avatar body-small\" .user=\"${user}\" type=\"icon\"></ui-user-avatar\n          ><span aria-label=\"Owned by me\" class=\"user-label\">me</span>`,\n        row,\n        col,\n        opts\n      )\n    }\n    const content = this.#ownerCellAsync(owner.granteeId)\n    const loader = html`<span class=\"owner-loading\">loading...</span>`\n    return this.renderCell(html`${until(content, loader)}`, row, col, opts)\n  }\n\n  async #ownerCellAsync(key: string): Promise<TemplateResult> {\n    if (!key) {\n      return html` <span aria-label=\"Owned by unknown user\">invalid state</span> `\n    }\n    // @TODO: Use a context provider and decouple from services singleton\n    const cache = await services.get('userCache')\n    const user = await cache.getUser(key)\n    if (!user) {\n      return html` <span aria-label=\"Owned by unknown user\">unknown</span> `\n    }\n    return html`<ui-user-avatar\n        role=\"presentation\"\n        class=\"avatar body-small\"\n        .user=\"${user}\"\n        type=\"icon\"\n      ></ui-user-avatar\n      ><span aria-label=\"Owned by ${user.name}\" class=\"user-label\">${user.name}</span>`\n  }\n\n  #updatedCell(item: IFile, row: number, col: number): TemplateResult {\n    const opts: CellRenderOptions = {\n      classes: ['updated'],\n    }\n    const { lastModified } = item\n    const relative = relativeDay(lastModified.time)\n    return this.renderCell(html`<span>${relative}</span>`, row, col, opts)\n  }\n\n  #renderFileMenu(item: IFile): TemplateResult {\n    return item.kind === FolderKind ? this.#renderFolderOptions(item) : this.#renderFileOptions(item)\n  }\n\n  #renderFolderOptions(item: IFile): TemplateResult {\n    const { key } = item\n    return html`\n      <ui-icon-button\n        data-key=\"${key}\"\n        id=\"anchor-${key}\"\n        aria-controls=\"menu-${key}\"\n        tabindex=\"-1\"\n        popoverTarget=\"menu-${key}\"\n      >\n        <ui-icon>more_vert</ui-icon>\n      </ui-icon-button>\n      <ui-menu\n        class=\"item-menu\"\n        popover=\"auto\"\n        id=\"menu-${key}\"\n        data-key=\"${key}\"\n        @select=\"${this.handleFileMenuSelect}\"\n      >\n        <ui-menu-item value=\"open\">\n          <div>Open</div>\n          <ui-icon slot=\"start\">folder_open</ui-icon>\n        </ui-menu-item>\n        <ui-menu-item value=\"share\">\n          <div>Share</div>\n          <ui-icon slot=\"start\">person_add</ui-icon>\n        </ui-menu-item>\n        <ui-divider role=\"separator\"></ui-divider>\n        <!-- <ui-menu-item value=\"move\">\n          <div>Move</div>\n          <ui-icon slot=\"start\">drive_file_move</ui-icon>\n        </ui-menu-item> -->\n        <ui-menu-item value=\"rename\">\n          <div>Rename</div>\n          <ui-icon slot=\"start\">edit</ui-icon>\n        </ui-menu-item>\n        <ui-divider role=\"separator\"></ui-divider>\n        <ui-menu-item value=\"delete\">\n          <div>Delete</div>\n          <ui-icon slot=\"start\">delete</ui-icon>\n        </ui-menu-item>\n      </ui-menu>\n    `\n  }\n\n  #renderFileOptions(item: IFile): TemplateResult {\n    const { key } = item\n    return html`\n      <ui-icon-button\n        data-key=\"${key}\"\n        id=\"anchor-${key}\"\n        aria-controls=\"menu-${key}\"\n        tabindex=\"-1\"\n        popoverTarget=\"menu-${key}\"\n      >\n        <ui-icon>more_vert</ui-icon>\n      </ui-icon-button>\n      <ui-menu\n        class=\"item-menu\"\n        popover=\"auto\"\n        id=\"menu-${key}\"\n        data-key=\"${key}\"\n        @select=\"${this.handleFileMenuSelect}\"\n      >\n        <ui-menu-item value=\"open\">\n          <div>Open</div>\n          <ui-icon slot=\"start\">open_in_new</ui-icon>\n        </ui-menu-item>\n        <ui-menu-item value=\"share\">\n          <div>Share</div>\n          <ui-icon slot=\"start\">person_add</ui-icon>\n        </ui-menu-item>\n        <ui-divider role=\"separator\"></ui-divider>\n        <!-- <ui-menu-item value=\"move\">\n          <div>Move</div>\n          <ui-icon slot=\"start\">drive_file_move</ui-icon>\n        </ui-menu-item> -->\n        <ui-menu-item value=\"rename\">\n          <div>Rename</div>\n          <ui-icon slot=\"start\">edit</ui-icon>\n        </ui-menu-item>\n        <ui-divider role=\"separator\"></ui-divider>\n        <ui-menu-item value=\"delete\">\n          <div>Delete</div>\n          <ui-icon slot=\"start\">delete</ui-icon>\n        </ui-menu-item>\n      </ui-menu>\n    `\n  }\n}\n"]}

package/build/src/elements/data-table/internals/TrashDataTable.d.ts

@@ -0,0 +1,32 @@
+import { TemplateResult } from 'lit';
+import { DataTable } from '../DataTable.js';
+import { LiveData } from '../../../reactive/LiveData.js';
+import type { TrashEntry } from '@api-client/core/models/TrashEntry.js';
+import type { IUser } from '@api-client/core/models/store/User.js';
+import type { UiMenuItemElement } from '../../../md/menu/ui-menu-item.js';
+import '../../../md/icon-button/ui-icon-button.js';
+import '../../../md/icons/ui-icon.js';
+import '../../../md/menu/ui-menu.js';
+import '../../../md/menu/ui-menu-item.js';
+/**
+ * A class that render QuickAPI file's trash.
+ *
+ * @fires rowaction - Dispatched when the user triggers an action on the item.
+ *     - `detail`: An object with a `key` and `action` property
+ *     - Example: `{ key: 'abc', action: 'delete' }`
+ * @attribute sort
+ * @attribute sortDirection
+ */
+export default class TrashDataTable extends DataTable<TrashEntry> {
+    #private;
+    accessor user: IUser | undefined;
+    accessor oid: string | undefined;
+    items: LiveData<TrashEntry[]> | undefined;
+    handleFileMenuSelect(e: CustomEvent<{
+        item: UiMenuItemElement;
+    }>): void;
+    renderEmpty(): TemplateResult;
+    renderHeader(): TemplateResult[];
+    renderRowValues(item: TrashEntry, index: number): TemplateResult[];
+}
+//# sourceMappingURL=TrashDataTable.d.ts.map

package/build/src/elements/data-table/internals/TrashDataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrashDataTable.d.ts","sourceRoot":"","sources":["../../../../../src/elements/data-table/internals/TrashDataTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAA0B,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAA;AAKlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAEzE,OAAO,2CAA2C,CAAA;AAClD,OAAO,8BAA8B,CAAA;AACrC,OAAO,6BAA6B,CAAA;AACpC,OAAO,kCAAkC,CAAA;AAEzC;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS,CAAC,UAAU,CAAC;;IACnC,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAGpD,KAAK,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,GAAG,SAAS,CAAA;IAEjD,oBAAoB,CAAC,CAAC,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,iBAAiB,CAAA;KAAE,CAAC,GAAG,IAAI;IAa9D,WAAW,IAAI,cAAc;IAI7B,YAAY,IAAI,cAAc,EAAE;IAShC,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE;CAgG5E"}

package/build/src/elements/data-table/internals/TrashDataTable.js

@@ -0,0 +1,161 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html } from 'lit';
+import { DataTable } from '../DataTable.js';
+import { property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
+import { relativeDay } from '../../../lib/time/Conversion.js';
+import { fileIcon } from '../../../lib/files/Utils.js';
+import services from '../../../services/api_service.js';
+import '../../../md/icon-button/ui-icon-button.js';
+import '../../../md/icons/ui-icon.js';
+import '../../../md/menu/ui-menu.js';
+import '../../../md/menu/ui-menu-item.js';
+let TrashDataTable = (() => {
+    let _classSuper = DataTable;
+    let _user_decorators;
+    let _user_initializers = [];
+    let _user_extraInitializers = [];
+    let _oid_decorators;
+    let _oid_initializers = [];
+    let _oid_extraInitializers = [];
+    return class TrashDataTable extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _user_decorators = [property({ type: Object })];
+            _oid_decorators = [property({ type: String })];
+            __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, _oid_decorators, { kind: "accessor", name: "oid", static: false, private: false, access: { has: obj => "oid" in obj, get: obj => obj.oid, set: (obj, value) => { obj.oid = value; } }, metadata: _metadata }, _oid_initializers, _oid_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #user_accessor_storage = __runInitializers(this, _user_initializers, void 0);
+        get user() { return this.#user_accessor_storage; }
+        set user(value) { this.#user_accessor_storage = value; }
+        #oid_accessor_storage = (__runInitializers(this, _user_extraInitializers), __runInitializers(this, _oid_initializers, void 0));
+        get oid() { return this.#oid_accessor_storage; }
+        set oid(value) { this.#oid_accessor_storage = value; }
+        handleFileMenuSelect(e) {
+            const menu = e.currentTarget;
+            const { key } = menu.dataset;
+            if (!key) {
+                return;
+            }
+            const action = e.detail.item.value;
+            if (!action) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('rowaction', { detail: { key, action } }));
+        }
+        renderEmpty() {
+            return html `<slot name="empty"><p class="empty">You have no trash.</p></slot>`;
+        }
+        renderHeader() {
+            return [
+                this.renderHeaderCell('Name', 0, { sort: 'name' }),
+                this.renderHeaderCell('Owner', 1),
+                this.renderHeaderCell('Trashed date', 2),
+                this.renderHeaderCell(html `<span hidden aria-label="Row options">Menu</span>`, 3, { delegateFocus: true }),
+            ];
+        }
+        renderRowValues(item, index) {
+            return [
+                this.#nameCell(item, index, 0),
+                this.#ownerCell(item, index, 1),
+                this.#updatedCell(item, index, 2),
+                this.renderCell(this.#renderEntryMenu(item), index, 3, { classes: ['actions'], delegateFocus: true }),
+            ];
+        }
+        #nameCell(item, row, col) {
+            const icon = fileIcon(item);
+            const content = html `<ui-icon class="cell-icon" role="presentation">${icon}</ui-icon> ${item.info.name}`;
+            return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true });
+        }
+        #ownerCell(item, row, col) {
+            const opts = {
+                classes: ['owner'],
+            };
+            const { user } = this;
+            if (!user) {
+                return this.renderCell(html `--`, row, col, opts);
+            }
+            if (item.info.byMe) {
+                return this.renderCell(html `<ui-user-avatar role="presentation" class="avatar body-small" .user="${user}" type="icon"></ui-user-avatar
+          ><span aria-label="Owned by me" class="user-label">me</span>`, row, col, opts);
+            }
+            const content = this.#ownerCellAsync(item.info.user);
+            const loader = html `<span class="owner-loading">loading...</span>`;
+            return this.renderCell(html `${until(content, loader)}`, row, col, opts);
+        }
+        async #ownerCellAsync(key) {
+            if (!key) {
+                return html ` <span aria-label="Owned by unknown user">unknown</span> `;
+            }
+            // @TODO: Use a context provider and decouple from services singleton
+            const cache = await services.get('userCache');
+            const user = await cache.getUser(key);
+            if (!user) {
+                return html ` <span aria-label="Owned by unknown user">unknown</span> `;
+            }
+            return html `<ui-user-avatar
+        role="presentation"
+        class="avatar body-small"
+        .user="${user}"
+        type="icon"
+      ></ui-user-avatar
+      ><span aria-label="Owned by ${user.name}" class="user-label">${user.name}</span>`;
+        }
+        #updatedCell(item, row, col) {
+            const opts = {
+                classes: ['updated'],
+            };
+            const { time } = item.info;
+            const relative = relativeDay(time);
+            return this.renderCell(html `<span>${relative}</span>`, row, col, opts);
+        }
+        #renderEntryMenu(item) {
+            const { key } = item;
+            return html `
+      <ui-icon-button
+        data-key="${key}"
+        id="anchor-${key}"
+        aria-controls="menu-${key}"
+        tabindex="-1"
+        popoverTarget="menu-${key}"
+        aria-label="More options for ${item.info.name}"
+      >
+        <ui-icon>more_vert</ui-icon>
+      </ui-icon-button>
+      <ui-menu
+        class="item-menu"
+        popover="auto"
+        id="menu-${key}"
+        data-key="${key}"
+        @select="${this.handleFileMenuSelect}"
+      >
+        <ui-menu-item value="restore">
+          <div>Restore</div>
+          <ui-icon slot="start">restore_page</ui-icon>
+        </ui-menu-item>
+        <ui-menu-item value="delete">
+          <div>Delete forever</div>
+          <ui-icon slot="start">delete_forever</ui-icon>
+        </ui-menu-item>
+      </ui-menu>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _oid_extraInitializers);
+        }
+    };
+})();
+/**
+ * A class that render QuickAPI file's trash.
+ *
+ * @fires rowaction - Dispatched when the user triggers an action on the item.
+ *     - `detail`: An object with a `key` and `action` property
+ *     - Example: `{ key: 'abc', action: 'delete' }`
+ * @attribute sort
+ * @attribute sortDirection
+ */
+export default TrashDataTable;
+//# sourceMappingURL=TrashDataTable.js.map

package/build/src/elements/data-table/internals/TrashDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrashDataTable.js","sourceRoot":"","sources":["../../../../../src/elements/data-table/internals/TrashDataTable.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { type CellRenderOptions, DataTable } from '../DataTable.js'\nimport { property } from 'lit/decorators.js'\nimport { until } from 'lit/directives/until.js'\nimport { LiveData } from '../../../reactive/LiveData.js'\nimport type { TrashEntry } from '@api-client/core/models/TrashEntry.js'\nimport type { IUser } from '@api-client/core/models/store/User.js'\nimport { relativeDay } from '../../../lib/time/Conversion.js'\nimport type { UiMenuElement } from '../../../md/menu/ui-menu.js'\nimport { fileIcon } from '../../../lib/files/Utils.js'\nimport services from '../../../services/api_service.js'\nimport type { UiMenuItemElement } from '../../../md/menu/ui-menu-item.js'\n\nimport '../../../md/icon-button/ui-icon-button.js'\nimport '../../../md/icons/ui-icon.js'\nimport '../../../md/menu/ui-menu.js'\nimport '../../../md/menu/ui-menu-item.js'\n\n/**\n * A class that render QuickAPI file's trash.\n *\n * @fires rowaction - Dispatched when the user triggers an action on the item.\n *     - `detail`: An object with a `key` and `action` property\n *     - Example: `{ key: 'abc', action: 'delete' }`\n * @attribute sort\n * @attribute sortDirection\n */\nexport default class TrashDataTable extends DataTable<TrashEntry> {\n  @property({ type: Object }) accessor user: IUser | undefined\n  @property({ type: String }) accessor oid: string | undefined\n\n  // @ts-expect-error This is to explicitly declare a type as LitPlugin does not handle this situation.\n  declare items: LiveData<TrashEntry[]> | undefined\n\n  handleFileMenuSelect(e: CustomEvent<{ item: UiMenuItemElement }>): void {\n    const menu = e.currentTarget as UiMenuElement\n    const { key } = menu.dataset\n    if (!key) {\n      return\n    }\n    const action = e.detail.item.value\n    if (!action) {\n      return\n    }\n    this.dispatchEvent(new CustomEvent('rowaction', { detail: { key, action } }))\n  }\n\n  override renderEmpty(): TemplateResult {\n    return html`<slot name=\"empty\"><p class=\"empty\">You have no trash.</p></slot>`\n  }\n\n  override renderHeader(): TemplateResult[] {\n    return [\n      this.renderHeaderCell('Name', 0, { sort: 'name' }),\n      this.renderHeaderCell('Owner', 1),\n      this.renderHeaderCell('Trashed date', 2),\n      this.renderHeaderCell(html`<span hidden aria-label=\"Row options\">Menu</span>`, 3, { delegateFocus: true }),\n    ]\n  }\n\n  override renderRowValues(item: TrashEntry, index: number): TemplateResult[] {\n    return [\n      this.#nameCell(item, index, 0),\n      this.#ownerCell(item, index, 1),\n      this.#updatedCell(item, index, 2),\n      this.renderCell(this.#renderEntryMenu(item), index, 3, { classes: ['actions'], delegateFocus: true }),\n    ]\n  }\n\n  #nameCell(item: TrashEntry, row: number, col: number): TemplateResult {\n    const icon = fileIcon(item)\n    const content = html`<ui-icon class=\"cell-icon\" role=\"presentation\">${icon}</ui-icon> ${item.info.name}`\n    return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true })\n  }\n\n  #ownerCell(item: TrashEntry, row: number, col: number): TemplateResult {\n    const opts: CellRenderOptions = {\n      classes: ['owner'],\n    }\n    const { user } = this\n    if (!user) {\n      return this.renderCell(html`--`, row, col, opts)\n    }\n    if (item.info.byMe) {\n      return this.renderCell(\n        html`<ui-user-avatar role=\"presentation\" class=\"avatar body-small\" .user=\"${user}\" type=\"icon\"></ui-user-avatar\n          ><span aria-label=\"Owned by me\" class=\"user-label\">me</span>`,\n        row,\n        col,\n        opts\n      )\n    }\n    const content = this.#ownerCellAsync(item.info.user)\n    const loader = html`<span class=\"owner-loading\">loading...</span>`\n    return this.renderCell(html`${until(content, loader)}`, row, col, opts)\n  }\n\n  async #ownerCellAsync(key?: string): Promise<TemplateResult> {\n    if (!key) {\n      return html` <span aria-label=\"Owned by unknown user\">unknown</span> `\n    }\n    // @TODO: Use a context provider and decouple from services singleton\n    const cache = await services.get('userCache')\n    const user = await cache.getUser(key)\n    if (!user) {\n      return html` <span aria-label=\"Owned by unknown user\">unknown</span> `\n    }\n    return html`<ui-user-avatar\n        role=\"presentation\"\n        class=\"avatar body-small\"\n        .user=\"${user}\"\n        type=\"icon\"\n      ></ui-user-avatar\n      ><span aria-label=\"Owned by ${user.name}\" class=\"user-label\">${user.name}</span>`\n  }\n\n  #updatedCell(item: TrashEntry, row: number, col: number): TemplateResult {\n    const opts: CellRenderOptions = {\n      classes: ['updated'],\n    }\n    const { time } = item.info\n    const relative = relativeDay(time)\n    return this.renderCell(html`<span>${relative}</span>`, row, col, opts)\n  }\n\n  #renderEntryMenu(item: TrashEntry): TemplateResult {\n    const { key } = item\n    return html`\n      <ui-icon-button\n        data-key=\"${key}\"\n        id=\"anchor-${key}\"\n        aria-controls=\"menu-${key}\"\n        tabindex=\"-1\"\n        popoverTarget=\"menu-${key}\"\n        aria-label=\"More options for ${item.info.name}\"\n      >\n        <ui-icon>more_vert</ui-icon>\n      </ui-icon-button>\n      <ui-menu\n        class=\"item-menu\"\n        popover=\"auto\"\n        id=\"menu-${key}\"\n        data-key=\"${key}\"\n        @select=\"${this.handleFileMenuSelect}\"\n      >\n        <ui-menu-item value=\"restore\">\n          <div>Restore</div>\n          <ui-icon slot=\"start\">restore_page</ui-icon>\n        </ui-menu-item>\n        <ui-menu-item value=\"delete\">\n          <div>Delete forever</div>\n          <ui-icon slot=\"start\">delete_forever</ui-icon>\n        </ui-menu-item>\n      </ui-menu>\n    `\n  }\n}\n"]}

package/build/src/elements/data-table/internals/UserData.styles.d.ts

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

package/build/src/elements/data-table/internals/UserData.styles.d.ts.map

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

package/build/src/elements/data-table/internals/UserData.styles.js

@@ -0,0 +1,16 @@
+import { css } from 'lit';
+export default css `
+  .user-link,
+  .email-link {
+    color: var(--md-sys-color-primary);
+  }
+
+  .grid-cell.actions {
+    width: 48px;
+  }
+
+  .item-menu {
+    min-width: 200px;
+  }
+`;
+//# sourceMappingURL=UserData.styles.js.map

package/build/src/elements/data-table/internals/UserData.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserData.styles.js","sourceRoot":"","sources":["../../../../../src/elements/data-table/internals/UserData.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;CAajB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  .user-link,\n  .email-link {\n    color: var(--md-sys-color-primary);\n  }\n\n  .grid-cell.actions {\n    width: 48px;\n  }\n\n  .item-menu {\n    min-width: 200px;\n  }\n`\n"]}

package/build/src/elements/data-table/internals/UsersDataTable.d.ts

@@ -0,0 +1,30 @@
+import { TemplateResult } from 'lit';
+import { DataTable } from '../DataTable.js';
+import type { OrgUser } from '../../../data/UsersModel.js';
+import type { LiveData } from '../../../reactive/LiveData.js';
+import type { UiMenuItemElement } from '../../../md/menu/ui-menu-item.js';
+import '../../../md/icon-button/ui-icon-button.js';
+import '../../../md/icons/ui-icon.js';
+import '../../../md/divider/ui-divider.js';
+import '../../../md/menu/ui-menu.js';
+import '../../../md/menu/ui-menu-item.js';
+/**
+ * @fires rowaction - When a menu item is clicked, this event is fired with the user key, kind, and action.
+ */
+export default class UsersDataTable extends DataTable<OrgUser> {
+    #private;
+    /**
+     * The current user id.
+     */
+    accessor current: string | undefined;
+    get items(): LiveData<OrgUser[]> | undefined;
+    set items(value: LiveData<OrgUser[]> | undefined);
+    constructor();
+    handleTableClick(e: Event): void;
+    handleMenuSelect(e: CustomEvent<{
+        item: UiMenuItemElement;
+    }>): void;
+    renderHeader(): TemplateResult[];
+    renderRowValues(item: OrgUser, index: number): TemplateResult[];
+}
+//# sourceMappingURL=UsersDataTable.d.ts.map

package/build/src/elements/data-table/internals/UsersDataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersDataTable.d.ts","sourceRoot":"","sources":["../../../../../src/elements/data-table/internals/UsersDataTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAG7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAEzE,OAAO,2CAA2C,CAAA;AAClD,OAAO,8BAA8B,CAAA;AACrC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,6BAA6B,CAAA;AACpC,OAAO,kCAAkC,CAAA;AAEzC;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS,CAAC,OAAO,CAAC;;IAC5D;;OAEG;IACyB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAEhE,IAAa,KAAK,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC,GAAG,SAAS,CAEpD;IAED,IAAa,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,GAAG,SAAS,EAExD;;IAOD,gBAAgB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAehC,gBAAgB,CAAC,CAAC,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,iBAAiB,CAAA;KAAE,CAAC,GAAG,IAAI;IAa1D,YAAY,IAAI,cAAc,EAAE;IAUhC,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE;CAgKzE"}