WORK IN PROGRESS

Table of Contents

• Disclaimer
• Abstract
• Key Features
• Common Input Properties
• Default Components
  • Badge
  • Button
  • Switch
  • Card
    • Card Section Basic
  • Entry Container
  • Entry Metric
  • Entry Key Value
  • Entry Tile Item
  • Entry Tile
  • Metric Tile
  • Tabs
  • Tab
  • Toolbar
  • Value Tile
• Content and Navigation Components
  • Grid
  • Menu Bar
  • Menu Item (config only)
  • Window
  • Content
• Component Usage

Disclaimer

This is a private fun project which has no productive focus. It is not actively maintained and there is no support. It is free of use at own risk.

Abstract

Welcome to the documentation of this project, a comprehensive and modular library designed to streamline the development of user interfaces in Angular applications. This documentation serves as a guide to help you leverage the power and flexibility of our UI components effectively in your projects.

It offers a rich collection of reUseable components that are carefully crafted to enhance the user experience while promoting consistency and scalability across applications. Whether you are building a simple web application or a complex enterprise-grade solution, our library provides the building blocks you need to create modern and visually appealing interfaces with ease.

Key Features:

Modular Architecture: Our library follows a modular architecture, allowing you to pick and choose the components you need for your specific project requirements. Each component is self-contained and can be easily integrated into your Angular application, promoting code reusability and maintainability.

Common Input Properties

These properties are supported in each component and so only described once in this section.
In this documentation there is a property 'Useable standalone' for each component. Some components are only designed to be nested inside another one. Those would have a 'No' here!

isLoading

boolean

Indicates whether the content is still loading. If set to true the component will show a loading indicator.
Default is false. When use building blocks consider using isLoading on most granular components.

tooltip

string

Tooltip is an optional text that can be shown on mouse over for applicable components.
In each component it is defined if this supports tooltips or not.

data

any

This property can be optionally set to any value for further / future use.

id

string

The Id can uniquely indentify the current item. All output events will emit this id (for example onClick events).

errorMessage

string

If set the component will fallback in its error state and will show an overlay with the provided errorMessage.
Any content or loading states will be overriden / hidden.
Please make sure that this is understandable and short.

Default Components

Short description about the purpose and content of the component.

Badge

Useable standalone: Yes
Supports loading indicator: No
Supports tooltip: Yes
Supports error message: No
Selector: ui-badge

Inputs

value

Type: number
Optional: Yes (in case label is used, this can be omitted)

Represents the number that is shown in the badge circle. Maximum is 99. Everything bigger is shown as 99+.

label

Type: string
Optional: Yes (in case value is used, this can be omitted)

Displays text on the left to the badge value. Can also be used without setting a value.

Accepts as Sub-Component

NONE

Useable inside

• Button
• Accordion Panel Header
• Entry Tile Item
• Value Tile

Usage

<ui-badge value="4" [style]="3"></ui-badge>

Screenshot

Button

Useable standalone: Yes
Supports loading indicator: Yes
Supports error message: No
Supports tooltip: Yes
Selector: ui-button

Inputs

label

Type: string
Optional: Yes
The text label displayed on the button.

style

Type: ButtonStyle
Optional: Yes (default: Primary)
Defines the visual style of the button.
Possible values:

• Simple_primary = 0: Small petrol button, no border/background
• Simple_destructive = 6: Small red button, no border/background
• Primary = 1: Petrol background, white text (default)
• Secondary = 2: Grey background, white text
• Outline = 3: White fill, petrol border
• Destructive = 4: Red background, white text
• Confirm = 5: Green background, white text

icon

Type: IconDefinition
Optional: Yes
Font Awesome icon to display in the button.

isDisabled

Type: boolean
Optional: Yes (default: false)
Disables the button if set to true.

onClick

Type: EventEmitter<MouseEvent>
Emits when the button is clicked.

simpleOnly

Type: boolean
Internal use only
Forces simple-only styles (overrides others).

iconOnlySimpleStyle

Type: boolean
Internal use only
Forces icon-only simple style (overrides others).

whiteMode

Type: boolean
Optional: Yes (default: false)
Use for simple styles on dark backgrounds.

Accepts as Sub-Component

• Badge

Useable inside

• Entry Tile
• Entry Item
• Card
• Card Section Basic
• Toolbar
• Value Tile

Usage

<ui-button label="Apply" [icon]="faCheck()" [style]="1">

Screenshot

Switch

Useable standalone: Yes
Supports loading indicator: No
Supports error message: No
Supports tooltip: Yes
Selector: ui-switch

Inputs

label

Type: string
Optional: Yes
The text label displayed next to the switch.

state

Type: boolean
Optional: Yes (default: false)
Two-way binding supported
The current state of the switch (on/off).

isDisabled

Type: boolean
Optional: Yes (default: false)
Disables the switch if set to true.

Accepts as Sub-Component

NONE

Useable inside

• Accordion Panel Header
• Entry Tile Item

Usage

<ui-switch label="Enable feature" [(state)]="featureEnabled">

Screenshot

Card

Useable standalone: Yes
Supports loading indicator: Yes
Supports error message: Yes
Supports tooltip: Yes (on header)
Selector: ui-card

Inputs

header

Type: string
Required: Yes
Main header title of the card, shown at the top.

headerRight

Type: string
Optional: Yes
Header content shown in the right slot of the header.

style

Type: CardStyle
Optional: Yes (default: None)
Defines the visual style of the card header and border.
Possible values:

• None = grey (default)
• Attention = orange
• Error = red
• Success = green
• Highlight = petrol

toggleSelect

Type: boolean
Optional: Yes (default: false)
If true and isClickable is true, the selection of the component is retained until the next click (toggles).

isSelected

Type: boolean
Optional: Yes (default: false)
Selection state of the component. If isClickable and toggleSelect are true, the selection is retained until the next click.

isClickable

Type: boolean
Optional: Yes (default: false)
If true, the card is clickable and emits the onClick event.

onClick

Type: EventEmitter<string | null>
Emits the id of the component when clicked.

Accepts as Sub-Component

• Button (in header only)
• Switch (in header only)
• Card Section Basic

Screenshot

Card :: Card Section Basic

Useable standalone: No
Supports loading indicator: Yes
Supports error message: Yes
Supports tooltip: No
Selector: ui-card-section-basic

Inputs

header

Type: string
Optional: Yes
Header/title for this section, shown on top before text.

text

Type: string
Optional: Yes
Text shown as section content. Uses innerHTML so HTML formatting can be applied.

list

Type: Array<string>
Optional: Yes
Simple unformatted list shown below the text.

style

Type: CardStyle
Optional: Yes (default: None)
Defines the style and icon of the section.
Possible values:

• None = no icon (default)
• Attention = orange
• Error = red
• Success = green
• Information = grey

styledMessage

Type: string
Optional: Yes
Message shown in the style color. Ignored if style is None.

showStyledBackground

Type: boolean
Optional: Yes (default: false)
Shows a colored background if the style is not None.

toggleSelect

Type: boolean
Optional: Yes (default: false)
If true and isClickable is true, the selection of the component is retained until the next click (toggles).

isSelected

Type: boolean
Optional: Yes (default: false)
Selection state of the component. If isClickable and toggleSelect are true, the selection is retained until the next click.

isClickable

Type: boolean
Optional: Yes (default: false)
If true, the section is clickable and emits the onClick event.

onClick

Type: EventEmitter<string | null>
Emits the id of the component when clicked.

Accepts as Sub-Component

• Button
• Switch
• Entry Key Value

Usage Example

<ui-card header="Orders" [style]="1">
  <ui-card-section-basic 
    header="Partner A" 
    [style]="3">
  </ui-card-section-basic>
  <ui-card-section-basic 
    text="There is some text" 
    styledMessage="The confirmation is pending since 2 days."
    header="Partner A"
    [showStyledBackground]="true"
    [style]="1">
  </ui-card-section-basic>
</ui-card>

Entry Container

Useable standalone: Yes
Supports loading indicator: No
Supports error message: No
Supports tooltip: No
Selector: ui-entry-container

This component is just a wrapper around the Entry Key Value component and Entry Metric component. They will be layouted and there is some event handling on top. Both of them are designed to be used inside this Entry Container but they can also be used inside others and the Entry Key Value component also standalone.

Inputs

isClickable

Type: boolean
Optional: Yes (default: false)
If true, the entry container is clickable and emits the onClick event.

toggleSelect

Type: boolean
Optional: Yes (default: false)
If true and isClickable is true, the selection of the component is retained until the next click (toggles).

isSelected

Type: boolean
Optional: Yes (default: false)
Selection state of the component. If isClickable and toggleSelect are true, the selection is retained until the next click.

onClick

Type: EventEmitter<string | null>
Emits the id of the component when clicked.

Accepts as Sub-Component

• Entry Key Value (max 2)
• Entry Metric (max 1)

Useable inside

• Metric Tile

Usage

<ui-entry-container [isClickable]="true" (onClick)="handleClick($event)"> <ui-entry-key-value label="State" value="Completed"></ui-entry-key-value> <ui-entry-metric [percent]="33"></ui-entry-metric> </ui-entry-container>

Screenshot

Entry Metric

Useable standalone: No
Supports loading indicator: Yes
Supports error message: Yes
Supports tooltip: Yes
Selector: ui-entry-metric

This is just a very simple bar to show percentage values (0-100) as a colored bar. If uses just scss, no other library needed.

Inputs

percent

Type: number
Optional: No (default: 0)
Value to show, from 0 to 100. Values above 100 are capped at 100.

style

Type: EntryMetricStyle
Optional: Yes (default: None)
Defines the color style of the metric bar.
Possible values:

• None = default
• Attention = orange
• Error = red
• Success = green

Accepts as Sub-Component

NONE

Useable inside

• Entry Container
• Card Section Basic

Usage

<ui-entry-metric [percent]="70" [style]="2"></ui-entry-metric>

Screenshot

Entry Key Value

Useable standalone: Yes
Supports error message: Yes
Supports loading indicator: Yes
Supports tooltip: Yes (right side)
Selector: ui-entry-key-value

The standard component to show simple key/value pairs in this library. It can be used everywhere and as well it is designed to be used inside several other components inside this lib.

Inputs

label

Type: string
Required: Yes
Label for the key/value pair, shown on the left.

value

Type: string
Required: Yes
Value for the key/value pair, shown on the right.

style

Type: EntryKeyValueStyle
Optional: Yes (default: None)
Defines the color style of the item.
Possible values:

• None = black (default)
• Attention = orange
• Error = red
• Success = green
• Dimmed = grey

isBig

Type: boolean
Optional: Yes (default: false)
If true, increases the font size of the key and value (and icon, if present).

showIcon

Type: boolean
Optional: Yes (default: false)
If true, displays a style-based icon next to the value.

Accepts as Sub-Component

NONE

Useable inside

• Entry Container
• Entry Tile
• Card Section Basic

Usage

<ui-entry-key-value label="Status" value="Completed" [style]="3" [isBig]="true" [showIcon]="true"></ui-entry-key-value>

Screenshot

Entry Tile

Useable standalone: Yes
Supports error message: No
Supports loading indicator: Yes
Supports tooltip: No
Selector: ui-entry-tile

A container component for grouping multiple entry tile items and/or key-value pairs, often used for displaying lists or paginated data.

Inputs

isCollapsed

Type: boolean
Optional: Yes (default: false)
Controls whether the tile is collapsed (hides content).

currentPage

Type: number
Optional: Yes (default: 0)
Current page index for paginated content.

paginationTooltip

Type: string
Optional: Yes (default: 'Page ')
Tooltip text for pagination controls.

Accepts as Sub-Component

• Entry Tile Item (max 5)
• Entry Key Value (max 2)
• Button (max 2)

Useable inside

NONE

Usage

<ui-entry-tile>
  <ui-entry-key-value label="Order" value="12345"></ui-entry-key-value>
  <ui-entry-tile-item header="Details" [style]="2">
    <ui-badge value="2"></ui-badge>
    <ui-button label="Edit"></ui-button>
    <ui-switch label="Active"></ui-switch>
  </ui-entry-tile-item>
  <ui-entry-tile-item header="Shipping" [style]="1">
    <ui-badge value="1"></ui-badge>
  </ui-entry-tile-item>
</ui-entry-tile>

Screenshot

Entry Tile:: Entry Tile Item

Useable standalone: No
Supports error message: Yes
Supports loading indicator: Yes
Supports tooltip: Yes
Selector: ui-entry-tile-item

Represents a single item within an entry tile, supporting badges, buttons, and switches as sub-components.

Inputs

header

Type: string
Optional: Yes
Group header to be shown at the top of the item.

style

Type: EntryItemStyle
Optional: Yes (default: None)
Defines the color style of the item.
Possible values:

• None = grey (default)
• Attention = orange
• Error = red
• Success = green

Accepts as Sub-Component

• Badge
• Button
• Switch

Useable inside

• Entry Tile

Metric Tile

Useable standalone: Yes
Supports error message: No
Supports loading indicator: No
Supports tooltip: No
Selector: ui-metric-tile

A container component for displaying multiple metric entries, each represented by an Entry Container with a single key-value and a single metric. Useful for dashboards and summary views.

Inputs

header

Type: string
Required: Yes
Header of the metric tile, shown at the top.

description

Type: string
Optional: Yes
Description text shown below the header and above the tile content.

Accepts as Sub-Component

• Entry Container (max 5, each with max 1 key-value and 1 metric)

Useable inside

NONE

Usage

<ui-metric-tile header="Test Metrics" description="Overview of current metrics">
  <ui-entry-container>
    <ui-entry-key-value label="None" value="14%" [style]="1"></ui-entry-key-value>
    <ui-entry-metric [percent]="14" [style]="1"></ui-entry-metric>
  </ui-entry-container>
  <ui-entry-container>
    <ui-entry-key-value label="Started" value="33%"></ui-entry-key-value>
    <ui-entry-metric [percent]="33"></ui-entry-metric>
  </ui-entry-container>
  <ui-entry-container>
    <ui-entry-key-value label="Completed" value="53%" [style]="3"></ui-entry-key-value>
    <ui-entry-metric [percent]="53" [style]="3"></ui-entry-metric>
  </ui-entry-container>
</ui-metric-tile>

Screenshot

Tabs

Useable standalone: Yes
Supports error message: No
Supports loading indicator: No
Supports tooltip: No
Selector: ui-tabs

A container component for organizing content into multiple tabbed panels. Handles tab switching, active state, and navigation controls.

Inputs

activeIndex

Type: number
Optional: Yes (default: -1)
Controls the active tab by index (0-based). Overrides the isActive property of child tabs.

showPrevNextButtons

Type: boolean
Optional: Yes (default: true)
If true, shows previous/next tab navigation buttons.

Accepts as Sub-Component

• Tab

Useable inside

• Any container

Usage

<ui-tabs [(activeIndex)]="activeTabIndex" [showPrevNextButtons]="true">
  <ui-tab label="Fruits" badgeValue="2" badgeStyle="3">
    <li>Apple</li>
    <li>Lemon</li>
  </ui-tab>
  <ui-tab label="Pizza" [isActive]="true">
    <li>Salami</li>
    <li>Funghi</li>
  </ui-tab>
  <ui-tab label="Disabled" [isDisabled]="true">
    <li>Unreachable</li>
    <li>Content</li>
  </ui-tab>
  <ui-tab label="More Fruits">
    <li>Kiwi</li>
    <li>Banana</li>
  </ui-tab>
</ui-tabs>

Screenshot

Tabs:: Tab

Useable standalone: No
Supports error message: No
Supports loading indicator: No
Supports tooltip: Yes
Selector: ui-tab

Represents a single tab within a ui-tabs container. Can display a label, badge, and any content.

Inputs

label

Type: string
Optional: Yes
Label for this tab, shown in the tab header.

isActive

Type: boolean
Optional: Yes
Controls whether this tab is currently active. Managed by the parent ui-tabs if activeIndex is used.

isDisabled

Type: boolean
Optional: Yes (default: false)
If true, the tab is disabled and cannot be selected.

badgeValue

Type: number
Optional: Yes
Shows a badge with the given value next to the tab label.

badgeStyle

Type: BadgeStyle
Optional: Yes (default: None)
Defines the style of the badge if badgeValue is set.

Accepts as Sub-Component

Everything (any content can be placed inside a tab)

Useable inside

• Tabs

Usage

see Tabs Component

Toolbar

Useable standalone: Yes
Supports error message: No
Supports loading indicator: No
Supports tooltip: No
Selector: ui-toolbar

A horizontal bar for arranging buttons, badges, switches, and value tiles. Supports left/right alignment via the slot attribute on sub-components.

Inputs

text

Type: string
Optional: Yes
Text shown at the left side before any sub-components.

maxButtons

Type: number
Optional: Yes (default: 10)
Maximum number of buttons allowed in the toolbar.

maxBadges

Type: number
Optional: Yes (default: 3)
Maximum number of badges allowed in the toolbar.

maxSwitches

Type: number
Optional: Yes (default: 3)
Maximum number of switches allowed in the toolbar.

maxValueTiles

Type: number
Optional: Yes (default: 2)
Maximum number of value tiles allowed in the toolbar.

Accepts as Sub-Component

• Badge
• Button
• Switch
• Value Tile

Useable inside

• Modal
• Window

Usage

<ui-toolbar text="Headline">
  <ui-button slot="left" label="Left Simple #1" [icon]="faCheck()" [style]="0"></ui-button>
  <ui-badge [style]="0" label="CTP2" slot="left"></ui-badge>
  <ui-value-tile key="Vin" value="WDB0101010110" slot="right">
    <ui-button [icon]="faCopy()" label="test"></ui-button>
    <ui-button [icon]="faExternalLink()" [style]="0"></ui-button>
  </ui-value-tile>
  <ui-button label="Right #1" slot="right" [isLoading]="true">
    <ui-badge value="3"></ui-badge>
  </ui-button>
</ui-toolbar>

Screenshot

With other components as example content in left and right slots.

Value Tile

Useable standalone: Yes
Supports loading indicator: Yes
Supports tooltip: Yes
Selector: ui-value-tile

Displays a key/value pair with optional color state, badges, and buttons. Designed for use in toolbars and dashboards.

Inputs

key

Type: string
Required: Yes
The key (or label) shown on the left.

value

Type: string
Required: Yes
The value/content shown on the right.

style

Type: ValueTileStyle
Optional: Yes (default: None)
Defines the color style of the tile.
Possible values:

• None = grey (default)
• Attention = orange
• Error = red
• Success = green

Accepts as Sub-Component

• Badge (max 1)
• Button (max 2)

Useable inside

• Toolbar

Usage

<ui-value-tile key="Vin" value="WDB0101010110">
  <ui-button [icon]="faCopy()" label="Copy"></ui-button>
  <ui-button [icon]="faExternalLink()" [style]="0"></ui-button>
</ui-value

Screenshot

Content and Navigation Components

Grid

Useable standalone: Yes
Supports error message: No
Supports loading indicator: No
Supports tooltip: No
Selector: ui-grid

A responsive container component for arranging cards, entry tiles, and metric tiles in a multi-column grid layout.
You can specify the number of columns (up to 6), and assign components to specific columns using the grid-column attribute.
The grid automatically distributes its content into columns and adapts to the available width.

Inputs

columns

Type: number
Required: Yes
Number of columns to display (maximum: 6).

Accepts as Sub-Component

• Card
• Entry Tile
• Metric Tile

Useable inside

• Any container

Usage

<ui-grid [columns]="3">
  <ui-card grid-column="1" header="Card 1"></ui-card>
  <ui-entry-tile grid-column="2"></ui-entry-tile>
  <ui-metric-tile grid-column="3"></ui-metric-tile>
</ui-grid>

Menu Bar

Useable standalone: Yes
Supports loading indicator: No
Supports tooltip: No
Selector: ui-menu-bar

Accepts

• Menu Item

Menu Item (config only)

Useable standalone: No
Supports loading indicator: No
Supports tooltip: Yes
Selector: uic-menu-item

Useable inside

• Menu Bar

Window

Useable standalone: Yes
Supports loading indicator: Yes
Supports tooltip: No
Selector: ui-window

Accepts

• Content
• Menu Bar

Content

Useable standalone: Yes
Supports loading indicator: Yes
Supports tooltip: No
Selector: ui-content

Useable inside

• Window

Component Usage

tbd