# ox-select

Latest version **0.5.19** (published 2018-01-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install ox-select
pnpm add ox-select
yarn add ox-select
bun add ox-select
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.19 |
| Published | 2018-01-01 |
| First published | 2017-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Known vulnerabilities | 0 (+24 in 4 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ozonix |

## Links

- npm: https://www.npmjs.com/package/ox-select
- Repository: https://github.com/Ozonix/ox-select
- Homepage: https://github.com/Ozonix/ox-select#readme
- Issues: https://github.com/Ozonix/ox-select/issues
- npm.io page: https://npm.io/package/ox-select

## Dependencies (15)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.2
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.14
- [es6-shim](https://npm.io/package/es6-shim.md) ^0.35.3
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^5.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^5.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^5.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^5.0.0
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) ^0.1.10
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^5.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^5.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^5.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^5.0.0

## Recent versions

- 0.5.19 (latest) — 2018-01-01
- 0.5.18 — 2018-01-01
- 0.5.17 — 2017-12-31
- 0.5.16 — 2017-12-31
- 0.5.15 — 2017-12-31
- 0.5.14 — 2017-12-31
- 0.5.13 — 2017-12-31
- 0.5.12 — 2017-12-31
- 0.5.11 — 2017-12-30
- 0.5.10 — 2017-12-30
- 0.5.9 — 2017-12-30
- 0.5.8 — 2017-12-29
- 0.5.7 — 2017-12-29
- 0.5.6 — 2017-12-29
- 0.5.5 — 2017-12-29
- … 5 more at https://npm.io/package/ox-select/versions

## README

# ox-select. Smart select for Angular 4+


> Custom multiselect with filter for ReactiveForms and simple using
>
> Кастомный мультиселект с фильтром для реактивных форм и обычного использования


![alt text](src/assets/select_1.jpg)

![alt text](src/assets/select_2.jpg)

## Install/Установка

```
npm install ox-select
```

**For icons install font-awesome or ionic icons pack**  
**Для работы иконок установите font-awesome или ionic пакеты**  

```
npm install font-awesome --save

...//angular-cli.json
"apps": [
          {
             "root": "src",
             "outDir": "dist",
             ....
             "styles": [
                "styles.css",
                "../node_modules/font-awesome/css/font-awesome.css"
             ],
             ...
         }
       ]

],
...
```

## Using/Использование

import module where will you use select:  
Добавьте модуль в ваш проект, там где будете использовать select:  

```
import { OxSelectModule } from 'ox-select';

...

@NgModule({
  imports: [
    
    ...
    OxSelectModule
  ],

...
```

> If you have error:
> Если имеется ошибка:
> > Module not found: Error...
> add link to index.ts file of OxSelectModule
> Добавьте ссылку до index.ts файла модуля OxSelectModule


```//tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "include": [
    "src/**/*",
    "node_modules/ox-select/index.ts"
  ]
}
```

Add tag <ox-select> with any attributs your need into html-template (all attributes not required)  
Добавьте тэг <ox-select> с любыми требуемыми для Вас аттрибутами (все атрибуты необязательные)  


```
  <ox-select
    [filterSelect]="true"
    [filterTitle]="'Search in list'"
    [multySelect]="true"
    [inputData]="items"
    [defaultData]="'No Items'"
    [headerTitle]="'Select any items'"
    [headerIcon]="'fa fa-thumbs-o-up'"
    [styleSelect]="{
      margin: '0px 10px',
      width: 'calc(100% - 20px)'
    }"
    (outputData)=select($event, 'select-items')>
  </ox-select>

  or/или

  <ox-select
    [inputData]="[
        {
            input: 'check 1',
            output: 1,
            icon: 'fa fa-user-plus'
        },
        {
            input: 'check 2',
            output: 2,
            alter: [
                key: 'description',
                value: 'not check it!'
            ]
        },
        {
            input: 'check 3',
            output: 3,
            selected: true
        },
        {
            input: 'check 4'
            output: 4,
            disabled: true
        }
    ]"
    (outputData)=select($event, 'check-item')>
  </ox-select>

```


-alter attr-  
**filterSelect** - add filter for searching / Добавляет поле с поиском  
**filterTitle** - text of filter / текст фильтра   
**multySelect** - switch on multiselect mode / Включает режим с множественным выбором  
**defaultData** - text when haven't options / Текст когда нет опций  
**headerTitle** - text when have no selected options yet / Текст когда еще ничего не выбрано из списка опций  
**headerIcon** - icon before headerTitle / иконка перед headerTitle  
**styleSelect** - use like ngStyle for box of select / работает как ngStyle для вьюхи select  

-main attr-  
**inputData** - input data :) / Входящие данные  
**outputData** - output data / Выходящие данные  

Input data must be array of object by next style:  
Входящие данные должны быть массивом объектов следующего вида:  

```
this.method.selectUsers().subscribe(
    res => {
        this.items = res.map((select: any)=>{
            return {
                input: select.name,
                output: select.id,
                icon: 'fa fa-user-o',
                disabled: select._id == '5a46d2e0b0578201407595bb',
                selected: select._id == '5a46d2e0b0578201407595bd',
                alter: [
                    {
                    key: 'id',
                    value: select.id
                    }
                ]
            }
        });
    }, 
    error => {
        console.log(error);
    }
);

```

where / где:  

-required/обязательные-  

**input** - like `<option>Input</option> `/ как `<option>Input</option>`  
**output** - like value in `<option value="output">` / как value в `<option value="output">`  

-additional/дополнительные-  

**icon** - icon before input's text / иконка перед текстом input  
**disabled** - like `<option disabled>` / как `<option disabled>`   
**selected** - like `<option selected>` / как `<option selected>`   
**alter** - one of more descriptions / одно или более описаний:  

```
...
alter: [
    {
        key: 'id',
        value: user.id
    },
    {
        key: 'created',
        value: user.created
    },
    {
        key: 'age',
        value: user.age
    }
]
...
```

Output data listen event of select and call shown method where $event is array  
Выходные данные прослушиваются в outputData и вызывают указанный метод где $event - это массив   

example/ к примеру:  

```
private form: FormGroup = this.fb.group({
    'check-item': '',
    'select-items': ''
});

private select(data, name) {
    this.form.get(name).setValue(data);
}

```

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