@panoramax/web-viewer/docs/reference/components/ui/QualityScore.md

Panoramax web viewer for geolocated pictures

<a name="Panoramax.components.ui.QualityScore"></a>

## Panoramax.components.ui.QualityScore ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
**Kind**: static class of <code>Panoramax.components.ui</code>  
**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
**Emits**: [<code>change</code>](#Panoramax.components.ui.QualityScore+event_change)  
**Element**: pnx-quality-score  

* [.QualityScore](#Panoramax.components.ui.QualityScore) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
    * [new QualityScore()](#new_Panoramax.components.ui.QualityScore_new)
    * [.properties](#Panoramax.components.ui.QualityScore+properties) : <code>Object</code>
    * ["change"](#Panoramax.components.ui.QualityScore+event_change)

<a name="new_Panoramax.components.ui.QualityScore_new"></a>

### new QualityScore()
Quality Score element displays the picture quality grade.

**Example**  
```html
<!-- Read-only -->
<pnx-quality-score grade="5" ._t=${viewer._t} />

<!-- Input -->
<pnx-quality-score grade="5" input="pnx-qs-input" @change=${() => alert('changed')} ._t=${viewer._t} />
```
<a name="Panoramax.components.ui.QualityScore+properties"></a>

### qualityScore.properties : <code>Object</code>
Component properties.

**Kind**: instance property of [<code>QualityScore</code>](#Panoramax.components.ui.QualityScore)  
**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| [grade] | <code>number</code> \| <code>string</code> | <code>0</code> | The grade (5=A, 1=E, 0=none selected), or a list of grades |
| [input] | <code>string</code> | <code>false</code> | If set, score is an input and value is used as ID prefix |

<a name="Panoramax.components.ui.QualityScore+event_change"></a>

### "change"
Event for grade change

**Kind**: event emitted by [<code>QualityScore</code>](#Panoramax.components.ui.QualityScore)