@syndew/oluso-admin-ui 0.0.0-stage → 0.0.1

package/fesm2022/syndew-oluso-admin-ui-search-results-page.component-EH82yuW3.mjs

@@ -0,0 +1,543 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject, takeUntil, switchMap, of, catchError } from 'rxjs';
+import { IconComponent } from '@syndew/oluso-ui-core';
+import { A as AdminSearchService, T as TenantService, M as MIN_SEARCH_LENGTH, P as PLATFORM_MODULE, g as groupProvidersByModule, a as MODULE_LABEL_FALLBACKS, m as moduleTone, b as badgeTone, w as workspaceHref, s as searchPageParams } from './syndew-oluso-admin-ui-syndew-oluso-admin-ui-BVs_bAxm.mjs';
+
+/**
+ * Full results for a query: every record kind the caller may see, or one kind
+ * with its filters when narrowed. State lives in the URL so a result set can be
+ * refreshed or shared.
+ */
+class SearchResultsPageComponent {
+    searchService = inject(AdminSearchService);
+    tenantService = inject(TenantService);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    destroy$ = new Subject();
+    minLength = MIN_SEARCH_LENGTH;
+    platformModule = PLATFORM_MODULE;
+    draft = '';
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    providerId = signal(null, ...(ngDevMode ? [{ debugName: "providerId" }] : /* istanbul ignore next */ []));
+    filters = signal({}, ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    providers = signal([], ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
+    modules = signal({}, ...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
+    response = signal(null, ...(ngDevMode ? [{ debugName: "response" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    selectedProvider = computed(() => this.providers().find(p => p.providerId === this.providerId()) ?? null, ...(ngDevMode ? [{ debugName: "selectedProvider" }] : /* istanbul ignore next */ []));
+    hasFilters = computed(() => Object.values(this.filters()).some(v => v !== ''), ...(ngDevMode ? [{ debugName: "hasFilters" }] : /* istanbul ignore next */ []));
+    providerGroups = computed(() => groupProvidersByModule(this.providers(), m => this.moduleLabel(m)), ...(ngDevMode ? [{ debugName: "providerGroups" }] : /* istanbul ignore next */ []));
+    placeholder = computed(() => {
+        const provider = this.selectedProvider();
+        if (!provider)
+            return 'Search everything you can see';
+        const scope = provider.module === PLATFORM_MODULE ? '' : `${this.moduleLabel(provider.module)} `;
+        return `Search ${scope}${provider.displayName.toLowerCase()}`;
+    }, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.searchService.getProviders().pipe(takeUntil(this.destroy$)).subscribe(providers => this.providers.set(providers));
+        this.tenantService.getRegisteredModules().pipe(takeUntil(this.destroy$)).subscribe(response => {
+            const byKey = {};
+            for (const module of response.modules)
+                byKey[module.featureKey] = module;
+            this.modules.set(byKey);
+        });
+        this.route.queryParamMap
+            .pipe(switchMap(params => {
+            const query = (params.get('q') ?? '').trim();
+            const providerId = params.get('provider');
+            const filters = {};
+            for (const key of params.keys) {
+                if (key.startsWith('f.'))
+                    filters[key.slice(2)] = params.get(key) ?? '';
+            }
+            this.query.set(query);
+            this.draft = query;
+            this.providerId.set(providerId);
+            this.filters.set(filters);
+            if (query.length < MIN_SEARCH_LENGTH) {
+                this.response.set(null);
+                this.loading.set(false);
+                return of(null);
+            }
+            this.loading.set(true);
+            return this.searchService.search(query, { providerId: providerId ?? undefined, filters, limit: providerId ? 50 : 10 })
+                .pipe(catchError(() => of({ query, totalCount: 0, groups: [] })));
+        }), takeUntil(this.destroy$))
+            .subscribe(response => {
+            this.response.set(response);
+            this.loading.set(false);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    submit(event) {
+        event.preventDefault();
+        this.apply(this.draft.trim(), this.providerId(), this.filters());
+    }
+    /** Emptying the box, by typing or the field's clear button, drops the results straight away. */
+    onDraftChange(value) {
+        this.draft = value;
+        if (value.trim() === '' && this.query() !== '') {
+            this.apply('', this.providerId(), this.filters());
+        }
+    }
+    selectProvider(providerId) {
+        this.apply(this.query(), providerId, {});
+    }
+    filterValue(key) {
+        return this.filters()[key] ?? '';
+    }
+    filterValues(key) {
+        const value = this.filterValue(key);
+        return value ? value.split(',') : [];
+    }
+    setFilter(key, value) {
+        this.apply(this.query(), this.providerId(), { ...this.filters(), [key]: value ?? '' });
+    }
+    rangePart(key, index) {
+        return this.filterValue(key).split('..')[index] ?? '';
+    }
+    setRange(key, index, value) {
+        const parts = this.filterValue(key).split('..');
+        parts[index] = value == null ? '' : String(value);
+        const joined = `${parts[0] ?? ''}..${parts[1] ?? ''}`;
+        this.setFilter(key, joined === '..' ? '' : joined);
+    }
+    clearFilters() {
+        this.apply(this.query(), this.providerId(), {});
+    }
+    moduleLabel(module) {
+        return this.modules()[module]?.displayName ?? MODULE_LABEL_FALLBACKS[module] ?? module;
+    }
+    moduleTone(module) {
+        return moduleTone(this.modules()[module]?.color);
+    }
+    badgeTone(tone) {
+        return badgeTone(tone);
+    }
+    hrefFor(item) {
+        return item.route || workspaceHref(item.workspaceRoute) || '#';
+    }
+    openItem(event, item) {
+        if (item.route) {
+            event.preventDefault();
+            this.router.navigateByUrl(item.route);
+            return;
+        }
+        if (!workspaceHref(item.workspaceRoute))
+            event.preventDefault();
+    }
+    go(event, route) {
+        event.preventDefault();
+        this.router.navigateByUrl(route);
+    }
+    apply(query, providerId, filters) {
+        this.router.navigate([], { relativeTo: this.route, queryParams: searchPageParams(query, providerId, filters) });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SearchResultsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SearchResultsPageComponent, isStandalone: true, selector: "admin-search-results-page", ngImport: i0, template: `
+    <div class="space-y-6">
+      <div class="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-900">Search</h1>
+          @if (response(); as result) {
+            <p class="mt-1 text-sm text-gray-500">
+              {{ result.totalCount }} {{ result.totalCount === 1 ? 'match' : 'matches' }} for “{{ result.query }}”
+            </p>
+          }
+        </div>
+        <form class="flex items-center gap-2 w-full max-w-lg" (submit)="submit($event)">
+          <div class="relative flex-1">
+            <ui-icon name="search" class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
+            <input type="search" [ngModel]="draft" (ngModelChange)="onDraftChange($event)" name="q" aria-label="Search" [placeholder]="placeholder()"
+              class="w-full pl-9 text-sm border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500" />
+          </div>
+          <button type="submit" class="px-3 py-2 text-sm font-medium text-white bg-primary-600 rounded-md hover:bg-primary-700">Search</button>
+        </form>
+      </div>
+
+      <!-- Record kinds, grouped by module -->
+      <div class="rounded-lg border border-gray-200 bg-white p-3 space-y-2">
+        <div class="flex items-center gap-1.5 flex-wrap">
+          <span class="w-24 shrink-0 text-[11px] font-semibold uppercase tracking-wider text-gray-400">Search in</span>
+          <button type="button" (click)="selectProvider(null)"
+            class="px-2.5 py-1 rounded-full text-xs font-medium border transition-colors"
+            [class]="providerId() === null ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'">
+            Everything
+          </button>
+        </div>
+        @for (moduleGroup of providerGroups(); track moduleGroup.module) {
+          <div class="flex items-start gap-1.5 flex-wrap">
+            <span class="w-24 shrink-0 pt-1 text-xs font-medium text-gray-500 truncate" [title]="moduleGroup.label">{{ moduleGroup.label }}</span>
+            @for (provider of moduleGroup.providers; track provider.providerId) {
+              <button type="button" (click)="selectProvider(provider.providerId)"
+                class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium border transition-colors"
+                [class]="providerId() === provider.providerId ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'">
+                <ui-icon [name]="provider.icon" class="h-3 w-3" />
+                {{ provider.displayName }}
+              </button>
+            }
+          </div>
+        }
+      </div>
+
+      <!-- Filters for the selected kind -->
+      @if (selectedProvider(); as provider) {
+        @if (provider.filters.length > 0) {
+          <div class="flex flex-wrap items-end gap-3 p-3 rounded-lg border border-gray-200 bg-gray-50/60">
+            @for (filter of provider.filters; track filter.key) {
+              <div class="flex flex-col gap-0.5 text-[11px] font-medium text-gray-500">
+                <span>{{ filter.label }}</span>
+                @switch (filter.type) {
+                  @case ('select') {
+                    <select [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      class="h-8 text-xs border-gray-300 rounded-md py-0 pl-2 pr-7">
+                      <option value="">Any</option>
+                      @for (option of filter.options ?? []; track option.value) {
+                        <option [value]="option.value">{{ option.label }}</option>
+                      }
+                    </select>
+                  }
+                  @case ('multiselect') {
+                    <select multiple [attr.aria-label]="filter.label" [ngModel]="filterValues(filter.key)" (ngModelChange)="setFilter(filter.key, $event.join(','))"
+                      class="text-xs border-gray-300 rounded-md py-0.5 min-w-[8rem]" size="3">
+                      @for (option of filter.options ?? []; track option.value) {
+                        <option [value]="option.value">{{ option.label }}</option>
+                      }
+                    </select>
+                  }
+                  @case ('boolean') {
+                    <select [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      class="h-8 text-xs border-gray-300 rounded-md py-0 pl-2 pr-7">
+                      <option value="">Any</option>
+                      <option value="true">Yes</option>
+                      <option value="false">No</option>
+                    </select>
+                  }
+                  @case ('date') {
+                    <input type="date" [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      class="h-8 text-xs border-gray-300 rounded-md py-0 px-2" />
+                  }
+                  @case ('daterange') {
+                    <span class="flex items-center gap-1">
+                      <input type="date" [attr.aria-label]="filter.label + ' from'" [ngModel]="rangePart(filter.key, 0)" (ngModelChange)="setRange(filter.key, 0, $event)"
+                        class="h-8 text-xs border-gray-300 rounded-md py-0 px-2" />
+                      <span class="text-gray-400">to</span>
+                      <input type="date" [attr.aria-label]="filter.label + ' to'" [ngModel]="rangePart(filter.key, 1)" (ngModelChange)="setRange(filter.key, 1, $event)"
+                        class="h-8 text-xs border-gray-300 rounded-md py-0 px-2" />
+                    </span>
+                  }
+                  @case ('number') {
+                    <input type="number" [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      [placeholder]="filter.placeholder ?? ''" class="h-8 w-28 text-xs border-gray-300 rounded-md py-0 px-2" />
+                  }
+                  @case ('numberrange') {
+                    <span class="flex items-center gap-1">
+                      <input type="number" placeholder="Min" [attr.aria-label]="filter.label + ' minimum'" [ngModel]="rangePart(filter.key, 0)" (ngModelChange)="setRange(filter.key, 0, $event)"
+                        class="h-8 w-24 text-xs border-gray-300 rounded-md py-0 px-2" />
+                      <span class="text-gray-400">to</span>
+                      <input type="number" placeholder="Max" [attr.aria-label]="filter.label + ' maximum'" [ngModel]="rangePart(filter.key, 1)" (ngModelChange)="setRange(filter.key, 1, $event)"
+                        class="h-8 w-24 text-xs border-gray-300 rounded-md py-0 px-2" />
+                    </span>
+                  }
+                  @default {
+                    <input type="text" [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      [placeholder]="filter.placeholder ?? ''" class="h-8 w-40 text-xs border-gray-300 rounded-md py-0 px-2" />
+                  }
+                }
+              </div>
+            }
+            @if (hasFilters()) {
+              <button type="button" (click)="clearFilters()" class="h-8 text-xs text-gray-500 hover:text-gray-700 hover:underline">Reset filters</button>
+            }
+          </div>
+        }
+      }
+
+      <!-- Results -->
+      @if (query().length < minLength) {
+        <div class="rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-500">
+          Type at least {{ minLength }} characters to search.
+        </div>
+      } @else if (loading()) {
+        <div class="rounded-lg border border-gray-200 p-10 text-center text-sm text-gray-500">Searching…</div>
+      } @else if (response(); as result) {
+        @if (result.groups.length === 0) {
+          <div class="rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-500">
+            No matches for “{{ result.query }}”.
+          </div>
+        }
+        <div class="grid gap-4" [class.lg:grid-cols-2]="providerId() === null && result.groups.length > 1">
+          @for (group of result.groups; track group.providerId) {
+            <section class="rounded-lg border border-gray-200 bg-white overflow-hidden">
+              <header class="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 bg-gray-50/70">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="inline-flex h-6 w-6 items-center justify-center rounded" [class]="moduleTone(group.module)">
+                    <ui-icon [name]="group.icon" class="h-3.5 w-3.5" />
+                  </span>
+                  <h2 class="text-sm font-semibold text-gray-900 truncate">{{ group.displayName }}</h2>
+                  @if (group.module !== platformModule) {
+                    <span class="text-xs text-gray-400 truncate">· {{ moduleLabel(group.module) }}</span>
+                  }
+                  <span class="text-xs text-gray-400">({{ group.totalCount }})</span>
+                </div>
+                <div class="flex items-center gap-3 shrink-0 text-xs">
+                  @if (providerId() === null && group.totalCount > group.items.length) {
+                    <button type="button" (click)="selectProvider(group.providerId)" class="text-primary-600 hover:text-primary-700">Show all here</button>
+                  }
+                  @if (group.seeAllRoute) {
+                    <a [href]="group.seeAllRoute" (click)="go($event, group.seeAllRoute)" class="text-gray-500 hover:text-gray-700">Open list</a>
+                  }
+                </div>
+              </header>
+              <ul class="divide-y divide-gray-100">
+                @for (item of group.items; track item.id) {
+                  <li>
+                    <a [href]="hrefFor(item)" (click)="openItem($event, item)"
+                      class="flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors">
+                      @if (item.imageUrl) {
+                        <img [src]="item.imageUrl" alt="" class="h-9 w-9 rounded-full object-cover shrink-0" />
+                      } @else {
+                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-full shrink-0" [class]="moduleTone(group.module)">
+                          <ui-icon [name]="item.icon ?? group.icon" class="h-4 w-4" />
+                        </span>
+                      }
+                      <span class="min-w-0 flex-1">
+                        <span class="block truncate text-sm font-medium text-gray-900">{{ item.title }}</span>
+                        @if (item.subtitle) {
+                          <span class="block truncate text-xs text-gray-500">{{ item.subtitle }}</span>
+                        }
+                        @if (item.description) {
+                          <span class="block truncate text-xs text-gray-400">{{ item.description }}</span>
+                        }
+                      </span>
+                      @if (item.badges.length > 0) {
+                        <span class="flex flex-wrap justify-end gap-1 shrink-0 max-w-[14rem]">
+                          @for (badge of item.badges; track badge.label + badge.value) {
+                            <span class="inline-flex px-1.5 py-0.5 rounded text-[11px] font-medium" [class]="badgeTone(badge.tone)" [title]="badge.label">{{ badge.value }}</span>
+                          }
+                        </span>
+                      }
+                    </a>
+                  </li>
+                }
+              </ul>
+            </section>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["name", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SearchResultsPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'admin-search-results-page',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, IconComponent],
+                    template: `
+    <div class="space-y-6">
+      <div class="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-900">Search</h1>
+          @if (response(); as result) {
+            <p class="mt-1 text-sm text-gray-500">
+              {{ result.totalCount }} {{ result.totalCount === 1 ? 'match' : 'matches' }} for “{{ result.query }}”
+            </p>
+          }
+        </div>
+        <form class="flex items-center gap-2 w-full max-w-lg" (submit)="submit($event)">
+          <div class="relative flex-1">
+            <ui-icon name="search" class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
+            <input type="search" [ngModel]="draft" (ngModelChange)="onDraftChange($event)" name="q" aria-label="Search" [placeholder]="placeholder()"
+              class="w-full pl-9 text-sm border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500" />
+          </div>
+          <button type="submit" class="px-3 py-2 text-sm font-medium text-white bg-primary-600 rounded-md hover:bg-primary-700">Search</button>
+        </form>
+      </div>
+
+      <!-- Record kinds, grouped by module -->
+      <div class="rounded-lg border border-gray-200 bg-white p-3 space-y-2">
+        <div class="flex items-center gap-1.5 flex-wrap">
+          <span class="w-24 shrink-0 text-[11px] font-semibold uppercase tracking-wider text-gray-400">Search in</span>
+          <button type="button" (click)="selectProvider(null)"
+            class="px-2.5 py-1 rounded-full text-xs font-medium border transition-colors"
+            [class]="providerId() === null ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'">
+            Everything
+          </button>
+        </div>
+        @for (moduleGroup of providerGroups(); track moduleGroup.module) {
+          <div class="flex items-start gap-1.5 flex-wrap">
+            <span class="w-24 shrink-0 pt-1 text-xs font-medium text-gray-500 truncate" [title]="moduleGroup.label">{{ moduleGroup.label }}</span>
+            @for (provider of moduleGroup.providers; track provider.providerId) {
+              <button type="button" (click)="selectProvider(provider.providerId)"
+                class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium border transition-colors"
+                [class]="providerId() === provider.providerId ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'">
+                <ui-icon [name]="provider.icon" class="h-3 w-3" />
+                {{ provider.displayName }}
+              </button>
+            }
+          </div>
+        }
+      </div>
+
+      <!-- Filters for the selected kind -->
+      @if (selectedProvider(); as provider) {
+        @if (provider.filters.length > 0) {
+          <div class="flex flex-wrap items-end gap-3 p-3 rounded-lg border border-gray-200 bg-gray-50/60">
+            @for (filter of provider.filters; track filter.key) {
+              <div class="flex flex-col gap-0.5 text-[11px] font-medium text-gray-500">
+                <span>{{ filter.label }}</span>
+                @switch (filter.type) {
+                  @case ('select') {
+                    <select [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      class="h-8 text-xs border-gray-300 rounded-md py-0 pl-2 pr-7">
+                      <option value="">Any</option>
+                      @for (option of filter.options ?? []; track option.value) {
+                        <option [value]="option.value">{{ option.label }}</option>
+                      }
+                    </select>
+                  }
+                  @case ('multiselect') {
+                    <select multiple [attr.aria-label]="filter.label" [ngModel]="filterValues(filter.key)" (ngModelChange)="setFilter(filter.key, $event.join(','))"
+                      class="text-xs border-gray-300 rounded-md py-0.5 min-w-[8rem]" size="3">
+                      @for (option of filter.options ?? []; track option.value) {
+                        <option [value]="option.value">{{ option.label }}</option>
+                      }
+                    </select>
+                  }
+                  @case ('boolean') {
+                    <select [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      class="h-8 text-xs border-gray-300 rounded-md py-0 pl-2 pr-7">
+                      <option value="">Any</option>
+                      <option value="true">Yes</option>
+                      <option value="false">No</option>
+                    </select>
+                  }
+                  @case ('date') {
+                    <input type="date" [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      class="h-8 text-xs border-gray-300 rounded-md py-0 px-2" />
+                  }
+                  @case ('daterange') {
+                    <span class="flex items-center gap-1">
+                      <input type="date" [attr.aria-label]="filter.label + ' from'" [ngModel]="rangePart(filter.key, 0)" (ngModelChange)="setRange(filter.key, 0, $event)"
+                        class="h-8 text-xs border-gray-300 rounded-md py-0 px-2" />
+                      <span class="text-gray-400">to</span>
+                      <input type="date" [attr.aria-label]="filter.label + ' to'" [ngModel]="rangePart(filter.key, 1)" (ngModelChange)="setRange(filter.key, 1, $event)"
+                        class="h-8 text-xs border-gray-300 rounded-md py-0 px-2" />
+                    </span>
+                  }
+                  @case ('number') {
+                    <input type="number" [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      [placeholder]="filter.placeholder ?? ''" class="h-8 w-28 text-xs border-gray-300 rounded-md py-0 px-2" />
+                  }
+                  @case ('numberrange') {
+                    <span class="flex items-center gap-1">
+                      <input type="number" placeholder="Min" [attr.aria-label]="filter.label + ' minimum'" [ngModel]="rangePart(filter.key, 0)" (ngModelChange)="setRange(filter.key, 0, $event)"
+                        class="h-8 w-24 text-xs border-gray-300 rounded-md py-0 px-2" />
+                      <span class="text-gray-400">to</span>
+                      <input type="number" placeholder="Max" [attr.aria-label]="filter.label + ' maximum'" [ngModel]="rangePart(filter.key, 1)" (ngModelChange)="setRange(filter.key, 1, $event)"
+                        class="h-8 w-24 text-xs border-gray-300 rounded-md py-0 px-2" />
+                    </span>
+                  }
+                  @default {
+                    <input type="text" [attr.aria-label]="filter.label" [ngModel]="filterValue(filter.key)" (ngModelChange)="setFilter(filter.key, $event)"
+                      [placeholder]="filter.placeholder ?? ''" class="h-8 w-40 text-xs border-gray-300 rounded-md py-0 px-2" />
+                  }
+                }
+              </div>
+            }
+            @if (hasFilters()) {
+              <button type="button" (click)="clearFilters()" class="h-8 text-xs text-gray-500 hover:text-gray-700 hover:underline">Reset filters</button>
+            }
+          </div>
+        }
+      }
+
+      <!-- Results -->
+      @if (query().length < minLength) {
+        <div class="rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-500">
+          Type at least {{ minLength }} characters to search.
+        </div>
+      } @else if (loading()) {
+        <div class="rounded-lg border border-gray-200 p-10 text-center text-sm text-gray-500">Searching…</div>
+      } @else if (response(); as result) {
+        @if (result.groups.length === 0) {
+          <div class="rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-500">
+            No matches for “{{ result.query }}”.
+          </div>
+        }
+        <div class="grid gap-4" [class.lg:grid-cols-2]="providerId() === null && result.groups.length > 1">
+          @for (group of result.groups; track group.providerId) {
+            <section class="rounded-lg border border-gray-200 bg-white overflow-hidden">
+              <header class="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 bg-gray-50/70">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="inline-flex h-6 w-6 items-center justify-center rounded" [class]="moduleTone(group.module)">
+                    <ui-icon [name]="group.icon" class="h-3.5 w-3.5" />
+                  </span>
+                  <h2 class="text-sm font-semibold text-gray-900 truncate">{{ group.displayName }}</h2>
+                  @if (group.module !== platformModule) {
+                    <span class="text-xs text-gray-400 truncate">· {{ moduleLabel(group.module) }}</span>
+                  }
+                  <span class="text-xs text-gray-400">({{ group.totalCount }})</span>
+                </div>
+                <div class="flex items-center gap-3 shrink-0 text-xs">
+                  @if (providerId() === null && group.totalCount > group.items.length) {
+                    <button type="button" (click)="selectProvider(group.providerId)" class="text-primary-600 hover:text-primary-700">Show all here</button>
+                  }
+                  @if (group.seeAllRoute) {
+                    <a [href]="group.seeAllRoute" (click)="go($event, group.seeAllRoute)" class="text-gray-500 hover:text-gray-700">Open list</a>
+                  }
+                </div>
+              </header>
+              <ul class="divide-y divide-gray-100">
+                @for (item of group.items; track item.id) {
+                  <li>
+                    <a [href]="hrefFor(item)" (click)="openItem($event, item)"
+                      class="flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors">
+                      @if (item.imageUrl) {
+                        <img [src]="item.imageUrl" alt="" class="h-9 w-9 rounded-full object-cover shrink-0" />
+                      } @else {
+                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-full shrink-0" [class]="moduleTone(group.module)">
+                          <ui-icon [name]="item.icon ?? group.icon" class="h-4 w-4" />
+                        </span>
+                      }
+                      <span class="min-w-0 flex-1">
+                        <span class="block truncate text-sm font-medium text-gray-900">{{ item.title }}</span>
+                        @if (item.subtitle) {
+                          <span class="block truncate text-xs text-gray-500">{{ item.subtitle }}</span>
+                        }
+                        @if (item.description) {
+                          <span class="block truncate text-xs text-gray-400">{{ item.description }}</span>
+                        }
+                      </span>
+                      @if (item.badges.length > 0) {
+                        <span class="flex flex-wrap justify-end gap-1 shrink-0 max-w-[14rem]">
+                          @for (badge of item.badges; track badge.label + badge.value) {
+                            <span class="inline-flex px-1.5 py-0.5 rounded text-[11px] font-medium" [class]="badgeTone(badge.tone)" [title]="badge.label">{{ badge.value }}</span>
+                          }
+                        </span>
+                      }
+                    </a>
+                  </li>
+                }
+              </ul>
+            </section>
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }] });
+
+export { SearchResultsPageComponent };
+//# sourceMappingURL=syndew-oluso-admin-ui-search-results-page.component-EH82yuW3.mjs.map

package/fesm2022/syndew-oluso-admin-ui-search-results-page.component-EH82yuW3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"syndew-oluso-admin-ui-search-results-page.component-EH82yuW3.mjs","sources":["../../../../libs/admin-ui/src/lib/pages/search/search-results-page.component.ts"],"sourcesContent":["import { Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { Subject, catchError, of, switchMap, takeUntil } from 'rxjs';\nimport { IconComponent } from '@syndew/oluso-ui-core';\nimport {\n  AdminSearchService, AdminSearchProvider, AdminSearchResultItem, AdminSearchResponse,\n  AdminSearchBadgeTone, PLATFORM_MODULE, MIN_SEARCH_LENGTH,\n} from '../../services/admin-search.service';\nimport { TenantService, RegisteredModuleInfo } from '../../services/tenant.service';\nimport { MODULE_LABEL_FALLBACKS, badgeTone, groupProvidersByModule, moduleTone, searchPageParams, workspaceHref } from '../../components/global-search/admin-search-ui';\n\n/**\n * Full results for a query: every record kind the caller may see, or one kind\n * with its filters when narrowed. State lives in the URL so a result set can be\n * refreshed or shared.\n */\n@Component({\n  selector: 'admin-search-results-page',\n  standalone: true,\n  imports: [CommonModule, FormsModule, IconComponent],\n  template: `\n    <div class=\"space-y-6\">\n      <div class=\"flex flex-wrap items-end justify-between gap-4\">\n        <div>\n          <h1 class=\"text-2xl font-bold text-gray-900\">Search</h1>\n          @if (response(); as result) {\n            <p class=\"mt-1 text-sm text-gray-500\">\n              {{ result.totalCount }} {{ result.totalCount === 1 ? 'match' : 'matches' }} for “{{ result.query }}”\n            </p>\n          }\n        </div>\n        <form class=\"flex items-center gap-2 w-full max-w-lg\" (submit)=\"submit($event)\">\n          <div class=\"relative flex-1\">\n            <ui-icon name=\"search\" class=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none\" />\n            <input type=\"search\" [ngModel]=\"draft\" (ngModelChange)=\"onDraftChange($event)\" name=\"q\" aria-label=\"Search\" [placeholder]=\"placeholder()\"\n              class=\"w-full pl-9 text-sm border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500\" />\n          </div>\n          <button type=\"submit\" class=\"px-3 py-2 text-sm font-medium text-white bg-primary-600 rounded-md hover:bg-primary-700\">Search</button>\n        </form>\n      </div>\n\n      <!-- Record kinds, grouped by module -->\n      <div class=\"rounded-lg border border-gray-200 bg-white p-3 space-y-2\">\n        <div class=\"flex items-center gap-1.5 flex-wrap\">\n          <span class=\"w-24 shrink-0 text-[11px] font-semibold uppercase tracking-wider text-gray-400\">Search in</span>\n          <button type=\"button\" (click)=\"selectProvider(null)\"\n            class=\"px-2.5 py-1 rounded-full text-xs font-medium border transition-colors\"\n            [class]=\"providerId() === null ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'\">\n            Everything\n          </button>\n        </div>\n        @for (moduleGroup of providerGroups(); track moduleGroup.module) {\n          <div class=\"flex items-start gap-1.5 flex-wrap\">\n            <span class=\"w-24 shrink-0 pt-1 text-xs font-medium text-gray-500 truncate\" [title]=\"moduleGroup.label\">{{ moduleGroup.label }}</span>\n            @for (provider of moduleGroup.providers; track provider.providerId) {\n              <button type=\"button\" (click)=\"selectProvider(provider.providerId)\"\n                class=\"inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium border transition-colors\"\n                [class]=\"providerId() === provider.providerId ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'\">\n                <ui-icon [name]=\"provider.icon\" class=\"h-3 w-3\" />\n                {{ provider.displayName }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Filters for the selected kind -->\n      @if (selectedProvider(); as provider) {\n        @if (provider.filters.length > 0) {\n          <div class=\"flex flex-wrap items-end gap-3 p-3 rounded-lg border border-gray-200 bg-gray-50/60\">\n            @for (filter of provider.filters; track filter.key) {\n              <div class=\"flex flex-col gap-0.5 text-[11px] font-medium text-gray-500\">\n                <span>{{ filter.label }}</span>\n                @switch (filter.type) {\n                  @case ('select') {\n                    <select [attr.aria-label]=\"filter.label\" [ngModel]=\"filterValue(filter.key)\" (ngModelChange)=\"setFilter(filter.key, $event)\"\n                      class=\"h-8 text-xs border-gray-300 rounded-md py-0 pl-2 pr-7\">\n                      <option value=\"\">Any</option>\n                      @for (option of filter.options ?? []; track option.value) {\n                        <option [value]=\"option.value\">{{ option.label }}</option>\n                      }\n                    </select>\n                  }\n                  @case ('multiselect') {\n                    <select multiple [attr.aria-label]=\"filter.label\" [ngModel]=\"filterValues(filter.key)\" (ngModelChange)=\"setFilter(filter.key, $event.join(','))\"\n                      class=\"text-xs border-gray-300 rounded-md py-0.5 min-w-[8rem]\" size=\"3\">\n                      @for (option of filter.options ?? []; track option.value) {\n                        <option [value]=\"option.value\">{{ option.label }}</option>\n                      }\n                    </select>\n                  }\n                  @case ('boolean') {\n                    <select [attr.aria-label]=\"filter.label\" [ngModel]=\"filterValue(filter.key)\" (ngModelChange)=\"setFilter(filter.key, $event)\"\n                      class=\"h-8 text-xs border-gray-300 rounded-md py-0 pl-2 pr-7\">\n                      <option value=\"\">Any</option>\n                      <option value=\"true\">Yes</option>\n                      <option value=\"false\">No</option>\n                    </select>\n                  }\n                  @case ('date') {\n                    <input type=\"date\" [attr.aria-label]=\"filter.label\" [ngModel]=\"filterValue(filter.key)\" (ngModelChange)=\"setFilter(filter.key, $event)\"\n                      class=\"h-8 text-xs border-gray-300 rounded-md py-0 px-2\" />\n                  }\n                  @case ('daterange') {\n                    <span class=\"flex items-center gap-1\">\n                      <input type=\"date\" [attr.aria-label]=\"filter.label + ' from'\" [ngModel]=\"rangePart(filter.key, 0)\" (ngModelChange)=\"setRange(filter.key, 0, $event)\"\n                        class=\"h-8 text-xs border-gray-300 rounded-md py-0 px-2\" />\n                      <span class=\"text-gray-400\">to</span>\n                      <input type=\"date\" [attr.aria-label]=\"filter.label + ' to'\" [ngModel]=\"rangePart(filter.key, 1)\" (ngModelChange)=\"setRange(filter.key, 1, $event)\"\n                        class=\"h-8 text-xs border-gray-300 rounded-md py-0 px-2\" />\n                    </span>\n                  }\n                  @case ('number') {\n                    <input type=\"number\" [attr.aria-label]=\"filter.label\" [ngModel]=\"filterValue(filter.key)\" (ngModelChange)=\"setFilter(filter.key, $event)\"\n                      [placeholder]=\"filter.placeholder ?? ''\" class=\"h-8 w-28 text-xs border-gray-300 rounded-md py-0 px-2\" />\n                  }\n                  @case ('numberrange') {\n                    <span class=\"flex items-center gap-1\">\n                      <input type=\"number\" placeholder=\"Min\" [attr.aria-label]=\"filter.label + ' minimum'\" [ngModel]=\"rangePart(filter.key, 0)\" (ngModelChange)=\"setRange(filter.key, 0, $event)\"\n                        class=\"h-8 w-24 text-xs border-gray-300 rounded-md py-0 px-2\" />\n                      <span class=\"text-gray-400\">to</span>\n                      <input type=\"number\" placeholder=\"Max\" [attr.aria-label]=\"filter.label + ' maximum'\" [ngModel]=\"rangePart(filter.key, 1)\" (ngModelChange)=\"setRange(filter.key, 1, $event)\"\n                        class=\"h-8 w-24 text-xs border-gray-300 rounded-md py-0 px-2\" />\n                    </span>\n                  }\n                  @default {\n                    <input type=\"text\" [attr.aria-label]=\"filter.label\" [ngModel]=\"filterValue(filter.key)\" (ngModelChange)=\"setFilter(filter.key, $event)\"\n                      [placeholder]=\"filter.placeholder ?? ''\" class=\"h-8 w-40 text-xs border-gray-300 rounded-md py-0 px-2\" />\n                  }\n                }\n              </div>\n            }\n            @if (hasFilters()) {\n              <button type=\"button\" (click)=\"clearFilters()\" class=\"h-8 text-xs text-gray-500 hover:text-gray-700 hover:underline\">Reset filters</button>\n            }\n          </div>\n        }\n      }\n\n      <!-- Results -->\n      @if (query().length < minLength) {\n        <div class=\"rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-500\">\n          Type at least {{ minLength }} characters to search.\n        </div>\n      } @else if (loading()) {\n        <div class=\"rounded-lg border border-gray-200 p-10 text-center text-sm text-gray-500\">Searching…</div>\n      } @else if (response(); as result) {\n        @if (result.groups.length === 0) {\n          <div class=\"rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-500\">\n            No matches for “{{ result.query }}”.\n          </div>\n        }\n        <div class=\"grid gap-4\" [class.lg:grid-cols-2]=\"providerId() === null && result.groups.length > 1\">\n          @for (group of result.groups; track group.providerId) {\n            <section class=\"rounded-lg border border-gray-200 bg-white overflow-hidden\">\n              <header class=\"flex items-center justify-between px-4 py-2.5 border-b border-gray-100 bg-gray-50/70\">\n                <div class=\"flex items-center gap-2 min-w-0\">\n                  <span class=\"inline-flex h-6 w-6 items-center justify-center rounded\" [class]=\"moduleTone(group.module)\">\n                    <ui-icon [name]=\"group.icon\" class=\"h-3.5 w-3.5\" />\n                  </span>\n                  <h2 class=\"text-sm font-semibold text-gray-900 truncate\">{{ group.displayName }}</h2>\n                  @if (group.module !== platformModule) {\n                    <span class=\"text-xs text-gray-400 truncate\">· {{ moduleLabel(group.module) }}</span>\n                  }\n                  <span class=\"text-xs text-gray-400\">({{ group.totalCount }})</span>\n                </div>\n                <div class=\"flex items-center gap-3 shrink-0 text-xs\">\n                  @if (providerId() === null && group.totalCount > group.items.length) {\n                    <button type=\"button\" (click)=\"selectProvider(group.providerId)\" class=\"text-primary-600 hover:text-primary-700\">Show all here</button>\n                  }\n                  @if (group.seeAllRoute) {\n                    <a [href]=\"group.seeAllRoute\" (click)=\"go($event, group.seeAllRoute)\" class=\"text-gray-500 hover:text-gray-700\">Open list</a>\n                  }\n                </div>\n              </header>\n              <ul class=\"divide-y divide-gray-100\">\n                @for (item of group.items; track item.id) {\n                  <li>\n                    <a [href]=\"hrefFor(item)\" (click)=\"openItem($event, item)\"\n                      class=\"flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors\">\n                      @if (item.imageUrl) {\n                        <img [src]=\"item.imageUrl\" alt=\"\" class=\"h-9 w-9 rounded-full object-cover shrink-0\" />\n                      } @else {\n                        <span class=\"inline-flex h-9 w-9 items-center justify-center rounded-full shrink-0\" [class]=\"moduleTone(group.module)\">\n                          <ui-icon [name]=\"item.icon ?? group.icon\" class=\"h-4 w-4\" />\n                        </span>\n                      }\n                      <span class=\"min-w-0 flex-1\">\n                        <span class=\"block truncate text-sm font-medium text-gray-900\">{{ item.title }}</span>\n                        @if (item.subtitle) {\n                          <span class=\"block truncate text-xs text-gray-500\">{{ item.subtitle }}</span>\n                        }\n                        @if (item.description) {\n                          <span class=\"block truncate text-xs text-gray-400\">{{ item.description }}</span>\n                        }\n                      </span>\n                      @if (item.badges.length > 0) {\n                        <span class=\"flex flex-wrap justify-end gap-1 shrink-0 max-w-[14rem]\">\n                          @for (badge of item.badges; track badge.label + badge.value) {\n                            <span class=\"inline-flex px-1.5 py-0.5 rounded text-[11px] font-medium\" [class]=\"badgeTone(badge.tone)\" [title]=\"badge.label\">{{ badge.value }}</span>\n                          }\n                        </span>\n                      }\n                    </a>\n                  </li>\n                }\n              </ul>\n            </section>\n          }\n        </div>\n      }\n    </div>\n  `,\n})\nexport class SearchResultsPageComponent implements OnInit, OnDestroy {\n  private readonly searchService = inject(AdminSearchService);\n  private readonly tenantService = inject(TenantService);\n  private readonly route = inject(ActivatedRoute);\n  private readonly router = inject(Router);\n  private readonly destroy$ = new Subject<void>();\n\n  readonly minLength = MIN_SEARCH_LENGTH;\n  readonly platformModule = PLATFORM_MODULE;\n\n  draft = '';\n  readonly query = signal('');\n  readonly providerId = signal<string | null>(null);\n  readonly filters = signal<Record<string, string>>({});\n  readonly providers = signal<AdminSearchProvider[]>([]);\n  readonly modules = signal<Record<string, RegisteredModuleInfo>>({});\n  readonly response = signal<AdminSearchResponse | null>(null);\n  readonly loading = signal(false);\n\n  readonly selectedProvider = computed(() => this.providers().find(p => p.providerId === this.providerId()) ?? null);\n  readonly hasFilters = computed(() => Object.values(this.filters()).some(v => v !== ''));\n  readonly providerGroups = computed(() => groupProvidersByModule(this.providers(), m => this.moduleLabel(m)));\n  readonly placeholder = computed(() => {\n    const provider = this.selectedProvider();\n    if (!provider) return 'Search everything you can see';\n    const scope = provider.module === PLATFORM_MODULE ? '' : `${this.moduleLabel(provider.module)} `;\n    return `Search ${scope}${provider.displayName.toLowerCase()}`;\n  });\n\n  ngOnInit(): void {\n    this.searchService.getProviders().pipe(takeUntil(this.destroy$)).subscribe(providers => this.providers.set(providers));\n    this.tenantService.getRegisteredModules().pipe(takeUntil(this.destroy$)).subscribe(response => {\n      const byKey: Record<string, RegisteredModuleInfo> = {};\n      for (const module of response.modules) byKey[module.featureKey] = module;\n      this.modules.set(byKey);\n    });\n\n    this.route.queryParamMap\n      .pipe(\n        switchMap(params => {\n          const query = (params.get('q') ?? '').trim();\n          const providerId = params.get('provider');\n          const filters: Record<string, string> = {};\n          for (const key of params.keys) {\n            if (key.startsWith('f.')) filters[key.slice(2)] = params.get(key) ?? '';\n          }\n          this.query.set(query);\n          this.draft = query;\n          this.providerId.set(providerId);\n          this.filters.set(filters);\n          if (query.length < MIN_SEARCH_LENGTH) {\n            this.response.set(null);\n            this.loading.set(false);\n            return of(null);\n          }\n          this.loading.set(true);\n          return this.searchService.search(query, { providerId: providerId ?? undefined, filters, limit: providerId ? 50 : 10 })\n            .pipe(catchError(() => of({ query, totalCount: 0, groups: [] } as AdminSearchResponse)));\n        }),\n        takeUntil(this.destroy$),\n      )\n      .subscribe(response => {\n        this.response.set(response);\n        this.loading.set(false);\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.apply(this.draft.trim(), this.providerId(), this.filters());\n  }\n\n  /** Emptying the box, by typing or the field's clear button, drops the results straight away. */\n  onDraftChange(value: string): void {\n    this.draft = value;\n    if (value.trim() === '' && this.query() !== '') {\n      this.apply('', this.providerId(), this.filters());\n    }\n  }\n\n  selectProvider(providerId: string | null): void {\n    this.apply(this.query(), providerId, {});\n  }\n\n  filterValue(key: string): string {\n    return this.filters()[key] ?? '';\n  }\n\n  filterValues(key: string): string[] {\n    const value = this.filterValue(key);\n    return value ? value.split(',') : [];\n  }\n\n  setFilter(key: string, value: string | null): void {\n    this.apply(this.query(), this.providerId(), { ...this.filters(), [key]: value ?? '' });\n  }\n\n  rangePart(key: string, index: 0 | 1): string {\n    return this.filterValue(key).split('..')[index] ?? '';\n  }\n\n  setRange(key: string, index: 0 | 1, value: string | number | null): void {\n    const parts = this.filterValue(key).split('..');\n    parts[index] = value == null ? '' : String(value);\n    const joined = `${parts[0] ?? ''}..${parts[1] ?? ''}`;\n    this.setFilter(key, joined === '..' ? '' : joined);\n  }\n\n  clearFilters(): void {\n    this.apply(this.query(), this.providerId(), {});\n  }\n\n  moduleLabel(module: string): string {\n    return this.modules()[module]?.displayName ?? MODULE_LABEL_FALLBACKS[module] ?? module;\n  }\n\n  moduleTone(module: string): string {\n    return moduleTone(this.modules()[module]?.color);\n  }\n\n  badgeTone(tone: AdminSearchBadgeTone): string {\n    return badgeTone(tone);\n  }\n\n  hrefFor(item: AdminSearchResultItem): string {\n    return item.route || workspaceHref(item.workspaceRoute) || '#';\n  }\n\n  openItem(event: MouseEvent, item: AdminSearchResultItem): void {\n    if (item.route) {\n      event.preventDefault();\n      this.router.navigateByUrl(item.route);\n      return;\n    }\n    if (!workspaceHref(item.workspaceRoute)) event.preventDefault();\n  }\n\n  go(event: MouseEvent, route: string): void {\n    event.preventDefault();\n    this.router.navigateByUrl(route);\n  }\n\n  private apply(query: string, providerId: string | null, filters: Record<string, string>): void {\n    this.router.navigate([], { relativeTo: this.route, queryParams: searchPageParams(query, providerId, filters) });\n  }\n}\n"],"names":[],"mappings":"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"}