masa-ui-elements v0.1.1

UI Elements

This project was generated with Angular CLI version 1.1.3.

Development server

Run yarn start for a dev server. Navigate to http://localhost:4200/.

Build

Run yarn build to build the project. The build artifacts will be stored in the dist/ directory.

Example

A working example can be found here.

Input

Usage

<masa-input label="Label"></masa-input>

The model can be bound like any other input with either [(ngModel)] and (ngModelChange) or using FormGroup.

For errors the element <sama-error> can be used.

<masa-input label="Label">
	<sama-error *ngIf="control.invalid">
		Error message
	</sama-error>
</masa-input>

Inputs

Dropdown

Usage

The data must come in form of an array, that holds items with an id field (note, name is not important).

const data = [{
	id: 1,
	name: 'A'
}, {
	id: 2,
	name: 'B'
}, {
	id: 3,
	name: 'C'
}]

The data array may also consist of groups, that have a title property (will be rendered) and an items array, that must come in the form of the above.

const groupedData = [{
	title: 'Group 1',
	items: [{
		id: 1,
		name: 'A'
	}, {
		id: 2,
		name: 'B'
	}]
}, {
	title: 'Group 2',
	items: [{
		id: 3,
		name: 'C'
	}]
}];

To use the component, a template to render the items must be defined with the angular-id #option.

<masa-dropdown [data]="someData" label="Label">
	<ng-template #option let-item="item">
		{{ item.name }}
	</ng-template>
</masa-dropdown>

A second template for rendering the seleciton may also be defined with the angular-id #display. If none is set, the item template will be used.

<masa-dropdown [data]="someData" label="Label">
	<ng-template #display let-selection="item">
		<div>
			{{ selection.name }}
		</div>
		<div>
			{{ selection.description}}
		</div>
	</ng-template>

	<ng-template #option let-item="item">
		{{ selection.name }}
	</ng-template>
</masa-dropdown>

The model can be bound like any other input with either [(ngModel)] and (ngModelChange) or using FormGroup.

For errors the element <sama-error> can be used.

<masa-dropdown [data]="someData" label="Label">
	<ng-template #option let-item="item">
		{{ item.name }}
	</ng-template>
	
	<sama-error *ngIf="control.invalid">
		Error message
	</sama-error>
</masa-dropdown>

Inputs

Auto complete

Usage

The data is coming from an async datasource in form of an Observable. For this, bind a function, returning an Observable to the source attribute. The resolved data must be an array.

There are no restrictions on the items within the result set. A function to turn the item into a string must be provided. This will get executed, when an element of the auto-complete list is selected.

To use the component, a template to render the items must be defined with the angular-id #option.

<masa-auto-complete
	[source]="asyncDataSource"
	[itemRenderer]="itemToString"
>
	<ng-template #option let-user="item">
		{{ user.firstName }} {{ user.lastName }}
	</ng-template>
</masa-auto-complete>

A second template to render a message in case of a data-overflow may be provided. This will be shown, if the result set is bigger than the specified maximum amount of items to be displayed.

<masa-auto-complete
	[source]="asyncDataSource"
	[itemRenderer]="itemToString"
	[maxItems]="3"
>
	<ng-template #option let-user="item">
		{{ user.firstName }} {{ user.lastName }}
	</ng-template>

	<ng-template #overflow let-number="number">
		<div class="overflow-warning">
			There are {{ number }} items, only the first 3 are shown
		</div>
	</ng-template>
</masa-auto-complete>

The model can be bound like any other input with either [(ngModel)] and (ngModelChange) or using FormGroup.

Important note: The returned value is the item object, not the string from the input field.

Input