wacom v17.1.0

Angular (ngx) common

Module which has common services and components which can be used on all projects.

Getting Started

License

MIT

Instalation

$ npm i --save wacom

Services

Alert Service

Alert Service is an suportive service for alerts manamanagement. Example of importing alert service:

import { AlertService } from 'wacom';
constructor(private alert: AlertService){};

show function

Opens the alert and return htmlElement of this alert. Example 1:

let my_alert = alert.show({
	text: 'Are you sure?',
	type: 'question',
	timeout: 5000,
	class: 'myClass',
	position: 'bottomRight',
	buttons: [{
		text: 'YES',
		callback: ()=>{
			console.log("YES!");
		}
	},{
		text: 'NO',
		callback: ()=>{
			console.log("NO!");
		}
	}]
});

Example 2:

let my_alert = alert.show({
	component: MyCustomComponent,
	timeout: 5000,
	class: 'myClass',
	position: 'center',
	closable: true
});

options

destroy function

Close all alerts. Example:

alert.destroy();

Modal Service

Modal Service is an suportive service for modals manamanagement. Example of importing modal service:

import { ModalService } from 'wacom';
constructor(private modal: ModalService){};

show function

Opens the modal and return htmlElement of this modal. Example:

let my_modal = modal.show({
	component: MyCustomComponent,
	size: 'mid',
	timeout: 5000,
	class: 'myClass',
	position: 'center',
	closable: true
});

options

destroy function

Close all modals. Example:

modal.destroy();

Loader Service

Loader Service is an suportive service for loaders manamanagement.Example of importing loader service:

import { LoaderService } from 'wacom';
constructor(private load: LoaderService){};

show function

Opens the loader and return htmlElement of this loader. Example:

let my_loader = load.show({
	timeout: 5000,
	class: 'myClass',
	closable: true
});

options

destroy function

Close all loaders. Example:

loader.destroy();

UI/UX Service

UI/UX Service is supportive service for front-end features. This service provides saving css varibles and containes helpful tools for the front developer.

var

Object which can be used to contain all needed fields for front-end.

get function

Returns Object with all saved css viriables. Example:

ui.get();

Result example:

{
  test: '15px solid'
}

remove function

Removes css varible by the key. Example:

ui.remove('css');

set function

Method interface sets a new value for a property on a CSS style declaration object and saves all css variables which you have passed. Example:

ui.set(variables, options);

variables - All css varibles you want to pass. If you want to set array of variables you'll need to have specific structure of the array. Example: [{key: 'name', value: example}]. Object will be saved with the same structure.

options - If you want to save css variables to the localStorage you should pass local: true. Also if you want to save variables only for specific host you should pass host: 'hostname'

arr function

Helps developer to generate array with custom length and with elements of specific type. Example:

<div *ngFor="let obj of ui.arr(length, type)"></div>

length - Length of generated array. type - 'number'||'text'||'date' Will set elements with random content at choosed type. 'number' is default type of elements.

text function

Helps developer to generate random string with specific length. Example:

<span>{{ui.text(length)}}</span>