@design.estate/dees-catalog 12.4.0 → 12.5.0

package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown-popup.ts

@@ -19,6 +19,9 @@ declare global {
   }
 }
 
+export interface IDropdownSearchOption { key: string; option: string; payload?: unknown; }
+export type TDropdownSearch = (query: string, signal: AbortSignal) => Promise<IDropdownSearchOption[]>;
+
 @customElement('dees-input-dropdown-popup')
 export class DeesInputDropdownPopup extends DeesElement {
   @property({ type: Array })
@@ -39,6 +42,13 @@ export class DeesInputDropdownPopup extends DeesElement {
   @property({ type: String })
   accessor selectedKey = '';
 
+  /** Optional remote search. Results are authoritative and are not filtered again locally. */
+  @property({ attribute: false }) accessor searchOptions: TDropdownSearch | undefined;
+  @property({ type: String }) accessor searchLabel = 'Search options';
+  @state() accessor loading = false;
+  @state() accessor searchError = '';
+  private searchAbort?: AbortController;
+
   @state()
   accessor filteredOptions: { option: string; key: string; payload?: any }[] = [];
 
@@ -212,9 +222,9 @@ export class DeesInputDropdownPopup extends DeesElement {
               <div class="search">
                 <input
                   type="text"
-                  placeholder="Search options..."
+                  placeholder=${this.searchLabel}
                   role="combobox"
-                  aria-label="Search options"
+                  aria-label=${this.searchLabel}
                   aria-expanded="true"
                   aria-controls="dropdown-options"
                   aria-activedescendant=${this.filteredOptions.length ? `dropdown-option-${this.highlightedIndex}` : ''}
@@ -227,8 +237,8 @@ export class DeesInputDropdownPopup extends DeesElement {
           : null}
         <div class="options-container" id="dropdown-options" role="listbox" aria-label=${this.ownerComponent?.getAttribute('label') || 'Options'}
           tabindex=${this.enableSearch ? '-1' : '0'} aria-activedescendant=${this.filteredOptions.length ? `dropdown-option-${this.highlightedIndex}` : ''}>
-          ${this.filteredOptions.length === 0
-            ? html`<div class="no-options">No options found</div>`
+          ${this.loading || this.searchError || this.filteredOptions.length === 0
+            ? html`<div class="no-options" role="status">${this.loading ? 'Searching…' : this.searchError || 'No options found'}</div>`
             : this.filteredOptions.map((option, index) => {
                 const isHighlighted = this.highlightedIndex === index;
                 return html`
@@ -263,6 +273,8 @@ export class DeesInputDropdownPopup extends DeesElement {
   }
 
   public async show(): Promise<void> {
+    this.loading = false;
+    this.searchError = '';
     this.filteredOptions = this.options;
     this.highlightedIndex = Math.max(0, this.options.findIndex((option) => option.key === this.selectedKey));
     this.searchValue = '';
@@ -287,6 +299,7 @@ export class DeesInputDropdownPopup extends DeesElement {
     // Add scroll/resize listeners for repositioning
     window.addEventListener('scroll', this.handleScrollOrResize, { capture: true, passive: true });
     window.addEventListener('resize', this.handleScrollOrResize, { passive: true });
+    if (this.searchOptions) void this.searchRemote();
   }
 
   public async hide(): Promise<void> {
@@ -295,6 +308,7 @@ export class DeesInputDropdownPopup extends DeesElement {
       return;
     }
     this.isDestroying = true;
+    this.searchAbort?.abort();
 
     // Remove scroll/resize listeners
     window.removeEventListener('scroll', this.handleScrollOrResize, { capture: true } as EventListenerOptions);
@@ -331,6 +345,7 @@ export class DeesInputDropdownPopup extends DeesElement {
 
   public updateOptions(options: { option: string; key: string; payload?: any }[]): void {
     this.options = options;
+    if (this.searchOptions) return;
     // Re-filter with current search value
     if (this.searchValue) {
       const searchLower = this.searchValue.toLowerCase();
@@ -354,6 +369,7 @@ export class DeesInputDropdownPopup extends DeesElement {
   private handleSearch = (event: Event): void => {
     const searchTerm = (event.target as HTMLInputElement).value;
     this.searchValue = searchTerm;
+    if (this.searchOptions) { void this.searchRemote(); return; }
     const searchLower = searchTerm.toLowerCase();
     this.filteredOptions = this.options.filter((option) =>
       option.option.toLowerCase().includes(searchLower)
@@ -361,7 +377,25 @@ export class DeesInputDropdownPopup extends DeesElement {
     this.highlightedIndex = 0;
   };
 
+  private async searchRemote(): Promise<void> {
+    this.searchAbort?.abort();
+    const controller = this.searchAbort = new AbortController();
+    this.loading = true;
+    this.searchError = '';
+    this.filteredOptions = [];
+    this.highlightedIndex = 0;
+    try {
+      const options = await this.searchOptions!(this.searchValue, controller.signal);
+      if (!controller.signal.aborted) this.filteredOptions = options;
+    } catch (error) {
+      if (!controller.signal.aborted) this.searchError = error instanceof Error ? error.message : 'Search failed. Try again.';
+    } finally {
+      if (!controller.signal.aborted) this.loading = false;
+    }
+  }
+
   private handleSearchKeydown = (event: KeyboardEvent): void => {
+    if (event.isComposing) return;
     const key = event.key;
     const maxIndex = this.filteredOptions.length - 1;
 
@@ -370,7 +404,7 @@ export class DeesInputDropdownPopup extends DeesElement {
       this.highlightedIndex = this.highlightedIndex + 1 > maxIndex ? 0 : this.highlightedIndex + 1;
     } else if (key === 'ArrowUp') {
       event.preventDefault();
-      this.highlightedIndex = this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1;
+      this.highlightedIndex = Math.max(0, this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1);
     } else if (key === 'Enter') {
       event.preventDefault();
       if (this.filteredOptions[this.highlightedIndex]) {
@@ -391,6 +425,7 @@ export class DeesInputDropdownPopup extends DeesElement {
   };
 
   async disconnectedCallback() {
+    this.searchAbort?.abort();
     window.removeEventListener('scroll', this.handleScrollOrResize, { capture: true } as EventListenerOptions);
     window.removeEventListener('resize', this.handleScrollOrResize);
     zIndexRegistry.unregister(this);

package/ts_web/elements/00group-input/dees-input-reference/dees-input-reference.demo.ts

@@ -0,0 +1,9 @@
+import { html } from '@design.estate/dees-element';
+import { demoPage, demoSection } from '../../../demos/templates.js';
+
+export const demoFunc = () => demoPage('Reference composer', 'Type #_ to search at the cursor. Choose a ticket and continue writing.',
+  demoSection('Ticket references', 'References preserve IDs through editing, undo and copy/paste.', html`
+    <dees-input-reference .searchReferences=${async (query: string) => [
+      { id: 'ticket-1', label: '#CAT-101 Keyboard navigation' }, { id: 'ticket-2', label: '#CAT-102 Ticket detail' },
+    ].filter(item => item.label.toLowerCase().includes(query.toLowerCase()))}></dees-input-reference>
+  `));

package/ts_web/elements/00group-input/dees-input-reference/dees-input-reference.ts

@@ -0,0 +1,221 @@
+import { DeesElement, customElement, property, state, html, css, cssManager } from '@design.estate/dees-element';
+import type { Editor } from '@tiptap/core';
+import { DeesServiceLibLoader } from '../../../services/DeesServiceLibLoader.js';
+import { themeDefaultStyles } from '../../00theme.js';
+import { DeesInputDropdownPopup } from '../dees-input-dropdown/dees-input-dropdown-popup.js';
+import type { IInputReference, TReferenceContent, TReferenceSearch } from './interfaces.js';
+import { referenceContent, referenceDocument } from './document.js';
+import { demoFunc } from './dees-input-reference.demo.js';
+
+declare global { interface HTMLElementTagNameMap { 'dees-input-reference': DeesInputReference; } }
+
+@customElement('dees-input-reference')
+export class DeesInputReference extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Input', 'Kanban'];
+  @property({ attribute: false }) accessor value: TReferenceContent = [];
+  @property({ attribute: false }) accessor searchReferences: TReferenceSearch | undefined;
+  @property({ type: String }) accessor trigger = '#_';
+  @property({ type: String }) accessor label = 'Message';
+  @property({ type: String }) accessor placeholder = 'Write a comment…';
+  @property({ type: String }) accessor searchLabel = 'Search tickets';
+  /** Changing documents resets editor history, so undo cannot cross conversation boundaries. */
+  @property({ type: String }) accessor documentKey = '';
+  @property({ type: Boolean }) accessor disabled = false;
+  @state() private accessor loadError = '';
+  private editor?: Editor;
+  private initializing?: Promise<void>;
+  private connection = 0;
+  private popup?: DeesInputDropdownPopup;
+  private popupOpening?: Promise<void>;
+  private referenceRange?: { from: number; to: number };
+  private serializedValue = '';
+
+  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
+    :host { display: block; min-width: 0; color: var(--dees-color-text-primary); font-family: var(--dees-font-family); }
+    .editor { border: 1px solid var(--dees-color-border-default); border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-primary); }
+    .editor:focus-within { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 1px; }
+    .ProseMirror { padding: 12px; min-height: 84px; max-height: 260px; overflow: auto; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-font-body-size); line-height: 1.6; }
+    .ProseMirror p { margin: 0; }
+    .ProseMirror p + p { margin-top: 0; }
+    .ProseMirror:has(> p:only-child > br:only-child)::before { content: attr(data-placeholder); float: left; color: var(--dees-color-text-muted); pointer-events: none; height: 0; }
+    .ProseMirror [data-reference-id] { display: inline; padding: 1px 5px; border-radius: var(--dees-radius-sm); color: var(--dees-color-link); background: var(--dees-color-badge-default-bg); cursor: pointer; font-weight: 500; }
+    .ProseMirror [data-reference-id]:focus-visible, .ProseMirror .ProseMirror-selectednode { outline: 2px solid var(--dees-color-focus-ring); }
+    .ProseMirror[contenteditable=false] { opacity: .65; }
+    .error { color: var(--dees-color-text-error); font-size: var(--dees-font-footnote-size); }
+  `];
+
+  public render() {
+    return html`<div class="editor"></div>${this.loadError ? html`<p class="error" role="alert">${this.loadError}</p>` : ''}`;
+  }
+
+  public async connectedCallback(): Promise<void> {
+    const connection = super.connectedCallback();
+    this.connection++;
+    void this.initialize();
+    await connection;
+  }
+
+  /** Resolves after the lazy editor is mounted; also useful when focusing after opening a modal. */
+  public async ready(): Promise<void> {
+    await this.initialize();
+    if (!this.editor) throw new Error(this.loadError || 'Connect the reference editor before calling ready().');
+  }
+
+  private initialize(): Promise<void> {
+    if (this.editor) return Promise.resolve();
+    if (this.initializing) return this.initializing;
+    const connection = this.connection;
+    const operation = (async () => {
+      await this.updateComplete;
+      const { Editor, Node, StarterKit } = await DeesServiceLibLoader.getInstance().loadTiptap();
+      if (!this.isConnected || connection !== this.connection) return;
+      const referenceNode = Node.create({
+        name: 'catalogReference', group: 'inline', inline: true, atom: true, selectable: true,
+        addAttributes: () => ({
+          id: { default: '', parseHTML: element => element.getAttribute('data-reference-id') },
+          label: { default: '', parseHTML: element => element.textContent },
+        }),
+        parseHTML: () => [{ tag: 'span[data-reference-id]' }],
+        renderHTML: ({ node }) => ['span', { 'data-reference-id': String(node.attrs.id), contenteditable: 'false', role: 'link', tabindex: '0' }, String(node.attrs.label)],
+        renderText: ({ node }) => String(node.attrs.label),
+      });
+      this.editor = new Editor({
+        element: this.shadowRoot!.querySelector<HTMLElement>('.editor')!,
+        injectCSS: false,
+        editable: !this.disabled,
+        extensions: [StarterKit.configure({ blockquote: false, bold: false, bulletList: false, code: false, codeBlock: false, heading: false, horizontalRule: false, italic: false, listItem: false, orderedList: false, strike: false }), referenceNode],
+        content: referenceDocument(this.value),
+        editorProps: {
+          attributes: { role: 'textbox', 'aria-multiline': 'true', 'aria-label': this.label, 'data-placeholder': this.placeholder },
+          handleClickOn: (_view, _position, node, _nodePosition, event, direct) => {
+            if (!direct || node.type.name !== 'catalogReference') return false;
+            event.preventDefault(); this.openReference({ id: String(node.attrs.id), label: String(node.attrs.label) }); return true;
+          },
+          handleDOMEvents: {
+            keydown: (_view, event) => {
+              const target = event.target as HTMLElement;
+              if (event.key === 'Enter' && target.dataset.referenceId) {
+                event.preventDefault(); this.openReference({ id: target.dataset.referenceId, label: target.textContent ?? '' }); return true;
+              }
+              if ((event.ctrlKey || event.metaKey) && event.key === 'Enter' && !event.isComposing && !this.disabled) {
+                event.preventDefault(); this.dispatchEvent(new CustomEvent('reference-submit', { bubbles: true, composed: true })); return true;
+              }
+              return false;
+            },
+            compositionend: () => { queueMicrotask(() => this.detectTrigger()); return false; },
+          },
+        },
+        onUpdate: ({ editor, transaction }) => {
+          this.value = referenceContent(editor.getJSON());
+          this.serializedValue = JSON.stringify(this.value);
+          this.dispatchEvent(new CustomEvent('reference-input', { detail: { value: this.value }, bubbles: true, composed: true }));
+          if (!transaction.getMeta('preventReferenceTrigger')) this.detectTrigger();
+        },
+      });
+      this.serializedValue = JSON.stringify(this.value);
+      this.loadError = '';
+    })().catch(error => { this.loadError = error instanceof Error ? error.message : 'Could not load the editor.'; })
+      .finally(() => { if (this.initializing === operation) this.initializing = undefined; });
+    this.initializing = operation;
+    return operation;
+  }
+
+  public updated(changed: Map<string, unknown>): void {
+    if (changed.has('documentKey') && changed.get('documentKey') !== undefined && this.editor) {
+      this.connection++;
+      void this.closePicker(false);
+      this.editor.destroy(); this.editor = undefined; this.initializing = undefined;
+      void this.initialize();
+    }
+    if (changed.has('disabled')) {
+      this.editor?.setEditable(!this.disabled, false);
+      if (this.disabled) void this.closePicker(false);
+    }
+    if (changed.has('value') && this.editor && JSON.stringify(this.value) !== this.serializedValue) {
+      void this.closePicker(false);
+      this.editor.commands.setContent(referenceDocument(this.value), false);
+      this.serializedValue = JSON.stringify(this.value);
+    }
+    if (changed.has('label') || changed.has('placeholder')) this.editor?.setOptions({ editorProps: {
+      ...this.editor.options.editorProps,
+      attributes: { role: 'textbox', 'aria-multiline': 'true', 'aria-label': this.label, 'data-placeholder': this.placeholder },
+    } });
+  }
+
+  public focus(options?: FocusOptions): void { this.editor?.view.dom.focus(options); }
+
+  private detectTrigger(): void {
+    const editor = this.editor;
+    if (!editor || this.disabled || this.popup || !this.searchReferences || !this.trigger || editor.view.composing || !editor.isFocused) return;
+    const { from, to, $from } = editor.state.selection;
+    if (from !== to || $from.parentOffset < this.trigger.length) return;
+    if ($from.parent.textBetween($from.parentOffset - this.trigger.length, $from.parentOffset, '', '\ufffc') !== this.trigger) return;
+    this.referenceRange = { from: from - this.trigger.length, to };
+    void this.openPicker();
+  }
+
+  private positionPicker(): void {
+    if (!this.editor || !this.popup || !this.referenceRange) return;
+    const coords = this.editor.view.coordsAtPos(this.referenceRange.to);
+    this.popup.triggerRect = new DOMRect(coords.left, coords.top, 340, coords.bottom - coords.top);
+    this.popup.opensToTop = window.innerHeight - coords.bottom < 300 && coords.top > window.innerHeight - coords.bottom;
+  }
+
+  private async openPicker(): Promise<void> {
+    const popup = this.popup = new DeesInputDropdownPopup();
+    popup.ownerComponent = this;
+    popup.searchLabel = this.searchLabel;
+    popup.searchOptions = async (query, signal) => (await this.searchReferences!(query, signal))
+      .map(reference => ({ key: reference.id, option: reference.label, payload: reference }));
+    this.positionPicker();
+    popup.addEventListener('reposition-request', () => this.positionPicker());
+    popup.addEventListener('close-request', () => { void this.closePicker(true); });
+    popup.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === 'Tab') { event.preventDefault(); void this.closePicker(true); }
+    });
+    popup.addEventListener('option-selected', (event: Event) => {
+      const reference = (event as CustomEvent<{ payload: IInputReference }>).detail.payload;
+      const range = this.referenceRange;
+      if (range && this.editor && !this.disabled) {
+        this.editor.chain().setMeta('preventReferenceTrigger', true).insertContentAt(range, [
+          { type: 'catalogReference', attrs: reference }, { type: 'text', text: ' ' },
+        ]).run();
+      }
+      void this.closePicker(true);
+    });
+    this.popupOpening = popup.show();
+    try {
+      await this.popupOpening;
+      if (this.popup === popup && this.isConnected && !this.disabled) await popup.focusSearchInput();
+    } catch (error) {
+      this.loadError = error instanceof Error ? error.message : 'Could not open search.';
+      void this.closePicker(false);
+    }
+  }
+
+  private async closePicker(restoreFocus: boolean): Promise<void> {
+    const popup = this.popup;
+    const editor = this.editor;
+    const opening = this.popupOpening;
+    this.popup = undefined;
+    this.referenceRange = undefined;
+    if (!popup) return;
+    await opening?.catch(() => undefined);
+    await popup.hide();
+    if (restoreFocus && this.isConnected && !this.disabled && this.editor === editor) editor?.commands.focus();
+  }
+
+  private openReference(reference: IInputReference): void {
+    this.dispatchEvent(new CustomEvent('reference-open', { detail: reference, bubbles: true, composed: true }));
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    this.connection++;
+    void this.closePicker(false);
+    this.editor?.destroy();
+    this.editor = undefined;
+    this.initializing = undefined;
+    await super.disconnectedCallback();
+  }
+}

package/ts_web/elements/00group-input/dees-input-reference/document.ts

@@ -0,0 +1,38 @@
+import type { JSONContent } from '@tiptap/core';
+import type { TReferenceContent } from './interfaces.js';
+
+/** The public value is editor-independent JSON: plain text (including newlines) and references. */
+export const referenceDocument = (value: TReferenceContent): JSONContent => {
+  const paragraphs: JSONContent[] = [{ type: 'paragraph', content: [] }];
+  for (const part of value) {
+    if (part.type === 'reference') {
+      paragraphs.at(-1)!.content!.push({ type: 'catalogReference', attrs: { id: part.id, label: part.label } });
+    } else {
+      const lines = part.text.split('\n');
+      lines.forEach((text, index) => {
+        if (index) paragraphs.push({ type: 'paragraph', content: [] });
+        if (text) paragraphs.at(-1)!.content!.push({ type: 'text', text });
+      });
+    }
+  }
+  return { type: 'doc', content: paragraphs };
+};
+
+export const referenceContent = (document: JSONContent): TReferenceContent => {
+  const parts: TReferenceContent = [];
+  const appendText = (text: string) => {
+    if (!text) return;
+    const last = parts.at(-1);
+    if (last?.type === 'text') last.text += text;
+    else parts.push({ type: 'text', text });
+  };
+  for (const [index, paragraph] of (document.content ?? []).entries()) {
+    if (index) appendText('\n');
+    for (const node of paragraph.content ?? []) {
+      if (node.type === 'catalogReference') parts.push({ type: 'reference', id: String(node.attrs!.id), label: String(node.attrs!.label) });
+      else if (node.type === 'hardBreak') appendText('\n');
+      else appendText(node.text ?? '');
+    }
+  }
+  return parts;
+};

package/ts_web/elements/00group-input/dees-input-reference/index.ts

@@ -0,0 +1,2 @@
+export * from './interfaces.js';
+export * from './dees-input-reference.js';

package/ts_web/elements/00group-input/dees-input-reference/interfaces.ts

@@ -0,0 +1,8 @@
+/** Stable reference identity; label is a human-readable snapshot, never the lookup key. */
+export interface IInputReference { id: string; label: string; }
+export type TReferencePart = { type: 'text'; text: string } | { type: 'reference'; id: string; label: string };
+export type TReferenceContent = TReferencePart[];
+export type TReferenceSearch = (query: string, signal: AbortSignal) => Promise<IInputReference[]>;
+
+export const referenceText = (content: TReferenceContent): string =>
+  content.map(part => part.type === 'text' ? part.text : part.label).join('');

package/ts_web/elements/00group-input/index.ts

@@ -19,3 +19,4 @@ export * from './dees-input-toggle/index.js';
 export * from './dees-input-typelist/index.js';
 export * from './dees-input-wysiwyg.js';
 export * from './profilepicture/dees-input-profilepicture.js';
+export * from './dees-input-reference/index.js';

package/ts_web/elements/00group-kanban/dees-kanban/dees-kanban.demo.ts

@@ -0,0 +1,9 @@
+import { html } from '@design.estate/dees-element';
+import { demoApp } from '../../../demos/templates.js';
+import { createKanbanDemo, kanbanDemoColumns, kanbanDemoPeople } from '../kanban.demodata.js';
+
+export const demoFunc = () => {
+  const demo = createKanbanDemo();
+  return demoApp(html`<dees-kanban heading="Product workspace" .tickets=${demo.tickets} .columns=${kanbanDemoColumns}
+    .people=${kanbanDemoPeople} .provider=${demo.provider}></dees-kanban>`);
+};