Smaxapp NPM | npm.io

SmaxCommonLib

This library was generated to use in all module of SmaxApp.

Team

Author: @SmaxTeam from SmaxApp Dev Team.

Compatibility

Versions

Angular	smaxapp
>=13.x.x =<15.x.x	v13.x
> 15.x.x <16.x.x	v16.x

Getting started

Step1: Installation

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";

Note

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());
  }
}

API

ImagePreviewComponent

Inputs

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

InputMaskComponent

Inputs

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

Outputs

Output	Type	Description
(onChange)	`number`	Execute when change
(paste)	`Event`	Execute when change

InputSuggestMoneyComponent

Inputs

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

Outputs

Output	Type	Description
(onChange)	`number`	Execute when change
(onRemove)	`Event`	Execute when remove

ModalConfirmComponent

IModalConfirmContent

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