@elasticias/ui 1.0.13 → 1.0.14

package/fesm2022/elasticias-ui.mjs

@@ -4934,6 +4934,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             args: [{ selector: 'ef-about-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, EfDialogComponent], template: "<!-- appendTo=\"body\": ef-app-main is `overflow: hidden`, so a dialog left in\n     place inside the content column is clipped by it. -->\n<ef-dialog\n  [visible]=\"visible()\"\n  (visibleChange)=\"visible.set($event)\"\n  headerKey=\"common_about\"\n  size=\"sm\"\n  appendTo=\"body\"\n  dismissableMask\n  [actions]=\"closeAction\"\n>\n  <div class=\"ef-about\">\n    <span class=\"ef-about__mark\" aria-hidden=\"true\">\n      @if (logoUrl()) {\n        <img [src]=\"logoUrl()\" alt=\"\" />\n      } @else {\n        {{ initial() }}\n      }\n    </span>\n\n    <p class=\"ef-about__product\">{{ product() }}</p>\n    @if (edition()) {\n      <p class=\"ef-about__edition\">{{ edition() }}</p>\n    }\n\n    @if (rows().length) {\n      <dl class=\"ef-about__rows\">\n        @for (row of rows(); track row.labelKey) {\n          <div class=\"ef-about__row\">\n            <dt>{{ row.labelKey | translate }}</dt>\n            <dd>{{ row.value }}</dd>\n          </div>\n        }\n      </dl>\n    }\n\n    @if (packages().length) {\n      <h3 class=\"ef-about__group\">{{ 'common_about_packages' | translate }}</h3>\n      <dl class=\"ef-about__rows ef-about__rows--tight\">\n        @for (pkg of packages(); track pkg.name) {\n          <div class=\"ef-about__row\">\n            <dt>{{ pkg.name }}</dt>\n            <dd>{{ pkg.version }}</dd>\n          </div>\n        }\n      </dl>\n    }\n\n    <!-- The API's half of the answer. An app that exposes no such endpoint\n         passes no [server] and this whole block collapses. -->\n    @if (hasServer()) {\n      <h3 class=\"ef-about__group\">{{ 'common_about_server' | translate }}</h3>\n      <dl class=\"ef-about__rows ef-about__rows--tight\">\n        @for (row of serverRows(); track row.labelKey) {\n          <div class=\"ef-about__row\">\n            <dt>{{ row.labelKey | translate }}</dt>\n            <dd>{{ row.value }}</dd>\n          </div>\n        }\n        @for (pkg of serverPackages(); track pkg.name) {\n          <div class=\"ef-about__row\">\n            <dt>{{ pkg.name }}</dt>\n            <dd>{{ pkg.version }}</dd>\n          </div>\n        }\n      </dl>\n    }\n\n    @if (websiteUrl()) {\n      <a\n        class=\"ef-about__link\"\n        [href]=\"websiteUrl()\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        <span>{{ websiteLabel() || websiteUrl() }}</span>\n        <i class=\"pi pi-external-link\" aria-hidden=\"true\"></i>\n      </a>\n    }\n\n    <p class=\"ef-about__owner\">\u00A9 {{ year }} {{ owner() }}</p>\n  </div>\n</ef-dialog>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ef-about{display:grid;justify-items:center;gap:10px;text-align:center}.ef-about__mark{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-pill, 999px);background:var(--tenant-500);color:#fff;font-family:Bricolage Grotesque,system-ui,sans-serif;font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 80;font-size:22px;line-height:1;overflow:hidden}.ef-about__mark img{width:100%;height:100%;object-fit:cover}.ef-about__product{margin:2px 0 0;font-family:Bricolage Grotesque,system-ui,sans-serif;font-variation-settings:\"opsz\" 14,\"wght\" 700,\"wdth\" 90;font-size:20px;letter-spacing:-.02em;color:var(--text)}.ef-about__edition{margin:-6px 0 0;max-width:100%;font-size:12px;color:var(--text-mute);overflow-wrap:anywhere}.ef-about__rows{width:100%;min-width:0;margin:0;padding:12px 0 0;display:grid;gap:7px;border-top:1px solid var(--rule);text-align:start}.ef-about__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline}.ef-about__row dt{min-width:0;font-size:12px;color:var(--text-mute);overflow-wrap:anywhere}.ef-about__row dd{min-width:0;margin:0;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11.5px;color:var(--text);text-align:end;overflow-wrap:anywhere}.ef-about__rows--tight{padding-top:0;border-top:0}.ef-about__group{width:100%;margin:4px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-family:JetBrains Mono,ui-monospace,monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--text-soft);text-align:start}.ef-about__link{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:2px;padding:0 10px;border-radius:var(--r-pill, 999px);color:var(--tenant-600, var(--tenant-500));font-size:12.5px;font-weight:700;text-decoration:none}.ef-about__link i{font-size:11px;opacity:.75}.ef-about__link:hover{background:color-mix(in srgb,var(--tenant-500) 10%,transparent);text-decoration:underline}.ef-about__link:focus-visible{outline:2px solid var(--tenant-400);outline-offset:2px}.ef-about__owner{margin:6px 0 0;font-size:11px;color:var(--text-soft)}@media(max-width:767px){.ef-about__mark{width:48px;height:48px;font-size:19px}.ef-about__link{min-height:var(--hit-touch, 48px)}}\n"] }]
         }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], edition: [{ type: i0.Input, args: [{ isSignal: true, alias: "edition", required: false }] }], organisation: [{ type: i0.Input, args: [{ isSignal: true, alias: "organisation", required: false }] }], server: [{ type: i0.Input, args: [{ isSignal: true, alias: "server", required: false }] }], websiteUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "websiteUrl", required: false }] }], websiteLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "websiteLabel", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], initial: [{ type: i0.Input, args: [{ isSignal: true, alias: "initial", required: false }] }], owner: [{ type: i0.Input, args: [{ isSignal: true, alias: "owner", required: false }] }] } });
 
+/**
+ * The three tiers a shortcut can belong to, outer to inner: a Global
+ * shortcut works anywhere in the app, a Screen shortcut works anywhere on
+ * the current screen, a Row shortcut only while a row's menu is open.
+ * `list()` returns groups in registration order, which is really "whatever
+ * happened to construct first." This fixes the section order so it
+ * always reads outer to inner regardless of what rendered when.
+ */
+const GROUP_ORDER = [
+    'shortcut_group_general',
+    'shortcut_group_screen',
+    'shortcut_group_row_actions',
+];
 /**
  * The keyboard-shortcuts reference: every registration currently sitting
  * in `EfShortcutService`, grouped and rendered with the same `.kbd` chip
@@ -4953,9 +4966,19 @@ class EfShortcutsDialogComponent {
     shortcutService = inject(EfShortcutService);
     /** Two-way open state. */
     visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    groups = this.shortcutService.list;
-    /** Only macOS reads `⌘` at a glance. Everyone else needs the line
-     *  spelling out that it means Ctrl. */
+    /** `list()`, reordered Global → Screen → Row. An unrecognised group
+     *  (a future tier this component doesn't know about yet) sorts last
+     *  rather than being dropped. */
+    groups = computed(() => {
+        const rank = (group) => {
+            const index = GROUP_ORDER.indexOf(group);
+            return index === -1 ? GROUP_ORDER.length : index;
+        };
+        return [...this.shortcutService.list()].sort((a, b) => rank(a.group) - rank(b.group));
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** 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. */
     isMacPlatform = isMacPlatform;
     closeAction = [
         { labelKey: 'common_close', severity: 'ghost' },
@@ -4964,11 +4987,11 @@ class EfShortcutsDialogComponent {
         return formatShortcut(keys);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfShortcutsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfShortcutsDialogComponent, isStandalone: true, selector: "ef-shortcuts-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: "<!-- appendTo=\"body\": a dialog left inside the content column can be clipped\n     by an ancestor's overflow rule (see ef-about-dialog). -->\n<ef-dialog\n    [visible]=\"visible()\"\n    (visibleChange)=\"visible.set($event)\"\n    headerKey=\"shortcuts_dialog_title\"\n    size=\"sm\"\n    appendTo=\"body\"\n    dismissableMask\n    [actions]=\"closeAction\"\n>\n    <div class=\"shortcuts-dialog\">\n        @if (!isMacPlatform) {\n            <p class=\"shortcuts-dialog__hint\">{{ 'shortcuts_dialog_mod_hint' | translate }}</p>\n        }\n\n        @if (groups().length) {\n            @for (group of groups(); track group.group) {\n                <section class=\"shortcuts-dialog__group\">\n                    <h3 class=\"shortcuts-dialog__group-title\">{{ group.group | translate }}</h3>\n                    <ul class=\"shortcuts-dialog__list\">\n                        @for (shortcut of group.shortcuts; track shortcut.id) {\n                            <li class=\"shortcuts-dialog__item\">\n                                <span class=\"lbl\">{{ shortcut.labelKey | translate }}</span>\n                                <!-- Not aria-hidden here: the key IS the content this\n                                     dialog exists to say. Hiding it would leave a\n                                     screen-reader user hearing the action names and\n                                     never the shortcut that triggers them. -->\n                                <span class=\"kbd\">{{ formatKeys(shortcut.keys) }}</span>\n                            </li>\n                        }\n                    </ul>\n                </section>\n            }\n        } @else {\n            <p class=\"shortcuts-dialog__empty\">{{ 'shortcuts_dialog_empty' | translate }}</p>\n        }\n    </div>\n</ef-dialog>\n", styles: [":host{display:contents}.shortcuts-dialog{display:grid;gap:16px}.shortcuts-dialog__hint{margin:0;padding:8px 10px;border-radius:8px;background:var(--paper-soft, var(--paper));border:1px solid var(--rule);font-size:12px;color:var(--text-mute)}.shortcuts-dialog__empty{margin:0;padding:12px 0;font-size:13px;color:var(--text-mute);text-align:center}.shortcuts-dialog__group+.shortcuts-dialog__group{padding-top:12px;border-top:1px solid var(--rule)}.shortcuts-dialog__group-title{margin:0 0 8px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--text-soft)}.shortcuts-dialog__list{display:grid;gap:6px;margin:0;padding:0;list-style:none}.shortcuts-dialog__item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.shortcuts-dialog__item .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text)}.shortcuts-dialog__item .kbd{flex:none;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;color:var(--text-mute);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:2px 6px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfDialogComponent, selector: "ef-dialog", inputs: ["header", "headerKey", "subtitle", "subtitleKey", "visible", "modal", "closable", "draggable", "resizable", "dismissableMask", "closeOnEscape", "severity", "icon", "size", "style", "styleClass", "position", "appendTo", "variant", "actions", "defaultActions", "saveLabelKey", "cancelLabelKey", "saveLabel", "cancelLabel", "saveIcon", "cancelIcon", "saveDisabled", "saveStyleClass", "cancelStyleClass", "saveSeverity", "cancelSeverity"], outputs: ["visibleChange", "showEvent", "hideEvent", "saveAction", "cancelAction", "actionClick"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfShortcutsDialogComponent, isStandalone: true, selector: "ef-shortcuts-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: "<!-- appendTo=\"body\": a dialog left inside the content column can be clipped\n     by an ancestor's overflow rule (see ef-about-dialog). -->\n<ef-dialog\n    [visible]=\"visible()\"\n    (visibleChange)=\"visible.set($event)\"\n    headerKey=\"shortcuts_dialog_title\"\n    size=\"sm\"\n    appendTo=\"body\"\n    dismissableMask\n    [actions]=\"closeAction\"\n>\n    <div class=\"shortcuts-dialog\">\n        @if (!isMacPlatform) {\n            <p class=\"shortcuts-dialog__hint\">{{ 'shortcuts_dialog_mod_hint' | translate }}</p>\n        }\n\n        @if (groups().length) {\n            @for (group of groups(); track group.group) {\n                <section class=\"shortcuts-dialog__group\">\n                    <h3 class=\"shortcuts-dialog__group-title\">{{ group.group | translate }}</h3>\n                    <ul class=\"shortcuts-dialog__list\">\n                        @for (shortcut of group.shortcuts; track shortcut.id) {\n                            <li class=\"shortcuts-dialog__item\">\n                                <span class=\"lbl\">{{ shortcut.labelKey | translate }}</span>\n                                <!-- Not aria-hidden here: the key IS the content this\n                                     dialog exists to say. Hiding it would leave a\n                                     screen-reader user hearing the action names and\n                                     never the shortcut that triggers them. -->\n                                <span class=\"kbd\">{{ formatKeys(shortcut.keys) }}</span>\n                            </li>\n                        }\n                    </ul>\n                </section>\n            }\n        } @else {\n            <p class=\"shortcuts-dialog__empty\">{{ 'shortcuts_dialog_empty' | translate }}</p>\n        }\n    </div>\n</ef-dialog>\n", styles: [":host{display:contents}.shortcuts-dialog{display:grid;gap:16px}.shortcuts-dialog__hint{margin:0;padding:8px 10px;border-radius:8px;background:var(--paper-soft, var(--paper));border:1px solid var(--rule);font-size:12px;color:var(--text-mute)}.shortcuts-dialog__empty{margin:0;padding:12px 0;font-size:13px;color:var(--text-mute);text-align:center}.shortcuts-dialog__group+.shortcuts-dialog__group{padding-top:12px;border-top:1px solid var(--rule)}.shortcuts-dialog__group-title{margin:0 0 8px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--text-soft)}.shortcuts-dialog__list{display:grid;gap:1px;margin:0;padding:6px;list-style:none;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl)}.shortcuts-dialog__item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:9px 12px;border-radius:var(--r-md)}.shortcuts-dialog__item .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--text)}.shortcuts-dialog__item .kbd{flex:none;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;color:var(--text-mute);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:2px 6px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfDialogComponent, selector: "ef-dialog", inputs: ["header", "headerKey", "subtitle", "subtitleKey", "visible", "modal", "closable", "draggable", "resizable", "dismissableMask", "closeOnEscape", "severity", "icon", "size", "style", "styleClass", "position", "appendTo", "variant", "actions", "defaultActions", "saveLabelKey", "cancelLabelKey", "saveLabel", "cancelLabel", "saveIcon", "cancelIcon", "saveDisabled", "saveStyleClass", "cancelStyleClass", "saveSeverity", "cancelSeverity"], outputs: ["visibleChange", "showEvent", "hideEvent", "saveAction", "cancelAction", "actionClick"] }, { 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: EfShortcutsDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-shortcuts-dialog', standalone: true, imports: [CommonModule, TranslateModule, EfDialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- appendTo=\"body\": a dialog left inside the content column can be clipped\n     by an ancestor's overflow rule (see ef-about-dialog). -->\n<ef-dialog\n    [visible]=\"visible()\"\n    (visibleChange)=\"visible.set($event)\"\n    headerKey=\"shortcuts_dialog_title\"\n    size=\"sm\"\n    appendTo=\"body\"\n    dismissableMask\n    [actions]=\"closeAction\"\n>\n    <div class=\"shortcuts-dialog\">\n        @if (!isMacPlatform) {\n            <p class=\"shortcuts-dialog__hint\">{{ 'shortcuts_dialog_mod_hint' | translate }}</p>\n        }\n\n        @if (groups().length) {\n            @for (group of groups(); track group.group) {\n                <section class=\"shortcuts-dialog__group\">\n                    <h3 class=\"shortcuts-dialog__group-title\">{{ group.group | translate }}</h3>\n                    <ul class=\"shortcuts-dialog__list\">\n                        @for (shortcut of group.shortcuts; track shortcut.id) {\n                            <li class=\"shortcuts-dialog__item\">\n                                <span class=\"lbl\">{{ shortcut.labelKey | translate }}</span>\n                                <!-- Not aria-hidden here: the key IS the content this\n                                     dialog exists to say. Hiding it would leave a\n                                     screen-reader user hearing the action names and\n                                     never the shortcut that triggers them. -->\n                                <span class=\"kbd\">{{ formatKeys(shortcut.keys) }}</span>\n                            </li>\n                        }\n                    </ul>\n                </section>\n            }\n        } @else {\n            <p class=\"shortcuts-dialog__empty\">{{ 'shortcuts_dialog_empty' | translate }}</p>\n        }\n    </div>\n</ef-dialog>\n", styles: [":host{display:contents}.shortcuts-dialog{display:grid;gap:16px}.shortcuts-dialog__hint{margin:0;padding:8px 10px;border-radius:8px;background:var(--paper-soft, var(--paper));border:1px solid var(--rule);font-size:12px;color:var(--text-mute)}.shortcuts-dialog__empty{margin:0;padding:12px 0;font-size:13px;color:var(--text-mute);text-align:center}.shortcuts-dialog__group+.shortcuts-dialog__group{padding-top:12px;border-top:1px solid var(--rule)}.shortcuts-dialog__group-title{margin:0 0 8px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--text-soft)}.shortcuts-dialog__list{display:grid;gap:6px;margin:0;padding:0;list-style:none}.shortcuts-dialog__item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.shortcuts-dialog__item .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text)}.shortcuts-dialog__item .kbd{flex:none;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;color:var(--text-mute);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:2px 6px;line-height:1}\n"] }]
+            args: [{ selector: 'ef-shortcuts-dialog', standalone: true, imports: [CommonModule, TranslateModule, EfDialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- appendTo=\"body\": a dialog left inside the content column can be clipped\n     by an ancestor's overflow rule (see ef-about-dialog). -->\n<ef-dialog\n    [visible]=\"visible()\"\n    (visibleChange)=\"visible.set($event)\"\n    headerKey=\"shortcuts_dialog_title\"\n    size=\"sm\"\n    appendTo=\"body\"\n    dismissableMask\n    [actions]=\"closeAction\"\n>\n    <div class=\"shortcuts-dialog\">\n        @if (!isMacPlatform) {\n            <p class=\"shortcuts-dialog__hint\">{{ 'shortcuts_dialog_mod_hint' | translate }}</p>\n        }\n\n        @if (groups().length) {\n            @for (group of groups(); track group.group) {\n                <section class=\"shortcuts-dialog__group\">\n                    <h3 class=\"shortcuts-dialog__group-title\">{{ group.group | translate }}</h3>\n                    <ul class=\"shortcuts-dialog__list\">\n                        @for (shortcut of group.shortcuts; track shortcut.id) {\n                            <li class=\"shortcuts-dialog__item\">\n                                <span class=\"lbl\">{{ shortcut.labelKey | translate }}</span>\n                                <!-- Not aria-hidden here: the key IS the content this\n                                     dialog exists to say. Hiding it would leave a\n                                     screen-reader user hearing the action names and\n                                     never the shortcut that triggers them. -->\n                                <span class=\"kbd\">{{ formatKeys(shortcut.keys) }}</span>\n                            </li>\n                        }\n                    </ul>\n                </section>\n            }\n        } @else {\n            <p class=\"shortcuts-dialog__empty\">{{ 'shortcuts_dialog_empty' | translate }}</p>\n        }\n    </div>\n</ef-dialog>\n", styles: [":host{display:contents}.shortcuts-dialog{display:grid;gap:16px}.shortcuts-dialog__hint{margin:0;padding:8px 10px;border-radius:8px;background:var(--paper-soft, var(--paper));border:1px solid var(--rule);font-size:12px;color:var(--text-mute)}.shortcuts-dialog__empty{margin:0;padding:12px 0;font-size:13px;color:var(--text-mute);text-align:center}.shortcuts-dialog__group+.shortcuts-dialog__group{padding-top:12px;border-top:1px solid var(--rule)}.shortcuts-dialog__group-title{margin:0 0 8px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--text-soft)}.shortcuts-dialog__list{display:grid;gap:1px;margin:0;padding:6px;list-style:none;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl)}.shortcuts-dialog__item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:9px 12px;border-radius:var(--r-md)}.shortcuts-dialog__item .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--text)}.shortcuts-dialog__item .kbd{flex:none;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;color:var(--text-mute);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:2px 6px;line-height:1}\n"] }]
         }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }] } });
 
 class EfFieldsetComponent {
@@ -9882,8 +9905,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 /**
  * 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
@@ -9893,6 +9916,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * 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"
@@ -9912,6 +9941,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * ```
  */
 class EfSmartBarComponent {
+    shortcuts = inject(EfShortcutService);
+    /** Distinguishes this instance's registration from any other
+     *  ef-smart-bar on screen, the same convention ef-row-actions uses. */
+    static nextInstanceId = 0;
+    instanceId = EfSmartBarComponent.nextInstanceId++;
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
     /** Two-way bound search input. */
     searchText = model('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
     placeholderKey = input('', ...(ngDevMode ? [{ debugName: "placeholderKey" }] : /* istanbul ignore next */ []));
@@ -9923,12 +9958,44 @@ class EfSmartBarComponent {
     hideClear = input(false, { ...(ngDevMode ? { debugName: "hideClear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     hideSearch = input(false, { ...(ngDevMode ? { debugName: "hideSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** 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'`. */
+    shortcut = input('mod+k', ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+    kbdLabel = computed(() => {
+        const keys = this.shortcut();
+        return keys ? formatShortcut(keys) : '';
+    }, ...(ngDevMode ? [{ debugName: "kbdLabel" }] : /* istanbul ignore next */ []));
     // `search` shadows a native DOM event name. Renaming this output would
     // churn every consumer template, so the name stays and the rule is
     // suppressed here deliberately.
     // eslint-disable-next-line @angular-eslint/no-output-native
     search = output();
     clear = output();
+    constructor() {
+        // An effect, not a constructor-time register(): `shortcut` is an
+        // input, so its bound value isn't readable until after Angular has
+        // finished construction. The effect also re-registers cleanly if a
+        // caller ever changes `shortcut` at runtime, and its `onCleanup`
+        // covers disposal since `EfShortcutService.register()` cannot pick
+        // up a DestroyRef from inside an effect callback.
+        effect(onCleanup => {
+            const keys = this.shortcut();
+            if (!keys)
+                return;
+            const dispose = this.shortcuts.register({
+                id: `smart-bar.${this.instanceId}.focus`,
+                keys,
+                // Not 'common_search': this shortcut focuses the field, it
+                // never submits, and the dialog is where a user learns
+                // what a key actually does.
+                labelKey: 'shortcut_focus_search',
+                group: 'shortcut_group_screen',
+                handler: () => this.searchInput()?.nativeElement.focus(),
+            });
+            onCleanup(dispose);
+        });
+    }
     onSubmit() {
         this.search.emit(this.searchText());
     }
@@ -9937,19 +10004,20 @@ class EfSmartBarComponent {
         this.clear.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSmartBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSmartBarComponent, isStandalone: true, selector: "ef-smart-bar", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearLabelKey: { classPropertyName: "clearLabelKey", publicName: "clearLabelKey", isSignal: true, isRequired: false, transformFunction: null }, clearTitleKey: { classPropertyName: "clearTitleKey", publicName: "clearTitleKey", isSignal: true, isRequired: false, transformFunction: null }, searchLabelKey: { classPropertyName: "searchLabelKey", publicName: "searchLabelKey", isSignal: true, isRequired: false, transformFunction: null }, showKbdHint: { classPropertyName: "showKbdHint", publicName: "showKbdHint", isSignal: true, isRequired: false, transformFunction: null }, hideClear: { classPropertyName: "hideClear", publicName: "hideClear", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", search: "search", clear: "clear" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSmartBarComponent, isStandalone: true, selector: "ef-smart-bar", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearLabelKey: { classPropertyName: "clearLabelKey", publicName: "clearLabelKey", isSignal: true, isRequired: false, transformFunction: null }, clearTitleKey: { classPropertyName: "clearTitleKey", publicName: "clearTitleKey", isSignal: true, isRequired: false, transformFunction: null }, searchLabelKey: { classPropertyName: "searchLabelKey", publicName: "searchLabelKey", isSignal: true, isRequired: false, transformFunction: null }, showKbdHint: { classPropertyName: "showKbdHint", publicName: "showKbdHint", isSignal: true, isRequired: false, transformFunction: null }, hideClear: { classPropertyName: "hideClear", publicName: "hideClear", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", search: "search", clear: "clear" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <div class="screen-search">
             <div class="smart-bar">
                 <label class="search">
                     <input
+                        #searchInput
                         type="text"
                         [placeholder]="(placeholderKey() ? (placeholderKey() | translate) : placeholder())"
                         [ngModel]="searchText()"
                         (ngModelChange)="searchText.set($event)"
                         (keydown.enter)="onSubmit()"
                     />
-                    @if (showKbdHint()) {
-                        <span class="kbd">⌘K</span>
+                    @if (showKbdHint() && kbdLabel()) {
+                        <span class="kbd">{{ kbdLabel() }}</span>
                     }
                 </label>
                 <div class="actions">
@@ -9995,14 +10063,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             <div class="smart-bar">
                 <label class="search">
                     <input
+                        #searchInput
                         type="text"
                         [placeholder]="(placeholderKey() ? (placeholderKey() | translate) : placeholder())"
                         [ngModel]="searchText()"
                         (ngModelChange)="searchText.set($event)"
                         (keydown.enter)="onSubmit()"
                     />
-                    @if (showKbdHint()) {
-                        <span class="kbd">⌘K</span>
+                    @if (showKbdHint() && kbdLabel()) {
+                        <span class="kbd">{{ kbdLabel() }}</span>
                     }
                 </label>
                 <div class="actions">
@@ -10038,7 +10107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { 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 }] }], search: [{ type: i0.Output, args: ["search"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
+        }], 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"] }] } });
 
 /**
  * Comptoir filter pill — value-bearing button used in the smart-bar's