@elasticias/ui 1.0.40 → 1.0.41

package/fesm2022/elasticias-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Pipe, input, Component, output, booleanAttribute, Input, Directive, signal, computed, inject, EventEmitter, Injector, forwardRef, Output, ContentChild, HostBinding, ChangeDetectionStrategy, ElementRef, LOCALE_ID, ViewContainerRef, DestroyRef, ChangeDetectorRef, effect, HostListener, ViewChild, model, InjectionToken, TemplateRef, ContentChildren, viewChild, contentChild, ViewEncapsulation, afterNextRender, ViewChildren, untracked, PLATFORM_ID } from '@angular/core';
-import { NumberUtils, UuidUtils, StorageUtils } from '@elasticias/utils';
+import { NumberUtils, UuidUtils } from '@elasticias/utils';
 import * as i1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$3 from '@angular/common';
@@ -22,7 +22,7 @@ import * as i1$6 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import { SCREEN_REF_DATA_SERVICE, ScreenStateEnum } from '@elasticias/screens';
 import { Permissions } from '@elasticias/types';
-import { EfShortcutService, EfViewportService, formatShortcut, EfThemeConfigService, EF_BUILD_INFO, EfPermissionService, EfActiveModuleService, EF_SESSION, EfToastService } from '@elasticias/core';
+import { EfShortcutService, EfViewportService, EF_PREFERENCE_STORE, formatShortcut, efTablePrefsKey, EfThemeConfigService, EF_BUILD_INFO, EfPermissionService, EfActiveModuleService, EF_SESSION, EF_SIDE_COLLAPSED_KEY, EfToastService } from '@elasticias/core';
 import * as i1$7 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import * as i2$2 from 'primeng/accordion';
@@ -4571,6 +4571,7 @@ class EfDataCardComponent {
          become a list instead, driven by the same column config —
          each column declares (or is given) a role. */
     viewport = inject(EfViewportService);
+    prefs = inject(EF_PREFERENCE_STORE);
     configuredMobileLayout = inject(EF_DATA_CARD_MOBILE_LAYOUT, { optional: true });
     isMobile = this.viewport.isMobile;
     /** Per-screen override of the app-wide default. */
@@ -5191,14 +5192,17 @@ class EfDataCardComponent {
     }
     storageKey() {
         const key = this.tableKey();
-        return key ? `TABLE_PREFS_${key}` : null;
+        return key ? efTablePrefsKey(key) : null;
     }
     loadPreferences() {
         const key = this.storageKey();
         if (!key)
             return;
         try {
-            const saved = StorageUtils.getLocal(key);
+            const raw = this.prefs.get(key);
+            if (!raw)
+                return;
+            const saved = JSON.parse(raw);
             if (!saved)
                 return;
             if (saved.density)
@@ -5216,10 +5220,10 @@ class EfDataCardComponent {
         if (!key)
             return;
         try {
-            StorageUtils.setLocal(key, {
+            this.prefs.set(key, JSON.stringify({
                 density: this.density(),
                 hiddenColumnIds: this.hiddenColumnIds(),
-            });
+            }));
         }
         catch {
             // Preferences are a convenience; losing them must never break
@@ -7472,15 +7476,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
-const SIDE_COLLAPSED_KEY = 'ef.shell.side-collapsed';
-function readSideCollapsed() {
-    try {
-        return localStorage.getItem(SIDE_COLLAPSED_KEY) === '1';
-    }
-    catch {
-        return false;
-    }
-}
 /**
  * Top-level Comptoir shell.
  *
@@ -7528,20 +7523,22 @@ class EfAppShellComponent {
          inside the side, so it is still there to bring the side back
          once it is gone, and in the same spot. Remembered per browser:
          it is a reading preference, not something worth a round trip. */
-    sideCollapsed = signal(readSideCollapsed(), ...(ngDevMode ? [{ debugName: "sideCollapsed" }] : /* istanbul ignore next */ []));
+    prefs = inject(EF_PREFERENCE_STORE);
+    sideCollapsed = signal(this.prefs.get(EF_SIDE_COLLAPSED_KEY) === '1', ...(ngDevMode ? [{ debugName: "sideCollapsed" }] : /* istanbul ignore next */ []));
     /** Shown in the toggle's tooltip: the button is far from the content, the shortcut is not. */
     shortcutHint = formatShortcut('mod+b');
     toggleSide() {
         const collapsed = !this.sideCollapsed();
         this.sideCollapsed.set(collapsed);
-        try {
-            localStorage.setItem(SIDE_COLLAPSED_KEY, collapsed ? '1' : '0');
-        }
-        catch {
-            /* private window or blocked storage: the toggle still works for this visit */
-        }
+        this.prefs.set(EF_SIDE_COLLAPSED_KEY, collapsed ? '1' : '0');
     }
     constructor() {
+        // A store that hydrates after sign in announces the key it filled.
+        this.prefs.changes?.pipe(takeUntilDestroyed()).subscribe((key) => {
+            if (key === EF_SIDE_COLLAPSED_KEY) {
+                this.sideCollapsed.set(this.prefs.get(EF_SIDE_COLLAPSED_KEY) === '1');
+            }
+        });
         inject(EfShortcutService).register({
             id: 'shell.toggle-side',
             keys: 'mod+b',
@@ -10888,14 +10885,22 @@ class EfSmartBarComponent {
                          only text inside this label is the shortcut hint, so
                          without it a screen reader announced the primary
                          search field of every list screen as "Cmd K". -->
+                    <!-- type="search" fires a native, bubbling 'search' Event
+                         on Enter and on the browser's clear button (Chromium,
+                         WebKit). A host (search) binding hears that DOM event
+                         as well as the output below, so it would receive the
+                         Event as the search text. Stopped here; the output is
+                         the only 'search' that leaves this component. -->
                     <input
                         #searchInput
                         type="search"
+                        enterkeyhint="search"
                         [attr.aria-label]="accessibleLabel()"
                         [placeholder]="(placeholderKey() ? (placeholderKey() | translate) : placeholder())"
                         [ngModel]="searchText()"
                         (ngModelChange)="searchText.set($event)"
                         (keydown.enter)="onSubmit()"
+                        (search)="$event.stopPropagation()"
                     />
                     @if (showKbdHint() && kbdLabel()) {
                         <!-- Decorative, and hidden from the accessibility tree:
@@ -10935,15 +10940,11 @@ class EfSmartBarComponent {
 
             <ng-content select="[drawer]"></ng-content>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: ["input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSmartBarComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ef-smart-bar',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, TranslateModule],
-                    template: `
+            args: [{ selector: 'ef-smart-bar', standalone: true, imports: [CommonModule, FormsModule, TranslateModule], template: `
         <div class="screen-search">
             <div class="smart-bar">
                 <label class="search">
@@ -10951,14 +10952,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                          only text inside this label is the shortcut hint, so
                          without it a screen reader announced the primary
                          search field of every list screen as "Cmd K". -->
+                    <!-- type="search" fires a native, bubbling 'search' Event
+                         on Enter and on the browser's clear button (Chromium,
+                         WebKit). A host (search) binding hears that DOM event
+                         as well as the output below, so it would receive the
+                         Event as the search text. Stopped here; the output is
+                         the only 'search' that leaves this component. -->
                     <input
                         #searchInput
                         type="search"
+                        enterkeyhint="search"
                         [attr.aria-label]="accessibleLabel()"
                         [placeholder]="(placeholderKey() ? (placeholderKey() | translate) : placeholder())"
                         [ngModel]="searchText()"
                         (ngModelChange)="searchText.set($event)"
                         (keydown.enter)="onSubmit()"
+                        (search)="$event.stopPropagation()"
                     />
                     @if (showKbdHint() && kbdLabel()) {
                         <!-- Decorative, and hidden from the accessibility tree:
@@ -10998,9 +11007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
             <ng-content select="[drawer]"></ng-content>
         </div>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabelKey", required: false }] }], clearTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTitleKey", required: false }] }], searchLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabelKey", required: false }] }], showKbdHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showKbdHint", required: false }] }], hideClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClear", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
 /**