# ptcs-property-display

## Overview

The ptcs-property-display displays a set of values. It uses the ptcs-value-display component as a "black box" to do the actual display.

## Usage Examples

To use the component, add a <ptcs-propert-display> element:

~~~html     
<ptcs-property-display
  items="..."
  vertical-mode="..."
  value-display-width="..."
  value-display-height="..."
  property-display-label="..."
  hide-property-display-label="..."
  property-display-label-type="..."
  hide-group-titles="..."
  group-label-type="..."
  group-label-alignment="..."
  multiline="..."
  selector-group-title="..."
  selector-group-items="..."
  selector-item-key="..."
  selector-item-value="..."
  selector-item-meta="..."></ptcs-property-display>
~~~    

## Component API

### Properties
|Property|Type|Description|
|--------|----|-----------|
|items|Array|Input data|
|selectorGroupTitle|String|In the "main" data array, what is the name of the entry containing the Group Title?|
|selectorGroupItems|String|In the "main" data array, what is the name of the entry containing data for the Group?|
|selectorItemKey|String|In a "value" entry in the Group array, what is the name of the "key"?|
|selectorItemValue|String|In a "value" entry in the Group array, what is the name of the "value"?|
|selectorItemMeta|String|In a "value" entry in the Group array, what is the name of the value "metadata (type, etc)"?|
|verticalMode|Boolean|Should the items be displayed in one single vertical list?|
|propertyDisplayLabel|String|"Main" title for the widget|
|hidePropertyDisplayLabel|Boolean|Should the "main" title be hidden?|
|propertyDisplayLabelType|String|The variant to use for the "main" label|
|propertyDisplayLabelAlignment|String|Alignment (Left/Center/Right) for the "main" label|
|hideGroupTitles|Boolean|Should the group titles be hidden?|
|groupLabelType|String|The variant to use for the group labels|
|groupLabelAlignment|String|Alignment (Left/Center/Right) for the group labels|
|valueDisplayWidth|Number|Width of each value, passed on to the value display|
|valueDisplayHeight|Number|Width of each value, passed on to the value display|

### Events

_No events_

### Methods

_No methods_


## Styling

### Parts

The property-display has follwing parts:

| Part | Description |
|------|-------------|
|property-display-root|Root div of entire component|
|property-display-label|ptcs-label with the "main" title|
|property-container|Container of all properties|
|property-group-label|ptcs-label for a group title|
|property-group-container|Data/Values for a group|
|value-display-item|A ptcs-value-display instance|

### State attributes

_No state_

