| <style include="print-preview-shared"> |
| :host { |
| /* Width = 3 digits + space + cr-input-padding-end/start */ |
| --cr-input-width: calc(4em + 16px); |
| } |
| |
| #sectionTitle { |
| align-self: baseline; |
| } |
| |
| cr-input { |
| margin-inline-end: 16px; |
| min-height: var(--print-preview-row-height); |
| overflow: hidden; |
| } |
| |
| .input-wrapper { |
| align-items: center; |
| display: flex; |
| } |
| |
| :host([input-valid]) cr-input { |
| --cr-input-error-display: none; |
| } |
| |
| span[slot=suffix] { |
| max-width: calc(100% - 5em); |
| min-height: var(--print-preview-row-height); |
| overflow: hidden; |
| word-wrap: break-word; |
| } |
| </style> |
| <print-preview-settings-section> |
| <span slot="title" id="sectionTitle">[[inputLabel]]</span> |
| <div slot="controls" id="controls"> |
| <span class="input-wrapper"> |
| <cr-input id="userValue" type="number" |
| max="[[maxValue]]" min="[[minValue]]" data-timeout-delay="250" |
| disabled$="[[getDisabled_(disabled)]]" on-keydown="onKeydown_" |
| on-blur="onBlur_" aria-label="[[inputAriaLabel]]" |
| error-message="[[errorMessage_]]" auto-validate> |
| <span slot="suffix"> |
| <slot name="opt-inside-content"></slot> |
| </span> |
| </cr-input> |
| </span> |
| </div> |
| </print-preview-settings-section> |
