uki-devops v0.0.133
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 tableColumns0 | 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 []
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago