open-index/open-npm huggingface dataset:
npm package: @maggioli-design-system/mds-radial-menu-item
Description: mds-radial-menu-item is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.0.5

# mds-radial-menu-item



<!-- Auto Generated Below -->


## Properties

| Property  | Attribute | Description                                         | Type                                                                                                                                       | Default     |
| --------- | --------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
| `icon`    | `icon`    | The icon displayed in the button                    | `string \| undefined`                                                                                                                      | `undefined` |
| `size`    | `size`    |                                                     | `"lg" \| "md" \| "sm" \| "xl"`                                                                                                             | `'lg'`      |
| `tone`    | `tone`    | Specifies the tone variant for the button           | `"ghost" \| "quiet" \| "strong" \| "weak" \| undefined`                                                                                    | `'weak'`    |
| `tooltip` | `tooltip` | The tooltip displayed when hovering over the button | `string \| undefined`                                                                                                                      | `undefined` |
| `variant` | `variant` | Specifies the color variant for the button          | `"ai" \| "apple" \| "dark" \| "error" \| "google" \| "info" \| "light" \| "primary" \| "secondary" \| "success" \| "warning" \| undefined` | `'dark'`    |


## CSS Custom Properties

| Name                                                | Description                                          |
| --------------------------------------------------- | ---------------------------------------------------- |
| `--mds-radial-menu-item-transition-duration`        | Set the transition duration of the menu items        |
| `--mds-radial-menu-item-transition-timing-function` | Set the transition timing function of the menu items |


## Dependencies

### Depends on

- [mds-button](../mds-button)
- [mds-tooltip](../mds-tooltip)

### Graph
```mermaid
graph TD;
  mds-radial-menu-item --> mds-button
  mds-radial-menu-item --> mds-tooltip
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  mds-tooltip --> mds-text
  style mds-radial-menu-item fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-row
Description: mds-row is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 1.2.0

# mds-row

This component is **deprecated** as it is enough to use plain HTML with the help of frameworks like [TailwindCSS][tailwind] like in the example below:

```html
<div class="flex gap-2">
  <div>Element 1</div>
  <div>Element 2</div>
</div>
```

[tailwind]: https://tailwindcss.com/docs/flex

<!-- Auto Generated Below -->


----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-separator
Description: mds-separator is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.7.3

# mds-separator



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Dependencies

### Used by

 - [mds-price-table-list](../mds-price-table-list)

### Graph
```mermaid
graph TD;
  mds-price-table-list --> mds-separator
  style mds-separator fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-spinner
Description: mds-spinner is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 3.2.4

# mds-spinner



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property  | Attribute | Description                                                                         | Type                   | Default |
| --------- | --------- | ----------------------------------------------------------------------------------- | ---------------------- | ------- |
| `running` | `running` | Specifies if the animation is running or not, it's required for performance reasons | `boolean \| undefined` | `false` |


## CSS Custom Properties

| Name                     | Description                             |
| ------------------------ | --------------------------------------- |
| `--mds-spinner-duration` | Sets the duration of the icon animation |


## Dependencies

### Used by

 - [mds-button](../mds-button)
 - [mds-entity](../mds-entity)
 - [mds-input](../mds-input)

### Graph
```mermaid
graph TD;
  mds-button --> mds-spinner
  mds-entity --> mds-spinner
  mds-input --> mds-spinner
  style mds-spinner fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-status-bar
Description: mds-status-bar is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.3.1

# mds-status-bar



<!-- Auto Generated Below -->


## Properties

| Property      | Attribute     | Description                                                                             | Type                                          | Default          |
| ------------- | ------------- | --------------------------------------------------------------------------------------- | --------------------------------------------- | ---------------- |
| `description` | `description` | Specifies the description near the slotted actions                                      | `string \| undefined`                         | `undefined`      |
| `overflow`    | `overflow`    | Specifies if the component prevents the body from scrolling when modal window is opened | `"auto" \| "manual"`                          | `'manual'`       |
| `position`    | `position`    | Specifies the position of the status bar                                                | `"bottom" \| "bottom-left" \| "bottom-right"` | `'bottom-right'` |
| `visible`     | `visible`     | Specifies if the component is visible                                                   | `boolean \| undefined`                        | `undefined`      |


## Methods

### `hide() => Promise<void>`



#### Returns

Type: `Promise<void>`




## Slots

| Slot        | Description                                                                             |
| ----------- | --------------------------------------------------------------------------------------- |
| `"default"` | Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element. |


## Shadow Parts

| Part                | Description                                                                                   |
| ------------------- | --------------------------------------------------------------------------------------------- |
| `"actions"`         | Selects the `actions` container element wrapped in shadowDOM.                                 |
| `"status-bar"`      | Selects the `status-bar` window component wrapped in shadowDOM.                               |
| `"status-bar-area"` | Selects the `status-bar-area` which wraps `status-bar` element with darker area in shadowDOM. |


## Dependencies

### Depends on

- [mds-modal](../mds-modal)
- [mds-text](../mds-text)

### Graph
```mermaid
graph TD;
  mds-status-bar --> mds-modal
  mds-status-bar --> mds-text
  mds-modal --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-status-bar fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-stepper-bar
Description: mds-stepper-bar is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 6.4.0

# mds-stepper-bar



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property     | Attribute    | Description                                                                                                           | Type                    | Default  |
| ------------ | ------------ | --------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------- |
| `itemsDone`  | `items-done` | Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done | `number`                | `1`      |
| `navigation` | `navigation` | Specifies the navigation type                                                                                         | `"none" \| "scrollbar"` | `'none'` |


## Events

| Event                 | Description                  | Type                                    |
| --------------------- | ---------------------------- | --------------------------------------- |
| `mdsStepperBarChange` | Emits when a step is changed | `CustomEvent<MdsStepperBarEventDetail>` |


## Slots

| Slot        | Description                                                             |
| ----------- | ----------------------------------------------------------------------- |
| `"content"` | Add `HTML elements` or `components`, one per mds-stepper-bar-item added |
| `"default"` | Add `mds-tepper-bar-item` element/s.                                    |


## Shadow Parts

| Part         | Description                                                    |
| ------------ | -------------------------------------------------------------- |
| `"contents"` | Selects the `contents` container element wrapped in shadowDOM. |
| `"items"`    | Selects the `items` container element wrapped in shadowDOM.    |


## CSS Custom Properties

| Name                                | Description                        |
| ----------------------------------- | ---------------------------------- |
| `--mds-stepper-bar-scroll-behavior` | Sets the scroll-behavior animation |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-tab-bar
Description: mds-tab-bar is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 5.3.3

# mds-tab-bar



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Events

| Event             | Description                  | Type                                |
| ----------------- | ---------------------------- | ----------------------------------- |
| `mdsTabBarChange` | Emits when a step is changed | `CustomEvent<MdsTabBarEventDetail>` |


## Slots

| Slot        | Description                       |
| ----------- | --------------------------------- |
| `"default"` | Add `mds-tab-bar-item` element/s. |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-tab-bar-item
Description: mds-tab-bar-item is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 5.3.3

# mds-tab-bar-item



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property     | Attribute    | Description                                   | Type                             | Default     |
| ------------ | ------------ | --------------------------------------------- | -------------------------------- | ----------- |
| `icon`       | `icon`       |                                               | `string`                         | `''`        |
| `selected`   | `selected`   | Specifies if the component is selected or not | `boolean`                        | `undefined` |
| `typography` | `typography` | Specifies the typography of the element       | `"option" \| "tip" \| undefined` | `'tip'`     |


## Events

| Event                 | Description                          | Type                  |
| --------------------- | ------------------------------------ | --------------------- |
| `mdsTabBarItemSelect` | Emits when the component is selected | `CustomEvent<string>` |


## Slots

| Slot        | Description                                                                            |
| ----------- | -------------------------------------------------------------------------------------- |
| `"default"` | Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here. |


## CSS Custom Properties

| Name                                     | Description                                                   |
| ---------------------------------------- | ------------------------------------------------------------- |
| `--mds-tab-bar-item-background`          | Sets the background-color of the component                    |
| `--mds-tab-bar-item-background-selected` | Sets the background-color of the component when it's selected |
| `--mds-tab-bar-item-color`               | Sets the text color of the component                          |
| `--mds-tab-bar-item-color-selected`      | Sets the text color of the component when it's selected       |


## Dependencies

### Depends on

- [mds-icon](../mds-icon)
- [mds-text](../mds-text)

### Graph
```mermaid
graph TD;
  mds-tab-bar-item --> mds-icon
  mds-tab-bar-item --> mds-text
  style mds-tab-bar-item fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-table-body
Description: mds-table-body is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 5.3.6

# mds-table-body



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property      | Attribute     | Description | Type                   | Default     |
| ------------- | ------------- | ----------- | ---------------------- | ----------- |
| `interactive` | `interactive` |             | `boolean \| undefined` | `undefined` |
| `selection`   | `selection`   |             | `boolean \| undefined` | `undefined` |


## Slots

| Slot        | Description                    |
| ----------- | ------------------------------ |
| `"default"` | Put `mds-table-row` element/s. |


## CSS Custom Properties

| Name                                | Description                                                      |
| ----------------------------------- | ---------------------------------------------------------------- |
| `--mds-table-body-background`       | The background-color of the table body                           |
| `--mds-table-body-background-hover` | The background-color of the table body when the mouse is over it |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-table-cell
Description: mds-table-cell is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 5.3.2

# mds-table-cell



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description                                                                                                                 | Type                            | Default     |
| -------- | --------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
| `value`  | `value`   | Sets a value to help the sorting function from `mds-table-header-cell`, if not set it will be used the content of the cell. | `number \| string \| undefined` | `undefined` |


## Slots

| Slot        | Description                                                      |
| ----------- | ---------------------------------------------------------------- |
| `"default"` | Add `text string`, `HTML elements` or `components` to this slot. |


## CSS Custom Properties

| Name                                | Description                                                      |
| ----------------------------------- | ---------------------------------------------------------------- |
| `--mds-table-cell-background`       | The background-color of the table cell                           |
| `--mds-table-cell-background-hover` | The background-color of the table cell when the mouse is over it |
| `--mds-table-cell-border-color`     | The border-color of the table cell                               |
| `--mds-table-cell-border-width`     | The border-width of the table cell                               |
| `--mds-table-cell-padding`          | The padding of the table cell                                    |


## Dependencies

### Used by

 - [mds-table-header](../mds-table-header)
 - [mds-table-row](../mds-table-row)

### Graph
```mermaid
graph TD;
  mds-table-header --> mds-table-cell
  mds-table-row --> mds-table-cell
  style mds-table-cell fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-table-footer
Description: mds-table-footer is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 5.3.2

# mds-table-footer



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Slots

| Slot        | Description                    |
| ----------- | ------------------------------ |
| `"default"` | Add `mds-table-row` element/s. |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-table-header
Description: mds-table-header is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 5.1.0

# mds-table-header



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property     | Attribute    | Description | Type                   | Default     |
| ------------ | ------------ | ----------- | ---------------------- | ----------- |
| `selectable` | `selectable` |             | `boolean \| undefined` | `undefined` |


## Methods

### `setSelection(selectedItems: number, totalItems: number) => Promise<void>`



#### Parameters

| Name            | Type     | Description |
| --------------- | -------- | ----------- |
| `selectedItems` | `number` |             |
| `totalItems`    | `number` |             |

#### Returns

Type: `Promise<void>`



### `updateLang() => Promise<void>`



#### Returns

Type: `Promise<void>`




## Slots

| Slot        | Description                    |
| ----------- | ------------------------------ |
| `"default"` | Add `mds-table-row` element/s. |


## Shadow Parts

| Part        | Description |
| ----------- | ----------- |
| `"actions"` |             |


## Dependencies

### Depends on

- [mds-table-cell](../mds-table-cell)
- [mds-input-switch](../mds-input-switch)
- [mds-table-header-cell](../mds-table-header-cell)

### Graph
```mermaid
graph TD;
  mds-table-header --> mds-table-cell
  mds-table-header --> mds-input-switch
  mds-table-header --> mds-table-header-cell
  mds-input-switch --> mds-icon
  mds-input-switch --> mds-text
  mds-table-header-cell --> mds-button
  mds-table-header-cell --> mds-text
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-table-header fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-table-header-cell
Description: mds-table-header-cell is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.2.4

# mds-table-header-cell



<!-- Auto Generated Below -->


## Properties

| Property    | Attribute   | Description                                                               | Type                                    | Default     |
| ----------- | ----------- | ------------------------------------------------------------------------- | --------------------------------------- | ----------- |
| `direction` | `direction` |                                                                           | `"ascending" \| "descending" \| "none"` | `'none'`    |
| `label`     | `label`     | Sets a label for the cell                                                 | `string \| undefined`                   | `undefined` |
| `sortable`  | `sortable`  | Tells the component to make the cell able to sort the table columns items | `boolean \| undefined`                  | `undefined` |


## Shadow Parts

| Part       | Description |
| ---------- | ----------- |
| `"action"` |             |
| `"label"`  |             |


## CSS Custom Properties

| Name                              | Description                   |
| --------------------------------- | ----------------------------- |
| `--mds-table-header-cell-padding` | The padding of the table cell |


## Dependencies

### Used by

 - [mds-table-header](../mds-table-header)

### Depends on

- [mds-button](../mds-button)
- [mds-text](../mds-text)

### Graph
```mermaid
graph TD;
  mds-table-header-cell --> mds-button
  mds-table-header-cell --> mds-text
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  mds-table-header --> mds-table-header-cell
  style mds-table-header-cell fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-table-row
Description: mds-table-row is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 5.4.6

# mds-table-row



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property         | Attribute         | Description | Type                            | Default     |
| ---------------- | ----------------- | ----------- | ------------------------------- | ----------- |
| `interactive`    | `interactive`     |             | `boolean \| undefined`          | `undefined` |
| `overlayActions` | `overlay-actions` |             | `boolean`                       | `undefined` |
| `selectable`     | `selectable`      |             | `boolean \| undefined`          | `undefined` |
| `selected`       | `selected`        |             | `boolean \| undefined`          | `undefined` |
| `value`          | `value`           |             | `number \| string \| undefined` | `undefined` |


## Methods

### `updateLang() => Promise<void>`



#### Returns

Type: `Promise<void>`




## Slots

| Slot        | Description                                                                           |
| ----------- | ------------------------------------------------------------------------------------- |
| `"action"`  | Put `mds-button` element/s or other kind of actions as aside menu for the single row. |
| `"default"` | Put `mds-table-cell` element/s.                                                       |


## Dependencies

### Depends on

- [mds-table-cell](../mds-table-cell)
- [mds-input-switch](../mds-input-switch)

### Graph
```mermaid
graph TD;
  mds-table-row --> mds-table-cell
  mds-table-row --> mds-input-switch
  mds-input-switch --> mds-icon
  mds-input-switch --> mds-text
  style mds-table-row fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-usage
Description: mds-usage is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 4.1.1

# mds-usage



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property  | Attribute | Description                                                         | Type                                 | Default     |
| --------- | --------- | ------------------------------------------------------------------- | ------------------------------------ | ----------- |
| `alias`   | `alias`   | Specifies the alias of the usage phrase on the top of the component | `string \| undefined`                | `undefined` |
| `variant` | `variant` | Specifies the delay when the tooltip will trigger                   | `"do" \| "dont" \| "info" \| "warn"` | `'info'`    |


## Methods

### `updateLang() => Promise<void>`



#### Returns

Type: `Promise<void>`




## Slots

| Slot        | Description                                                      |
| ----------- | ---------------------------------------------------------------- |
| `"default"` | Add `text string`, `HTML elements` or `components` to this slot. |


## CSS Custom Properties

| Name                       | Description                                 |
| -------------------------- | ------------------------------------------- |
| `--mds-usage-badge-color`  | Sets the badge text color of the component. |
| `--mds-usage-border-color` | Sets the border color of the component.     |


## Dependencies

### Depends on

- [mds-badge](../mds-badge)

### Graph
```mermaid
graph TD;
  mds-usage --> mds-badge
  mds-badge --> mds-text
  style mds-usage fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-zero
Description: mds-zero is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.6.3

# mds-zero



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Slots

| Slot        | Description                                                                                                |
| ----------- | ---------------------------------------------------------------------------------------------------------- |
| `"action"`  | Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.                    |
| `"content"` | Put text elements here,                                                                                    |
| `"default"` | Add `HTML elements` or `components` to this slot, it is **recommended** to use `mds-img` or `img` element. |


## Shadow Parts

| Part         | Description                                                          |
| ------------ | -------------------------------------------------------------------- |
| `"actions"`  | Selects the wrapper of the elements with attribute `slot="action"`.  |
| `"contents"` | Selects the wrapper of the elements with attribute `slot="content"`. |


## CSS Custom Properties

| Name                            | Description                                                         |
| ------------------------------- | ------------------------------------------------------------------- |
| `--mds-zero-contents-max-width` | Set if the contents has a max width to be centered in the component |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggo/blinkblink
Description: Program GIFs to your BlinkenRocket
Latest version: 0.0.2

# <blink>blinkblink</blink>

Convert GIFs and strings to [Blinkenrocket](http://blinkenrocket.de) animations with this handy CLI tool!!11

## Install

```
$ npm -g install @maggo/blinkblink
$ # OR
$ yarn global add @maggo/blinkblink
```

## --help

```
Usage: index.js [file|message..]}
Pass an array of either .gif files or strings and set their properties with
--[index].[speed|delay|repeat|direction]

GIFs must be 8x8 pixels, true black (#000000) or 0 alpha means OFF, everything
else ON. Maximum recommended framecount: 255

!!!!!PLEASE make sure that you have your Blinkenrocket safely connected to the
audio jack and your output is set correctly. The volume has to be VERY loud and
could blow away your eardrums (and everyone elses) if you play it on
speakers!!!!!!1

Options:
  --[0..].speed      Playback speed of animation
                     Range of 0 to 15; Default 8
  --[0..].delay      Delay of the animation before it starts to play.
                     Range of 0 to 7.5; Default 0
  --[0..].repeat     How many times should the animation repeat before jumping
                     to the next animation?
                     Range of 0 to 15; Default 0
  --[0..].direction  Animation direction (RTL for text)
                     0 or 1; Default 0
  -c, --clear        Clear the Blinkenrocket storage
  -h, --help         Show help                                         [boolean]
  -v, --version      Show version number                               [boolean]

Examples:
  index.js --0.speed=12 --1.repeat=1 "foo" foo.gif "bar" "baz"
```
npm package: @magic-akari/yocto_queue
Description: yocto_queue
Author: magic-akari
Latest version: 0.1.4

# yocto_queue

Same as [yocto-queue](https://www.npmjs.com/package/yocto-queue) but for Deno.

## Usage

```typescript
import { Queue } from "https://deno.land/x/yocto_queue@VERSION/mod.ts";

const queue = new Queue();

queue.enqueue("🦄");
queue.enqueue("🌈");

console.log(queue.size);
//=> 2

console.log(...queue);
//=> '🦄 🌈'

console.log(queue.dequeue());
//=> '🦄'

console.log(queue.dequeue());
//=> '🌈'
```

## API

### `queue = new Queue()`

The instance is an [`Iterable`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols), which means you can iterate over the queue front to back with a “for…of” loop, or use spreading to convert the queue to an array. Don't do this unless you really need to though, since it's slow.

#### `.enqueue(value)`

Add a value to the queue.

#### `.enqueue(...values)`

Add multiply values to the queue.

#### `.dequeue()`

Remove the next value in the queue.

Returns the removed value or `undefined` if the queue is empty.

#### `.clear()`

Clear the queue.

#### `.size`

The size of the queue.
npm package: @magic-change/react-native-ad
Description: 给rn封装一些常用的广告平台的 sdk，头条穿山甲，腾讯广点通，百度百青藤等广告模块...
Latest version: 1.2.7

# react-native-ad
[![npm version](https://badge.fury.io/js/react-native-ad.svg)](https://badge.fury.io/js/react-native-ad)  [![GitHub stars](https://img.shields.io/github/stars/haxibiao/react-native-ad?style=social)](https://github.com/haxibiao/react-native-ad/stargazers)

### 注意事项

```
穿山甲的，记得全部重新申请代码位，因为穿山甲马上要弃用旧代码位，必须全部是支持模板渲染的代码位
```

### 安装方法 🔨

目前已经发布 NPM 和 Github，并且支持 npm 和 yarn 两种安装方式，两种平台和两种安装方式任选其一就好。

```

# yarn for origin
$ yarn add react-native-ad

# npm for npmjs
$ npm i -D react-native-ad



# yarn for Github 
$ yarn add git+https://github.com/haxibiao/react-native-ad.git

# npm for Github
$ npm install git+https://github.com/haxibiao/react-native-ad.git

```


### 文档地址 🍎

-   **如何对接文档**
    -   [创建获取 appId 和代码位 codeId](docs/readme.md#创建获取appid和代码位codeid)
    -   [安装配置 react-native-ad 模块](docs/readme.md#安装配置react-native-ad模块)
    -   [开屏（Splash）广告的对接及示例](docs/readme.md#开屏splash广告的对接及示例)
    -   [激励视频（RewardVideo）广告的对接及示例](docs/readme.md#激励视频rewardvideo广告的对接及示例)
    -   [全屏视频（FullVideo）广告的对接及示例](docs/readme.md#全屏视频fullVideo广告的对接及示例)
    -   [信息流（Feed）广告的对接及示例](docs/readme.md#信息流feed广告的对接及示例)
    -   [视频信息流（DrawFeed）广告的对接及示例](docs/readme.md#视频信息流drawfeed广告的对接及示例)
    -   [横幅（Banner）广告的对接及示例](docs/readme.md#横幅banner广告的对接及示例)
    -   [常见问题及模块更新](docs/readme.md#常见问题及模块更新)
    -   [更新日志](docs/readme.md#更新日志)

### 更新模块 🍗

怎么查看当前版本？执行 `yarn list | grep "react-native-ad"`，将会输出你当前项目安装的 react-native-ad 版本

然后可以使用 npm update 来更新模块

```
$ npm update react-native-ad
```

或者使用 yarn upgrade 来更新

```
$ yarn upgrade react-native-ad
```

### 联系我们 👾
> 由于团队以及产品方向问题，该包的维护越来越困难。目前有计划考虑社区共同维护，订阅方式捐赠，付费技术支持等一系列方式，将收益用于持续跟踪 issues 和提供 SDK 升级迭代，同时也能够让该项目可持续发展下去，有订阅或付费意向的小伙伴们可以联系我

> BY. [@PBK-B](https://github.com/PBK-B)

> Email: bin@PBK6.cn

> 微信: tzmax_

### 特别鸣谢
> 感谢 JetBrains 提供了优秀的 IDE 和授权的开源许可。

> Thanks to jetbrains for providing great IDEs and open source licensing

[<img src="docs/assets/jetbrains-variant.png" alt="ad_anim_none.gif" width="160">](https://www.jetbrains.com/)
npm package: @magic-change/react-native-amap-geolocation
Description: React Native geolocation module for Android + iOS
Author: 7c00
Latest version: 1.2.0

# react-native-amap-geolocation [![][version-badge]][npm] [![][build-badge]][build]

**注意：该项目处于消极维护状态，随缘更新。**

React Native 高德地图定位模块，支持 Android + iOS，提供尽可能完善的原生接口，
同时提供符合 Web 标准的 Geolocation API。

<img src="https://user-images.githubusercontent.com/1709072/57276743-12f67f00-70d5-11e9-9fe9-94e37abc1e0b.png" width=360>

## 用法

```javascript
import { PermissionsAndroid } from "react-native";
import { init, Geolocation } from "react-native-amap-geolocation";

await PermissionsAndroid.requestMultiple([
  PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
  PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
]);

await init({
  ios: "9bd6c82e77583020a73ef1af59d0c759",
  android: "043b24fe18785f33c491705ffe5b6935",
});

Geolocation.getCurrentPosition(({ coords }) => {
  console.log(coords);
});
```

## 文档

- [使用指南](https://qiuxiang.github.io/react-native-amap-geolocation)
- [接口文档](https://qiuxiang.github.io/react-native-amap-geolocation/api/globals.html)

[npm]: https://www.npmjs.com/package/react-native-amap-geolocation
[version-badge]: https://badge.fury.io/js/react-native-amap-geolocation.svg
[build-badge]: https://travis-ci.org/qiuxiang/react-native-amap-geolocation.svg?branch=master
[build]: https://travis-ci.org/qiuxiang/react-native-amap-geolocation
npm package: @magic-change/react-native-android-keyboard-adjust
Description: Change the input mode for the Android keyboard in a React Native app.
Author: Marc Zubricky
Latest version: 1.2.0

# react-native-android-keyboard-adjust

Change the input mode for the Android keyboard in a React Native app.

If you are having issues with the default keyboard screen adjust modes and need an easy way to instantly switch them in your app. Quickly go from `Pan` to `Resize` to `Nothing` to get the screen displayed perfectly with the keyboard.

#### Adjust Nothing Example
![adjust nothing keyboard down](http://i.imgur.com/A9bfdQY.png)
![adjust nothing keyboard up](http://i.imgur.com/sCt0EWn.png)

#### Adjust Resize Example
![adjust resize keyboard down](http://i.imgur.com/xgXi0iR.png)
![adjust resize keyboard up](http://i.imgur.com/7QdVbmZ.png)

## Installation instructions for Android

### Install the package

`npm install --save react-native-android-keyboard-adjust`

### Update android/app/build.gradle

Add `compile project(":react-native-android-keyboard-adjust")` to dependencies:

```
dependencies {
    ...
    compile project(":react-native-android-keyboard-adjust")
    ...
 }
```
### Update android/settings.gradle

```
...
include ':react-native-android-keyboard-adjust'
project(':react-native-android-keyboard-adjust').projectDir = new File(settingsDir, '../node_modules/react-native-android-keyboard-adjust/android')
...
```

### Update MainActivity.java in your project

Import the package

```
import net.zubricky.AndroidKeyboardAdjust.AndroidKeyboardAdjustPackage;
```

Add the package to the `getPackages` method

```
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        ...
        new AndroidKeyboardAdjustPackage()
    );
}
```

## Example
```
import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';

AndroidKeyboardAdjust.setAdjustNothing();
AndroidKeyboardAdjust.setAdjustPan();
AndroidKeyboardAdjust.setAdjustResize();
AndroidKeyboardAdjust.setAdjustUnspecified();
AndroidKeyboardAdjust.setAlwaysVisible();
AndroidKeyboardAdjust.setAlwaysHidden();
AndroidKeyboardAdjust.setVisible();
AndroidKeyboardAdjust.setHidden();
AndroidKeyboardAdjust.setUnchanged();
```
npm package: @magic-change/react-native-baidu-asr-l
Description: Baidu ASR
Author: lovebing
Latest version: 0.1.12

# react-native-baidu-asr-l

基于百度语音识别的rn版

## Installation

```sh
npm install react-native-baidu-asr-l
```

## Usage

```js
import ReactNativeBdAsr, {EventMap, VoiceRecognitioWorkStatus} from 'react-native-baidu-asr-l';

ReactNativeBdAsr.initSDK("", "", "");


ReactNativeBdAsr.wakeup();
ReactNativeBdAsr.on(EventMap.voiceStatusChanged, this.vrsStatusChanged.bind(this))


ReactNativeBdAsr.start();
ReactNativeBdAsr.end();


vrsStatusChanged = (res) => {
    let {workStatus, data} = res;
    switch (workStatus) {
        case VoiceRecognitioWorkStatus.newRecordData: {
            break;
        }

        case VoiceRecognitioWorkStatus.startWorkIng: {
            break;
        }
        case VoiceRecognitioWorkStatus.start: {
            this.onStartWorking();
            break;
        }
        case VoiceRecognitioWorkStatus.end: {
            break;
        }
        case VoiceRecognitioWorkStatus.flushData: {
            let {results_recognition = ''} = data;
            this.setState({
                result: data.results_recognition + ''
            });
            break;
        }
        case VoiceRecognitioWorkStatus.finish: {
            let {results_recognition = ''} = data;
            this.setState({
                result: data.results_recognition + ''
            });
            this.onEnd();
            break;
        }
        case VoiceRecognitioWorkStatus.meterLevel: {
            // 音量大小

            break;
        }
        case VoiceRecognitioWorkStatus.cancel: {
            this.onEnd();
            break;
        }
        case VoiceRecognitioWorkStatus.error: {
            this.onEnd();
            break;
        }
        case VoiceRecognitioWorkStatus.loaded: {
            break;
        }
        case VoiceRecognitioWorkStatus.unLoaded: {
            break;
        }
        case VoiceRecognitioWorkStatus.chunkThirdData: {

            break;
        }
        case VoiceRecognitioWorkStatus.chunkNlu: {
            break;
        }
        case VoiceRecognitioWorkStatus.chunkEnd: {

            if (this.longSpeechFlag) this.onEnd();
            break;
        }
        case VoiceRecognitioWorkStatus.feedback: {

            break;
        }
        case VoiceRecognitioWorkStatus.recorderEnd: {

            break;
        }
        case VoiceRecognitioWorkStatus.longSpeechEnd: {

            this.onEnd();
            break;
        }
        default:
            break;
    }
}
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

## 版本升级
* 0.1.67 
  完善android 增加stopWakeup方法
* 0.1.6  
  完善iOS 唤醒词替换、增加stopWakeup方法
* 0.1.4  
  完善iOS 唤醒完善
* 0.1.3  
  完善iOS 唤醒方法
* 0.1.2  
  完善安卓支持
* 0.1.1  
  增加安卓支持
* 0.1.0  
  增加ios支持
npm package: @magic-change/react-native-msa
Description: react-native library for msa
Author: bashen1
Latest version: 4.2.1

# react-native-msa

[![npm version](https://badge.fury.io/js/react-native-msa.svg)](https://badge.fury.io/js/react-native-msa)

SDK Version 1.2.1

## 开始

`$ npm install react-native-msa --save`

如果react native 版本小于0.6X，还需要执行 `react-native link react-native-msa`

## 注意

将`supplierconfig.json`拷贝到项目`android/app/src/main/assets`目录下。（暂时不用修改，只需原样放到assets目录下即可，这个是给未来做准备的。如果想要使用VAID，可修改里边对应内容，特别是需要设置appid的部分，要去对应厂商的应用商店里注册自己的app，来获取对应appid。）

## 集成

打开项目中的 `MainApplication.java`

```java
public class MainApplication extends MultiDexApplication implements ReactApplication {

	....
	....
	....

	@Override
    public void onCreate() {
        super.onCreate();
        System.loadLibrary("msaoaidsec"); //加固版本在调用前必须载入SDK安全库,因为加载有延迟，推荐在application中调用loadLibrary方法
}
```

## 使用方法

|         方法        |   说明  |
| :-----------------: | :---: |
| initSDK | 初始化SDK |
| isSupport | 是否支持MSA |
| getOAID | 获取OAID |
| getVAID | 获取VAID |
| getAAID | 获取AAID |
| isLimit | 补充设备标识符开关 |
| addReceiveMsaIdsListener | 增加oaid、vaid等值获取到后的触发监听，会返回所有相关ID等，需在初始化initSDK之前调用 |
| removeListener | 移除addReceiveMsaIdsListener这个监听 |

`注意：`initSDK 成功后不要立马取值，可以延迟50～100毫秒再进行取值（可用addReceiveMsaIdsListener监听解决）

### initSDK 返回状态码（字符串）

- 1 初始化成功
- 0 cert为空
- -1 cert初始化失败，一般是证书字符串错误
- -2 未知错误
- 1008610 调用成功，获取接口是同步的
- 1008614 调用成功，获取接口是异步的
- 1008616 证书未初始化或证书无效
- 1008611 不支持的厂商
- 1008612 不支持的设备
- 1008613 加载配置文件出错
- 1008615 sdk 调用出错

详见examples目录