sm-ui-library
v0.0.9
Published
This documentation allows to easily install and use **sm-ui-library** components.
Downloads
9
Readme
SM-UI-LIBRARY
This documentation allows to easily install and use sm-ui-library components.
Installing
npm install sm-ui-library
To use all the library components
import {SmUiLibraryModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmUiLibraryModule
...
]
})
export class AppModule {
}
To use single component at a time import them separately
Autocomplete
import {SmAutocompleteModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmAutocompleteModule
...
]
})
Button
import {SmButtonModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmButtonModule
...
]
});
<sm-button
[fieldMeta]="buttonField">
</sm-button>
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
Checkboxes
import {SmCheckboxModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmCheckboxModule
...
]
});
<sm-checkbox
[formGroup]="formGroup"
[fieldMeta]="checkboxField">
</sm-checkbox>
this.checkboxField = new CheckboxField({
fieldName: 'email_isTracking',
displayName: 'Checkboxes',
options: [{label: 'one', value: 'one'}, {label: 'two', value: 'two'}]
});
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
Date range Picker
import {SmDaterangePickerModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmDaterangePickerModule
...
]
})
<sm-daterange-picker
[formGroup]="formGroup"
[fieldMeta]="dateRangePickerField">
</sm-daterange-picker>
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')]
}
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
});
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')
Date time Picker
import {SmDatetimePickerModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmDatetimePickerModule
...
]
});
<sm-datetime-picker [formGroup]="formGroup"
[fieldMeta]="dateTimeField">
</sm-datetime-picker>
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
Duration
import {SmDurationModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmDurationModule
...
]
})
Input Field
import {SmInputTxtModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmInputTxtModule
...
]
});
<sm-input-txt
[formGroup]="formGroup"
[fieldMeta]="textField">
</sm-input-txt>
this.textField = new TextField({
fieldName: 'textField',
displayName: 'Input box'
});
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
Radio Field
import {SmRadioModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmRadioModule
...
]
});
<sm-radio
[fieldMeta]="radioField"
[formGroup]="formGroup">
</sm-radio>
this.radioField = new RadioField({
fieldName: 'radio',
options: [
{label: 'DAYS', value: 'DAYS'},
{label: 'RANGE', value: 'RANGE'},
{label: 'NONE', value: 'NONE'}
]
});
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
Select Box
import {SmSelectBoxModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmSelectBoxModule
...
]
});
<sm-select-box
[formGroup]="formGroup"
[fieldMeta]="selectField">
</sm-select-box>
this.selectField = new SelectField({
fieldName: 'fromUser',
displayName: 'Select Field',
defaultSelectFirst: true,
options: this.selectOptions,
container: '.test-container'
});
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
Switch Field
import {SmSwitchModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmSwitchModule
...
]
});
<sm-switch [formGroup]="formGroup"
[fieldMeta]="switchField">
</sm-switch>
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
Textarea Field
import {SmTextareaModule} from "sm-ui-library";
@NgModule({
...
imports: [
...
SmTextareaModule
...
]
});
<sm-textarea-txt
[formGroup]="formGroup"
[fieldMeta]="textAreaField">
</sm-textarea-txt>
this.textAreaField = new TextareaField({
fieldName: 'reason',
displayName: 'Text Area'
});
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