INPUT TEXT

EXEMPLO

value: {{retornoInputText}}

<sbm-input-text [(ngModel)]='retornoInputText'></sbm-input-text>
Titulo Tipo Exemplo
securityid string 'test1'
css string ''
require boolean true, false
minlength number 10
maxlength number 12
pattern string '[A-Za-z]{{'{'}}3{{'}'}}'
columns number
label string
digittext string 'M', 'm', 'Mm'
Titulo Tipo Retorno
onblur object
onkeyup object

$(id).setLabel(string)

$(id).setMinLength(string)

$(id).setMaxLength(string)

$(id).setsecurityid(string)

$(id).setVisible(boolean)

$(id).setCss(string)

$(id).setPattern(string)

$(id).setRequire(boolean)

$(id).setValue(string)

$(id).getValue(): String

INPUT MASK

EXEMPLO
<sbm-input-mask [(ngModel)]='retornoInputMask' mask='00.000-000'></sbm-input-mask>
Titulo Tipo Exemplo
securityid string ''
ngModel any any
placeholder string Informe um valor
css string ''
mask padrão com zeros e letras LLL-0000
columns number 6
require boolean true, false
label string ''
Titulo Tipo Retorno
onblur object
onkeyup object
Para Configurar a mascara com letras e números basta definir com (L) as letras e (0) para números

$(id).setLabel(string)

$(id).setsecurityid(string)

$(id).setVisible(boolean)

$(id).setCss(string)

$(id).setRequire(boolean)

$(id).setValue(string)

$(id).getValue(): String

INPUT PASSWORD

EXEMPLO
<sbm-input-password [(ngModel)]='retornoInputPassword'></sbm-input-password>
Titulo Tipo Exemplo
securityid string ''
ngModel any any
placeholder string Informe um valor
css string ''
require boolean true, false
minLength number 10
maxLength number 12
columns number 6
label string ''
Titulo Tipo Retorno
onblur object
onkeyup object

$(id).setLabel(string)

$(id).setMinLength(string)

$(id).setMaxLength(string)

$(id).setsecurityid(string)

$(id).setVisible(boolean)

$(id).setCss(string)

$(id).setRequire(boolean)

$(id).setValue(string)

$(id).getValue(): String

INPUT E-MAIL

EXEMPLO
<sbm-input-email [(ngModel)]='retornoInputEmail'></sbm-input-email>
Titulo Tipo Exemplo
securityid string ''
ngModel any any
placeholder string Informe um valor
css string ''
require boolean true, false
columns number 6
label string ''
Titulo Tipo Retorno
onblur object
onkeyup object

$(id).setLabel(string)

$(id).setsecurityid(string)

$(id).setVisible(boolean)

$(id).setCss(string)

$(id).setRequire(boolean)

$(id).setValue(string)

$(id).getValue(): String

INPUT TELEFONE

EXEMPLO
{{retornoTelefone}}
<sbm-input-telefone [(ngModel)]='retornoTelefone'></sbm-input-telefone>
Titulo Tipo Exemplo
securityid string ''
ngModel any any
placeholder string Informe um valor
css string ''
require boolean true, false
columns number 6
label string ''
Titulo Tipo Retorno
onblur object
onkeyup object

$(id).setLabel(string)

$(id).setsecurityid(string)

$(id).setVisible(boolean)

$(id).setCss(string)

$(id).setRequire(boolean)

$(id).setValue(string)

$(id).getValue(): String

INPUT CEP

EXEMPLO
<sbm-input-cep [(ngModel)]='retornoInputCep' (_onclick)='cliqueCEP($event)'></sbm-input-cep>
Titulo Tipo Exemplo
securityid string ''
ngModel any any
placeholder string Informe um valor
css string ''
columns number 6
require boolean true, false
label string ''
Titulo Tipo Retorno
onclick object resultado, resultado_txt, uf, cidade, bairro, tipo_logradouro, logradouro
onblur object
onkeyup object

$(id).setLabel(string)

$(id).setsecurityid(string)

$(id).setVisible(boolean)

$(id).setCss(string)

$(id).setRequire(boolean)

$(id).setValue(string)

$(id).getValue(): String

INPUT CPF

EXEMPLO
{{retornoInputCPF}}
<sbm-input-cpf [(ngModel)]='retornoInputCPF'></sbm-input-cpf>
Titulo Tipo Exemplo
securityid string ''
ngModel any any
placeholder string Informe um valor
css string ''
columns number 6
require boolean true, false
label string ''
Titulo Tipo Retorno
onblur object
onkeyup object

INPUT CNPJ

EXEMPLO
{{retornoInputCNPJ}}
<sbm-input-cnpj [(ngModel)]='retornoInputCNPJ'></sbm-input-cnpj>
Titulo Tipo Exemplo
securityid string ''
ngModel any any
placeholder string Informe um valor
css string ''
columns number 6
require boolean true, false
label string ''
Titulo Tipo Retorno
onblur object
onkeyup object

DATE BOX

EXEMPLO
{{retornoInputDatebox}}
{{retornoDatebox}}
{{retornoInputTimebox}}
<sbm-datebox [type]="dbEnumType" min="2/1/2016" max="31/12/2016" [value]="retornoInputDatebox" (_onclick)='cliqueDateBox($event)'> </sbm-datebox>
Titulo Tipo Exemplo
securityid string ''
min date 2016-10-15
max date 2016-12-31
type DateboxEnumType date, time, datetime
columns number 6
selectionmode modeEnum 'single'|'range'|'multiple'
require boolean true, false
label string ''
Titulo Tipo Retorno
onclick object 2016/11/17 22:00:00

INPUT NUMBER

EXEMPLO
{{retornoInputNumber}}
<sbm-input-number (onblur)='blur($event)' [(ngModel)]='retornoInputNumber' css='sbm-input-default' min='5' max='10' [spinButtons]='true'></sbm-input-number>
Titulo Tipo Exemplo
securityid string ''
ngModel any any
placeholder string Informe um valor
css string ''
columns number 6
require boolean true, false
label string ''
Titulo Tipo Retorno
onblur object
onkeyup object

AUTO COMPLETE

EXEMPLO
<sbm-autocomplete placeholder="Digite aqui" [datasource]='dataAutocomplete' text='titulo' (_onclick)='itemClicado($event)'></sbm-autocomplete>
Titulo Tipo Exemplo
securityid string ''
datasource any[] any[]
placeholder string Digite aqui
text string[] []
columns number 6
label string ''
Titulo Tipo Retorno
onclick object object

MULTI-SELECT

EXEMPLO
{{multiselectvalue | json}}
<sbm-multiselect [(ngModel)]='multiselectvalue' placeholder='Informe os valores'></sbm-multiselect>
Titulo Tipo Exemplo
securityid string ''
placeholder string ''
ngModel any ''
columns number 6
require boolean true, false
label string ''

TEXTAREA

EXEMPLO
<sbm-textarea placeholder='Digite algum valor' [(ngModel)]='textareavalue'></sbm-textarea>
Titulo Tipo Exemplo
securityid string ''
placeholder string '- Selecione -'
ngModel any any
id string ''
maxLength number ''
require boolean true, false
label string ''
Titulo Tipo Retorno
onblur element document
onkeyup element document

RADIO

EXEMPLO
São Paulo Paraná {{radiogroupvalue | json}}
<sbm-radio text='titulo' (_onclick)='cliqueRadio($event)'>
<sbm-radio-option value="São Paulo">São Paulo</sbm-radio-option> </sbm-radio>
Titulo Tipo Exemplo
securityid string ''
value any any
Titulo Tipo Exemplo
securityid string ''
layout RadioEnumOrientation vertical, horizontal
require boolean true, false
columns number 12
label string ''
Titulo Tipo Retorno
onclick object []

CHECKBOX

EXEMPLO
{{retornoCheckbox}}
<sbm-checkbox label='Aceita os termos citados ?' (_onclick)='cliqueCheckbox($event)'></sbm-checkbox>
Titulo Tipo Exemplo
label string ''
checked boolean true, false
ngModel boolean true, false
require boolean true, false
Titulo Tipo Retorno
onclick boolean true, false

SELECT

EXEMPLO

Select passando objeto

{{selectvalue | json}}
<sbm-select placeholder='- Selecione -' [datasource]='colEstados' text='titulo' (_onclick)='cliqueUF($event)'></sbm-select>
Titulo Tipo Exemplo
securityid string ''
placeholder string '- Selecione -'
datasource any[] any[]
require boolean true, false
text string[] []
label string ''
text string ''
textseparator string ' - '
actionbutton string ''
urlbutton string ''
valuefield string ''
Titulo Tipo Retorno
onclick object []

LIST VIEW

EXEMPLO
{{item.Nome}}
{{item.Nome}}

{{listviewvalue | json}}

<sbm-list-view selectionMultiple='true' [datasource]='colEstados' text='sigla' (_onclick)='cliqueListView($event)'>
<sbm-list-option value='São Paulo'>'</sbm-list-option> </sbm-list-view>
Titulo Tipo Exemplo
value any any
Titulo Tipo Exemplo
securityid string ''
selectionmultiple boolean true/false
Titulo Tipo Retorno
onclick object[] []

MOEDA

EXEMPLO
Conteudo dinamico {{moneyvalue}}
<sbm-money prefix="{{ 'i18n.sabium-framework.money.prefix' | translate }}" decimal="," thousands="." [(ngModel)]='moneyvalue'>
    Conteudo dinamico
</sbm-money>
Titulo Tipo Exemplo
prefix string 'R$'
decimal string ','
thousands string '.'
decimaldigits number 3
ngModel any ''
require boolean true, false
placeholder string ''
label string ''
Titulo Tipo Retorno
onblur object []
onkeyup object []

BARRA DE PROGRESSO

EXEMPLO
<sbm-progressbar [(ngModel)]='37' [min]='0' [valueMax]='100'></sbm-progressbar>
Titulo Tipo Exemplo
ngModel number 0
min number 0
max number 0

MODAL

EXEMPLO
Conteudo dinamico
<sbm-modal showTitle=true textButton="Clique aqui" title='Teste' [(visible)]='popupVisible'>
    Conteudo dinamico
</sbm-modal>
Titulo Tipo Exemplo
securityid string ''
title string ''
width string '60%'
height string '250px'

BUTTON

EXEMPLO
<sbm-button label='Clique aqui' (_onclick)='cliqueButton("botao")'></sbm-button>
Titulo Tipo Exemplo
securityid string ''
label string Clique aqui
class string ''
type ButtonComponentEnum default, normal, success, danger, back
Titulo Tipo Retorno
onclick event

BUTTON SUBMIT

EXEMPLO
<sbm-button-submit value='Aceitar' class='sbm-btn-info'></sbm-button-submit>
Titulo Tipo Exemplo
label string ''
css string ''

MENU

EXEMPLO
<sbm-menu [datasource]='colMenu' orientation='vertical' (_onclick)='cliqueMenu($event)'>
<sbm-item-menu value="Monitores"></sbm-item-menu> </sbm-menu>
Titulo Tipo Exemplo
securityid string ''
value string ''
icon string ''
Titulo Tipo Exemplo
securityid string ''
datasource ItemMenu[] id, title, name?, items?, iconSrc?
orientation MenuComponentEnum vertical, horizontal
Titulo Tipo Retorno
onclick ItemMenu id, title, name?, items?, iconSrc?

TREE VIEW

EXEMPLO
<sbm-treeview [datasource]='dataTreeview' (_onclick)='treeView($event)'></sbm-treeview>
Titulo Tipo Exemplo
securityid string ''
datasource any[] any[]
Titulo Tipo Retorno
onclick object[] []

TAB

EXEMPLO
Tab 1 Tab 2 Tab 3 Tab 4 idsgfdsgfd
<sbm-tabs>
<sbm-tab label='Tab 1'>
Tab 1
</sbm-tab>
</sbm-tabs>
Titulo Tipo Exemplo
label string ''
padding string '5px'
type string 'line'|'window'

ACCORDION

EXEMPLO
Tab 1 Tab 2 Tab 3 This is the expansion 1 title This the expansion 1 content This is the expansion 2 title This the expansion 2 content
<sbm-accordion>
<sbm-accordion-group label='Colapse 1'>
Tab 1
</sbm-accordion-group>
</sbm-accordion>
Titulo Tipo Exemplo
label string ''
type AccordionEnum primary, warning, info, success, default

GRID

EXEMPLO
<sbm-grid #report datasource='/sabium/api/servidor/arquivo' pagination='2' [grouping]='true'>
<sbm-column dataField="codigo" width="150" caption="Código"> </sbm-column> </sbm-grid>
Titulo Tipo Exemplo
dataField string ''
caption string ''
format string ''
dateType string ''
width number 200
Titulo Tipo Exemplo
columns object []
datasource string 'https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems'
pagination number 0
gruping boolean true, false
Por padrão o componente grid faz requisiçoes passando parametros "p=1" pagina, "l=10" numero de registros a serem retornados e "sort=id" ordenação de registros

Atualizar Grid

@ViewChild('report') report;
this.report.dataGrid.instance.refresh();

Colunas da Grid

{{exampleColunas | json}}
dataField: campo a ser buscado do retorno da requisição
caption: label da coluna
dataType: tipo de retorno do valor da coluna
format: formato do valor da coluna

NOTIFICAÇÃO

EXEMPLO
let notification = new NotificationComponent();
notification.alert('success', 'Teste da notificação', null, 600);
Titulo Tipo Exemplo
tipo string ''
mensagem string ''
width number 600

ROTATOR

EXEMPLO
<sbm-rotator [datasource]='rotatorData' [loop]='true' [showButtons]='false' [showIndicator]='false' time='4000' height='500'></sbm-rotator>
Titulo Tipo Exemplo
datasource object []
loop boolean true, false
showbuttons boolean true, false
showindicator boolean true, false
time number 2000
height number 300

FILE UPLOAD

EXEMPLO
{{upload}}
<sbm-upload [(ngModel)]='upload' multiple='true' (onUpload)='uploadFile($event)' label='Selecione um arquivo'></sbm-upload>
Titulo Tipo Exemplo
multiple boolean TRUE, FALSE
label string ''
Titulo Tipo Retorno
onUpload object []

FIELDSET

EXEMPLO
<sbm-fieldset label="Titulo do componente">
    Conteudo dinamico
</sbm-fieldset>
Titulo Tipo Exemplo
label string ''

INTERNACIONALIZAÇÃO

EXEMPLO
 
<p label='i18n.PRINCIPAL.titulo | translatePipe'></p> 
                                Incluir no "app.module", no bloco de "providers" o serviço "TranslateService"

                                No controller na aplicação:

                                this.traducao = new i18n(_translateService, _sharedService);
                                this.traducao.projectName = _projectName;

                                this.getJSONen().subscribe(retTraducao => {{'{'}}
                                  this.traducao.iniciarIdioma();
                                {{'}'}});

                                this.getJSONpt().subscribe(retTraducao => {{'{'}}
                                  this.traducao.iniciarIdioma();
                                {{'}'}});

                                public getJSONen(): Observable<> {{'{'}}
                                    return this._http.get("assets/i18n/en.json").map((res: any) => res.json());
                                {{'}'}}

                                public getJSONpt(): Observable<> {{'{'}}
                                    return this._http.get("assets/i18n/pt.json").map((res: any) => res.json());
                                {{'}'}}
/assets/i18n/en.json 
                                    [{{'{'}}
                                          "menu.home": "Inicio",
                                          "menu.principal": "Principal",
                                          "erro.titulo": "Detalhamento do Erro"
                                    {{'}'}}]

SHARED SERVICE

Dentro do arquivo SharedService, crie seu método GET e SET.

                        setIdioma(idioma: any) {{'{'}}
                            this.setLocalStorageShared('idioma', idioma);
                        {{'}'}}

                        getIdioma() {{'{'}}
                            return this.getLocalStorageShared('idioma');
                        {{'}'}}
No lançador (por exemplo) você poderá definir um valor através do SET.

this._sharedService.setIdioma(idiomaPadrao);
Dentro da APP (por exemplo) você poderá escutar essa alteração através do GET.

this._sharedService.getIdioma();
Configuração para compartilhamento de informações entre Apps.

@NgModule({{'{'}}
...
Ng2Webstorage.forRoot({{'{'}}prefix: '__SBM-SHARED__', separator: '/'{{'}'}})
...

FORMULÁRIO

EXEMPLO
<sbm-form [formGroup]='form' (onSubmit)='executeForm($event)'></sbm-form>
Titulo Tipo Exemplo
Titulo Tipo Exemplo
(onsubmit) object []

BREADCRUMB

EXEMPLO
<sbm-breadcrumb></sbm-breadcrumb>
<sbm-breadcrumb-crud></sbm-breadcrumb-crud>

IMAGEM

EXEMPLO
<sbm-img src='https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' width='100%' height='auto'></sbm-img>
Titulo Tipo Exemplo
src string ''
width string ''
height string ''

Label

EXEMPLO
#Principal.titulo
<sbm-img src='https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' width='100%' height='auto'></sbm-img>
Titulo Tipo Exemplo
type string 'p', 'h1'
css string ''
stylecss string ''

ALERTA

EXEMPLO
let alert = new AlertComponent();
alert.show('Título', 'Ok', 'mensagem do alerta lorem ipson etc...', 'warning');
Titulo Tipo Exemplo
titulo string ''
mensagem string ''
tipo do alerta string success, error, warning, info
botão cancelar boolean true, false
texto botão sucesso string ''
texto botão cancelar string ''
Titulo Tipo Retorno
boolean true, false

CALCULADORA

EXEMPLO
<sbm-calc-button></sbm-calc-button>
Titulo Tipo Exemplo
Titulo Tipo Retorno

Multiselect Dropdown

EXEMPLO
<sbm-multiselect-dropdown ></sbm-multiselect-dropdown >
Titulo Tipo Retorno
datasource array[] []
textfield string ''
valuefield string ''

Monitoramento

EXEMPLO
Titulo Tipo Exemplo
monitorUrl string ''
columns object []
Titulo Tipo Retorno
boolean true, false

Parameter

EXEMPLO

Color Picker

EXEMPLO
{{corSelecionada}}
<sbm-color-picker label="Color Picker" columns="12"></sbm-color-picker>
Titulo Tipo Exemplo
label string ''
columns number 12
ngModel any #fff

Editor

EXEMPLO
{{editorValue | json}}
<sbm-editor html="html"></sbm-editor>
Titulo Tipo Exemplo
html string ' <p>test</p>'

Upload Imagem

EXEMPLO
<sbm-upload-image ></sbm-upload-image>
Titulo Tipo Exemplo
columns number 12
ngModel any #fff

Agendamento de processos

EXEMPLO

DATETIME

EXEMPLO
{{testedatetime2}}

NavBar

EXEMPLO
teste