UOA Web Components Library

This library contains collection of web components built by UOA for their applications using stencil.

Logo
Header
Help Modal
Steps Bar
Search Autocomplete
Document Upload
Search Combo Dropbox

Uoa web components work in any major framework or with no framework at all.

Angular Integration

It is a two-step process.

Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the components. This code should be added into the AppModule and in every other modules that use your custom elements. Here is an example of adding it to AppModule

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
<uoa-logo></uoa-logo>
// Logo with Properties
<uoa-logo logo-type="vertical" color="primary" size="small"></uoa-logo>

Properties

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
<uoa-header></uoa-header>

// header with properties
<uoa-header size="small" color="primary" logo-type="vertical" logo-position="middle">
  <div slot="start">hello header</div>
  <div slot="end" class="d-flex flex-end"><ion-button color="primary">Primary</ion-button></div>
</uoa-header>

Properties

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'`

Slots

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

CSS Custom Properties

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

<uoa-help>Hello help Content</uoa-help>

Properties

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.

<uoa-steps-bar steps="4" current-step="2"> </uoa-steps-bar>

Properties

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[]`	`[]`

Events

Event	Description	Type
`stepClicked`	Step number emitted when component is clicked.	`CustomEvent<number>`

CSS Custom Properties

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.

<uoa-search-autocomplete
                placeholder="Search a Pet"
                search-button="false"
                search-value="a"
                options='["cat","dog","fish","horse","snake","lizard"]'
              ></uoa-search-autocomplete>

<uoa-search-autocomplete
                placeholder="select a value"
                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
                          }
                        }

                      ]'
              ></uoa-search-autocomplete>

Properties

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`

Events

Event	Description	Type
`filteredArray`	Filters object emitted.	`CustomEvent<Filter[]>`
`searchedText`	Searched string emitted.	`CustomEvent<string>`

CSS Custom Properties

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.


<uoa-upload-doc></uoa-upload-doc>

 <uoa-upload-doc max-files="3" allowed-type="image" max-file-size="5"></uoa-upload-doc>

Properties

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[]`	`[]`

Events

Event	Description	Type
`filesSelected`	Emit selected files.	`CustomEvent<File[]>`

CSS Custom Properties

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.
<combo-search-dropbox
	search-list='["Cats",
				  "Dogs",
				  "Elephants",
                  "Lions",
				  "Rabbits"]'></combo-search-dropbox>

// placeholder, disable, search-list and search-value (initial search value) set.
<combo-search-dropbox
          placeholder='Search your value here...'
          disable='true'
          [searchList]='arrayOfObjects'
          search-value='Annie'
          primary-search-field='name'
          ></combo-search-dropbox>

...

const arrayOfObjects=[{'name':'Annie', 'age': 10}, {'name':'Sam', 'age': 6}];

Properties

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`

Events

Event	Description	Type
`chosenItem`	Chosen (selected) data, emitted as the chosenItem by the event emitter.	`CustomEvent<any>`

@uoa/web-components

UOA Web Components Library

Angular Integration

Logo Component Usage

Properties

Header Component Usage

Properties

Slots

CSS Custom Properties

Help Modal Usage

Properties

Steps Bar Usage

Properties

Events

CSS Custom Properties

Search Autocomplete Usage

Properties

Events

CSS Custom Properties

Document Upload Usage

Properties

Events

CSS Custom Properties

Combo Search Dropbox

Properties

Events

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@uoa/web-components

UOA Web Components Library

Angular Integration

Logo Component Usage

Properties

Header Component Usage

Properties

Slots

CSS Custom Properties

Help Modal Usage

Properties

Steps Bar Usage

Properties

Events

CSS Custom Properties

Search Autocomplete Usage

Properties

Events

CSS Custom Properties

Document Upload Usage

Properties

Events

CSS Custom Properties

Combo Search Dropbox

Properties

Events

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads