# @orcden/od-modal

> OrcDen Modal Component

Latest version **3.1.0** (published 2020-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @orcden/od-modal
pnpm add @orcden/od-modal
yarn add @orcden/od-modal
bun add @orcden/od-modal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2020-11-19 |
| First published | 2018-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 24.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mackw1990 |
| Keywords | orcden, modal, alert |

## Links

- npm: https://www.npmjs.com/package/@orcden/od-modal
- Repository: https://bitbucket.org/OrcDen/od-modal
- Homepage: https://bitbucket.org/OrcDen/od-modal#readme
- npm.io page: https://npm.io/package/@orcden/od-modal

## Dependencies (2)

- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.7
- [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^2.4.1

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 3.1.0 (latest) — 2020-11-19
- 3.0.4 — 2020-11-11
- 3.0.3 — 2020-11-09
- 3.0.2 — 2020-11-09
- 3.0.1 — 2020-11-09
- 3.0.0 — 2020-10-28
- 2.0.1 — 2018-11-11
- 2.0.0 — 2018-11-06

## README

# <od-modal>

> A set of modals to display information to the user

`<od-modal>` is a simple component that can be given custom content. Can either hijack the user experience or not.
`<od-modal-alert>` is a simple component that can be given custom content. It will hijack the user experience until the ok button is clicked.
`<od-modal-confirm>` is a simple component that can be given custom message content. It will hijack the user experience until the ok button is clicked and return the users decision.

## Installation
- Install with [npm](https://www.npmjs.com/)

```
npm i @orcden/od-modal
```
## Usage
```
import '@orcden/od-modal';
```
```
<od-modal id="modal" scoped><p>Test</p></od-modal>
<od-modal-alert id="alert" scoped><p>Test 2</p></od-modal-alert>
<od-modal-confirm id="confirm" scoped><p>Test 3</p></od-modal-confirm>

document.querySelector( "#alert" ).alert( 'This is an alert' ); //displays the alert
document.querySelector( "#confirm" ).confirm( 'This is a confirm' ); //displays the confirm
```
    
## Attributes
| Attribute | Type | Default | Description                                                                             |
|-----------|---------|---------|-----------------------------------------------------------------------------------------|
| `scoped`  | Boolean  | false    | Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)  |
| `active`  | Boolean | false   | Controls CSS to show/hide the modal. |
| `hijack`  | Boolean | false   | Can be set to hijack the user experience until stated otherwise in JS. This is always true in alerts and confirms |

## Properties
### OD-Modal
| Attribute | Type | Default | Description                                                                             |
|-----------|---------|---------|-----------------------------------------------------------------------------------------|
| `scoped`  | Boolean  | false    | Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)  |
| `active`  | Boolean | false   | Controls CSS to show/hide the modal. |
| `hijack`  | Boolean | false   | Can be set to hijack the user experience until stated otherwise in JS. |

### OD-Modal-Alert & OD-Modal-Confirm
| Attribute | Type | Default | Description                                                                             |
|-----------|---------|---------|-----------------------------------------------------------------------------------------|
| `scoped`  | Boolean  | false    | Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)  |
| `active`  | Boolean | false   | Controls CSS to show/hide the modal. |
| `message`  | String | ''   | Can be used to set the displayed message of the modal |

## Functions
### OD-Modal
| Name | Parameters | Description                                  |
|-----------|------|-----------------------------------------------|
| `toggleModal`   | None | Toggles the modal on and off |

### OD-Modal-Alert
| Name | Parameters | Description                                  |
|-----------|------|-----------------------------------------------|
| `toggleAlert`   | None | Toggles the alert on and off |
| `alert`   | message | Async. Displays the alert and waits for the user input. Displays the given string to the user |

### OD-Modal-Confirm
| Name | Parameters | Description                                  |
|-----------|------|-----------------------------------------------|
| `toggleConfirm`   | None | Toggles the alert on and off |
| `confirm`   | message | Async. Displays the confirm and waits for the user input. Displays the given string to the user. Returns the Users input choice |

## Styling
- CSS variables are available to alter the default styling provided

| Shadow Parts     | Description           |
|------------------|-----------------------|
| modal           | The inner div used for the modal |
| content-box     | On alerts and confirms this is the div that holds the buttons and message |
| mesage          | On alerts and confirms this is the div that holds the text message |
| buttons-container | On alerts and confirms this is the div that holds the buttons |
| confirm-button | On alerts and confirms this is the OK button |
| confirm-button | On confirms this is the CANCEL button |

## Development
### Run development server and show demo

```
npm run demo
```

### Run linter

```
npm run lint
```

### Fix linter errors

```
npm run fix
```

### Run tests

```
npm run test
```

### Build for production

```
npm run build
```

---
_Source: https://npm.io/package/@orcden/od-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._