utilscore-ar

UtilsCore para los proyectos de angular 9+

Usage no npm install needed!

<script type="module">
  import utilscoreAr from 'https://cdn.skypack.dev/utilscore-ar';
</script>

README

UtilsCore Alexis - Ronny

Installation

To install this library, run:

$ npm i utilscore-ar --save

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 © Alexis Castro Ronny Zapata