aerumUI

This project contains the UI framework implementation of the AERUM solution.

NPM package publishing

aerumUI is an NPM package. It uses ng-packagr to build an NPM package. The package is build from the components contained in the ./src/lib folder. Please note that the ./src/app folder is used only for the playground part of the application or to test your components. All components created there will not get published into the package. The ./src/lib folder contains per-module folders and public_api.ts file. This File is the general index file for the NPM package. To be able to access your module contained in the built package you need to export in in this file.

Developing in aerumUI

During development, you can use the ./src/app module as a playground for your components. Please be careful as you should be referencing the components you're using from the ./src/lib folder (VSCode's intellisense might offer you an option to import from dist folder which contains the built package).

GIT - pushing changes

!!BEFORE YOU PUSH ANY CHANGES!! make sure you perform following steps:

• Make sure the NPM package is buildable (see next step)
• UPDATE THE PACKAGE VERSION - since the script for automatic versioning is still not ready, you need to perform this step manually otherwise the CI pipeline will not be able to publish an NPM package. TO do this simply adjust the version in package.json or run npm version patch.

Building the NPM package

To build the NPM package locally just simply run following command

npm run build:lib

After successfull build, your package will be in ./dist/lib folder.

Development server

While testing, you can run the dev server by using following command,

npm run start

Code scaffolding

For code scaffolding purposes you can use ng generate. There is, however, a more neat solution. If you install Angular files extension for VSCode you will be able to generate necessary files just by right clicking the folder and selecting desired component/module/pipe/service option.

Build

To build the app (not lib), simply run:

npm run build

CI & Cloud Builds

aerumUI has CI processes implemented through bitbucket pipelines (see bitbucket-pipelines.yml). General overview of how it works is:

• Pushing the code to server branch triggers a cloud build
• PR from your branch to development branch triggers a cloud build. If the build is successfull, pipeline will build an NPM package and publish it to npmjs.org.

Running tests

Run npm run test to execute Karma tests.To execute the end-to-end tests via Protractor, run npm run e2e.

How to use elements

Form Element - Button

<aer-button (buttonFn)="yourFunction('params')">Click on me</aer-button>

Params:

• buttonFn - value: Function() - When user click on the button, this function will be call,
• disabled (optional) - values: boolean - Use this, when you need to disable your button,

Style class:

• for colors - values: default, blue - Color of button,
• for sizing - values: large, normal, medium, small - If you use size param, button style will use display: inline-block; style and you can use these values to change the size of the buttons. If you don't use size params, the default display style is display: block; and then the size is responsive to parent div width.

Form Element - Icon

<aer-icon>icon-name</aer-icon>

Icon module giving you access to AerumFonts icons. Replace icon-name with name of your icon.

Form Element - Input

<aer-input icon="key" buttonLabel="Open" [(ngModel)]="inputText" ngDefaultControl (buttonFn)="openDemoModal('Another success case')"></aer-input>

Params:

• ngModel (required) - value: string - ngModel give you access to value in input,
• type (optional, default: text) - values: text, number, password - Define type of input,
• placeholder (optional) - value: string - Placeholder text in input, when no value define,
• icon (optional) - value: string - Input will show you on the left side of component given icon from aerumFont. Value represent the name of icon,
• buttonLabel (optional) - value: string - Text in button,
• buttonFn (optional) - value: Function() - Input field will expand on the right side with a button. When user click on the button, this function will be call,
• disabled (optional) - value: boolean - Use this, when you need to disable your input field

Style class:

• to show button - value: with-button - To show button on right side of input field. Note: If you use class with-button, you must enter params buttonFn and buttonLabel.
• button colors - (optional) - value: default, blue - color of button,
• disabled input - value: disabled - Input will looks like disabled

Form Element - Textarea

<aer-textarea addition="3PHbHqUi" icon="key" [(ngModel)]="inputText" placeholder="Placeholder Text" ngDefaultControl></aer-textarea>

Params:

• ngModel (required) - value: string - ngModel give you access to value in textarea,
• addition (optional) - value: string - If you fill additional field with a message or value, then the textarea will expand with this message on bottom of textarea,
• icon (optional) - value: string - Textarea will show you on the left side of component given icon from aerumFont. Value represent the name of icon,
• placeholder (optional) - value: string - Insert your message what will show as a placeholder.

Form Element - Toggle

<aer-toggle [(ngModel)]="state" disabled="true"></aer-toggle>

Params:

• ngModel (required) - values: boolean - Determine the state of toggle. State 'false' is unchecked. State 'true' is check. Like in checkbox.
• disabled (optional) - value: boolean - Use this, when you need to disable your toggle.

Form Element - Slide Toggle

aer-slide-toggle [(ngModel)]="specToggle" checkedMsg="Login" uncheckedMsg="Create Account" ngDefaultControl></aer-slide-toggle>

Params:

• ngModel (required) - values: boolean - Determine the state of toggle. State 'false' is unchecked. State 'true' is check. Like in checkbox.
• checkedMsg (required) - value: string - Insert your message what will show in state 'true',
• uncheckedMsg (required) - value: string - Insert your message what will show in state 'false'

Navigation Element - Modal

Dependence: ngx-modialog v5.0.0 and on ModalService

Modal (Dialog) window is a dynamic component.

For example you must see the modal service and app.component in playground. In case of any questions contact me @ [e-mail] or in the slack channel.

Nagivation Element - Sidebar

Sidebar is a cool responsive and animated left side oriented component.

Example code: <aer-sidebar #sidebar> <aer-sidebar-group title="Layout" iconName="py-layout"> <aer-sidebar-item iconName="py-sidebar">Composition</aer-sidebar-item> <aer-sidebar-item iconName="py-grid">Grid</aer-sidebar-item> </aer-sidebar-group> <aer-sidebar-group title="Forms" iconName="py-forms"> <aer-sidebar-item iconName="py-font">Typography</aer-sidebar-item> <aer-sidebar-item iconName="py-input">Input</aer-sidebar-item> </aer-sidebar-group> <aer-sidebar-group title="Navigation" iconName="py-navigation"> <aer-sidebar-item iconName="py-toolbar">Toolbar</aer-sidebar-item> </aer-sidebar-group> </aer-sidebar>

Sidebar-group params:

• title (required) - value: string - Group message,
• iconName (required) - value: string - Icon prepended before group message. Insert name of icon from AerumFont

Sidebar-item params:

• iconName (required) - value: string - Icon prepended before group message. Insert name of icon from AerumFont Item name will be the content of tag. See example code above.

Navigation Element - Toolbar (unfinished)

<aer-toolbar></aer-toolbar>

Fixed top position toolbar component.

Layout Element - Card

Insert a card base component. Fill it with your content.

Example code: <aer-card title="This is card with title"> <h1>And some random content</h1> <aer-button (buttonFn)="sidebar.toggleSidebar()" color="blue">Toggle</aer-button> </aer-card>

Param:

• title - value: string - Title of the card. Title is rendered on the head of card.

Layout Element - Content

<aer-content></aer-content>

Use this for wrapping your content in your component, when you using sidebar. This component help you to do more responsible page.

Further help

In case of any questions contact me @ [e-mail] or in the slack channel.