sm-ui-library v0.0.9

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

fieldMeta attributes

events

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

fieldMeta attributes

events

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

fieldMeta attributes

events

functions available in DateRangePickerField

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

fieldMeta attributes

events

functions available in DateTimePickerField

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

fieldMeta attributes

events

functions available in TextField

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

fieldMeta attributes

events

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

fieldMeta attributes

events

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

fieldMeta attributes

events

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

fieldMeta attributes

events