Tree View API

Full surface of @oge-ui/navigation: the oge-tree-view component, its three template slots, the WAI-ARIA APG keyboard map and the config provider.

Properties Methods Events Types

OgeTreeView

oge-tree-view

Properties 39

Data & accessors

Name	Type	Default	Description
`items`	`readonly T[] \| undefined`	—	Nodes to display — a flat parent-referencing list or nested children.
`keyExpr`	`string \| ((row: T) => RowKey)`	`'id'`	Field holding a node's stable key.
`parentIdExpr`	`string \| ((row: T) => unknown)`	`'parentId'`	Field holding a node's parent key (flat data).
`itemsExpr`	`string \| ((row: T) => readonly T[]) \| undefined`	—	Field holding nested children. Setting it switches the tree to hierarchical data.
`displayExpr`	`string \| ((row: T) => unknown)`	`'text'`	Field holding the display text.
`disabledExpr`	`string \| ((row: T) => unknown)`	`'disabled'`	Field marking a node disabled.
`hasItemsExpr`	`string \| ((row: T) => unknown)`	`'hasItems'`	Field hinting that a node has children that are not loaded yet — only consulted with a `loadChildren`.
`iconExpr`	`string \| ((row: T) => unknown) \| undefined`	—	Field holding SVG path data (`d`) for a per-node icon.
`rootValue`	`unknown`	—	Parent value that marks root nodes in flat data. `undefined`/`null` treats both as root.
`dataStructure`	`'plain' \| 'tree' \| undefined`	—	Explicit data shape; inferred from `itemsExpr` when unset.

State (two-way)

Name	Type	Default	Description
`expandedKeys`	`readonly RowKey[]`	`[]`	Keys of the expanded nodes.
`selectedKeys`	`readonly RowKey[]`	`[]`	Keys of the selected nodes, projected by `selectedKeysMode` on the way out.
`focusedKey`	`RowKey \| undefined`	—	Key of the node holding the roving tabindex.
`searchValue`	`string`	`''`	Current search text.

Selection

Name	Type	Default	Description
`selectionMode`	`'none' \| 'single' \| 'multiple'`	`'none'`	How nodes may be selected.
`selectByClick`	`boolean \| undefined`	—	Selects a node when its row is clicked. `undefined` resolves to `true` without checkboxes and `false` with them, so clicking a label never silently ticks the box beside it.
`selectNodesRecursive`	`boolean`	`true`	Cascades selection down to descendants and up to fully-selected parents (the tri-state model).
`showCheckBoxes`	`'none' \| 'normal' \| 'selectAll'`	`'none'`	Checkbox column: hidden, per node, or per node plus a "select all" row.
`selectedKeysMode`	`'all' \| 'leavesOnly' \| 'excludeRecursive'`	`'all'`	Projection applied to `selectedKeys`: everything, only childless nodes, or the top-most roots of fully-selected subtrees.

Expansion

Name	Type	Default	Description
`expandEvent`	`'click' \| 'dblclick'`	`'click'`	Which gesture expands a node. The chevron always expands regardless.
`expandNodesRecursive`	`boolean`	`true`	Expanding a node also expands its ancestors.
`allowExpandAll`	`boolean`	`true`	Enables the APG `*` shortcut, which expands every sibling at the focused level.

Search

Name	Type	Default	Description
`searchEnabled`	`boolean`	`false`	Renders the built-in search box above the tree.
`searchMode`	`'contains' \| 'startsWith' \| 'equals'`	`'contains'`	How the text is compared. Matching is accent- and locale-insensitive.
`searchExpr`	`string \| ((row: T) => unknown) \| array \| undefined`	—	Fields searched instead of `displayExpr`; an array searches several.
`searchTimeout`	`number`	`0`	Debounce applied to the search box, in milliseconds.
`filterMode`	`'matchOnly' \| 'withAncestors' \| 'fullBranch'`	`'withAncestors'`	Which relatives of a match stay visible. `fullBranch` also keeps a match's descendants.
`expandNodesOnFiltering`	`boolean`	`true`	Auto-expands the ancestors of matches.
`highlightSearchResults`	`boolean`	`true`	Wraps matches in `<mark class="oge-highlight">`.

Lazy loading, virtualization & drag

Name	Type	Default	Description
`loadChildren`	`(parent: T, key: RowKey) => Promise<readonly T[]>`	—	Loads a node's children the first time it expands; a placeholder row shows meanwhile. Single-flight per node, and fetched children join the index so cascades reach them.
`virtualScroll`	`boolean \| { itemHeight: number }`	`false`	Windowed rendering for large trees. Every row must actually be `itemHeight` tall (30px by default).
`height`	`string \| undefined`	—	Height of the scroll container (any CSS length) — required for virtual scrolling to have a viewport.
`allowDragging`	`boolean`	`false`	Enables pointer drag reordering.
`allowDropInside`	`boolean`	`true`	Allows dropping into a node (reparenting), not just between siblings.

Presentation

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the whole component.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Density of the node rows.
`ariaLabel`	`string \| undefined`	—	Aria label of the tree.
`treeId`	`string \| undefined`	—	DOM id put on the inner `role="tree"` element — set it when an outside control (a combobox owning this tree as its popup) must point `aria-controls` at the list rather than the host.
`messages`	`Partial<OgeTreeViewMessages>`	`{}`	Per-instance overrides of the config strings.

Methods 12

Name	Type	Description
`expand(key)`	`(key: RowKey) => Promise<boolean>`	Expands a node, awaiting the lazy child fetch when there is one. Resolves `false` if the node is unknown or `itemExpanding` vetoed it.
`collapse(key)`	`(key: RowKey) => Promise<boolean>`	Collapses a node; resolves whether it actually collapsed.
`toggle(key)`	`(key: RowKey) => Promise<boolean>`	Expands the node if collapsed, collapses it otherwise.
`expandAll()`	`() => void`	Expands every node that has loaded children.
`collapseAll()`	`() => void`	Collapses every node.
`selectAll()`	`() => void`	Selects every node.
`unselectAll()`	`() => void`	Clears the selection.
`select(key) / unselect(key)`	`(key: RowKey) => void`	Selects or deselects one node, cascading when `selectNodesRecursive` is on.
`isExpanded(key) / isSelected(key)`	`(key: RowKey) => boolean`	Current state of one node.
`getSelectedKeys(mode?)`	`(mode?: OgeTreeSelectedKeysMode) => RowKey[]`	Selected keys under a projection, defaulting to `selectedKeysMode`.
`focus(key?)`	`(key?: RowKey) => void`	Focuses a node's row, or the first enabled one.
`scrollToItem(key)`	`(key: RowKey) => void`	Scrolls a node into view, using offset math when virtualized.

Events 9

Name	Type	Description
`itemExpanding / itemCollapsing`	`OgeTreeExpandingEvent<T> / OgeTreeCollapsingEvent<T>`	Cancelable pre-events — set `cancel = true` to block the change.
`itemExpanded / itemCollapsed`	`OgeTreeExpandedEvent<T> / OgeTreeCollapsedEvent<T>`	Emitted after the change committed.
`selectionChanging`	`OgeTreeSelectionChangingEvent<T>`	Cancelable pre-event carrying the keys the selection would become.
`selectionChanged`	`OgeTreeSelectionChangedEvent<T>`	Emitted after the selection committed, with `previousKeys`.
`itemSelectionChanged`	`OgeTreeItemSelectionChangedEvent<T>`	Emitted for the single node whose own state flipped.
`itemClick / itemDblClick`	`OgeTreeItemClickEvent<T>`	Emitted when a node row is clicked or double-clicked.
`childrenLoaded / childrenLoadFailed`	`OgeTreeChildrenLoadedEvent<T> / OgeTreeChildrenFailedEvent<T>`	Emitted after a lazy `loadChildren` settled; the failure carries the original error.
`selectAllChanged`	`OgeTreeSelectAllChangedEvent`	Emitted when the "select all" row is toggled.
`itemReordering / itemReordered`	`OgeTreeReorderingEvent<T> / OgeTreeReorderedEvent<T>`	Cancelable pre-event and result of a drag & drop reparent, carrying `position: 'inside' \| 'before' \| 'after'`. The tree does not mutate your data.

Types 12

Template slots

Name	Type	Description
`[ogeTreeItemTemplate]`	`{ $implicit, key, level, expanded, selected, checkState, hasChildren, highlightedHtml }`	Replaces a node's built-in label. Renders inside `role="treeitem"`, so it must not contain focusable controls.
`[ogeTreeExpandIconTemplate]`	`{ $implicit: boolean, item, key, loading }`	Replaces the expand/collapse chevron.
`[ogeTreeNoDataTemplate]`	`—`	Replaces the empty state shown when the tree has no nodes or a search matched nothing.

Keyboard (WAI-ARIA APG treeview)

Name	Type	Description
`Down / Up Arrow`	`navigation`	Moves focus over the visible nodes, skipping disabled ones. Trees do not wrap at the ends.
`Right Arrow`	`navigation`	Opens a collapsed parent; on an open parent moves to its first child; no-op on a leaf.
`Left Arrow`	`navigation`	Closes an open parent; otherwise moves focus to the parent node.
`Home / End`	`navigation`	Moves to the first / last visible node.
`Enter`	`activation`	Toggles a parent, or selects a leaf when a selection mode is set.
`Space`	`selection`	Toggles selection on the focused node. `Shift+Space` selects the contiguous range.
`Printable characters`	`type-ahead`	Moves focus to the next node whose label starts with the typed prefix, accent-insensitively.
`*`	`expansion`	Expands every sibling at the focused level.
`Ctrl+A, Shift+Arrow, Ctrl+Shift+Home/End`	`multi-select`	Select all, extend by one, and range-select to the start/end — the APG "recommended" model, so plain navigation needs no modifier.

Tree view configuration

Properties 8

OgeTreeViewMessages

Name	Type	Default	Description
`selectAll`	`string`	`'Select all'`	Label of the "select all" row.
`searchPlaceholder`	`string`	`'Search…'`	Placeholder of the built-in search box.
`searchLabel`	`string`	`'Search the tree'`	Accessible name of the built-in search box.
`clearSearch`	`string`	`'Clear search'`	Accessible name of the search box's clear button.
`loadingChildren`	`string`	`'Loading…'`	Shown while a node's lazy children are loading.
`childrenLoadFailed`	`string`	`'Could not load these items.'`	Shown when `loadChildren` rejected.
`noData`	`string`	`'No items to display'`	Shown when the tree has no nodes at all.
`noSearchResults`	`string`	`'No matching items'`	Shown when a search matched nothing.

Types 4

Behavioural defaults

Name	Type	Description
`itemHeight`	`number \| undefined`	Default row height used by `virtualScroll`.
`expandEvent`	`'click' \| 'dblclick' \| undefined`	Default for the `expandEvent` input.

Name	Type	Description
`provideOgeTreeViewConfig(config)`	`(config: OgeTreeViewConfigInput) => Provider`	Application- or component-scoped defaults; shallow-merges `messages` over the built-ins.
`OGE_TREE_VIEW_CONFIG`	`InjectionToken<OgeTreeViewConfig>`	The token itself, with a factory default — inject it to read the effective config.

OgeDrawer

oge-drawer

Properties 23

Layout

Name	Type	Default	Description
`opened`	`boolean (two-way)`	`false`	Whether the drawer is open. Two-way, so `[(opened)]` is the whole state.
`mode`	`'overlay' \| 'push' \| 'side'`	`'overlay'`	`overlay` floats over the content, `push` shifts it aside without resizing it, `side` shrinks it so both share the row. This also decides modality — see the accessibility group.
`position`	`'start' \| 'end' \| 'top' \| 'bottom'`	`'start'`	Edge the panel is attached to. Logical, so `start`/`end` mirror in RTL with no flag to set.
`size`	`number \| string`	`260`	Size of the open panel along its cross axis. A number means pixels.
`minSize`	`number \| string \| undefined`	—	Size of the closed panel — the compact rail that keeps icons visible. Only meaningful for `mode: 'side'`: a rail belongs to the layout, and a modal drawer still partly on screen is not closed.
`compactBelow`	`number \| undefined`	—	Below this container inline size the drawer downgrades to `'overlay'` and closes. Measured against the drawer's own box, never the window, so a drawer nested in a dialog or a split pane adapts to the room it actually has.
`disabled`	`boolean`	`false`	Blocks every open and close gesture, `open()` and `close()` included. A drawer already open stays open and stays usable; only a `compact` close still goes through, because a drawer with no room left must stop covering the content.
`animationEnabled`	`boolean`	`true`	Enables the open/close transition.
`animationDuration`	`number`	`240`	Duration of that transition in milliseconds. Suppressed entirely under `prefers-reduced-motion`.

Dismissal

Name	Type	Default	Description
`showCloseButton`	`boolean`	`false`	Renders the built-in close button in the panel, labelled by the `close` message. It closes through the full pipeline, so `closeGuard` still applies.
`shading`	`boolean`	`true`	Renders the backdrop of a modal drawer. A persistent drawer never shades the content it shares the row with.
`closeOnEscape`	`boolean`	`true`	Escape closes a modal drawer, and only when it is the topmost overlay — a popup opened inside it closes first. A persistent drawer never takes Escape from the page.
`closeOnBackdropClick`	`boolean`	`true`	A click on the backdrop closes the drawer. Only a press that started on the backdrop counts, so a drag ending there does not close it.
`closeGuard`	`(() => boolean \| Promise<boolean>) \| undefined`	—	Vetoes a close. Return `false`, throw, or reject to keep the drawer open; a promise reports pending through `closePending` and a second gesture meanwhile is dropped.
`scrollLock`	`boolean`	`false`	Locks body scroll while a modal drawer is open, through the same ref-counted lock every other OGE overlay uses. Off by default, because a drawer is usually an in-page region rather than a page-level dialog.

Accessibility

Name	Type	Default	Description
`landmark`	`'navigation' \| 'complementary' \| 'region'`	`'navigation'`	Landmark role while persistent. Ignored while modal, which is always `role="dialog"`.
`ariaLabel`	`string \| undefined`	—	Accessible name of the panel. Falls back to the `drawer` message.
`ariaLabelledBy`	`string \| undefined`	—	id of an element naming the panel. Wins over `ariaLabel`, which is then cleared so there is only one name.
`messages`	`Partial<OgeDrawerMessages> \| undefined`	—	Per-instance overrides of the config strings — the panel’s fallback accessible name (`drawer`) and the close button’s label (`close`).
`autoFocus`	`'first-tabbable' \| 'panel' \| 'none' \| string`	`'first-tabbable'`	Where focus lands when a modal drawer opens; any other string is a CSS selector, and an `[autofocus]` element always wins. A persistent drawer never moves focus.
`restoreFocus`	`boolean`	`true`	Returns focus to the opener on close, but only when focus would otherwise be orphaned — it never steals a target the user has moved to.
`inertBackground`	`boolean`	`true`	Marks the content behind a modal drawer `inert`, so neither Tab nor assistive tech can reach it. Scoped to the drawer's own content region rather than the document, because a drawer wraps the very content it covers. None of the four reference drawers does this.
`drawerId`	`string (readonly)`	—	id of the panel element. The panel stays in the DOM while closed, so a trigger's `aria-controls` always resolves to a real element.

Methods 5

Methods

Name	Type	Description
`open()`	`void`	Opens the drawer through the cancelable pre-event.
`close()`	`void`	Closes through the full pipeline (`closing` → `closeGuard`) with reason `'api'`.
`toggle()`	`void`	Opens when closed, closes when open.
`focus()`	`void`	Re-applies the initial-focus resolution. No-op unless the drawer is open and modal.
`closePending`	`Signal<boolean>`	True while an async `closeGuard` is in flight.

Events 5

Events

Name	Type	Description
`opening`	`OgeDrawerOpeningEvent`	Cancelable — set `cancel` to keep the drawer closed; the two-way model is reset for you.
`afterOpened`	`void`	The drawer finished opening. Fires on a render hook rather than `transitionend`, because the transition is CSS-only and `prefers-reduced-motion` zeroes it.
`closing`	`OgeDrawerClosingEvent`	Cancelable, carries the `reason`. Runs before `closeGuard`.
`closed`	`OgeDrawerClosedEvent`	The drawer finished closing.
`modeChanged`	`OgeDrawerModeChangedEvent`	The resolved layout mode changed, carrying the requested mode and whether `compactBelow` forced it.

Types 11

Content slots

Name	Type	Description
`[ogeDrawerPanel]`	`attribute`	Marks the element that becomes the drawer panel. Everything else projected into `<oge-drawer>` is the content.

Types

Name	Type	Description
`OgeDrawerMode`	`'overlay' \| 'push' \| 'side'`	Layout mode, and therefore modality.
`OgeDrawerPosition`	`'start' \| 'end' \| 'top' \| 'bottom'`	Edge the panel attaches to; logical for RTL.
`OgeDrawerLandmark`	`'navigation' \| 'complementary' \| 'region'`	Landmark role of a persistent drawer.
`OgeDrawerAutoFocus`	`'first-tabbable' \| 'panel' \| 'none' \| string`	Initial-focus strategy of a modal drawer.
`OgeDrawerCloseReason`	`'api' \| 'escape' \| 'backdrop' \| 'outside' \| 'compact'`	Why the drawer closed.
`OgeDrawerOpeningEvent`	`{ cancel: boolean }`	Cancelable pre-event for opening.
`OgeDrawerClosingEvent`	`{ cancel: boolean; reason: OgeDrawerCloseReason }`	Cancelable pre-event for closing.
`OgeDrawerClosedEvent`	`{ reason: OgeDrawerCloseReason }`	Payload of `closed`.
`OgeDrawerModeChangedEvent`	`{ mode; requestedMode; compact: boolean }`	Payload of `modeChanged`.
`resolveDrawerMode()`	`(request: OgeDrawerModeRequest) => OgeDrawerModeResult`	The pure function in `@oge-ui/core` that decides whether a drawer keeps its mode or goes compact. DOM-free, so the rule is unit-tested on its own. A non-positive `containerSize` means “not measured yet” and the requested mode is returned unchanged.

Drawer configuration

Properties 5

provideOgeDrawerConfig()

Name	Type	Default	Description
`mode`	`OgeDrawerMode`	—	Default for the `mode` input.
`position`	`OgeDrawerPosition`	—	Default for the `position` input.
`size`	`number \| string`	—	Default for the `size` input.
`messages.drawer`	`string`	`'Drawer'`	Accessible name of the panel when the application supplies none.
`messages.close`	`string`	`'Close drawer'`	Label of a close affordance rendered in the panel.

OgeStepper

oge-stepper

Properties 15

Steps & selection

Name	Type	Default	Description
`activeIndex`	`number (two-way)`	`0`	Index of the active step.
`activeKey`	`string \| undefined (two-way)`	—	Key of the active step. Reconciled before the index, so an initial key binding wins over the index default on first run.
`steps`	`readonly OgeStepData[] \| undefined`	—	Data-driven steps, merged after any declarative `<oge-step>` children.
`linear`	`boolean`	`false`	Blocks moving past a step that is neither `completed` nor `optional`. The default matches Material and PrimeNG; Kendo is the outlier at `true`.
`disabled`	`boolean`	`false`	Blocks every step change.

Layout & chrome

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Main axis of the step list. The ARIA semantics do not change with it — see the accessibility group.
`display`	`'full' \| 'label' \| 'indicator'`	`'full'`	How much of each header renders: label plus description, label only, or just the round indicator.
`showNavigation`	`boolean`	`false`	Renders the built-in Back / Next bar, which becomes Finish on the last step. None of the three reference steppers ships one.
`deferRendering`	`boolean`	`false`	Creates a step's body on first activation.
`keepAlive`	`boolean`	`true`	Keeps a body mounted after the user leaves it.

Accessibility

Name	Type	Default	Description
`keyboardNavigation`	`boolean`	`false`	Adds arrow / Home / End over the headers. Off by default because the headers are buttons in a list, not tabs, so they are already Tab-reachable. It moves focus only, and deliberately does not wrap.
`ariaLabel`	`string \| undefined`	—	Accessible name of the step list. Falls back to the `stepper` message.
`messages`	`Partial<OgeStepperMessages> \| undefined`	—	Per-instance overrides of the config strings — the list’s accessible name, the optional/completed/invalid announcements and the navigation bar’s labels.
`stepperId`	`string (readonly)`	—	id prefix of the generated header / panel pairs.
`changePending`	`Signal<boolean>`	—	True while an async `stepGuard` is in flight.

Methods 5

Name	Type	Description
`next(event?: Event)`	`void`	Advances one step, or confirms the finish when already on the last one. The guard runs either way, so a final step can still veto.
`previous(event?: Event)`	`void`	Goes back one step, through the same pipeline.
`goTo(target: number \| string, event?: Event)`	`void`	Moves to a step by index or key.
`reset()`	`void`	Clears the rendered-body cache and returns to the first step.
`focus()`	`void`	Focuses the active step's header.

Events 4

Name	Type	Description
`stepChanging`	`OgeStepChangingEvent`	Cancelable, emitted before the leaving step’s `stepGuard` runs.
`stepChanged`	`OgeStepChangedEvent`	The active step changed.
`stepBlocked`	`OgeStepBlockedEvent`	A move was refused, carrying `reason: 'linear' \| 'editable' \| 'guard' \| 'disabled'`. Angular Material refuses silently.
`finished`	`OgeStepperFinishEvent`	`next()` was confirmed on the last step.

Types 14

OgeStep (declarative child)

Name	Type	Description
`key / label / description`	`string`	Identity and header text.
`icon / iconClass`	`string \| undefined`	SVG path data, or class(es) for an icon font — replacing the step number.
`completed / optional / editable`	`boolean`	The linear gate: `completed` lets a linear stepper past, `optional` lets it past regardless, and `editable: false` blocks coming back.
`errorMessage`	`string \| undefined`	Shown under the label while `invalid`, replacing `description` so two sub-lines never compete. Angular Material has this; Kendo and PrimeNG do not.
`invalid / disabled / visible`	`boolean`	Error state, non-activatable, and removal from the list.
`stepGuard`	`() => boolean \| Promise<boolean>`	Veto hook run when leaving this step. A throw and a rejection both veto.

Types & directives

Name	Type	Description
`OgeStepState`	`'number' \| 'active' \| 'done' \| 'error'`	Derived indicator state; error outranks done, so a completed step that later fails still reads as needing attention.
`OgeStepperOrientation`	`'horizontal' \| 'vertical'`	Main axis; the ARIA model is the same for both.
`OgeStepperDisplay`	`'full' \| 'label' \| 'indicator'`	How much of a header renders.
`OgeStepData`	`{ key?; label?; description?; icon?; iconClass?; disabled?; visible?; completed?; optional?; editable?; invalid?; cssClass?; stepGuard? }`	One data-driven step.
`OgeStepGuard`	`() => boolean \| Promise<boolean>`	Core's `OgeAsyncGuard`, the same veto contract the tabs' close guard and the accordion's expand guard use.
`[ogeStepperNext] / [ogeStepperPrevious]`	`directive`	Turn any button into a navigation control. They find the stepper by DI when written inside it, or take one explicitly (`ogeStepperNext [ogeStepperTarget]="wizard"`) from outside — which Material’s equivalents cannot do.
`[ogeStepHeaderTemplate] / [ogeStepIndicatorTemplate] / [ogeStepContentTemplate]`	`directive`	Replace the label block, the round indicator, or supply lazy body content.
`<oge-form-steps>`	`directive (@oge-ui/forms)`	Wraps this component inside `<oge-form>`. Step completion comes from the form's own per-step error rollup, so it behaves identically in all three binding modes, and leaving a step touches only that step's fields.

Stepper configuration

Properties 5

provideOgeStepperConfig()

Name	Type	Default	Description
`orientation / display / linear`	`defaults`	—	Defaults for the matching inputs.
`messages.stepper`	`string`	`'Steps'`	Accessible name of the step list.
`messages.optional`	`string`	`'Optional'`	Sub-label of an optional step, wired through `aria-describedby`.
`messages.completed / messages.invalid`	`string`	`'Completed' / 'Has errors'`	Announced in visually hidden text, because the indicator glyph is `aria-hidden`.
`messages.previous / next / finish`	`string`	`'Back' / 'Next' / 'Finish'`	Labels of the built-in navigation bar.

OgeMenubar

oge-menubar

Properties 9

Data

Name	Type	Default	Description
`items`	`readonly OgeMenubarItemData[] \| undefined`	—	Data-driven item tree; children at any depth open as nested submenus. Rendered after any declarative `<oge-menubar-item>` children — the house merge order.
`activeKey`	`string \| undefined`	—	The item `key` rendered with `aria-current="page"` and the active style. Consumer-driven — bind it from the router; the menubar itself takes no router dependency.
`messages`	`Partial<OgeMenubarMessages> \| undefined`	—	Per-instance overrides of the user-facing strings, merged over `provideOgeMenubarConfig()`.

Behavior

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	A vertical bar announces `aria-orientation="vertical"` and swaps the arrow axes: Up/Down traverse, ArrowRight opens the submenu beside the bar.
`openMode`	`'click' \| 'hover'`	`'click'`	How top-level submenus open. Nested levels always open on hover and on ArrowRight/Enter — the reference libraries’ first-vs-nested split baked in as behavior. With a menu open, hovering siblings switches it in either mode.
`hoverDelay`	`number`	`100`	Hover dwell before a top-level submenu opens in `'hover'` mode, in ms. Nested levels use the overlay config's `menuShowDelayMs`/`menuHideDelayMs` (50/300).
`compactBelow`	`number \| undefined`	—	Below this container inline size the whole bar collapses into a hamburger button opening the full tree as one nested menu. Measured against the menubar's own box, never the window.
`disabled`	`boolean`	`false`	Disables the whole bar: every item goes inert and the bar leaves the Tab sequence.
`submenuItemTemplate`	`TemplateRef<OgeMenuItemTemplateContext> \| undefined`	—	Custom rendering for submenu rows at every depth — the shared `oge-menu-list` context. Top-level bar items use `[ogeMenubarItemTemplate]` instead.

Methods 3

Name	Type	Description
`open(target: number \| string)`	`void`	Opens the submenu of a top-level item, by index or `key`. Runs through the cancelable `submenuOpening` pipeline.
`close()`	`void`	Closes any open submenu through the cancelable `submenuClosing` pipeline with `reason: 'api'`.
`focus()`	`void`	Focuses the bar's roving tab target — or the hamburger button when compact.

Events 6

Name	Type	Description
`itemClick`	`OgeMenubarItemClickEvent`	A leaf item was activated, at any depth. Carries the item, its `key` and the hierarchical index `path` from the bar down.
`submenuOpening`	`OgeMenubarSubmenuOpeningEvent`	Cancelable — set `cancel` to keep the submenu closed. `item` is `undefined` for the compact hamburger menu (empty `path`).
`submenuOpened`	`OgeMenubarSubmenuOpenedEvent`	A top-level submenu (or the hamburger menu) opened.
`submenuClosing`	`OgeMenubarSubmenuClosingEvent`	Cancelable — set `cancel` to keep the submenu open. Fires for closes the menubar itself initiates (`escape`, `select`, `navigation`, `api`); overlay-owned closes (`outside`) and Tab only report `submenuClosed`.
`submenuClosed`	`OgeMenubarSubmenuClosedEvent`	A submenu closed, with its `reason`.
`compactChanged`	`OgeMenubarCompactChangedEvent`	The bar collapsed into (or recovered from) the compact hamburger.

Types 5

Name	Type	Description
`OgeMenubarItemData<T>`	`interface`	The canonical overlay `OgeMenuItem` narrowed recursively — `badge` and `shortcut` included — plus `key` (identity for `activeKey`/`open()`/events), `url` (renders the item as a real `<a href>` at the bar and at any submenu depth; `itemClick` fires first so `preventDefault()` hands navigation to a router) and `visible`. Submenus come from `items`.
`OgeMenubarCloseReason`	`'escape' \| 'outside' \| 'select' \| 'tab' \| 'navigation' \| 'api'`	Why a submenu closed. `'navigation'` is a Left/Right or hover switch to a sibling top-level item.
`OgeMenubarItemClickEvent`	`{ item; key?; index; path; event }`	`path` is the hierarchical index chain from the bar down to the item; `index` is its last entry.
`OgeMenubarItemTemplate`	`directive — ng-template[ogeMenubarItemTemplate]`	Replaces the rendering of top-level bar items; context is `OgeMenubarItemTemplateContext`. Submenu rows keep the shared `oge-menu-list` rendering.
`OgeMenubarItemTemplateContext`	`{ $implicit: OgeMenubarItemData; index: number }`	Context of `[ogeMenubarItemTemplate]`: the item and its top-level index.

OgeMenubarItem

oge-menubar-item

Properties 10

Name	Type	Default	Description
`text`	`string`	`''`	Label of the item.
`key`	`string \| undefined`	—	Stable identity used by `activeKey`, `open()` and event payloads.
`value`	`unknown`	—	Consumer-defined value carried through click events.
`url`	`string \| undefined`	—	Top-level items only: renders the item as a real link (`<a href>`).
`hint`	`string \| undefined`	—	Tooltip (native `title`) — e.g. why an item is disabled.
`icon`	`string \| undefined`	—	SVG path data (`d`) for a leading `aria-hidden` icon.
`iconClass`	`string \| undefined`	—	Class(es) for a leading icon element — the icon-font hook.
`disabled`	`boolean`	`false`	Disabled items are exposed (`aria-disabled`) but inert and skipped by the arrow keys.
`visible`	`boolean`	`true`	`false` removes the item and its subtree.
`separator`	`boolean`	`false`	Renders a divider (`role="separator"`); every other input is ignored.

Menubar configuration

Properties 5

provideOgeMenubarConfig()

Name	Type	Description
`messages`	`OgeMenubarMessages`	Every user-facing string: `menubar` (accessible name of the bar, default `Menu bar`) and `hamburger` (aria label of the compact button, default `Menu`).
`openMode`	`'click' \| 'hover' \| undefined`	Default for the `openMode` input.
`hoverDelay`	`number \| undefined`	Default for the `hoverDelay` input, in ms.
`orientation`	`'horizontal' \| 'vertical' \| undefined`	Default for the `orientation` input.
`compactBelow`	`number \| undefined`	Default for the `compactBelow` input.

OgeBreadcrumb

oge-breadcrumb

Properties 3

Name	Type	Default	Description
`items`	`readonly OgeBreadcrumbItemData[] \| undefined`	—	Data-driven trail — a flat list, never nested. Rendered after any declarative `<oge-breadcrumb-item>` children — the house merge order.
`collapseMode`	`'auto' \| 'wrap' \| 'none'`	`'auto'`	`'auto'` collapses the oldest middle crumbs into an ellipsis menu against the breadcrumb's own container width (never the window) — the first and last crumb always stay visible, and the collapsed crumbs remain reachable as real links. `'wrap'` breaks onto multiple rows; `'none'` keeps one scrollable row. The fitting arithmetic is core's pure `fitToolbarItems`.
`messages`	`Partial<OgeBreadcrumbMessages> \| undefined`	—	Per-instance overrides of the user-facing strings, merged over `provideOgeBreadcrumbConfig()`.

Methods 1

Name	Type	Description
`focus()`	`void`	Focuses the first interactive crumb — or the ellipsis button when the trail is collapsed.

Events 1

Name	Type	Description
`itemClick`	`OgeBreadcrumbItemClickEvent`	A crumb (inline or inside the ellipsis menu) was activated. Not fired by disabled crumbs or by the last crumb — that is the current page. On `url` crumbs, `event.preventDefault()` hands navigation to a router.

Types 5

Name	Type	Description
`OgeBreadcrumbItemData<T>`	`{ text; key?; value?; url?; hint?; icon?; iconClass?; disabled?; visible? }`	A deliberately narrow interface — no submenu, checked or shortcut fields, because none of them mean anything on a trail. `url` renders the crumb as a real `<a href>` (ignored on the last crumb); `disabled` crumbs are exposed via `aria-disabled` but inert; `visible: false` removes the crumb.
`OgeBreadcrumbCollapseMode`	`'auto' \| 'wrap' \| 'none'`	How the breadcrumb behaves when room runs out.
`OgeBreadcrumbItemClickEvent`	`{ item; key?; index; event }`	`index` is the position within the full trail, collapsed crumbs included.
`OgeBreadcrumbItemTemplate`	`directive — ng-template[ogeBreadcrumbItemTemplate]`	Replaces the crumb's interior only — the link/current/disabled element semantics stay with the component. Context: `OgeBreadcrumbItemTemplateContext` (`$implicit`, `index`, `last`).
`OgeBreadcrumbSeparatorTemplate`	`directive — ng-template[ogeBreadcrumbSeparatorTemplate]`	Replaces the default chevron separator. Rendered `aria-hidden` — a separator is decoration, never content (APG). Context: `OgeBreadcrumbSeparatorTemplateContext`.

OgeBreadcrumbItem

oge-breadcrumb-item

Properties 9

Name	Type	Default	Description
`text`	`string`	`''`	Label of the crumb.
`key`	`string \| undefined`	—	Stable identity used in event payloads and DOM ids.
`value`	`unknown`	—	Consumer-defined value carried through click events.
`url`	`string \| undefined`	—	Renders the crumb as a real link (`<a href>`).
`hint`	`string \| undefined`	—	Tooltip (native `title`).
`icon`	`string \| undefined`	—	SVG path data (`d`) for a leading `aria-hidden` icon.
`iconClass`	`string \| undefined`	—	Class(es) for a leading icon element — the icon-font hook.
`disabled`	`boolean`	`false`	Disabled crumbs are exposed (`aria-disabled`) but inert.
`visible`	`boolean`	`true`	`false` removes the crumb entirely.

Breadcrumb configuration

provideOgeBreadcrumbConfig()

Name	Type	Description
`messages`	`OgeBreadcrumbMessages`	Every user-facing string: `breadcrumb` (accessible name of the `<nav>` landmark, default `Breadcrumb`) and `collapsed` (aria label of the ellipsis button, default `Show hidden items`).
`collapseMode`	`'auto' \| 'wrap' \| 'none' \| undefined`	Default for the `collapseMode` input.

OgePagination

oge-pagination

Properties 14

OgePagination

Name	Type	Default	Description
`pageIndex`	`model<number>`	`0`	The current page — 0-based, two-way. Auto-clamped when the page count shrinks (an implicit `pageIndexChange`, no rich event). DevExtreme migrators: check your origin — dx documentation is ambiguous about its base.
`pageSize`	`model<number>`	`20`	Items per page — two-way. `0` means "all items on one page" (the grid pager contract, kept aligned for eventual delegation).
`itemCount`	`number \| undefined`	—	Total items. `undefined` = unknown total: only prev/next and a "Page N" indicator render, and next never disables — clamp `pageIndex` yourself when the server reports the end.
`pageSizes`	`readonly (number \| 'all')[] \| undefined`	—	Page-size choices; `'all'` adds the unpaged option. Presence shows the selector — no separate boolean (DevExtreme's `showPageSizeSelector` is deliberately skipped).
`showInfo`	`boolean`	`false`	Renders the `{from}–{to} of {itemCount}` range (the `info` message template) in an `aria-live="polite"` region.
`showFirstLastButtons`	`boolean`	`false`	First/last jump buttons (Material name and default) — the numeric window already renders both rail pages, so they are opt-in chrome.
`showNavigationButtons`	`boolean`	`true`	Prev/next buttons; forced on in compact and unknown-total modes (they are the backbone there).
`showJumpToPageInput`	`boolean`	`false`	Jump-to-page input (PrimeNG name; Kendo's `type: 'input'`): 1-based display, Enter/change commit, clamped into range, display re-synced after a clamp. Hidden while the total is unknown.
`maxButtons`	`number \| undefined`	`7 (config)`	Total rendered slots including ellipsis slots — the window width never changes while paging, so the bar never jitters. An ellipsis hiding a single page renders the page instead.
`displayMode`	`'full' \| 'compact' \| 'adaptive'`	`'full' (config)`	`'compact'` renders the `N / M` indicator; `'adaptive'` switches below `compactBelow` (config, default 480px), measured against the bar's own container via ResizeObserver — never the window.
`disabled`	`boolean`	`false`	Disables every control (native `disabled` — they are all real buttons/selects/inputs).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Density preset (26/32/40px hit targets).
`messages`	`Partial<OgePaginationMessages>`	—	Per-instance string overrides, merged over the config messages. Several bars on one page need distinct `paginationLabel` values — landmarks must be unique (axe `landmark-unique`).
`pageCount`	`Signal<number \| undefined>`	—	Readonly derived page count; `undefined` while the total is unknown. DevExtreme's `getPageCount()` as a signal — the house read API.

Methods 3

Name	Type	Description
`firstPage() / lastPage() / nextPage() / previousPage()`	`void`	Programmatic paging (Material names). `lastPage()` no-ops while the total is unknown. Model updates only — no rich event (no user event).
`hasPreviousPage() / hasNextPage()`	`boolean`	`hasNextPage()` returns `true` while the total is unknown — the component cannot know the end.
`focus()`	`void`	Moves keyboard focus to the first enabled control.

Events 3

Name	Type	Description
`pageChanged`	`OgePaginationPageChangedEvent`	`{ pageIndex, previousPageIndex, pageSize, event }` — user interactions only; programmatic writes and auto-clamps update the model without it.
`pageSizeChanged`	`OgePaginationPageSizeChangedEvent`	`{ pageSize, previousPageSize, pageIndex, event }` — `pageIndex` reports the post-clamp page (changing the size can move the current page).
`pageIndexChange / pageSizeChange`	`number`	The implicit model outputs — fire on every change including programmatic writes and auto-clamps.

Types 2

Name	Type	Description
`OgePaginationDisplayMode / OgePaginationSize`	`types`	The string unions of the mode and density inputs.
`resolvePageWindow / resolvePageRange / resolvePageCount / OGE_PAGE_ELLIPSIS`	`@oge-ui/core`	The DOM-free paging kernel (`pagination-math.ts`): the constant-width page window with real ellipsis markers, the from/to info arithmetic and the never-below-1 page-count division — unit-tested without a DOM.

Pagination configuration

Properties 2

OgePaginationConfig

Name	Type	Description
`messages`	`OgePaginationMessages`	All strings: `paginationLabel` (the `<nav>` name), `firstPage`/`lastPage`/`previousPage`/`nextPage`, `pageLabel` (`{page}`, 1-based), `info` (`{from}` `{to}` `{itemCount}`), `pageInfoUnknown`, `pageIndicator` (`{page}` `{pageCount}`), `pageSizeLabel`, `allRows`, `jumpLabel`.
`displayMode / compactBelow / maxButtons`	`OgePaginationDisplayMode / number / number`	Application-wide input defaults; the component resolves `input ?? config ?? literal` (480px / 7).

Methods 1

Name	Type	Description
`provideOgePaginationConfig(config: OgePaginationConfigInput)`	`Provider`	Application- or component-scoped defaults; shallow-merges `messages` over the built-ins.