@terminus/ui NPM

Terminus UI Library

The library of UI components used for Terminus applications.

Table of Contents

Library Purpose

This library was created to assist Terminus engineers in maintaining a consistent experience across applications while following a unified design language.

The library is open source with the hopes that others may find solutions and ideas here, as we have done while browsing so many other repositories. While we want to make decisions that are best for everyone, in the end, the needs of the Terminus engineering team must come first.

If a deviation makes sense for the feature itself, but not for Terminus, we support (and will assist in) abstracting the functionality out for generalization.

This library is heavily based on Material Design currently. This provides us a way to rely on very well thought out usability and accessibility decisions for areas we have not yet addressed internally. While we hold Material in high regard, we do not believe that all of their decisions are best for the Terminus UI specifically.

Documentation

The available features table contains links for functional and usage documentation for each feature.

Available Features

:hammer: started
:white_check_mark: available
:hankey: deprecated

Components

Feature	Notes	Status	Demo	Docs	Usage
alert
autocomplete	Input with autocomplete	:white_check_mark:	Demo	Docs	Usage
autofocus	Focus a focusable element on load	:white_check_mark:	Demo	Docs	Usage
badge
button		:white_check_mark:	Demo	Docs
breadcrumbs
card		:white_check_mark:	Demo	Docs	Usage
chart	Charts, graphs etc	:white_check_mark:	Demo	Docs	Usage
chip
checkbox		:white_check_mark:	Demo	Docs	Usage
confirmation	Add a confirmation step to any `ts-button`	:white_check_mark:	Demo	Docs	Usage
copy		:white_check_mark:	Demo	Docs
csv entry	Manually enter CSV values	:white_check_mark:	Demo	Docs	Usage
datepicker	Input with calendar pop-up	:white_check_mark:	Demo	Docs	Usage
date-range	Dual inputs with calendar pop-ups	:white_check_mark:	Demo	Docs	Usage
dialog
divider
expansion
file-upload	File upload with drag and drop	:white_check_mark:	Demo	Docs	Usage
input mask	Custom masks for inputs (phone, zip, etc)	:white_check_mark:	Demo	Docs	Usage
icon	Supported icons: https://material.io/icons	:white_check_mark:	Demo	Docs	Usage
icon-button		:white_check_mark:	Demo	Docs	Usage
input		:white_check_mark:	Demo	Docs	Usage
link		:white_check_mark:	Demo	Docs	Usage
loading overlay	Overlay with loading spinner	:white_check_mark:	Demo	Docs
login form	Email/password with 'remember me' checkbox	:white_check_mark:	Demo	Docs
menu		:white_check_mark:	Demo	Docs	Usage
navigation	Global navigation menu	:white_check_mark:	Demo	Docs
paginator	Paging controls for collections	:white_check_mark:	Demo	Docs	Usage
pipes	A collection of pipes for Angular	:white_check_mark:	Demo	Docs
progress
progression	i.e. Stepper, wizard
radio-group		:white_check_mark:	Demo	Docs	Usage
scrollbars	Custom scrollars for both axis'	:white_check_mark:	Demo	Docs	Usage
search	input with search capabilities	:white_check_mark:	Demo	Docs
select		:white_check_mark:	Demo	Docs
spacing	Helpers for consistent spacing	:white_check_mark:	Demo	Docs
sort	Used by `table` for column sorting	:white_check_mark:	(see table demo)	Docs	Usage
table		:white_check_mark:	Demo	Docs	Usage
tabs
toggle		:white_check_mark:	Demo	Docs
tooltip		:white_check_mark:	Demo	Docs

Pipes

:books: Pipes Documentation :circus_tent: Pipes Demo

Pipe	Notes	Status
`tsDate`	`short`, `medium`, `extended`, `timestamp`	:white_check_mark:
`tsRoundNumber`	Round a number to a specific precision	:white_check_mark:
`tsSentenceCase`	Convert string casing to sentence-case	:white_check_mark:
`tsTimeAgo`	Human-readable time span	:white_check_mark:
`tsTitleCase`	Title Case A String	:white_check_mark:

Services

Feature	Notes	Status	Demo	Docs	Usage
Validators	Expose custom validation methods for reactive forms	:white_check_mark:	Demo	Docs	Usage

Available Validators

Name	Purpose
`creditCard`	A credit card number must be valid
`email`	An email address must be valid
`equalToControl`	A control's value must be equal to another control's value
`greaterThan`	A number must be greater than another value
`greaterThanOrEqual`	A number must be greater than or equal to another value
`lessThan`	A number must be less than another value
`lessThanOrEqual`	A number must be less than or equal to another value
`lowercase`	A value must contain a minimum amount of lowercase characters
`minDate`	A date must be after a minimum date
`maxDate`	A date must be before a maximum date
`password`	A password must meet certain requirements
`url`	A URL must be valid

Constants

Feature	Notes	Status	Demo	Docs	Usage
`TS_SPACING`	Expose our spacing sizes in TypeScript	:white_check_mark:	Demo

Style Helpers

Feature	Status	Docs
animation	:hammer:
assets	:hammer:
breakpoints	:white_check_mark:	Docs
colors	:white_check_mark:	Docs
cursors	:white_check_mark:	Docs
layout	:white_check_mark:	Docs
shadows	:white_check_mark:	Docs
spacing	:white_check_mark:	Docs
typography	:white_check_mark:	Docs
z-index	:white_check_mark:	Docs

Installation

Install the library and required dependencies:

$ yarn add @terminus/ui @terminus/ngx-tools @angular/flex-layout@6.0.0-beta.15 date-fns@2.0.0-alpha.7

Global Styles

To use the global styles, import the CSS file into your stylesheets:

@import '@terminus/ui/terminus-ui.css'

SCSS Helpers

To use the provided SCSS helper methods/variables/mixins, import the helpers file from @terminus/ui:

@import '~@terminus/ui/helpers'

Contributing

View the contribution documentation and the development documentation.

Contributors

Thanks goes to these wonderful people (emoji key):

Benjamin Charity 💻 📖 ⚠️ 🎨 🤔 👀 🔧	coreyterminator 💻	Wendy 🐛 💻	Brian Malinconico 🐛 🤔	David Harkness 💻	kal93 🐛	divyameher 🐛
Devon Peet 🎨 🤔	dean jones 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Project Resources

Semantic Release - Automatically release versioned release to NPM and generate a changelog in the Github tag.
Commitizen - Interactive cli for enforcing commit message format.
Commitizen VSCode Plugin - VSCode plugin for commitizen.
Doctoc - Generate documentation table of contents.
CodeCov - Code coverage reporting.

@angular/cdk @angular/material text-mask-addons text-mask-core tslib @amcharts/amcharts4 @amcharts/amcharts4-geodata highcharts

@zalastax/nolb-_ter @infinitebrahmanuniverse/nolb-_ter @everything-registry/sub-chunk-905

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago