@sinequa/atomic-angular 2.0.0 → 2.2.0

package/fesm2022/sinequa-atomic-angular-document-workspaces.mjs

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, Pipe, ViewEncapsulation, afterNextRender, assertInInjectionContext, booleanAttribute, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, Pipe, ViewEncapsulation, afterNextRender, assertInInjectionContext, booleanAttribute, computed, effect, forwardRef, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
 import { withDevtools } from "@angular-architects/ngrx-toolkit";
 import { patchState, signalStore, withComputed, withMethods, withState } from "@ngrx/signals";
-import { ApiError, addContainerDocuments, createContainer, createHeaders, deleteContainerDocuments, deleteContainers, fetchPreview, fetchPrincipal, fetchPrincipalsByIds, fetchUploadStatus, getContainer, globalConfig, listContainerDocuments, listContainers, onAuthEvent, searchPrincipals, tryAutoAuthentication, updateContainer } from "@sinequa/atomic";
+import { ApiError, addWorkspaceDocuments, createHeaders, createWorkspace, deleteWorkspaceDocuments, deleteWorkspaces, fetchPreview, fetchPrincipal, fetchPrincipalsByIds, fetchUploadStatus, getWorkspace, globalConfig, listWorkspaceDocuments, listWorkspaces, onAuthEvent, searchPrincipals, tryAutoAuthentication, updateWorkspace } from "@sinequa/atomic";
 import { Upload } from "tus-js-client";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
@@ -31,7 +31,7 @@ function workspaceColorFor(id) {
 	for (let i = 0; i < id.length; i++) hash = hash * 31 + id.charCodeAt(i) | 0;
 	return PALETTE[Math.abs(hash) % PALETTE.length];
 }
-function mapContainerToWorkspace(dto) {
+function mapWireWorkspaceToWorkspace(dto) {
 	return {
 		id: dto.id,
 		name: dto.name,
@@ -57,12 +57,12 @@ function mapDocumentStatus(status) {
 		default: return;
 	}
 }
-function mapContainerDocumentToWorkspaceDocument(dto) {
+function mapWireDocumentToWorkspaceDocument(dto) {
 	const wire = dto;
 	return {
 		id: dto.id,
 		name: dto.name,
-		workspaceId: dto.containerId,
+		workspaceId: dto.workspaceId,
 		type: getDocumentType(dto.name),
 		createdAt: dto.createdAt ?? void 0,
 		status: mapDocumentStatus(wire.status),
@@ -119,11 +119,11 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 		});
 	};
 	const loadDocuments = async (workspaceId, signal) => {
-		const res = await listContainerDocuments(workspaceId, {
+		const res = await listWorkspaceDocuments(workspaceId, {
 			page: 1,
 			pageSize: PAGE_SIZE
 		}, { signal });
-		const documents = res.documents.map(mapContainerDocumentToWorkspaceDocument);
+		const documents = res.documents.map(mapWireDocumentToWorkspaceDocument);
 		patchState(store, (state) => ({ documentPagination: {
 			...state.documentPagination,
 			[workspaceId]: {
@@ -143,12 +143,12 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 	const load = async () => {
 		patchState(store, { loading: true });
 		try {
-			const res = await listContainers({
+			const res = await listWorkspaces({
 				page: 1,
 				pageSize: PAGE_SIZE
 			});
 			patchState(store, {
-				workspaces: res.containers.map(mapContainerToWorkspace),
+				workspaces: res.workspaces.map(mapWireWorkspaceToWorkspace),
 				pagination: {
 					page: res.page,
 					total: res.total
@@ -187,13 +187,13 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 				try {
 					const current = store.workspaces();
 					const page = Math.min(store.pagination().page + 1, Math.floor(current.length / PAGE_SIZE) + 1);
-					const res = await listContainers({
+					const res = await listWorkspaces({
 						page,
 						pageSize: PAGE_SIZE
 					});
 					patchState(store, (state) => {
 						const loaded = new Set(state.workspaces.map((w) => w.id));
-						const fresh = res.containers.map(mapContainerToWorkspace).filter((w) => !loaded.has(w.id));
+						const fresh = res.workspaces.map(mapWireWorkspaceToWorkspace).filter((w) => !loaded.has(w.id));
 						return {
 							workspaces: [...state.workspaces, ...fresh],
 							pagination: {
@@ -210,12 +210,12 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			return loadingMorePromise;
 		},
 		async fetch(id) {
-			const workspace = mapContainerToWorkspace(await getContainer(id));
+			const workspace = mapWireWorkspaceToWorkspace(await getWorkspace(id));
 			patchState(store, (state) => ({ workspaces: state.workspaces.some((w) => w.id === id) ? state.workspaces.map((w) => w.id === id ? workspace : w) : [...state.workspaces, workspace] }));
 			return workspace;
 		},
 		async create({ name, description = "", tags = [], owners = [], readers = [] }) {
-			const workspace = mapContainerToWorkspace(await createContainer({
+			const workspace = mapWireWorkspaceToWorkspace(await createWorkspace({
 				name,
 				description,
 				tags,
@@ -237,12 +237,12 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 		},
 		async update(id, patch) {
 			if (!store.workspaces().some((w) => w.id === id)) return null;
-			const updated = mapContainerToWorkspace(await updateContainer(id, patch));
+			const updated = mapWireWorkspaceToWorkspace(await updateWorkspace(id, patch));
 			patchState(store, (state) => ({ workspaces: state.workspaces.map((w) => w.id === id ? updated : w) }));
 			return updated;
 		},
 		async remove(ids) {
-			const result = await deleteContainers(ids);
+			const result = await deleteWorkspaces(ids);
 			const succeeded = new Set(result.succeeded);
 			patchState(store, (state) => ({
 				workspaces: state.workspaces.filter((w) => !succeeded.has(w.id)),
@@ -256,7 +256,7 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			return {
 				succeeded: result.succeeded,
 				failed: result.failed.map((f) => ({
-					id: f.containerId,
+					id: f.workspaceId,
 					error: f.error
 				}))
 			};
@@ -279,12 +279,12 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			const pagination = store.documentPagination()[workspaceId];
 			if (!pagination || current.length >= pagination.total) return current;
 			const page = Math.min(pagination.page + 1, Math.floor(current.length / PAGE_SIZE) + 1);
-			const res = await listContainerDocuments(workspaceId, {
+			const res = await listWorkspaceDocuments(workspaceId, {
 				page,
 				pageSize: PAGE_SIZE
 			});
 			const loaded = new Set(current.map((d) => d.id));
-			const fresh = res.documents.map(mapContainerDocumentToWorkspaceDocument).filter((d) => !loaded.has(d.id));
+			const fresh = res.documents.map(mapWireDocumentToWorkspaceDocument).filter((d) => !loaded.has(d.id));
 			const merged = [...current, ...fresh];
 			patchState(store, (state) => ({ documentPagination: {
 				...state.documentPagination,
@@ -316,13 +316,13 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			} }));
 		},
 		async saveDocuments(workspaceId, documents) {
-			const mapped = (await addContainerDocuments(workspaceId, documents.map((d) => ({ name: d.name })))).map(mapContainerDocumentToWorkspaceDocument);
+			const mapped = (await addWorkspaceDocuments(workspaceId, documents.map((d) => ({ name: d.name })))).map(mapWireDocumentToWorkspaceDocument);
 			setDocuments(workspaceId, [...store.documents()[workspaceId] ?? [], ...mapped]);
 			adjustDocumentCount(workspaceId, mapped.length);
 			return mapped;
 		},
 		async removeDocuments(workspaceId, documentIds) {
-			await deleteContainerDocuments(workspaceId, documentIds);
+			await deleteWorkspaceDocuments(workspaceId, documentIds);
 			const before = store.documents()[workspaceId] ?? [];
 			const after = before.filter((d) => !documentIds.includes(d.id));
 			setDocuments(workspaceId, after);
@@ -333,10 +333,10 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			const from = store.documents()[fromWorkspaceId] ?? [];
 			const moved = from.filter((d) => documentIds.includes(d.id));
 			if (!moved.length) return;
-			const created = await addContainerDocuments(toWorkspaceId, moved.map((d) => ({ name: d.name })));
-			setDocuments(toWorkspaceId, [...store.documents()[toWorkspaceId] ?? [], ...created.map(mapContainerDocumentToWorkspaceDocument)]);
+			const created = await addWorkspaceDocuments(toWorkspaceId, moved.map((d) => ({ name: d.name })));
+			setDocuments(toWorkspaceId, [...store.documents()[toWorkspaceId] ?? [], ...created.map(mapWireDocumentToWorkspaceDocument)]);
 			adjustDocumentCount(toWorkspaceId, created.length);
-			await deleteContainerDocuments(fromWorkspaceId, documentIds);
+			await deleteWorkspaceDocuments(fromWorkspaceId, documentIds);
 			const remaining = from.filter((d) => !documentIds.includes(d.id));
 			setDocuments(fromWorkspaceId, remaining);
 			adjustDocumentCount(fromWorkspaceId, remaining.length - from.length);
@@ -734,13 +734,13 @@ function isJobTerminal(job) {
 	return job.indexingStatus === "complete" || job.indexingStatus === "failed" || job.indexingStatus === "interrupted";
 }
 function allJobs(res) {
-	return (res.containers ?? []).flatMap((c) => c.jobs ?? []);
+	return (res.workspaces ?? []).flatMap((c) => c.jobs ?? []);
 }
-function containerJobs(res) {
-	return (res.containers ?? []).flatMap((c) => (c.jobs ?? []).map((job) => ({
+function workspaceJobs(res) {
+	return (res.workspaces ?? []).flatMap((c) => (c.jobs ?? []).map((job) => ({
 		job,
-		containerId: c.containerId,
-		containerName: c.containerName
+		workspaceId: c.workspaceId,
+		workspaceName: c.workspaceName
 	})));
 }
 const FINISHED_UPLOAD_VISIBLE_MS = 12e4;
@@ -1059,7 +1059,7 @@ var UploadService = class UploadService {
 	}
 	async runPollTick(signal) {
 		const workspaceId = this.focusedWorkspaceId;
-		const response = await fetchUploadStatus(workspaceId ? { containerId: workspaceId } : {}, { signal });
+		const response = await fetchUploadStatus(workspaceId ? { workspaceId } : {}, { signal });
 		const jobs = allJobs(response);
 		const remote = await this.remoteJobs(response, signal);
 		let changed = this.tracker.applyRemoteJobs(remote);
@@ -1076,12 +1076,12 @@ var UploadService = class UploadService {
 		const me = (await this.currentUser.whenReady())?.id;
 		if (signal.aborted) return [];
 		const entries = [];
-		for (const { job, containerId, containerName } of containerJobs(response)) {
-			if (this.focusedWorkspaceId && this.focusedWorkspaceId !== containerId) continue;
-			const workspaceName = this.workspaces.workspace(containerId)?.name ?? containerName;
+		for (const { job, workspaceId, workspaceName: apiName } of workspaceJobs(response)) {
+			if (this.focusedWorkspaceId && this.focusedWorkspaceId !== workspaceId) continue;
+			const workspaceName = this.workspaces.workspace(workspaceId)?.name ?? apiName;
 			entries.push({
 				job,
-				workspaceId: containerId,
+				workspaceId,
 				workspaceName,
 				mine: !!me && job.initiatedBy === me
 			});
@@ -2072,7 +2072,7 @@ function injectTextSearch({ root, query, debounce = 200 }) {
 		previous: () => move(-1)
 	};
 }
-function injectWorkspaceFilter(workspaces) {
+function injectWorkspaceFilter(workspaces, options = {}) {
 	assertInInjectionContext(injectWorkspaceFilter);
 	const tab = signal("all", ...ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []);
 	const query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
@@ -2088,7 +2088,9 @@ function injectWorkspaceFilter(workspaces) {
 			};
 		}, ...ngDevMode ? [{ debugName: "counts" }] : /* istanbul ignore next */ []),
 		filtered: computed(() => workspaces().filter((w) => {
-			return (tab() === "all" || tab() === "editor" === canWrite(w.currentUserRole)) && matchesText(w.name, query());
+			const inTab = tab() === "all" || tab() === "editor" === canWrite(w.currentUserRole);
+			const inQuery = matchesText(w.name, query()) || options.fields?.() === "name+description" && matchesText(w.description, query());
+			return inTab && inQuery;
 		}), ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []),
 		clearQuery: () => query.set("")
 	};
@@ -10410,76 +10412,341 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var WorkspaceMentionList = class WorkspaceMentionList {
-	selectionChanged = output();
-	store = inject(WorkspacesStore);
-	status = signal(this.store.loaded() ? "ready" : "loading", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
-	items = computed(() => this.store.workspaces().map((w) => ({
-		id: w.id,
-		name: w.name,
-		color: w.color,
-		documentCount: w.documentCount,
-		selected: this.store.selectedIdSet().has(w.id)
-	})), ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
-	constructor() {
-		if (!this.store.loaded()) this.store.ensureLoaded().then(() => this.status.set("ready"), () => this.status.set("error"));
-	}
-	select(id) {
-		this.store.toggleSelected(id, true);
-		this.announce();
-	}
-	toggle(id, checked) {
-		this.store.toggleSelected(id, checked);
-		this.announce();
+const MENTION_TABS = [
+	{
+		id: "all",
+		labelKey: "documentWorkspaces.mention.tabAll"
+	},
+	{
+		id: "editor",
+		labelKey: "documentWorkspaces.mention.tabOwned"
+	},
+	{
+		id: "reader",
+		labelKey: "documentWorkspaces.mention.tabShared"
 	}
-	announce() {
-		this.selectionChanged.emit({
-			ids: [...this.store.selectedIds()],
-			count: this.store.selectedCount()
+];
+function injectWorkspaceMention(options = {}) {
+	assertInInjectionContext(injectWorkspaceMention);
+	const store = inject(WorkspacesStore);
+	const injector = inject(Injector);
+	const filter = injectWorkspaceFilter(store.workspaces, { fields: options.searchFields });
+	const loadStatus = signal(store.loaded() ? "ready" : "loading", ...ngDevMode ? [{ debugName: "loadStatus" }] : /* istanbul ignore next */ []);
+	if (!store.loaded()) store.ensureLoaded().then(() => loadStatus.set("ready"), () => loadStatus.set("error"));
+	const loadingMore = signal(false, ...ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []);
+	const hostIds = computed(() => options.selectedIds?.(), ...ngDevMode ? [{ debugName: "hostIds" }] : /* istanbul ignore next */ []);
+	const listComplete = computed(() => store.loaded() && !store.hasMore() && !store.truncated(), ...ngDevMode ? [{ debugName: "listComplete" }] : /* istanbul ignore next */ []);
+	const selectedIds = computed(() => {
+		const host = hostIds();
+		if (!host) return store.selectedIds();
+		if (!listComplete()) return host;
+		const known = new Set(store.workspaces().map((w) => w.id));
+		return host.filter((id) => known.has(id));
+	}, ...ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []);
+	effect(() => {
+		const host = hostIds();
+		const kept = selectedIds();
+		if (!host || host.length === kept.length) return;
+		untracked(() => options.onSelectionChange?.({
+			ids: [...kept],
+			count: kept.length
+		}));
+	});
+	const selectedSet = computed(() => new Set(selectedIds()), ...ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []);
+	const items = computed(() => {
+		const only = options.predicate?.();
+		return filter.filtered().filter((w) => !only || only(w)).map((w) => ({
+			id: w.id,
+			name: w.name,
+			description: w.description,
+			color: w.color,
+			documentCount: w.documentCount,
+			currentUserRole: w.currentUserRole,
+			selected: selectedSet().has(w.id)
+		}));
+	}, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	const count = computed(() => selectedIds().length, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	const ticked = computed(() => items().filter((item) => item.selected).length, ...ngDevMode ? [{ debugName: "ticked" }] : /* istanbul ignore next */ []);
+	const allSelected = computed(() => items().length > 0 && ticked() === items().length, ...ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []);
+	const partiallySelected = computed(() => ticked() > 0 && !allSelected(), ...ngDevMode ? [{ debugName: "partiallySelected" }] : /* istanbul ignore next */ []);
+	const commit = (ids) => {
+		if (!options.selectedIds?.()) {
+			const next = new Set(ids);
+			for (const id of selectedSet()) if (!next.has(id)) store.toggleSelected(id, false);
+			for (const id of next) if (!selectedSet().has(id)) store.toggleSelected(id, true);
+		}
+		options.onSelectionChange?.({
+			ids: [...ids],
+			count: ids.length
 		});
+	};
+	const toggle = (id, checked) => {
+		const without = selectedIds().filter((selected) => selected !== id);
+		commit(checked ? [...without, id] : without);
+	};
+	return {
+		query: filter.query,
+		clearQuery: filter.clearQuery,
+		tab: filter.tab,
+		tabs: MENTION_TABS,
+		counts: filter.counts,
+		status: loadStatus.asReadonly(),
+		hasMore: store.hasMore,
+		truncated: store.truncated,
+		loadingMore: loadingMore.asReadonly(),
+		async loadMore() {
+			loadingMore.set(true);
+			try {
+				await store.loadMore();
+			} finally {
+				loadingMore.set(false);
+			}
+		},
+		items,
+		count,
+		ids: selectedIds,
+		allSelected,
+		partiallySelected,
+		isSelected: (id) => selectedSet().has(id),
+		toggle,
+		toggleAll: () => {
+			const displayed = items().map((item) => item.id);
+			if (allSelected()) {
+				const drop = new Set(displayed);
+				commit(selectedIds().filter((id) => !drop.has(id)));
+			} else commit([.../* @__PURE__ */ new Set([...selectedIds(), ...displayed])]);
+		},
+		select: (id) => toggle(id, true),
+		async create() {
+			const result = await EditWorkspace.call({ mode: "add" }, { injector });
+			if (typeof result !== "object") return null;
+			const { workspace } = result;
+			filter.tab.set("all");
+			filter.clearQuery();
+			toggle(workspace.id, true);
+			options.onCreated?.(workspace);
+			return workspace;
+		}
+	};
+}
+const WORKSPACE_MENTION = new InjectionToken("WORKSPACE_MENTION");
+function injectWorkspaceMentionScope() {
+	const scope = inject(WORKSPACE_MENTION, { optional: true });
+	if (!scope) throw new Error("[atomic] This piece must be placed inside a <workspace-mention>.");
+	return scope;
+}
+function hasContent(slot) {
+	return Array.from(slot.childNodes).some((node) => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim());
+}
+var WorkspaceMentionNew = class WorkspaceMentionNew {
+	variant = input("tertiary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	scheme = input("neutral", ...ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []);
+	size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	mention = injectWorkspaceMentionScope();
+	slot = viewChild.required("slot", ...ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []);
+	custom = signal(false, ...ngDevMode ? [{ debugName: "custom" }] : /* istanbul ignore next */ []);
+	ngAfterContentInit() {
+		this.custom.set(hasContent(this.slot().nativeElement));
+	}
+	create() {
+		this.mention.create();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: WorkspaceMentionList,
+		type: WorkspaceMentionNew,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
 		version: "22.2.1",
-		type: WorkspaceMentionList,
+		type: WorkspaceMentionNew,
 		isStandalone: true,
-		selector: "workspace-mention-list",
-		outputs: { selectionChanged: "selectionChanged" },
-		host: { classAttribute: "block max-h-72 overflow-auto" },
+		selector: "workspace-mention-new",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scheme: {
+				classPropertyName: "scheme",
+				publicName: "scheme",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "inline-block" },
 		providers: [provideTranslocoScope("document-workspaces")],
+		viewQueries: [{
+			propertyName: "slot",
+			first: true,
+			predicate: ["slot"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
 		template: `
-    @switch (status()) {
+    <button type="button" [variant]="variant()" [scheme]="scheme()" [size]="size()" (click)="create()">
+      <span #slot class="contents"><ng-content /></span>
+      @if (!custom()) {
+        <plus-icon />
+        {{ "documentWorkspaces.mention.newWorkspace" | transloco }}
+      }
+    </button>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
+			},
+			{
+				kind: "component",
+				type: PlusIcon,
+				selector: "plus, plus-icon, Plus, PlusIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: WorkspaceMentionNew,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "workspace-mention-new",
+			imports: [
+				TranslocoPipe,
+				ButtonComponent,
+				PlusIcon
+			],
+			providers: [provideTranslocoScope("document-workspaces")],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "inline-block" },
+			template: `
+    <button type="button" [variant]="variant()" [scheme]="scheme()" [size]="size()" (click)="create()">
+      <span #slot class="contents"><ng-content /></span>
+      @if (!custom()) {
+        <plus-icon />
+        {{ "documentWorkspaces.mention.newWorkspace" | transloco }}
+      }
+    </button>
+  `
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		scheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scheme",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		slot: [{
+			type: i0.ViewChild,
+			args: ["slot", { isSignal: true }]
+		}]
+	}
+});
+var WorkspaceMentionRows = class WorkspaceMentionRows {
+	mention = injectWorkspaceMentionScope();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: WorkspaceMentionRows,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: WorkspaceMentionRows,
+		isStandalone: true,
+		selector: "workspace-mention-rows",
+		host: { classAttribute: "block min-h-0 max-h-(--workspace-mention-rows-max-height,18rem) flex-1 overflow-auto" },
+		providers: [provideTranslocoScope("document-workspaces")],
+		ngImport: i0,
+		template: `
+    @switch (mention.status()) {
       @case ("loading") {
-        <p class="px-3 py-2 text-sm text-(--font-primary-muted)">{{ "documentWorkspaces.mention.loading" | transloco }}</p>
+        <p class="px-(--spacing-xs) py-(--spacing-2xs) text-(length:--size-base) text-(--font-primary-muted)">{{ "documentWorkspaces.mention.loading" | transloco }}</p>
       }
       @case ("error") {
-        <p class="px-3 py-2 text-sm text-(--font-error-base)" role="alert">{{ "documentWorkspaces.mention.loadError" | transloco }}</p>
+        <p class="px-(--spacing-xs) py-(--spacing-2xs) text-(length:--size-base) text-(--font-error-base)" role="alert">{{ "documentWorkspaces.mention.loadError" | transloco }}</p>
       }
       @default {
-        <ul role="listbox" aria-multiselectable="true" class="flex flex-col">
-          @for (item of items(); track item.id) {
-            <li role="option" class="rounded-lg hover:bg-(--bg-primary-lightest) data-selected:bg-(--bg-primary-lighter)" [attr.aria-selected]="item.selected" [attr.data-selected]="item.selected ? '' : null">
-              <checkbox class="w-full items-center gap-3 px-3 py-2" [checked]="item.selected" (checkedChange)="toggle(item.id, $event)">
-                <span class="flex items-center gap-3">
-                  <workspace-icon size="md" [color]="item.color" />
-                  <span class="flex min-w-0 flex-col">
-                    <span class="truncate text-sm font-semibold text-(--font-neutral-black)">{{ item.name }}</span>
-                    <span class="text-xs text-(--font-primary-muted)">{{ "documentWorkspaces.mention.documentCount" | transloco: { count: item.documentCount } }}</span>
-                  </span>
-                </span>
-              </checkbox>
-            </li>
+        @if (!mention.items().length) {
+          @if (mention.query()) {
+            <p class="px-(--spacing-xs) py-(--spacing-2xs) text-(length:--size-base) text-(--font-primary-muted)" data-testid="no-match">{{ "documentWorkspaces.mention.noMatch" | transloco }}</p>
+          } @else {
+            <p class="px-(--spacing-xs) py-(--spacing-2xs) text-(length:--size-base) text-(--font-primary-muted)" data-testid="empty">{{ "documentWorkspaces.mention.empty" | transloco }}</p>
           }
-        </ul>
+        } @else {
+          <!-- The checkbox carries the semantics (a checkbox in a list): no listbox/option around it. -->
+          <ul class="flex flex-col">
+            @for (item of mention.items(); track item.id) {
+              <li class="rounded-(--radius-sm) hover:bg-(--bg-primary-lightest) data-selected:bg-(--bg-primary-lighter)" [attr.data-selected]="item.selected ? '' : null">
+                <checkbox class="w-full items-center gap-(--spacing-xs) px-(--spacing-xs) py-(--spacing-2xs)" [checked]="item.selected" (checkedChange)="mention.toggle(item.id, $event)">
+                  <span class="flex items-center gap-(--spacing-xs)">
+                    <workspace-icon size="md" [color]="item.color" />
+                    <span class="flex min-w-0 flex-col">
+                      <span class="truncate text-(length:--size-base) font-semibold text-(--font-neutral-black)">{{ item.name }}</span>
+                      <span class="text-(length:--size-sm) text-(--font-primary-muted)">{{ "documentWorkspaces.mention.documentCount" | transloco: { count: item.documentCount } }}</span>
+                    </span>
+                  </span>
+                </checkbox>
+              </li>
+            }
+          </ul>
+        }
       }
     }
   `,
@@ -10518,11 +10785,11 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: WorkspaceMentionList,
+	type: WorkspaceMentionRows,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "workspace-mention-list",
+			selector: "workspace-mention-rows",
 			imports: [
 				TranslocoPipe,
 				CheckboxComponent,
@@ -10530,40 +10797,915 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			providers: [provideTranslocoScope("document-workspaces")],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			host: { class: "block max-h-72 overflow-auto" },
+			host: { class: "block min-h-0 max-h-(--workspace-mention-rows-max-height,18rem) flex-1 overflow-auto" },
 			template: `
-    @switch (status()) {
+    @switch (mention.status()) {
       @case ("loading") {
-        <p class="px-3 py-2 text-sm text-(--font-primary-muted)">{{ "documentWorkspaces.mention.loading" | transloco }}</p>
+        <p class="px-(--spacing-xs) py-(--spacing-2xs) text-(length:--size-base) text-(--font-primary-muted)">{{ "documentWorkspaces.mention.loading" | transloco }}</p>
       }
       @case ("error") {
-        <p class="px-3 py-2 text-sm text-(--font-error-base)" role="alert">{{ "documentWorkspaces.mention.loadError" | transloco }}</p>
+        <p class="px-(--spacing-xs) py-(--spacing-2xs) text-(length:--size-base) text-(--font-error-base)" role="alert">{{ "documentWorkspaces.mention.loadError" | transloco }}</p>
       }
       @default {
-        <ul role="listbox" aria-multiselectable="true" class="flex flex-col">
-          @for (item of items(); track item.id) {
-            <li role="option" class="rounded-lg hover:bg-(--bg-primary-lightest) data-selected:bg-(--bg-primary-lighter)" [attr.aria-selected]="item.selected" [attr.data-selected]="item.selected ? '' : null">
-              <checkbox class="w-full items-center gap-3 px-3 py-2" [checked]="item.selected" (checkedChange)="toggle(item.id, $event)">
-                <span class="flex items-center gap-3">
-                  <workspace-icon size="md" [color]="item.color" />
-                  <span class="flex min-w-0 flex-col">
-                    <span class="truncate text-sm font-semibold text-(--font-neutral-black)">{{ item.name }}</span>
-                    <span class="text-xs text-(--font-primary-muted)">{{ "documentWorkspaces.mention.documentCount" | transloco: { count: item.documentCount } }}</span>
-                  </span>
-                </span>
-              </checkbox>
-            </li>
+        @if (!mention.items().length) {
+          @if (mention.query()) {
+            <p class="px-(--spacing-xs) py-(--spacing-2xs) text-(length:--size-base) text-(--font-primary-muted)" data-testid="no-match">{{ "documentWorkspaces.mention.noMatch" | transloco }}</p>
+          } @else {
+            <p class="px-(--spacing-xs) py-(--spacing-2xs) text-(length:--size-base) text-(--font-primary-muted)" data-testid="empty">{{ "documentWorkspaces.mention.empty" | transloco }}</p>
           }
-        </ul>
+        } @else {
+          <!-- The checkbox carries the semantics (a checkbox in a list): no listbox/option around it. -->
+          <ul class="flex flex-col">
+            @for (item of mention.items(); track item.id) {
+              <li class="rounded-(--radius-sm) hover:bg-(--bg-primary-lightest) data-selected:bg-(--bg-primary-lighter)" [attr.data-selected]="item.selected ? '' : null">
+                <checkbox class="w-full items-center gap-(--spacing-xs) px-(--spacing-xs) py-(--spacing-2xs)" [checked]="item.selected" (checkedChange)="mention.toggle(item.id, $event)">
+                  <span class="flex items-center gap-(--spacing-xs)">
+                    <workspace-icon size="md" [color]="item.color" />
+                    <span class="flex min-w-0 flex-col">
+                      <span class="truncate text-(length:--size-base) font-semibold text-(--font-neutral-black)">{{ item.name }}</span>
+                      <span class="text-(length:--size-sm) text-(--font-primary-muted)">{{ "documentWorkspaces.mention.documentCount" | transloco: { count: item.documentCount } }}</span>
+                    </span>
+                  </span>
+                </checkbox>
+              </li>
+            }
+          </ul>
+        }
       }
     }
   `
 		}]
-	}],
-	ctorParameters: () => [],
-	propDecorators: { selectionChanged: [{
-		type: i0.Output,
-		args: ["selectionChanged"]
+	}]
+});
+var WorkspaceMentionSearch = class WorkspaceMentionSearch {
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	textSize = input(...ngDevMode ? [void 0, { debugName: "textSize" }] : /* istanbul ignore next */ []);
+	placeholder = input(...ngDevMode ? [void 0, { debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	mention = injectWorkspaceMentionScope();
+	searchForm = form(this.mention.query);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: WorkspaceMentionSearch,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: WorkspaceMentionSearch,
+		isStandalone: true,
+		selector: "workspace-mention-search",
+		inputs: {
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			textSize: {
+				classPropertyName: "textSize",
+				publicName: "textSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block" },
+		providers: [provideTranslocoScope("document-workspaces")],
+		ngImport: i0,
+		template: `
+    <SearchInput
+      class="w-full"
+      [size]="size()"
+      [textSize]="textSize()"
+      [formField]="searchForm"
+      [placeholder]="placeholder() ?? ('documentWorkspaces.mention.searchPlaceholder' | transloco)"
+      [aria-label]="ariaLabel() ?? placeholder() ?? ('documentWorkspaces.mention.searchPlaceholder' | transloco)"
+      [clearLabel]="'documentWorkspaces.common.clearSearch' | transloco" />
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "component",
+				type: SearchInputComponent,
+				selector: "SearchInput, search-input, searchinput",
+				inputs: [
+					"value",
+					"placeholder",
+					"disabled",
+					"aria-label",
+					"hotkey",
+					"clearLabel",
+					"class",
+					"size",
+					"textSize"
+				],
+				outputs: ["valueChange"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: WorkspaceMentionSearch,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "workspace-mention-search",
+			imports: [
+				TranslocoPipe,
+				FormField,
+				SearchInputComponent
+			],
+			providers: [provideTranslocoScope("document-workspaces")],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "block" },
+			template: `
+    <SearchInput
+      class="w-full"
+      [size]="size()"
+      [textSize]="textSize()"
+      [formField]="searchForm"
+      [placeholder]="placeholder() ?? ('documentWorkspaces.mention.searchPlaceholder' | transloco)"
+      [aria-label]="ariaLabel() ?? placeholder() ?? ('documentWorkspaces.mention.searchPlaceholder' | transloco)"
+      [clearLabel]="'documentWorkspaces.common.clearSearch' | transloco" />
+  `
+		}]
+	}],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		textSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "textSize",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}]
+	}
+});
+var WorkspaceMentionSelectAll = class WorkspaceMentionSelectAll {
+	mention = injectWorkspaceMentionScope();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: WorkspaceMentionSelectAll,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: WorkspaceMentionSelectAll,
+		isStandalone: true,
+		selector: "workspace-mention-select-all",
+		host: { classAttribute: "block" },
+		providers: [provideTranslocoScope("document-workspaces")],
+		ngImport: i0,
+		template: `
+    @if (mention.status() === "ready" && mention.items().length) {
+      <checkbox class="items-center gap-(--spacing-xs)" [checked]="mention.allSelected()" [indeterminate]="mention.partiallySelected()" (checkedChange)="mention.toggleAll()">
+      <span class="text-(length:--size-base) text-(--font-neutral-black)">{{ (mention.allSelected() ? "documentWorkspaces.mention.unselectAll" : "documentWorkspaces.mention.selectAll") | transloco }}</span>
+    </checkbox>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: CheckboxComponent,
+			selector: "checkbox, Checkbox",
+			inputs: [
+				"checked",
+				"disabled",
+				"indeterminate",
+				"hint",
+				"class",
+				"aria-label"
+			],
+			outputs: ["checkedChange"]
+		}, {
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: WorkspaceMentionSelectAll,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "workspace-mention-select-all",
+			imports: [TranslocoPipe, CheckboxComponent],
+			providers: [provideTranslocoScope("document-workspaces")],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "block" },
+			template: `
+    @if (mention.status() === "ready" && mention.items().length) {
+      <checkbox class="items-center gap-(--spacing-xs)" [checked]="mention.allSelected()" [indeterminate]="mention.partiallySelected()" (checkedChange)="mention.toggleAll()">
+      <span class="text-(length:--size-base) text-(--font-neutral-black)">{{ (mention.allSelected() ? "documentWorkspaces.mention.unselectAll" : "documentWorkspaces.mention.selectAll") | transloco }}</span>
+    </checkbox>
+    }
+  `
+		}]
+	}]
+});
+var WorkspaceMention = class WorkspaceMention {
+	searchFields = input("name", ...ngDevMode ? [{ debugName: "searchFields" }] : /* istanbul ignore next */ []);
+	selectedIds = input(void 0, ...ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []);
+	predicate = input(void 0, ...ngDevMode ? [{ debugName: "predicate" }] : /* istanbul ignore next */ []);
+	searchable = input(false, {
+		...ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectAll = input(false, {
+		...ngDevMode ? { debugName: "selectAll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	allowCreate = input(false, {
+		...ngDevMode ? { debugName: "allowCreate" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectionChanged = output();
+	workspaceCreated = output();
+	slot = viewChild.required("slot", ...ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []);
+	custom = signal(false, ...ngDevMode ? [{ debugName: "custom" }] : /* istanbul ignore next */ []);
+	state = injectWorkspaceMention({
+		searchFields: () => this.searchFields(),
+		selectedIds: () => this.selectedIds(),
+		predicate: () => this.predicate(),
+		onSelectionChange: (selection) => this.selectionChanged.emit(selection),
+		onCreated: (workspace) => this.workspaceCreated.emit(workspace)
+	});
+	query = this.state.query;
+	clearQuery = this.state.clearQuery;
+	tab = this.state.tab;
+	tabs = this.state.tabs;
+	counts = this.state.counts;
+	status = this.state.status;
+	hasMore = this.state.hasMore;
+	truncated = this.state.truncated;
+	loadingMore = this.state.loadingMore;
+	loadMore = this.state.loadMore;
+	items = this.state.items;
+	count = this.state.count;
+	ids = this.state.ids;
+	allSelected = this.state.allSelected;
+	partiallySelected = this.state.partiallySelected;
+	isSelected = this.state.isSelected;
+	toggle = this.state.toggle;
+	toggleAll = this.state.toggleAll;
+	select = this.state.select;
+	create = this.state.create;
+	ngAfterContentInit() {
+		this.custom.set(hasContent(this.slot().nativeElement));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: WorkspaceMention,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: WorkspaceMention,
+		isStandalone: true,
+		selector: "workspace-mention",
+		inputs: {
+			searchFields: {
+				classPropertyName: "searchFields",
+				publicName: "searchFields",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedIds: {
+				classPropertyName: "selectedIds",
+				publicName: "selectedIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			predicate: {
+				classPropertyName: "predicate",
+				publicName: "predicate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchable: {
+				classPropertyName: "searchable",
+				publicName: "searchable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectAll: {
+				classPropertyName: "selectAll",
+				publicName: "selectAll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allowCreate: {
+				classPropertyName: "allowCreate",
+				publicName: "allowCreate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			selectionChanged: "selectionChanged",
+			workspaceCreated: "workspaceCreated"
+		},
+		host: { classAttribute: "contents" },
+		providers: [{
+			provide: WORKSPACE_MENTION,
+			useExisting: forwardRef(() => WorkspaceMention)
+		}],
+		viewQueries: [{
+			propertyName: "slot",
+			first: true,
+			predicate: ["slot"],
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["workspaceMention"],
+		ngImport: i0,
+		template: `
+    <div #slot class="contents"><ng-content /></div>
+    @if (!custom()) {
+      <div class="flex min-h-0 flex-1 flex-col gap-(--spacing-2xs)">
+        @if (searchable() || allowCreate()) {
+          <div class="flex items-center gap-(--spacing-2xs) px-(--spacing-xs) pt-(--spacing-2xs)">
+            @if (searchable()) {
+              <workspace-mention-search class="min-w-0 flex-1" />
+            }
+            @if (allowCreate()) {
+              <workspace-mention-new class="shrink-0" />
+            }
+          </div>
+        }
+        @if (selectAll()) {
+          <workspace-mention-select-all class="px-(--spacing-xs)" />
+        }
+        <workspace-mention-rows />
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: WorkspaceMentionNew,
+				selector: "workspace-mention-new",
+				inputs: [
+					"variant",
+					"scheme",
+					"size"
+				]
+			},
+			{
+				kind: "component",
+				type: WorkspaceMentionRows,
+				selector: "workspace-mention-rows"
+			},
+			{
+				kind: "component",
+				type: WorkspaceMentionSearch,
+				selector: "workspace-mention-search",
+				inputs: [
+					"size",
+					"textSize",
+					"placeholder",
+					"aria-label"
+				]
+			},
+			{
+				kind: "component",
+				type: WorkspaceMentionSelectAll,
+				selector: "workspace-mention-select-all"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: WorkspaceMention,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "workspace-mention",
+			exportAs: "workspaceMention",
+			imports: [
+				WorkspaceMentionNew,
+				WorkspaceMentionRows,
+				WorkspaceMentionSearch,
+				WorkspaceMentionSelectAll
+			],
+			providers: [{
+				provide: WORKSPACE_MENTION,
+				useExisting: forwardRef(() => WorkspaceMention)
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "contents" },
+			template: `
+    <div #slot class="contents"><ng-content /></div>
+    @if (!custom()) {
+      <div class="flex min-h-0 flex-1 flex-col gap-(--spacing-2xs)">
+        @if (searchable() || allowCreate()) {
+          <div class="flex items-center gap-(--spacing-2xs) px-(--spacing-xs) pt-(--spacing-2xs)">
+            @if (searchable()) {
+              <workspace-mention-search class="min-w-0 flex-1" />
+            }
+            @if (allowCreate()) {
+              <workspace-mention-new class="shrink-0" />
+            }
+          </div>
+        }
+        @if (selectAll()) {
+          <workspace-mention-select-all class="px-(--spacing-xs)" />
+        }
+        <workspace-mention-rows />
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		searchFields: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchFields",
+				required: false
+			}]
+		}],
+		selectedIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedIds",
+				required: false
+			}]
+		}],
+		predicate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "predicate",
+				required: false
+			}]
+		}],
+		searchable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchable",
+				required: false
+			}]
+		}],
+		selectAll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectAll",
+				required: false
+			}]
+		}],
+		allowCreate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowCreate",
+				required: false
+			}]
+		}],
+		selectionChanged: [{
+			type: i0.Output,
+			args: ["selectionChanged"]
+		}],
+		workspaceCreated: [{
+			type: i0.Output,
+			args: ["workspaceCreated"]
+		}],
+		slot: [{
+			type: i0.ViewChild,
+			args: ["slot", { isSignal: true }]
+		}]
+	}
+});
+var WorkspaceMentionList = class WorkspaceMentionList {
+	searchable = input(false, {
+		...ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectAll = input(false, {
+		...ngDevMode ? { debugName: "selectAll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	allowCreate = input(false, {
+		...ngDevMode ? { debugName: "allowCreate" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	searchFields = input("name", ...ngDevMode ? [{ debugName: "searchFields" }] : /* istanbul ignore next */ []);
+	selectedIds = input(void 0, ...ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []);
+	selectionChanged = output();
+	workspaceCreated = output();
+	mention = viewChild.required(WorkspaceMention, ...ngDevMode ? [{ debugName: "mention" }] : /* istanbul ignore next */ []);
+	items = computed(() => this.mention().items(), ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	select(id) {
+		this.mention().select(id);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: WorkspaceMentionList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: WorkspaceMentionList,
+		isStandalone: true,
+		selector: "workspace-mention-list",
+		inputs: {
+			searchable: {
+				classPropertyName: "searchable",
+				publicName: "searchable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectAll: {
+				classPropertyName: "selectAll",
+				publicName: "selectAll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allowCreate: {
+				classPropertyName: "allowCreate",
+				publicName: "allowCreate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchFields: {
+				classPropertyName: "searchFields",
+				publicName: "searchFields",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedIds: {
+				classPropertyName: "selectedIds",
+				publicName: "selectedIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			selectionChanged: "selectionChanged",
+			workspaceCreated: "workspaceCreated"
+		},
+		host: { classAttribute: "block" },
+		viewQueries: [{
+			propertyName: "mention",
+			first: true,
+			predicate: WorkspaceMention,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <workspace-mention
+      [searchable]="searchable()"
+      [selectAll]="selectAll()"
+      [allowCreate]="allowCreate()"
+      [searchFields]="searchFields()"
+      [selectedIds]="selectedIds()"
+      (selectionChanged)="selectionChanged.emit($event)"
+      (workspaceCreated)="workspaceCreated.emit($event)" />
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: WorkspaceMention,
+			selector: "workspace-mention",
+			inputs: [
+				"searchFields",
+				"selectedIds",
+				"predicate",
+				"searchable",
+				"selectAll",
+				"allowCreate"
+			],
+			outputs: ["selectionChanged", "workspaceCreated"],
+			exportAs: ["workspaceMention"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: WorkspaceMentionList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "workspace-mention-list",
+			imports: [WorkspaceMention],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "block" },
+			template: `
+    <workspace-mention
+      [searchable]="searchable()"
+      [selectAll]="selectAll()"
+      [allowCreate]="allowCreate()"
+      [searchFields]="searchFields()"
+      [selectedIds]="selectedIds()"
+      (selectionChanged)="selectionChanged.emit($event)"
+      (workspaceCreated)="workspaceCreated.emit($event)" />
+  `
+		}]
+	}],
+	propDecorators: {
+		searchable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchable",
+				required: false
+			}]
+		}],
+		selectAll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectAll",
+				required: false
+			}]
+		}],
+		allowCreate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowCreate",
+				required: false
+			}]
+		}],
+		searchFields: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchFields",
+				required: false
+			}]
+		}],
+		selectedIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedIds",
+				required: false
+			}]
+		}],
+		selectionChanged: [{
+			type: i0.Output,
+			args: ["selectionChanged"]
+		}],
+		workspaceCreated: [{
+			type: i0.Output,
+			args: ["workspaceCreated"]
+		}],
+		mention: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => WorkspaceMention), { isSignal: true }]
+		}]
+	}
+});
+var WorkspaceMentionTabs = class WorkspaceMentionTabs {
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	mention = injectWorkspaceMentionScope();
+	onTabChange(tab) {
+		if (tab) this.mention.tab.set(tab);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: WorkspaceMentionTabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: WorkspaceMentionTabs,
+		isStandalone: true,
+		selector: "workspace-mention-tabs",
+		inputs: { ariaLabel: {
+			classPropertyName: "ariaLabel",
+			publicName: "aria-label",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "block max-w-full" },
+		providers: [provideTranslocoScope("document-workspaces")],
+		ngImport: i0,
+		template: `
+    <Tabs class="max-w-full">
+      <TabList
+        variant="inner"
+        class="w-fit max-w-full"
+        selectionMode="explicit"
+        [softDisabled]="false"
+        [attr.aria-label]="ariaLabel() ?? ('documentWorkspaces.mention.tabsLabel' | transloco)"
+        [selectedTab]="mention.tab()"
+        (selectedTabChange)="onTabChange($event)">
+        @for (item of mention.tabs; track item.id) {
+          <Tab [value]="item.id" variant="inner">
+            <span>{{ item.labelKey | transloco }}</span>
+            <Badge variant="number" fill="primary" scheme="sage" size="xs" class="shrink-0" [attr.data-testid]="'badge-' + item.id">{{ mention.counts()[item.id] }}</Badge>
+          </Tab>
+        }
+      </TabList>
+    </Tabs>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: BadgeComponent,
+				selector: "badge, Badge",
+				inputs: [
+					"class",
+					"variant",
+					"fill",
+					"scheme",
+					"size",
+					"aria-label"
+				]
+			},
+			{
+				kind: "directive",
+				type: TabComponent,
+				selector: "Tab",
+				inputs: [
+					"class",
+					"variant",
+					"size",
+					"noTruncate"
+				]
+			},
+			{
+				kind: "directive",
+				type: TabListComponent,
+				selector: "TabList",
+				inputs: ["class", "variant"]
+			},
+			{
+				kind: "directive",
+				type: TabsComponent,
+				selector: "Tabs",
+				inputs: ["class"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: WorkspaceMentionTabs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "workspace-mention-tabs",
+			imports: [
+				TranslocoPipe,
+				BadgeComponent,
+				TabComponent,
+				TabListComponent,
+				TabsComponent
+			],
+			providers: [provideTranslocoScope("document-workspaces")],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "block max-w-full" },
+			template: `
+    <Tabs class="max-w-full">
+      <TabList
+        variant="inner"
+        class="w-fit max-w-full"
+        selectionMode="explicit"
+        [softDisabled]="false"
+        [attr.aria-label]="ariaLabel() ?? ('documentWorkspaces.mention.tabsLabel' | transloco)"
+        [selectedTab]="mention.tab()"
+        (selectedTabChange)="onTabChange($event)">
+        @for (item of mention.tabs; track item.id) {
+          <Tab [value]="item.id" variant="inner">
+            <span>{{ item.labelKey | transloco }}</span>
+            <Badge variant="number" fill="primary" scheme="sage" size="xs" class="shrink-0" [attr.data-testid]="'badge-' + item.id">{{ mention.counts()[item.id] }}</Badge>
+          </Tab>
+        }
+      </TabList>
+    </Tabs>
+  `
+		}]
+	}],
+	propDecorators: { ariaLabel: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "aria-label",
+			required: false
+		}]
 	}] }
 });
 const NEW_WORKSPACE_NAME_MAX = 50;
@@ -11587,6 +12729,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ConfirmAction, ConfirmDialog, ConnectionBanner, CurrentUserService, DOCUMENT_ROW_COLUMNS, DocumentCard, DocumentPreviewPanel, DocumentRow, DocumentStatusBadge, DocumentTypeIcon, Dropzone, EditWorkspace, HighlightMatchPipe, HighlightedText, MemberRow, NEW_WORKSPACE_NAME_MAX, PickWorkspace, PrincipalAvatar, PrincipalDirectory, PrincipalPicker, ResizeHandle, RoleMenu, ShareDialog, ShareWorkspace, UPLOAD_FACTORY, UploadDialog, UploadDocuments, UploadFileList, UploadService, UploadTracker, UploadTrackerSection, UploadTrackerStore, WORKSPACE_ROW_COLUMNS, WorkspaceCard, WorkspaceDetail, WorkspaceEditDialog, WorkspaceIcon, WorkspaceList, WorkspaceMentionList, WorkspaceMessage, WorkspacePicker, WorkspacePickerDialog, WorkspacePickerLauncher, WorkspaceRoleTag, WorkspaceRow, WorkspacesShell, WorkspacesStore, WriterOnly, injectDocumentLabels, injectOnlineStatus, injectSelection, injectTextSearch, injectWorkspaceFilter, isFailed, isFinished, principalDisplayName };
+export { ConfirmAction, ConfirmDialog, ConnectionBanner, CurrentUserService, DOCUMENT_ROW_COLUMNS, DocumentCard, DocumentPreviewPanel, DocumentRow, DocumentStatusBadge, DocumentTypeIcon, Dropzone, EditWorkspace, HighlightMatchPipe, HighlightedText, MENTION_TABS, MemberRow, NEW_WORKSPACE_NAME_MAX, PickWorkspace, PrincipalAvatar, PrincipalDirectory, PrincipalPicker, ResizeHandle, RoleMenu, ShareDialog, ShareWorkspace, UPLOAD_FACTORY, UploadDialog, UploadDocuments, UploadFileList, UploadService, UploadTracker, UploadTrackerSection, UploadTrackerStore, WORKSPACE_MENTION, WORKSPACE_ROW_COLUMNS, WorkspaceCard, WorkspaceDetail, WorkspaceEditDialog, WorkspaceIcon, WorkspaceList, WorkspaceMention, WorkspaceMentionList, WorkspaceMentionNew, WorkspaceMentionRows, WorkspaceMentionSearch, WorkspaceMentionSelectAll, WorkspaceMentionTabs, WorkspaceMessage, WorkspacePicker, WorkspacePickerDialog, WorkspacePickerLauncher, WorkspaceRoleTag, WorkspaceRow, WorkspacesShell, WorkspacesStore, WriterOnly, injectDocumentLabels, injectOnlineStatus, injectSelection, injectTextSearch, injectWorkspaceFilter, injectWorkspaceMention, injectWorkspaceMentionScope, isFailed, isFinished, principalDisplayName };
 
 //# sourceMappingURL=sinequa-atomic-angular-document-workspaces.mjs.map