@sinequa/atomic-angular 0.1.38 → 0.1.43

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, Injectable, inject, HostBinding, InjectionToken, computed, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Inject, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, DestroyRef, Directive, Renderer2, HostListener, contentChildren, contentChild, TemplateRef, Pipe, ChangeDetectorRef, LOCALE_ID, Optional, forwardRef, afterEveryRender, Output, viewChildren, ViewContainerRef } from '@angular/core';
-import { DropdownComponent, DropdownContentComponent, ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, InputComponent, cn, SwitchComponent, DialogService, TabsComponent, TabComponent, searchVariants, SearchIconComponent, XMarkIConComponent, PopoverContentComponent, HorizontalDividerComponent, PopoverComponent, ChevronRightIconComponent, LoadingCircleIconComponent, CircleCheckIconComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, VerticalDividerComponent } from '@sinequa/ui';
+import { input, output, Component, Injectable, inject, HostBinding, InjectionToken, computed, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Inject, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, DestroyRef, Directive, Renderer2, HostListener, contentChildren, contentChild, TemplateRef, Pipe, ChangeDetectorRef, LOCALE_ID, Optional, afterEveryRender, Output, viewChildren, ViewContainerRef } from '@angular/core';
+import { DropdownComponent, DropdownContentComponent, ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, InputComponent, cn, SwitchComponent, DialogService, TabsComponent, TabComponent, searchVariants, SearchIcon, XMarkIConComponent, PopoverContentComponent, HorizontalDividerComponent, PopoverComponent, ChevronRightIconComponent, LoadingCircleIconComponent, CircleCheckIconComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, VerticalDividerComponent } from '@sinequa/ui';
 import { BehaviorSubject, Subscription, catchError, EMPTY, firstValueFrom, map, Subject, of, tap, throwError, from, forkJoin, filter, shareReplay, fromEvent, switchMap, debounceTime } from 'rxjs';
 import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import { signalStore, signalStoreFeature, withState, withMethods, patchState, getState, withComputed } from '@ngrx/signals';
@@ -12,7 +12,7 @@ import { Location, DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIO
 import { TranslocoPipe, provideTranslocoScope, TranslocoService } from '@jsverse/transloco';
 import { cva } from 'class-variance-authority';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormGroup, FormControl, NonNullableFormBuilder } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, NonNullableFormBuilder } from '@angular/forms';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import highlightWords from 'highlight-words';
 import { catchError as catchError$1 } from 'rxjs/operators';
@@ -2173,19 +2173,7 @@ class ApplicationService {
         const firstQuery = queriesMap[0];
         // We need to create a route path object for each tab in the first query
         // if the query has no tabs, we create a route with the query name as the tab name
-        const firstQueryConfig = {
-            name: firstQuery.name,
-            tabs: (firstQuery.tabSearch.tabs && firstQuery.tabSearch.tabs.length
-                ? firstQuery.tabSearch.tabs
-                : [{
-                        name: firstQuery.name,
-                        display: firstQuery.name,
-                        value: firstQuery.name,
-                        isDefault: false,
-                        excludedIndices: [],
-                        icon: ''
-                    }])
-        };
+        const firstQueryConfig = { name: firstQuery.name, tabs: firstQuery.tabSearch.tabs || [{ name: firstQuery.name }] };
         // We need to remove the current search route from the router config
         // the route exists in the router config because it was created in the app-routing.module.ts and we need it
         // to be able to navigate to the search page. We will recreate it with the new tabs
@@ -2420,7 +2408,7 @@ class AuditService {
                 // Second event triggered when we come back
                 document.addEventListener('visibilitychange', () => {
                     if (document.visibilityState === 'visible') {
-                        this.notify({ type: 'Navigation_Return' });
+                        this.notify({ type: "Navigation_Return" /* AuditEventType.Navigation_Return */ });
                     }
                 }, { once: true });
             }
@@ -2771,7 +2759,7 @@ class PreviewService {
     close(id, query) {
         const detail = this.getAuditPreviewDetail(id, query);
         const auditEvent = {
-            type: "Preview_Close",
+            type: "Preview_Close" /* AuditEventType.Preview_Close */,
             detail
         };
         Audit.notify(auditEvent);
@@ -4637,7 +4625,7 @@ class ExportService {
             exportedColumns: exportedColumns,
             selection: (selection ?? []).length > 0 ? selection : undefined,
             $auditRecord: {
-                type: "Search_ExportCSV",
+                type: "Search_ExportCSV" /* AuditEventType.Search_ExportCSV */,
                 detail: {
                     resultid: results ? results.id : undefined
                 }
@@ -5465,6 +5453,7 @@ class OverflowManagerDirective {
     direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
     count = output();
     el = inject(ElementRef).nativeElement;
+    destroyRef = inject(DestroyRef);
     resizeObserver = new ResizeObserver(() => this.countItems());
     countSub;
     _lastCount;
@@ -5479,10 +5468,11 @@ class OverflowManagerDirective {
         });
         // listens to the count output and toggles the visibility of the items
         this.countSub = this.count.subscribe(count => this.toggleToCount(count));
-    }
-    ngOnDestroy() {
-        this.countSub?.unsubscribe();
-        this.countSub = undefined;
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver.disconnect();
+            this.countSub?.unsubscribe();
+            this.countSub = undefined;
+        });
     }
     /**
      * Counts the number of items that can fit before the stop element.
@@ -5895,15 +5885,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
         }] });
 
 class OperatorPipe {
+    transloco = inject(TranslocoService);
+    lastTransformedValue = null;
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
     transform(filter) {
+        this.transloco.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(locale => {
+            const transformedValue = this.transformFilter(filter, locale);
+            if (transformedValue !== this.lastTransformedValue) {
+                this.lastTransformedValue = transformedValue;
+                this.cdr.markForCheck();
+            }
+        });
+        return this.lastTransformedValue || this.transformFilter(filter);
+    }
+    transformFilter(filter, locale) {
         let op = this.transformOperator(filter?.operator);
         if (filter?.operator === 'between') {
-            return `> ${filter.start} ≤ ${filter.end}`;
+            const { start, end } = filter;
+            if (!start || !end) {
+                return 'bad date range';
+            }
+            return `> ${new Intl.DateTimeFormat(locale).format(new Date(start))} ≤ ${new Intl.DateTimeFormat(locale).format(new Date(end))}`;
         }
         if (filter?.operator === 'and') {
-            return filter.display ?? filter.value ?? '';
+            const value = filter?.display ?? filter?.value ?? '';
+            const date = new Date(value);
+            if (isNaN(date.getTime())) {
+                return value;
+            }
+            else {
+                return new Intl.DateTimeFormat(locale).format(date);
+            }
+        }
+        const date = new Date(filter?.value || '');
+        if (isNaN(date.getTime())) {
+            return `${op} ${filter?.value || ''}`;
+        }
+        else {
+            return `${op} ${new Intl.DateTimeFormat(locale).format(date)}`;
         }
-        return `${op} ${filter?.value || ''}`;
     }
     transformOperator(operator) {
         switch (operator) {
@@ -5924,14 +5945,14 @@ class OperatorPipe {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OperatorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: OperatorPipe, isStandalone: true, name: "operator" });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: OperatorPipe, isStandalone: true, name: "operator", pure: false });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OperatorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'operator',
                     standalone: true,
-                    pure: true
+                    pure: false
                 }]
         }] });
 
@@ -6328,10 +6349,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
 class SearchInputComponent {
     cn = cn;
-    searchElement = viewChild('search', ...(ngDevMode ? [{ debugName: "searchElement" }] : []));
-    onFocus = output();
-    onBlur = output();
+    searchInput = viewChild.required('search');
+    /**
+     * Emits an event when an element is selected or deselected.
+     *
+     * @remarks
+     * The event payload is either the selected HTMLElement or `null` if the selection is cleared.
+     *
+     * @eventProperty
+     */
     onSelected = output();
+    /**
+     * A required form control for handling string input in the search component.
+     *
+     * This control is initialized using the `input.required` method, ensuring that
+     * the associated input field is mandatory and will enforce validation for non-empty values.
+     *
+     * @remarks
+     * This is typically used to bind to an Angular form input element, providing
+     * reactive form validation and value tracking.
+     *
+     * @type FormControl<string>
+     */
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
     controls = input.required(...(ngDevMode ? [{ debugName: "controls" }] : []));
     keyboardNavigatorOptions = input({
         name: 'searchInputKeyboardNavigator',
@@ -6352,37 +6392,20 @@ class SearchInputComponent {
     variants = computed(() => {
         return searchVariants({ variant: this.variant(), class: this.class() });
     }, ...(ngDevMode ? [{ debugName: "variants" }] : []));
-    clearSearch(e) {
-        const searchEl = this.searchElement()?.nativeElement;
-        if (searchEl) {
-            searchEl.value = '';
-            searchEl.focus();
-        }
-        this.onChange('');
-    }
-    /* ControlValueAccessor */
-    onChange = () => { };
-    onTouched = () => { };
-    writeValue(value) {
-        const searchEl = this.searchElement()?.nativeElement;
-        if (searchEl) {
-            searchEl.value = value;
-        }
+    onInput(event) {
+        const inputElement = event.target;
+        this.control().setValue(inputElement.value);
+        this.control().markAsDirty();
+        this.control().markAsTouched();
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    clearSearch(e) {
+        e.stopImmediatePropagation();
+        this.control().reset();
+        this.control().updateValueAndValidity();
+        this.searchInput()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: SearchInputComponent, isStandalone: true, selector: "SearchInput", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, keyboardNavigatorOptions: { classPropertyName: "keyboardNavigatorOptions", publicName: "keyboardNavigatorOptions", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onSelected: "onSelected" }, host: { properties: { "class": "cn(variants(), disabled() && 'pointer-events-none opacity-50')" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SearchInputComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: SearchInputComponent, isStandalone: true, selector: "SearchInput", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, keyboardNavigatorOptions: { classPropertyName: "keyboardNavigatorOptions", publicName: "keyboardNavigatorOptions", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected" }, host: { properties: { "class": "cn(variants(), disabled() && 'pointer-events-none opacity-50')" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <SearchIcon class="text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within:rotate-90" />
     <input
       #search
@@ -6396,25 +6419,26 @@ class SearchInputComponent {
       aria-controls="{{ controls() }}"
       [keyboardNavigator]="keyboardNavigatorOptions()"
       [placeholder]="placeholder()"
+      [value]="control().value || ''"
       [attr.aria-keyshortcuts]="hotkey()"
-      (onFocus)="onFocus.emit()"
-      (onBlur)="onBlur.emit()"
       (onSelected)="onSelected.emit($event)"
-      (input)="onChange(search.value)" />
+      (input)="onInput($event)" />
 
     <button
       variant="icon"
+      [tabindex]="control().value ? 0 : -1"
       class="text-foreground peer-not-placeholder-shown:rotate-90 peer-not-placeholder-shown:cursor-pointer peer-not-placeholder-shown:opacity-100 mr-1 rotate-0 transform opacity-0 transition-[rotate,opacity] duration-500 peer-placeholder-shown:pointer-events-none"
+      (keydown.enter)="clearSearch($event)"
       (click)="clearSearch($event)">
-      <XMark class="size-4" />
+      <XMark class="size-4" aria-hidden="true" />
     </button>
 
     <ng-content />
-  `, isInline: true, styles: [":host input[type=search]::-ms-clear,:host input[type=search]::-ms-reveal{appearance:none;width:0;height:0}:host input[type=search]::-webkit-search-decoration,:host input[type=search]::-webkit-search-cancel-button,:host input[type=search]::-webkit-search-results-button,:host input[type=search]::-webkit-search-results-decoration{appearance:none}\n"], dependencies: [{ kind: "component", type: SearchIconComponent, selector: "SearchIcon", inputs: ["class", "width", "height"] }, { kind: "component", type: XMarkIConComponent, selector: "XMark, xmark, x-mark", inputs: ["class", "width", "height"] }, { kind: "directive", type: KeyboardNavigatorDirective, selector: "input[role=\"combobox\"]", inputs: ["keyboardNavigator", "aria-controls"], outputs: ["onFocus", "onBlur", "onSelected"] }] });
+  `, isInline: true, styles: [":host input[type=search]::-ms-clear,:host input[type=search]::-ms-reveal{appearance:none;width:0;height:0}:host input[type=search]::-webkit-search-decoration,:host input[type=search]::-webkit-search-cancel-button,:host input[type=search]::-webkit-search-results-button,:host input[type=search]::-webkit-search-results-decoration{appearance:none}\n"], dependencies: [{ kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class", "width", "height"] }, { kind: "component", type: XMarkIConComponent, selector: "XMark, xmark, x-mark", inputs: ["class", "width", "height"] }, { kind: "directive", type: KeyboardNavigatorDirective, selector: "input[role=\"combobox\"]", inputs: ["keyboardNavigator", "aria-controls"], outputs: ["onFocus", "onBlur", "onSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'SearchInput', standalone: true, imports: [SearchIconComponent, XMarkIConComponent, KeyboardNavigatorDirective], template: `
+            args: [{ selector: 'SearchInput', standalone: true, imports: [SearchIcon, XMarkIConComponent, KeyboardNavigatorDirective], template: `
     <SearchIcon class="text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within:rotate-90" />
     <input
       #search
@@ -6428,29 +6452,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       aria-controls="{{ controls() }}"
       [keyboardNavigator]="keyboardNavigatorOptions()"
       [placeholder]="placeholder()"
+      [value]="control().value || ''"
       [attr.aria-keyshortcuts]="hotkey()"
-      (onFocus)="onFocus.emit()"
-      (onBlur)="onBlur.emit()"
       (onSelected)="onSelected.emit($event)"
-      (input)="onChange(search.value)" />
+      (input)="onInput($event)" />
 
     <button
       variant="icon"
+      [tabindex]="control().value ? 0 : -1"
       class="text-foreground peer-not-placeholder-shown:rotate-90 peer-not-placeholder-shown:cursor-pointer peer-not-placeholder-shown:opacity-100 mr-1 rotate-0 transform opacity-0 transition-[rotate,opacity] duration-500 peer-placeholder-shown:pointer-events-none"
+      (keydown.enter)="clearSearch($event)"
       (click)="clearSearch($event)">
-      <XMark class="size-4" />
+      <XMark class="size-4" aria-hidden="true" />
     </button>
 
     <ng-content />
   `, host: {
                         '[class]': "cn(variants(), disabled() && 'pointer-events-none opacity-50')"
-                    }, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SearchInputComponent),
-                            multi: true
-                        }
-                    ], styles: [":host input[type=search]::-ms-clear,:host input[type=search]::-ms-reveal{appearance:none;width:0;height:0}:host input[type=search]::-webkit-search-decoration,:host input[type=search]::-webkit-search-cancel-button,:host input[type=search]::-webkit-search-results-button,:host input[type=search]::-webkit-search-results-decoration{appearance:none}\n"] }]
+                    }, styles: [":host input[type=search]::-ms-clear,:host input[type=search]::-ms-reveal{appearance:none;width:0;height:0}:host input[type=search]::-webkit-search-decoration,:host input[type=search]::-webkit-search-cancel-button,:host input[type=search]::-webkit-search-results-button,:host input[type=search]::-webkit-search-results-decoration{appearance:none}\n"] }]
         }] });
 
 class SortSelectorComponent {
@@ -9443,7 +9462,7 @@ class DateComponent extends AggregationComponent {
             this.updateForm(this.queryParamsStore.getFilter({ field: this.aggregation()?.column, name: this.aggregation()?.name }));
         });
         this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(changes => {
-            this.validSelection.set(!!changes.option && (changes.option !== 'custom-range' || (changes.customRange?.from !== null && changes.customRange?.to !== null)));
+            this.validSelection.set(!!changes.option && (changes.option !== 'custom-range' || changes.customRange?.from !== null || changes.customRange?.to !== null));
         });
     }
     aggregation = computed(() => {