SM-UI-LIBRARY

This library was generated with Angular CLI version 12.2.0.

Installing

npm install sm-ui-library

Developing Locally

To see your changes to sm-ui-library locally you'll need to link the package with npm:

$ git clone https://git.rapidops.com/salesmate/sm-ui-kit.git
$ cd /path/to/sm-ui-kit
$ npm link
$ cd /path/to/assets-frontend
$ rm -rf node_modules/sm-ui-kit
$ npm link sm-ui-kit

Put below scripts in angular.json

"options": {
            ...
            "styles": [
              ...
              "node_modules/sm-ui-library/assets/styles/scss/sm-init.scss",
              ...
            ],
            "preserveSymlinks": true
          },

Update app.module.ts file

import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
import {SmUiLibraryModule} from "sm-ui-library";

@NgModule({
  ...
  imports: [
    ...
    SmUiLibraryModule
    ...
  ],
  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

Restrict strictInitialization in tsconfig.app.json

{
  ...
  "compilerOptions": {
    ...
    "strictPropertyInitialization": false
  },
  ...
}

Adding various components

Textfield

@html
<sm-input-txt 
              [formGroup]="formGroup"
              [fieldMeta]="textField"
              (blur)="onBlur($event)">
</sm-input-txt>

@typescript

import {  TextField } from "sm-ui-library";
...
export class AppComponent implements OnInit {
    ...
  textField: TextField;
  formGroup: FormGroup;

  constructor(private changeRef: ChangeDetectorRef) {
    this.formGroup = new FormGroup({});
  }

  ngOnInit(): any {
    this.makeFields();
  }

  makeFields(): any {
    this.textField = new TextField({
      fieldName: 'textField',
      displayName: 'Input box'
    });
  }

  onBlur(): void {
    console.log('test blur', this.formGroup.value);
  }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field showLabel | boolean | true | no | to show or hide the label

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- class | string | '' | no | class to be applied on component showLink | boolean | false | no | to show as link above text field (should be used with type='url' or with fieldName=linkedInHandle/facebookHandle/twitterHandle/googlePlusHandle/instagramHandle) type | string | - | no | type of the field inputType | string | 'text' | no | type of input field title | string | '' | no | title of the field customLinkedInUrl |string | 'https://linkedin.com/in/' | no | to show linked in link (used with fieldName = linkedInHandle)

events

Events | Uses -------- | ------ blur | called on blur of field focus | called on focus of the field keyup | called on keyup of the field

functions available in TextField

Function | Description -----------| ---------- getLink(value: any) | It is used to return link value

DateRangePickerField

@html
<div>
  <slable>Date range picker</slable>
  <sm-daterange-picker [formGroup]="formGroup"
                       [cssClass]="'label-inline m-b-none w-md '"
                       [fieldMeta]="dateRangePickerField"
                       (blur)="onDateRangePickerBlur($event)">
  </sm-daterange-picker>
</div>

@typescript
import {  DateRangePickerField } from "sm-ui-library";

export class AppComponent implements OnInit {
    ...
  dateRangePickerField: DateRangePickerField;
  formGroup: FormGroup;
  rangeOptions:any

  constructor(private changeRef: ChangeDetectorRef) {
    this.formGroup = new FormGroup({});
    this.rangeOptions = {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'This Week': [moment().startOf('week'), moment().endOf('week')],
        'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
        'This Quarter': [moment().startOf('quarter'), moment().endOf('quarter')],
        'Last Quarter': [moment().subtract(1, 'quarter').startOf('quarter'), moment().subtract(1, 'quarter').endOf('quarter')],
        'This Year': [moment().startOf('year'), moment().endOf('year')],
        'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
    }
  }

  ngOnInit(): any {
    this.dateRangePickerField = new DateRangePickerField({
      minDate: moment().startOf('d'),
      dateFormat: 'DD-MM-YYYY',
      fieldName: 'dateRange',
      opens: 'right',
      locale: {
        format: 'DD-MM-YYYY'
      },
      startDate: moment().startOf('d'),
      endDate: moment().add(30, 'days').startOf('d'),
      ranges: rangeOptions
    });
  }  

  onDateRangePickerBlur($event: any) {
      console.log($event);
  }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field, showLabel | boolean | true | no | to show or hide the label (displayName must be there in fieldMeta)

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- dateFormat | string | 'DD-MM-YYYY hh:mm:ss' | no | date format of the field readOnly | boolean | false | no | to disable and enable field class | string | '' | no | class for the field singleDatePicker | boolean | false | no | to show single date picker popup timePicker | boolean | false | no | to show only time picker startDate |string | '' | no | default start date endDate | string | '' | no | default end date minDate | string | '' | no | minimum date of the field maxDate | string | '' | no | maximum date of the field ranges | any | {} | yes | range options to show opens | string | 'left' | no | to open popup position timePicker24Hour | boolean | false | no | to show time in 24 hour format applyButtonClasses | string | '' | no | classes for apply button

events

Events | Uses -------- | ------ blur | called on blur of field

functions available in DateRangePickerField

Function | Description -----------| ---------- DateRangePickerField.getDateRangeValue(rangeType) | It return value of given range type (rangeType can be among these 'LAST_7_DAYS', 'LAST_30_DAYS', 'TODAY', 'YESTERDAY', 'THIS_WEEK', 'LAST_WEEK', 'NEXT_WEEK', 'THIS_MONTH', 'LAST_MONTH', 'NEXT_MONTH', 'THIS_QUARTER', 'LAST_QUARTER', 'NEXT_QUARTER', 'THIS_YEAR', 'LAST_YEAR', 'NEXT_YEAR', 'MORE_THAN_X_DAYS_AGO', 'LESS_THAN_X_DAYS_AGO', 'MORE_THAN_X_UPCOMING_DAYS', 'LESS_THAN_X_UPCOMING_DAYS') DateRangePickerField.getPreviousDateRangeValue(rangeType) | It return previous value of given range type (rangeType can be among these 'LAST_7_DAYS', 'LAST_30_DAYS', 'TODAY', 'YESTERDAY', 'THIS_WEEK', 'LAST_WEEK', 'NEXT_WEEK', 'THIS_MONTH', 'LAST_MONTH', 'NEXT_MONTH', 'THIS_QUARTER', 'LAST_QUARTER', 'NEXT_QUARTER', 'THIS_YEAR', 'LAST_YEAR', 'NEXT_YEAR', 'MORE_THAN_X_DAYS_AGO', 'LESS_THAN_X_DAYS_AGO', 'MORE_THAN_X_UPCOMING_DAYS', 'LESS_THAN_X_UPCOMING_DAYS')

CheckboxField

@html
<sm-checkbox
    [formGroup]="formGroup"
    [fieldMeta]="checkboxField"
    [value]="checkboxField.value">
</sm-checkbox>

@typescript
import {  CheckboxField } from "sm-ui-library";
...
export class AppComponent implements OnInit {
    ...
    checkboxField: CheckboxField;
    formGroup:FormGroup;
    checkOptions:Array<any>;
    ...
    constructor(private changeRef: ChangeDetectorRef) {
        this.formGroup = new FormGroup({});
        this.checkOptions = [{label: 'one', value: 'one'}, {label: 'two', value: 'two'}]
    }
    ngOnInit(){
        this.checkboxField = new CheckboxField({
              fieldName: 'email_isTracking',
              displayName: 'Checkboxes',
              options: checkOptions
            });
        this.checkboxField.value = 'one'
    }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field, showLabel | boolean | true | no | to show or hide the label,

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- readOnly | boolean | false | no | to disable and enable field class | string | '' | no | class for the field options | Array | [] | no | options to show in checkboxes newLine | boolean | false | no | to show the checkboxes in new line

events

Events | Uses -------- | ------ blur | called on blur of field

TextareaField

@html
<sm-textarea-txt
    [showLabel]="true"
    [formGroup]="formGroup"
    [fieldMeta]="textAreaField">
</sm-textarea-txt>

@typescript
import { TextareaField } from "sm-ui-library";
...
export class AppComponent implements OnInit {
    ...
    textAreaField: TextareaField;
    formGroup:FormGroup;
    ...
    constructor(private changeRef: ChangeDetectorRef) {
        this.formGroup = new FormGroup({});
    }

    ngOnInit(){
        this.textAreaField = new TextareaField({
              fieldName: 'reason',
              displayName: 'Text Area',
              placeholder: 'Your text area field'
        });
    }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field, showLabel | boolean | true | no | to show or hide the label, doTrim | boolean | true | no | trims the value of the text area

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- fieldName | string | '' | true | to set the value of field in formGroup displayName | string | '' | false | to show label and title of the field placeholder | string | '' | no | placeholder of the field

events

Events | Uses -------- | ------ blur | called on blur of field

RadioField

@html
<sm-radio
  [fieldMeta]="radioField"
  [formGroup]="formGroup"
  (blur)="onRadioChanged($event)">
</sm-radio>

@typescript
import { RadioField } from "sm-ui-library";

...
export class AppComponent implements OnInit {
    ...
    radioField: RadioField;
    formGroup:FormGroup;
    radioOptions: Array<any>;
    ...
    constructor(private changeRef: ChangeDetectorRef) {
        this.formGroup = new FormGroup({});
        this.radioOptions = [
                           {label: 'DAYS', value: 'DAYS'},
                           {label: 'RANGE', value: 'RANGE'},
                           {label: 'NONE', value: 'NONE'},
                         ]
    }

    ngOnInit(){
        this.radioField = new RadioField({
              fieldName: 'meetingDateRangeType',
              options: this.radioOptions
        });
    }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field, showLabel | boolean | true | no | to show or hide the label

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- fieldName | string | '' | true | to set the value of field in formGroup displayName | string | '' | false | to show label and title of the field options | Array | [] | no | options to show in radios optionClass | string | '' | no | if you want to apply class in options readOnly | boolean | false | no | to enable disable the fields

events

Events | Uses -------- | ------ blur | called on blur of field

SelectField

@html
<sm-select-box
      [formGroup]="formGroup"
      [fieldMeta]="selectField"
      [value]="selectField.value">
</sm-select-box>

@typescript
import { SelectField } from "sm-ui-library";
...
export class AppComponent implements OnInit {
    ...
    selectField: SelectField;
    formGroup:FormGroup;
    selectOptions: Array<any>;
    ...
    constructor(private changeRef: ChangeDetectorRef) {
        this.formGroup = new FormGroup({});
        this.selectOptions = [{label: 'First option', value: 'Value One'}, {label: 'Second option', value: 'Value Two'}]
    }

    ngOnInit(){
        this.selectField = new SelectField({
              fieldName: 'fromUser',
              displayName: 'Select Field',
              defaultSelectFirst: true,
              options: this.selectOptions,
              container: '.test-container'
        });
        this.selectField.value = 'Value One'
    }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field, showLabel | boolean | true | no | to show or hide the label dropdownItemTemplate | string | '' | no | template for the open dropdown selectionTemplate | string | '' | no | template for the selected values

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- fieldName | string | '' | true | to set the value of field in formGroup displayName | string | '' | false | to show label and title of the field options | Array | [] | no | options to show in radios readOnly | boolean | false | no | to enable disable the fields placeholder | string | '' | no | to show the placeholder of the dropdown isMultiple | boolean | false | no | to enable multiple selection in select box countSelectedText | string | '' | no | default count selection hasAddButton | boolean | false | no | to show add button in select box addButtonTitle | string | 'Add New' | no | button title for add button addButtonHtml | string | <div class="btn">${this.addButtonTitle}</div> | no | html for add button onAddNew | function | _.noop | no | defined function when add button get clicked

events

Events | Uses -------- | ------ blur | called on blur of field

SwitchField

@html
<sm-switch [formGroup]="formGroup"
           [fieldMeta]="switchField">
</sm-switch>

@typescript
import { SwitchField } from "sm-ui-library";
...
export class AppComponent implements OnInit {
    ...
    switchField: SwitchField;
    formGroup:FormGroup;
    ...
    constructor(private changeRef: ChangeDetectorRef) {
        this.formGroup = new FormGroup({});
    }

    ngOnInit(){
        this.switchField = new SwitchField({
              fieldName: 'switch',
              displayName: 'Switch field'
        });
    }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field, showLabel | boolean | true | no | to show or hide the label

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- class | string | '' | false | class to be applied on field options | Array | [] | no | options to show in field readOnly | boolean | false | no | to enable disable the fields newLine | boolean | false | no | to show new line in switch

events

Events | Uses -------- | ------ blur | called on blur of field

TagField

@html
<sm-tag id="tagsToAdd" [formGroup]="formGroup"
          [fieldMeta]="tagsField">
</sm-tag>

@typescript
import { TagField } from "sm-ui-library";
...
export class AppComponent implements OnInit {
    ...
    tagsField: TagField;
    formGroup:FormGroup;
    ...
    constructor(private changeRef: ChangeDetectorRef) {
        this.formGroup = new FormGroup({});
    }

    ngOnInit(){
        this.tagsField = new TagField({
              fieldName: 'tagsToAdd',
        });
    }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field,

events

Events | Uses -------- | ------ blur | called on blur of field tagClicked | called when tag is clicked

DateTimePicker

@html
<sm-datetime-picker [formGroup]="formGroup"
                    [fieldMeta]="dateTimeField"
                    [cssClass]="'m-b-none'"
                    [showLabel]="true">
</sm-datetime-picker>

@typescript
import { DateTimePickerField } from "sm-ui-library";
...
export class AppComponent implements OnInit {
    ...
    dateTimeField: DateTimePickerField;
    formGroup:FormGroup;
    ...
    constructor(private changeRef: ChangeDetectorRef) {
        this.formGroup = new FormGroup({});
    }

    ngOnInit(){
        this.dateTimeField = new DateTimePickerField({
              dateFormat: 'DD-MM-YYYY',
              fieldName: 'startDate',
              displayName: 'Date time field',
              sideBySide: false
        });
    }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field value | string | '' | no | default value for text field, showLabel | boolean | true | no | to show or hide the label

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- class | string | '' | false | class to be applied on field readOnly | boolean | false | no | to enable disable the fields dateFormat | string | 'DD-MM-YYYY hh:mm:ss' | no | default date format toolbarPlacement | string | 'top' | no | position of the toolbar minDate | string | '' | no | minimum date for field maxDate | string | '' | no | maximum date for field inline | boolean | false | no | this shows the datetime picker inline (not as popup)

events

Events | Uses -------- | ------ blur | called on blur of field

functions available in DateTimePickerField

Function | Description -----------| ---------- DateTimePickerField.isIsoDate(dateString:any) | It returns whether the date is in ISO format or not

ButtonField

@html
<sm-button
    [fieldMeta]="buttonField"
    (btnClicked)="buttonClicked($event)">
</sm-button>

@typescript
import { ButtonField } from "sm-ui-library";
...
export class AppComponent implements OnInit {
    ...
    buttonField: ButtonField;
    formGroup:FormGroup;
    ...
    constructor(private changeRef: ChangeDetectorRef) {
        this.formGroup = new FormGroup({});
    }

    ngOnInit(){
        this.buttonField = new ButtonField({
              fieldName: 'buttonField',
              btnText: 'Button',
              class: 'btn btn-primary pull-left m-l-sm',
              type: 'Button',
              disable: false
        });
    }
}

html attributes

Attributes | Data-Type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- formGroup | FormGroup | '' | yes | reference to existing formGroup fieldMeta | TextField | - | yes | Metadata of text field

fieldMeta attributes

Attributes | Data-type | Defaults | Required | Uses ------------- | ------------- | ------------- | ------------- | ------------- btnText | string | '' | no | text of the button fieldName | string | '' | yes | it used as a key in formGroup disable | boolean | false | no | this allows to enable disable the button class | string | 'btn-default' | no | to apply class on the button iconCssClass | string | '' | no | to apply class on icon of button showCompleted | boolean | false | no | this shows complete tick mark on button showLoading | boolean | false | no | this shows loading mask on button

events

Events | Uses -------- | ------ btnClicked | called on blur of field

Some general function can be used in all the components

Function | Description -----------| ---------- this.setValidation(validations: any) | This applies various validations on field. Validations can be like this ({required:{message:"your message"}, pattern:{value:"your regex",message:""},maxlength:{value:"your length",message:""},minlength:{value:"your length",message:""},min:{value:"your length",message:""},max:{value:"your length",message:""},number:{message:""},integer:{message:""},email:{message:""},minTags:{value:"",message:""},maxTags:{value:"",message:""}}) this.clearValidation() | clears the validation of field this.setPlaceholder(placeholder:string) | sets the place holder for field

Some formElementService function can be used in general

Function | Description -----------| ---------- this.formElementService.showCompletedMark(event:any, changeRef?: any) | it shows completed mark on button this.formElementService.showLoading(event:any, changeRef?: any) | it shows loader on button this.formElementService.stopLoading(event:any, changeRef?: any) | it stops loader on button this.formElementService.isFormValid(formGroup:any, elementRef?:any, changeRef?:any) | it validates the form and return true/false with respect to valid/invalid this.formElementService.getSuggestionsDropdownTemplate(name:any, email:any, image?:any, searchText?:any, icon?:any) | This returns dropdown selections template based on given params this.formElementService.getDropdownTemplate(name:any, iconClass?:any, searchText?:any) | This returns dropdown template based on given params