wacom

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

Name	Description
Core	Common supportive function which can be used in any service
Http	Http layer for HttpClient
Store	Service will is responsible for keeping information on the device
Hash	Hash management for easily use, storage which stay in url
Render	Make not automated render management well structured
Meta	Website meta tags management within router
Alert	Alerts management
Modal	Modals management
UI	Supportive UI/UX service

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

Name	Type	Description
text	string	Text of alert.
type	string	Type of alert(etc info, success, warning, error, question).
class	string	Custom class for your alert.
unique	string	Identificator for your alerts.
progress	boolean	Enable timeout progress bar.
position	string	Position of the alert(topLeft, topCenter, topRight, right, bottomRight, bottomCenter, bottomLeft, left, center).
timeout	number	Amount in milliseconds to close the alert, 0 to disable.
closable	boolean	Show "x" close button.
buttons	number	Array of buttons for your alerts.
component	string or @Component	Component which will be appended into the alert.
close	function	custom function for close alert.
onClose	function	Capture when the alert is closing.

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

Name	Type	Description
id	string
component	string or @Component	Component which will be appended into the modal.
size	string	Size of the modal.
timeout	number	Amount in milliseconds to close the modal, 0 to disable.
class	string	Custom class for your modal.
closable	boolean	Show "x" close button.
unique	string	Identificator for your modals.
close	function	custom function for close modal.
onOpen	function	Capture when the modal is opening.
onClose	function	Capture when the modal is closing.

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

Name	Type	Description
append	@Component	Component where the loader will be appended.
component	string or @Component	Component which will be appended into the loader.
timeout	number	Amount in milliseconds to close the loader, 0 to disable.
progress	boolean	Enable timeout progress bar.
class	string	Custom class for your loader.
closable	boolean	Show "x" close button.
close	function	custom function for close loader.
onClose	function	Capture when the loader is closing.

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>