<style include="md-select">
.result-text {
white-space: pre-wrap;
word-wrap: break-word;
user-select: text;
outline: none;
/*One line high, to avoid resizing after first word is added.*/
min-height: 1lh;
}
:host([editing-enabled_]) .result-text {
cursor: text;
padding-bottom: 1lh;
}
@keyframes text-fade-in {
from { opacity: 0;}
to {opacity: 1;}
}
/* Each word fades in when streaming. */
#partialResultText span {
animation-name: text-fade-in;
animation-duration: 200ms;
animation-timing-function: linear;
}
</style>
<div id="root">
<div id="resultText" class="result-text"
hidden="[[textInput.streamingEnabled]]" contenteditable$="[[canEdit_()]]"
on-focusin="onFocusIn_" on-focusout="onFocusOut_"
aria-label="$i18n{resultText}"></div>
<div id="partialResultText" class="result-text"
hidden="[[!textInput.streamingEnabled]]"
contenteditable$="[[partialTextCanEdit_()]]" on-focusin="onFocusIn_"
on-focusout="onFocusOut_"
><template is="dom-repeat" items="[[displayedChunks_]]"
><span>[[item.text]]</span></template></div>
</div>