@elasticias/ui 1.0.11 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/styles/_patterns.scss

@@ -888,7 +888,8 @@
    than inventing a third kind of icon button. */
 
 .ef-theme-toggle,
-.ef-app-top__logout {
+.ef-app-top__logout,
+.ef-app-top__action {
   appearance: none;
   background: var(--paper-alt);
   border: 1px solid var(--rule);
@@ -906,13 +907,15 @@
 }
 
 .ef-theme-toggle:hover,
-.ef-app-top__logout:hover {
+.ef-app-top__logout:hover,
+.ef-app-top__action:hover {
   color: var(--text);
   border-color: var(--ink-400);
 }
 
 .ef-theme-toggle:focus-visible,
-.ef-app-top__logout:focus-visible {
+.ef-app-top__logout:focus-visible,
+.ef-app-top__action:focus-visible {
   outline: 0;
   border-color: var(--tenant-400);
   box-shadow: 0 0 0 4px var(--tenant-100);
@@ -920,7 +923,8 @@
 }
 
 .ef-theme-toggle i,
-.ef-app-top__logout i {
+.ef-app-top__logout i,
+.ef-app-top__action i {
   font-size: 14px;
   line-height: 1;
 }
@@ -1586,7 +1590,8 @@
   }
 }
 
-.row-actions__item {
+.row-actions__item,
+.ef-menu__item {
   appearance: none;
   background: transparent;
   border: 0;
@@ -1606,19 +1611,24 @@
 }
 
 .row-actions__item:hover,
-.row-actions__item:focus-visible {
+.row-actions__item:focus-visible,
+.ef-menu__item:hover,
+.ef-menu__item:focus-visible {
   background: var(--paper);
   outline: 0;
 }
 
-.row-actions__item[disabled] {
+.row-actions__item[disabled],
+.ef-menu__item[disabled] {
   opacity: 0.45;
   cursor: not-allowed;
   background: transparent;
 }
 
 .row-actions__item .ico,
-.row-actions__item i {
+.row-actions__item i,
+.ef-menu__item .ico,
+.ef-menu__item i {
   width: 16px;
   height: 16px;
   font-size: 16px;
@@ -1633,11 +1643,16 @@
 .row-actions__item:hover .ico,
 .row-actions__item:hover i,
 .row-actions__item:focus-visible .ico,
-.row-actions__item:focus-visible i {
+.row-actions__item:focus-visible i,
+.ef-menu__item:hover .ico,
+.ef-menu__item:hover i,
+.ef-menu__item:focus-visible .ico,
+.ef-menu__item:focus-visible i {
   color: var(--text);
 }
 
-.row-actions__item .kbd {
+.row-actions__item .kbd,
+.ef-menu__item .kbd {
   margin-inline-start: auto;
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
@@ -1650,26 +1665,142 @@
   line-height: 1;
 }
 
-.row-actions__item.danger {
+.row-actions__item.danger,
+.ef-menu__item.danger {
   color: var(--st-cancelled-fg);
 }
 
 .row-actions__item.danger .ico,
-.row-actions__item.danger i {
+.row-actions__item.danger i,
+.ef-menu__item.danger .ico,
+.ef-menu__item.danger i {
   color: var(--st-cancelled-fg);
 }
 
 .row-actions__item.danger:hover,
-.row-actions__item.danger:focus-visible {
+.row-actions__item.danger:focus-visible,
+.ef-menu__item.danger:hover,
+.ef-menu__item.danger:focus-visible {
   background: var(--st-cancelled-bg);
 }
 
-.row-actions__divider {
+.row-actions__divider,
+.ef-menu__divider {
   height: 1px;
   background: var(--rule);
   margin: 4px;
 }
 
+/* ──────────── MENU (shared) ─────────────────────────────────────
+   The panel half of the menu language above, without the absolute
+   positioning `.row-actions__menu` needs for its own trigger. Anything
+   that already owns its placement (a popover, a bottom sheet) styles its
+   surface with `.ef-menu` and fills it with `.ef-menu__item`.         */
+
+.ef-menu {
+  display: grid;
+  /* A grid track defaults to auto, so one long row would size the column and
+     widen the whole panel. minmax(0, 1fr) is what lets a label truncate. */
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1px;
+  min-width: 212px;
+  padding: 6px;
+  background: var(--paper-alt);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-xl);
+  box-shadow: var(--shadow-3);
+}
+
+/* Identity block at the top of a menu: a name and a secondary line.
+   Sized to sit level with the items rather than tower over them. */
+.ef-menu__head {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+  padding: 8px 12px 7px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--rule);
+}
+
+.ef-menu__head-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13.5px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--text);
+}
+
+.ef-menu__head-sub {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 1.3;
+  color: var(--text-mute);
+}
+
+/* A nested group, revealed by expanding its parent row. Indented to the
+   label column so the children line up under the text, not the icon. */
+/* Label takes the free space so a trailing chip or caret can sit at the
+   inline end, and a long name truncates instead of widening the panel. */
+.ef-menu__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ef-menu__item .ef-menu__caret {
+  margin-inline-start: auto;
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+
+.ef-menu__item .ef-menu__badge {
+  margin-inline-start: auto;
+  flex: 0 0 auto;
+  padding: 1px 7px;
+  border-radius: var(--r-pill);
+  background: var(--st-cancelled-fg);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+/* A popover reduced to a placement mechanism. The `.ef-menu` inside draws
+   the surface, so PrimeNG must not draw a second panel or an arrow. */
+.p-popover.ef-menu-popover {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+.p-popover.ef-menu-popover .p-popover-content {
+  padding: 0;
+}
+
+.p-popover.ef-menu-popover:before,
+.p-popover.ef-menu-popover:after {
+  display: none;
+}
+
+.ef-menu__sublist {
+  display: grid;
+  gap: 1px;
+  margin: 0;
+  padding: 0 0 2px 28px;
+  list-style: none;
+  min-width: 0;
+}
+
 /* When a row-actions menu is open inside a data card, the table-wrap
    should let the popover escape its overflow. The data-card binds
    .has-open-menu when any descendant trigger is in `.open` state. */

package/types/elasticias-ui.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { PipeTransform, OnInit, OnChanges, TemplateRef, EventEmitter, AfterContentInit, OnDestroy, SimpleChanges, InjectionToken, AfterViewInit } from '@angular/core';
 import { Menu } from 'primeng/menu';
 import * as _elasticias_core from '@elasticias/core';
-import { EfBuildPackage, EfModule, EfNavSection, EfNavItem, EfModuleId, EfToast, EfToastAction, EfThemeConfigService } from '@elasticias/core';
+import { EfBuildPackage, EfShortcutGroup, EfModule, EfNavSection, EfNavItem, EfModuleId, EfToast, EfToastAction, EfThemeConfigService } from '@elasticias/core';
 import * as i1 from 'primeng/tooltip';
 import * as _elasticias_screens from '@elasticias/screens';
 import { ScreenContext, EfDetailToolbarAction, EfSearchToolbarAction, EfDataCardColumn, EfDataCardSort, EfDateRange, EfDatePresetKey } from '@elasticias/screens';
@@ -1079,6 +1079,39 @@ declare class EfTooltipDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfTooltipDirective, "[efTooltip]", never, {}, {}, never, never, true, [{ directive: typeof i1.Tooltip; inputs: { "pTooltip": "efTooltip"; "tooltipPosition": "efTooltipPosition"; "tooltipDisabled": "efTooltipDisabled"; "tooltipStyleClass": "efTooltipStyleClass"; "tooltipEvent": "efTooltipEvent"; "showDelay": "efTooltipShowDelay"; "hideDelay": "efTooltipHideDelay"; "appendTo": "efTooltipAppendTo"; "autoHide": "efTooltipAutoHide"; "escape": "efTooltipEscape"; "life": "efTooltipLife"; }; outputs: {}; }]>;
 }
 
+/**
+ * The keyboard-shortcuts reference: every registration currently sitting
+ * in `EfShortcutService`, grouped and rendered with the same `.kbd` chip
+ * `ef-row-actions` and `ef-menu` already use, so a chip means one thing
+ * everywhere it appears.
+ *
+ * Reads `EfShortcutService.list()` directly, so it stays live: open it
+ * while a row menu is on screen and its row-scoped shortcuts are already
+ * listed under "Row actions". Close the row menu and, since a row's
+ * shortcuts unregister with it, they're gone from here too.
+ *
+ * ```html
+ * <ef-shortcuts-dialog [(visible)]="shortcutsOpen" />
+ * ```
+ */
+declare class EfShortcutsDialogComponent {
+    private readonly shortcutService;
+    /** Two-way open state. */
+    readonly visible: _angular_core.ModelSignal<boolean>;
+    /** `list()`, reordered Global → Screen → Row. An unrecognised group
+     *  (a future tier this component doesn't know about yet) sorts last
+     *  rather than being dropped. */
+    protected readonly groups: _angular_core.Signal<EfShortcutGroup[]>;
+    /** Only macOS shows every chip already resolved to its own glyphs.
+     *  Everyone else gets a line saying the chips already match their
+     *  system, since nothing here prints a Mac glyph for them to decode. */
+    protected readonly isMacPlatform: boolean;
+    protected readonly closeAction: EfDialogAction[];
+    protected formatKeys(keys: string): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfShortcutsDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfShortcutsDialogComponent, "ef-shortcuts-dialog", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, never, never, true, never>;
+}
+
 declare class EfFieldsetComponent {
     /** Direct legend text (not translated) */
     legend?: string;
@@ -1920,6 +1953,89 @@ declare class EfProfileChipComponent {
     static ngAcceptInputType_readonly: unknown;
 }
 
+/**
+ * One row in `ef-profile-menu`.
+ *
+ * Navigation is a `command` like everything else: a host that wants to
+ * route passes `command: () => this.router.navigate([...])`, which keeps
+ * the lib free of `RouterModule`.
+ */
+interface EfProfileMenuItem {
+    /** Stable identifier, used for tracking and for expansion state. */
+    id: string;
+    /** Translation key for the row label. */
+    labelKey: string;
+    /** PrimeIcons class, e.g. `'pi pi-user'`. */
+    icon?: string;
+    /** Trailing count pill. `0` renders; `undefined` and `null` do not. */
+    badge?: string | number;
+    /** `'danger'` tints the row, for log out and other one-way actions. */
+    severity?: 'default' | 'danger';
+    /** Draw a separating rule above this row. */
+    groupStart?: boolean;
+    /** Rows shown when this one is expanded. A row with children never
+     *  runs its own `command`; choosing it toggles the group. */
+    children?: EfProfileMenuItem[];
+    /** What choosing the row does. */
+    command?: () => void;
+}
+
+/** The slice of PrimeNG's Popover this component actually calls. Typing it
+ *  structurally keeps the template ref usable and the tests free of PrimeNG. */
+interface Dismissible {
+    hide: () => void;
+    /** PrimeNG positions a popover once, when it opens. Expanding a group
+     *  changes the panel's height afterwards, so the host has to ask for a
+     *  reposition or the panel grows past the edge it was anchored to. */
+    align?: () => void;
+}
+/**
+ * The signed-in user's menu.
+ *
+ * Two renderings of one `items` array. `variant="chip"` (the default) shows
+ * an `ef-profile-chip` that opens a popover, for the side footer on a
+ * desktop. `variant="list"` renders the same rows flat, with no popover,
+ * for the mobile sheet: `ef-app-shell` does not render the side footer on a
+ * phone, and this menu is the only way to sign out, so it cannot live only
+ * there.
+ *
+ * ```html
+ * <ef-profile-menu
+ *   side-footer
+ *   [name]="userName()"
+ *   [secondary]="userEmail()"
+ *   [initial]="userInitial()"
+ *   [items]="menuItems()"
+ * />
+ * ```
+ */
+declare class EfProfileMenuComponent {
+    /** Display name, shown on the chip and in the panel header. */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Second header line. The email, usually. */
+    readonly secondary: _angular_core.InputSignal<string>;
+    /** Chip subtitle. Falls back to `secondary` when empty. */
+    readonly role: _angular_core.InputSignal<string>;
+    /** Avatar glyph. Up to two characters; falls back to the first of `name`. */
+    readonly initial: _angular_core.InputSignal<string>;
+    readonly tone: _angular_core.InputSignal<"tenant" | "neutral">;
+    readonly items: _angular_core.InputSignal<readonly EfProfileMenuItem[]>;
+    readonly variant: _angular_core.InputSignal<"chip" | "list">;
+    readonly itemSelected: _angular_core.OutputEmitterRef<EfProfileMenuItem>;
+    /** Id of the one expanded group, or null. One at a time: a menu that
+     *  grows in two directions at once stops being scannable. */
+    private readonly expandedId;
+    readonly chipRole: _angular_core.Signal<string>;
+    isExpanded(id: string): boolean;
+    /**
+     * Choose a row. A row with children toggles its group and leaves the
+     * popover open; a leaf runs its command, reports it, and dismisses.
+     */
+    select(item: EfProfileMenuItem, popover?: Dismissible): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfProfileMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfProfileMenuComponent, "ef-profile-menu", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "initial": { "alias": "initial"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, never, never, true, never>;
+}
+
 declare class EfBlockUiComponent {
     isLoading: boolean;
     contentPanel: any;
@@ -4246,7 +4362,11 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     /** Items array for the auto row-actions cell. Rebuilt per call so
      *  the ef-row-actions component receives a fresh closure per row.
      *  Visibility is filtered later by ef-row-actions against
-     *  `rowActionsContext` (ScreenContext.isGranted). */
+     *  `rowActionsContext` (ScreenContext.isGranted).
+     *
+     *  `kbd` is rendered through `formatShortcut()`, not a literal glyph:
+     *  `ef-row-actions` binds these same keys for real while the row's
+     *  menu is open, and a hardcoded `'⌘D'` would lie to a Windows user. */
     defaultRowActions(row: TRow): ReadonlyArray<EfRowAction>;
     bodyTemplate(columnId: string): TemplateRef<unknown> | undefined;
     headerTemplate(columnId: string): TemplateRef<unknown> | undefined;
@@ -4355,11 +4475,11 @@ declare class EfColumnHeaderTemplateDirective {
  *
  * ```ts
  * actions: ReadonlyArray<EfRowAction> = [
- *   { id: 'view',      labelKey: 'common_view',      icon: 'pi pi-eye',    kbd: '↵',
+ *   { id: 'view',      labelKey: 'common_view',      icon: 'pi pi-eye',    kbd: formatShortcut('enter'),
  *     permission: Permissions.Read,   command: () => view(row) },
- *   { id: 'edit',      labelKey: 'common_edit',      icon: 'pi pi-pencil', kbd: 'E',
+ *   { id: 'edit',      labelKey: 'common_edit',      icon: 'pi pi-pencil', kbd: formatShortcut('e'),
  *     permission: Permissions.Edit,   command: () => edit(row) },
- *   { id: 'duplicate', labelKey: 'common_duplicate', icon: 'pi pi-copy',
+ *   { id: 'duplicate', labelKey: 'common_duplicate', icon: 'pi pi-copy',   kbd: formatShortcut('mod+d'),
  *                                         command: () => duplicate(row) },
  *   { separator: true },
  *   { id: 'delete',    labelKey: 'common_delete',    icon: 'pi pi-trash',  severity: 'danger',
@@ -4385,9 +4505,25 @@ declare class EfColumnHeaderTemplateDirective {
  * Permission filtering: pass `[context]="..."` (a `ScreenContext`); items
  * declaring a `permission` are hidden unless that permission is granted.
  * Items with no `permission` always show.
+ *
+ * The `kbd` hint is decorative unless it's one of `view` / `edit` /
+ * `duplicate`: this component registers Enter, `E` and `mod+D` against
+ * `EfShortcutService`, gated on `open()`, so they only fire while this
+ * row's menu is on screen. Render `kbd` through `formatShortcut()` (as
+ * above): a hardcoded `'⌘D'` is wrong for a Windows user, which is
+ * exactly the bug this wiring fixes.
  */
 declare class EfRowActionsComponent {
     private readonly host;
+    private readonly shortcuts;
+    /** Distinguishes this instance's registrations from every other row's:
+     *  each row on screen constructs its own component, and ids must not
+     *  collide or one row's disposer (and its `when`) would clobber
+     *  another's still-live registration. */
+    private static nextInstanceId;
+    private readonly instanceId;
+    constructor();
+    private isFocusInsideMenu;
     /** Action descriptors. */
     readonly items: _angular_core.InputSignal<readonly EfRowAction[]>;
     /** Optional context — when present, items with a `permission` are
@@ -4562,8 +4698,8 @@ declare class EfEmptyStateComponent {
 /**
  * Comptoir smart bar — the search/filter card every list screen
  * starts with. Composes:
- *   1. Search input (with `⌘K` kbd hint) + Effacer / Rechercher
- *      action buttons.
+ *   1. Search input (with an optional keyboard-shortcut hint chip) +
+ *      Effacer / Rechercher action buttons.
  *   2. A filter-row slot for `[filters]` (pill-group + filter-pill +
  *      preset-pill + "+ Plus de filtres").
  *   3. A drawer slot for `[drawer]` (advanced filters via
@@ -4573,6 +4709,12 @@ declare class EfEmptyStateComponent {
  * for two-way binding, or watch the (search) output for explicit
  * Rechercher clicks.
  *
+ * `shortcut` defaults to `'mod+k'`: this component registers it with
+ * `EfShortcutService` and focuses the search input when it fires (the
+ * user still has to type and submit; the shortcut only gets them into
+ * the field). Pass `[shortcut]="null"` on a screen with a second smart
+ * bar so only one of them claims the binding.
+ *
  * ```html
  * <ef-smart-bar
  *   [(searchText)]="searchQuery"
@@ -4592,6 +4734,12 @@ declare class EfEmptyStateComponent {
  * ```
  */
 declare class EfSmartBarComponent {
+    private readonly shortcuts;
+    /** Distinguishes this instance's registration from any other
+     *  ef-smart-bar on screen, the same convention ef-row-actions uses. */
+    private static nextInstanceId;
+    private readonly instanceId;
+    private readonly searchInput;
     /** Two-way bound search input. */
     readonly searchText: _angular_core.ModelSignal<string>;
     readonly placeholderKey: _angular_core.InputSignal<string>;
@@ -4603,12 +4751,18 @@ declare class EfSmartBarComponent {
     readonly hideClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly hideSearch: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Keyboard shortcut that focuses the search input. `null` opts out
+     *  (a screen with two smart bars registers the binding on only one
+     *  of them). Defaults to `'mod+k'`. */
+    readonly shortcut: _angular_core.InputSignal<string>;
+    protected readonly kbdLabel: _angular_core.Signal<string>;
     readonly search: _angular_core.OutputEmitterRef<string>;
     readonly clear: _angular_core.OutputEmitterRef<void>;
+    constructor();
     onSubmit(): void;
     onClear(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfSmartBarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSmartBarComponent, "ef-smart-bar", never, { "searchText": { "alias": "searchText"; "required": false; "isSignal": true; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabelKey": { "alias": "clearLabelKey"; "required": false; "isSignal": true; }; "clearTitleKey": { "alias": "clearTitleKey"; "required": false; "isSignal": true; }; "searchLabelKey": { "alias": "searchLabelKey"; "required": false; "isSignal": true; }; "showKbdHint": { "alias": "showKbdHint"; "required": false; "isSignal": true; }; "hideClear": { "alias": "hideClear"; "required": false; "isSignal": true; }; "hideSearch": { "alias": "hideSearch"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "searchText": "searchTextChange"; "search": "search"; "clear": "clear"; }, never, ["[filters]", "[drawer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSmartBarComponent, "ef-smart-bar", never, { "searchText": { "alias": "searchText"; "required": false; "isSignal": true; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabelKey": { "alias": "clearLabelKey"; "required": false; "isSignal": true; }; "clearTitleKey": { "alias": "clearTitleKey"; "required": false; "isSignal": true; }; "searchLabelKey": { "alias": "searchLabelKey"; "required": false; "isSignal": true; }; "showKbdHint": { "alias": "showKbdHint"; "required": false; "isSignal": true; }; "hideClear": { "alias": "hideClear"; "required": false; "isSignal": true; }; "hideSearch": { "alias": "hideSearch"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "shortcut": { "alias": "shortcut"; "required": false; "isSignal": true; }; }, { "searchText": "searchTextChange"; "search": "search"; "clear": "clear"; }, never, ["[filters]", "[drawer]"], true, never>;
 }
 
 /**
@@ -4732,6 +4886,58 @@ declare class EfClearButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfClearButtonComponent, "ef-clear-button", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "clear": "clear"; }, never, never, true, never>;
 }
 
+/** What the form hands back. `currentPassword` is absent when the host
+ *  did not ask for one (an administrator resetting someone else's). */
+interface EfChangePasswordSubmit {
+    currentPassword?: string;
+    newPassword: string;
+}
+/**
+ * Password form, deliberately without an API client.
+ *
+ * `@elasticias/ui` cannot import an app's generated HTTP client, and that
+ * limitation is what makes one component serve two different endpoints: a
+ * user changing their own password proves the old one, an administrator
+ * resetting someone else's does not. The host reads `canSubmit()`, calls
+ * `submit()` from its dialog footer, and listens to `submitted`.
+ *
+ * ```html
+ * <ef-change-password
+ *   #form
+ *   [requireCurrent]="!userId()"
+ *   [busy]="saving()"
+ *   [errors]="serverErrors()"
+ *   (submitted)="save($event)"
+ * />
+ * ```
+ *
+ * There is no `reset()`: hosts mount it under `@if`, so every open is a
+ * fresh instance.
+ */
+declare class EfChangePasswordComponent {
+    /** Ask for the existing password. False for an administrator reset. */
+    readonly requireCurrent: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A request is in flight: the form refuses to submit again. */
+    readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Already-translated server messages, rendered under the fields. */
+    readonly errors: _angular_core.InputSignal<readonly string[]>;
+    /** Minimum length. Kept in step with the backend validator's 8. */
+    readonly minLength: _angular_core.InputSignal<number>;
+    readonly submitted: _angular_core.OutputEmitterRef<EfChangePasswordSubmit>;
+    readonly currentPassword: _angular_core.WritableSignal<string>;
+    readonly newPassword: _angular_core.WritableSignal<string>;
+    readonly confirmation: _angular_core.WritableSignal<string>;
+    /**
+     * Translation keys for every rule the current input breaks. Empty while
+     * the user has typed nothing, so the form does not scold on open.
+     */
+    readonly validationKeys: _angular_core.Signal<string[]>;
+    readonly canSubmit: _angular_core.Signal<boolean>;
+    submit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfChangePasswordComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfChangePasswordComponent, "ef-change-password", never, { "requireCurrent": { "alias": "requireCurrent"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; }, { "submitted": "submitted"; }, never, never, true, never>;
+}
+
 /**
  * Native Comptoir textarea — no PrimeNG wrapper. Pairs with the
  * `.ef-textarea` rule in `@elasticias/ui/styles/patterns` (focus
@@ -5318,5 +5524,5 @@ declare class EfEmailMetricsCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfEmailMetricsCardComponent, "ef-email-metrics-card", never, { "metrics": { "alias": "metrics"; "required": false; "isSignal": true; }; "recentEvents": { "alias": "recentEvents"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 
-export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
-export type { CatalogueProduct, CatalogueProductVariant, CategoryAssignment, CategoryGroup, CategoryItem, DatatableSearchEntity, DocumentConfig, EfAboutServer, EfBadgeColor, EfBadgeConfig, EfBadgeSize, EfBadgeVariant, EfButtonComptoirSeverity, EfButtonPrimeNGSeverity, EfButtonSeverity, EfChangeHistoryEntry, EfChangeHistoryFieldChange, EfChartSeries, EfChartType, EfDataCardMobileLayout, EfDataCardRowAction, EfDatatableActions, EfDatatableColumn, EfDatatableColumnAlign, EfDatatableColumnType, EfDatatableConfig, EfDateFieldValue, EfDatePreset, EfDialogAction, EfDialogSeverity, EfDialogSize, EfFabPosition, EfKpiDeltaTone, EfKpiSparkline, EfPillItem, EfPresetItem, EfRankRow, EfRowAction, EfSkeletonVariant, EfStatsRow, EfStatusColor, EfStatusReferenceItem, EfTabItem, EfTabsModule, EfTabsVariant, EfTimelineItem, EfTimelineState, EfToastRegionPosition, EfTotalsGrand, EfTotalsRow, HighlightSegment, OrderChangeInfo, OrderEntity, OrderLineItem, OrderProductsSummary, OrderSummaryItem, ProductCountGroup, ProductCountGroupLabel, ProductTypeaheadRow, ProductTypeaheadSelection, ProductWithCountGroup, SelectedFilter, ValidationResult };
+export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
+export type { CatalogueProduct, CatalogueProductVariant, CategoryAssignment, CategoryGroup, CategoryItem, DatatableSearchEntity, DocumentConfig, EfAboutServer, EfBadgeColor, EfBadgeConfig, EfBadgeSize, EfBadgeVariant, EfButtonComptoirSeverity, EfButtonPrimeNGSeverity, EfButtonSeverity, EfChangeHistoryEntry, EfChangeHistoryFieldChange, EfChangePasswordSubmit, EfChartSeries, EfChartType, EfDataCardMobileLayout, EfDataCardRowAction, EfDatatableActions, EfDatatableColumn, EfDatatableColumnAlign, EfDatatableColumnType, EfDatatableConfig, EfDateFieldValue, EfDatePreset, EfDialogAction, EfDialogSeverity, EfDialogSize, EfFabPosition, EfKpiDeltaTone, EfKpiSparkline, EfPillItem, EfPresetItem, EfProfileMenuItem, EfRankRow, EfRowAction, EfSkeletonVariant, EfStatsRow, EfStatusColor, EfStatusReferenceItem, EfTabItem, EfTabsModule, EfTabsVariant, EfTimelineItem, EfTimelineState, EfToastRegionPosition, EfTotalsGrand, EfTotalsRow, HighlightSegment, OrderChangeInfo, OrderEntity, OrderLineItem, OrderProductsSummary, OrderSummaryItem, ProductCountGroup, ProductCountGroupLabel, ProductTypeaheadRow, ProductTypeaheadSelection, ProductWithCountGroup, SelectedFilter, ValidationResult };