uki-devops

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 be material 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

---

---

 

Pipes

UkiTruncatePipe

Example:

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

Truncates content to number located inside []