@dynaccurate/core NPM

Dynac Core

This project was generated with Angular CLI version 12.2.9. This project contains all the templates, services, global css and simple components needed to create any Dynaccurate project.

Instalation

Run npm install --save @dynaccurate/core to install the package.

Add on tsconfig.json inside compilerOptions:

"compilerOptions": {
	...
	"paths": {
		"@dynaccurate/core": [
			"node_modules/@dynaccurate/core/dist/core-components"
		]
	}
	...
}

Add the CoreComponentsModule on your AppModule:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DynacCoreModule } from '@dynaccurate/core';
import { AppComponent } from './app.component';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		CommonModule,
		BrowserModule,
		DynacCoreModule
	],
	providers: [],
	bootstrap: [AppComponent]
})

export  class  AppModule { }

Components

List of components:

Modals - Simple Modal - Confirm Modal - Empty Modal
Pagination
Toasts - Simple Toast

Simple Modal

Component that displays a simple modal. Can be customizable with default values (Success, Error, Warning, Info). The component can be controlled with the angular ViewChid directive.

Selector: <dynac-simple-modal></dynac-simple-modal>

Methods: | Method | Return type | Description | |-------------|--------------------|--------------------------------| | openModal | Promise | This method display the modal | | closeModal | Promise | This method hide the modal |

Props: | Props | Type | Is Required | Default | Description | |----------------|----------------------------|-------------|---------|--------------------------------------------| | modalData | ModalProps | true | none | The data that will be shown in the modal |

Events: | Event | Value | Description | |-------|-------|---------------------------------------| | open | true | Event dispatched when modal is opened | | close | true | Event dispatched when modal is closed |

Confirm Modal

Component that displays a confirmation modal. Can be customizable with default values (Success, Error, Warning, Info). The component can be controlled with the angular ViewChid directive.

Selector: <dynac-confirm-modal></dynac-confirm-modal>

Attributes: | Attribute | Type | Default | Description | |---------------|-------------------------------------------------------|---------|-------------------------------------------------------------------------------------------------------------------------------------| | show | boolean | false | This attribute control if the modal is gonna be displayed. If you change the attribute directly the events will not be dispatched. | | confirmStatus | boolean | false | This attribute represents if the user confirmed or cancel tha action in modal | | type | ComponentTypeDefinition | INFO | This attribute customize the modal layout. If you change the attribute directly the events will not be dispatched. |

Methods: | Method | Return type | Description | |-------------|--------------------|-----------------------------------------------------------------------------------------| | openModal | Promise | This method display the modal | | closeModal | Promise | This method hide the modal | | confirm | void | This method update the confirmStatus to true value and calls closeModal() | | cancel | void | This method update the confirmStatus to false value and calls closeModal() |

Empty Modal

Component that displays a customizable Modal. The component can be controlled with the angular ViewChid directive.

Selector: <dynac-empty-modal></dynac-empty-modal>

Props: | Props | Type | Is Required | Default | Description | |-----------|----------|-------------|-----------|----------------------------------------| | size | string | false | max-w-lg | The custom class to modal max width |

Slots: | Slot | Description | |--------|---------------------------------------------------------------------------| | header | A slot to add the modal header | | body | A slot to add the modal body | | footer | A slot to add the modal footer. The close button already is in the footer |

Pagination

Component that helps to create a pagination table and lists.

Selector: <dynac-pagination></dynac-pagination>

Props: | Props | Type | Is Required | Default | Description | |-------------|---------|-------------|---------|-------------------------------| | totalPages | integer | true | none | The number of pages | | firstPage | integer | true | none | The number of the first page | | lastPage | integer | true | none | The number of the last page | | currentPage | integer | true | none | The number of selected page |

Events: | Event | Value | Description | |-------------------|-------------------------|---------------------------------------------------------| | currentPageChange | The number of new Page | Event dispatched when user click on another page number |

Simple Toast

Component that display a simple toast that shows a flash message. Can be customizable with default values (Success, Error, Warning, Info). The component can be controlled with the angular ViewChid directive.

Selector: <dynac-simple-toast></dynac-simple-toast>

Attributes: | Attribute | Type | Default | Description | |------------|-------------------------------------------------------|---------|------------------------------------------------------------------------------------------------------------------------------------| | show | boolean | false | This attribute control if the modal is gonna be displayed. If you change the attribute directly the events will not be dispatched. | | percentage | integer | 0 | This attribute represents the toast progress bar. | | intval | ReturnType | none | This attribute represents the toast progress bar. | | type | ComponentTypeDefinition | INFO | This attribute customize the modal layout. If you change the attribute directly the events will not be dispatch. |

Methods: | Method | Return type | Description | |------------|--------------|-----------------------------------------------------------------------------------------| | showToast | void | This method display the toast | | hideToast | void | This method hide the toast |

Props: | Props | Type | Is Required | Default | Description | |----------------|----------------------------|-------------|---------|--------------------------------------------| | toastData | ToastProps | true | none | The data that will be shown in the toast |

Events: | Event | Value | Description | |--------|-------|-----------------------------------------| | start | true | Event dispatched when toast is started | | finish | true | Event dispatched when toast is finished |

Models

List of models:

Models for components: - ModalProps - ToastProps
Models for dynac entities:
Models for dypharm entities:
Models for API responses:

Modal Props

Interface that define a modal data.

Attributes: | Attribute | Type | Is Required | Default | Description | |------------|---------|-------------|---------|---------------------------------------------------| | title | string | true | none | The text that will be shown in the Modal header. | | message | string | true | none | The text that will be shown in the Modal body. |

Toast Props

Interface that define a toast data.

Attributes: | Attribute | Type | Is Required | Default | Description | |------------|---------|-------------|-------------|---------------------------------------------------| | title | string | false | none | The text that will be shown in the Toast header. The toast type determine the defalt value. | | text | string | true | none | The text that will be shown in the Toast body. | | interval | integer | false | 5000 | The time (in milliseconds) that the toast will be displayed. | | position | string | false | 'top-right' | The position for toast. The avaiable values are: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'bottom-center' and 'top-center' |

Component Type Definition

Interface that define the component type. Can be used to define Modal and Toast layout.

Attributes: | Attribute | Type | Is Required | Default | Description | |-----------------|---------|-------------|---------|----------------------------------------------------| | icon | string | true | none | The icon in MDI Icon. | | iconColor | string | true | none | The icon color. | | iconBackground | string | true | none | The icon background color. | | backgroundColor | string | true | none | The background color for any section in component. | | titleColor | string | true | none | The color for title. | | title | string | true | none | The default title for the component. |

Default values (ComponentType):