Uoa Web Components Library
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
`
- Call defineCustomElements(), it needs to be called once during the bootstrapping of your application. One convenient place to do this is in main.ts as such:
`
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from '@uoa/web-components/dist/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.log(err));
defineCustomElements();
`
Include web components style sheet to angular.json file styles tag.
`
"styles": [
{
"input": "node_modules/@uoa/web-components/dist/web-components/web-components.css"
},
],
`
Include web components svgs to angular.json file assets tag.
`
"assets": [
{
"glob": "*/",
"input": "src/assets",
"output": "assets"
},
{
"glob": "*/",
"input": "node_modules/@uoa/web-components/dist/assets",
"output": "assets"
},
]
`
In order to integrate with other framework check following link. Framework Integration.
Logo Component Usage
To start using Logo component inside your project.
Inside your html you can add tag with attributes/properties
`
//Default Logo
// Logo with Properties
`
$3
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | -------------------------------------------------------------- | --------------------------------------------------------- | ------------ |
| color | color | The color to use from your application's color palette. | "dark" \| "inverted" \| "light" \| "primary" | 'primary' |
| logoType | logo-type | Type of logo. Default options are: "vertical" and "horizontal" | "horizontal" \| "vertical" | 'vertical' |
| size | size | The size of logo | "default" \| "large" \| "small" \| "xlarge" \| "xsmall" |
---
Header Component Usage
To start using Header component inside your project. Simply add following tag with attributes/properties
`
// Default header
// header with properties
hello header
Primary
`
$3
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | -------------------------------------------------------------- | --------------------------------------------------------- | ------------ |
| color | color | The color to use from your application's color palette. | "dark" \| "inverted" \| "light" \| "primary" | 'primary' |
| logoPosition | logo-position | Logo Position: left, right or middle. Default is middle. | "end" \| "middle" \| "start" | 'middle' |
| logoType | logo-type | Type of logo. Default options are: "vertical" and "horizontal" | "horizontal" \| "vertical" | 'vertical' |
| size | size | The size of logo | "default" \| "large" \| "small" \| "xlarge" \| "xsmall" | 'small' |
$3
| Slot | Description |
| --------- | -------------------------------------------------------------------------------------------------------------------- |
| | Content is placed along with end slot if provided without a slot. Slot moves left or right depends on logo Position. |
| "end" | Content is placed to the right of the Logo |
| "start" | Content is placed to the left of the Logo |
$3
| Name | Description |
| --------------------- | ------------------------ |
| --header-background | Background of header. |
| --header-text-color | Text color of header. |
| --margin-bottom | Bottom margin of header. |
---
Help Modal Usage
To start using this component into your component.
Inside your html you can add tag with attributes/properties
`
Hello help Content
`
$3
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ----------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| htmlContent | html-content | Html Content of the modal. It can be passed as a property/attribute or as html content inside uoa-help tag. | string | undefined |
| linkText | link-text | Clickable text of Link | string | 'Help' |
| modalTitle | modal-title | Title of the modal | string | 'Help' |
---
Steps Bar Usage
To start using this component just add tag with attributes/properties.
`
`
$3
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ---------------------------------------------- | ---------- | ----------- |
| currentStep | current-step | Current Step on the progress/step bar. | number | 1 |
| steps | steps | Total Number of Steps. | number | undefined |
| stepsInfo | steps-info | Array of description of steps for aria-labels. | string[] | [] |
$3
| Event | Description | Type |
| ------------- | ---------------------------------------------- | --------------------- |
| stepClicked | Step number emitted when component is clicked. | CustomEvent |
$3
| Name | Description |
| -------------------------- | ------------------------------------------------------- |
| --button-padding-end | Stepsbar button padding from end. |
| --button-padding-start | Stepsbar button padding from start. |
| --icon-font-size | Stepsbar done icon font size. |
| --space-top | Stepsbar padding from top. |
| --steps-background | Background color of done / in progress steps. |
| --steps-background-hover | Background color of done steps on hover. |
| --sticky-top | If "none" stepsbar is not sticky. Default value is "0". |
---
Search Autocomplete Usage
To start using this component just add tag with attributes/properties.
`
search-button="false"
search-value="a"
options='["cat","dog","fish","horse","snake","lizard"]'
>
search-button="true"
search-value=""
filter-button="true"
options='["cat","dog","fish","horse","snake","lizard"]'
search-filters-list='[{
"code": "location",
"desc": "Filter By Location",
"type": "checkbox",
"options": [{
"code": "a",
"desc": "a orginiser 1"
},
{
"code": "b",
"desc": "b Orginiser "
},
{
"code": "c",
"desc": "c Orginiser 3",
"checked": true,
"default": false
}
]
},
{
"code": "date1",
"desc": "Filter By Date ",
"type": "date",
"options": {
"titleFrom": "From Date ",
"titleTo": "To Date",
"min": "2022-01-11",
"max": "2022-03-11",
"from": "2022-01-18",
"to": "2022-03-11",
"default": true
}
},
{
"code": "Price",
"desc": "Filter By Price",
"type": "number",
"options": {
"titleFrom": "From Price",
"titleTo": "To Price",
"min": 0,
"max": 5
}
}
]'
>
`
$3
| Property | Attribute | Description | Type | Default |
| ------------------- | --------------------- | ------------------------------------------- | ------------------------------------------------------------ | -------------- |
| filterButton | filter-button | Show Filter button with search field. | boolean | false |
| options | options | List of data to use for auto complete. | string \| string[] | undefined |
| placeholder | placeholder | Place holder text for search field.. | string | 'Search ...' |
| searchButton | search-button | Show Search button with search field. | boolean | true |
| searchFiltersList | search-filters-list | List of Search Filters with filter options. | (DateFilter \| NumberFilter \| CheckBoxFilter)[] \| string | undefined |
| searchValue | search-value | Default Search string. | string | undefined |
| showFilterOptions | show-filter-options | Show Filter options on first load. | boolean | false |
$3
| Event | Description | Type |
| --------------- | ------------------------ | ----------------------- |
| filteredArray | Filters object emitted. | CustomEvent |
| searchedText | Searched string emitted. | CustomEvent |
$3
| Name | Description |
| -------------------- | ---------------------------------------------- |
| --checkbox-columns | No. of columns for checkbox filter. Default 2. |
---
Document Upload Usage
To start using this component just add tag with attributes/properties.
`
`
$3
| Property | Attribute | Description | Type | Default |
| ------------------------ | --------------------------- | ----------------------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------- |
| allowMultiple | allow-multiple | Allow mulitple files selection. | boolean | false |
| allowedType | allowed-type | Allowed file types. | "all" \| "custom" \| "doc" \| "image" \| "pdf" \| "pdfAndImage" | 'pdfAndImage' |
| customDescription | custom-description | Additional description for doc upload. | string | '' |
| customType | custom-type | Provide custom accepted type/types of file. | string | undefined |
| customTypeDescription | custom-type-description | Provide description of custom file type/ types. | string | undefined |
| hideWarningMessage | hide-warning-message | Show or Hide the warning message | boolean | undefined |
| maxFileSize | max-file-size | Max size of file allowed in mb. | number | 10 |
| maxFiles | max-files | Max number of files can upload. | number | 1 |
| maxFilesWarningMessage | max-files-warning-message | Custom file limit warning message | string | 'You have reached the maximum number of files to upload.' |
| selectedFiles | -- | Pass Selected Files to component. | File[] | [] |
$3
| Event | Description | Type |
| --------------- | -------------------- | --------------------- |
| filesSelected | Emit selected files. | CustomEvent |
$3
| Name | Description |
| ---------------- | --------------------------------- |
| --font-default | Font size of text in upload area. |
| --font-small | Font size of text in info area. |
---
Combo Search Dropbox
To use this component, provide the component with properties of the searchList.
`
// standard usage with search-list property.
"Dogs",
"Elephants",
"Lions",
"Rabbits"]'>
// placeholder, disable, search-list and search-value (initial search value) set.
disable='true'
[searchList]='arrayOfObjects'
search-value='Annie'
primary-search-field='name'
>
...
const arrayOfObjects=[{'name':'Annie', 'age': 10}, {'name':'Sam', 'age': 6}];
`
$3
| Property | Attribute | Description | Type | Default |
| -------------------- | ---------------------- | ---------------------------------------------- | ----------------- | -------------- |
| disable | disable | To disable the input of component. | boolean | undefined |
| placeholder | placeholder | Placeholder string for the search bar. | string | 'Search ...' |
| primarySearchField | primary-search-field | Primary search field to search in search list. | string | undefined |
| searchList | search-list | List of data to select and search from. | any[] \| string | undefined |
| searchValue | search-value | Initial Search Value. | string | undefined |
$3
| Event | Description | Type |
| ------------ | ----------------------------------------------------------------------- | ------------------ |
| chosenItem | Chosen (selected) data, emitted as the chosenItem by the event emitter. | CustomEvent