@joster-dev/chaos-control

Chaos Control Library

This library was generated with Angular CLI version 18.0.0.

Repository

Github Package

Demo

Getting Started

update your package.json

npm install @joster-dev/chaos-control --save

import the module

+ import { FormControlModule } from '@joster-dev/form-control';

@NgModule({
  imports: [
+    FormControlModule
  ],
})

fc-button utility component

to handle click events in an accessible manner

• style: outset border

inputs

• isActive: boolean = false
  • style: inset border
• isDisabled: boolean = false
  • style: solid border
  • when disabled, button will not be tab indexable
• isValid: boolean = true
• type: 'button' | 'submit' = 'button'
• borderRadiusLeft: boolean = true
• borderRadiusRight: boolean = true

outputs

• onBlur emits FocusEvent
• onClick emits MouseEvent

fc-readonly utility component

to display information alongside controls

inputs

• model: string

fc-text control component

result will be string | null

• if line break or overflow
  • height increases
• if cleared by the user or form
  • height resets

fc-number control component

result will be number | null

• if user enters e character
  • will not change
• if user enters . character
  • if [step] is >= 1
    • will not change

fc-choice control component

to ask the user to choose from a few items

result will be <item-key>[] | <item-key> | null

• where <item-key> is the key property of the items input

inputs

• isMultiple: boolean = false
• items: { key: boolean | number | string, value: string }[] = []

fc-color control component

result will be string | null

• string result matches /^[0-9a-fA-F]{6}$/

fc-file control component

result will be FileList | null

fc-select control component

to ask the user to choose from many items

• items: { key: boolean | number | string, value: string }[] = []