# Tyatech UI

# Installation

```shell
npm i tyatech-ui
```

<b>Recommend using Angular version 12.2.17 or higher.</b> <br/>
<b>Recommend to use Nebular version 8.0.0 or higher.</b>

<b>*Update style.scss</b>
```shell
....

@import 'tyatech-ui/tyatech-ui.scss';

....
```
<br/>
<b>*Update angular.json</b>

```shell
{
  ...
  "projects": {
    "ngx-admin-demo": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "node_modules/tyatech-ui/tyatech-ui.scss",
              //styles.scss
            ],
            ...
          },
        },
        "test": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "node_modules/tyatech-ui/tyatech-ui.scss",
              //styles.scss
            ],
            ...
          },
        },
      },
    },
  },
}
```

# New Features!

<ul>
  <li>
    The Vietnamese number format on input cards is based on Nebular.
  </li>
  <li>
    Embed Vietnamese number format in input card.
  </li>
  <li>
    Autocomplete.
  </li>
  <li>
    Generate QR Code. (new version)
  </li>  
  <li>
    Tya icon.
  </li>
  <li>
    Tya color picker.
  </li>
</ul>



# Contributions

Contributions are very welcome! It helps me know what features are desired or what bugs are causing the most pain.

I have just one request; If you submit a pull request for a bugfix, please add a unit-test or integration-test (in the spec folder) that catches the problem.
 Even a PR that just has a failing test is fine - I can analyse what the test is doing and fix the code from that.

Contact Info: truonganh710@gmail.com

Note: Please try to avoid modifying the package version in a PR.
Versions are updated on release and any change will most likely result in merge collisions.

To be clear, all contributions added to this library will be included in the library's MIT licence.

# Contents

**[Format Vietnamese numbers on input cards on Nebular](#format-vietnamese-numbers-on-input-cards-on-nebular)**<br>
**[Format Vietnamese numbers on input card](#format-vietnamese-numbers-on-input-card)**<br>
**[Autocomplete](#autocomplete)**<br>
**[Generate QR Code](#generate-qr-code)**<br>
**[Tya Icon](#tya-icon)**<br>
**[Tya Color Picker](#tya-color-picker)**<br>

# Format Vietnamese numbers on input cards on Nebular[⬆](#contents)<!-- Link generated with jump2header -->

Import module

```javascript
import { TyaNumberVnInputModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    ...
    TyaNumberVnInputModule,
  ],
})
```

HTML:

```html
<tya-number-vn-input
  [value]="100300490" 
  [statusInput]="'basic'"
  (changeValue)="retunr($event)"
  [disabled]="false"
></tya-number-vn-input>
```

<b>[value]</b> : Input value <br/>
<b>[statusInput]</b> : Color status 
<ul>
  <li><img src="https://placehold.co/15x15/EDF1F7/EDF1F7.png"> basic</li>
  <li><img src="https://placehold.co/15x15/3366FF/3366FF.png"> primary</li>
  <li><img src="https://placehold.co/15x15/00B887/00B887.png"> success</li>
  <li><img src="https://placehold.co/15x15/0095FF/0095FF.png"> info</li>
  <li><img src="https://placehold.co/15x15/FFAA00/FFAA00.png"> warning</li>
  <li><img src="https://placehold.co/15x15/FF3D71/FF3D71.png"> danger</li>
  <li><img src="https://placehold.co/15x15/FFFFFF/FFFFFF.png"> control</li>
</ul>
<b>(changeValue)</b> : Numeric return value | catch the valueChange event<br/>
<b>[disabled]</b> : Disabled input<br/>

<img src="https://raw.githubusercontent.com/TYA-Technologies/store-npm/main/tyatech-nebular/2023-01-13_153419.png">


# Format Vietnamese numbers on input card[⬆](#contents)<!-- Link generated with jump2header -->

Import module

```javascript
import { TyaDirectivesModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaDirectivesModule,
    ...
  ],
})
```

HTML:

```html
<input TyaNumberVNInput/>
```
<img src="https://github.com/TYA-Technologies/store-npm/blob/main/tyatech-nebular/2023-01-13_153542.png?raw=true">


# Autocomplete[⬆](#contents)<!-- Link generated with jump2header -->

Import module

```javascript
import { TyaAutocompleteModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaAutocompleteModule,
    ...
  ],
})
```

HTML:

```html
<tya-autocomplete
  [data]="lstDataKey"
  key="key"
  value="value"
  fullWidth="true"
  status="basic"
  placeholder="Enter value"
  [isWarning]="true"
  nbPopoverPlacement="top"
  warningContent="Data entered incorrectly"
  messageNoData="No data"
  (valueChange)="returnAutoComlete($event)"
></tya-autocomplete>
```

<b>[data]</b> : List data <br/>
<b>[key]</b> : Key data field <br/>
<b>[value]</b> : Display content data field <br/>
<b>[fullWidth]</b> : If set element will fill container. false by default. <br/>
<b>[status]</b> : Color status. basic by default.
<ul>
  <li><img src="https://placehold.co/15x15/EDF1F7/EDF1F7.png"> basic</li>
  <li><img src="https://placehold.co/15x15/3366FF/3366FF.png"> primary</li>
  <li><img src="https://placehold.co/15x15/00B887/00B887.png"> success</li>
  <li><img src="https://placehold.co/15x15/0095FF/0095FF.png"> info</li>
  <li><img src="https://placehold.co/15x15/FFAA00/FFAA00.png"> warning</li>
  <li><img src="https://placehold.co/15x15/FF3D71/FF3D71.png"> danger</li>
  <li><img src="https://placehold.co/15x15/FFFFFF/FFFFFF.png"> control</li>
</ul>
<b>[placeholder]</b> : Placeholder <br/>
<b>[isWarning]</b> : Is there a warning. false by default. <br/>
<b>[nbPopoverPlacement]</b> : Popover location. top by default. <br/>
<b>[warningContent]</b> : Warning content. Data entered incorrectly by default. <br/>
<b>[messageNoData]</b> : Message no data. No data by default. <br/>
<b>[styleInput]</b>: Style input; [How to use ngStyle](https://angular.io/api/common/NgStyle) <br/>
<b>[selectedIndex]</b>: Position of the selected value in the input data array <br/>
<b>(valueChange)</b> : Returns the selected primary key | catch the valueChange event<br/>


Component

```javascript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ngx-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  lstDataKey: Partial<Array<{ key: string, value: string }>> = [];

  constructor() { }

  ngOnInit(): void {
    this.lstDataKey = [
      {
        key: '1',
        value: 'Option 1'
      },
      {
        key: '2',
        value: 'Option 2'
      },
      {
        key: '3',
        value: 'Option 3'
      }
    ];
  }

  returnAutoComlete(e) {
    console.log(e); //return key
  }
}
```

# Generate QR Code[⬆](#contents)<!-- Link generated with jump2header -->

Import module

```javascript
import { TyaQrcodeModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaQrcodeModule,
    ...
  ],
})
```

HTML:

```html
<tya-qrcode
      contentQR="https://www.google.com"
      [width]="256"
      colorQR="#000000ff"
      colorBackground="#ffffffff"
      [scale]="4"
      [margin]="4"
      urlImage="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg"
      [typeQr]="typeQrData[indexType].value"
      [typeDots]="optionAdvancedQrData[indexOption].value"
></tya-qrcode>
```

<b>[contentQR]</b> : Content of QR CODE. No data by default. <br/>
<b>[width]</b> : Width of QR code. 256 by default. <br/>
<b>[colorQR]</b> : Color of QR Code. #000000ff by default. <br/>
<b>[colorBackground]</b> : Color of the Background. #ffffffff by default. <br/>
<b>[scale]</b> : Scale factor. A value of 1 means 1px per modules (black dots). 4 by default.<br/>
<b>[margin]</b> : Define how much wide the quiet zone should be. 4 by default. <br/>
<b>[cssClass]</b> : CSS Class. qrcode by default. <br/>
<b>[typeQr]</b> : QR code type. Basic by default. <br/>
<b>[urlImage]</b> : Image link shows QR code. <br/>
<b>[typeDots]</b> : Type dots option. dots by default. <br/><br/>

<b>Preconfigured typeQr and typeDots data, see example:</b><br/>

Component

```javascript
import { Component, OnInit } from '@angular/core';
import { OptionAdvancedQr, OptionAdvancedQrData, TypeQr, TypeQrData } from 'tyatech-ui';

...

export class MyComponent implements OnInit {

  typeQr = TypeQr;
  optionAdvancedQr = OptionAdvancedQr;
  typeQrData = TypeQrData;
  optionAdvancedQrData = OptionAdvancedQrData;
  isShow = true;

  indexType = 1;
  indexOption = 2;

  constructor() { }

  ngOnInit(): void {
  }

  getIndexType(key: string) {
    this.isShow = false;
    this.indexType = TypeQrData.findIndex(item => item.key === key);
    this.isShow = true;
  }

  getIndexOption(key: string) {
    this.isShow = false;
    this.indexOption = OptionAdvancedQrData.findIndex(item => item.key === key);
    setTimeout(() => {
      this.isShow = true;
    }, 200);
  }
}
```

<br/>

Module

```javascript
import { NgModule } from "@angular/core";
import { TyaQrcodeComponent } from "./tya-qrcode.component";
import { TyaQrcodeModule, TyaAutocompleteModule } from "tyatech-ui";
import { CommonModule } from "@angular/common";

...

@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule,
    TyaQrcodeModule,
    TyaAutocompleteModule
  ],
})
export class MyModule {}
```

<br/>

HTML

```html
<div class="row">
  <div class="col-md-12" *ngIf="isShow">
    <tya-qrcode
      contentQR="https://www.google.com"
      [width]="256"
      colorQR="#000000ff"
      colorBackground="#ffffffff"
      [scale]="4"
      [margin]="4"
      urlImage="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg"
      [typeQr]="typeQrData[indexType].value"
      [typeDots]="optionAdvancedQrData[indexOption].value"
    ></tya-qrcode>
  </div>

  <div class="col-md-6 mt-2">
    <label>Type Qr code</label>
    <tya-autocomplete
      [data]="typeQrData"
      key="key"
      value="value"
      fullWidth="true"
      status="basic"
      placeholder="Enter value"
      (valueChange)="getIndexType($event)"
    ></ngx-tya-autocomplete-demo>
  </div>

  <div class="col-md-6 mt-2">
    <label>Option Qr code</label>
    <tya-autocomplete
      [data]="optionAdvancedQrData"
      key="key"
      value="value"
      fullWidth="true"
      status="basic"
      placeholder="Enter value"
      (valueChange)="getIndexOption($event)"
    ></tya-autocomplete>
  </div>
</div>
```
<br/>
<br/>

<img src="https://github.com/TYA-Technologies/store-npm/blob/main/tyatech-nebular/QRCODE1.png?raw=true">

*Hover mouse over qr code to download

<img src="https://github.com/TYA-Technologies/store-npm/blob/main/tyatech-nebular/QRCODE2.png?raw=true">


*New Version

<img src="https://raw.githubusercontent.com/TYA-Technologies/store-npm/main/tyatech-nebular/QRCODE3.png">


# Tya Icon[⬆](#contents)<!-- Link generated with jump2header -->

<b>Note:</b>
If installed <b>primeng</b> version lower than <b><i>12.2.1</i></b> and <b>primeicons</b> version lower than <b><i>4.1.0</i></b>.
Please upgrade!

Import module

```javascript
import { TyaIconModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaIconModule,
    ...
  ],
})
```

HTML:

```html
<tya-icon
  icon="tya-eva-save"
  [spinner]="true"
  size="2rem"
  color="#ffffffff"
  [opacity]="1"
></tya-icon>
```

<b>[icon]</b> : Icon name. No data by default. <br/>
<b>[spinner]</b> : Icon rotation effect. false by default. <br/>
<b>[size]</b> : Icon size. 1.5rem by default. <br/>
<b>[color]</b> : Icon color. black by default. <br/>
<b>[opacity]</b> : Icon transparency. 1 by default.<br/>

[List icon](https://tya-technologies.github.io/tool#/lib-doc/tya-icon-list)

# Tya Color Picker[⬆](#contents)<!-- Link generated with jump2header -->

Import module

```javascript
import { TyaColorPickerModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaColorPickerModule,
    ...
  ],
})
```

HTML:

```html
<tya-color-picker
  color="#e23535"
  [fullWidth]="false"
  (colorPickerChange)="change($event)"
></tya-color-picker>

```

<b>[color]</b> : The color to show in the color picker dialog. #000000 by default.<br/>
<b>[fallbackColor]</b> : Used when the color is not well-formed or is undefined. #000 by default. <br/>
<b>[presetLabel]</b> : Label text for the preset colors if any provided (Displayed only when <i>presetColors</i> are passed in). 'Preset colors' by default. <br/>
<b>[presetColors]</b> : Array of preset colors to show in the color picker dialog. [] by default. ex: ['#000000', '#ffffff']<br/>
<b>[colorMode]</b> : Dialog color mode. Pre-installed data in ColorMode, see details below. ColorMode.Color by default.<br/>
<b>[defaultFormat]</b> : Output color format. Data is pre-installed in OutputFormat, see details below. OutputFormat.Auto by default.<br/>
<b>[alphaChannel]</b> : Alpha mode. Pre-installed data in AlphaChannel, see details below. AlphaChannel.Enabled by default.<br/>
<b>[position]</b> : Dialog position. Pre-installed data in PositionDialog, see details below. PositionDialog.Auto by default.<br/>
<b>[dialogDisplay]</b> : Dialog positioning mode. Pre-installed data in DialogDisplay, see details below. DialogDisplay.Popup by default.<br/>
<b>[width]</b> : Use this option to set color picker dialog width. 300 by default. <br/>
<b>[height]</b> : Use this option to force color picker dialog height. 300 by default. if presetColors has a value and if passing height has a value lower than 350, the height will be automatically converted to 350.<br/>
<b>[positionOffset]</b> : Dialog offset percentage relative to the directive element. 0 by default. <br/>
<b>[isCmyk]</b> : Enables CMYK input format and color change event. false by default. <br/>
<b>[isToggle]</b> : Status of the dialog, send when dialog is opened / closed. false by default. <br/>
<b>[isDisabled]</b> : Disables opening of the color picker dialog via toggle / events. false by default. <br/>
<b>[fullWidth]</b> : set fullWidth. false by default. <br/>
<b>(colorPickerOpen)</b> : Current color value, send when dialog is opened (value: string).<br/>
<b>(colorPickerClose)</b> : Current color value, send when dialog is closed (value: string).<br/>
<b>(colorPickerChange)</b> : Changed color value, send when color is changed (value: string).<br/>
<b>(colorPickerCancel)</b> : Color select canceled, send when Cancel button is pressed (void).<br/>
<b>(colorPickerSelect)</b> : Selected color value, send when OK button is pressed (value: string).<br/>
<b>(inputChange)</b> : Input name and its value, send when user changes color through inputs.<br/>({input: string, value: number | string, color: string})<br/>
<b>(toggleChange)</b> : Status of the dialog, send when dialog is opened / closed (open: boolean).<br/>
<b>(sliderChange)</b> : Slider name and its value, send when user changes color through slider.<br/>({slider: string, value: number | string, color: string}).<br/>
<b>(sliderDragStart)</b> : Slider name and current color, send when slider dragging starts (mousedown,touchstart).<br/>({slider: string, color: string}).<br/>
<b>(sliderDragEnd)</b> : Slider name and current color, send when slider dragging ends (mouseup,touchend).<br/>({slider: string, color: string}).<br/>
<b>(cmykColorChange)</b> : Outputs the color as CMYK string if CMYK is enabled (value: string).<br/><br/><br/>

*Detailed values: colorMode, defaultFormat, alphaChannel, position, dialogDisplay.


Component

```javascript
import { 
  ColorMode, 
  OutputFormat, 
  AlphaChannel, 
  PositionDialog, 
  DialogDisplay 
} from 'tyatech-ui';
...

export class TyaColorPickerComponent implements OnInit {
  ...
  colorMode = ColorMode;
  outputFormat = OutputFormat; 
  alphaChannel = AlphaChannel; 
  positionDialog = PositionDialog; 
  dialogDisplay = DialogDisplay; 

  //check
  ngOnInit(): void {
    console.log(this.colorMode)
    console.log(this.outputFormat)
    console.log(this.alphaChannel)
    console.log(this.positionDialog)
    console.log(this.dialogDisplay)
  }
  ...
}
```

HTML:

```html
<tya-color-picker
  ....
  [colorMode]="colorMode.Color"
  [defaultFormat]="outputFormat.Auto"
  [alphaChannel]="alphaChannel.Enabled"
  [position]="positionDialog.Auto"
  [dialogDisplay]="dialogDisplay.Popup"
  ....
></tya-color-picker>

```