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')

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

sm-ui-kit

SM-UI-LIBRARY

Installing

Developing Locally

Put below scripts in angular.json

Update app.module.ts file

Restrict strictInitialization in tsconfig.app.json

Adding various components

Textfield

html attributes

fieldMeta attributes

events

functions available in TextField

DateRangePickerField

html attributes

fieldMeta attributes

events

functions available in DateRangePickerField

CheckboxField

html attributes

fieldMeta attributes

events

TextareaField

html attributes

fieldMeta attributes

events

RadioField

html attributes

fieldMeta attributes

events

SelectField

html attributes

fieldMeta attributes

events

SwitchField

html attributes

fieldMeta attributes

events

TagField

html attributes

events

DateTimePicker

html attributes

fieldMeta attributes

events

functions available in DateTimePickerField

ButtonField

html attributes

fieldMeta attributes

events

Some general function can be used in all the components

Some formElementService function can be used in general

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads