UtilscoreAR

This library was generated with 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.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference 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

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

min

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

gt

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

gte

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

max

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

lt

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

lte

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

range

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

digits

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

number

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

url

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

email

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

date

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

minDate

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

maxDate

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

dateISO

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

creditCard

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

json

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

base64

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

phone

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

details see libphonenumber

uuid

<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

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

equal

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

equalTo

<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

<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
• TokenService
• ChangePasswordManager
• LoginManager
• ButtonGoToModule

  • <button-go-to></button-go-to>

    • Inputs:
      • srcImage: string = "./assets/img/btt.png"
• CrudModule
  • CrudService

  • <ng-container [crud-create]></ng-container>

    • Outputs:
      • crudClick = new EventEmitter()

  • <ng-container [crud-read]></ng-container>

    • Outputs:
      • crudClick = new EventEmitter()

  • <ng-container [crud-update]></ng-container>

    • Outputs:
      • crudClick = new EventEmitter()

  • <ng-container [crud-delete]></ng-container>

    • Outputs:
      • crudClick = new EventEmitter()
  • ConfigService
    • Outputs:
      • onShowFilter = new EventEmitter()
  • HttpBaseService
  • FormTemplateModule
    • SingleForm
    • FormManager

  • <ng-container [acFocus]></ng-container>

  • <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()
      • onActionChange = new EventEmitter()
      • onBusyChange = new EventEmitter()
      • addingChange = new EventEmitter()
  • appInjector
• DirectiveModule

  • <input trim />

  • <textarea trim />

  • <textarea [autosize]></textarea>

  • <ng-container [autoScroll]></ng-container>

  • <ng-container [lazyLoader]></ng-container>

    • Outputs:
      • onToggle = new EventEmitter()

  • <ng-container [mailTo]></ng-container>

  • <ng-container [cNumber]></ng-container>

    • Inputs:
      • cFormat") format = "1.2-2"
      • cAlign") align = "right"
      • cAllowNegative") allowNegative = true
      • cNegativeColor") negativeColor = ""

  • <ng-container [objectWatcher]></ng-container>

    • Outputs:
      • onPropertyChanged = new EventEmitter()
• InputWrapperModule

  • <ng-container [input-wrapper]></ng-container>

    • Inputs:
      • labelName = ""
      • labelFor = ""
• PaginationARModule

  • <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()
• PipeModule

  • <ng-container> {{value | customFilter}} </ng-container>

  • <ng-container> {{value | identification}} </ng-container>

  • <ng-container> {{value | phone}} </ng-container>

  • <ng-container> {{value | safe}} </ng-container>

  • <ng-container> {{value | splitFilter}} </ng-container>

• SwitchModule

  • <ng-container [dSwitch]></ng-container>

  • <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

{
  "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
    }
  }
}

enum TokenStorage {
  SESSION_STORAGE = 0,
  LOCAL_STORAGE = 1
}

License

MIT © Desyco Logical Solutions