# ptcs-chip-container


## Overview

Chip container is the internal component used by filter widget. It presents the introduced filter options by an user in the form of chips.

## Usage Examples

### Basic Usage

#### Container whose chips are displayed mutliline.

    <ptcs-chip-data-filter-chip-container expanded></ptcs-chip-data-filter-chip-container>

#### Container whose chips are displayed in one line.

    <ptcs-chip-data-filter-chip-container></ptcs-chip-data-filter-chip-container>

#### Providing data to container
    var chipContainer = document.querySelector('ptcs-chip-data-filter-chip-container');
    chipContainer.data = [{
        content: 'animal:smallCat',
        error: true,
        id:    '2'
    }, {
        content: 'vehicle:car',
        id:    '3'
    },{
        content: 'device:smartphone',
        error: false,
        id:    '1'
    }];

#### Handling chip removing
    var chipContainer = document.querySelector('ptcs-chip-data-filter-chip-container');
    chipContainer.addEventListener('remove', event => {
        const triggerChip = event.composedPath()[0];
        const chipId = triggerChip.getAttribute('data-id');

        console.log('Id of a chip to be removed:', chipId);
    })

## Component API

### Properties
| Property | Type | Description | Triggers a changed event |
|----------|------|-------------|--------------------------|
| data | Array | Chips are drawn based on this. Every array element represents a single chip, i.e {content, error and id} | No |
| expanded | Boolean| When set, chips are displayed in one line, otherwise in multiline. Reflects the value to the corresponding attribute. | No |

### Events

| Name | Data | Description |
|------|------|-------------|
| remove | --- | Event generated by a chip child, go to its Events properties to get more details |

### Methods

No methods


## Styling

TBD

### State attributes

| Attribute | Description |
|-----------|-------------|
| expanded | See the corresponding description in the properties section|



# ptcs-chip-child


## Overview

Chip child represents a single filtering option. A group of chips is created by chip container.
The component can be color red what suggests that the corresponding filtering option was entered incorrectly. Then, the error message is displayed.

## Usage Examples

### Basic Usage

#### Component without the error message.
    <ptcs-chip-data-filter-chip-child data-id"2"></ptcs-chip-data-filter-chip-child>

#### Component with displayed the error message.
    <ptcs-chip-data-filter-chip-child  error data-id"2"></ptcs-chip-data-filter-chip-child>

#### Providing data to the component

    const chipChild = document.querySelector('ptcs-chip-data-filter-chip-child');
    chipChild.data = [{
        content: 'animal:smallCat',
        error: true,
        id:    '2'
    }, {
        content: 'vehicle:car',
        id:    '3'
    }];

## Component API

### Properties
| Property | Type | Description | Triggers a changed event |
|----------|------|-------------|--------------------------|
| content | String | Label to be displayed | No |
| error | Boolean | Chip is colored red if true, what means that the corresponding filtering option was entered incorrectly | No |

### Events

The component itself does not generate custom events. However its chip-childs may, see ptcs-chip-child for more details.


### Methods

No methods


## Styling

TBD

### State attributes

| Attribute | Description |
|-----------|-------------|
| error | See the corresponding description in the properties section |
| data-id | The ordinary id used by an event handler to recognize which chip was clicked |