| <style include="md-select"> |
| .result-text { |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| user-select: text; |
| outline: none; |
| cursor: text; |
| padding-bottom: 1lh; |
| /*One line high, to avoid resizing after first word is added.*/ |
| min-height: 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="plaintext-only" |
| 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> |