| <style include="device-emulator-shared-styles iron-flex iron-flex-alignment | |
| iron-positioning md-select"> | |
| cr-input { | |
| --cr-input-error-display: none; | |
| margin-bottom: var(--cr-form-field-bottom-spacing); | |
| } | |
| </style> | |
| <div class="layout vertical"> | |
| <div class="element-label"> | |
| <cr-icon-button iron-icon="device-emulator:battery-charging-full"> | |
| </cr-icon-button> | |
| Power | |
| </div> | |
| <label> | |
| <span class="form-label">Battery state</span> | |
| <cr-radio-group selected="{{batteryState}}"> | |
| <template is="dom-repeat" items="[[batteryStateOptions]]"> | |
| <cr-radio-button name="[[item]]">[[item]]</cr-radio-button> | |
| </template> | |
| </cr-radio-group> | |
| </label> | |
| <iron-collapse opened="[[isBatteryPresent(batteryState)]]"> | |
| <div class="layout vertical"> | |
| <cr-input label="Battery percentage" value="[[batteryPercent]]" | |
| on-change="onBatteryPercentChange" type="number"> | |
| </cr-input> | |
| <cr-input label="Seconds until empty" value="[[timeUntilEmpty]]" | |
| on-change="onTimeUntilEmptyChange" type="number"> | |
| </cr-input> | |
| <cr-input label="Seconds until full" value="[[timeUntilFull]]" | |
| on-change="onTimeUntilFullChange" type="number"> | |
| </cr-input> | |
| </div> | |
| </iron-collapse> | |
| <table class="devices-table"> | |
| <tbody> | |
| <tr class="table-section-header"> | |
| <td>Power sources</td> | |
| <td class="centered-cell-label">Connected</td> | |
| <td class="centered-cell-label">Role</td> | |
| <td class="centered-cell-label">Amps</td> | |
| </tr> | |
| <template is="dom-repeat" items="{{powerSourceOptions}}"> | |
| <tr> | |
| <td class="alias-cell">[[item.name]]</td> | |
| <td class="control-cell"> | |
| <cr-checkbox checked="{{item.connected}}"></cr-checkbox> | |
| </td> | |
| <td class="control-cell"> | |
| <cr-button on-click="onSetAsSourceClick" | |
| class$="[[cssClassForSetAsSource_(item, | |
| selectedPowerSourceId)]]" | |
| hidden$="[[!isDualRole(item)]]" | |
| disabled="[[!canBecomeSource( | |
| item, selectedPowerSourceId, powerSourceOptions.*)]]"> | |
| Set as source | |
| </cr-button> | |
| <div hidden$="[[isDualRole(item)]]">Source</div> | |
| </td> | |
| <td class="control-cell"> | |
| <select class="md-select" disabled$="[[!item.variablePower]]" | |
| on-change="onPowerChanged" value="[[item.power]]"> | |
| <option value="high">High</option> | |
| <option value="low">Low</option> | |
| </select> | |
| </td> | |
| </template> | |
| </tbody> | |
| </table> | |
| </div> |