@api-client/ui 0.5.57 → 0.6.0

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

@@ -0,0 +1,581 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+let ShareFile = (() => {
+    let _classSuper = LitElement;
+    let _userSuggestions_decorators;
+    let _userSuggestions_initializers = [];
+    let _userSuggestions_extraInitializers = [];
+    let _grant_decorators;
+    let _grant_initializers = [];
+    let _grant_extraInitializers = [];
+    let _permissionUsers_decorators;
+    let _permissionUsers_initializers = [];
+    let _permissionUsers_extraInitializers = [];
+    let _permissions_decorators;
+    let _permissions_initializers = [];
+    let _permissions_extraInitializers = [];
+    let _multiple_decorators;
+    let _multiple_initializers = [];
+    let _multiple_extraInitializers = [];
+    let _pending_decorators;
+    let _pending_initializers = [];
+    let _pending_extraInitializers = [];
+    let __addedUsers_decorators;
+    let __addedUsers_initializers = [];
+    let __addedUsers_extraInitializers = [];
+    let _error_decorators;
+    let _error_initializers = [];
+    let _error_extraInitializers = [];
+    return class ShareFile extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _userSuggestions_decorators = [property({ type: Array, attribute: false })];
+            _grant_decorators = [property({ type: String })];
+            _permissionUsers_decorators = [property({ type: Array, attribute: false })];
+            _permissions_decorators = [property({ type: Array, attribute: false })];
+            _multiple_decorators = [property({ type: Boolean })];
+            _pending_decorators = [state()];
+            __addedUsers_decorators = [state()];
+            _error_decorators = [property()];
+            __esDecorate(this, null, _userSuggestions_decorators, { kind: "accessor", name: "userSuggestions", static: false, private: false, access: { has: obj => "userSuggestions" in obj, get: obj => obj.userSuggestions, set: (obj, value) => { obj.userSuggestions = value; } }, metadata: _metadata }, _userSuggestions_initializers, _userSuggestions_extraInitializers);
+            __esDecorate(this, null, _grant_decorators, { kind: "accessor", name: "grant", static: false, private: false, access: { has: obj => "grant" in obj, get: obj => obj.grant, set: (obj, value) => { obj.grant = value; } }, metadata: _metadata }, _grant_initializers, _grant_extraInitializers);
+            __esDecorate(this, null, _permissionUsers_decorators, { kind: "accessor", name: "permissionUsers", static: false, private: false, access: { has: obj => "permissionUsers" in obj, get: obj => obj.permissionUsers, set: (obj, value) => { obj.permissionUsers = value; } }, metadata: _metadata }, _permissionUsers_initializers, _permissionUsers_extraInitializers);
+            __esDecorate(this, null, _permissions_decorators, { kind: "accessor", name: "permissions", static: false, private: false, access: { has: obj => "permissions" in obj, get: obj => obj.permissions, set: (obj, value) => { obj.permissions = value; } }, metadata: _metadata }, _permissions_initializers, _permissions_extraInitializers);
+            __esDecorate(this, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
+            __esDecorate(this, null, _pending_decorators, { kind: "accessor", name: "pending", static: false, private: false, access: { has: obj => "pending" in obj, get: obj => obj.pending, set: (obj, value) => { obj.pending = value; } }, metadata: _metadata }, _pending_initializers, _pending_extraInitializers);
+            __esDecorate(this, null, __addedUsers_decorators, { kind: "accessor", name: "_addedUsers", static: false, private: false, access: { has: obj => "_addedUsers" in obj, get: obj => obj._addedUsers, set: (obj, value) => { obj._addedUsers = value; } }, metadata: _metadata }, __addedUsers_initializers, __addedUsers_extraInitializers);
+            __esDecorate(this, null, _error_decorators, { kind: "accessor", name: "error", static: false, private: false, access: { has: obj => "error" in obj, get: obj => obj.error, set: (obj, value) => { obj.error = value; } }, metadata: _metadata }, _error_initializers, _error_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #userSuggestions_accessor_storage = __runInitializers(this, _userSuggestions_initializers, []
+        /**
+         * The current grant/permission role for new shares.
+         *
+         * @attribute
+         */
+        );
+        /**
+         * The users available for sharing.
+         * This property should be set by the hosting application in response to `search-users` events.
+         */
+        get userSuggestions() { return this.#userSuggestions_accessor_storage; }
+        set userSuggestions(value) { this.#userSuggestions_accessor_storage = value; }
+        #grant_accessor_storage = (__runInitializers(this, _userSuggestions_extraInitializers), __runInitializers(this, _grant_initializers, 'writer'
+        /**
+         * The users that already have permissions.
+         */
+        ));
+        /**
+         * The current grant/permission role for new shares.
+         *
+         * @attribute
+         */
+        get grant() { return this.#grant_accessor_storage; }
+        set grant(value) { this.#grant_accessor_storage = value; }
+        #permissionUsers_accessor_storage = (__runInitializers(this, _grant_extraInitializers), __runInitializers(this, _permissionUsers_initializers, []
+        /**
+         * The existing permissions on the file(s).
+         *
+         * - When there's only one file, this will contain the existing permissions for that file.
+         * - When multiple files are being shared, this will contain the common permissions
+         *   that can be set for all files.
+         */
+        ));
+        /**
+         * The users that already have permissions.
+         */
+        get permissionUsers() { return this.#permissionUsers_accessor_storage; }
+        set permissionUsers(value) { this.#permissionUsers_accessor_storage = value; }
+        #permissions_accessor_storage = (__runInitializers(this, _permissionUsers_extraInitializers), __runInitializers(this, _permissions_initializers, []
+        /**
+         * A flag indicating whether multiple files are being shared.
+         * @attribute
+         */
+        ));
+        /**
+         * The existing permissions on the file(s).
+         *
+         * - When there's only one file, this will contain the existing permissions for that file.
+         * - When multiple files are being shared, this will contain the common permissions
+         *   that can be set for all files.
+         */
+        get permissions() { return this.#permissions_accessor_storage; }
+        set permissions(value) { this.#permissions_accessor_storage = value; }
+        #multiple_accessor_storage = (__runInitializers(this, _permissions_extraInitializers), __runInitializers(this, _multiple_initializers, false
+        /**
+         * Pending operations that haven't been committed yet
+         */
+        ));
+        /**
+         * A flag indicating whether multiple files are being shared.
+         * @attribute
+         */
+        get multiple() { return this.#multiple_accessor_storage; }
+        set multiple(value) { this.#multiple_accessor_storage = value; }
+        #pending_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _pending_initializers, new Map()
+        /**
+         * A map to store user details for pending add operations.
+         */
+        ));
+        /**
+         * Pending operations that haven't been committed yet
+         */
+        get pending() { return this.#pending_accessor_storage; }
+        set pending(value) { this.#pending_accessor_storage = value; }
+        #_addedUsers_accessor_storage = (__runInitializers(this, _pending_extraInitializers), __runInitializers(this, __addedUsers_initializers, new Map()
+        /**
+         * An error message to display when the `currentState` is set to `Error`.
+         * @attribute
+         */
+        ));
+        /**
+         * A map to store user details for pending add operations.
+         */
+        get _addedUsers() { return this.#_addedUsers_accessor_storage; }
+        set _addedUsers(value) { this.#_addedUsers_accessor_storage = value; }
+        #error_accessor_storage = (__runInitializers(this, __addedUsers_extraInitializers), __runInitializers(this, _error_initializers, void 0));
+        /**
+         * An error message to display when the `currentState` is set to `Error`.
+         * @attribute
+         */
+        get error() { return this.#error_accessor_storage; }
+        set error(value) { this.#error_accessor_storage = value; }
+        /**
+         * A handler for the input event on the user search field.
+         * Dispatches the `search-users` event.
+         *
+         * @param event The input event
+         */
+        handleNameInput(event) {
+            const input = event.target;
+            const value = input.value.trim();
+            if (!value) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('search-users', {
+                detail: { query: value },
+                bubbles: false,
+                composed: false,
+            }));
+        }
+        /**
+         * A handler for the keydown event on the user search field.
+         * It focuses on the last selected user when Backspace is pressed and the input is empty.
+         *
+         * @param event The keyboard event
+         */
+        handleNameInputKeydown(event) {
+            if (event.key === 'Backspace') {
+                const input = event.target;
+                if (input.value.length === 0) {
+                    // Check if we have any pending adds (newly selected users)
+                    // Since pending is a Map, we can check size, but we need to ensure they are adds.
+                    const hasAdds = Array.from(this.pending.values()).some((op) => op.op === 'add');
+                    if (hasAdds) {
+                        // If the input is empty and there are selected users, focus the last chip.
+                        const lastChip = this.renderRoot.querySelector('.share-input .chip:last-of-type');
+                        if (lastChip) {
+                            lastChip.focus();
+                        }
+                    }
+                }
+            }
+        }
+        /**
+         * A handler for keydown events on the user suggestions list.
+         * Stops propagation of the Escape key to prevent closing parent dialogs unexpectedly.
+         *
+         * @param event The keyboard event
+         */
+        handleUserSuggestionsKeydown(event) {
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+            }
+        }
+        /**
+         * A handler for the autocomplete event when a user suggestion is selected.
+         * Adds the user to the pending operations and dispatches `pending-changed`.
+         *
+         * @param event The custom event from the autocomplete input containing the selected item
+         */
+        handleUserSuggestion(event) {
+            const { key } = event.detail.item.dataset;
+            if (!key) {
+                return;
+            }
+            const index = this.userSuggestions.findIndex((u) => u.key === key);
+            if (index === -1) {
+                // User not found in suggestions, do nothing.
+                return;
+            }
+            const user = this.userSuggestions[index];
+            if (this.pending.has(user.key)) {
+                // User already in pending, do nothing.
+                return;
+            }
+            const op = {
+                op: 'add',
+                id: user.key,
+                value: this.grant,
+                type: 'user',
+            };
+            this.pending.set(user.key, op);
+            this._addedUsers.set(user.key, user);
+            this.dispatchEvent(new CustomEvent('pending-changed', {
+                detail: { pending: this.pending },
+                composed: true,
+                bubbles: true,
+            }));
+            const input = this.renderRoot.querySelector('.native-input');
+            if (input) {
+                input.value = '';
+            }
+            // Remove from suggestions
+            this.userSuggestions = this.userSuggestions.filter((u) => u.key !== key);
+        }
+        /**
+         * A handler for the remove event on a user chip.
+         * Removing a user chip puts the user back into the suggestions list.
+         *
+         * @param e The event triggered by the chip removal
+         */
+        handleChipClose(e) {
+            const chip = e.target;
+            const key = chip.dataset.key;
+            if (!key) {
+                return;
+            }
+            if (this.pending.has(key)) {
+                this.pending.delete(key);
+                const removedUser = this._addedUsers.get(key);
+                this._addedUsers.delete(key);
+                if (removedUser) {
+                    this.userSuggestions = [...this.userSuggestions, removedUser];
+                }
+                this.dispatchEvent(new CustomEvent('pending-changed', {
+                    detail: { pending: this.pending },
+                    composed: true,
+                    bubbles: true,
+                }));
+            }
+            const input = this.renderRoot.querySelector('.native-input');
+            if (input) {
+                input.focus();
+            }
+        }
+        /**
+         * Focuses the input when the container is clicked to ensure a good UX.
+         *
+         * @param event The mouse event on the container
+         */
+        handleInputContainerClick(event) {
+            const initialTarget = event.composedPath()[0];
+            if (initialTarget.classList.contains('input-container')) {
+                const input = this.renderRoot.querySelector('.native-input');
+                if (input) {
+                    input.focus();
+                }
+            }
+        }
+        /**
+         * Handles the change event of the grant type selector for new shares.
+         * Dispatches `grant-changed`.
+         *
+         * @param e The change event
+         */
+        handleGrantTypeChange(e) {
+            const node = e.currentTarget;
+            const { value } = node;
+            if (!value) {
+                return;
+            }
+            this.grant = value;
+            // Update pending adds with new role
+            let hasChanges = false;
+            for (const [, op] of this.pending) {
+                if (op.op === 'add') {
+                    if (op.value !== this.grant) {
+                        op.value = this.grant;
+                        hasChanges = true;
+                    }
+                }
+            }
+            this.dispatchEvent(new CustomEvent('grant-changed', {
+                detail: { grant: this.grant },
+                composed: true,
+                bubbles: true,
+            }));
+            if (hasChanges) {
+                this.dispatchEvent(new CustomEvent('pending-changed', {
+                    detail: { pending: this.pending },
+                    composed: true,
+                    bubbles: true,
+                }));
+                this.requestUpdate();
+            }
+        }
+        /**
+         * Handles changes to the permission role of an existing user.
+         * Updates the pending operations and dispatches `pending-changed`.
+         *
+         * @param e The change event
+         */
+        handleUserRoleChange(e) {
+            const node = e.currentTarget;
+            const { value, name } = node;
+            if (!value || !name.startsWith('permission-')) {
+                return;
+            }
+            const key = name.replace('permission-', '');
+            const permission = this.permissions.find((p) => p.granteeId === key);
+            if (!permission) {
+                return;
+            }
+            if (value === 'remove') {
+                const patch = {
+                    op: 'remove',
+                    id: permission.key,
+                    type: permission.type,
+                };
+                this.pending.set(permission.key, patch);
+            }
+            else {
+                const newRole = value;
+                if (newRole === permission.role) {
+                    this.pending.delete(permission.key);
+                }
+                else {
+                    const patch = {
+                        op: 'update',
+                        id: permission.key,
+                        type: permission.type,
+                        value: newRole,
+                    };
+                    this.pending.set(permission.key, patch);
+                }
+            }
+            this.dispatchEvent(new CustomEvent('pending-changed', {
+                detail: { pending: this.pending },
+                composed: true,
+                bubbles: true,
+            }));
+            this.requestUpdate();
+        }
+        render() {
+            return html `${this.renderIntro()} ${this.renderInput()} ${this.renderPeopleWithAccess()}`;
+        }
+        /**
+         * Renders the introductory text based on single or multiple file sharing.
+         */
+        renderIntro() {
+            if (this.multiple) {
+                return html `<p>Share the selected files with other users in your organization.</p>`;
+            }
+            return html `<p>Share the file with other users in your organization.</p>`;
+        }
+        /**
+         * Renders the main input area including chips, text input and grant type selector.
+         */
+        renderInput() {
+            const addedUsers = Array.from(this.pending.values())
+                .filter((op) => op.op === 'add')
+                .map((op) => this._addedUsers.get(op.id)) // op.id is key/granteeId for add ops
+                .filter((u) => !!u);
+            return html `<div class="share-input">
+      <autocomplete-input
+        class="autocomplete"
+        @keydown="${this.handleUserSuggestionsKeydown}"
+        @autocomplete="${this.handleUserSuggestion}"
+      >
+        <div slot="anchor" class="input-container" @click="${this.handleInputContainerClick}">
+          ${addedUsers.map((user) => this.renderChip(user))}
+          <input
+            slot="input"
+            class="native-input"
+            type="text"
+            name="input"
+            autocomplete="off"
+            placeholder="Enter name or email"
+            @input="${this.handleNameInput}"
+            @keydown="${this.handleNameInputKeydown}"
+          />
+        </div>
+        ${this.renderUserSuggestions()}
+      </autocomplete-input>
+      ${this.renderGrantTypeSelector()}
+    </div>`;
+        }
+        /**
+         * Renders the list of user suggestions for autocomplete.
+         */
+        renderUserSuggestions() {
+            if (this.userSuggestions.length === 0) {
+                return nothing;
+            }
+            return html `<ui-listbox class="user-suggestions" slot="suggestions" aria-label="User suggestions">
+      ${this.userSuggestions.map((user) => this.renderSuggestion(user))}
+    </ui-listbox>`;
+        }
+        /**
+         * Renders a single user suggestion item.
+         * @param user The user object to render
+         */
+        renderSuggestion(user) {
+            const email = user.email[0]?.email || '';
+            return html `<ui-list-item
+      lines="two"
+      image="avatar"
+      data-key="${user.key}"
+      data-name="${user.name}"
+      data-email="${email}"
+      data-index="name email"
+    >
+      <div>${user.name}</div>
+      <div slot="supporting-text">${email}</div>
+      <ui-user-avatar slot="start" class="avatar body-medium" .user="${user}" type="icon"></ui-user-avatar>
+    </ui-list-item>`;
+        }
+        /**
+         * Renders a chip for a selected user.
+         * @param user The user object to render
+         */
+        renderChip(user) {
+            return html `<ui-chip class="chip" type="input" data-key="${user.key}" removable @remove="${this.handleChipClose}">
+      <ui-user-avatar slot="avatar" class="avatar body-medium" .user="${user}" type="icon"></ui-user-avatar>
+      ${user.name}
+    </ui-chip>`;
+        }
+        /**
+         * Renders the grant type selector (Writer/Reader) for new shares.
+         */
+        renderGrantTypeSelector() {
+            const hasAdds = Array.from(this.pending.values()).some((op) => op.op === 'add');
+            if (!hasAdds) {
+                return nothing;
+            }
+            return html `
+      <ui-select
+        label="Access type"
+        class="grant-type-input"
+        name="grantType"
+        .value="${this.grant}"
+        @change="${this.handleGrantTypeChange}"
+      >
+        <ui-option value="writer">
+          <div>Writer</div>
+        </ui-option>
+        <ui-option value="reader">
+          <div>Reader</div>
+        </ui-option>
+      </ui-select>
+    `;
+        }
+        /**
+         * Renders the section showing people who already have access.
+         */
+        renderPeopleWithAccess() {
+            const hasAdds = Array.from(this.pending.values()).some((op) => op.op === 'add');
+            if (this.permissions.length === 0 || hasAdds) {
+                return nothing;
+            }
+            return html `<div class="people-with-access section">
+      <h3 class="title-medium">People with access</h3>
+      <ui-list class="people-list" aria-label="People with access">
+        ${this.permissions.map((permission) => this.renderPermission(permission))}
+      </ui-list>
+    </div>`;
+        }
+        /**
+         * Renders a permission item/row for an existing user.
+         * @param permission The permission object
+         */
+        renderPermission(permission) {
+            const user = this.permissionUsers.find((u) => u.key === permission.granteeId);
+            if (!user) {
+                // User not found, this should generally not happen, unless the user was deleted
+                // or deactivated.
+                return html `<ui-list-item static class="deactivated"><div class="label">Deactivated user</div></ui-list-item>`;
+            }
+            const email = user.email[0]?.email || '';
+            const pending = this.pending.get(permission.key);
+            const classes = {
+                'removed': pending?.op === 'remove',
+                'permission-item': true,
+            };
+            return html `<ui-list-item lines="two" image="avatar" static class="${classMap(classes)}">
+      <div class="permission-user-name">${user.name}</div>
+      <div class="permission-user-email" slot="supporting-text">${email}</div>
+      <ui-user-avatar slot="start" class="avatar body-medium" .user="${user}" type="icon"></ui-user-avatar>
+      <div slot="end" class="permission-role">${this.renderSharedUserOptions(user, permission)}</div>
+    </ui-list-item>`;
+        }
+        /**
+         * Renders the role selector for an existing permission.
+         * @param user The user associated with the permission
+         * @param permission The permission object
+         */
+        renderSharedUserOptions(user, permission) {
+            const { key } = user;
+            if (permission.role === 'owner') {
+                // Owners cannot change their own permissions.
+                // The owner permission can only be changed by transferring ownership to another user.
+                return html `<span class="immutable-permission">Owner</span>`;
+            }
+            const pending = this.pending.get(permission.key);
+            let value = permission.role;
+            if (pending) {
+                if (pending.op === 'remove') {
+                    value = 'remove';
+                }
+                else if (pending.op === 'update') {
+                    value = pending.value;
+                }
+            }
+            return html `<ui-select
+      class="grant-type-input"
+      name="permission-${key}"
+      .value="${value}"
+      @change="${this.handleUserRoleChange}"
+      data-key="${key}"
+    >
+      <ui-option value="writer">
+        <div>Writer</div>
+      </ui-option>
+      <ui-option value="reader">
+        <div>Reader</div>
+      </ui-option>
+      <ui-divider></ui-divider>
+      <ui-option value="remove">
+        <div>Remove access</div>
+      </ui-option>
+    </ui-select>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _error_extraInitializers);
+        }
+    };
+})();
+/**
+ * An element that manages the internal state and logic for sharing a file.
+ *
+ * This component handles the different states of the file sharing process, including initialization,
+ * readiness, error handling, and committing changes. However, the component does not implement any API calls.
+ * The hosting application is responsible for performing the actual file sharing operations.
+ *
+ * The component is not 100% complete. Pending features include:
+ * - Permissions on groups.
+ * - Sharing with the organization.
+ * - Moving ownership to another user.
+ *
+ * @fires search-users - Dispatched when the user types in the search input.
+ *                     The detail object contains the `query` string.
+ * @fires grant-changed - Dispatched when the grant type for new shares is changed.
+ *                      The detail object contains the `grant` role.
+ * @fires pending-changed - Dispatched when a permission change for an existing user is staged.
+ *                        The detail object contains the `pending` map of operations.
+ */
+export default ShareFile;
+//# sourceMappingURL=ShareFile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShareFile.js","sourceRoot":"","sources":["../../../../../src/elements/file-system/internals/ShareFile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, nothing } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport type {\n  AccessOperation,\n  IAccessAddOperation,\n  IAccessRemoveOperation,\n  IAccessUpdateOperation,\n  IPermission,\n} from '@api-client/core/models/store/Permission.js'\nimport type { IUser } from '@api-client/core/models/store/User.js'\nimport type { PermissionRole } from '@api-client/core/models/store/Permission.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\n\n/**\n * An element that manages the internal state and logic for sharing a file.\n *\n * This component handles the different states of the file sharing process, including initialization,\n * readiness, error handling, and committing changes. However, the component does not implement any API calls.\n * The hosting application is responsible for performing the actual file sharing operations.\n *\n * The component is not 100% complete. Pending features include:\n * - Permissions on groups.\n * - Sharing with the organization.\n * - Moving ownership to another user.\n *\n * @fires search-users - Dispatched when the user types in the search input.\n *                     The detail object contains the `query` string.\n * @fires grant-changed - Dispatched when the grant type for new shares is changed.\n *                      The detail object contains the `grant` role.\n * @fires pending-changed - Dispatched when a permission change for an existing user is staged.\n *                        The detail object contains the `pending` map of operations.\n */\nexport default class ShareFile extends LitElement {\n  /**\n   * The users available for sharing.\n   * This property should be set by the hosting application in response to `search-users` events.\n   */\n  @property({ type: Array, attribute: false })\n  accessor userSuggestions: IUser[] = []\n\n  /**\n   * The current grant/permission role for new shares.\n   *\n   * @attribute\n   */\n  @property({ type: String })\n  accessor grant: PermissionRole = 'writer'\n\n  /**\n   * The users that already have permissions.\n   */\n  @property({ type: Array, attribute: false })\n  accessor permissionUsers: IUser[] = []\n\n  /**\n   * The existing permissions on the file(s).\n   *\n   * - When there's only one file, this will contain the existing permissions for that file.\n   * - When multiple files are being shared, this will contain the common permissions\n   *   that can be set for all files.\n   */\n  @property({ type: Array, attribute: false })\n  accessor permissions: IPermission[] = []\n\n  /**\n   * A flag indicating whether multiple files are being shared.\n   * @attribute\n   */\n  @property({ type: Boolean })\n  accessor multiple = false\n\n  /**\n   * Pending operations that haven't been committed yet\n   */\n  @state()\n  accessor pending = new Map<string, AccessOperation>()\n\n  /**\n   * A map to store user details for pending add operations.\n   */\n  @state()\n  protected accessor _addedUsers = new Map<string, IUser>()\n\n  /**\n   * An error message to display when the `currentState` is set to `Error`.\n   * @attribute\n   */\n  @property() accessor error: string | undefined\n\n  /**\n   * A handler for the input event on the user search field.\n   * Dispatches the `search-users` event.\n   *\n   * @param event The input event\n   */\n  protected handleNameInput(event: InputEvent): void {\n    const input = event.target as HTMLInputElement\n    const value = input.value.trim()\n    if (!value) {\n      return\n    }\n    this.dispatchEvent(\n      new CustomEvent('search-users', {\n        detail: { query: value },\n        bubbles: false,\n        composed: false,\n      })\n    )\n  }\n\n  /**\n   * A handler for the keydown event on the user search field.\n   * It focuses on the last selected user when Backspace is pressed and the input is empty.\n   *\n   * @param event The keyboard event\n   */\n  protected handleNameInputKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Backspace') {\n      const input = event.target as HTMLInputElement\n      if (input.value.length === 0) {\n        // Check if we have any pending adds (newly selected users)\n        // Since pending is a Map, we can check size, but we need to ensure they are adds.\n        const hasAdds = Array.from(this.pending.values()).some((op) => op.op === 'add')\n        if (hasAdds) {\n          // If the input is empty and there are selected users, focus the last chip.\n          const lastChip = this.renderRoot.querySelector<HTMLElement>('.share-input .chip:last-of-type')\n          if (lastChip) {\n            lastChip.focus()\n          }\n        }\n      }\n    }\n  }\n\n  /**\n   * A handler for keydown events on the user suggestions list.\n   * Stops propagation of the Escape key to prevent closing parent dialogs unexpectedly.\n   *\n   * @param event The keyboard event\n   */\n  protected handleUserSuggestionsKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation()\n    }\n  }\n\n  /**\n   * A handler for the autocomplete event when a user suggestion is selected.\n   * Adds the user to the pending operations and dispatches `pending-changed`.\n   *\n   * @param event The custom event from the autocomplete input containing the selected item\n   */\n  protected handleUserSuggestion(event: CustomEvent<{ item: HTMLElement }>): void {\n    const { key } = event.detail.item.dataset\n    if (!key) {\n      return\n    }\n    const index = this.userSuggestions.findIndex((u) => u.key === key)\n    if (index === -1) {\n      // User not found in suggestions, do nothing.\n      return\n    }\n    const user = this.userSuggestions[index]\n    if (this.pending.has(user.key)) {\n      // User already in pending, do nothing.\n      return\n    }\n\n    const op: IAccessAddOperation = {\n      op: 'add',\n      id: user.key,\n      value: this.grant,\n      type: 'user',\n    }\n\n    this.pending.set(user.key, op)\n    this._addedUsers.set(user.key, user)\n\n    this.dispatchEvent(\n      new CustomEvent('pending-changed', {\n        detail: { pending: this.pending },\n        composed: true,\n        bubbles: true,\n      })\n    )\n\n    const input = this.renderRoot.querySelector<HTMLInputElement>('.native-input')\n    if (input) {\n      input.value = ''\n    }\n    // Remove from suggestions\n    this.userSuggestions = this.userSuggestions.filter((u) => u.key !== key)\n  }\n\n  /**\n   * A handler for the remove event on a user chip.\n   * Removing a user chip puts the user back into the suggestions list.\n   *\n   * @param e The event triggered by the chip removal\n   */\n  protected handleChipClose(e: Event): void {\n    const chip = e.target as HTMLElement\n    const key = chip.dataset.key\n    if (!key) {\n      return\n    }\n\n    if (this.pending.has(key)) {\n      this.pending.delete(key)\n      const removedUser = this._addedUsers.get(key)\n      this._addedUsers.delete(key)\n\n      if (removedUser) {\n        this.userSuggestions = [...this.userSuggestions, removedUser]\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('pending-changed', {\n          detail: { pending: this.pending },\n          composed: true,\n          bubbles: true,\n        })\n      )\n    }\n\n    const input = this.renderRoot.querySelector<HTMLInputElement>('.native-input')\n    if (input) {\n      input.focus()\n    }\n  }\n\n  /**\n   * Focuses the input when the container is clicked to ensure a good UX.\n   *\n   * @param event The mouse event on the container\n   */\n  protected handleInputContainerClick(event: MouseEvent): void {\n    const initialTarget = event.composedPath()[0] as HTMLElement\n    if (initialTarget.classList.contains('input-container')) {\n      const input = this.renderRoot.querySelector<HTMLInputElement>('.native-input')\n      if (input) {\n        input.focus()\n      }\n    }\n  }\n\n  /**\n   * Handles the change event of the grant type selector for new shares.\n   * Dispatches `grant-changed`.\n   *\n   * @param e The change event\n   */\n  protected handleGrantTypeChange(e: Event): void {\n    const node = e.currentTarget as HTMLSelectElement\n    const { value } = node\n    if (!value) {\n      return\n    }\n    this.grant = value as PermissionRole\n\n    // Update pending adds with new role\n    let hasChanges = false\n    for (const [, op] of this.pending) {\n      if (op.op === 'add') {\n        if (op.value !== this.grant) {\n          op.value = this.grant\n          hasChanges = true\n        }\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('grant-changed', {\n        detail: { grant: this.grant },\n        composed: true,\n        bubbles: true,\n      })\n    )\n\n    if (hasChanges) {\n      this.dispatchEvent(\n        new CustomEvent('pending-changed', {\n          detail: { pending: this.pending },\n          composed: true,\n          bubbles: true,\n        })\n      )\n      this.requestUpdate()\n    }\n  }\n\n  /**\n   * Handles changes to the permission role of an existing user.\n   * Updates the pending operations and dispatches `pending-changed`.\n   *\n   * @param e The change event\n   */\n  protected handleUserRoleChange(e: Event): void {\n    const node = e.currentTarget as HTMLSelectElement\n    const { value, name } = node\n    if (!value || !name.startsWith('permission-')) {\n      return\n    }\n    const key = name.replace('permission-', '')\n    const permission = this.permissions.find((p) => p.granteeId === key)\n    if (!permission) {\n      return\n    }\n    if (value === 'remove') {\n      const patch: IAccessRemoveOperation = {\n        op: 'remove',\n        id: permission.key,\n        type: permission.type,\n      }\n      this.pending.set(permission.key, patch)\n    } else {\n      const newRole = value as PermissionRole\n      if (newRole === permission.role) {\n        this.pending.delete(permission.key)\n      } else {\n        const patch: IAccessUpdateOperation = {\n          op: 'update',\n          id: permission.key,\n          type: permission.type,\n          value: newRole,\n        }\n        this.pending.set(permission.key, patch)\n      }\n    }\n    this.dispatchEvent(\n      new CustomEvent('pending-changed', {\n        detail: { pending: this.pending },\n        composed: true,\n        bubbles: true,\n      })\n    )\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult {\n    return html`${this.renderIntro()} ${this.renderInput()} ${this.renderPeopleWithAccess()}`\n  }\n\n  /**\n   * Renders the introductory text based on single or multiple file sharing.\n   */\n  protected renderIntro(): TemplateResult {\n    if (this.multiple) {\n      return html`<p>Share the selected files with other users in your organization.</p>`\n    }\n    return html`<p>Share the file with other users in your organization.</p>`\n  }\n\n  /**\n   * Renders the main input area including chips, text input and grant type selector.\n   */\n  protected renderInput(): TemplateResult {\n    const addedUsers = Array.from(this.pending.values())\n      .filter((op) => op.op === 'add')\n      .map((op) => this._addedUsers.get(op.id)) // op.id is key/granteeId for add ops\n      .filter((u): u is IUser => !!u)\n\n    return html`<div class=\"share-input\">\n      <autocomplete-input\n        class=\"autocomplete\"\n        @keydown=\"${this.handleUserSuggestionsKeydown}\"\n        @autocomplete=\"${this.handleUserSuggestion}\"\n      >\n        <div slot=\"anchor\" class=\"input-container\" @click=\"${this.handleInputContainerClick}\">\n          ${addedUsers.map((user) => this.renderChip(user))}\n          <input\n            slot=\"input\"\n            class=\"native-input\"\n            type=\"text\"\n            name=\"input\"\n            autocomplete=\"off\"\n            placeholder=\"Enter name or email\"\n            @input=\"${this.handleNameInput}\"\n            @keydown=\"${this.handleNameInputKeydown}\"\n          />\n        </div>\n        ${this.renderUserSuggestions()}\n      </autocomplete-input>\n      ${this.renderGrantTypeSelector()}\n    </div>`\n  }\n\n  /**\n   * Renders the list of user suggestions for autocomplete.\n   */\n  protected renderUserSuggestions(): TemplateResult | typeof nothing {\n    if (this.userSuggestions.length === 0) {\n      return nothing\n    }\n    return html`<ui-listbox class=\"user-suggestions\" slot=\"suggestions\" aria-label=\"User suggestions\">\n      ${this.userSuggestions.map((user) => this.renderSuggestion(user))}\n    </ui-listbox>`\n  }\n\n  /**\n   * Renders a single user suggestion item.\n   * @param user The user object to render\n   */\n  protected renderSuggestion(user: IUser): TemplateResult {\n    const email = user.email[0]?.email || ''\n    return html`<ui-list-item\n      lines=\"two\"\n      image=\"avatar\"\n      data-key=\"${user.key}\"\n      data-name=\"${user.name}\"\n      data-email=\"${email}\"\n      data-index=\"name email\"\n    >\n      <div>${user.name}</div>\n      <div slot=\"supporting-text\">${email}</div>\n      <ui-user-avatar slot=\"start\" class=\"avatar body-medium\" .user=\"${user}\" type=\"icon\"></ui-user-avatar>\n    </ui-list-item>`\n  }\n\n  /**\n   * Renders a chip for a selected user.\n   * @param user The user object to render\n   */\n  protected renderChip(user: IUser): TemplateResult {\n    return html`<ui-chip class=\"chip\" type=\"input\" data-key=\"${user.key}\" removable @remove=\"${this.handleChipClose}\">\n      <ui-user-avatar slot=\"avatar\" class=\"avatar body-medium\" .user=\"${user}\" type=\"icon\"></ui-user-avatar>\n      ${user.name}\n    </ui-chip>`\n  }\n\n  /**\n   * Renders the grant type selector (Writer/Reader) for new shares.\n   */\n  protected renderGrantTypeSelector(): TemplateResult | typeof nothing {\n    const hasAdds = Array.from(this.pending.values()).some((op) => op.op === 'add')\n    if (!hasAdds) {\n      return nothing\n    }\n    return html`\n      <ui-select\n        label=\"Access type\"\n        class=\"grant-type-input\"\n        name=\"grantType\"\n        .value=\"${this.grant}\"\n        @change=\"${this.handleGrantTypeChange}\"\n      >\n        <ui-option value=\"writer\">\n          <div>Writer</div>\n        </ui-option>\n        <ui-option value=\"reader\">\n          <div>Reader</div>\n        </ui-option>\n      </ui-select>\n    `\n  }\n\n  /**\n   * Renders the section showing people who already have access.\n   */\n  protected renderPeopleWithAccess(): TemplateResult | typeof nothing {\n    const hasAdds = Array.from(this.pending.values()).some((op) => op.op === 'add')\n    if (this.permissions.length === 0 || hasAdds) {\n      return nothing\n    }\n    return html`<div class=\"people-with-access section\">\n      <h3 class=\"title-medium\">People with access</h3>\n      <ui-list class=\"people-list\" aria-label=\"People with access\">\n        ${this.permissions.map((permission) => this.renderPermission(permission))}\n      </ui-list>\n    </div>`\n  }\n\n  /**\n   * Renders a permission item/row for an existing user.\n   * @param permission The permission object\n   */\n  protected renderPermission(permission: IPermission): TemplateResult {\n    const user = this.permissionUsers.find((u) => u.key === permission.granteeId)\n    if (!user) {\n      // User not found, this should generally not happen, unless the user was deleted\n      // or deactivated.\n      return html`<ui-list-item static class=\"deactivated\"><div class=\"label\">Deactivated user</div></ui-list-item>`\n    }\n    const email = user.email[0]?.email || ''\n\n    const pending = this.pending.get(permission.key)\n    const classes: ClassInfo = {\n      'removed': pending?.op === 'remove',\n      'permission-item': true,\n    }\n\n    return html`<ui-list-item lines=\"two\" image=\"avatar\" static class=\"${classMap(classes)}\">\n      <div class=\"permission-user-name\">${user.name}</div>\n      <div class=\"permission-user-email\" slot=\"supporting-text\">${email}</div>\n      <ui-user-avatar slot=\"start\" class=\"avatar body-medium\" .user=\"${user}\" type=\"icon\"></ui-user-avatar>\n      <div slot=\"end\" class=\"permission-role\">${this.renderSharedUserOptions(user, permission)}</div>\n    </ui-list-item>`\n  }\n\n  /**\n   * Renders the role selector for an existing permission.\n   * @param user The user associated with the permission\n   * @param permission The permission object\n   */\n  protected renderSharedUserOptions(user: IUser, permission: IPermission): TemplateResult {\n    const { key } = user\n    if (permission.role === 'owner') {\n      // Owners cannot change their own permissions.\n      // The owner permission can only be changed by transferring ownership to another user.\n      return html`<span class=\"immutable-permission\">Owner</span>`\n    }\n    const pending = this.pending.get(permission.key)\n    let value = permission.role as string\n    if (pending) {\n      if (pending.op === 'remove') {\n        value = 'remove'\n      } else if (pending.op === 'update') {\n        value = (pending as IAccessUpdateOperation).value\n      }\n    }\n    return html`<ui-select\n      class=\"grant-type-input\"\n      name=\"permission-${key}\"\n      .value=\"${value}\"\n      @change=\"${this.handleUserRoleChange}\"\n      data-key=\"${key}\"\n    >\n      <ui-option value=\"writer\">\n        <div>Writer</div>\n      </ui-option>\n      <ui-option value=\"reader\">\n        <div>Reader</div>\n      </ui-option>\n      <ui-divider></ui-divider>\n      <ui-option value=\"remove\">\n        <div>Remove access</div>\n      </ui-option>\n    </ui-select>`\n  }\n}\n"]}

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

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

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

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