@cargos/cs-modal

Angular cs-modal

This library was generated with [Angular CLI].

Getting started

Step 1: Install cs-modal:

NPM

npm install --save @cargos/cs-modal

Step 2: Import the CsModalModule:

import { CsModalModule } from '@cargos/cs-modal';

@NgModule({
  declarations: [AppComponent],
  imports: [CsModalModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Import the csModal in AppComponent and initialize the settings:

import { csModal, Modal } from '@cargos/cs-modal';

export class AppComponent {

  public settingsModal: Observable<Modal>;

  constructor() {
    this.settingsModal = csModal.getSettings();
  }

}

Step 4: Declare cs-modal component in app.component.html:

<cs-modal [settings]="settingsModal"></cs-modal>

Step 5: Include style dependencies and a theme:

@import "~material-icons/iconfont/material-icons.css";
@import "~@cargos/cs-modal/styles/modal.css";

//theme
@import "~@cargos/cs-modal/styles/sprintpass.theme.css";

Note: Only sprintpass.theme is available at the moment.

Settings

Key	Type	Default	Description
title	string	''	...
titleClass	string	''	...
titleAlign	'left' ⎮ 'center' ⎮ 'right'	'center'	...
content	ModalContent	''	...
contentAlign	'left' ⎮ 'center' ⎮ 'right'	'center'	...
type	'default' ⎮ 'warning' ⎮ 'error' ⎮ 'success' ⎮ 'info'	'default'	...
spinner	'dots' ⎮ 'circle'	'dots'	...
buttons	ButtonOptions[]	[]	...
buttonsAlign	'left' ⎮ 'center' ⎮ 'right' ⎮ 'space-evenly'	'center'	...
iconName	string	''	...
iconFontClass	string	'material-icons'	...
iconAlign	'left' ⎮ 'center' ⎮ 'right'	'center'	...
bgTheme	'black' ⎮ 'white'	'black'	...
theme	'sprintpass'	'sprintpass'	...
animation	'scale' ⎮ 'fade'	'fade'	...
closeAnimation	'scale' ⎮ 'fade'	'fade'	...
closeIcon	boolean ⎮ (modal?: Modal) => Observable<any>	null	...
closeIconName	string	'close'	...
columnClass	'xsmall' ⎮ 'small' ⎮ 'medium' ⎮ 'large' ⎮ 'cover'	'small'	...
fontSize	'small' ⎮ 'medium' ⎮ 'large'	'small'	...
autoClose	number	0	...
autoCloseAction	(modal?: Modal) => Observable<any> ⎮ string	''	...
backgroundDismiss	boolean ⎮ (modal?: Modal) => Observable<any>	null	...
backgroundDismissAnimation	'none' ⎮ 'shake'	'shake'	...
escapeKey	boolean ⎮ (modal?: Modal) => Observable<any>	null	...
maximize	boolean	false	...
onContentReady	(modal?: Modal) => Observable<void>	null	...
zIndex	number	1000	...

Methods

Name	Settings	Description
confirm	``	``
success	``	``
warning	``	``
error	``	``
close	N/A	``

How to use

import { csModal } from '@cargos/cs-modal';

export class MyComponent {

  constructor() { }

  /* Optional if you want to close the modal when the component is destroyed */
  ngOnDestroy() {
    csModal.close();
  }

  showModal() {
    csModal.confirm({
        //...custom settings
    });
  }

}

Further help

Coming soon.