# pip-webui2-documents

> ![](https://img.shields.io/badge/license-MIT-blue.svg)

Latest version **2.0.0-rc.1** (published 2020-11-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install pip-webui2-documents
pnpm add pip-webui2-documents
yarn add pip-webui2-documents
bun add pip-webui2-documents
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0-rc.1 |
| Published | 2020-11-11 |
| First published | 2018-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 367.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | pipdevs |

## Links

- npm: https://www.npmjs.com/package/pip-webui2-documents
- Repository: https://github.com/pip-webui2/pip-webui2-documents
- Homepage: https://github.com/pip-webui2/pip-webui2-documents#readme
- Issues: https://github.com/pip-webui2/pip-webui2-documents/issues
- npm.io page: https://npm.io/package/pip-webui2-documents

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [pip-webui2-themes](https://npm.io/package/pip-webui2-themes.md) ^2.0.0-rc.3
- [@ngx-translate/core](https://npm.io/package/@ngx-translate/core.md) ^13.0.0
- [pip-webui2-behaviors](https://npm.io/package/pip-webui2-behaviors.md) ^2.0.0-rc.3

## Recent versions

- 2.0.0-rc.1 (latest) — 2020-11-11
- 1.1.5 — 2019-12-20
- 1.1.4 — 2019-12-10
- 1.1.3 — 2019-11-14
- 1.1.2 — 2019-01-22
- 1.1.1 — 2018-12-05
- 1.1.0 — 2018-11-22
- 1.0.0 — 2018-10-09
- 0.0.0 — 2018-01-09

## README

# <img src="https://github.com/pip-webui/pip-webui/raw/master/doc/Logo.png" alt="Pip.WebUI Logo" style="max-width:30%"> <br/> Document attachment controls

![](https://img.shields.io/badge/license-MIT-blue.svg)

Electronic documents are used a lot in enterprise. Ability to attach documents to any item in application is a great feature that can enhance user experience. 
Pip.WebUI.Documents module contains two controls to add/remove and visualize document attachments.

### Document list view

**Control shows a list of attached documents. It allows users to download the document by clicking on it**

**Using**

Template:
```html
<pip-document-list [documents]="docs"></pip-document-list>
```
Initialized data:
```typescript
docs = [
    {
        url: './assets/boy.png'
    },
    {
        url: './assets/girl.png'
    },
    {
        url: './assets/girl2.png'
    },
    {
        url: './assets/boy2.png'
    }
];
```

**Example on the image (all states)**

<a href="https://github.com/pip-webui2/pip-webui2-documents/raw/master/doc/images/document.png" style="display: block; text-align: center;">
    <img style="max-width: 300px" src="https://github.com/pip-webui2/pip-webui2-documents/raw/master/doc/images/document.png"/>
</a>

### Document list edit

**Control allows to attach files or remove them from the document list**

**Using**

Template:
```html
<pip-document-list-edit [documents]="docs" [disabled]="disabled" (onUpdateDocuments)="updateDocuments($event)"></pip-document-list-edit>
```
Initialized data:
```typescript
docs = [
    {
        url: './assets/boy.png'
    },
    {
        url: './assets/girl.png'
    },
    {
        url: './assets/girl2.png'
    },
    {
        url: './assets/boy2.png'
    }
];
```

**Example on the image**

<a href="https://github.com/pip-webui2/pip-webui2-documents/raw/master/doc/images/document-edit.png" style="display: block; text-align: center;">
    <img style="max-width: 300px" src="https://github.com/pip-webui2/pip-webui2-documents/raw/master/doc/images/document-edit.png"/>
</a>

## Installation

To install this module using npm:

```bash
npm install pip-webui2-documents --save
```

## <a name="license"></a>License

This module is released under [MIT license](License) and totally free for commercial and non-commercial use.

---
_Source: https://npm.io/package/pip-webui2-documents · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._