@longevitydoc/ruschlikon

Angular 21 UI component library for LongevityDoc applications.

Installation

npm i @longevitydoc/ruschlikon

Setup

Import the global styles in your angular.json or styles.scss:

"styles": [
  "node_modules/@longevitydoc/ruschlikon/src/lib/styles.css"
]

Import RuschlikonModule in any NgModule or standalone component:

import { RuschlikonModule } from '@longevitydoc/ruschlikon';

Components

| Selector | Description | |---|---| | rui-button | Button with variants: primary, gradient, gold, white, red; supports loading state | | rui-button-group | Segmented button group, implements ControlValueAccessor | | rui-input | Text input with label, error, icon, password toggle, and ngx-mask support | | rui-textarea | Textarea with label and error | | rui-input-selector | Typeahead input with dropdown | | rui-option-selector | Static dropdown selector | | rui-checkbox | Checkbox with custom styling | | rui-card | Card container with optional title, subtitle, and icon | | rui-modal | Modal dialog, opened programmatically via ModalService | | rui-toast | Toast notification container, driven by ToastService | | rui-pagination | Pagination control | | rui-stepper | Step progress indicator |

Services

ModalService

constructor(private modal: ModalService) {}

open() {
  this.modal.open(MyComponent, 'Title', optionalData)
    .subscribe(result => console.log(result));
}

The component loaded into the modal should emit an onClose EventEmitter to close it and return a value.

ToastService

constructor(private toast: ToastService) {}

show() {
  this.toast.showToast({ title: 'Saved', level: 'success' });
}

Toast levels: info | success | warning | error.

Place <rui-toast /> once in your root component template.

Design tokens

The stylesheet exposes CSS custom properties:

--blue-5: #011337  /* primary text */
--blue-4: #02246B
--blue-3: #355089
--blue-2: #7A8294
--blue-1: #CCD3E1
--blue-0: #E7E9ED
--gold:   #BF9B30
--red:    #A6054C
--all-white: #ffffff
--light-gray: #F2F2F2

Typography utility classes: .header-1/2/3, .title-1/2/3, .body-1/2/3/4, .caption-1/2/3. Append -ru suffix for Cyrillic variants (IBM Plex Mono).

Requirements

• Angular 21+
• TypeScript 5.9+

Author

[email protected]