# UtilscoreAR

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0.

## Code scaffolding

Run `ng generate component component-name --project utilscore-ar` to generate a new component. You can also
use `ng generate directive|pipe|service|class|guard|interface|enum|module --project utilscore-ar`.
> Note: Don't forget to add `--project utilscore-ar` or else it will be added to the default project in
> your `angular.json` file.

## Build

Run `ng build utilscore-ar` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build utilscore-ar`, go to the dist folder `cd dist/utilscore-ar` and
run `npm publish`.

## Running unit tests

Run `ng test utilscore-ar` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out
the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

# Validators

## angular2 built-in validators

- required
- minlength
- maxlength
- pattern

## custom validators

- rangeLength
- min
- gt
- gte
- max
- lt
- lte
- range
- digits
- number
- url
- email
- date
- minDate
- maxDate
- dateISO
- creditCard
- json
- base64
- phone
- uuid
- equal
- notEqual
- equalTo
- notEqualTo

# Usage

### rangeLength

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]"/>
<p *ngIf="field.errors?.rangeLength">error message</p>
```

### min

```html
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10"/>
<p *ngIf="field.errors?.min">error message</p>
```

### gt

```html
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10"/>
<p *ngIf="field.errors?.gt">error message</p>
```

### gte

```html
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gte]="10"/>
<p *ngIf="field.errors?.gte">error message</p>
```

### max

```html
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [max]="20"/>
<p *ngIf="field.errors?.max">error message</p>
```

### lt

```html
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lt]="20"/>
<p *ngIf="field.errors?.lt">error message</p>
```

### lte

```html
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lte]="20"/>
<p *ngIf="field.errors?.lte">error message</p>
```

### range

```html
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="field.errors?.range">error message</p>
```

### digits

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" digits/>
<p *ngIf="field.errors?.digits">error message</p>
```

### number

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" number/>
<p *ngIf="field.errors?.number">error message</p>
```

### url

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" url/>
<p *ngIf="field.errors?.url">error message</p>
```

### email

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" email/>
<p *ngIf="field.errors?.email">error message</p>
```

### date

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" date/>
<p *ngIf="field.errors?.date">error message</p>
```

### minDate

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" minDate="2016-09-09"/>
<p *ngIf="field.errors?.minDate">error message</p>
```

### maxDate

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" maxDate="2016-09-09"/>
<p *ngIf="field.errors?.maxDate">error message</p>
```

### dateISO

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" dateISO/>
<p *ngIf="field.errors?.dateISO">error message</p>
```

### creditCard

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" creditCard/>
<p *ngIf="field.errors?.creditCard">error message</p>
```

### json

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" json/>
<p *ngIf="field.errors?.json">error message</p>
```

### base64

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" base64/>
<p *ngIf="field.errors?.base64">error message</p>
```

### phone

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" phone="CN"/>
<p *ngIf="field.errors?.phone">error message</p>
```

details see [libphonenumber](https://github.com/halt-hammerzeit/libphonenumber-js)

### uuid

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [uuid]="'all'"/>
<p *ngIf="field.errors?.uuid">error message</p>
```

*default*: all

**support**

- 3
- 4
- 5
- all

### equal

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [equal]="'xxx'"/>
<p *ngIf="field.errors?.equal">error message</p>
```

### equal

```html
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [notEqual]="'xxx'"/>
<p *ngIf="field.errors?.notEqual">error message</p>
```

### equalTo

```html
<input type="password" ngModel name="password" #password="ngModel" required/>
<p *ngIf="password.errors?.required">required error</p>
<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password"/>
<p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>
```

### notEqualTo

```html
<input type="text" ngModel name="password" #password="ngModel" required/>
<p *ngIf="password.errors?.required">required error</p>
<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [notEqualTo]="password"/>
<p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>
```

## Modules

- AuthGuard
- AuthService<T>
- TokenService
- ChangePasswordManager<T>
- LoginManager<T>
- ButtonGoToModule
  - ```html
	<button-go-to></button-go-to>
	```
    - Inputs:
      - srcImage: string = "./assets/img/btt.png"
- CrudModule
  - CrudService
  - ```html
	<ng-container [crud-create]></ng-container>
	```
    - Outputs:
      - crudClick = new EventEmitter()
  - ```html
	<ng-container [crud-read]></ng-container>
	```
    - Outputs:
      - crudClick = new EventEmitter()
  - ```html
	<ng-container [crud-update]></ng-container>
	```
    - Outputs:
      - crudClick = new EventEmitter()
  - ```html
	<ng-container [crud-delete]></ng-container>
	```
    - Outputs:
      - crudClick = new EventEmitter()
  - ConfigService
    - Outputs:
      - onShowFilter = new EventEmitter()
  - HttpBaseService
  - FormTemplateModule
    - SingleForm
    - FormManager
  - ```html
	<ng-container [acFocus]></ng-container>
	```
  - ```html
	<form-template></form-template>
	```
    - Inputs:
      - formTitle: string = "Mantenimiento"
      - icon: string = "fa fa-edit"
      - showIconTitle: boolean = true
      - form: NgForm
      - showOkButton: boolean = true
      - okButtonLabel: string = "Guardar"
      - okButtonIcon: string = "fa fa-floppy-o"
      - okButtonColor: string = "btn-primary"
      - closeButtonStyle = new Object()
      - okAndNew: boolean
      - showOkAndNew: boolean = true
      - okAndNewLabel: string = "Guardar y nuevo"
      - showCancelButton: boolean = true
      - cancelButtonLabel: string = "Cancelar"
      - cancelButtonIcon: string = ""
      - cancelButtonColor: string = "btn-secondary"
      - showHeader: boolean = true
      - showCloseButton: boolean = true
      - busy: boolean
      - adding: boolean
      - keyboard: boolean = true
      - okKeyCode: number = 115
      - cancelKeyCode: number = 27
    - Outputs:
      - okAndNewChange = new EventEmitter<boolean>()
      - onActionChange = new EventEmitter()
      - onBusyChange = new EventEmitter()
      - addingChange = new EventEmitter()
  - appInjector
- DirectiveModule
  - ```html
	<input trim />
	```
  - ```html
	<textarea trim />
	```
  - ```html
	<textarea [autosize]></textarea>
	```
  - ```html
	<ng-container [autoScroll]></ng-container>
	```
  - ```html
	<ng-container [lazyLoader]></ng-container>
	```
    - Outputs:
      - onToggle = new EventEmitter()
  - ```html
	<ng-container [mailTo]></ng-container>
	```
  - ```html
	<ng-container [cNumber]></ng-container>
	```
    - Inputs:
      - cFormat") format = "1.2-2"
      - cAlign") align = "right"
      - cAllowNegative") allowNegative = true
      - cNegativeColor") negativeColor = ""
  - ```html
	<ng-container [objectWatcher]></ng-container>
	```
    - Outputs:
      - onPropertyChanged = new EventEmitter()
- InputWrapperModule
  - ```html
	<ng-container [input-wrapper]></ng-container>
	```
    - Inputs:
      - labelName = ""
      - labelFor = ""
- PaginationARModule
  - ```html
	<pagination-ar></pagination-ar>
	```
    - Inputs:
      - page = new Page()
      - rowsPerPage: number[] = []
      - maxSize: number = 4
      - boundaryLinks: boolean = true
      - previousText: string = "&lsaquo"
      - nextText: string = "&rsaquo"
      - firstText: string = "&laquo"
      - lastText: string = "&raquo"
      - showTotalRows: boolean = true
      - showPageSize: boolean = true
    - Outputs:
      - onPaginate = new EventEmitter<Page>()
- PipeModule
  - ```html
	<ng-container> {{value | customFilter}} </ng-container>
	```
  - ```html
	<ng-container> {{value | identification}} </ng-container>
	```
  - ```html
	<ng-container> {{value | phone}} </ng-container>
	```
  - ```html
	<ng-container> {{value | safe}} </ng-container>
	```
  - ```html
	<ng-container> {{value | splitFilter}} </ng-container>
	```
- SwitchModule
  - ```html
	<ng-container [dSwitch]></ng-container>
	```
  - ```html
	<ng-container [switch]></ng-container>
	```
    - Inputs:
      - size: string = "switch-sm"
      - color: string = "switch-secondary"
      - dataKey: string = ""
      - labelName: string = ""
      - labelRightLocation: boolean = true
      - switchStyle: Object = new Object()
      - breakLine = false

Example config.json

```json
{
  "config": {
    "active": "dev",
    "apps": [
      {
        "key": "dev",
        "api": "http://your-ip/",
        "report": "http://your-ip/"
      },
      {
        "key": "prod",
        "api": "http://your-ip/",
        "report": "http://your-ip/"
      }
    ],
    "AuthRoute": {
      "LoginSegment": "Account/Login",
      "RegisterSegment": "Account/Register",
      "LogOutSegment": "Account/Logout",
      "UpdateTokenSegment": "Account/UpdateToken",
      "ChangePasswordSegment": "Account/ChangePassword",
      "LoginUrl": "/login",
      "ChangePasswordUrl": "/change-password"
    },
    "AuthConfig": {
      "TokenName": "token",
      "RefreshTokenName": "refresh_token",
      "HeaderName": "Authorization",
      "HeaderPrefix": "Bearer",
      "NoJwtError": false,
      "TokenStorage": 1
    }
  }
}
```

```typescript
enum TokenStorage {
  SESSION_STORAGE = 0,
  LOCAL_STORAGE = 1
}
```

## License

MIT ©
[Desyco Logical Solutions](mailto:desycologicalsolutions@gmail.com)