InputText

An InputText is a user interface control element that allows users to input text.

Playground

Live Editor

<ProvenanceInputText 
  id="jsx-provenance-inputtext"
  value=""
  freeze={false}
  visualize={true}
  provenanceChange={console.log} // hardcoded
  valueChange={console.log} // hardcoded
/>

Result

Loading...

info

The above example uses React JSX and Web Components. See corresponding (static) examples for Angular and Web Components below.

inputtext.component.ts

import { Component } from '@angular/core';
import type { InputTextProvenance } from 'provenance-widgets';

@Component({
  selector: 'inputtext-root',
  templateUrl: './inputtext.component.html',
  styleUrls: ['./inputtext.component.css']
})
export class InputTextComponent {
  value = '';
  freeze = false;
  visualize = true;
  provenance?: InputTextProvenance = undefined;
  provenanceChange(event) {
    console.log('Provenance value: ', event.detail);
    provenance = event.detail;
  }
  valueChange(event) {
    console.log('Value: ', event.detail);
    value = event.detail;
  }
}

inputtext.component.html

<provenance-inputtext 
  id="angular-provenance-inputtext"
  [value]="value"
  [freeze]="freeze"
  [visualize]="visualize"
  (provenanceChange)="provenanceChange($event)"
  (valueChange)="valueChange($event)"
/>
<!-- two-way binding is also supported:
    [(value)]="value"
    [(provenance)]="provenance"
-->

slider.webcomponent.ts

import type { NgElement, WithProperties } from "@angular/elements";
import type { InputTextProvenance } from "provenance-widgets";

// Create a new instance of the InputTextComponent
const inputtext = document.createElement('web-provenance-inputtext') as NgElement & WithProperties<InputTextProvenance>;

// Set properties
inputtext.value = '';
inputtext.freeze = false;
inputtext.visualize = true;
inputtext.addEventListener('provenanceChange', (event) => {
  console.log('Provenance value: ', event.detail);
});

inputtext.addEventListener('valueChange', (event) => {
  console.log('Value: ', event.detail);
});

// Append it to the DOM
document.body.appendChild(inputtext);

API

warning

The InputText component extends the PrimeNG AutoComplete component, but completely overrides the default behavior, with no provisions to interact with the underlying AutoComplete component. The InputText component only supports the following properties and events, and does not support any other properties or events from the AutoComplete component.

Angular Selector	provenance-inputtext
Web Component Tag	web-provenance-inputtext

Name	Type	Default	Required	Description
id	string	""	Yes	Unique identifier for the element. Used by ProvenanceWidgets for internal state management and visualizations.
value	any	undefined	No	Value of the input field. Two-way binding is supported. NOTE: the value can be an object too - see AutoComplete Objects.
freeze	boolean	false	No	Whether to freeze the provenance. If true, the widget will not record any provenance, and interactions will not create/update any visualizations. NOTE: The widget does not update when the property is changed.
visualize	boolean	true	No	Whether to visualize the provenance. NOTE: The widget does not update when the property is changed.
provenance	InputTextProvenance	undefined	No	The provenance of interactions recorded by the widget. Use this property to persist, restore, modify, or reconstruct the provenance of interactions for the widget. To override the provenance, revalidate must be set to true. Two-way binding is supported.

Events

Name	EventEmitter<T>	Description
valueChange	any	Emits the updated value when the input field value changes.
provenanceChange	<InputTextProvenance>	Emits the provenance when the input field value changes.