This library was generated to use in all module of SmaxApp.
Author: @SmaxTeam from SmaxApp Dev Team.
Angular |
smaxapp |
>=13.x.x =<15.x.x |
v13.x |
> 15.x.x <16.x.x |
v16.x |
Run npm install smaxapp
to install the library.
Step2: Import the SmaxAppModule
Import the SmaxAppModule in Angular application module:
import { SmaxAppModule } from 'smaxapp';
@NgModule({
declarations: [AppComponent],
imports: [SmaxAppModule.forRoot(), FormsModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Step3: Include a style file
@import "~/smaxapp/src/styles/style.scss";
Angular version 13.x.x please add config in angular.json like this:
"stylePreprocessorOptions": {
"includePaths": ["node_modules"]
}
Step4: Update angular.json
"assets": [
{
"glob": "**/*",
"input": "node_modules/smaxapp/assets",
"output": "/assets/"
}
],
Step5: Use the components
<smaxapp-logo
bizAlias="demo"
[modules]="modules"
[currentModule]="currentModule"
[quickModules]="quickModules"
[menuPlacement]="'bottom'"
>
</smaxapp-logo>
<smaxapp-input-mask></smaxapp-input-mask>
<br>
<smaxapp-input-suggest-money></smaxapp-input-suggest-money>
<br>
<smaxapp-image-preview [imageUrls]="imageUrls" [indexImage]="0">
<div childContent>
... template for image preview
</div>
</smaxapp-image-preview>
<br>
<smaxapp-modal-confirm (onConfirm)="`call func here if you want...`">
<div childContent>
... template for modal confirm
</div>
</smaxapp-modal-confirm>
<div class="wrapper-chat">
<smaxapp-box-chat [biz]="biz" [infoOrder]="orderInfo" [currentModule]="'sale-center'" (eventEmit)="$event"></smaxapp-box-chat>
</div>
<div class="embed-bubble-chat">
<smax-bubble-chat [biz]="biz" (eventEmit)="$event"></smax-bubble-chat>
</div>
import { ModalConfirmService } from 'smaxapp';
export class AppComponent {
constructor(
private modalConfirmService: ModalConfirmService,
) {}
okeFunction() {
console.log('confirm');
}
handleOpenModal() {
const modalContent: IModalConfirmContent = {
title: 'Xác nhận',
description: 'Bạn có chắc chắn muốn xóa?',
okText: 'Xóa',
type: 'warning',
modalType: 'advance',
};
this.modalConfirmService.openModal(modalContent, this.okeFunction());
}
}
Input |
Type |
Default |
Required |
Description |
[imageUrls] |
string[] |
[] |
yes |
List url image to show. |
[indexImage] |
number |
0 |
no |
Default display image with image's index of list urls |
Input |
Type |
Default |
Required |
Description |
[id] |
string |
'' |
yes |
Id of input. |
[value] |
number |
0 |
no |
Value of input |
[placeholder] |
string |
0 |
no |
Placeholder of input |
[align] |
left | right |
left |
no |
Alignment of input |
[require] |
boolean |
false |
no |
Requireable |
[readonly] |
boolean |
false |
no |
Readonly |
[isQuantity] |
boolean |
false |
no |
Is Quantity |
[allowNegativeNumbers] |
boolean |
false |
no |
Is allow negative |
[max] |
number |
null |
no |
Max Value |
[min] |
number |
null |
no |
Min Value |
[width] |
string | number |
null |
no |
Width of Input |
[bizCurrency] |
IBizCurrency | unknown |
null |
yes |
Width of Input |
Output |
Type |
Description |
(onChange) |
number |
Execute when change |
(paste) |
Event |
Execute when change |
InputSuggestMoneyComponent
Input |
Type |
Default |
Required |
Description |
[value] |
number |
0 |
no |
Value of input |
[placeholder] |
string |
0 |
no |
Placeholder of input |
[align] |
left | right |
left |
no |
Alignment of input |
[suggestMax] |
number |
0 |
no |
Max Value suggested |
[amount] |
number |
0 |
yes |
Amount value |
[customClass] |
string |
|
yes |
Custom class |
[optionInputCurrency] |
string |
|
yes |
Option Input |
[disabled] |
string | null |
null |
yes |
Disabled |
[template] |
any |
null |
no |
Template of Input |
[tagEmpty] |
string |
Thẻ tag rỗng |
no |
Tag empty |
Output |
Type |
Description |
(onChange) |
number |
Execute when change |
(onRemove) |
Event |
Execute when remove |
Property |
Type |
Default |
Required |
Description |
title |
string |
Xác nhận |
yes |
Title of modal |
description |
string |
|
yes |
Description |
okText |
string |
Ok |
yes |
Text of ok button |
cancelText |
string |
Cancel |
yes |
Text of cancel button |
type |
warning | info
|
warning |
no |
Type notice |
modalType |
default | advance
|
default |
no |
Type of modal |
noFooter |
boolean |
false |
no |
Show or Hide footer |
noAcceptButton |
boolean |
false |
no |
Show or Hide Accept button |
Output |
Type |
Description |
(onConfirm) |
event |
Execute when confirm |
Property |
Type |
Default |
Required |
Description |
IModules |
object |
unknown |
yes |
Title of modal |
Output |
Type |
Description |
modules |
IModules[] |
List Module |
currentModule |
IModules |
Currently Module |
quickModules |
string[] |
Id Quick Module |
Property |
Type |
Default |
Required |
Description |
Biz |
object |
unknown |
yes |
Biz |
infoOrder |
{orderId; orderCode} |
unknown |
yes |
Biz |
currentModule |
string |
`` |
yes |
Current Module Alias |
Output |
Type |
Description |
biz |
Biz |
Biz |
infoOrder |
InfoOrder |
Info Order |
currentModule |
string |
Current Module Alias |
Property |
Type |
Default |
Required |
Description |
Biz |
object |
unknown |
yes |
Biz |
Output |
Type |
Description |
biz |
Biz |
Biz |