@fishka/angular

Shared Angular UI components for downstream apps. Not yet published — consumed locally via a file: dependency until the API settles across consumers.

Components

SplitterComponent (fi-splitter)

Two-pane resizable splitter with a draggable divider. Both panes are always shown (down to minimumSize) — pane1 absorbs the larger share (3:1) of any extra container space; pane2 keeps its dragged/default size as a baseline but can still grow some too. [collapseMode]="'pane1' | 'pane2' | 'none'" pins one pane at its minimum and gives the other the rest (e.g. "maximize pane2" / "minimize pane2" toggle buttons) without losing the dragged pane2 size — switching back to 'none' restores the normal split. Persistence is handled through the storage-agnostic SPLITTER_PERSISTENCE injection token so each app can back it with its own storage (localStorage, a settings service, ...).

<fi-splitter mode="split-vertically" [minimumSize]="[300, 200]" persistenceKey="my-app:split">
  <div pane1>...</div>
  <div pane2>...</div>
</fi-splitter>

minimumSize is [pane1MinPx, pane2MinPx]; defaultPane2Size (px) seeds pane2 the first time, before anything's persisted. To persist the dragged pane2 size, provide SPLITTER_PERSISTENCE (optional — without it, pane2 resets to defaultPane2Size on reload):

import { SPLITTER_PERSISTENCE, type SplitterPersistence } from '@fishka/angular';

const persistence: SplitterPersistence = {
  getNumber: key => {
    /* read a number, or undefined */
  },
  setNumber: (key, value) => {
    /* write a number */
  },
};

providers: [{ provide: SPLITTER_PERSISTENCE, useValue: persistence }];

Each pane defaults to overflow: auto (--splitter-pane1-overflow / --splitter-pane2-overflow). Override to hidden from the consumer if that pane's own content already manages its own internal scrolling (e.g. a fixed header + scrolling body) — otherwise the default stacks a second, usually- empty scrollbar on top of the content's own:

fi-splitter {
  --splitter-pane2-overflow: hidden;
}

Observer utilities

resizeObserver(element) / intersectionObserver(element, options?) — RxJS wrappers over ResizeObserver / IntersectionObserver.

Directives

• [fiAutofocus] — focuses the host element after view init (native autofocus doesn't reliably work in Angular views).
• [fiAutoFocusOnVisible] — focuses the host element the moment it transitions from invisible to visible (e.g. a panel that gets toggled open). visibilityThreshold input, default 0.5.
• [fiNoDragClick] — emits (fiNoDragClick) only when mousedown/mouseup didn't move past a 2px threshold, so a drag gesture doesn't also fire a click.
• [fiFillAvailableScreenHeight] — sizes the host element's max-height (and optionally height) to fill the viewport space remaining below it. Inputs: minHeight, bottomSpace, heightMode ('max-height' | 'max-height-and-height') — named heightMode rather than mode so it doesn't collide with other directives' own mode input (e.g. SplitterComponent's) on the same element.

All four use the fi selector prefix.

Development

• npm run build — ng-packagr build into dist/ (Angular Package Format).
• npm test — Jest + jest-preset-angular (TestBed) component tests.
• npm run lint, npm run format — eslint + prettier.
• npm run typecheck — tsc --noEmit.

Published by the author separately (npm run release); consumers pin a version once it's out.