UKI Custom Angular Components

This is a component library built utilizing Angular & Material

How to import components

import {UkiFeatureModule, UkiFeatureComponent} from 'uki-devops'

@NgModule({
  ...
  imports: [UkiFeatureModule],
  exports: [UkiFeatureComponent]
  ...
})

Note: Some features, such as the UkiDialogComponent need to be added to app.module's entryComponents

Form Fields

Note: Form fields generate error messages dynamically based off of what Validators you assign your individual controls. All form fields MUST utilize Angular's FormGroup

UkiTextModule

Example:

<od360-text-input
[formGroup]="myForm" [controlName]="'username'" [label]='"Enter username"' [icon]="'person'" (iconClick)="iconClickFunction()">
<od360-text-input>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | label | assigns label value | true | string | type | determines type of input | false | string | icon | assigns material icon | false | string [must be material icon] | hint | shows hint below form field | false | string | placeholder | assigns placeholder value | false | string

Methods | Method | Description | | ------ | ----------- | | blur | fires on input blur | | focus | fires on input focus | | iconClick | fires on icon click |  

UkiTextAreaModule

Example:

<od360-text-area
[formGroup]="myForm" [controlName]="'username'" [label]='"Enter username"' [rows]='4'>
<od360-text-area>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | label | assigns label value | true | string | rows | sets number of rows (8 is max) | false | number | type | determines type of input | false | string | icon | assigns material icon | false | string [must be material icon] | hint | shows hint below form field | false | string | placeholder | assigns placeholder value | false | string

Methods | Method | Description | | ------ | ----------- | | blur | fires on input blur | | focus | fires on input focus | | iconClick | fires on icon click |  

UkiSelectModule

Example:

<od360-select
[formGroup]="myForm" [controlName]="'favoritePokemon'" [label]='"Choose Pokemon"' [options]="pokemonArray" [hasImages]="true"
[icon]="'videogame_asset'">
<od360-select>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | label | assigns label value | true | string | options | assigns select options | true | array | displayKey | what should be displayed to user | true | property from model | imageKey | field that contains image/icon name | true if using images | property from model | initialSelection | sets default select value | false | item from options | hasImages | use if select options will contain images | false | boolean| type | determines type of input | false | string | icon | assigns material icon (also fallback for if no image found) | false | string [must bematerial icon`] | hint | shows hint below form field | false | string | placeholder | assigns placeholder value | false | string

UkiStaticTextModule

Example:

<od360-static-text
[label]='"Display label"' [value]='"Display option only"' displayKey="label">
<od360-static-text>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | label | assigns label value | true | string | value | assigns input value | true | string | icon | assigns material icon | false | string [must be material icon] | hint | shows hint below form field | false | string

Methods | Method | Description | | ------ | ----------- | | iconClick | fires on icon click |  

HTML Editor

Note: HTML editor uses ngx-quill & two way data binding

UkiHtmlEditorModule

Example:

<od360-html-editor
[(html)]="myObject.property">
<od360-html-editor>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | html | binds data | true | string  

Snackbar

UkiSnackbarModule

Example:

...
constructor(private ukiSnackbarSvc: UkiSnackbarService){}

generateSnack(data){
 this.ukiSnackbarSvc.eatSnack("person", `${data}: snackbar text`, UkiSnackbarType.INFO, null, 30)
}
...

Methods | Method | Description | | ------ | ----------- | | eatSnack | creates snackbar |  

eatSnack Arguments | Argument | Description | required | data type | | ------ | ----------- | ------ | -------| | iconName | assigns material icon | true | string [must be Material Icon] | content | assigns snackbar content | true | string | iconBackground | sets icon background color | true | UkiSnackbarType [SUCCESS, WARNING, INFO, FAILURE] | duration | sets snackbar duration | false | number [defaults to 2500] | truncateLength | sets number of characters before truncate pipe is invoked | false | number [defaults to 70]  

Dialog

Note: UkiDialogService includes a BehaviorSubject called dialogData$ that will give you access to form data upon submission

UkiDialogModule

Example [UKI Dialog]:

...
constructor(private ukiDialogSvc: UkiDialogService){}

generateDialog(){
 this.ukiDialogSvc.createUkiDialog({
           headerColor:'darkgoldenrod',
           title: "a test title!",
           subtitle: "a test sub title",
           type: Od360DialogType.FORM,
           submitButtonColor:'red',
           submitButtonIcon:'person',
           formFields: [
               {
                   type: Od360DialogInputType.TEXT_AREA,
                   label: "my label",
                   fullWidth: true,
                   defaultValue: null,
                   validators: [Validators.required],
                   name:'myControlName',
                   rows:2
               },
           ],
       }, () => this.afterClose(this.ukiDialogSvc.dialogData$.value.myControlName));
 }

afterClose(data){
 alert(data)
}
...

Example [Custom Material Dialog]:

Custom dialog component TypeScript

...
import {MAT_DIALOG_DATA} from "@angular/material/dialog"
interface CustomDialog {
   title: string;
}
constructor(@Inject(MAT_DIALOG_DATA) public data: CustomDialog){}
...

Custom dialog component HTML

<p> My title is: {{data.title || "no title provided"}} </p>

Parent component creating dialog

...
import {CustomDialogComponent} from './custom-dialog.component'

constructor(private ukiDialogSvc: UkiDialogService){}

generateDialog(){
  this.dialog.createMaterialDialog(CustomDialogComponent, null, {title: "Custom title"})
}
...

Methods | Method | Description | | ------ | ----------- | | closeDialog | closes all dialogs | | createUkiDialog | creates a UKI dialog | | createMaterialDialog | creates a custom Material dialog |  

createUkiDialog Arguments | Argument | Description | required | data type | | ------ | ----------- | ------ | -------| | dialog | UkiDialogModel | true | UkiDialogModel | afterCloseFunction | function to invoke once dialog is closed | false | function  

createMaterialDialog Arguments | Argument | Description | required | data type | | ------ | ----------- | ------ | -------| | component | Component | true | ComponentType or TemplateRef | panelClass | assigns class to panel [place in main style.scss file] | false | string | dialogData | data to inject into dialog | false | object | afterCloseFunction | function to invoke once dialog is closed | false | function  

UkiDialogModels

export interface UkiDialogModel {
  headerColor?:string;
  type: UkiDialogType;
  title: string;
  subtitle?: string;
  submitButtonTitle?: string;
  submitButtonColor?: string;
  submitButtonIcon?: string;
  formFields: UkiDialogFormField[];
  component?: ComponentType<unknown> | TemplateRef<unknown> 
}

export enum UkiDialogType {
  CONFIRMATION = 'confirmation',
  FORM = 'form',
}

export interface UkiDialogFormField {
  classList?: string;
  defaultValue: string | number | boolean;
  fullWidth?: boolean;
  label?: string;
  name?: string;
  options?: KeyValue[];
  type: UkiDialogInputType;
  validators?: ValidatorFn[];
  rows?:number;
}

export enum UkiDialogInputType{
  TEXT_INPUT='text-input',
  STATIC='static',
  TEXT_AREA='text-area'
}

export interface KeyValue {
  display: string;
  value: string;
}

export interface KeyValueGen {
  generateKeyValues(): Observable<Array<KeyValue>>;
}

Buttons

UkiButtonModule

Example:

<od360-button
[label]="'Submit'" (buttonClick)="submitForm()" [disabled]='myForm.invalid' [iconPosition]="'after'" [icon]="'person'">
<od360-button>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | label | button text | true | string | type | creates action or cancel button | false | 'cancel' of leave off | loading | sets loading condition | false | boolean | icon | sets icon | false | must be material icon | iconPosition | sets icon position | false | 'after' or leave off | color | sets background color for non cancel buttons | false | string (color) | disabled | sets disabled condition | false | boolean  

Methods | Method | Description | | ------ | ----------- | | buttonClick | fires on button click
 

Toggle

UkiToggleModule

Example:

<od360-toggle
[label]="'Toggle'" [formGroup]="myform" [controlName]="'toggleControl'" [style]="'od360-toggle-bold'">
<od360-toggle>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | label | toggle label text | true | string | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | labelPosition | sets label position | false | 'after' or leave off  

Methods | Method | Description | | ------ | ----------- | | buttonClick | fires on button click
 

Checkbox

UkiCheckboxModule

Example:

<od360-checkbox
[label]="'checkbox'" [formGroup]="myform" [controlName]="'checkboxControl'" [tooltip]="'some tip!'">
<od360-checkbox>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | label | toggle label text | true | string | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | labelPosition | sets label position | false | 'before' or leave off  

Time/Date Pickers

UkiTtimePickerModule

Example:

<od360-time-picker
[formGroup]="myForm" [controlName]="'startTime'" [label]='"Start time"' color='teal'>
<od360-time-picker>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | label | assigns label value | true | string | color | assigns color option, defaults to blue | false | string | format | determines 12 or 24 hr format, defaults to 12 hr | false | 24 or leave off | minGap | determines gap between minutes, defaults to one | false | number or leave off | hint | shows hint below form field | false | string | placeholder | assigns placeholder value | false | string

UkiDatePickerModule

Example:

<od360-date-picker
[formGroup]="myForm" [controlName]="'startdate'" [label]='"Start date"' [maxDate]="'10/20/2020'">
<od360-date-picker>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | label | assigns label value | true | string | minDate | determines earliest date can be set | false | date format 12/25/2020 | maxDate | determines latest date can be set | false | date format 12/25/2020 | hint | shows hint below form field | false | string | placeholder | assigns placeholder value | false | string

UkiDateRangePickerModule

Example:

<od360-date-range-picker
[formGroup]="myForm" [controlNameStart]="'startDate'" [controlNameEnd]="'endDate'" [minDate]="'10/20/2020'">
<od360-date-range-picker>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | formGroup | name of form where control resides | true | FormGroup | controlNameStart | name of control within form assigned to start date | true | string | controlNameEnd | name of control within form assigned to end date | true | string | label | assigns label value | true | string | minDate | determines earliest date can be set | false | date format 12/25/2020 | maxDate | determines latest date can be set | false | date format 12/25/2020 | hint | shows hint below form field | false | string | placeholder | assigns placeholder value | false | string

Autocomplete Chips

UkiAutocompleteModule

Example:

<od360-autocomplete
[formGroup]="myForm" [controlName]="'emailAddresses'" [label]='"Select emails"' [options]='autocompleteOptionArray' [color]="'teal'">
<od360-autocomplete>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | label | assigns label value | true | string | options | assigns autocomplete options | true | array [must have property of label for display purpose] | color | assigns chip color defaults to grey | false | string | type | determines type of input | false | string | hint | shows hint below form field | false | string | placeholder | assigns placeholder value | false | string

Radio Buttons

UkiRadioButtonModule

Example:

<od360-radio-button
[formGroup]="myForm" [controlName]="'radio'" [label]='"Select something"' [options]='radioArray' [horizontal]='true'>
<od360-radio-button>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | formGroup | name of form where control resides | true | FormGroup | controlName | name of control within form | true | string | label | assigns label value | true | string | options | assigns radio button options | true | array [must have property of label or name for display purpose] | type | determines type of input | false | string

Empty State

UkiEmptyStateModule

Example:

<od360-empty-state
icon='videogame_asset' text='No records found!' (buttonClick)="emptyStateClick()" buttonText='Create a record'>
<od360-empty-state>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | icon | sets icon | false | must be material icon | iconSize | sets icon size | false | string | text | sets empty state text | false | string | textSize | sets text size | false | string | buttonText | sets button text | false | string  

Methods | Method | Description | | ------ | ----------- | | buttonClick | fires on button click
 

Table

UkiTableModule

Example:

<od360-table
[tableData]="tableData"
[tableColumns]="tableColumns"
[actionButtons]='tableActionButtons'
defaultIcon='videogame_asset'
[additionalActions]='additionalActionButtons'
(selectedItemsEmitter)="selectedItemsLog($event)"
multiSelect='true'
pagination = true
toolBar = true
selectProp="userId"
emptyIcon="videogame_asset"
emptyText="No users found!"
emptyButtonText="Create a user"
(emptyButtonClick)="emptyTableClick()"    
></od360-table>

Input Properties | Prop | Description | required | data type | | ------ | ----------- | ------ | -------| | tableData | data to display on table | true | any[] | tableColumns | table columns | true | Od360Column[] | initialSortColumn | sets initial column to sort by, defaults to tableColumns[0] | true | string | initialSortDirection | sets initial direction of sort column | false | 'asc' or 'desc' | multiSelect | determines if table has multi select | false | boolean | selectProp | unique property needed for identifying selected options | false | string [tableData object key] | pagination | determines if table has pagination | false | boolean | actionButton | array of action buttons for action column | false | Od360TableActionButton | additionalActions | array of more action buttons | false | Od360MoreActionButton | highlightColor | sets highlight color on mouse over row & when row(s) selected | false | string | defaultIcon | sets backup icon if table cell has images & there is an error | false | string [mat-icon] | emptyIcon | sets icon for empty table state | false | string [mat-icon] | emptyText | sets text for empty table state | false | string | emptyButtonText | sets button text for empty table state | false | string | emptyIconSize | sets icon size for empty table state | false | string | emptyTextSize | sets text size for empty table state | false | string

| toolBar | determines if table has a toolBar | false | boolean

Methods | Method | Description | | ------ | ----------- | | selectedItemsEmitter | fires when a selection happens from table | emptyButtonClick | fires when empty state button is clicked | false | string  

Pipes

UkiTruncatePipe

Example:

<span [innerHTML]="data.htmlText | truncate: [100]"> </span>

Truncates content to number located inside []