@embedpdf/angular 3.0.0-next.14 → 3.0.0-next.16

package/dist/fesm2022/embedpdf-angular-toolbar.mjs

@@ -0,0 +1,1123 @@
+import { groupMenuView, normalizeBar, layoutToolbar } from '@embedpdf/core-ui';
+export { DEFAULT_IMPORTANCE, PINNED, custom, group, item } from '@embedpdf/core-ui';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, output, ChangeDetectionStrategy, Component, computed, viewChild, ElementRef, afterRenderEffect, untracked, signal, InjectionToken, PLATFORM_ID, effect, contentChild, contentChildren, forwardRef } from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import { injectKernelHost, CapabilityBinding, injectDocumentScope } from '@embedpdf/angular/runtime';
+import { EpdfCommands } from '@embedpdf/angular/commands';
+import { unregisteredCommand } from '@embedpdf/plugin-commands/contract';
+import { CommandsToken } from '@embedpdf/plugin-commands/contract/host';
+import { paintDefault, focusablesIn, observeOutsidePress, attachMenuKeys, observeLength, createToolbarLengths, toolbarMeasureKey, observeContentLength, attachToolbarFocus } from '@embedpdf/web';
+
+/**
+ * The parts of `<epdf-toolbar>` you draw, each an `<ng-template>` inside its tags, typed so
+ * `let-` gives what the part needs:
+ *
+ *   <ng-template epdfToolbarCommand let-command let-variant="variant" let-run="run">
+ *   <ng-template epdfToolbarCustom="page-number" let-variant>
+ *   <ng-template epdfToolbarCollapsed let-view>          a folded group
+ *   <ng-template epdfToolbarGroupTrigger let-view>       the button behind which a group sheds items
+ *   <ng-template epdfToolbarSeparator>                   the line between groups
+ *   <ng-template epdfToolbarOverflowTrigger let-open let-toggle="toggle">   the "More" button
+ *   <ng-template epdfToolbarOverflowMenu let-view>       the "More" menu
+ *
+ * A part you leave out has a plain default. The names carry `Toolbar` because `epdfCommand`
+ * is the directive for a button of your own.
+ */
+// ── the marker directives ───────────────────────────────────────────────────
+/** A command's button. Without it: a plain `<button>` with the command's label. */
+class EpdfToolbarCommandTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarCommandTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfToolbarCommandTemplate, isStandalone: true, selector: "ng-template[epdfToolbarCommand]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarCommandTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfToolbarCommand]' }]
+        }] });
+/**
+ * An item of your own, by the name `custom(name, command)` gave it in the bar. Without one, the
+ * item is a `<slot name>`: inside a shadow root your element's children of that `slot` go
+ * there; elsewhere it shows its command's button. The first element of the item that takes
+ * focus is its stop in the toolbar's arrow-key order.
+ */
+class EpdfToolbarCustomTemplate {
+    /** The item's name in the bar. */
+    slot = input.required(...(ngDevMode ? [{ debugName: "slot", alias: 'epdfToolbarCustom' }] : [{ alias: 'epdfToolbarCustom' }]));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarCustomTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfToolbarCustomTemplate, isStandalone: true, selector: "ng-template[epdfToolbarCustom]", inputs: { slot: { classPropertyName: "slot", publicName: "epdfToolbarCustom", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarCustomTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfToolbarCustom]' }]
+        }] });
+/** A folded group. Without it: a `<select>` for `collapse: 'select'`, a menu button for `'menu'`. */
+class EpdfToolbarCollapsedTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarCollapsedTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfToolbarCollapsedTemplate, isStandalone: true, selector: "ng-template[epdfToolbarCollapsed]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarCollapsedTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfToolbarCollapsed]' }]
+        }] });
+/**
+ * The button of a group that sheds items, and its menu: the template keeps its own open state.
+ * Without it: a chevron opening a menu of the shed items.
+ */
+class EpdfToolbarGroupTriggerTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarGroupTriggerTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfToolbarGroupTriggerTemplate, isStandalone: true, selector: "ng-template[epdfToolbarGroupTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarGroupTriggerTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfToolbarGroupTrigger]' }]
+        }] });
+/**
+ * The line between two groups. Without it: a 1px line across the toolbar. Tell the toolbar its
+ * thickness with `[separatorWidth]` when yours is thicker.
+ */
+class EpdfToolbarSeparatorTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarSeparatorTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfToolbarSeparatorTemplate, isStandalone: true, selector: "ng-template[epdfToolbarSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarSeparatorTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfToolbarSeparator]' }]
+        }] });
+/** The "More" button. Without it: a plain ⋯ button. */
+class EpdfToolbarOverflowTriggerTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarOverflowTriggerTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfToolbarOverflowTriggerTemplate, isStandalone: true, selector: "ng-template[epdfToolbarOverflowTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarOverflowTriggerTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfToolbarOverflowTrigger]' }]
+        }] });
+/** The "More" menu, under its button (beside it, standing up). Without it: a plain popover. */
+class EpdfToolbarOverflowMenuTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarOverflowMenuTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfToolbarOverflowMenuTemplate, isStandalone: true, selector: "ng-template[epdfToolbarOverflowMenu]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarOverflowMenuTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfToolbarOverflowMenu]' }]
+        }] });
+
+/**
+ * The toolbar's plain parts, for every part the app leaves out: the "More" button, a popover
+ * menu, a folded group and a group's shed-items button. They're meant to be replaced, so their
+ * colors come from the `--epdf-toolbar-*` CSS variables only. The menu takes the menu keys
+ * (`attachMenuKeys`) while it's open.
+ */
+const SURFACE = paintDefault('toolbar-surface');
+const BORDER = paintDefault('toolbar-border');
+const ACTIVE = paintDefault('toolbar-active');
+/** The colors, for the toolbar's own default command button and separator. */
+const TOOLBAR_PAINT = { surface: SURFACE, border: BORDER, active: ACTIVE };
+/** Where a menu opens: under a horizontal toolbar's button, beside a vertical one's. */
+const placementOf = (orientation) => orientation === 'vertical'
+    ? 'top: 0; inset-inline-start: 100%;'
+    : 'top: 100%; inset-inline-end: 0;';
+/** The plain "More" button: ⋯, pressed while its menu is open. */
+class EpdfToolbarMoreButton {
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    toggle = output();
+    active = ACTIVE;
+    style = 'display: inline-flex; align-items: center; padding: 4px 8px; color: inherit; ' +
+        `font: inherit; border: 1px solid ${BORDER}; border-radius: 4px; cursor: pointer;`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarMoreButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: EpdfToolbarMoreButton, isStandalone: true, selector: "epdf-toolbar-more-button", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    <button
+      type="button"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="open()"
+      title="More"
+      [style]="style"
+      [style.background]="open() ? active : 'transparent'"
+      (click)="toggle.emit()"
+    >
+      ⋯
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarMoreButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-toolbar-more-button',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents;' },
+                    template: `
+    <button
+      type="button"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="open()"
+      title="More"
+      [style]="style"
+      [style.background]="open() ? active : 'transparent'"
+      (click)="toggle.emit()"
+    >
+      ⋯
+    </button>
+  `,
+                }]
+        }] });
+/**
+ * The plain popover menu, under its button in a horizontal toolbar and beside it in a vertical
+ * one: a press outside closes it, a row runs its command, and while it's open it takes the menu
+ * keys: focus on its first row, the arrows, typeahead, Enter, and Escape back to its button.
+ */
+class EpdfToolbarMenu {
+    view = input.required(...(ngDevMode ? [{ debugName: "view" }] : []));
+    /** Which way the toolbar runs: the menu opens under its button, or beside a vertical one's. */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /**
+     * Whether it's open, apart from the view: the toolbar hands a new view on every change, and
+     * attaching the keys again would put focus back on the first row.
+     */
+    isOpen = computed(() => this.view().isOpen, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    menu = viewChild('menu', ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    constructor() {
+        const host = inject(ElementRef).nativeElement;
+        afterRenderEffect((onCleanup) => {
+            const menu = this.menu()?.nativeElement;
+            if (!this.isOpen() || !menu)
+                return;
+            onCleanup(untracked(() => this.attach(host, menu)));
+        });
+    }
+    /** Close on a press outside, and take the menu keys; returns the detach. */
+    attach(host, menu) {
+        // This element is `display: contents`; its parent holds the menu's button too, so a press
+        // on the button is the button's own toggle.
+        const container = host.parentElement ?? host;
+        const trigger = focusablesIn(container).find((candidate) => !menu.contains(candidate)) ?? null;
+        const close = () => untracked(this.view).close();
+        const stopOutside = observeOutsidePress(container, close);
+        const detachKeys = attachMenuKeys(menu, { trigger, close });
+        return () => {
+            stopOutside();
+            detachKeys();
+        };
+    }
+    menuStyle = computed(() => `position: absolute; ${placementOf(this.orientation())} z-index: 41; min-width: 200px; ` +
+        `padding: 4px; background: ${SURFACE}; border: 1px solid ${BORDER}; border-radius: 6px; ` +
+        'box-shadow: 0 4px 16px rgba(0,0,0,0.15);', ...(ngDevMode ? [{ debugName: "menuStyle" }] : []));
+    dividerStyle = `height: 1px; background: ${BORDER}; margin: 4px 0;`;
+    rowStyle = 'display: flex; width: 100%; align-items: center; justify-content: space-between; ' +
+        'gap: 16px; padding: 6px 8px; border: none; color: inherit; font: inherit; ' +
+        'background: transparent; white-space: nowrap;';
+    /** Run the row's command; a row that opens a submenu keeps the menu open. */
+    choose(row) {
+        const view = this.view();
+        view.execute(row.command);
+        if (row.type !== 'submenu')
+            view.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfToolbarMenu, isStandalone: true, selector: "epdf-toolbar-menu", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (isOpen()) {
+      <div #menu role="menu" [style]="menuStyle()">
+        @for (section of view().sections; track $index; let first = $first) {
+          @if (!first) {
+            <div [style]="dividerStyle"></div>
+          }
+          @for (row of section.rows; track row.command) {
+            @if (view().resolve(row.command); as command) {
+              <button
+                type="button"
+                [attr.role]="section.role === 'radio' ? 'menuitemradio' : 'menuitem'"
+                [attr.aria-checked]="section.role === 'radio' ? command.active : null"
+                [disabled]="!command.enabled"
+                tabindex="-1"
+                [style]="rowStyle"
+                [style.cursor]="command.enabled ? 'pointer' : 'default'"
+                [style.opacity]="command.enabled ? 1 : 0.4"
+                (click)="choose(row)"
+              >
+                <span
+                  >{{ command.active && section.role === 'radio' ? '• ' : ''
+                  }}{{ command.label }}</span
+                >
+                @if (row.type === 'submenu') {
+                  <span>▸</span>
+                }
+              </button>
+            }
+          }
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-toolbar-menu',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents;' },
+                    template: `
+    @if (isOpen()) {
+      <div #menu role="menu" [style]="menuStyle()">
+        @for (section of view().sections; track $index; let first = $first) {
+          @if (!first) {
+            <div [style]="dividerStyle"></div>
+          }
+          @for (row of section.rows; track row.command) {
+            @if (view().resolve(row.command); as command) {
+              <button
+                type="button"
+                [attr.role]="section.role === 'radio' ? 'menuitemradio' : 'menuitem'"
+                [attr.aria-checked]="section.role === 'radio' ? command.active : null"
+                [disabled]="!command.enabled"
+                tabindex="-1"
+                [style]="rowStyle"
+                [style.cursor]="command.enabled ? 'pointer' : 'default'"
+                [style.opacity]="command.enabled ? 1 : 0.4"
+                (click)="choose(row)"
+              >
+                <span
+                  >{{ command.active && section.role === 'radio' ? '• ' : ''
+                  }}{{ command.label }}</span
+                >
+                @if (row.type === 'submenu') {
+                  <span>▸</span>
+                }
+              </button>
+            }
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+/** The plain folded group: a `<select>` for `collapse: 'select'`, a ⋯ menu button otherwise. */
+class EpdfToolbarCollapsed {
+    view = input.required(...(ngDevMode ? [{ debugName: "view" }] : []));
+    /** Which way the toolbar runs: where the menu opens. */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    activeId = computed(() => this.view().commands.find((command) => command.active)?.id ?? null, ...(ngDevMode ? [{ debugName: "activeId" }] : []));
+    menu = computed(() => groupMenuView(this.view(), this.isOpen(), () => this.isOpen.set(false)), ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    selectStyle = `padding: 4px 6px; font: inherit; border-radius: 4px; border: 1px solid ${BORDER}; ` +
+        `background: ${SURFACE};`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarCollapsed, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfToolbarCollapsed, isStandalone: true, selector: "epdf-toolbar-collapsed", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    @if (view().collapse === 'select') {
+      <select #select [style]="selectStyle" (change)="view().execute(select.value)">
+        @if (!activeId()) {
+          <option value="" selected disabled hidden></option>
+        }
+        @for (command of view().commands; track command.id) {
+          <option
+            [value]="command.id"
+            [disabled]="!command.enabled"
+            [selected]="command.id === activeId()"
+          >
+            {{ command.label }}
+          </option>
+        }
+      </select>
+    } @else {
+      <span style="position: relative; display: inline-flex">
+        <epdf-toolbar-more-button [open]="isOpen()" (toggle)="isOpen.set(!isOpen())" />
+        <epdf-toolbar-menu [view]="menu()" [orientation]="orientation()" />
+      </span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfToolbarMoreButton, selector: "epdf-toolbar-more-button", inputs: ["open"], outputs: ["toggle"] }, { kind: "component", type: EpdfToolbarMenu, selector: "epdf-toolbar-menu", inputs: ["view", "orientation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarCollapsed, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-toolbar-collapsed',
+                    imports: [EpdfToolbarMoreButton, EpdfToolbarMenu],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents;' },
+                    template: `
+    @if (view().collapse === 'select') {
+      <select #select [style]="selectStyle" (change)="view().execute(select.value)">
+        @if (!activeId()) {
+          <option value="" selected disabled hidden></option>
+        }
+        @for (command of view().commands; track command.id) {
+          <option
+            [value]="command.id"
+            [disabled]="!command.enabled"
+            [selected]="command.id === activeId()"
+          >
+            {{ command.label }}
+          </option>
+        }
+      </select>
+    } @else {
+      <span style="position: relative; display: inline-flex">
+        <epdf-toolbar-more-button [open]="isOpen()" (toggle)="isOpen.set(!isOpen())" />
+        <epdf-toolbar-menu [view]="menu()" [orientation]="orientation()" />
+      </span>
+    }
+  `,
+                }]
+        }] });
+/** The plain button of a group that shed items: a chevron opening a menu of them. */
+class EpdfToolbarGroupTrigger {
+    view = input.required(...(ngDevMode ? [{ debugName: "view" }] : []));
+    /** Which way the toolbar runs: where the menu opens. */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** A hint that the active item is in here. */
+    someActive = computed(() => this.view().commands.some((command) => command.active), ...(ngDevMode ? [{ debugName: "someActive" }] : []));
+    menu = computed(() => groupMenuView(this.view(), this.isOpen(), () => this.isOpen.set(false)), ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    active = ACTIVE;
+    buttonStyle = 'display: inline-flex; align-items: center; padding: 4px 6px; color: inherit; ' +
+        `font: inherit; border: 1px solid ${BORDER}; border-radius: 4px; cursor: pointer;`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarGroupTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: EpdfToolbarGroupTrigger, isStandalone: true, selector: "epdf-toolbar-group-trigger", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    <span style="position: relative; display: inline-flex">
+      <button
+        type="button"
+        aria-haspopup="menu"
+        [attr.aria-expanded]="isOpen()"
+        title="More"
+        [style]="buttonStyle"
+        [style.background]="isOpen() || someActive() ? active : 'transparent'"
+        (click)="isOpen.set(!isOpen())"
+      >
+        ▾
+      </button>
+      <epdf-toolbar-menu [view]="menu()" [orientation]="orientation()" />
+    </span>
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfToolbarMenu, selector: "epdf-toolbar-menu", inputs: ["view", "orientation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarGroupTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-toolbar-group-trigger',
+                    imports: [EpdfToolbarMenu],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents;' },
+                    template: `
+    <span style="position: relative; display: inline-flex">
+      <button
+        type="button"
+        aria-haspopup="menu"
+        [attr.aria-expanded]="isOpen()"
+        title="More"
+        [style]="buttonStyle"
+        [style.background]="isOpen() || someActive() ? active : 'transparent'"
+        (click)="isOpen.set(!isOpen())"
+      >
+        ▾
+      </button>
+      <epdf-toolbar-menu [view]="menu()" [orientation]="orientation()" />
+    </span>
+  `,
+                }]
+        }] });
+
+/**
+ * `<epdf-toolbar [bar]>`: a toolbar that measures what fits and makes room, and lets you draw
+ * every part.
+ *
+ *   1. a hidden measurement layer draws every item in every variant (plus folded groups and the
+ *      "More" button), each watched by `@embedpdf/web`'s `observeLength` along the toolbar
+ *      (widths, or heights when it is vertical), so a new language, a font loading, browser zoom
+ *      and your CSS all re-measure on their own; the lengths become fit metrics
+ *      (`createToolbarLengths`);
+ *   2. core-ui's `solve()` gives each item a variant, a folded group or the "More" menu, and
+ *      `layoutToolbar` turns that fit into the parts to draw;
+ *   3. the live row draws them; the "More" menu is derived (`projectOverflow`) from what
+ *      didn't fit.
+ *
+ * The toolbar is one tab stop with arrow keys along it (`attachToolbarFocus`), and its default
+ * menus take the menu keys (`attachMenuKeys`). Every part is an `<ng-template>` you may give
+ * (`templates.ts`), with a plain default (`defaults.ts`): the app owns the pixels, the toolbar
+ * owns the fitting and the keyboard. The items are commands, read live, so a button follows its
+ * command's state with no code in the toolbar.
+ */
+/** What the toolbar draws while there is no commands plugin: nothing. */
+const EMPTY_LAYOUT = {
+    sections: [
+        { name: 'start', groups: [] },
+        { name: 'center', groups: [] },
+        { name: 'end', groups: [] },
+    ],
+    measured: [],
+    hasOverflow: false,
+    overflow: [],
+};
+const noop = () => { };
+const TOOLBAR_LENGTHS = new InjectionToken('TOOLBAR_LENGTHS');
+/** Whether `element` draws anything: an element, or some text, among its children. */
+const drawsSomething = (element) => [...element.childNodes].some((node) => node.nodeType === Node.ELEMENT_NODE ||
+    (node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())));
+/**
+ * Reports its element's border-box length along the toolbar (its width, or its height in a
+ * vertical one) to the toolbar, under its key, now and on resize. With `ifDrawn`, only while the
+ * element draws something: an item of your own whose template draws nothing in the measurement
+ * layer reports its length itself, with `measure`, from where it renders.
+ */
+class EpdfToolbarLength {
+    key = input.required(...(ngDevMode ? [{ debugName: "key", alias: 'epdfToolbarLength' }] : [{ alias: 'epdfToolbarLength' }]));
+    ifDrawn = input(false, ...(ngDevMode ? [{ debugName: "ifDrawn" }] : []));
+    constructor() {
+        const element = inject(ElementRef).nativeElement;
+        const sink = inject(TOOLBAR_LENGTHS);
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        effect((onCleanup) => {
+            const key = this.key();
+            const orientation = sink.orientation();
+            onCleanup(untracked(() => observeLength(element, orientation, (length) => {
+                if (this.ifDrawn() && !drawsSomething(element))
+                    return;
+                sink.reportLength(key, length);
+            })));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarLength, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfToolbarLength, isStandalone: true, selector: "[epdfToolbarLength]", inputs: { key: { classPropertyName: "key", publicName: "epdfToolbarLength", isSignal: true, isRequired: true, transformFunction: null }, ifDrawn: { classPropertyName: "ifDrawn", publicName: "ifDrawn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbarLength, decorators: [{
+            type: Directive,
+            args: [{ selector: '[epdfToolbarLength]' }]
+        }], ctorParameters: () => [] });
+// ── the toolbar ──────────────────────────────────────────────────────────────
+/**
+ * A toolbar that fits itself to its width, or its height with `orientation="vertical"`: items
+ * get smaller, groups fold, and what's left over goes into a "More" menu, the least important
+ * first. `[gap]` (8) is the space between items, `[separatorWidth]` (1) your
+ * separator's thickness; the element is the toolbar (`role="toolbar"`), so a `class`, `style`
+ * or `aria-label` on it is the toolbar's. It is one tab stop, with arrow keys between its
+ * items. Draw the parts with the templates in `templates.ts`.
+ *
+ *   <epdf-toolbar [bar]="bar">
+ *     <ng-template epdfToolbarCommand let-command let-variant="variant" let-run="run">
+ *       <button (click)="run()" [disabled]="!command.enabled">{{ command.label }}</button>
+ *     </ng-template>
+ *   </epdf-toolbar>
+ */
+class EpdfToolbar {
+    /** What the toolbar holds: `{ id, sections: { start, center, end } }` of groups and items. */
+    bar = input.required(...(ngDevMode ? [{ debugName: "bar" }] : []));
+    /**
+     * Which way the toolbar runs. A vertical toolbar fits the height it's given, so give it one;
+     * it stacks its sections top, middle and bottom, and draws every command at `'icon'`, with
+     * the label for a tooltip.
+     */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /** Pixels between neighbouring items; the solver counts the same number. */
+    gap = input(8, ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    /**
+     * The thickness of the separator you draw: its width across a horizontal toolbar, its height
+     * in a vertical one.
+     */
+    separatorWidth = input(1, ...(ngDevMode ? [{ debugName: "separatorWidth" }] : []));
+    // ── the app's templates ─────────────────────────────────────────────────────
+    commandTemplate = contentChild(EpdfToolbarCommandTemplate, ...(ngDevMode ? [{ debugName: "commandTemplate" }] : []));
+    customTemplates = contentChildren(EpdfToolbarCustomTemplate, ...(ngDevMode ? [{ debugName: "customTemplates" }] : []));
+    collapsedTemplate = contentChild(EpdfToolbarCollapsedTemplate, ...(ngDevMode ? [{ debugName: "collapsedTemplate" }] : []));
+    groupTriggerTemplate = contentChild(EpdfToolbarGroupTriggerTemplate, ...(ngDevMode ? [{ debugName: "groupTriggerTemplate" }] : []));
+    separatorTemplate = contentChild(EpdfToolbarSeparatorTemplate, ...(ngDevMode ? [{ debugName: "separatorTemplate" }] : []));
+    overflowTriggerTemplate = contentChild(EpdfToolbarOverflowTriggerTemplate, ...(ngDevMode ? [{ debugName: "overflowTriggerTemplate" }] : []));
+    overflowMenuTemplate = contentChild(EpdfToolbarOverflowMenuTemplate, ...(ngDevMode ? [{ debugName: "overflowMenuTemplate" }] : []));
+    // ── the commands ────────────────────────────────────────────────────────────
+    host = injectKernelHost('<epdf-toolbar>');
+    // Names withCommands() in the error when the viewer has no commands plugin, and runs them.
+    commands = inject(EpdfCommands);
+    /** The host lens, for this part of the template's document: resolves and finds menus. */
+    registry = new CapabilityBinding(this.host, () => CommandsToken, injectDocumentScope()).capability;
+    lengths = createToolbarLengths();
+    /** Goes up whenever a measured length changed by more than half a pixel. */
+    measureVersion = signal(0, ...(ngDevMode ? [{ debugName: "measureVersion" }] : []));
+    /** The room along the toolbar: its width, or its height when vertical. */
+    containerLength = signal(0, ...(ngDevMode ? [{ debugName: "containerLength" }] : []));
+    overflowOpen = signal(false, ...(ngDevMode ? [{ debugName: "overflowOpen" }] : []));
+    /** The arrow keys along the toolbar, while it's in the page. */
+    roving = null;
+    vertical = computed(() => this.orientation() === 'vertical', ...(ngDevMode ? [{ debugName: "vertical" }] : []));
+    normalized = computed(() => normalizeBar(this.bar()), ...(ngDevMode ? [{ debugName: "normalized" }] : []));
+    /**
+     * What to draw: the bar with what's visible now, fitted and turned into parts. A command's
+     * state is derived when it's read, so this reads again after every change of the viewer; the
+     * toolbar is small, and a read of every item per change is the simple, correct baseline.
+     */
+    layout = this.host.read(() => {
+        this.measureVersion();
+        const registry = this.registry();
+        if (!registry)
+            return EMPTY_LAYOUT;
+        return layoutToolbar({
+            bar: this.normalized(),
+            resolve: (id) => registry.resolveCommand(id),
+            unregistered: unregisteredCommand,
+            execute: (id) => this.execute(id),
+            menuTarget: (id) => registry.getMenuTarget(id),
+            metrics: this.lengths.metrics(this.orientation(), this.gap(), this.separatorWidth()),
+            measureKey: toolbarMeasureKey,
+            containerLength: this.containerLength(),
+            orientation: this.orientation(),
+        });
+    }, () => EMPTY_LAYOUT);
+    hasOverflow = computed(() => this.layout().hasOverflow, ...(ngDevMode ? [{ debugName: "hasOverflow" }] : []));
+    row = computed(() => {
+        const [start, center, end] = this.layout().sections;
+        return {
+            start: this.liveEntries(start),
+            center: this.liveEntries(center),
+            end: this.liveEntries(end),
+        };
+    }, ...(ngDevMode ? [{ debugName: "row" }] : []));
+    /** Every item in every variant, each folded group and each shed group's button. */
+    measured = computed(() => this.layout().measured.flatMap((part) => {
+        const entry = this.entryOf(part, 'measure');
+        return entry ? [{ key: part.measureKey, entry }] : [];
+    }), ...(ngDevMode ? [{ debugName: "measured" }] : []));
+    overflowTrigger = computed(() => ({
+        $implicit: this.overflowOpen(),
+        toggle: () => this.overflowOpen.update((open) => !open),
+    }), ...(ngDevMode ? [{ debugName: "overflowTrigger" }] : []));
+    closedTrigger = {
+        $implicit: false,
+        toggle: noop,
+    };
+    overflowMenu = computed(() => {
+        return {
+            $implicit: {
+                sections: this.layout().overflow,
+                isOpen: this.overflowOpen(),
+                close: () => this.overflowOpen.set(false),
+                resolve: (id) => this.resolve(id),
+                execute: (id) => this.execute(id),
+            },
+        };
+    }, ...(ngDevMode ? [{ debugName: "overflowMenu" }] : []));
+    overflowTriggerKey = toolbarMeasureKey.overflowTrigger;
+    paint = TOOLBAR_PAINT;
+    sectionStyle = computed(() => `display: flex; flex-direction: ${this.vertical() ? 'column' : 'row'}; ` +
+        'align-items: center; flex: 0 0 auto;', ...(ngDevMode ? [{ debugName: "sectionStyle" }] : []));
+    centerStyle = computed(() => this.sectionStyle() +
+        (this.vertical()
+            ? ' margin-top: auto; margin-bottom: auto;'
+            : ' margin-left: auto; margin-right: auto;'), ...(ngDevMode ? [{ debugName: "centerStyle" }] : []));
+    /** A 1px line across the toolbar: upright in a horizontal one, flat in a vertical one. */
+    separatorStyle = computed(() => `${this.vertical() ? 'height' : 'width'}: 1px; align-self: stretch; ` +
+        'background: currentColor; opacity: 0.2;', ...(ngDevMode ? [{ debugName: "separatorStyle" }] : []));
+    /**
+     * A row for a horizontal toolbar, a column for a vertical one, and no height either way, so it
+     * never adds to the page. A column keeps each item at its own width, so no text wraps and
+     * changes the heights it reports.
+     */
+    measureLayerStyle = computed(() => 'position: absolute; left: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; ' +
+        'pointer-events: none; display: flex; white-space: nowrap;' +
+        (this.vertical() ? ' flex-direction: column; align-items: flex-start;' : ''), ...(ngDevMode ? [{ debugName: "measureLayerStyle" }] : []));
+    commandStyle = 'display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; ' +
+        `white-space: nowrap; color: inherit; font: inherit; border: 1px solid ${TOOLBAR_PAINT.border}; ` +
+        'border-radius: 4px;';
+    constructor() {
+        // The "More" menu closes when everything fits again.
+        effect(() => {
+            if (!this.hasOverflow())
+                untracked(() => this.overflowOpen.set(false));
+        });
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        const element = inject(ElementRef).nativeElement;
+        // The room the toolbar fills, along the way it runs.
+        effect((onCleanup) => {
+            const orientation = this.orientation();
+            onCleanup(untracked(() => observeContentLength(element, orientation, (length) => this.containerLength.set(length))));
+        });
+        // The keyboard: one tab stop, and arrow keys along the toolbar.
+        afterRenderEffect((onCleanup) => {
+            const orientation = this.orientation();
+            const focus = untracked(() => attachToolbarFocus(element, orientation));
+            this.roving = focus;
+            onCleanup(() => {
+                focus.detach();
+                this.roving = null;
+            });
+        });
+        // Any draw can add, remove or disable an item, so the tab stop is checked after each one.
+        afterRenderEffect(() => {
+            this.row();
+            this.hasOverflow();
+            this.overflowOpen();
+            untracked(() => this.roving?.refresh());
+        });
+    }
+    /** A measured element's length along the toolbar; a change solves again. */
+    reportLength(key, length) {
+        if (this.lengths.report(untracked(this.orientation), key, length)) {
+            this.measureVersion.update((version) => version + 1);
+        }
+    }
+    // ── building the entries ────────────────────────────────────────────────────
+    resolve(id) {
+        return untracked(this.registry)?.resolveCommand(id) ?? null;
+    }
+    execute(id) {
+        // A command whose `run` throws reports it through the commands' `executionFailed$`.
+        this.commands.execute(id).catch(noop);
+    }
+    customTemplateFor(slot) {
+        return this.customTemplates().find((template) => template.slot() === slot);
+    }
+    /** A section's groups, with a separator before every group but the first. */
+    liveEntries(section) {
+        const entries = [];
+        section?.groups.forEach((group, index) => {
+            if (index > 0)
+                entries.push({ kind: 'separator', key: `separator:${group.id}` });
+            for (const part of group.parts) {
+                const entry = this.entryOf(part, 'live');
+                if (entry)
+                    entries.push(entry);
+            }
+        });
+        return entries;
+    }
+    /** A part with its template's context; null for an item of your own with no template, when measuring. */
+    entryOf(part, layer) {
+        const key = part.measureKey;
+        switch (part.kind) {
+            case 'command':
+                return {
+                    kind: 'command',
+                    key,
+                    context: { $implicit: part.command, variant: part.variant, run: part.run },
+                };
+            case 'custom': {
+                const custom = this.customTemplateFor(part.name);
+                if (custom) {
+                    return {
+                        kind: 'custom',
+                        key,
+                        template: custom.template,
+                        context: {
+                            $implicit: part.variant,
+                            layer,
+                            measure: (length) => this.reportLength(key, length),
+                        },
+                    };
+                }
+                // An item of your own with no template is measured where it renders: only the first
+                // `<slot>` of a name gets the projected content, so it can't be drawn here too.
+                if (layer === 'measure')
+                    return null;
+                return {
+                    kind: 'socket',
+                    key,
+                    slot: part.name,
+                    context: part.terminal && {
+                        $implicit: part.terminal,
+                        variant: 'icon',
+                        run: part.runTerminal,
+                    },
+                };
+            }
+            case 'collapsed':
+                return { kind: 'collapsed', key, context: { $implicit: part.view } };
+            case 'disclosure':
+                return { kind: 'trigger', key, context: { $implicit: part.view } };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfToolbar, isStandalone: true, selector: "epdf-toolbar", inputs: { bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, separatorWidth: { classPropertyName: "separatorWidth", publicName: "separatorWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.aria-orientation": "orientation()", "style.flex-direction": "orientation() === 'vertical' ? 'column' : 'row'" }, styleAttribute: "position: relative; display: flex; align-items: center;" }, providers: [{ provide: TOOLBAR_LENGTHS, useExisting: forwardRef(() => EpdfToolbar) }], queries: [{ propertyName: "commandTemplate", first: true, predicate: EpdfToolbarCommandTemplate, descendants: true, isSignal: true }, { propertyName: "customTemplates", predicate: EpdfToolbarCustomTemplate, isSignal: true }, { propertyName: "collapsedTemplate", first: true, predicate: EpdfToolbarCollapsedTemplate, descendants: true, isSignal: true }, { propertyName: "groupTriggerTemplate", first: true, predicate: EpdfToolbarGroupTriggerTemplate, descendants: true, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: EpdfToolbarSeparatorTemplate, descendants: true, isSignal: true }, { propertyName: "overflowTriggerTemplate", first: true, predicate: EpdfToolbarOverflowTriggerTemplate, descendants: true, isSignal: true }, { propertyName: "overflowMenuTemplate", first: true, predicate: EpdfToolbarOverflowMenuTemplate, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!--
+      The sections run along the toolbar: the center one has auto margins, so it stays centered
+      in the space the others leave and gives way before anything overlaps. The sections never
+      grow or shrink: what fits is the solver's decision, so the row's least length is exactly
+      what it counted.
+    -->
+    <div [style]="sectionStyle()" [style.gap.px]="gap()">
+      @for (entry of row().start; track entry.key) {
+        <ng-container *ngTemplateOutlet="liveEntry; context: { $implicit: entry }" />
+      }
+    </div>
+    <div [style]="centerStyle()" [style.gap.px]="gap()">
+      @for (entry of row().center; track entry.key) {
+        <ng-container *ngTemplateOutlet="liveEntry; context: { $implicit: entry }" />
+      }
+    </div>
+    <div [style]="sectionStyle()" [style.gap.px]="gap()">
+      @for (entry of row().end; track entry.key) {
+        <ng-container *ngTemplateOutlet="liveEntry; context: { $implicit: entry }" />
+      }
+      @if (hasOverflow()) {
+        <span data-epdf-toolbar-item style="position: relative; display: inline-flex">
+          <ng-container
+            *ngTemplateOutlet="
+              overflowTriggerTemplate()?.template ?? defaultOverflowTrigger;
+              context: overflowTrigger()
+            "
+          />
+          <ng-container
+            *ngTemplateOutlet="
+              overflowMenuTemplate()?.template ?? defaultOverflowMenu;
+              context: overflowMenu()
+            "
+          />
+        </span>
+      }
+    </div>
+
+    <!--
+      The measurement layer: every item in every variant, every folded group and the "More"
+      button, hidden, inert and observed. Text reflow (a language, fonts, zoom) re-measures by
+      itself. An item of your own whose template draws nothing here is measured where it renders.
+    -->
+    <div aria-hidden="true" inert [style]="measureLayerStyle()">
+      @for (item of measured(); track item.key) {
+        <span
+          [epdfToolbarLength]="item.key"
+          [ifDrawn]="item.entry.kind === 'custom'"
+          style="display: inline-flex; flex-shrink: 0"
+        >
+          <ng-container *ngTemplateOutlet="drawn; context: { $implicit: item.entry }" />
+        </span>
+      }
+      <span [epdfToolbarLength]="overflowTriggerKey" style="display: inline-flex; flex-shrink: 0">
+        <ng-container
+          *ngTemplateOutlet="
+            overflowTriggerTemplate()?.template ?? defaultOverflowTrigger;
+            context: closedTrigger
+          "
+        />
+      </span>
+    </div>
+
+    <!--
+      An item of the live row, in the element that marks it (TOOLBAR_ITEM_ATTRIBUTE in
+      @embedpdf/web): its first element that takes focus is the item's stop in the arrow-key
+      order. The element adds no box, so the item lays out as the section's own child.
+    -->
+    <ng-template #liveEntry let-entry>
+      @if (entry.kind === 'separator') {
+        <ng-container *ngTemplateOutlet="drawn; context: { $implicit: entry }" />
+      } @else {
+        <span data-epdf-toolbar-item style="display: contents">
+          <ng-container *ngTemplateOutlet="drawn; context: { $implicit: entry }" />
+        </span>
+      }
+    </ng-template>
+
+    <ng-template #drawn let-entry>
+      @switch (entry.kind) {
+        @case ('command') {
+          <ng-container
+            *ngTemplateOutlet="
+              commandTemplate()?.template ?? defaultCommand;
+              context: entry.context
+            "
+          />
+        }
+        @case ('custom') {
+          <ng-container *ngTemplateOutlet="entry.template; context: entry.context" />
+        }
+        @case ('socket') {
+          <!-- Inside a shadow root, the host's children for this slot are drawn here. -->
+          <slot
+            [attr.name]="entry.slot"
+            [epdfToolbarLength]="entry.key"
+            style="display: inline-flex; align-items: center; flex-shrink: 0"
+          >
+            @if (entry.context) {
+              <ng-container
+                *ngTemplateOutlet="
+                  commandTemplate()?.template ?? defaultCommand;
+                  context: entry.context
+                "
+              />
+            }
+          </slot>
+        }
+        @case ('collapsed') {
+          <ng-container
+            *ngTemplateOutlet="
+              collapsedTemplate()?.template ?? defaultCollapsed;
+              context: entry.context
+            "
+          />
+        }
+        @case ('trigger') {
+          <ng-container
+            *ngTemplateOutlet="
+              groupTriggerTemplate()?.template ?? defaultGroupTrigger;
+              context: entry.context
+            "
+          />
+        }
+        @case ('separator') {
+          <ng-container *ngTemplateOutlet="separatorTemplate()?.template ?? defaultSeparator" />
+        }
+      }
+    </ng-template>
+
+    <!-- The defaults: plain, and meant to be replaced. -->
+    <ng-template epdfToolbarCommand #defaultCommand let-command let-run="run">
+      <button
+        type="button"
+        [disabled]="!command.enabled"
+        [attr.aria-pressed]="command.active || null"
+        [attr.aria-haspopup]="command.menu ? 'menu' : null"
+        [title]="command.label"
+        [style]="commandStyle"
+        [style.background]="command.active ? paint.active : 'transparent'"
+        [style.cursor]="command.enabled ? 'pointer' : 'default'"
+        [style.opacity]="command.enabled ? 1 : 0.4"
+        (click)="run()"
+      >
+        <!-- Icons are the app's: the plain button shows the label in every variant. -->
+        {{ command.label }}
+      </button>
+    </ng-template>
+    <ng-template #defaultSeparator>
+      <span [style]="separatorStyle()"></span>
+    </ng-template>
+    <ng-template epdfToolbarOverflowTrigger #defaultOverflowTrigger let-open let-toggle="toggle">
+      <epdf-toolbar-more-button [open]="open" (toggle)="toggle()" />
+    </ng-template>
+    <ng-template epdfToolbarOverflowMenu #defaultOverflowMenu let-view>
+      <epdf-toolbar-menu [view]="view" [orientation]="orientation()" />
+    </ng-template>
+    <ng-template epdfToolbarCollapsed #defaultCollapsed let-view>
+      <epdf-toolbar-collapsed [view]="view" [orientation]="orientation()" />
+    </ng-template>
+    <ng-template epdfToolbarGroupTrigger #defaultGroupTrigger let-view>
+      <epdf-toolbar-group-trigger [view]="view" [orientation]="orientation()" />
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EpdfToolbarLength, selector: "[epdfToolbarLength]", inputs: ["epdfToolbarLength", "ifDrawn"] }, { kind: "component", type: EpdfToolbarMoreButton, selector: "epdf-toolbar-more-button", inputs: ["open"], outputs: ["toggle"] }, { kind: "component", type: EpdfToolbarMenu, selector: "epdf-toolbar-menu", inputs: ["view", "orientation"] }, { kind: "component", type: EpdfToolbarCollapsed, selector: "epdf-toolbar-collapsed", inputs: ["view", "orientation"] }, { kind: "component", type: EpdfToolbarGroupTrigger, selector: "epdf-toolbar-group-trigger", inputs: ["view", "orientation"] }, { kind: "directive", type: EpdfToolbarCommandTemplate, selector: "ng-template[epdfToolbarCommand]" }, { kind: "directive", type: EpdfToolbarCollapsedTemplate, selector: "ng-template[epdfToolbarCollapsed]" }, { kind: "directive", type: EpdfToolbarGroupTriggerTemplate, selector: "ng-template[epdfToolbarGroupTrigger]" }, { kind: "directive", type: EpdfToolbarOverflowTriggerTemplate, selector: "ng-template[epdfToolbarOverflowTrigger]" }, { kind: "directive", type: EpdfToolbarOverflowMenuTemplate, selector: "ng-template[epdfToolbarOverflowMenu]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfToolbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-toolbar',
+                    imports: [
+                        NgTemplateOutlet,
+                        EpdfToolbarLength,
+                        EpdfToolbarMoreButton,
+                        EpdfToolbarMenu,
+                        EpdfToolbarCollapsed,
+                        EpdfToolbarGroupTrigger,
+                        EpdfToolbarCommandTemplate,
+                        EpdfToolbarCollapsedTemplate,
+                        EpdfToolbarGroupTriggerTemplate,
+                        EpdfToolbarOverflowTriggerTemplate,
+                        EpdfToolbarOverflowMenuTemplate,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: TOOLBAR_LENGTHS, useExisting: forwardRef(() => EpdfToolbar) }],
+                    host: {
+                        role: 'toolbar',
+                        '[attr.aria-orientation]': 'orientation()',
+                        style: 'position: relative; display: flex; align-items: center;',
+                        '[style.flex-direction]': "orientation() === 'vertical' ? 'column' : 'row'",
+                    },
+                    template: `
+    <!--
+      The sections run along the toolbar: the center one has auto margins, so it stays centered
+      in the space the others leave and gives way before anything overlaps. The sections never
+      grow or shrink: what fits is the solver's decision, so the row's least length is exactly
+      what it counted.
+    -->
+    <div [style]="sectionStyle()" [style.gap.px]="gap()">
+      @for (entry of row().start; track entry.key) {
+        <ng-container *ngTemplateOutlet="liveEntry; context: { $implicit: entry }" />
+      }
+    </div>
+    <div [style]="centerStyle()" [style.gap.px]="gap()">
+      @for (entry of row().center; track entry.key) {
+        <ng-container *ngTemplateOutlet="liveEntry; context: { $implicit: entry }" />
+      }
+    </div>
+    <div [style]="sectionStyle()" [style.gap.px]="gap()">
+      @for (entry of row().end; track entry.key) {
+        <ng-container *ngTemplateOutlet="liveEntry; context: { $implicit: entry }" />
+      }
+      @if (hasOverflow()) {
+        <span data-epdf-toolbar-item style="position: relative; display: inline-flex">
+          <ng-container
+            *ngTemplateOutlet="
+              overflowTriggerTemplate()?.template ?? defaultOverflowTrigger;
+              context: overflowTrigger()
+            "
+          />
+          <ng-container
+            *ngTemplateOutlet="
+              overflowMenuTemplate()?.template ?? defaultOverflowMenu;
+              context: overflowMenu()
+            "
+          />
+        </span>
+      }
+    </div>
+
+    <!--
+      The measurement layer: every item in every variant, every folded group and the "More"
+      button, hidden, inert and observed. Text reflow (a language, fonts, zoom) re-measures by
+      itself. An item of your own whose template draws nothing here is measured where it renders.
+    -->
+    <div aria-hidden="true" inert [style]="measureLayerStyle()">
+      @for (item of measured(); track item.key) {
+        <span
+          [epdfToolbarLength]="item.key"
+          [ifDrawn]="item.entry.kind === 'custom'"
+          style="display: inline-flex; flex-shrink: 0"
+        >
+          <ng-container *ngTemplateOutlet="drawn; context: { $implicit: item.entry }" />
+        </span>
+      }
+      <span [epdfToolbarLength]="overflowTriggerKey" style="display: inline-flex; flex-shrink: 0">
+        <ng-container
+          *ngTemplateOutlet="
+            overflowTriggerTemplate()?.template ?? defaultOverflowTrigger;
+            context: closedTrigger
+          "
+        />
+      </span>
+    </div>
+
+    <!--
+      An item of the live row, in the element that marks it (TOOLBAR_ITEM_ATTRIBUTE in
+      @embedpdf/web): its first element that takes focus is the item's stop in the arrow-key
+      order. The element adds no box, so the item lays out as the section's own child.
+    -->
+    <ng-template #liveEntry let-entry>
+      @if (entry.kind === 'separator') {
+        <ng-container *ngTemplateOutlet="drawn; context: { $implicit: entry }" />
+      } @else {
+        <span data-epdf-toolbar-item style="display: contents">
+          <ng-container *ngTemplateOutlet="drawn; context: { $implicit: entry }" />
+        </span>
+      }
+    </ng-template>
+
+    <ng-template #drawn let-entry>
+      @switch (entry.kind) {
+        @case ('command') {
+          <ng-container
+            *ngTemplateOutlet="
+              commandTemplate()?.template ?? defaultCommand;
+              context: entry.context
+            "
+          />
+        }
+        @case ('custom') {
+          <ng-container *ngTemplateOutlet="entry.template; context: entry.context" />
+        }
+        @case ('socket') {
+          <!-- Inside a shadow root, the host's children for this slot are drawn here. -->
+          <slot
+            [attr.name]="entry.slot"
+            [epdfToolbarLength]="entry.key"
+            style="display: inline-flex; align-items: center; flex-shrink: 0"
+          >
+            @if (entry.context) {
+              <ng-container
+                *ngTemplateOutlet="
+                  commandTemplate()?.template ?? defaultCommand;
+                  context: entry.context
+                "
+              />
+            }
+          </slot>
+        }
+        @case ('collapsed') {
+          <ng-container
+            *ngTemplateOutlet="
+              collapsedTemplate()?.template ?? defaultCollapsed;
+              context: entry.context
+            "
+          />
+        }
+        @case ('trigger') {
+          <ng-container
+            *ngTemplateOutlet="
+              groupTriggerTemplate()?.template ?? defaultGroupTrigger;
+              context: entry.context
+            "
+          />
+        }
+        @case ('separator') {
+          <ng-container *ngTemplateOutlet="separatorTemplate()?.template ?? defaultSeparator" />
+        }
+      }
+    </ng-template>
+
+    <!-- The defaults: plain, and meant to be replaced. -->
+    <ng-template epdfToolbarCommand #defaultCommand let-command let-run="run">
+      <button
+        type="button"
+        [disabled]="!command.enabled"
+        [attr.aria-pressed]="command.active || null"
+        [attr.aria-haspopup]="command.menu ? 'menu' : null"
+        [title]="command.label"
+        [style]="commandStyle"
+        [style.background]="command.active ? paint.active : 'transparent'"
+        [style.cursor]="command.enabled ? 'pointer' : 'default'"
+        [style.opacity]="command.enabled ? 1 : 0.4"
+        (click)="run()"
+      >
+        <!-- Icons are the app's: the plain button shows the label in every variant. -->
+        {{ command.label }}
+      </button>
+    </ng-template>
+    <ng-template #defaultSeparator>
+      <span [style]="separatorStyle()"></span>
+    </ng-template>
+    <ng-template epdfToolbarOverflowTrigger #defaultOverflowTrigger let-open let-toggle="toggle">
+      <epdf-toolbar-more-button [open]="open" (toggle)="toggle()" />
+    </ng-template>
+    <ng-template epdfToolbarOverflowMenu #defaultOverflowMenu let-view>
+      <epdf-toolbar-menu [view]="view" [orientation]="orientation()" />
+    </ng-template>
+    <ng-template epdfToolbarCollapsed #defaultCollapsed let-view>
+      <epdf-toolbar-collapsed [view]="view" [orientation]="orientation()" />
+    </ng-template>
+    <ng-template epdfToolbarGroupTrigger #defaultGroupTrigger let-view>
+      <epdf-toolbar-group-trigger [view]="view" [orientation]="orientation()" />
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @embedpdf/angular/toolbar: a toolbar that fits its width (or its height, standing up), with
+ * every part yours.
+ *
+ *   <epdf-toolbar [bar] [orientation]>           measures, folds, fills a "More" menu, arrow keys
+ *   <ng-template epdfToolbarCommand>, …          the parts you draw (templates.ts)
+ *   group(), item(), custom()                    the bar's vocabulary, from @embedpdf/core-ui
+ */
+// The toolbar's vocabulary: the schema a bar is written in.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EpdfToolbar, EpdfToolbarCollapsedTemplate, EpdfToolbarCommandTemplate, EpdfToolbarCustomTemplate, EpdfToolbarGroupTriggerTemplate, EpdfToolbarOverflowMenuTemplate, EpdfToolbarOverflowTriggerTemplate, EpdfToolbarSeparatorTemplate };
+//# sourceMappingURL=embedpdf-angular-toolbar.mjs.map