open-index/open-npm huggingface dataset:
npm package: @mamba/appbar
Description: O módulo `AppBar` é composto por dois componentes: `AppBar` e `AppBarModifier`. O `AppBar` é a barra que fica localizada no canto superior da aplicação, ela pode ser estilizada utilizando seus `props`. Caso queira alterar qualquer um desses props em outra
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# AppBar

O módulo `AppBar` é composto por dois componentes: `AppBar` e `AppBarModifier`. O `AppBar` é a barra que fica localizada no canto superior da aplicação, ela pode ser estilizada utilizando seus `props`. Caso queira alterar qualquer um desses props em outra página, isso pode ser feito através do `AppBarModifier`, sem a necessidade de criar outra `AppBar`.

`<AppBar ...props/>`

| Propriedades | Descrição                         | Tipo           | Padrão      |
| ------------ | --------------------------------- | -------------- | ----------- |
| title        | Título da AppBar                  | `string`       | `''`        |
| textColor    | Cor do Título                     | `string` (hex) | `'#fff'`    |
| iconColor    | Cor dos ícones                    | `string` (hex) | `'#fff'`    |
| bgColor      | Cor de Fundo da AppbBar           | `string` (hex) | `'#00A868'` |
| border       | Mostra a borda abaixo da `AppBar` | `boolean`      | `true`      |
| borderColor  | Mostra a borda abaixo da `AppBar` | `string`       | `#D5DEE8`   |

`<AppBarModifier ...props/>`

| Propriedades | Descrição                         | Tipo           | Padrão      |
| ------------ | --------------------------------- | -------------- | ----------- |
| title        | Título da AppBar                  | `string`       | `''`        |
| textColor    | Cor do Título                     | `string` (hex) | `'#fff'`    |
| bgColor      | Cor de Fundo da AppbBar           | `string` (hex) | `'#00A868'` |
| border       | Mostra a borda abaixo da `AppBar` | `boolean`      | `true`      |
| borderColor  | Mostra a borda abaixo da `AppBar` | `string`       | `#D5DEE8`   |
npm package: @mamba/barcode
Description: O Componente `Barcode` permite de modo fácil criar códigos de barras, além de permitir estilizá-los.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Barcode

O Componente `Barcode` permite de modo fácil criar códigos de barras, além de permitir estilizá-los.

| Propriedades | Descrição                                   | Tipo      | Padrão       |
| :----------- | :------------------------------------------ | :-------- | :----------- |
| barWidth     | Largura de uma barra no código              | `float`   | `1.5`        |
| data         | Dado codificado                             | `string`  | `[NO-VALUE]` |
| displayValue | Habilita exibir o valor do código de barras | `boolean` | `true`       |
| fontSize     | Tamanho da fonte de exibição                | `int`     | `16`         |
| height       | Altura do código de barras                  | `int`     | `100`        |
npm package: @mamba/brands
Description: O componente `Brands` permite de modo fácil exibir o ícone das principais bandeiras disponíveis através da POS Stone. Ideal para quem mexe diretamente com requisicões de transação.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Brands

O componente `Brands` permite de modo fácil exibir o ícone das principais bandeiras disponíveis através da POS Stone. Ideal para quem mexe diretamente com requisicões de transação.

Caso não haja a bandeira especificada, ele exibe a bandeira padrão `blank`.

| Propriedades | Descrição                      | Tipo     | Padrão  |
| :----------- | :----------------------------- | :------- | :------ |
| icon         | Nome (caixa baixa) da bandeira | `string` | `blank` |
| width        | Largura da imagem              | `string` | `30`    |

<br />

As bandeiras compatíveis com o POS podem ser:

`alelo`, `amex`, `cabal`, `diners`, `elo`, `hipercard`, `mastercard`, `senff`, `sodexo`, `ticket`, `verdecard`, `visa`, `vr`, `hiper`, `greencard`, `cooper`, `valecard`, `verocard`, `up brasil`, `ben visa vale`, `redecompras`, `unionpay`, `banescard`, `banricompras` e `blank`

<br />

---

## Utilidades

### getBrand(name)

<br />

Método auxiliar que retorna a imagem da bandeira. Pode ser útil para usar com `background-image` por exemplo. <br />
Caso use tag `img`, utilize o componenent `@mamba/brands/Brands.html`.

<br />

```html
<img src="{getBrand('visa')}" />

<script>
  import getBrand from '@mamba/brands/getBrand.js';

  export default {
    helpers: { getBrand },
  };
</script>
```
npm package: @mamba/button
Description: O Componente `Button` permite de modo fácil criar botões seguindo um estilo padrão com diversas opções de customização, podendo até mesmo englobar um outro componente, como pode ser visto nos exemplos abaixo. Além disso, os botões também podem ser acionad
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Button

O Componente `Button` permite de modo fácil criar botões seguindo um estilo padrão com diversas opções
de customização, podendo até mesmo englobar um outro componente, como pode ser visto nos exemplos abaixo.
Além disso, os botões também podem ser acionados por um shortcut e executar métodos por este atalho ou quando clicados.

| Propriedades | Descrição                                                                  | Tipo           | Padrão   |
| :----------- | :------------------------------------------------------------------------- | :------------- | :------- |
| label        | Texto do botão caso não tenha filho. Útil para criar o botão dinamicamente | `string`       | `''`     |
| bottom       | Fixa o botão na parte inferior da tela                                     | `boolean`      | `false`  |
| disabled     | Desabilita o botão                                                         | `boolean`      | `false`  |
| secondary    | Habilita o estilo de botão secundário                                      | `boolean`      | `false`  |
| size         | Tamanho do botão (opções: `small`, `normal`, `fill`, `full`)               | `string`       | `normal` |
| bgColor      | Cor primária do botão                                                      | `string` (hex) | `''`     |
| textColor    | Cor do texto no botão                                                      | `string` (hex) | `''`     |
| className    | Classe a ser adicionado ao elemento pai do componente                      | `string`       | ``       |

## Métodos

### click()

Aciona o evento de clique do botão.

### focus()

Coloca o foco no botão.
npm package: @mamba/carousel
Description: O módulo `Carousel` recebe um array de imagens e cria um carrossel para a exibição delas.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Carousel

O módulo `Carousel` recebe um array de imagens e cria um carrossel para a exibição delas.

`<Carousel ...props/>`

| Propriedades | Descrição                            | Tipo           | Padrão      |
| :----------- | :----------------------------------- | :------------- | :---------- |
| slides       | array com as imagens exibidas        | `array`        | `undefined` |
| navBg        | Cor de fundo dos botões de navegação | `string` (hex) | `#425963`   |
| navColor     | Cor do ícone dos botões de nav       | `string` (hex) | `#ffffff`   |
npm package: @mamba/checkbox
Description: O componente `Checkbox` é usado para selecionar uma opção dentre as alternadas.
Author: Stone Payments - Mamba Team
Latest version: 2.33.0

# Checkbox

O componente `Checkbox` é usado para selecionar uma opção dentre as alternadas.

<div class="iframe-wrapper">
  <iframe src="https://bundlebrowser.mambaweb.now.sh/#!/checkbox"></iframe>
</div>

## Parâmetros

| Parâmetro | Descrição                | Tipo        | Padrão |
| :-------- | :----------------------- | :---------- | :----- |
| checked   | Deixa o checkbox ativado | `undefined` | `true` |

## Métodos

### Checkbox.toggle(value)

Booleano. Alterna o valor de `checked` do radio, para o valor passado através de `value`.
npm package: @mamba/cli
Description: Mamba CLI
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# @mamba/cli

> A CLI to help developing Mamba Applications

## Requirements

* [Node.js](http://nodejs.org/) >= 8.11.3
* POSTools

  > You must have the `.postools` installed and in your shell's `$PATH`

## Recommended

* ssh `config` (`$HOME/.ssh/config`) file with a `POS` host

  ```text
    Host POS
      HostName 127.0.0.1
      Port 51000
      User MAINAPP
      IdentityFile ~/.ssh/id_rsa_pax
  ```

## Commands

* `mamba app <command>`
  * `mamba app start`
    Starts the development server at `localhost:8080`.

  * `mamba app build`
    Builds the app for the POS.

* `mamba pos <command>`
  * `mamba pos ssh-init [--tty Pos0]` - Initializes the POS SSH server
  * `mamba pos start` - Starts the Mamba System
  * `mamba pos stop` - Kills the Mamba System
  * `mamba pos restart` - Restarts the Mamba System
npm package: @mamba/commitlint-config-standard
Description: Mamba standard conventional commits for git-cz and commitlint
Latest version: 0.0.10

# @mamba/commitlint-config-standard

[Commitlint](https://commitlint.js.org) and [Commitizen git-cz](https://github.com/streamich/git-cz)
command line configurations of [Stone Payments - Mamba SDK](https://mambasdk-docs.stone.com.br).

Minimal questions config:

```bash
type(scope): subject # scope can be overwritten to make more sense to your project, see step 4...
```

Commit types with disabled Emoji:

```js
{
  chore: {
    description: "Build process or auxiliary tool changes, that don't modify src or test files",
    value: "chore",
    title: "Chores"
  },
  ci: {
    description: "Changes to our CI configuration files",
    value: "ci",
    title: "Continuous Integrations"
  },
  docs: {
    description: "Documentation only changes",
    value: "docs",
    title: "Documentation"
  },
  feat: {
    description: "A new feature",
    value: "feat",
    title: "Features"
  },
  fix: {
    description: "A bug fix",
    value: "fix",
    title: "Bug Fixes"
  },
  perf: {
    description: "A code change that improves performance",
    value: "perf",
    title: "Performance Improvements"
  },
  refactor: {
    description: "A code change that neither fixes a bug or adds a feature",
    value: "refactor",
    title: "Code Refactoring"
  },
  revert: {
    description: "Reverts a previous commit",
    value: "revert",
    title: "Reverts"
  },
  release: {
    description: "Create a release commit",
    value: "release",
    title: "Style"
  },
  fire: {
    description: "Removing code or files",
    value: "fire",
    title: "Fires"
  },
  style: {
    description: "Changes that do not affect the meaning of the code (Markup, white-space, formatting, missing semi-colons...)",
    value: "style",
    title: "Style"
  },
  test: {
    description: "Adding missing tests",
    value: "test",
    title: "Tests"
  },
  shirt: {
    description: "Removing linter warnings",
    value: "shirt",
    title: "Linter fixes"
  },
}
```

## Usage

1. Install [Commitizen](https://github.com/commitizen/cz-cli) globally and
   `@mamba/commitlint-config-standard`, `git-cz` locally:

```bash
yarn global add commitizen
yarn add -D @mamba/commitlint-config-standard git-cz
```

2. Add in your `package.json` add:

```json
{
  "config": {
    "commitizen": {
      "path": "git-cz"
    }
  }
}
```

3. Add [Commitlint](https://commitlint.js.org) config file `commitlint.config.js` at your project
   root:

```js
// commitlint.config.js

module.exports = {
  extends: ['mamba'],
};
```

4. Finally add the the `changelog.config.js` at your project root, that git-cz will read:

```js
// changelog.config.js

module.exports = {
  ...require('@mamba/commitlint-config-standard/cz'),
  // scopes: [] // Overrides scopes
};
```

5. Run in your terminal:

```bash
git cz
```

## 📑 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @mamba/container
Description: O Componente `Container` é um espaçamento de respiro para a tela, facilitando leitura e montagem de componentes. Aceita qualquer valor de css como `10px 0`, `10px 20px 30px 50px` e `1em 2em`.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Container

O Componente `Container` é um espaçamento de respiro para a tela, facilitando leitura e montagem de componentes. Aceita qualquer valor de css como `10px 0`, `10px 20px 30px 50px` e `1em 2em`.

| Propriedades | Descrição                         | Tipo     | Padrão |
| :----------- | :-------------------------------- | :------- | :----- |
| padding      | Define o espaçamento do container | `string` | `10px` |
npm package: @mamba/icon
Description: O módulo Icon possui dois componentes: `Icon` e `RoundIcon`. Ambos facilitam a criação de ícones com imagens padrões já disponíveis em nossa SDK. Além das imagens, também é possível customizar o estilo do ícone e utilizar uma imagem própria.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Icon

O módulo Icon possui dois componentes: `Icon` e `RoundIcon`. Ambos facilitam a criação de ícones com
imagens padrões já disponíveis em nossa SDK. Além das imagens, também é possível customizar o estilo
do ícone e utilizar uma imagem própria.

`<Icon ...props/>`

| Propriedades | Descrição                                         | Tipo           | Padrão      |
| :----------- | :------------------------------------------------ | :------------- | :---------- |
| color        | Pinta o ícone de acordo com a cor                 | `string` (hex) | `#353E4B`   |
| size         | Tamanho do ícone (`normal`, `large`, `giant`)     | `string`       | `normal`    |
| symbol       | Nome do ícone                                     | `string`       | `6px`       |
| level        | Pinta o ícone de acordo com o level (apenas wifi) | `int` (0..3)   | `undefined` |

`<RoundIcon ...props/>`

| Propriedades | Descrição                                      | Tipo           | Padrão    |
| :----------- | :--------------------------------------------- | :------------- | :-------- |
| bgColor      | Cor de fundo do círculo                        | `string` (hex) | `#00A868` |
| borderRadius | Permite editar o `border-radius` do componente | `string` (%)   | `50%`     |
| color        | Cor do ícone                                   | `string` (hex) | `#ffffff` |
| size         | Tamanho do ícone (`normal`, `large`, `giant`)  | `string`       | `normal`  |
npm package: @mamba/image
Description: O componente `Image` permite adicionar imagens através da tag `img`, sendo possível definir a altura e largura.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Image

O componente `Image` permite adicionar imagens através da tag `img`, sendo possível definir a altura e largura.

| Propriedades | Descrição                  | Tipo       | Padrão      |
| ------------ | -------------------------- | ---------- | ----------- |
| src          | Caminho para a imagem      | `string`   | `undefined` |
| width        | Largura da imagem          | `int` (px) | `0`         |
| height       | Altura da imagem           | `int` (px) | `width`     |

## Sub componentes

### GenericLoading

`import GenericLoading from '@mamba/image/GenericLoading.html';`

O componente `GenericLoading` é um componente `Image` já configurado com uma imagem Gif da animação padrão de loading do POS.
npm package: @mamba/org
Description: Organization methods for mamba apps
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# `@mamba/org`

O pacote `@mamba/org` contém métodos que aplicam as customizações específicas para cada organização.

## Image

O componente `Image` trata as imagens específicas de cada organização através da tag `img`.

| Propriedades | Descrição                  | Tipo       | Padrão      |
| ------------ | -------------------------- | ---------- | ----------- |
| fileName     | Nome da imagem             | `string`   | `null`      |
| class        | Classe CSS                 | `string`   | ``          |

Caso ocorra um erro no carregamento da imagem (onerror) (ex: arquivo não encontrado no POS ou a execução está acontecendo no desktop), a propriedade `src` da tag `img` será redirecionada automaticamente para o caminho da imagem padrão (`/src/assets/org/{fileName}`).

## ORG

`import * as ORG from '@mamba/org/org.js';`

### `getAppOrgParams(defaultAppOrgParams: string)`

`ORG.getAppOrgParams()` faz o merge do arquivo json default do app com o arquivo fornecido pelo backend, substituindo o `value` de cada `key` se forem do mesmo tipo. Análogo ao `lodash.merge`, porém levemente diferente. Nessa implementação o merge substitui objetos do tipo Array, enquanto o lodash os mescla.

Caso o arquivo de configuração do backend não esteja acessível (arquivo não encontrado no POS ou execução no desktop), o arquivo default será usado.

```js
import { getAppOrgParams } from '@mamba/org/org.js';
import defaultAppOrgParams from './path/to/defaultAppOrgParamFile.json';

const finalAppOrgParamJsonFile = getAppOrgParams(defaultAppOrgParams);
```
npm package: @mamba/pos
Description: Mamba web environment wrapper and simulator
Author: Stone Payments - Mamba Team
Latest version: 12.2.1

# `@mamba/pos`

## Simulator

For `mamba apps` to be able to run on a common browser, you must simulate the real `POS` environment.

- Just the `import` is enough to create the simulated environment.

```js
/** Boot the Mamba simulator */
import '@mamba/pos/simulator/index.js';
```
npm package: @mamba/progress
Description: O módulo `Progress` é composto por dois componentes: `ProgressBar` e `CircularProgress`. Ambos podem ser utilizados para representar a execução de uma tarefa, que pode ter etapas definidas ou não.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Progress

O módulo `Progress` é composto por dois componentes: `ProgressBar` e `CircularProgress`. Ambos podem ser
utilizados para representar a execução de uma tarefa, que pode ter etapas definidas ou não.

`<ProgressBar ...props />`

| Propriedades | Descrição          | Tipo               | Padrão      |
| :----------- | :----------------- | :----------------- | :---------- |
| color        | Cor da barra       | `string` (hex)     | `#00A868`   |
| height       | Espessura da barra | `string` (px)      | `6px`       |
| progress     | Porcentagem atual  | `string` (0 a 100) | `undefined` |

`<CircularProgress ...props />`

| Propriedades | Descrição             | Tipo               | Padrão      |
| :----------- | :-------------------- | :----------------- | :---------- |
| color        | Cor do círculo        | `string` (hex)     | `#00A868`   |
| height       | Raio do círculo       | `string` (px)      | `25px`      |
| progress     | Porcentagem atual     | `string` (0 a 100) | `undefined` |
| speed        | Velocidade de rotação | `string` (0 a 10)  | `10`        |
npm package: @mamba/qrcode
Description: O componente `QRCode` ajuda na criação de códigos `QR` e ainda permite estiliza-los com logos, cores e tamanhos. Fora essas opções, também há como controlar o [Error Level Rate](https://blog.qrstuff.com/2011/12/14/qr-code-error-correction), que serve para
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# QRCode

O componente `QRCode` ajuda na criação de códigos `QR` e ainda permite estiliza-los com logos, cores e tamanhos. Fora essas opções, também há como controlar o [Error Level Rate](https://blog.qrstuff.com/2011/12/14/qr-code-error-correction), que serve para precaver erros caso o `QR` seja danificado.

| Propriedades | Descrição                                  | Tipo           | Padrão      |
| :----------- | :----------------------------------------- | :------------- | :---------- |
| color        | Cor do QR                                  | `string` (hex) | `black`     |
| level        | Nível de Correção de Error (`H`,`M`,`L`)   | `string`       | `M`         |
| logo         | Caminho para a imagem de logo              | `string`       | `undefined` |
| size         | Tamanho do QR (`medium`, `small`, `large`) | `string`       | `medium`    |
| value        | Valor codificado                           | `string`       | `''`        |
| bgColor      | Cor do background do QR Code               | `string`       | `'white'`   |
| bgColorAlpha | Opacidade do background do QR Code         | `float`        | `1.0`       |
npm package: @mamba/radio
Description: O componente `Radio` é usado para selecionar uma opção dentre as alternadas.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Radio

O componente `Radio` é usado para selecionar uma opção dentre as alternadas.

| Propriedades | Descrição              | Tipo        | Padrão |
| :----------- | :--------------------- | :---------- | :----- |
| checked      | deixa o switch ativado | `undefined` | `true` |

## Métodos

### Radio.toggle(value)

Booleano. Alterna o valor de `checked` do radio, para o valor passado através de `value`.
npm package: @mamba/range
Description: O módulo `Range` pode ser usado para representar um valor dentro de um intervalo, que pode ser alterado a partir dos botões nas laterais.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Range

O módulo `Range` pode ser usado para representar um valor dentro de um intervalo, que pode ser alterado a partir dos botões nas laterais.

| Propriedades | Descrição                                                          | Tipo              | Padrão      |
| :----------- | :----------------------------------------------------------------- | :---------------- | :---------- |
| value        | valor escolhido                                                    | `int`             | `50`        |
| step         | intervalo entre valores                                            | `int`             | `10`        |
| max          | valor máximo                                                       | `int`             | `100`       |
| min          | valor mínimo                                                       | `int`             | `0`         |
| mainColor    | cor do progresso e botões                                          | `string` (hex)    | `#3da10f`   |
| barColor     | cor de fundo                                                       | `string` (hex)    | `#000`      |
| textColor    | cor do texto                                                       | `string` (hex)    | `#404040`   |
| icon         | ícone que será apresentado ao lado do texto                        | `string`          | `undefined` |
| unit         | unidade de valor                                                   | `string` (%,x...) | `undefined` |
| validation   | função de validação que impede mudança de valor caso retorne falso | `function`        | `undefined` |

## Eventos

`<Range ... on:event="..."/>`

| Eventos   | Disparado quando ... | Tipo            |
| --------- | -------------------- | --------------- |
| decrement | O valor é decrescido | `function(int)` |
| increment | O valor é aumentado  | `function(int)` |

## Métodos

### increment()

Aumenta em uma unidade do `Step` o valor atual do `Range`.

### decrement()

Diminui em uma unidade do `Step` o valor atual do `Range`.

## Validação

Às vezes o valor mínimo e máximo de um intervalo não representa, de fato, o valor mínimo/máximo que o usuário pode selecionar. Para estes casos, é possível usar a _prop_ `validation` para validar o novo valor. Basta passar uma função que receberá o novo possível valor.

```html
<Range validation="{rangeValidation}" />

<script>
  export {
    components: {
      Range: '@mamba/range',
    },
    data() {
      return {
        /** Limita o valor entre 20 e 80 */
        rangeValidation: value => value >= 20 && value <= 80,
      };
    },
  }
</script>
```
npm package: @mamba/sprite
Description: O componente `Sprite` ajuda na criação de animações utilizando uma _SpriteSheet_. É recomendado que se utilize este componente no lugar de arquivos `.gif` por ter um desempenho melhor.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Sprite

O componente `Sprite` ajuda na criação de animações utilizando uma _SpriteSheet_. É recomendado que se utilize este componente no lugar de arquivos `.gif` por ter um desempenho melhor.

| Propriedades | Descrição                  | Tipo       | Padrão      |
| ------------ | -------------------------- | ---------- | ----------- |
| src          | Caminho para a spritesheet | `string`   | `undefined` |
| width        | Largura da animação        | `int` (px) | `undefined` |
| height       | Altura da animação         | `int` (px) | `width`     |

## Métodos

### start()

Inicia a animação do `Sprite`.

### stop()

Pausa a animação do `Sprite`.

## Sub componentes

### LoadingSprite

`import LoadingSprite from '@mamba/sprite/Loading.html';`

O component `LoadingSprite` é um component `Sprite` já configurado com a animação padrão de loading do POS.
npm package: @mamba/styles
Description: Mamba core and reset styles
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# @mamba/styles

> Mamba style related package.

## Content

- `dist/pos.css`: mamba core styles for apps;
- `dist/desktop.css`: mamba core styles with desktop support;
- `theme.pcss`: default mamba theme variables.

# Importing new color palette

`import { green500, neutral700 } from '@mamba/styles/colors';`

[Complete list of colors](https://github.com/stone-payments/pos-mamba-sdk/blob/master/packages/configs/postcss/includes/colors.js)
npm package: @mamba/switch
Description: O módulo `Switch` é usado para ativar opções predefinida.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Switch

O módulo `Switch` é usado para ativar opções predefinida.

| Propriedades | Descrição                                        | Tipo        | Padrão      |
| :----------- | :----------------------------------------------- | :---------- | :---------- |
| change       | lança um evento quando o componente é modificado | `function`  | `undefined` |
| checked      | deixa o switch ativado                           | `undefined` | `true`      |
| disabled     | desabilita o switch                              | `undefined` | `true`      |

## Métodos

### Switch.toggle(value)

Alterna o valor de `checked` do switch, caso `value` seja passado como parâmtro define `checked` para este valor.
npm package: @mamba/tabs
Description: O módulo `Tabs` é responsável por exibir uma lista de abas, possibilitando a troca de conteúdo de acordo com a sua seleção.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Tabs

O módulo `Tabs` é responsável por exibir uma lista de abas, possibilitando a troca de conteúdo de acordo com a sua seleção.

Usar o modo de funcionamento `route` do parâmetro `changeOn`, faz com que a troca das abas seja feita pela rota da aplicação. Isso é útil para lembrar a posição do índice da aba para rotas internas, e voltar na história do navegador, ou para quando você quiser entrar um uma página exibindo um índice específico.

## Como utilizar

```html
<Tabs>
  <TabPane label="Tab 1">Your content</TabPane>
  <TabPane label="Tab 2">Another content</TabPane>
</Tabs>

<script>
  export default {
    components: {
      Tabs: '@mamba/tabs/Tabs.html',
      TabPane: '@mamba/tabs/TabPane.html',
    },
  };
</script>
```

## TabPane

O `TabPane` é um wrapper sem funcionalidades, gerenciado pelo seu componente pai `Tabs`. Os items da `Tabs` são renderizados na ordem em que os `TabPane` são declarados.
<br/><br/>
O atributo `label` será usado como label no item da aba.
Omitir o attributo `label`, resulta a aba e seu contúdo correspondente não ser exibido.
Para que o parâmetro `route` funcionar corretamente, é necessário que o caminho da aba seja completo e absoluto, incluindo a rota do pai.

`<Tabs ...props />`

| Propriedades | Descrição                                                            | Tipo     | Padrão  |
| ------------ | -------------------------------------------------------------------- | -------- | ------- |
| changeOn     | Define qual o modo de funcionamento das abas: por `state` ou `route` | `string` | `state` |

`<TabPane ...props />`

| Propriedades | Descrição                                                                   | Tipo     | Padrão      |
| ------------ | --------------------------------------------------------------------------- | -------- | ----------- |
| label        | Título a ser utilizado para criar o item na navegação de abas               | `string` | `undefined` |
| route        | Rota da aba para ser usada com modo de troca por `route` do modo `changeOn` | `string` | `undefined` |

## Eventos

`<Tabs ... on:event="..."/>`

| Eventos | Disparado quando ...                                                                        | Tipo                                    |
| ------- | ------------------------------------------------------------------------------------------- | --------------------------------------- |
| change  | Especifique uma função que será chamada quando trocar de aba. Recebe índice atual e antigo. | `function({ currentIndex, lastIndex })` |
npm package: @mamba/utils
Description: Utility methods for mamba apps
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# `@mamba/utils`

O pacote `@mamba/utils` contém métodos úteis para facilitar o desenvolvimento de aplicativos Mamba.

## UI

`import * as UI from '@mamba/utils/ui.js';`

### `timeout(delay: Number): Promise`

`UI.timeout()` move a execução do script para o final da pilha de execução. É uma simples abstração de um `setTimeout` que retorna uma `Promise`.

```js
import { timeout } from '@mamba/utils/ui.js';

function init() {
  console.log('Log imediato');
  timeout(300).then(() => {
    console.log('Log após 300ms');
  });
}

init();
```

Com isso, é possível utilizar `async/await` para facilitar a leitura de alguns métodos:

```js
import { timeout } from '@mamba/utils/ui.js';

async function init() {
  console.log('Log imediato');
  await timeout(300);
  console.log('Log após 300ms');
}

init();
```

## Money

`import * as Money from '@mamba/utils/money.js';`

### `format(value: Number): string`

`Money.format()` formata um valor númerico para um formato de dinheiro:

```js
import { format } from '@mamba/utils/money.js';

format(100); // '100,00'
format(1000); // '1.000,00'
format(100000); // '100.000,00'
format(1000000.27); // '1.000.000,27'
```

### `padZero(value: Number | string): string`

`Money.padZero()` adiciona um `0` para valores numéricos menores que `10` or _strings_ de tamanho `1`.

```js
import { padZero } from '@mamba/utils/money.js';

padZero(1); // '01'
padZero('2'); // '02'
padZero(17); // '17'
padZero('230'); // '230'
```

### Arredondando

- `round(value: Number): Number`

- `ceil(value: Number): Number`

- `floor(value: Number): Number`

`Money.round()`, `Money.ceil()`, `Money.floor()` são similares aos métodos `Math.*` de mesmo nome. A principal diferença é que lidam com alguns erros de arrendondamento da linguagem e levam em conta o valor decimal.

```js
import { round, ceil, floor } from '@mamba/utils/money.js';

Math.round(1.005); // 1
round(1.005); // 1.01

Math.floor(127.77 / 10); // 12
floor(127.77 / 10); // 12.77

Math.ceil(127.77 / 10); // 13
ceil(127.77 / 10); // 12.78
```

## Date

`import * as DateUtils from '@mamba/utils/date.js';`

### `format(date: Date, mask: string): string`

`DateUtils.format()` recebe um objeto `Date` retorna a data formatada de acordo com a `string` de máscara passada.

Os `tokens` suportados são:

- d - dia: 1..31
- dd - dia: 01..31
- m - mês: 1..12
- mm - mês: 01..12
- yy - ano: 01..99
- yyyy - ano: 2001..2099
- h - hora: 0..12
- hh - hora: 00..12
- H - hora: 0..23
- HH - hora: 00..23
- M - minuto: 0..59
- MM - minuto: 00..59
- s - segundo: 0..59
- ss - segundo: 00..59

```js
import { format } from '@mamba/utils/date.js';

format(new Date(2019, 1, 20), 'dd/mm/yyyy')) // 20/02/2019
format(new Date(2019, 1, 20, 20, 30, 55), 'HH:MM:ss')) // 20:30:55
```
npm package: @mambasdk/api
Description: API for accessing Mamba features in a javascript environment
Author: Stone Payments - Mamba Team
Latest version: 0.0.5

# @mambasdk/api

## @mambasdk/api/system

```ts
interface System {
  beep: (tone: Tones, duration: number) => void
  hasEthernet: () => boolean
  hasWifi: () => boolean
  hasGprs: () => boolean
  isBatteryPresent: () => boolean
  getPowerSupply: () => PowerSupply
  getTimeFromBoot: () => number
  getSerialNumber: () => string
  getBatteryStatus: () => BatteryStatus
  getBatteryLevel: () => number
  Tones: Tones
  PowerSupply: PowerSupply
  BatteryStatus: BatteryStatus
}

enum Tones {
  TONE1,
  TONE2,
  TONE3,
  TONE4,
  TONE5,
  TONE6,
  TONE7,
}

enum PowerSupply {
  ADAPTER,
  BATTERY,
  USB,
}

enum BatteryStatus {
  CHECK_NOT_SUPPORTED,
  IN_CHARGE,
  CHARGE_COMPLETE,
  DISCHARGE,
  ABSENT,
}
```

## @mambasdk/api/payment

```ts
interface Payment {
  pay: (params: PaymentOptions, onPayCallback: Function) => void
  getAmountAuthorized: () => number
  enableCardEvent: () => void
  disableCardEvent: () => void
  isPaying: () => boolean
  failedPaying: () => boolean
  getCardHolderName: () => string
  getAtk: () => string
  getItk: () => string
  getAuthorizationDateTime: () => Date
  getBrand: () => string
  getOrderId: () => string
  getAuthorizationCode: () => string
  getInstallmentCount: () => number
  getPan: () => string
  getType: () => string
}

interface PaymentOptions {
  amount: number
  editable_amount: boolean
}
```

## @mambasdk/api/cookie

```ts
class Cookie {
  set(key: string, value: string): true
  get(key: string): string
  clear(): true
}
```

## @mambasdk/api/keyboard

```ts
interface Keyboard {
  setKeyboardAsNumeric: () => void
  setKeyboardAsAlphanumeric: () => void

  getKeyCode: (keyName: string) => number
  getKeyName: (keyCode: number) => string

  isNumericKey: (keyCode: number) => boolean
  isActionKey: (keyCode: number) => boolean

  isBackspaceEnabled(): () => boolean
  disableBackspace: () => void
  enableBackspace: () => void
}
```

## @mambasdk/api/merchant

```ts
interface Merchant {
  getStoneCode: () => string
}
```
npm package: @mambasdk/appbar
Description: ## Descrição
Author: Stone Payments - Mamba Team
Latest version: 0.0.5

# AppBar

## Descrição

O módulo `AppBar` é composto por dois componentes: `AppBar` e `AppBarTitle`. Ambos servem para o controle e estilo da AppBar da aplicação.

<!-- @example ./example/Example.html -->

<AppBar ...props/>

| Parâmetro | Descrição           | Tipo            | Padrão    |
|-----------|---------------------|-----------------|-----------|
| title     | Título da AppBar    | `string`          | `''`        |
| textColor | Cor do Título       | `string` (hex)    | `'#fff'`    |
| bgColor   | Cor de Fundo da AppbBar| `string` (hex) | `'#4ebf1a'` |


<AppBarTitle ...props/>

| Parâmetro | Descrição                    | Tipo            | Padrão    |
|-----------|------------------------------|-----------------|-----------|
| title     | Altera o título da AppBar    | `string`        | `''`      |
npm package: @mambasdk/cli
Description: Mamba CLI
Author: Stone Payments - Mamba Team
Latest version: 0.0.11

# @mambasdk/cli

> A CLI to help developing Mamba Applications

## Requirements

* [Node.js](http://nodejs.org/) >= 6.9.x
* POSTools

  > You must have the `.postools` installed and in your shell's `$PATH`

* ssh `config` (`$HOME/.ssh/config`) file with a `POS` host

  ```text
    Host POS
      HostName 127.0.0.1
      Port 51000
      User MAINAPP
      IdentityFile ~/.ssh/id_rsa_pax
   ```

## Commands

* `mamba app <command>`
  * `mamba app deploy`

    Deploys the current app to the POS. It uses the `manifest.xml` **ID** and **displayedName** to create the app directory.

* `mamba pos <command>`
  * `mamba pos ssh-init [--tty Pos0]` - Initializes the POS SSH server
  * `mamba pos start` - Starts the Mamba System
  * `mamba pos stop` - Kills the Mamba System
  * `mamba pos restart` - Restarts the Mamba System
npm package: @mambasdk/collection
Description: O módulo `Collection` é composto de dois componentes: `Collection` e `Row` que juntos, ajudam a organizar itens em listas.
Author: Stone Payments - Mamba Team
Latest version: 0.0.3

# Collection

O módulo `Collection` é composto de dois componentes: `Collection` e `Row` que juntos, ajudam a organizar itens em listas.


<!-- @example ./example/Example.html -->

## Parâmetros

<Collection ...props />

| Parâmetro   | Descrição                         | Tipo               | Padrão        |
|-------------|-----------------------------------|--------------------|---------------|
| title       | Título da coleção                 | `string`           | `undefined`   |

<Row ...props />

| Parâmetro   | Descrição                         | Tipo               | Padrão        |
|-------------|-----------------------------------|--------------------|---------------|
| href        | Link acionado quando a `<Row/>` é clicada  | `string`           | `undefined`   |
| showExtra   | Mostra o conteúdo extra           | `boolean`          | `false`       |
| shortcut    | Tecla de atalho para a ação da `<Row/>`: `0..9`,`enter`,`shortcuts`,`help` | `string` (keyname) | `undefined`   |
| description | Texto de descrição abaixo do título          | `string`           | `undefined`   |
npm package: @mambasdk/dialog
Description: O módulo `Dialog` é composto por 3 componentes: `Dialog`, `ConfirmationDialog` e `PromisedDialog`. Cada um desses componentes cria um modal próprio de tela cheia com suas especificações. Por exemplo: O `PromisedDialog` é exibido durante a excução de uma `
Author: Stone Payments - Mamba Team
Latest version: 0.0.4

# Dialog

O módulo `Dialog` é composto por 3 componentes: `Dialog`, `ConfirmationDialog` e `PromisedDialog`. Cada um desses componentes cria um modal próprio de tela cheia com suas especificações.
Por exemplo: O `PromisedDialog` é exibido durante a excução de uma `Promise` e após sua conclusão fecha o modal, já o `ConfirmationDialog` exibe uma tela com dois botões que controlam o fluxo da aplicação.
Para casos de apenas uma exibição de mensagem durante um período de tempo, o uso do `Dialog` é aconselhável.

<!-- @example ./example/Example.html -->

## Parâmetros

`<Dialog ...props />`

| Parâmetro   | Descrição                                              | Tipo            | Padrão     |
|-------------|--------------------------------------------------------|-----------------|------------|
| align       | Alinha o conteúdo do Modal. (`left`, `right`, `center`)| `string`        | `center`   |
| bgColor     | Define a cor de fundo do Modal                         | `string`        | `'#e3e3e3'`|
| textColor   | Define a cor do texto do Modal                         | `boolean`       | `'#4a4a4a'`|
| title       | Título do Modal                                        | `string`        | `undefined`|

`<ConfirmationDialog ...props />`

| Parâmetro     | Descrição                                              | Tipo            | Padrão       |
|---------------|--------------------------------------------------------|-----------------|--------------|
| negativeLabel | Texto no Botão de Confirmação Negativa                 | `string`        | `'Cancelar'` |
| positiveLabel | Texto no Botão de Confirmação Positiva                 | `string`        | `'Confirmar'`|

`<PromisedDialog ...props />`

| Parâmetro   | Descrição                                               | Tipo            | Padrão     |
|-------------|---------------------------------------------------------|-----------------|------------|
| delay       | Tempo de espera depois de executar a `Promise`          | `string`        | `'right'`  |
| promise     | A `Promise` a ser executada                             | `boolean`       | `false`    |

## Métodos

### open(duration)
Abre o `Dialog` e o mantém aberto pelo tempo especificado.

### close(delay)
Fecha o `Dialog` após o tempo especificado.
npm package: @mambasdk/icon
Description: ## Descrição
Author: Stone Payments - Mamba Team
Latest version: 0.0.3

# Icon

## Descrição

O módulo Icon possui dois componentes: `Icon` e `RoundIcon`. Ambos, facilitam na criação de ícones com
imagens padrões já disponíveis em nossa SDK. Além das imagens, também é possível costumizar o estilo
do ícone e utilizar uma imagem própria .

<!-- @example ./example/Example.Html -->

## Parâmetros

### Icon

| Parâmetro | Descrição                                            | Tipo            | Padrão    |
| :-------- | :--------------------------------------------------- | :-------------- | :-------- |
| color     | Pinta o ícone de acordo com a cor                   | `string` (hex)    | `#fdfdfd`  |
| size      | Tamanho do ícone (`normal`, `large`, `giant`)             | `string`          | `normal` |
| symbol    | Nome do ícone                                       | `string`          | `6px`     |
| level     | Pinta o ícone de acordo com o level (apenas wifi)   | `int` (0..3)      | `undefined` |

### RoundIcon

| Parâmetro | Descrição                                      | Tipo         | Padrão     |
| :-------- | :--------------------------------------------- | :---------   | :--------- |
| bgColor   | Cor de fundo do círculo                          | `string` (hex) | `#4ebf1a`  |
| borderRadius | Permite editar o `border-radius` do componente                                 | `string` (%) | `50%`  |
| color     | Cor do ícone                                 | `string` (hex) | `#6ebf1a`  |
| size      | Tamanho do ícone (`normal`, `large`, `giant`)   | `string`       | `normal`   |
npm package: @mambasdk/input
Description: O componente `Input` contém funcionalidades de uma caixa de texto com estilos e controles embutidos para facilitar o desenvolvimento.
Author: Stone Payments - Mamba Team
Latest version: 0.0.13

# Input

O componente `Input` contém funcionalidades de uma caixa de texto com estilos e controles embutidos para facilitar o desenvolvimento.

<!-- @example ./example/Example.html -->

## Parâmetros

<Input ...props />

| Parâmetro   | Descrição                                                  | Tipo            | Padrão     |
|-------------|------------------------------------------------------------|-----------------|------------|
| align       | Alinha a entrada de acordo com paramêtro (`left`, `right`) | `string`        | `'right'`  |
| alphanumeric| Define o modo de entrada como alfanúmerico                 | `boolean`       | `false`    |
| autofocus   | Inicia o elemento com foco                                 | `boolean`       | `false`    |
| bgColor     | Cor de Fundo da Caixa de Entrada                           | `string` (hex)  | `'#fff'`   |
| disabled    | Desabilita a entrada de texto                              | `boolean`       | `false`    |
| errorMessage| Define uma mensagem de erro caso a validação falhe         | `boolean`       | `false`    |
| errorColor  | Cor do Texto da Mensagem de Erro                           | `string` (hex)  | `#d5000`   |
| label       | Título da Caixa de Entrada                                 | `string`        | `undefined`|
| readable    | Possibilita esconder o texto de Entrada                    | `boolean`       | `false`    |
| type        | Tipo de texto de entrada (`password`/`text`)               | `string`        | `text`     |
| textColor   | Cor do Texto da Caixa de Entrada                           | `string` (hex)  | `'#4a4a4a'`|
| value       | Valor de padrão de entrada                                 | `string`        | `false`    |
| validate    | Adiciona um método de validação                            | `function`      | `undefined`|
npm package: @mambasdk/pos
Description: Mamba web environment wrapper and simulator
Author: Stone Payments - Mamba Team
Latest version: 0.0.12

# `@mambasdk/pos`

## Simulator

For `mamba apps` to be able to run on a common browser, you must simulate the real `POS` environment.

- Just the `import` is enough to create the simulated environment.

```js
/** Boot the Mamba simulator */
import '@mambasdk/pos/simulator/index.js';
```

- However, you can also initialize the `digital POS` component, which will be the container for your `mamba app` when running on a browser. A `store` must be passed to the component.

```js
import * as Simulator from '@mambasdk/pos/simulator/index.js';
import store from './store.js';

/** Initialize the digital POS component */
new Simulator.POS({ target: document.body, store });
```

It's **obligatory** to include the entry file which starts the simulator **before** the app.
npm package: @mambasdk/printable
Description: ## Descrição
Author: Stone Payments - Mamba Team
Latest version: 0.0.17

# Printable

## Descrição

O componente `@mambasdk/printable` encapsula o fluxo de impressão do POS, permitindo a impressão de qualquer conteúdo HTML estático .

## Parâmetros

| Parâmetro | Descrição                                            | Tipo            | Padrão    |
| :-------- | :--------------------------------------------------- | :-------------- | :-------- |
| dithering | Define se deve ser aplicado um algoritmo de dithering na impressão. Use esta função somente para imprimir imagens, pois o dithering diminui a qualidade da impressão de texto  | `boolean` | `false` |

## Métodos

### print()

Envia o conteúdo do componente `printable` para impressão.

```html
<Printable ref:printableContent dithering={true}>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium esse possimus eaque harum, voluptatum optio hic. Dignissimos, molestias eligendi, cumque et eos iusto quasi mollitia fuga quam laudantium tempora aliquid?
</Printable>

<!-- Print the ref:printableContent content -->
<button on:click="refs.printableContent.print()">Print</button>

<script>
  export default {
    components: {
      Printable: '@mambasdk/printable',
    },
  };
</script>

```
npm package: @mambasdk/progress
Description: O módulo `Progress` é composto por dois componentes: `ProgressBar` e `CircleProgress`. Ambos podem ser utilizados para representar a execução de um tarefa com etapas definidas ou não.
Author: Stone Payments - Mamba Team
Latest version: 0.0.5

# Progress

O módulo `Progress` é composto por dois componentes: `ProgressBar` e `CircleProgress`. Ambos podem ser
utilizados para representar a execução de um tarefa com etapas definidas ou não.

<!-- @example ./example/Example.Html -->

## Parâmetros


`<ProgressBar ...props />`

| Parâmetro | Descrição           | Tipo            | Padrão    |
| :-------- | :------------------ | :-------------- | :-------- |
| color     | Cor da barra        | `string` (hex)    | `#6ebf1a` |
| height    | Espessura da barra  | `string` (px)     | `6px`     |
| progress  | Porcentagem atual   | `string` (0 a 100)| `undefined` |


`<ProgressCircle ...props />`

| Parâmetro | Descrição               | Tipo            | Padrão     |
| :-------- | :---------------------- | :-------------- | :--------- |
| color     | Cor do círculo          | `string` (hex)    | `#6ebf1a`  |
| height    | Raio do círculo         | `string` (px)     | `25px`     |
| progress  | Porcentagem atual       | `string` (0 a 100)| `undefined`  |
| speed     | Velocidade de rotação   | `string` (0 a 10) | `10`       |
npm package: @mambasdk/styles
Description: Mamba core and reset styles
Author: Stone Payments - Mamba Team
Latest version: 0.0.1

# @mambasdk/styles

> Mamba style related package.

## Content

- `dist/pos.css`: mamba core styles for apps;
- `dist/desktop.css`: mamba core styles with desktop support;
- `colors.css`: list of colors used core styles.