# uki-devops

> This is a component library built utilizing `Angular` & `Material`

Latest version **0.0.133** (published 2021-05-14) · 0 weekly downloads

## Install

```sh
npm install uki-devops
pnpm add uki-devops
yarn add uki-devops
bun add uki-devops
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.133 |
| Published | 2021-05-14 |
| First published | 2020-09-18 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alexlloyd89 |

## Links

- npm: https://www.npmjs.com/package/uki-devops
- npm.io page: https://npm.io/package/uki-devops

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 0.0.133 (latest) — 2021-05-14
- 0.0.131 — 2021-05-14
- 0.0.130 — 2021-05-14
- 0.0.129 — 2021-05-14
- 0.0.128 — 2021-05-14
- 0.0.126 — 2021-05-14
- 0.0.125 — 2021-05-14
- 0.0.124 — 2021-05-14
- 0.0.123 — 2021-05-14
- 0.0.122 — 2021-05-14
- 0.0.121 — 2021-05-13
- 0.0.119 — 2021-05-13
- 0.0.118 — 2021-05-13
- 0.0.117 — 2021-04-30
- 0.0.115 — 2021-04-28
- … 76 more at https://npm.io/package/uki-devops/versions

## README

# UKI Custom Angular Components

This is a component library built utilizing `Angular` & `Material`

## How to import components

```js
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:
 ```html
<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

&nbsp;

Methods
| Method | Description | 
| ------ | ----------- |
| blur | fires on input blur | 
| focus | fires on input focus | 
| iconClick | fires on icon click | 
&nbsp;
### UkiTextAreaModule
Example:
 ```html
<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

&nbsp;

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

### UkiSelectModule
Example:
 ```html
<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

&nbsp;

### UkiStaticTextModule
Example:
 ```html
<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

&nbsp;

Methods
| Method | Description | 
| ------ | ----------- |
| iconClick | fires on icon click |
&nbsp;

---

&nbsp;

## HTML Editor
##### Note: HTML editor uses ngx-quill & two way data binding
### UkiHtmlEditorModule
Example:
 ```html
<od360-html-editor
 [(html)]="myObject.property">
 <od360-html-editor>
```
Input Properties
| Prop | Description | required | data type |
| ------ | ----------- | ------ | -------|
| html | binds data | true | string
&nbsp;

---

&nbsp;

## Snackbar
### UkiSnackbarModule
Example:
 ```ts
...
constructor(private ukiSnackbarSvc: UkiSnackbarService){}

generateSnack(data){
  this.ukiSnackbarSvc.eatSnack("person", `${data}: snackbar text`, UkiSnackbarType.INFO, null, 30)
}
...
```
Methods 
| Method | Description |
| ------ | ----------- |
| eatSnack | creates snackbar |
&nbsp;

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]
&nbsp;

---

&nbsp;

## Dialog
##### Note: UkiDialogService includes a `BehaviorSubject` called `dialogData$` that will give you access to form data upon submission
### UkiDialogModule
Example [UKI Dialog]:
 ```ts
...
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
 ```ts
 ...
import {MAT_DIALOG_DATA} from "@angular/material/dialog"
interface CustomDialog {
    title: string;
}
constructor(@Inject(MAT_DIALOG_DATA) public data: CustomDialog){}
...
```
Custom dialog component HTML

```html
<p> My title is: {{data.title || "no title provided"}} </p>
```
Parent component creating dialog
```ts
...
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 |
&nbsp;

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

createMaterialDialog Arguments
| Argument | Description | required | data type |
| ------ | ----------- | ------ | -------|
| component | Component | true | ComponentType<unknown> or TemplateRef<unknown> 
| 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
&nbsp;

UkiDialogModels
```ts
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>>;
}

```
&nbsp;

---

&nbsp;

## Buttons
### UkiButtonModule
Example:
 ```html
<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
&nbsp;

Methods
| Method | Description | 
| ------ | ----------- |
| buttonClick | fires on button click  
&nbsp;

---

&nbsp;

## Toggle
### UkiToggleModule
Example:
 ```html
<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
&nbsp;

Methods
| Method | Description | 
| ------ | ----------- |
| buttonClick | fires on button click  
&nbsp;

---

&nbsp;

## Checkbox
### UkiCheckboxModule
Example:
 ```html
<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
&nbsp;

---
&nbsp;
## Time/Date Pickers 
&nbsp;
### UkiTtimePickerModule
Example:
 ```html
<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


&nbsp;
### UkiDatePickerModule
Example:
 ```html
 <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

&nbsp;


&nbsp;
### UkiDateRangePickerModule
Example:
 ```html
 <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

&nbsp;
 ---
&nbsp;
## Autocomplete Chips
### UkiAutocompleteModule
Example:
 ```html
<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

&nbsp;

 ---
&nbsp;
## Radio Buttons
### UkiRadioButtonModule
Example:
 ```html
<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 

&nbsp;
 ---
&nbsp;
## Empty State
### UkiEmptyStateModule
Example:
 ```html
<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
&nbsp;

Methods
| Method | Description | 
| ------ | ----------- |
| buttonClick | fires on button click  
&nbsp;

---

&nbsp;

## Table
### UkiTableModule
Example:
 ```html
<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 

<!-- //come back to this -->
| toolBar | determines if table has a toolBar | false | boolean


&nbsp;

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

---

---
&nbsp;
## Pipes
### UkiTruncatePipe
Example:
 ```html
 <span [innerHTML]="data.htmlText | truncate: [100]"> </span>
```
Truncates content to number located inside `[]`

---
_Source: https://npm.io/package/uki-devops · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._