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 |

Outputs

| Output | Type | Description | |-------------|---------|----------------------| | (onConfirm) | event | Execute when confirm |

SmaxApp Logo

Types

| Property | Type | Default | Required | Description | |----------------|----------|-----------|----------|----------------------------| | IModules | object | unknown | yes | Title of modal |

Inputs

| Output | Type | Description | |---------------|------------|------------------| | modules | IModules[] | List Module | | currentModule | IModules | Currently Module | | quickModules | string[] | Id Quick Module |

BoxChatComponent

Types

| Property | Type | Default | Required | Description | |---------------|------------------------|-----------|----------|----------------------| | Biz | object | unknown | yes | Biz | | infoOrder | {orderId; orderCode} | unknown | yes | Biz | | currentModule | string | `` | yes | Current Module Alias |

Inputs

| Output | Type | Description | |---------------|-----------|----------------------| | biz | Biz | Biz | | infoOrder | InfoOrder | Info Order | | currentModule | string | Current Module Alias |

BubbleChatComponent

Types

| Property | Type | Default | Required | Description | |---------------|------------------------|-----------|----------|----------------------| | Biz | object | unknown | yes | Biz |

Inputs

| Output | Type | Description | |---------------|-----------|----------------------| | biz | Biz | Biz |