| <style include="iron-positioning"> |
| :host([expanded_]) #pageBody { |
| transition-duration: 200ms; |
| } |
| :host(:not([expanded_])) #pageBody { |
| transition-duration: 150ms; |
| } |
| |
| :host([expanded_]) #esimQrCodeDetection { |
| height: 190px; |
| transition-duration: 200ms; |
| } |
| :host(:not([expanded_])) #esimQrCodeDetection { |
| height: 120px; |
| transition-duration: 150ms; |
| } |
| |
| :host cr-button { |
| --ripple-opacity: 0; |
| } |
| |
| #esimQrCodeDetection { |
| background-color: var(--cros-bg-color-dropped-elevation-1); |
| border-radius: 8px; |
| margin: 28px 0 16px 0; |
| overflow: hidden; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| paper-spinner-lite { |
| height: 20px; |
| margin-inline-end: 6px; |
| margin-top: 6px; |
| width: 20px; |
| } |
| |
| cr-button:not(:focus) { |
| border: none; |
| box-shadow: none; |
| } |
| |
| cr-button:hover { |
| background-color: transparent; |
| } |
| |
| cr-button[disabled] { |
| background-color: transparent; |
| } |
| |
| cr-button[disabled] > iron-icon { |
| --iron-icon-fill-color: var(--cros-icon-color-disabled); |
| } |
| |
| .animate { |
| transition-property: height; |
| transition-timing-function: cubic-bezier(0.00, 0.00, 0.20, 1.00); |
| } |
| |
| .label { |
| font-weight: 500; |
| } |
| |
| .button-image { |
| margin-inline-end: 8px; |
| } |
| |
| .scan-finish-image { |
| position: absolute; |
| } |
| |
| .scan-finish-message { |
| padding-inline-end: 0; |
| padding-inline-start: 30px; |
| } |
| |
| .scan-finish-message:hover { |
| cursor: default; |
| } |
| |
| .scan-error-header { |
| --iron-icon-fill-color: var(--cros-icon-color-alert); |
| } |
| |
| .scan-error-message { |
| color: var(--cros-text-color-alert); |
| } |
| |
| .blue-icon { |
| --iron-icon-fill-color: var(--cros-icon-color-prominent); |
| } |
| |
| .hidden { |
| visibility: hidden; |
| } |
| |
| .visually-hidden { |
| clip: rect(0 0 0 0); |
| clip-path: inset(50%); |
| height: 1px; |
| overflow: hidden; |
| position: absolute; |
| white-space: nowrap; |
| width: 1px; |
| } |
| |
| #activationCode { |
| --cr-input-border-radius: 8px; |
| --cr-input-border-bottom: none; |
| } |
| |
| #scanSucessHeader { |
| --iron-icon-fill-color: var(--cros-icon-color-positive); |
| margin-bottom: 8px; |
| } |
| |
| #scanSuccessMessage { |
| color: var(--cros-text-color-positive); |
| font-size: medium; |
| } |
| |
| #scanFailureHeader { |
| margin-bottom: 4px; |
| } |
| |
| #useCameraAgainButton { |
| display: block; |
| font-weight: 500; |
| text-align: center; |
| } |
| |
| #tryAgainButton { |
| display: block; |
| text-align: center; |
| } |
| |
| #switchCameraButton { |
| background-color: var(--cros-tooltip-background-color); |
| border-radius: 16px; |
| color: var(--cros-tooltip-label-color); |
| margin: 8px; |
| padding: 8px; |
| position: absolute; |
| right: 0; |
| z-index: 2; |
| } |
| |
| #switchCameraButton iron-icon { |
| --iron-icon-fill-color: var(--cros-tooltip-icon-color); |
| filter: brightness(2.1); |
| } |
| |
| #inputSubtitle { |
| bottom: 0; |
| color: var(--cros-text-color-secondary); |
| font-size: var(--cr-form-field-label-font-size); |
| letter-spacing: .4px; |
| line-height: var(--cr-form-field-label-line-height); |
| margin-top: -8px; |
| } |
| |
| #video { |
| height: inherit; |
| transform: rotateY(180deg); |
| } |
| |
| #pageBody { |
| margin-top: -20px; |
| } |
| |
| #startScanningButton { |
| max-width: 470px; |
| min-width: 345px; |
| text-align: center; |
| width: auto; |
| } |
| |
| #carrierLockWarningContainer { |
| color: var(--cros-text-color-alert); |
| display: flex; |
| margin-bottom: 24px; |
| margin-top: 20px; |
| } |
| |
| #carrierLockWarningIcon { |
| --iron-icon-fill-color: var(--cros-icon-color-alert); |
| --iron-icon-height: 24px; |
| --iron-icon-width: 24px; |
| margin-inline-end: 4px; |
| } |
| </style> |
| <base-page> |
| <div slot="page-body" id="pageBody" class="animate"> |
| <span id="description" aria-live="polite"> |
| [[getDescription_(cameraCount_, qrCodeDetector_, showNoProfilesFound)]] |
| </span> |
| <template is="dom-if" |
| if="[[shouldShowCarrierLockWarning_(isDeviceCarrierLocked_)]]" restamp> |
| <div id="carrierLockWarningContainer" aria-live="polite" role="alert"> |
| <iron-icon id="carrierLockWarningIcon" icon="cellular-setup:warning"> |
| </iron-icon> |
| [[i18n('eSimCarrierLockedDevice')]] |
| </div> |
| </template> |
| <template is="dom-if" |
| if="[[isScanningAvailable_(cameraCount_, qrCodeDetector_.*)]]" restamp> |
| <div id="esimQrCodeDetection" class="animate"> |
| <cr-button id="switchCameraButton" |
| on-click="onSwitchCameraButtonPressed_" |
| hidden$="[[isUiElementHidden_(UiElement.SWITCH_CAMERA, state_, cameraCount_)]]" |
| disabled="[[isUiElementDisabled_(UiElement.SWITCH_CAMERA, state_)]]"> |
| <iron-icon class="button-image" icon="cellular-setup:switch-camera"></iron-icon> |
| [[i18n('switchCamera')]] |
| </cr-button> |
| <video id="video" autoplay muted |
| hidden$="[[isUiElementHidden_(UiElement.VIDEO, state_)]]"> |
| </video> |
| <template is="dom-if" if="[[qrCodeCameraA11yString_]]" restamp> |
| <div class="visually-hidden" aria-live="polite"> |
| [[qrCodeCameraA11yString_]] |
| </div> |
| </template> |
| <div class="center blue-icon" id="startScanningContainer" |
| hidden$="[[isUiElementHidden_(UiElement.START_SCANNING, state_)]]"> |
| <cr-button class="label" |
| id="startScanningButton" |
| on-click="startScanning_" |
| disabled="[[isUiElementDisabled_(UiElement.START_SCANNING, state_)]]"> |
| <iron-icon class="button-image" icon="cellular-setup:camera"></iron-icon> |
| [[i18n('useCamera')]] |
| </cr-button> |
| </div> |
| <div class="center" id="scanFinishContainer" |
| hidden$="[[isUiElementHidden_(UiElement.SCAN_FINISH, state_)]]"> |
| <div> |
| <div id="scanSuccessContainer" |
| hidden$="[[isUiElementHidden_(UiElement.SCAN_SUCCESS, state_)]]"> |
| <div id=scanSucessHeader |
| hidden$="[[isUiElementHidden_(UiElement.CODE_DETECTED, state_)]]"> |
| <iron-icon class="scan-finish-image" icon="cellular-setup:checked"></iron-icon> |
| <span class="label scan-finish-message" id="scanSuccessMessage"> |
| [[i18n('scanQRCodeSuccess')]] |
| </span> |
| </div> |
| <div id="scanInstallFailureHeader" class="scan-error-header" |
| hidden$="[[isUiElementHidden_(UiElement.SCAN_INSTALL_FAILURE, state_)]]"> |
| <iron-icon class="scan-finish-image" icon="cellular-setup:error"></iron-icon> |
| <span class="label scan-finish-message scan-error-message"> |
| [[i18n('scanQrCodeInvalid')]] |
| </span> |
| </div> |
| <template is="dom-if" restamp |
| if="[[!isUiElementHidden_(UiElement.SCAN_INSTALL_FAILURE, state_)]]"> |
| <cr-button id="useCameraAgainButton" class="blue-icon" |
| on-click="startScanning_"> |
| <iron-icon class="button-image" icon="cellular-setup:camera"> |
| </iron-icon> |
| [[i18n('qrCodeUseCameraAgain')]] |
| </cr-button> |
| </template> |
| </div> |
| <div id="scanFailureContainer" |
| hidden$="[[isUiElementHidden_(UiElement.SCAN_FAILURE, state_)]]"> |
| <div id="scanFailureHeader" class="scan-error-header"> |
| <iron-icon class="scan-finish-image" icon="cellular-setup:error"></iron-icon> |
| <span class="label scan-finish-message scan-error-message"> |
| [[i18n('scanQrCodeError')]] |
| </span> |
| </div> |
| <cr-button id="tryAgainButton" class="blue-icon" |
| on-click="startScanning_" |
| disabled="[[isUiElementDisabled_(UiElement.SCAN_FAILURE, state_)]]"> |
| <iron-icon class="button-image" icon="cellular-setup:try-again"></iron-icon> |
| [[i18n('qrCodeRetry')]] |
| </cr-button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </template> |
| <div id="activationCodeContainer" class$="[[computeActivationCodeClass_( |
| cameraCount_, qrCodeDetector_.*)]]"> |
| <cr-input id="activationCode" |
| label="[[i18n('activationCode')]]" |
| value="{{activationCode}}" |
| on-keydown="onKeyDown_" |
| invalid="[[shouldActivationCodeInputBeInvalid_(state_, |
| isActivationCodeInvalidFormat_)]]" |
| error-message="[[getInputErrorMessage_()]]" |
| aria-description="[[getInputSubtitle_()]]"> |
| </cr-input> |
| <div id="inputSubtitle" |
| hidden$="[[shouldActivationCodeInputBeInvalid_(state_, |
| isActivationCodeInvalidFormat_)]]"> |
| [[getInputSubtitle_()]] |
| </div> |
| </div> |
| </div> |
| </base-page> |
