open-index/open-npm huggingface dataset:
npm package: @stone-payments/emd-basic-brand-icon
Description: emd-basic-brand-icon
Author: Stone Co.
Latest version: 1.8.1

# Brand Icon

Emerald Brand Icon UI component.

## Usage

```
npm install @stone-payments/emd-basic-brand-icon
```

```js
import '@stone-payments/emd-basic-brand-icon';
```

```html
<emd-brand-icon icon="amex"></emd-icon>
<emd-brand-icon iconid="9"></emd-icon>
```

## Attributes and Properties

#### `icon`

Selects a brand from the library by its name.

The component does its best to map the string to the correct brand. For example: "Amex", "American-express", "American Express", "AmericanExpress Debit" and "Amex Credit" will all map to the American Express brand.

- Type: String
- Attribute and property

#### `iconid`

Selects a brand from the library by its id.

- Type: String
- Attribute and property

#### `nofallback`

By default, the Stone brand will be shown if a given brand is not recognized. This attribute tells the component not to show anything instead.

- Type: Boolean
- Attribute and property
npm package: @stone-payments/emd-basic-button
Description: emd-basic-button
Author: Stone Co.
Latest version: 1.6.0

# Button

Emerald Button UI component.

## Usage

```
npm install @stone-payments/emd-basic-button
```

```js
import '@stone-payments/emd-basic-button';
```

```html
<emd-button abc>
  Click me
</emd-button>

<emd-button abc size="large" rank="secondary">
  Click me
</emd-button>

<emd-button>
  Click me
</emd-button>

<emd-button>
  <emd-icon slot="icon" icon="arrow-up"></emd-icon>
  Move up
</emd-button>

<emd-button loading>
  Buy now
</emd-button>

<emd-button href="http://stone.co">
  Stone Co.
</emd-button>
```

## Attributes and Properties

#### `abc`

Applies the ABC theme to the component. The ABC mode intentionally restricts the styles that can be applied to the component. Font size, color and background can only be changed through `size` and `rank` properties in ABC mode.

- Type: Boolean
- Attribute and property

#### `size`

Changes the size of the component when in ABC mode. It can be `large`, `medium` or `small`.

- Type: String
- Attribute and property

#### `rank`

Changes the appearance of the component when in ABC mode. It can be `primary`, `secondary` or `tertiary`.

- Type: String
- Attribute and property

#### `type`

Defines the type of the component. It can be: `button`, `submit` or `reset`. This attribute is passed to the `<button>` element inside the component.

- Type: String
- Attribute and property

#### `disabled`

Disables the component.

- Type: Boolean
- Attribute and property

#### `loading`

Shows a loading spinner inside the component.

- Type: Boolean
- Attribute and property

#### `href`

Makes the component behave like an `<a>` tag.

- Type: String
- Attribute and property

#### `target`

Defines the tab where the url set in the `href` attribute will be loaded.

- Type: String
- Attribute and property

#### `multipleclicks`

Allows the component to recognize multiple clicks in a row. By default, when clicked multiple times in a row, the component will only recognize the first click.

- Type: Boolean
- Attribute and property

## CSS Properties

#### `--emd-button-padding`

Controlls the internal padding of the button. This property doesn't work in ABC mode.

- Default: `1.125em 1.5em`

## Slots

#### Default

The component's content. Usually some text, but it can also be an image or an icon, for example.

#### `icon`

The area on the left to the content where the optional icon goes.

## Events

This component dispatches all native Button events, like `click`, for example.
npm package: @stone-payments/emd-basic-card
Description: emd-basic-card
Author: Stone Co.
Latest version: 1.3.3

# Card

Emerald Card UI component.

## Usage

```
npm install @stone-payments/emd-basic-card
```

```js
import '@stone-payments/emd-basic-card';
```

```html
<emd-card>
  <user-details></user-details>
</emd-card>

 <emd-card>
  <h4 slot="header">User Details</h4>
  <emd-icon slot="header-extra" icon="close"></emd-icon>
  <user-details></user-details>
  <p slot="footer">Updated one hour ago</p>
</emd-card>
```

## Attributes and Properties

#### `expandedbody`

Controls whether the content has a margin of 20px.

- Type: Boolean
- Attribute and property

#### `noscroll`

Prevents the component from scrolling the content, which happens by default. When `noscroll` is used, the content itself becomes responsible for scrolling.

- Type: Boolean
- Attribute and property

## CSS Properties

#### `--emd-card-header-background`

Sets the Card header's background.

- Default: `transparent`

#### `--emd-card-body-background`

Sets the Card body's background.

- Default: `transparent`

#### `--emd-card-footer-background`

Sets the Card footer's background.

- Default: `transparent`

## Slots

#### Default

The component's content. Usually another component, but it can be anything.

#### `header`

The component's header, at the top.

#### `header-extra`

The component's area for action buttons, i.e. a close icon, at the top-right corner.

#### `footer`

The component's header, at the bottom.
npm package: @stone-payments/emd-basic-icon
Description: emd-basic-icon
Author: Stone Co.
Latest version: 1.9.1

# Icon

Emerald Icon UI component.

## Usage

```
npm install @stone-payments/emd-basic-icon
```

```js
import '@stone-payments/emd-basic-icon';
```

```html
<emd-icon icon="close"></emd-icon>
```

## Attributes and Properties

#### `icon`

Selects an icon from the library.

- Type: String
- Attribute and property
npm package: @stone-payments/emd-basic-login
Description: emd-basic-login
Author: Stone Co.
Latest version: 1.1.3

# Login

Login component with two steps: e-mail entry and password entry.

## Usage

```
npm install @stone-payments/emd-basic-login
```

```js
import '@stone-payments/emd-basic-login';
```

```html
<emd-login></emd-login>

<emd-login email="some.email@stone.com.br" step="2"></emd-login>
```

## Attributes and Properties

#### `email`

Controls the user e-mail.

- Type: String
- Attribute and property

#### `step`

Controls navigation steps: `1` for e-mail and `2` for password.

- Type: Number
- Attribute and property

## Events

#### `forgotemail`

Dispatched when the `Esqueci meu e-mail` button is clicked.

- Detail: `null`

#### `forgotpassword`

Dispatched when the `Esqueci minha senha` button is clicked.

- Detail: `null`

#### `emailsubmitsuccess`

Dispatched when the user successfully enters their e-mail on the first step and then clicks the `Próximo` button.

- Detail:

```javascript
{
  email: 'some.email@stone.com.br'
}
```

#### `passwordsubmitsuccess`

Dispatched when the user successfully enters their e-mail and password on the first and second steps and then clicks the `Entrar` button.

- Detail:

```javascript
{
  email: 'some.email@stone.com.br',
  password: 'some.password'
}
```

## Methods

#### `nextStep()`

The `nextStep()` method should be called after `emailsubmitsuccess` and `passwordsubmitsuccess` to continue the user flow.

```javascript
const login = document.querySelector('emd-login');

login.addEventListener('emailsubmitsuccess', async evt => {
  const { email } = evt.detail;
  await doSomethingWith(email);
  evt.target.nextStep();
});
```

#### `quit()`

If something goes wrong after `emailsubmitsuccess` or `passwordsubmitsuccess`, the `quit()` method should be called to finish the loading process.

```javascript
const login = document.querySelector('emd-login');

login.addEventListener('emailsubmitsuccess', async evt => {
  const { email } = evt.detail;

  try {
    await doSomethingWith(email);
    evt.target.nextStep();
  } catch (err) {
    evt.target.quit();
  }
});
```

## Slots

#### Default

Allows the developer to change the `Acesse Sua Conta` message.
npm package: @stone-payments/emd-basic-money
Description: emd-basic-money
Author: Stone Co.
Latest version: 2.1.3

# Money

Emerald Money UI component.

## Usage

```
npm install @stone-payments/emd-basic-money
```

```js
import '@stone-payments/emd-basic-money';
```

```html
<emd-money value="12680.9"></emd-money>

<emd-money value="12680.9" hidevalue></emd-money>

<emd-money value="12680.9" currency="EUR" hidepositivesign></emd-money>
```

## Attributes and Properties

#### `value`

Defines the numeric value to be displayed. The component uses `Intl.NumberFormat` API to round values.

- Type: Number
- Attribute and property

#### `currency`

Defines the currency to be displayed. It can be `BRL`, `USD` or `EUR`.

- Type: String
- Attribute and property

#### `hidevalue`

Hides the value with a rectangle.

- Type: Boolean
- Attribute and property

#### `hidepositivesign`

Hides the positive sign before the value. The negative sign cannot be hidden.

- Type: Boolean
- Attribute and property

## CSS Properties

#### `--emd-money-positive-color`

Defines the color of positive values.

- Default: `inherit`

#### `--emd-money-neutral-color`

Defines the color of values equal to zero.

- Default: `inherit`

#### `--emd-money-negative-color`

Defines the color of negative values.

- Default: `inherit`

#### `--emd-money-effect-color`

Defines the color of the rectangle that hides the value.

- Default: `currentColor`

#### `--emd-money-effect-opacity`

Defines the opacity of the rectangle that hides the value.

- Default: `0.5`
npm package: @stone-payments/emd-basic-notification
Description: emd-basic-notification
Latest version: 1.1.1

# Button

Emerald Notification UI component.

## Usage

```html
<emd-notification mode="alert">
  Alert message
  <button slot="action">Confirm</button>
</emd-notification>

<emd-notification mode="success">
  Success message
</emd-notification>

<emd-notification mode="danger">
  Danger message
</emd-notification>
```

## Attributes and Properties

#### `view`

Controls the component layout. It can be `default` or `compact`. Defaults to `default`.

- Type: String
- Attribute and property

#### `mode`

Controls the component appearance according to its goal. It can be `alert`, `success` or `danger`. Defaults to `alert`.

- Type: String
- Attribute and property

## CSS Parts

#### `wrapper`

Styles the element that wraps the content.

- Default:

```css
emd-notification::part(wrapper) {
  background: #fff;
  border-width: 1px 1px 1px 10px;
  border-style: solid;
  border-radius: 4px 10px 10px 4px;
  padding: 30px;
}
```

#### `icon`

Styles the icon's SVG.

- Default:

```css
emd-notification::part(icon) {
  display: block;
  width: 44px;
  margin-right: 44px;
  fill: currentColor;
}
```

## Slots

#### Default

The component's content. Usually some text.

#### `action`

The component's area for action buttons.
npm package: @stone-payments/emd-basic-paginator
Description: emd-basic-paginator
Latest version: 1.0.0

# Paginator

Emerald Paginator UI component.

## Usage

```
npm install @stone-payments/emd-basic-paginator
```

```js
import '@stone-payments/emd-basic-paginator';
```

```html
<emd-paginator></emd-paginator>

<emd-paginator total="20" selected="1"></emd-paginator>
```

## Attributes and Properties

#### `total`

Gives total of pages.

- Type: Number
- Attribute and property

##### Without `total`
The Component takes the Arrows only mode.

#### `selected`

Displays the current page.

- Type: Number
- Attribute and property

## Events

#### `paginate`

Dispatched when current page changes.

- Detail:
  
```javascript
{
  type: "index",
  index: 2
}
```

When `total` is not assigned.
Depending on which arrow you click

```javascript
{
  type: "previous",
}
```

OR

```javascript
{
  type: "next",
}
```
npm package: @stone-payments/emd-basic-pin-code
Description: emd-basic-pin-code
Latest version: 1.0.0

# Button

Emerald Pin Code UI component.

## Usage

```html
<emd-pin-code cases="4"></emd-pin-code>

<emd-pin-code cases="6" forceuppercase></emd-pin-code>

<emd-pin-code cases="6" type="number"></emd-pin-code>

<emd-pin-code cases="4" value="AB24"></emd-pin-code>
```

## Attributes and Properties

#### `cases`

Controls the number of cases. It should be a positive integer and defaults to `1` if any invalid value is passed.

- Type: Number
- Attribute and property

#### `forceuppercase`

Forces characters to be passed as uppercase. Defaults to `false`.

- Type: Boolean
- Attribute and property

#### `type`

Controls the type of the cases. Can be `number`, `text` or `password`. Defaults to `text`.

- Type: String
- Attribute and property

#### `value`

Controls the value of the cases. As an attribute, it will only be read once during initialization, just like the native Input element. As a property, it can be set or read at any time.

- Type: String
- Attribute and property

## CSS Parts

#### `wrapper`

Styles the element that wraps the cases.

- Default:

```css
emd-pin-code::part(wrapper) {
  display: grid;
  grid-column-gap: 0.5em;
}
```

#### `case`

Styles all cases at the same time.

- Default:

```css
emd-pin-code::part(case) {
  -webkit-appearance: none;
  background: #FFFFFF;
  color: inherit;
  border: 2px solid #D6DDE4;
  border-radius: 5px;
  font-family: inherit;
  font-style: normal;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  padding: 0.3125em 0.25em;
  width: 1em;
}
```

## Events

This component dispatches all native Input events, like `input`, for example, and also:

#### `complete`

Dispatched every time all cases are filled.

- Detail:

```js
{
  value: 'AB24'
}
```

## Methods

#### `focus()`

Programatically move focus to the first empty case, if it exists.

#### `blur()`

Programatically remove focus from all cases.
npm package: @stone-payments/emd-basic-slideshow
Description: emd-basic-slideshow
Latest version: 1.1.0

# Button

Emerald Slideshow UI component.

## Usage

```html
<emd-slideshow current="2">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</emd-slideshow>
```

## Attributes and Properties

#### `current`

Sets the current slide and trigger the transition. Defaults to `1`.

- Type: Number
- Attribute and property

#### `delay`

The delay of the transition in milliseconds. Defaults to `300` if unset.

- Type: Number
- Attribute and property

## CSS Properties

#### `--emd-slideshow-gap`

Controlls the gap between slides.

- Default: `0px`

## Slots

#### Default

The slide's container. Each component's child element becomes a slide.

## Events

#### `slidechange` (alias `slidechangestart`)

Dispatched when the current slide changes but before the animation begins.

- Detail:

```javascript
{
  previous: 2,
  current: 3
}
```

#### `slidechangeend`

Dispatched after the current slide changes and the animation ends.

- Detail:

```javascript
{
  previous: 2,
  current: 3
}
```
npm package: @stone-payments/emd-basic-tooltip
Description: emd-basic-tooltip
Latest version: 1.1.2

# Tooltip

Emerald Tooltip UI component.

## Usage

```html
<span id="target">120 members found</span>
<emd-tooltip for="target">79 online now</emd-tooltip>
```

## Attributes and Properties

#### `position`

The tooltip position relative to the target element. It can be `top`, `bottom`, `left` or `right`. Defaults to `right` if unset.

- Type: String
- Attribute and property

#### `for`

The id of the target element. The tooltip **must be a sibling** of the target element.

- Type: String
- Attribute and property

#### `delay`

The delay of the fade effect in milliseconds. Defaults to zero if unset.

- Type: Number
- Attribute and property

#### `shadow`

Shows the tooltip shadow. Defaults to `false`.

- Type: Boolean
- Attribute and property


## CSS Properties

#### `--emd-tooltip-background-color`

Defines the background color of the tooltip.

- Default: `#0c1219`

#### `--emd-tooltip-border-color`

Defines the border color of the tooltip.

- Default: `--emd-tooltip-background-color` or `#0c1219`

#### `--emd-tooltip-border-radius`

Defines the border radius of the tooltip.

- Default: `6px`

#### `--emd-tooltip-font-size`

Defines the font size of the text.

- Default: `0.75em`

#### `--emd-tooltip-width`

Defines the width of the tooltip.

- Default: `max-content`

#### `--emd-tooltip-padding`

Defines the padding of the tooltip.

- Default: `calc(0.75em - 2px)`

#### `--emd-tooltip-text-align`

Defines the text alignment.

- Default: `left`

#### `--emd-tooltip-text-color`

Defines the text color.

- Default: `#fff`
npm package: @stone-payments/emd-business-loan-details-confirm
Description: emd-business-loan-details-confirm
Author: Stone Co.
Latest version: 1.6.0

# Loan Discharge History

The loan discharge history component is intended to list the history of repayment of a loan made by the user, simply passing the property `loanid`, the only key of a loan agreement.


## Usage

```html
<emd-loan-discharge-history loanid=""></emd-loan-discharge-history>
```

## Attributes and Properties

#### `loanid`

Controls the user e-mail.
- Required to request  
- Type: String
- Attribute and property

## Events

- The component does not emit custom events.
npm package: @stone-payments/emd-business-sales-list
Description: emd-business-sales-list
Latest version: 1.4.0

# Sales List

The sales list component is intended to list user sales given a range of dates and a type.

## Usage

```html
<emd-sales-list
    affiliationcodes=""
    startdate=""
    finaldate=""
    page=""
    pagesize=""
    type=""></emd-sales-list>
```

## Attributes and Properties

#### `affiliationcodes`
#### `startdate`
#### `finaldate`
#### `page`
#### `pageSize`
#### `type`

## Events

- The component does not emit custom events.