Module which has common services and components which can be used on all projects.
$ npm i --save wacom
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 is an suportive service for alerts manamanagement. Example of importing alert service:
import { AlertService } from 'wacom';
constructor(private alert: AlertService){};
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
});
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. |
Close all alerts. Example:
alert.destroy();
Modal Service is an suportive service for modals manamanagement. Example of importing modal service:
import { ModalService } from 'wacom';
constructor(private modal: ModalService){};
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
});
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. |
Close all modals. Example:
modal.destroy();
Loader Service is an suportive service for loaders manamanagement.Example of importing loader service:
import { LoaderService } from 'wacom';
constructor(private load: LoaderService){};
Opens the loader and return htmlElement of this loader. Example:
let my_loader = load.show({
timeout: 5000,
class: 'myClass',
closable: true
});
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. |
Close all loaders. Example:
loader.destroy();
UI/UX Service is supportive service for front-end features. This service provides saving css varibles and containes helpful tools for the front developer.
Object which can be used to contain all needed fields for front-end.
Returns Object with all saved css viriables. Example:
ui.get();
Result example:
{
test: '15px solid'
}
Removes css varible by the key. Example:
ui.remove('css');
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'
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.
Helps developer to generate random string with specific length. Example:
<span>{{ui.text(length)}}</span>