Custom elements

@sinequa/atomic-angular/workspace-elements wraps the components of document-workspaces with @angular/elements: <lexiq-workspaces>, <lexiq-workspace-picker> and <lexiq-workspace-mention-list>. An Angular application should use the components directly; the elements are for hosts that have no Angular component to put them in.

Minimal example

import { bootstrapLexiqWorkspacesElements } from "@sinequa/atomic-angular/workspace-elements";

// Transloco and the @sinequa/atomic configuration are the page's to provide: add their providers here.
await bootstrapLexiqWorkspacesElements({ providers: [] });

<link rel="stylesheet" href="node_modules/@sinequa/atomic-angular/workspace-elements/styles/lexiq-workspaces.css" />
<lexiq-workspaces upload-endpoint="/tus" query-name="_query" theme="light"></lexiq-workspaces>

Importing the entry registers nothing: registration is explicit — bootstrapLexiqWorkspacesElements() for a page with no Angular (it starts a zoneless application and registers the three tags on it), provideLexiqWorkspacesElements() among the providers of an Angular application, or defineLexiqWorkspacePicker(injector) and its two siblings for one element only.

How it works

The elements render in the page's own DOM, not in a shadow root, and through the application's injector: they share its Transloco configuration, its @sinequa/atomic setup and its WorkspacesStore with the rest of the page.

Because they live in the page's DOM, the page provides their styles. Two ways:

• A Tailwind build that scans the library, as for the Angular components.
• The prebuilt stylesheet, workspace-elements/styles/lexiq-workspaces.css, for a page without a Tailwind build. It holds the galactik tokens as a fallback (a host that already defines them keeps its own), a small reset limited to the elements and the dialogs they open, and exactly the utilities the components use — unlayered, so a class beats the page's own h3 { … } or p { … }. The dark tokens apply under a .dark class: theme="dark" on <lexiq-workspaces> puts it on the element.

Reference

<lexiq-workspaces> dispatches lexiq-workspaces:workspace-created and lexiq-workspaces:workspace-updated (detail: { workspace }), and lexiq-workspaces:ask-followup. All the events bubble and cross a shadow boundary, which @angular/elements does not do by itself.

Pitfalls

What's next