## Panoramax.components.ui.SemanticsEditor ⇐ [lit.LitElement](https://lit.dev/docs/api/LitElement/) **Kind**: static class of Panoramax.components.ui **Extends**: [lit.LitElement](https://lit.dev/docs/api/LitElement/) **Emits**: [change](#Panoramax.components.ui.SemanticsEditor+event_change) **Element**: pnx-semantics-editor * [.SemanticsEditor](#Panoramax.components.ui.SemanticsEditor) ⇐ [lit.LitElement](https://lit.dev/docs/api/LitElement/) * [new SemanticsEditor()](#new_Panoramax.components.ui.SemanticsEditor_new) * [.properties](#Panoramax.components.ui.SemanticsEditor+properties) : Object * [.getDiff()](#Panoramax.components.ui.SemanticsEditor+getDiff) ⇒ Array.<object> * [.checkValidity()](#Panoramax.components.ui.SemanticsEditor+checkValidity) ⇒ boolean * [.reportValidity()](#Panoramax.components.ui.SemanticsEditor+reportValidity) * [.reset([baseSemantics])](#Panoramax.components.ui.SemanticsEditor+reset) * ["change"](#Panoramax.components.ui.SemanticsEditor+event_change) ### new SemanticsEditor() Semantics Editor offer an easy-to-use input for adding or editing semantics tags. It manipulates list of `{key: "mypanokey", value: "myvalue"}` entries through `semantics` attribute. **Example** ```html console.log(e.detail.semantics)} /> ``` ### semanticsEditor.properties : Object Component properties. **Kind**: instance property of [SemanticsEditor](#Panoramax.components.ui.SemanticsEditor) **Properties** | Name | Type | Default | Description | | --- | --- | --- | --- | | [semantics] | object | | The `semantics` field of a picture or annotation feature. It is updated when field changes, but reflect the whole list of new tags (not delta needed by API). If you want delta, please use getDiff function. | | [rows] | number | 3 | The amount of rows shown for textarea | ### semanticsEditor.getDiff() ⇒ Array.<object> Get current delta between initial tags and user changes. **Kind**: instance method of [SemanticsEditor](#Panoramax.components.ui.SemanticsEditor) **Returns**: Array.<object> - The list of tag changes (in API format) ### semanticsEditor.checkValidity() ⇒ boolean Check if input is having a valid value. **Kind**: instance method of [SemanticsEditor](#Panoramax.components.ui.SemanticsEditor) **Returns**: boolean - True if it's valid ### semanticsEditor.reportValidity() Force display of invalid input **Kind**: instance method of [SemanticsEditor](#Panoramax.components.ui.SemanticsEditor) ### semanticsEditor.reset([baseSemantics]) Forces Editor to goes back to its empty, initial state. **Kind**: instance method of [SemanticsEditor](#Panoramax.components.ui.SemanticsEditor) | Param | Type | Default | Description | | --- | --- | --- | --- | | [baseSemantics] | object | | Initial existing semantics you want to show in editor. This is useful for getting a diff of only new semantic entries. Leave empty if no tags pre-exist. | ### "change" Event for value change. Note that this event is launched only on valid input. **Kind**: event emitted by [SemanticsEditor](#Panoramax.components.ui.SemanticsEditor) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.semantics | Array.<object> | The new tags list (in API semantics property format) | | detail.delta | Array.<object> | The delta between old and current tags (expected by API) |