@yuuvis/client-framework 3.7.1 → 3.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuuvis/client-framework",
-  "version": "3.7.1",
+  "version": "3.8.1",
   "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
   "license": "MIT",
   "peerDependencies": {
@@ -8,16 +8,16 @@
     "@angular/common": "^21.2.9",
     "@angular/core": "^21.2.9",
     "angular-gridster2": "^21.0.1",
-    "@yuuvis/client-core": "^3.7.1",
-    "@yuuvis/client-shell-core": "^3.7.1",
-    "@yuuvis/client-components": "^3.7.1",
+    "@yuuvis/client-core": "^3.8.1",
+    "@yuuvis/client-shell-core": "^3.8.1",
+    "@yuuvis/client-components": "^3.8.1",
     "ng-dynamic-component": "^10.8.2",
     "modern-normalize": "^3.0.1"
   },
   "dependencies": {
     "@angular/material": "^21.2.7",
     "@ngrx/signals": "^21.1.0",
-    "@yuuvis/material": "^3.7.1",
+    "@yuuvis/material": "^3.8.1",
     "@yuuvis/media-viewer": "^3.0.4",
     "angular-split": "^20.0.0",
     "vis-network": "^10.0.2",
@@ -149,6 +149,10 @@
       "types": "./types/yuuvis-client-framework-simple-search.d.ts",
       "default": "./fesm2022/yuuvis-client-framework-simple-search.mjs"
     },
+    "./smart-search": {
+      "types": "./types/yuuvis-client-framework-smart-search.d.ts",
+      "default": "./fesm2022/yuuvis-client-framework-smart-search.mjs"
+    },
     "./sort": {
       "types": "./types/yuuvis-client-framework-sort.d.ts",
       "default": "./fesm2022/yuuvis-client-framework-sort.mjs"

package/smart-search/README.md

@@ -0,0 +1,109 @@
+# @yuuvis/client-framework/smart-search
+
+Secondary entry point of `@yuuvis/client-framework`. Import from `@yuuvis/client-framework/smart-search`.
+
+A visual, guided query builder that turns chip-based user input into a [CMIS](https://docs.oasis-open.org/cmis/CMIS/v1.1/CMIS-v1.1.html) query. Instead of typing query syntax, users pick object types, fields, operators and values through an inline autocomplete; the component assembles a valid, injection-safe `SELECT … WHERE …` statement and emits it on every change.
+
+## Core features
+
+- **Full-text search bar** — a `CONTAINS` search with a selectable scope (`all` = metadata + content, `metadata`, or `content`) and an optional object-type restriction.
+- **Type blocks** — one or more blocks, each targeting one or more object types. Conditions inside a block apply to the fields shared by all of its types (plus inherited base/system fields such as `system:creationDate`).
+- **Guided condition building** — a step-by-step `type → field → operator → value` flow. Operators are filtered to those that make sense for the field's type (e.g. `>`/`<` for numbers and dates, date presets for dates, `= true/false` for booleans, `empty`/`not empty` for everything).
+- **Real metadata widgets** — the value step renders the field's actual editor (datepicker, catalog select, organization picker, …) via the metadata-form renderer, so values are entered the same way as in object forms.
+- **Nested groups** — parenthesized AND/OR sub-expressions, nestable to arbitrary depth.
+- **Table conditions** — query into table-type properties by their columns, matched against any row (`tableField[*].(…)`).
+- **Save / restore** — capture the whole search as a plain-data, JSON-serializable [`SmartSearchState`](src/lib/smart-search.interface.ts) and reload it later.
+- **Injection-safe output** — all values are escaped; values that don't match their field's declared type are quoted as a fallback so a hostile value can never break out of the literal.
+
+## Usage
+
+`SmartSearchComponent` is a standalone component — import it directly.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SmartSearchComponent } from '@yuuvis/client-framework/smart-search';
+
+@Component({
+  selector: 'app-search',
+  imports: [SmartSearchComponent],
+  template: `
+    <yuv-smart-search
+      [types]="['document', 'invoice']"
+      [skipProperties]="['system:traceId']"
+      (queryChange)="onQuery($event)"
+    />
+  `
+})
+export class SearchComponent {
+  query = signal('');
+
+  onQuery(cmisQuery: string) {
+    // An empty string means "no query" — treat it as a cleared search.
+    this.query.set(cmisQuery);
+  }
+}
+```
+
+### Inputs
+
+| Input            | Type       | Default | Description                                                                                   |
+| ---------------- | ---------- | ------- | --------------------------------------------------------------------------------------------- |
+| `types`          | `string[]` | `[]`    | Object-type ids that may be searched. Set at least one to enable building blocks.             |
+| `skipProperties` | `string[]` | `[]`    | Field ids to hide from the field picker (e.g. internal/system properties).                    |
+
+### Outputs
+
+| Output        | Type     | Description                                                                                 |
+| ------------- | -------- | ------------------------------------------------------------------------------------------- |
+| `queryChange` | `string` | The current CMIS query. Emitted on every change; `''` means an empty search ("no query").   |
+
+### Saving and restoring state
+
+`getState()` returns a serializable snapshot; `loadState()` restores one. `clear()` resets the whole search.
+
+```ts
+import { Component, viewChild } from '@angular/core';
+import { SmartSearchComponent } from '@yuuvis/client-framework/smart-search';
+
+@Component({ /* … */ })
+export class SearchComponent {
+  private search = viewChild.required(SmartSearchComponent);
+
+  persist() {
+    localStorage.setItem('search', JSON.stringify(this.search().getState()));
+  }
+
+  restore() {
+    const raw = localStorage.getItem('search');
+    if (raw) this.search().loadState(JSON.parse(raw));
+  }
+
+  reset() {
+    this.search().clear();
+  }
+}
+```
+
+## How it produces a query
+
+The emitted query joins independent **units** — the full-text unit and each type block — with `OR`:
+
+```sql
+-- types=['invoice'], full-text "acme" in metadata, condition: total > 1000
+SELECT * FROM system:object
+WHERE (system:metadata CONTAINS('acme'))
+   OR (objectTypeId = 'invoice' AND total > 1000)
+```
+
+Within a block, the type restriction is always `AND`-ed with the condition expression, and the conditions combine with the block's own AND/OR combinator. Nested groups add parentheses; table conditions render as `tableField[*].(col op val …)`.
+
+## Architecture
+
+| File                                                               | Responsibility                                                                          |
+| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
+| [`smart-search.component.ts`](src/lib/smart-search.component.ts)   | Host component — public API, focus management, autocomplete plumbing.                   |
+| [`smart-search-edit.controller.ts`](src/lib/smart-search-edit.controller.ts) | All state and mutators (signals); provided per component instance.            |
+| [`smart-search-group.component.ts`](src/lib/smart-search-group.component.ts) | Recursive renderer for a block body, nested group or table.                   |
+| [`smart-search.query.ts`](src/lib/smart-search.query.ts)          | Pure CMIS query builders (`buildCmisQuery`, value escaping, operator rendering).        |
+| [`smart-search.tree.ts`](src/lib/smart-search.tree.ts)            | Immutable tree helpers (find / update / remove containers and conditions).              |
+| [`smart-search.interface.ts`](src/lib/smart-search.interface.ts)  | Data model (`SearchBlock`, `FieldCondition`, `ConditionGroup`, `SmartSearchState`, …).  |

package/types/yuuvis-client-framework-metadata-form.d.ts

@@ -25,6 +25,10 @@ declare class MetadataFormElementRegistry {
     private _edit;
     private _search;
     private _create;
+    private _rawDefaults;
+    private _rawEdit;
+    private _rawSearch;
+    private _rawCreate;
     NAME_PROPERTY_PREFIX: string;
     /**
      * Get a template to render a certain form element
@@ -59,6 +63,39 @@ declare class MetadataFormElementRegistry {
      * @param propertyType The internal type to remove the component for
      */
     _removeDefaultElementTemplate(propertyType: string): void;
+    /**
+     * Get a raw (unwrapped) form element template — only the inner widget,
+     * without the surrounding `mat-form-field` / label / hint / error shell.
+     * Use this when composing the widget into a custom layout (e.g. smart-search).
+     * @param propertyType The internal type to get the template for
+     * @param situation Form situation
+     * @returns TemplateRef or undefined
+     */
+    getRawElementTemplate(propertyType: string, situation?: string): TemplateRef<any> | undefined;
+    /**
+     * Register a raw form element template for a certain internal type.
+     * @param propertyType The internal type to provide the template for
+     * @param templateRef The template
+     * @param situation Form situation to provide the form element for (defaults to EDIT)
+     */
+    addRawElementTemplate(propertyType: string, templateRef: TemplateRef<any>, situation?: Situation): void;
+    /**
+     * Remove a registered raw form element template.
+     * @param propertyType The internal type to remove the template for
+     * @param situation Form situation
+     */
+    removeRawElementTemplate(propertyType: string, situation?: Situation): void;
+    /**
+     * Register a default raw form element template (used across all situations).
+     * @param propertyType The internal type to provide the template for
+     * @param templateRef The default template
+     */
+    _addDefaultRawElementTemplate(propertyType: string, templateRef: TemplateRef<any>): void;
+    /**
+     * Remove a registered default raw form element template.
+     * @param propertyType The internal type to remove the template for
+     */
+    _removeDefaultRawElementTemplate(propertyType: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetadataFormElementRegistry, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<MetadataFormElementRegistry>;
 }
@@ -165,6 +202,49 @@ declare class ObjectMetadataElementTemplateDirective implements OnInit, OnDestro
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ObjectMetadataElementTemplateDirective, "[yuvMetadataElementTemplate]", never, { "yuvMetadataElementTemplate": { "alias": "yuvMetadataElementTemplate"; "required": false; "isSignal": true; }; "situation": { "alias": "situation"; "required": false; "isSignal": true; }; "propertyType": { "alias": "propertyType"; "required": false; "isSignal": true; }; "propertyName": { "alias": "propertyName"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Directive to be applied to an `ng-template` that renders only the raw form
+ * widget for a metadata property (without the surrounding `mat-form-field`
+ * label/hint/error shell). The template is registered in the raw bucket of
+ * `MetadataFormElementRegistry`, parallel to the wrapped templates registered
+ * via `yuvMetadataElementTemplate`.
+ *
+ * Use this to expose a type-aware input that can be composed into custom
+ * layouts — for example smart-search, where conditions are built inline as
+ * a pill chain and a full form-field shell would be visually wrong.
+ *
+ * @example
+ * <ng-template #rawString yuvMetadataElementRaw="default" propertyType="string" let-ctx>
+ *   <yuv-string [formControl]="ctx.ctrl" [required]="ctx.field.required" />
+ * </ng-template>
+ */
+declare class ObjectMetadataElementRawDirective implements OnInit, OnDestroy {
+    #private;
+    /**
+     * Bucket to register the template. Use 'default' for templates that should be
+     * used across all situations.
+     */
+    yuvMetadataElementRaw: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Situation to register the template for. Defaults to `EDIT`.
+     */
+    situation: _angular_core.InputSignal<Situation>;
+    /**
+     * Internal property type to register the template under. You need to set
+     * either `propertyType` or `propertyName`. When both are set, `propertyName`
+     * wins because it is more precise.
+     */
+    propertyType: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Register the raw template by metadata field name.
+     */
+    propertyName: _angular_core.InputSignal<string | undefined>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ObjectMetadataElementRawDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ObjectMetadataElementRawDirective, "[yuvMetadataElementRaw]", never, { "yuvMetadataElementRaw": { "alias": "yuvMetadataElementRaw"; "required": false; "isSignal": true; }; "situation": { "alias": "situation"; "required": false; "isSignal": true; }; "propertyType": { "alias": "propertyType"; "required": false; "isSignal": true; }; "propertyName": { "alias": "propertyName"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Component to render a metadata form field within an object form. These forms are
  * created to render and edit metadata of DMS objects. This component is used as a wrapper
@@ -175,6 +255,12 @@ declare class MetadataFormFieldComponent {
     readonly: boolean;
     formChangedSubject: _angular_core.InputSignal<Subject<ParentFormChangedEvent> | undefined>;
     formField: _angular_core.InputSignal<ObjectTypeField>;
+    /**
+     * Which template variant to render. `default` renders the wrapped form field
+     * (mat-form-field with label, hint, error). `raw` renders only the inner
+     * widget — useful for composing into custom layouts such as smart-search.
+     */
+    variant: _angular_core.InputSignal<"default" | "raw">;
     elementTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     context: _angular_core.Signal<MetadataFormFieldContext>;
     /**
@@ -182,8 +268,8 @@ declare class MetadataFormFieldComponent {
      */
     situation: _angular_core.InputSignal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetadataFormFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetadataFormFieldComponent, "yuv-metadata-form-field", never, { "formChangedSubject": { "alias": "formChangedSubject"; "required": false; "isSignal": true; }; "formField": { "alias": "field"; "required": true; "isSignal": true; }; "situation": { "alias": "situation"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetadataFormFieldComponent, "yuv-metadata-form-field", never, { "formChangedSubject": { "alias": "formChangedSubject"; "required": false; "isSignal": true; }; "formField": { "alias": "field"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "situation": { "alias": "situation"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }
 
-export { MetadataFormElementRegistry, MetadataFormFieldComponent, ObjectMetadataElementErrorDirective, ObjectMetadataElementLabelDirective, ObjectMetadataElementTemplateDirective };
+export { MetadataFormElementRegistry, MetadataFormFieldComponent, ObjectMetadataElementErrorDirective, ObjectMetadataElementLabelDirective, ObjectMetadataElementRawDirective, ObjectMetadataElementTemplateDirective };
 export type { MetadataFormFieldContext, ParentFormChangedEvent };