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