# pip-webui2-behaviors

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

Latest version **2.0.0-rc.3** (published 2020-10-26) · MIT license · 0 weekly downloads

## Install

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

## 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.3 |
| Published | 2020-10-26 |
| First published | 2018-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 878 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | pipdevs |

## Links

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

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.11
- [mousetrap](https://npm.io/package/mousetrap.md) ^1.6.3
- [pip-webui2-themes](https://npm.io/package/pip-webui2-themes.md) ^1.1.24

## Recent versions

- 2.0.0-rc.3 (latest) — 2020-10-26
- 0.0.4 (ng5) — 2018-10-09
- 1.1.24 — 2020-10-26
- 2.0.0-rc.2 — 2020-10-01
- 2.0.0-rc.1 — 2020-09-30
- 1.1.23 — 2019-12-20
- 1.1.22 — 2019-12-10
- 1.1.20 — 2019-11-13
- 1.1.19 — 2019-09-23
- 1.1.18 — 2019-07-08
- 1.1.17 — 2019-06-13
- 1.1.16 — 2019-06-11
- 1.1.15 — 2019-05-27
- 1.1.14 — 2019-03-20
- 1.1.13 — 2019-03-20
- … 16 more at https://npm.io/package/pip-webui2-behaviors/versions

## README

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

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

**pip-webui2-behaviors** module contains behaviors that can be attached to existing controls or pages

### Focusable

**Allows to navigate over focusable controls using arrow keys**

**Using** 

To make the div orange by pressing arrow buttons

```html
<div pipFocused focusedColor="orange">
    <div class="pip-focusable">Focusable</>
    <div class="pip-focusable">Focusable</>
    <div class="pip-focusable">Focusable</>
    <div class="pip-focusable">Focusable</>
    <div class="pip-focusable">Focusable</>
</div>
```

**More generalized example on the image**

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


### Selectable

**Allows to navigate over non-focuseable elements using arrow keys**

**Using**

```html
<pip-selectable (selected)="selectedIndex = $event.index" [resolver]="customResolver" [index]="selectedIndex">
    <div pipSelectable>Selectable</>
    <div pipSelectable>Selectable</>
    <div pipSelectable>Selectable</>
    <div pipSelectable>Selectable</>
    <div pipSelectable>Selectable</>
</pip-selected>
```

**Example of selected component with using angular-material mat-nav-list on the image**

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

### Draggable

**Implements drag & drop functionality**

**Using**

Simple example of draggable component to swap containers.

Template:

```html
<div class="drag-scroll-test">
	<div *ngFor="let obj of content; let i = index"
		[scrollContainer]="'.drag-scroll-test'"
		pipDrop="true"
		pipDrag="true"
		(dropSuccess)="onDropSuccess($event, i)">
		<div>
			<p >{{ obj.name }}</p>
		</div>
	</div>
</div>
```

Handler: 

```typescript
onDropSuccess(event, index) {
    const otherObj = this.content[index];
    const otherIndex = this.content.indexOf(event.data);
    if (otherIndex === index || otherIndex === -1) return;

    this.content.splice(otherIndex, 1);
    if (index > otherIndex) this.content.splice(index, 0, event.data);
    else this.content.splice(index + 1, 0, event.data);
}
```

Styles: 

```css
[pipDrag] div {
    padding: 8px;
    box-sizing: border-box;
    transition: all .35s ease;
    height: 85px;
}

[pipDrag].pip-dragging {
    opacity: 0.95;
}

[pipDrag].pip-dragging div {
    height: 85px ;
}

[pipDrop] {
	position: relative;
}

[pipDrop] {
    transition: padding .35s ease;
}

[pipDrop].pip-drag-enter:not(.virtual) {
    padding-bottom: 85px !important;
}
```

**Result on the image**

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

### Infinite Scroll

**Allows to upload data in chunks while user is scrolling**

**Using**

Template:

```html
<div class="app-infinite-scroll pip-scroll" style="margin-left: 0px;">
    <div class="item-container" pipInfiniteScroll (onInfiniteScroll)="generateItems(10)" 
        scrollContainer="'.app-infinite-scroll'"
        scrollDistance="0.1">
        <div class="item" *ngFor="let item of items" >
            {{ item.name }}
        </div>
    </div>
</div>
```

Handler: 

```typescript
generateItems(count) {
    for (let i = 0; i < count; i++) {
      let item = {
        id: this._itemCount,
        name: 'Item ' + this._itemCount
      };
      this._itemCount++;

      this.items.push(item);
    }
};
```

## Installation

To install this module using npm:

```bash
npm install pip-webui2-behaviors --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-behaviors · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._