@truenas/ui-components 0.8.15 → 0.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.8.15",
+  "version": "0.8.17",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"

package/types/truenas-ui-components.d.ts

@@ -15,7 +15,7 @@
  * which is the whole promise being made here — that a mock goes in.
  */
 import * as i0 from "@angular/core";
-import { AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, ComponentRef, DoCheck, ElementRef, InjectionToken, OnChanges, OnDestroy, OnInit, PipeTransform, Provider, Renderer2, Signal, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef } from "@angular/core";
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ComponentRef, DoCheck, ElementRef, InjectionToken, OnChanges, OnDestroy, OnInit, PipeTransform, Provider, Renderer2, Signal, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef } from "@angular/core";
 import { AbstractControl, ControlValueAccessor, NgControl, ValidationErrors } from "@angular/forms";
 import { BehaviorSubject, Observable } from "rxjs";
 import { BaseHarnessFilters, ComponentHarness, HarnessLoader, HarnessPredicate, ModifierKeys as ModifierKeys$1, TestKey } from "@angular/cdk/testing";
@@ -18362,6 +18362,11 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
    * path to the popup.
    */
   openOnClick: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Left at its English default, the input shows
+   * `TN_FILE_PICKER_LABELS.placeholder` instead, so an app-root labels
+   * provider translates it; any other value is shown as given.
+   */
   placeholder: import("@angular/core").InputSignal<string>;
   disabled: import("@angular/core").InputSignal<boolean>;
   /**
@@ -18446,6 +18451,8 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
    * on disk after it was listed.
    */
   private listedItems;
+  protected readonly labels: import("@angular/core").Signal<import("@truenas/ui-components").TnFilePickerLabels>;
+  protected readonly resolvedPlaceholder: import("@angular/core").Signal<string>;
   isDisabled: import("@angular/core").Signal<boolean>;
   private effectiveCallbacks;
   private effectiveStartPath;
@@ -18696,6 +18703,70 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
     "error": "error";
   }, never, never, true, never>;
 }
+/**
+ * Every string `tn-file-picker` and its popup render or announce. Consumers
+ * translate them once at the app root by providing `TN_FILE_PICKER_LABELS` —
+ * typically wired to an i18n service — instead of per call site. A
+ * `placeholder` input bound to anything but its English default wins over
+ * `placeholder` here.
+ *
+ * Strings that carry a value (a count, a path, a name) are functions, so the
+ * consumer decides how to place it: a word order, an ICU plural, a translated
+ * template — the library imposes no placeholder syntax.
+ */
+export interface TnFilePickerLabels {
+  /** Empty path input. */
+  placeholder: string;
+  /** Accessible name of the folder button that opens the popup. */
+  openPicker: string;
+  /** Accessible name of the breadcrumb `nav`. */
+  breadcrumb: string;
+  /** Accessible name of a collapsed (`…`) or nameless breadcrumb segment. */
+  navigateTo: (path: string) => string;
+  loading: string;
+  /** The listing's empty state. */
+  noItems: string;
+  /** Visually hidden header of the multi-select checkbox column. */
+  selectColumn: string;
+  /** Accessible name of an item's multi-select checkbox. */
+  selectItem: (name: string) => string;
+  /** Accessible name and tooltip of a directory's open (chevron) button. */
+  openItem: (name: string) => string;
+  nameColumn: string;
+  sizeColumn: string;
+  modifiedColumn: string;
+  /** Footer, while items are picked. */
+  itemsSelected: (count: number) => string;
+  /** Footer, when the browsed directory itself would be picked. */
+  currentDirectorySelected: string;
+  /** Footer, when nothing is picked and the directory cannot be. */
+  noItemsSelected: string;
+  clearSelection: string;
+  /** The footer button that applies the selection. */
+  select: string;
+  /** Accessible name of the inline creation row's input, from the action's label. */
+  inlineCreateName: (actionLabel: string) => string;
+  /** Inline creation row, when the `create` callback rejects with something other than an Error. */
+  inlineCreateFailed: string;
+  /** Modified column, for an item changed today / yesterday; `time` is already formatted. */
+  today: (time: string) => string;
+  yesterday: (time: string) => string;
+  /** Error messages — shown in the popup and carried by the `error` output. */
+  pathOutsideRoot: (rootPath: string) => string;
+  invalidPath: (path: string) => string;
+  pathValidationFailed: string;
+  loadFailed: string;
+  createFailed: string;
+  createdOutsideRoot: (rootPath: string) => string;
+}
+/** English defaults used when no `TN_FILE_PICKER_LABELS` provider is registered. */
+export declare const TN_FILE_PICKER_DEFAULT_LABELS: TnFilePickerLabels;
+/**
+ * DI token for app-wide file picker labels. Provide either a static object or a
+ * `Signal<TnFilePickerLabels>` — the latter lets an open picker follow a
+ * language change.
+ */
+export declare const TN_FILE_PICKER_LABELS: InjectionToken<TnFilePickerLabels | Signal<TnFilePickerLabels>>;
 /**
  * Harness for interacting with tn-file-picker in tests.
  *
@@ -18988,7 +19059,7 @@ interface DisplayedFileItem extends FileSystemItem {
   /** Marks the synthetic first row hosting the inline creation input. */
   inlineCreate?: boolean;
 }
-export declare class TnFilePickerPopupComponent implements AfterViewChecked {
+export declare class TnFilePickerPopupComponent {
   /**
    * What can be selected: a single mode, or an explicit list of selectable
    * item types, e.g. ['folder', 'dataset'].
@@ -19022,26 +19093,19 @@ export declare class TnFilePickerPopupComponent implements AfterViewChecked {
    * one popup can be open at a time.
    */
   testIdBase: import("@angular/core").InputSignal<TnTestIdValue>;
+  protected readonly labels: import("@angular/core").Signal<import("@truenas/ui-components").TnFilePickerLabels>;
   private iconRegistry;
   private elementRef;
   constructor();
   /**
-   * Requests a focus of the inline creation input on the next view check.
+   * Requests a focus of the inline creation input after the next render.
    * Set when the row opens and when a failed attempt re-enables the input —
    * the two moments the input either just entered the DOM or just lost focus
-   * to the `disabled` attribute. Cleared once the focus is scheduled, so
-   * focus is NOT permanently forced back: after an error the user can still
-   * click elsewhere without being trapped in the input.
-   */
-  private pendingCreationFocus;
-  /**
-   * Focus runs here rather than at the call sites because the input may not
-   * be in the DOM (or may still be disabled) until a later view check, and a
-   * re-render can replace the element after focus() was scheduled — render
-   * scheduling differs between hosts. So the request keeps retrying on each
-   * check and is cleared only once the input actually holds focus.
+   * to the `disabled` attribute. Cleared once focus is applied, so focus is
+   * NOT permanently forced back: after an error the user can still click
+   * elsewhere without being trapped in the input.
    */
-  ngAfterViewChecked(): void;
+  private readonly creationFocusRequested;
   itemClick: import("@angular/core").OutputEmitterRef<FileSystemItem>;
   itemDoubleClick: import("@angular/core").OutputEmitterRef<FileSystemItem>;
   pathNavigate: import("@angular/core").OutputEmitterRef<string>;
@@ -19054,6 +19118,12 @@ export declare class TnFilePickerPopupComponent implements AfterViewChecked {
   submit: import("@angular/core").OutputEmitterRef<void>;
   cancel: import("@angular/core").OutputEmitterRef<void>;
   displayedColumns: string[];
+  /**
+   * The empty directory is the table's own empty state, worded for a listing —
+   * a second empty-state block here would render under it, so the popup only
+   * words and decorates the table's.
+   */
+  protected readonly emptyIcon: string;
   /**
    * Whether an empty selection stands for the directory being browsed: true
    * whenever the selectable types include a directory-like type. The footer