@uoa/web-components v1.17.1

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

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

Slots

CSS Custom Properties

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

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

Events

CSS Custom Properties

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

Events

CSS Custom Properties

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

Events

CSS Custom Properties

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

Events