@c8y/ngx-components/fesm2022/c8y-ngx-components-sensor-phone-sensor-phone-modal.mjs.map

Angular modules for Cumulocity IoT applications

{"version":3,"file":"c8y-ngx-components-sensor-phone-sensor-phone-modal.mjs","sources":["../../sensor-phone/sensor-phone-modal/sensor-phone.service.ts","../../sensor-phone/sensor-phone-modal/sensor-phone.model.ts","../../sensor-phone/sensor-phone-modal/sensor-phone-modal.component.ts","../../sensor-phone/sensor-phone-modal/sensor-phone-modal.component.html","../../sensor-phone/sensor-phone-modal/c8y-ngx-components-sensor-phone-sensor-phone-modal.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { DeviceRegistrationService, InventoryService } from '@c8y/client';\nimport { AppStateService, gettext } from '@c8y/ngx-components';\nimport { head } from 'lodash-es';\n\n@Injectable({ providedIn: 'root' })\nexport class SensorPhoneService {\n  readonly HTTP_STATUS_CODE = {\n    OK: 200,\n    CREATED: 201\n  };\n  private domainName: string;\n  private tenantId: string;\n  private PHONE_GROUP_FRAGMENT = 'c8y_IsSensorPhoneGroup';\n  private readonly PHONE_GROUP_NAME = gettext('Phones');\n\n  constructor(\n    private ui: AppStateService,\n    private inventoryService: InventoryService,\n    private deviceRegistrationService: DeviceRegistrationService\n  ) {\n    this.ui.currentTenant.subscribe(data => {\n      if (data) {\n        this.domainName = data.domainName;\n        this.tenantId = data.name;\n      }\n    });\n  }\n\n  getHost() {\n    return this.domainName.substring(this.domainName.indexOf('.') + 1);\n  }\n\n  getTenantName() {\n    return this.domainName.split('.')[0];\n  }\n\n  getTenantId() {\n    return this.tenantId;\n  }\n\n  async checkPhoneGroupExists() {\n    const { data, res } = await this.inventoryService.list({\n      fragmentType: this.PHONE_GROUP_FRAGMENT\n    });\n    if (data && res && res.status === this.HTTP_STATUS_CODE.OK) {\n      return head(data);\n    }\n    return null;\n  }\n\n  async addPhoneGroup() {\n    const group = await this.checkPhoneGroupExists();\n    if (group) {\n      return group;\n    }\n    return await this.createPhoneGroup();\n  }\n\n  async createPhoneGroup() {\n    const newPhoneGroup = {\n      c8y_Global: {},\n      c8y_IsDeviceGroup: {},\n      type: 'c8y_DeviceGroup',\n      name: this.PHONE_GROUP_NAME,\n      [this.PHONE_GROUP_FRAGMENT]: {}\n    };\n\n    const { data, res } = await this.inventoryService.create(newPhoneGroup);\n    if (data && res && res.status === this.HTTP_STATUS_CODE.CREATED) {\n      return data;\n    }\n    return null;\n  }\n\n  generateRegistrationData(deviceId) {\n    const res = 'c8y://' + this.getTenantName() + '.' + this.getHost() + '/?deviceId=' + deviceId;\n    return res;\n  }\n\n  async createPhoneRegistrationRequest(deviceId) {\n    const group = await this.addPhoneGroup();\n    const device = { id: deviceId, groupId: group.id };\n\n    const { res } = await this.deviceRegistrationService.create(device);\n    if (res.status !== this.HTTP_STATUS_CODE.CREATED) {\n      throw res;\n    }\n  }\n\n  async acceptPhoneRegistrationRequest(deviceId) {\n    const { res } = await this.deviceRegistrationService.accept(deviceId);\n    if (res.status !== this.HTTP_STATUS_CODE.OK) {\n      throw res;\n    }\n  }\n}\n","export const PRODUCT_EXPERIENCE_SENSOR_PHONE = {\n  EVENTS: {\n    CONNECT_SMARTPHONE: 'connectSmartphone'\n  },\n  COMPONENTS: { SENSOR_PHONE_MODAL: 'sensor-phone-modal' },\n  ACTIONS: {\n    ESCAPE: 'escape',\n    OPEN_DASHBOARD: 'openDashboard',\n    RETRY: 'retry'\n  },\n  RESULTS: { FAILED: 'failed', REGISTER_PHONE_STARTED: 'registerPhoneStarted', SUCCESS: 'success' }\n} as const;\n\nexport const SHOW_CONNECT_SMARTPHONE = 'showConnectSmartphone';\n","import { CdkStep, STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';\nimport {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  HostListener,\n  OnDestroy,\n  Renderer2,\n  ViewChild\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Router } from '@angular/router';\nimport { DeviceRegistrationService, DeviceRegistrationStatus, InventoryService } from '@c8y/client';\nimport {\n  C8yStepper,\n  CoreModule,\n  GainsightService,\n  gettext,\n  retryWithDelay\n} from '@c8y/ngx-components';\nimport { BsModalRef } from 'ngx-bootstrap/modal';\nimport { defer, Subject } from 'rxjs';\nimport { map, takeUntil, tap } from 'rxjs/operators';\nimport { PRODUCT_EXPERIENCE_SENSOR_PHONE } from './sensor-phone.model';\nimport { SensorPhoneService } from './sensor-phone.service';\nimport { QRCodeComponent } from 'angularx-qrcode';\nimport { AddGroupModule } from '@c8y/ngx-components/sub-assets';\n\n@Component({\n  selector: 'c8y-sensor-phone',\n  templateUrl: 'sensor-phone-modal.component.html',\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false }\n    }\n  ],\n  imports: [CoreModule, QRCodeComponent, AddGroupModule]\n})\nexport class SensorPhoneModalComponent implements AfterViewInit, OnDestroy {\n  @ViewChild(C8yStepper, { static: false })\n  stepper: C8yStepper;\n  @ViewChild(C8yStepper, { read: ElementRef, static: false })\n  container: ElementRef;\n  success;\n  errorMessage = gettext('Failed to register a smartphone.');\n  registrationData = null;\n  tenantId;\n  instance;\n  deviceId: string;\n  dashboardLink = '';\n  resultControl: FormControl = new FormControl();\n  waitOrRetry: string = gettext('Waiting');\n  retryWithDelayT = 6000;\n  readonly connectSmartphoneTitle: string = gettext('Connect your smartphone to our IoT platform');\n  readonly installAppTitle: string = gettext('Install Cumulocity Sensor App');\n  readonly twoOptionsToConnectTitle: string = gettext(\n    'You have two options to connect your smartphone.'\n  );\n  readonly resultTitle: string = gettext('Result');\n  private destroyNotifier$ = new Subject<void>();\n  constructor(\n    private bsModalRef: BsModalRef,\n    private sensorPhoneService: SensorPhoneService,\n    private renderer: Renderer2,\n    private deviceRegistrationService: DeviceRegistrationService,\n    private router: Router,\n    private inventoryService: InventoryService,\n    private gainsightService: GainsightService\n  ) {}\n\n  @HostListener('document:keydown.escape') onKeydownHandler() {\n    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_SENSOR_PHONE.EVENTS.CONNECT_SMARTPHONE, {\n      component: PRODUCT_EXPERIENCE_SENSOR_PHONE.COMPONENTS.SENSOR_PHONE_MODAL,\n      action: PRODUCT_EXPERIENCE_SENSOR_PHONE.ACTIONS.ESCAPE,\n      step: this.getCurrentStepNumber()\n    });\n  }\n\n  ngOnInit() {\n    this.tenantId = this.sensorPhoneService.getTenantName();\n    this.instance = this.sensorPhoneService.getHost();\n  }\n\n  ngAfterViewInit() {\n    this.stepper.selectionChange\n      .pipe(takeUntil(this.destroyNotifier$))\n      .subscribe(\n        async (stepper: Partial<C8yStepper>) => await this.onStepperSelectionChange(stepper)\n      );\n  }\n\n  ngOnDestroy() {\n    this.destroyNotifier$.next();\n    this.destroyNotifier$.complete();\n  }\n\n  async onStepperSelectionChange(stepper: Partial<C8yStepper>) {\n    const PHONE_REGISTRATION_STEP_INDEX = 2;\n    if (stepper.selectedIndex === PHONE_REGISTRATION_STEP_INDEX) {\n      await this.registerPhone();\n    }\n  }\n\n  async registerPhone() {\n    try {\n      this.gainsightService.triggerEvent(\n        PRODUCT_EXPERIENCE_SENSOR_PHONE.EVENTS.CONNECT_SMARTPHONE,\n        {\n          component: PRODUCT_EXPERIENCE_SENSOR_PHONE.COMPONENTS.SENSOR_PHONE_MODAL,\n          result: PRODUCT_EXPERIENCE_SENSOR_PHONE.RESULTS.REGISTER_PHONE_STARTED\n        }\n      );\n      this.deviceId = this.generateDeviceId();\n      this.registrationData = this.sensorPhoneService.generateRegistrationData(this.deviceId);\n      await this.sensorPhoneService.createPhoneRegistrationRequest(this.deviceId);\n      await this.waitForPhoneToConnect();\n      await this.sensorPhoneService.acceptPhoneRegistrationRequest(this.deviceId);\n      const { deviceMo, dashboardMo } = await this.waitForDeviceAndDashboardMos();\n      this.onDeviceAndDashboardMosCreated(deviceMo, dashboardMo);\n      this.gainsightService.triggerEvent(\n        PRODUCT_EXPERIENCE_SENSOR_PHONE.EVENTS.CONNECT_SMARTPHONE,\n        {\n          component: PRODUCT_EXPERIENCE_SENSOR_PHONE.COMPONENTS.SENSOR_PHONE_MODAL,\n          result: PRODUCT_EXPERIENCE_SENSOR_PHONE.RESULTS.SUCCESS\n        }\n      );\n    } catch (error) {\n      this.gainsightService.triggerEvent(\n        PRODUCT_EXPERIENCE_SENSOR_PHONE.EVENTS.CONNECT_SMARTPHONE,\n        {\n          component: PRODUCT_EXPERIENCE_SENSOR_PHONE.COMPONENTS.SENSOR_PHONE_MODAL,\n          result: PRODUCT_EXPERIENCE_SENSOR_PHONE.RESULTS.FAILED,\n          reason: error\n        }\n      );\n      this.onFailure();\n    }\n  }\n\n  waitForPhoneToConnect() {\n    return defer(() => this.deviceRegistrationService.detail(this.deviceId))\n      .pipe(\n        map(res => res.data),\n        tap(phoneRegistration => {\n          if (phoneRegistration.status === DeviceRegistrationStatus.WAITING_FOR_CONNECTION) {\n            throw new Error('Phone is not connected yet.');\n          }\n        }),\n        retryWithDelay(this.retryWithDelayT, 4),\n        takeUntil(this.destroyNotifier$)\n      )\n      .toPromise();\n  }\n\n  waitForDeviceAndDashboardMos() {\n    return defer(() => this.inventoryService.list({ owner: `device_${this.deviceId}` }))\n      .pipe(\n        map(res => res.data),\n        map(mos => {\n          const deviceMo = mos.find(mo => !!mo.c8y_IsDevice);\n          const dashboardMo = mos.find(mo => !!mo.c8y_Dashboard);\n          if (!(deviceMo && dashboardMo)) {\n            throw new Error('Both device and dashboard MO must be present.');\n          } else {\n            return { deviceMo, dashboardMo };\n          }\n        }),\n        retryWithDelay(this.retryWithDelayT, 4),\n        takeUntil(this.destroyNotifier$)\n      )\n      .toPromise();\n  }\n\n  onDeviceAndDashboardMosCreated(deviceMo, dashboardMo) {\n    this.dashboardLink = `/device/${deviceMo.id}/dashboard/${dashboardMo.id}`;\n    this.resultControl.reset(null);\n    this.stepper.next();\n    if (this.container) {\n      this.renderer.setStyle(this.container.nativeElement, 'display', 'none');\n      this.success = true;\n    }\n  }\n\n  generateDeviceId() {\n    return 'phone' + Math.floor(Math.random() * 100000);\n  }\n\n  async openDashboard() {\n    if (this.dashboardLink) {\n      await this.router.navigate([this.dashboardLink]);\n      this.bsModalRef.hide();\n      this.gainsightService.triggerEvent(\n        PRODUCT_EXPERIENCE_SENSOR_PHONE.EVENTS.CONNECT_SMARTPHONE,\n        {\n          component: PRODUCT_EXPERIENCE_SENSOR_PHONE.COMPONENTS.SENSOR_PHONE_MODAL,\n          action: PRODUCT_EXPERIENCE_SENSOR_PHONE.ACTIONS.OPEN_DASHBOARD\n        }\n      );\n    }\n  }\n\n  back() {\n    this.stepper.previous();\n  }\n\n  next($event) {\n    const { step } = $event as { stepper: C8yStepper; step: CdkStep };\n    step.completed = true;\n    this.stepper.next();\n  }\n\n  cancel() {\n    this.bsModalRef.hide();\n    this.deleteDeviceRequest();\n  }\n\n  retry() {\n    this.success = undefined;\n    this.waitOrRetry = gettext('Retrying');\n    if (this.container) {\n      this.renderer.setStyle(this.container.nativeElement, 'display', 'block');\n    }\n    this.deleteDeviceRequest();\n    this.stepper.selectedIndex = 2;\n    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_SENSOR_PHONE.EVENTS.CONNECT_SMARTPHONE, {\n      component: PRODUCT_EXPERIENCE_SENSOR_PHONE.COMPONENTS.SENSOR_PHONE_MODAL,\n      action: PRODUCT_EXPERIENCE_SENSOR_PHONE.ACTIONS.RETRY\n    });\n  }\n\n  onFailure() {\n    this.resultControl.setErrors({ phoneNotConnected: true });\n    this.success = false;\n    this.stepper.next();\n    if (this.container) {\n      this.renderer.setStyle(this.container.nativeElement, 'display', 'none');\n    }\n  }\n\n  async deleteDeviceRequest() {\n    if (this.deviceId) {\n      try {\n        await this.deviceRegistrationService.delete(this.deviceId);\n      } catch (error) {\n        //\n      }\n    }\n  }\n\n  private getCurrentStepNumber() {\n    return this.stepper.selectedIndex + 1;\n  }\n}\n","<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"c8y-mobile-add\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n    >\n      Connect smartphone\n    </h4>\n  </div>\n\n  <c8y-stepper\n    class=\"inner-scroll\"\n    [disableDefaultIcons]=\"{ edit: true, done: false }\"\n    [useStepLabelsAsTitlesOnly]=\"true\"\n    id=\"modal-body\"\n    [customClasses]=\"['m-l-80', 'm-r-80', 'p-t-16 ', 'p-b-16']\"\n    [disableProgressButtons]=\"true\"\n    linear\n  >\n    <cdk-step [label]=\"connectSmartphoneTitle\">\n      <div class=\"p-l-24 p-r-24\" style=\"min-height: 385px;\">\n        <div\n          class=\"h4 text-center p-t-24 m-b-24 animated fadeInDown\"\n          style=\"animation-delay: 0.3s\"\n        >\n          {{ connectSmartphoneTitle | translate }}\n        </div>\n        <div class=\"row overflow-hidden d-flex\">\n          <div\n            class=\"col-xs-7 animated fadeInUp\"\n            style=\"animation-delay: 0.5s\"\n          >\n            <p\n              class=\"m-b-16 lead\"\n              translate\n            >\n              Using your smartphone as a source of sensor data is a quick way to start using our IoT\n              platform.\n            </p>\n            <p\n              class=\"m-b-16\"\n              translate\n            >\n              Use this wizard to connect your smartphone to our IoT platform using the Cumulocity\n              Sensor App.\n            </p>\n            <p\n              class=\"m-b-16\"\n              translate\n            >\n              We don't collect any personal data. The only data we retrieve from your phone is\n              sensor data and anonymized application usage data.\n            </p>\n            <p class=\"m-b-16\">\n              <span translate>\n                Prepare your phone and then click\n                <strong>Next</strong>\n                below.\n              </span>\n            </p>\n          </div>\n          <div\n            class=\"col-xs-5 no-gutter animated fadeInUp\"\n            style=\"animation-delay: 0.3s\"\n          >\n            <svg width=\"326\" height=\"362\" viewBox=\"0 0 326 362\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M202.966 250.585L129.345 293.09L109.444 281.6L183.065 239.095L202.966 250.585Z\" fill=\"#E3E5E8\" stroke=\"black\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M139.543 257.158L107.901 311.968L88 300.478L119.641 245.668L139.543 257.158Z\" fill=\"#D4D9DE\" stroke=\"black\" stroke-linejoin=\"round\"/>\n              <path d=\"M139.543 330.238L107.898 311.968L113.461 302.333V302.261L113.523 302.225L139.543 257.158L147.454 261.725L129.346 293.09L202.966 250.585V263.504L129.283 306.045L147.454 316.536L139.543 330.238Z\" fill=\"#8B96A0\" stroke=\"black\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M171.363 259.519L164.74 242.608L223.706 208.564L230.329 225.475L171.363 259.519Z\" fill=\"var(--c8y-brand-30)\" stroke=\"#212121\" stroke-linejoin=\"round\"/>\n              <path d=\"M167.583 259.887L171.363 259.519L164.74 242.608L160.959 242.976L167.583 259.887Z\" fill=\"var(--c8y-brand-40)\" stroke=\"#212121\" stroke-linejoin=\"round\"/>\n              <path d=\"M204.786 231.738C205.187 235.004 202.913 238.251 199.707 238.991C196.501 239.732 193.577 237.684 193.176 234.418C192.775 231.153 195.049 227.905 198.255 227.165C201.461 226.425 204.385 228.472 204.786 231.738Z\" fill=\"#E3E5E8\" stroke=\"#212121\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M164.624 242.602L120.482 129.892L179.448 95.8475L223.59 208.558L164.624 242.602Z\" fill=\"#8B96A0\" stroke=\"#212121\" stroke-linejoin=\"round\"/>\n              <path d=\"M164.624 242.602L120.482 129.892L116.702 130.26L160.844 242.97L164.624 242.602Z\" fill=\"#D4D9DE\" stroke=\"#212121\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M120.532 129.837L118.323 124.197L177.289 90.1525L179.498 95.7927L120.532 129.837Z\" fill=\"var(--c8y-brand-30)\" stroke=\"#212121\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M118.164 124.305L114.384 124.673L173.35 90.6287L177.13 90.2605L118.164 124.305Z\" fill=\"var(--c8y-brand-60)\" stroke=\"#212121\" stroke-linejoin=\"round\"/>\n              <path d=\"M116.702 130.261L120.482 129.893L118.273 124.253L114.493 124.621L116.702 130.261Z\" fill=\"var(--c8y-brand-40)\" stroke=\"#212121\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M207.071 22.4899L199.16 36.1925L179.259 24.7027L187.17 11L207.071 22.4899Z\" fill=\"var(--c8y-brand-40)\" stroke=\"black\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M207.07 95.5705L233.09 50.5034L213.189 39.0135L187.169 84.0806L207.07 95.5705Z\" fill=\"var(--c8y-brand-40)\" stroke=\"black\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M238.715 40.7599L207.071 22.4897L199.159 36.1924L217.33 46.6834L143.647 89.2241V102.143L217.268 59.6385L199.159 91.0029L207.071 95.5705L233.09 50.5034L233.153 50.4672V50.3949L238.715 40.7599Z\" fill=\"var(--c8y-brand-30)\" stroke=\"black\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M217.33 46.6835L143.648 89.2242L123.747 77.7344L197.429 35.1936L217.33 46.6835Z\" fill=\"var(--c8y-brand-60)\" stroke=\"black\" stroke-linejoin=\"round\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M143.648 89.2241V102.143L123.747 90.6532V77.7343L143.648 89.2241Z\" fill=\"var(--c8y-brand-40)\" stroke=\"black\" stroke-linejoin=\"round\"/>\n              <g opacity=\"0.05\" filter=\"url(#filter0_f_666_5447)\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M161.618 322.178L156.79 320.716L216.347 286.33L221.176 287.792L161.618 322.178Z\" fill=\"#212121\"/>\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M201.965 308.884L128.344 351.389L108.443 339.899L182.064 297.395L201.965 308.884Z\" fill=\"black\"/>\n              </g>\n              <defs>\n              <filter id=\"filter0_f_666_5447\" x=\"100.443\" y=\"278.33\" width=\"128.732\" height=\"81.0587\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n              <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n              <feGaussianBlur stdDeviation=\"4\" result=\"effect1_foregroundBlur_666_5447\"/>\n              </filter>\n              </defs>\n            </svg>\n          </div>\n        </div>\n      </div>\n      <c8y-stepper-buttons\n        class=\"modal-footer d-block bg-component separator-top sticky-bottom\"\n        (onNext)=\"next($event)\"\n        (onCancel)=\"cancel()\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step [label]=\"installAppTitle\">\n      <div class=\"p-l-24 p-r-24\" style=\"min-height: 385px;\">\n        <div>\n          <div\n            class=\"h4 text-center p-t-8 m-b-8 animated fadeInDown\"\n            style=\"animation-delay: 0.3s\"\n          >\n            {{ installAppTitle | translate }}\n          </div>\n          <div\n            class=\"text-center animated fadeIn\"\n            style=\"animation-delay: 0.5s\"\n          >\n            <p translate>\n              Open\n              <strong>Google Play Store</strong>\n              or\n              <strong>Apple App Store</strong>\n              on your smartphone.\n            </p>\n            <p translate>\n              Find and install\n              <strong>Cumulocity Sensor App</strong>\n              .\n            </p>\n          </div>\n          <div\n            class=\"center-block p-t-16 animated fadeInUp\"\n            style=\"width: 181px; animation-delay: 0.5s\"\n          >\n            <svg viewBox=\"0 -10 177 155\">\n              <defs>\n                <linearGradient\n                  id=\"sensorapp-icon-c\"\n                  x1=\"50%\"\n                  x2=\"50%\"\n                  y1=\"0%\"\n                  y2=\"100%\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stop-color=\"#0d770d\"\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stop-color=\"#119d11\"\n                  />\n                </linearGradient>\n                <rect\n                  id=\"sensorapp-icon-b\"\n                  height=\"102.4\"\n                  width=\"102.4\"\n                  x=\"0\"\n                  y=\"0\"\n                  rx=\"12\"\n                />\n                <filter\n                  id=\"sensorapp-icon-a\"\n                  height=\"225%\"\n                  width=\"225%\"\n                  x=\"-62.5%\"\n                  y=\"-31.2%\"\n                  filterUnits=\"objectBoundingBox\"\n                >\n                  <feOffset\n                    dy=\"4\"\n                    in=\"SourceAlpha\"\n                    result=\"shadowOffsetOuter1\"\n                  />\n                  <feGaussianBlur\n                    in=\"shadowOffsetOuter1\"\n                    result=\"shadowBlurOuter1\"\n                    stdDeviation=\"2\"\n                  />\n                  <feColorMatrix\n                    values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0\"\n                    in=\"shadowBlurOuter1\"\n                    result=\"shadowMatrixOuter1\"\n                  />\n                  <feOffset\n                    dy=\"8\"\n                    in=\"SourceAlpha\"\n                    result=\"shadowOffsetOuter2\"\n                  />\n                  <feGaussianBlur\n                    in=\"shadowOffsetOuter2\"\n                    result=\"shadowBlurOuter2\"\n                    stdDeviation=\"4\"\n                  />\n                  <feColorMatrix\n                    values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.01 0\"\n                    in=\"shadowBlurOuter2\"\n                    result=\"shadowMatrixOuter2\"\n                  />\n                  <feOffset\n                    dy=\"16\"\n                    in=\"SourceAlpha\"\n                    result=\"shadowOffsetOuter3\"\n                  />\n                  <feGaussianBlur\n                    in=\"shadowOffsetOuter3\"\n                    result=\"shadowBlurOuter3\"\n                    stdDeviation=\"8\"\n                  />\n                  <feColorMatrix\n                    values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.03 0\"\n                    in=\"shadowBlurOuter3\"\n                    result=\"shadowMatrixOuter3\"\n                  />\n                  <feOffset\n                    dy=\"32\"\n                    in=\"SourceAlpha\"\n                    result=\"shadowOffsetOuter4\"\n                  />\n                  <feGaussianBlur\n                    in=\"shadowOffsetOuter4\"\n                    result=\"shadowBlurOuter4\"\n                    stdDeviation=\"16\"\n                  />\n                  <feColorMatrix\n                    values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0\"\n                    in=\"shadowBlurOuter4\"\n                    result=\"shadowMatrixOuter4\"\n                  />\n                  <feMerge>\n                    <feMergeNode in=\"shadowMatrixOuter1\" />\n                    <feMergeNode in=\"shadowMatrixOuter2\" />\n                    <feMergeNode in=\"shadowMatrixOuter3\" />\n                    <feMergeNode in=\"shadowMatrixOuter4\" />\n                  </feMerge>\n                </filter>\n              </defs>\n              <g\n                fill=\"none\"\n                fill-rule=\"evenodd\"\n                transform=\"translate(32)\"\n              >\n                <use\n                  xlink:href=\"#sensorapp-icon-b\"\n                  fill=\"#000\"\n                  filter=\"url(#sensorapp-icon-a)\"\n                />\n                <use\n                  xlink:href=\"#sensorapp-icon-b\"\n                  fill=\"url(#sensorapp-icon-c)\"\n                />\n                <path\n                  d=\"M51.5,49.3L51.5,49.3c2.6,0,5,0.5,7.2,1.6c1.4,0.7,2.8,1.7,4,2.8l3.4-3.2c-1.8-1.7-3.7-3.1-5.9-4c-2.6-1.2-5.5-1.8-8.6-1.8h0c-2.1,0-4.2,0.3-6.1,0.8c-3.1,0.9-5.9,2.6-8.4,4.9l3.4,3.2c1.6-1.5,3.4-2.7,5.3-3.4C47.5,49.6,49.4,49.3,51.5,49.3z\"\n                  fill=\"#FFF\"\n                  fill-rule=\"nonzero\"\n                />\n                <path\n                  d=\"M51.5,58L51.5,58c1.9,0,3.5,0.6,4.9,1.6h0c0.2,0.2,0.5,0.4,0.7,0.6l3.4-3.4l0,0h0c-0.8-0.8-1.6-1.4-2.5-1.9v0c-1.9-1.1-4.1-1.7-6.5-1.7h0c-2.3,0-4.4,0.5-6.3,1.6v0c-1,0.5-1.8,1.2-2.7,2c0,0,0,0,0,0l3.4,3.4C47.5,58.8,49.3,58,51.5,58z\"\n                  fill=\"#FFF\"\n                  fill-rule=\"nonzero\"\n                />\n                <path\n                  d=\"M51.6,61.8L51.6,61.8c-1.1,0-2.1,0.4-2.8,1.2l0,0c-0.8,0.8-1.2,1.7-1.2,2.8c0,1.1,0.4,2,1.2,2.8c0,0,0,0,0,0c0.8,0.8,1.7,1.2,2.8,1.2c0,0,0,0,0,0c1.1,0,2-0.4,2.8-1.2l0,0c0.8-0.8,1.2-1.7,1.2-2.8c0-1.1-0.4-2-1.2-2.8c0,0,0,0,0,0C53.7,62.1,52.7,61.8,51.6,61.8z\"\n                  fill=\"#FFF\"\n                  fill-rule=\"nonzero\"\n                />\n                <path\n                  d=\"M51,78.2c0.2,0,0.3,0,0.5,0c0,0,0,0,0,0c3.5,0,6.5-1.2,9-3.6l0,0l-3.4-3.4c0,0,0,0,0,0c-1.4,1.3-3,2.1-4.8,2.2h0c-0.2,0-0.5,0-0.7,0c0,0,0,0,0,0c-2.2,0-4-0.7-5.6-2.2l-3.4,3.4C44.9,76.9,47.7,78.1,51,78.2z\"\n                  fill=\"#FFF\"\n                  fill-rule=\"nonzero\"\n                />\n                <path\n                  d=\"M62.6,77.8c-3.1,3-6.8,4.4-11.1,4.4c-0.5,0-1.1,0-1.6-0.1c-3.7-0.3-6.9-1.8-9.5-4.4L37,81c3.3,3.2,7.2,5.1,11.7,5.6c0.9,0.1,1.9,0.2,2.8,0.2c5.7,0,10.5-1.9,14.5-5.8l0,0L62.6,77.8L62.6,77.8z\"\n                  fill=\"#FFF\"\n                  fill-rule=\"nonzero\"\n                />\n                <path\n                  d=\"M81,38.5C78.7,32.4,72.7,28,65.8,28c-1.6,0-3.1,0.2-4.6,0.7C57.2,22.3,50.1,18,42,18c-12.3,0-22.2,9.8-22.5,22C15,42.6,12,47.5,12,53c0,8.3,6.7,15,15,15h17.4c-0.7-1.6-0.9-3,0-5H27c-5.5,0-10-4.5-10-10c0-4.7,3.3-8.7,7.7-9.7c-0.1-0.9-0.2-1.8-0.2-2.8C24.5,30.8,32.3,23,42,23c7.9,0,14.6,5.2,16.8,12.4c1.9-1.5,4.4-2.4,7-2.4c5.8,0,10.6,4.4,11.2,10H77c5.5,0,10,4.5,10,10c0,5.5-4.5,10-10,10H58.7c0.8,1.5,0.7,3.4,0,5H77c8.3,0,15-6.7,15-15C92,46.1,87.3,40.3,81,38.5z\"\n                  fill=\"#FFF\"\n                  fill-rule=\"nonzero\"\n                />\n                <text\n                  fill=\"#58656D\"\n                  font-size=\"14\"\n                  font-weight=\"400\"\n                >\n                  <tspan\n                    y=\"124.7\"\n                    x=\"15.681\"\n                  >\n                    Cumulocity\n                  </tspan>\n                  <tspan\n                    y=\"140.7\"\n                    x=\"15.197\"\n                  >\n                    Sensor App\n                  </tspan>\n                </text>\n              </g>\n            </svg>\n          </div>\n        </div>\n\n        <div class=\"row overflow-hidden\">\n          <div class=\"col-xs-6\">\n            <div class=\"p-16\">\n              <a\n                class=\"center-block animated fadeInLeft\"\n                style=\"width: 171px; animation-delay: 0.35s\"\n                title=\"Google Play\"\n                href=\"https://play.google.com/store/apps/details?id=com.softwareag.cumulocity.iotcloudsensor\"\n              >\n                <svg viewBox=\"0 0 181 52\">\n                  <g\n                    fill=\"none\"\n                    fill-rule=\"evenodd\"\n                  >\n                    <rect\n                      height=\"51.2\"\n                      width=\"170.4\"\n                      fill=\"#000\"\n                      rx=\"8\"\n                    />\n                    <path\n                      d=\"M85.2480681,31.4279551 C82.5352946,31.4279551 80.324619,33.4905299 80.324619,36.3333431 C80.324619,39.1580952 82.5352946,41.2387311 85.2480681,41.2387311 C87.9608415,41.2387311 90.1715171,39.1580952 90.1715171,36.3333431 C90.1715171,33.4905299 87.9596375,31.4279551 85.2480681,31.4279551 Z M85.2480681,39.3061961 C83.7622436,39.3061961 82.4799073,38.0804511 82.4799073,36.3333431 C82.4799073,34.568174 83.7622436,33.3604901 85.2480681,33.3604901 C86.7338925,33.3604901 88.0162288,34.568174 88.0162288,36.3333431 C88.0162288,38.0804511 86.7338925,39.3061961 85.2480681,39.3061961 Z M74.5065447,31.4279551 C71.7937712,31.4279551 69.5830956,33.4905299 69.5830956,36.3333431 C69.5830956,39.1580952 71.7937712,41.2387311 74.5065447,41.2387311 C77.2193181,41.2387311 79.4299937,39.1580952 79.4299937,36.3333431 C79.4299937,33.4905299 77.2193181,31.4279551 74.5065447,31.4279551 Z M74.5065447,39.3061961 C73.0195161,39.3061961 71.7383839,38.0804511 71.7383839,36.3333431 C71.7383839,34.568174 73.0207202,33.3604901 74.5065447,33.3604901 C75.9923691,33.3604901 77.2747054,34.568174 77.2747054,36.3333431 C77.2747054,38.0804511 75.9923691,39.3061961 74.5065447,39.3061961 Z M61.7289361,32.9330447 L61.7289361,35.0136805 L66.7089765,35.0136805 C66.5596716,36.1840382 66.1695524,37.0389291 65.5759451,37.6337405 C64.8510939,38.3585917 63.7180625,39.1568912 61.7301401,39.1568912 C58.6645737,39.1568912 56.267267,36.6861361 56.267267,33.6193655 C56.267267,30.552595 58.6645737,28.0818399 61.7301401,28.0818399 C63.3833305,28.0818399 64.5922185,28.7320386 65.4832315,29.5676644 L66.9509949,28.099901 C65.7059848,26.9102782 64.0527944,26 61.7301401,26 C57.5303381,26 54,29.4183595 54,33.6181615 C54,37.8179635 57.5303381,41.236323 61.7301401,41.236323 C63.9974071,41.236323 65.7059848,40.4934107 67.0437084,39.0990957 C68.4187583,37.7240459 68.8462037,35.7915108 68.8462037,34.231034 C68.8462037,33.7482012 68.8088775,33.3014906 68.7342251,32.9306366 L61.7289361,32.9306366 L61.7289361,32.9330447 Z M113.984443,34.550113 C113.576262,33.4544077 112.331252,31.4291592 109.784641,31.4291592 C107.257294,31.4291592 105.158597,33.4170815 105.158597,36.3345472 C105.158597,39.0846469 107.239233,41.2399352 110.026659,41.2399352 C112.274661,41.2399352 113.575058,39.8648853 114.114482,39.0665858 L112.442027,37.9516154 C111.884542,38.7691801 111.122364,39.3074001 110.026659,39.3074001 C108.92975,39.3074001 108.149511,38.8053022 107.648617,37.8215757 L114.207196,35.1088022 L113.984443,34.550113 Z M107.29462,36.1852423 C107.239233,34.2900335 108.762384,33.324368 109.858089,33.324368 C110.71298,33.324368 111.437831,33.7518134 111.678645,34.3646859 L107.29462,36.1852423 Z M101.961787,40.9413254 L104.117075,40.9413254 L104.117075,26.5225671 L101.961787,26.5225671 L101.961787,40.9413254 Z M98.4314488,32.5248644 L98.3567964,32.5248644 C97.8739636,31.9493181 96.9444203,31.4291592 95.7740626,31.4291592 C93.3213686,31.4291592 91.0733668,33.5844475 91.0733668,36.3526082 C91.0733668,39.1027079 93.3213686,41.2399352 95.7740626,41.2399352 C96.9444203,41.2399352 97.8739636,40.7197762 98.3567964,40.1249648 L98.4314488,40.1249648 L98.4314488,40.8305508 C98.4314488,42.7076985 97.4284571,43.7106902 95.8113888,43.7106902 C94.4917263,43.7106902 93.6741616,42.7630858 93.3406338,41.9635822 L91.463486,42.7438207 C92.0029101,44.0442181 93.4333473,45.6420212 95.8113888,45.6420212 C98.3387353,45.6420212 100.474758,44.1561968 100.474758,40.531941 L100.474758,31.7241567 L98.4302447,31.7241567 L98.4302447,32.5248644 L98.4314488,32.5248644 Z M95.9606937,39.3061961 C94.4748693,39.3061961 93.2298592,38.0611859 93.2298592,36.3514042 C93.2298592,34.6235613 94.4748693,33.3604901 95.9606937,33.3604901 C97.4284571,33.3604901 98.5807537,34.6235613 98.5807537,36.3514042 C98.5807537,38.0611859 97.4284571,39.3061961 95.9606937,39.3061961 Z M124.080584,26.5225671 L118.923545,26.5225671 L118.923545,40.9413254 L121.075221,40.9413254 L121.075221,35.4784522 L124.080584,35.4784522 C126.46585,35.4784522 128.810177,33.7518134 128.810177,31.0005097 C128.810177,28.25041 126.46585,26.5225671 124.080584,26.5225671 Z M124.135971,33.4724688 L121.075221,33.4724688 L121.075221,28.5297546 L124.135971,28.5297546 C125.744611,28.5297546 126.658501,29.8614579 126.658501,31.0005097 C126.658501,32.1178882 125.744611,33.4724688 124.135971,33.4724688 Z M137.436147,31.4014655 C135.878078,31.4014655 134.264622,32.0877864 133.596362,33.6085289 L135.507224,34.4056243 C135.915404,33.6085289 136.675173,33.3484494 137.473473,33.3484494 C138.586035,33.3484494 139.717862,34.0167092 139.737128,35.2039239 L139.737128,35.3520247 C139.347008,35.1292714 138.512587,34.7957436 137.492738,34.7957436 C135.433775,34.7957436 133.337487,35.9275709 133.337487,38.0419208 C133.337487,39.9708436 135.025595,41.2134456 136.917192,41.2134456 C138.364486,41.2134456 139.161581,40.564451 139.662475,39.8034777 L139.737128,39.8034777 L139.737128,40.9160399 L141.814151,40.9160399 L141.814151,35.3881468 C141.812947,32.8294945 139.902085,31.4014655 137.436147,31.4014655 Z M137.176067,39.3037879 C136.471685,39.3037879 135.487959,38.9509949 135.487959,38.079247 C135.487959,36.9666848 136.7125,36.5392394 137.769674,36.5392394 C138.716075,36.5392394 139.160377,36.7439315 139.735923,37.0220721 C139.568558,38.3573876 138.418669,39.3037879 137.176067,39.3037879 Z M149.381742,31.7169323 L146.914599,37.9684724 L146.839946,37.9684724 L144.28009,31.7169323 L141.961048,31.7169323 L145.800833,40.4536764 L143.61183,45.3133096 L145.85622,45.3133096 L151.773028,31.7169323 L149.381742,31.7169323 Z M129.997392,40.9413254 L132.149068,40.9413254 L132.149068,26.5225671 L129.997392,26.5225671 L129.997392,40.9413254 Z\"\n                      fill=\"#FFF\"\n                      fill-rule=\"nonzero\"\n                    />\n                    <text\n                      fill=\"#FFF\"\n                      font-size=\"12\"\n                      letter-spacing=\".96\"\n                    >\n                      <tspan\n                        y=\"17.4\"\n                        x=\"55.142\"\n                        translate\n                      >\n                        Download on the`Google Play`\n                      </tspan>\n                    </text>\n                    <path\n                      d=\"M12.7999992,39.4109698 L12.7999992,11.7922439 C12.7999992,10.8284641 13.3587517,9.99536961 14.1695974,9.59999943 L30.1457109,25.5968954 L14.1631721,41.5999975 C13.3557986,41.2034251 12.7999992,40.3722639 12.7999992,39.4109698 Z M35.2141861,30.6717551 L17.745324,40.770461 L31.5225942,26.9753948 L35.2141861,30.6717551 Z M40.6441621,23.6653717 C41.2251919,24.1106831 41.5999975,24.8123612 41.5999975,25.6016069 C41.5999975,26.3789928 41.2365497,27.071248 40.6704472,27.5173717 L36.9598716,29.6625343 L32.8993152,25.5968954 L36.9571133,21.5338234 L40.6441621,23.6653717 Z M17.7555622,10.4335163 L35.2114278,20.5246677 L31.5225942,24.2182336 L17.7555622,10.4335163 Z\"\n                      fill=\"#FFF\"\n                      fill-rule=\"nonzero\"\n                    />\n                  </g>\n                </svg>\n              </a>\n            </div>\n          </div>\n          <div class=\"col-xs-6\">\n            <div class=\"p-16\">\n              <a\n                class=\"center-block animated fadeInRight\"\n                style=\"width: 171px; animation-delay: 0.35s\"\n                title=\"Apple Store\"\n                href=\"http://onelink.to/g39r8w\"\n              >\n                <svg viewBox=\"0 0 181 52\">\n                  <g\n                    fill=\"none\"\n                    fill-rule=\"evenodd\"\n                  >\n                    <rect\n                      height=\"51.2\"\n                      width=\"170.4\"\n                      fill=\"#000\"\n                      rx=\"8\"\n                    />\n                    <text\n                      fill=\"#FFF\"\n                      font-family=\"Helvetica\"\n                      font-size=\"12\"\n                      letter-spacing=\".96\"\n                    >\n                      <tspan\n                        y=\"17.4\"\n                        x=\"54.4\"\n                        translate\n                      >\n                        Download on the`App Store`\n                      </tspan>\n                    </text>\n                    <text\n                      fill=\"#FFF\"\n                      font-family=\"Helvetica\"\n                      font-size=\"23.2\"\n                    >\n                      <tspan\n                        y=\"41.4\"\n                        x=\"54.4\"\n                      >\n                        App Store\n                      </tspan>\n                    </text>\n                    <path\n                      d=\"M38.5273755,38.1636701 C37.1235711,40.207449 35.6714645,42.2386565 33.378798,42.2812318 C31.1224426,42.323807 30.3990915,40.9506718 27.8243806,40.9506718 C25.2469674,40.9506718 24.4406919,42.2386565 22.3103107,42.323807 C20.0969712,42.4062756 18.4139767,40.1164319 16.9986034,38.081872 C14.10704,33.9219027 11.9000846,26.3195413 14.8682053,21.1890243 C16.3380115,18.6410976 18.9717322,17.0290047 21.8257685,16.9864462 C23.9993852,16.9466199 26.0527362,18.4453856 27.3803717,18.4453856 C28.7100338,18.4453856 31.202327,16.6459449 33.8224691,16.9098778 C34.9192335,16.9549841 37.9974022,17.3498611 39.9742465,20.2297237 C39.8180243,20.3319546 36.3000689,22.3695987 36.3429667,26.6147184 C36.3860334,31.6856972 40.806362,33.3712742 40.8577042,33.394238 C40.8176776,33.5134151 40.1510732,35.8005769 38.5273755,38.1636701 Z M28.9012161,11.3393106 C30.1146826,9.92365046 32.1649936,8.87068442 33.8570913,8.79993243 C34.0732691,10.7663552 33.2786469,12.7354933 32.1050381,14.154422 C30.9290648,15.5708029 29.0040694,16.6741384 27.1148784,16.5268181 C26.8581673,14.6029538 27.8103628,12.5965204 28.9012161,11.3393106 Z\"\n                      fill=\"#FFF\"\n                      fill-rule=\"nonzero\"\n                    />\n                  </g>\n                </svg>\n              </a>\n            </div>\n          </div>\n        </div>\n        <p\n          class=\"text-center p-b-24 animated fadeIn\"\n          style=\"animation-delay: 1s\"\n          translate\n        >\n          Click\n          <strong>Next</strong>\n          once you have the application installed.\n        </p>\n      </div>\n      <c8y-stepper-buttons\n        class=\"modal-footer d-block bg-component separator-top sticky-bottom\"\n        (onBack)=\"back()\"\n        (onNext)=\"next($event)\"\n        (onCancel)=\"cancel()\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step [label]=\"twoOptionsToConnectTitle\">\n      <div class=\"p-l-24 p-r-24\">\n        <div\n          class=\"h4 text-center m-b-8 animated fadeInDown\"\n          style=\"animation-delay: 0.3s\"\n        >\n          {{ twoOptionsToConnectTitle | translate }}\n        </div>\n        <div class=\"row\">\n          <div class=\"col-xs-6\">\n            <div\n              class=\"animated fadeIn\"\n              style=\"animation-delay: 0.35s\"\n            >\n              <p\n                class=\"text-info\"\n                translate\n              >\n                Option 1: QR code scan\n              </p>\n              <p translate>\n                Press\n                <strong>Scan QR code</strong>\n                and use the code below.\n              </p>\n            </div>\n            <div class=\"row overflow-hidden\">\n              <qrcode\n                class=\"center-block animated fadeInUp\"\n                style=\"animation-delay: 0.75s\"\n                *ngIf=\"registrationData\"\n                [qrdata]=\"registrationData\"\n                [width]=\"288\"\n                [errorCorrectionLevel]=\"'M'\"\n                [elementType]=\"'svg'\"\n              ></qrcode>\n            </div>\n          </div>\n          <div class=\"col-xs-6\">\n            <div\n              class=\"animated fadeIn\"\n              style=\"animation-delay: 0.55s\"\n            >\n              <p\n                class=\"text-info\"\n                translate\n              >\n                Option 2: Manual registration\n              </p>\n              <p translate>\n                Press\n                <strong>Manual registration</strong>\n                and enter the following data into your smartphone.\n              </p>\n            </div>\n            <div class=\"m-t-16 overflow-hidden\">\n              <svg\n                class=\"animated fadeInUp\"\n                style=\"animation-delay: 0.95s\"\n                viewBox=\"0 0 287 305\"\n              >\n                <defs>\n                  <rect\n                    id=\"login-screen-a\"\n                    height=\"306\"\n                    width=\"255\"\n                    x=\"0\"\n                    y=\"0\"\n                  />\n                  <polygon\n                    id=\"login-screen-c\"\n                    points=\"6.898 5.644 55.186 5.644 55.186 8.153 6.898 8.153\"\n                  />\n                </defs>\n                <g\n                  fill=\"none\"\n                  fill-rule=\"evenodd\"\n                >\n                  <mask\n                    id=\"login-screen-b\"\n                    fill=\"#fff\"\n                  >\n                    <use xlink:href=\"#login-screen-a\" />\n                  </mask>\n                  <g mask=\"url(#login-screen-b)\">\n                    <g transform=\"translate(2)\">\n                      <path\n                        d=\"M7.38308195,146.47702 L4.61442622,146.47702 C3.09169154,146.47702 1.71398319,147.082069 0.716388292,148.057604 C-0.288641051,149.04041 -0.908444414,150.39865 -0.908444414,151.897853 L-0.908444414,183.448832 C-0.908444414,184.948035 -0.288641051,186.306275 0.716388292,187.28908 C1.71398319,188.264616 3.09169154,188.869665 4.61442622,188.869665 L7.38308195,188.869665 C8.90581663,188.869665 10.283525,188.264616 11.2811199,187.28908 C12.2861492,186.306275 12.9059526,184.948035 12.9059526,183.448832 L12.9059526,151.897853 C12.9059526,150.39865 12.2861492,149.04041 11.2811199,148.057604 C10.283525,147.082069 8.90581663,146.47702 7.38308195,146.47702 Z M253.455992,117.439118 C253.455992,116.57847 253.289564,115.89251 253.006875,115.340103 C252.679825,114.701009 252.195532,114.225904 251.57447,113.879494 C250.346479,113.194557 248.492308,113.061843 246.328777,113.062082 C244.332904,113.06945 242.585176,113.229114 241.417948,113.929711 C240.344603,114.573957 239.641595,115.621252 239.641595,117.439118 L239.641595,171.364789 C239.641595,172.225436 239.808022,172.911396 240.090711,173.463804 C240.417761,174.102898 240.902054,174.578002 241.523116,174.924413 C242.751108,175.60935 244.605278,175.742063 246.768809,175.741825 C248.764682,175.734456 250.51241,175.574793 251.679638,174.874196 C252.752983,174.229949 253.455992,173.182654 253.455992,171.364789 L253.455992,117.439118 Z M7.38308195,98.7408374 L4.61442622,98.7408374 C3.09168636,98.7408374 1.71397154,99.3459143 0.71637263,100.321501 C-0.288644505,101.304341 -0.908444414,102.66263 -0.908444414,104.161888 L-0.908444414,136.905836 C-0.908444414,138.405094 -0.288644505,139.763382 0.71637263,140.746223 C1.71397154,141.721809 3.09168636,142.326886 4.61442622,142.326886 L7.38308195,142.326886 C8.90582182,142.326886 10.2835366,141.721809 11.2811355,140.746223 C12.2861527,139.763382 12.9059526,138.405094 12.9059526,136.905836 L12.9059526,104.161888 C12.9059526,102.66263 12.2861527,101.304341 11.2811355,100.321501 C10.2835366,99.3459143 8.90582182,98.7408374 7.38308195,98.7408374 Z M10.1517377,64.1321048 L1.84577049,64.1321048 C1.08690926,64.1321048 0.400524723,64.4358637 -0.0965613404,64.9250099 C-0.598984265,65.4194076 -0.908444414,66.1027717 -0.908444414,66.8568372 L-0.908444414,83.5121388 C-0.908444414,84.2662044 -0.598984265,84.9495685 -0.0965613404,85.4439662 C0.400524723,85.9331124 1.08690926,86.2368713 1.84577049,86.2368713 L10.1517377,86.2368713 C10.9105989,86.2368713 11.5969835,85.9331124 12.0940695,85.4439662 C12.5964924,84.9495685 12.9059526,84.2662044 12.9059526,83.5121388 L12.9059526,66.8568372 C12.9059526,66.1027717 12.5964924,65.4194076 12.0940695,64.9250099 C11.5969835,64.4358637 10.9105989,64.1321048 10.1517377,64.1321048 Z\"\n                        fill=\"#FFF\"\n                        stroke=\"#CCCDC9\"\n                        stroke-width=\"1.817\"\n                      />\n                      <path\n                        d=\"M33.5930229,0 L218.954524,0 C236.513532,0 250.747921,14.1590938 250.747921,31.6252212 L250.747921,474.378317 C250.747921,491.844445 236.513532,506.003539 218.954524,506.003539 L33.5930229,506.003539 C16.0340148,506.003539 1.79962623,491.844445 1.79962623,474.378317 L1.79962623,31.6252212 C1.79962623,14.1590938 16.0340148,0 33.5930229,0 Z\"\n                        fill=\"#394852\"\n                      />\n                      <path\n                        d=\"M240.113079,94.605309 L240.112903,41.9917101 C240.111425,38.1274958 240.096801,35.7038103 239.968443,33.3966696 C239.873818,31.1365982 239.524087,28.8939701 238.925823,26.7114061 C237.960259,22.8182806 235.959037,19.2549752 233.116799,16.3817503 C230.251052,13.5738971 226.679636,11.5845622 222.776513,10.6222317 C220.580421,10.0246985 218.324184,9.67521033 216.049985,9.58049224 C213.822086,9.45757463 211.487399,9.43922122 207.86611,9.43670786 L193.46393,9.40388135 C191.790396,9.24852633 190.120371,9.79656085 188.740954,11.0521406 C187.790606,12.1604422 187.361559,13.6185195 187.557881,15.0597856 C187.622307,16.5426888 187.48783,18.0275822 187.151489,19.5052379 C186.728399,21.5761576 185.66886,23.4648429 184.096596,24.9326967 C182.577145,26.4198303 180.686118,27.4753541 178.619657,27.9907975 C176.447678,28.3449098 174.244818,28.4793325 172.045122,28.3920414 L80.6380774,28.3920414 L79.8614472,28.4120378 C77.9090342,28.4404094 75.9574202,28.2981791 74.0291032,27.9867437 C71.9554369,27.5622112 70.0644085,26.5093879 68.5935749,24.9488037 C67.0984097,23.4355646 66.037438,21.5518946 65.5207919,19.4932962 C65.2546737,18.0198526 65.1206899,16.5256833 65.1203182,15.0285536 C65.3061644,13.5973434 64.8764744,12.1523871 63.8096494,10.9258246 C62.4838688,9.73385222 60.6968025,9.18943733 58.9312627,9.43629496 L44.8087832,9.43670753 C41.1888031,9.43921968 38.854755,9.45755221 36.6284554,9.58028608 C34.3590738,9.67460916 32.107503,10.022496 29.9161911,10.6173905 C26.0061514,11.577993 22.4276689,13.5692594 19.5420579,16.3968097 C16.7196121,19.2502622 14.7203309,22.8065311 13.753019,26.6928366 C13.1522709,28.8800048 12.8009448,31.1270772 12.7057758,33.3920326 C12.5823013,35.6091548 12.5638514,37.9329717 12.5613261,41.537158 L12.5609083,94.6192271 L12.4344679,462.171027 L12.4352833,464.543752 C12.4390636,467.943344 12.4609049,470.196572 12.5790787,472.349831 C12.6735441,474.637526 13.0226185,476.907641 13.6197043,479.117002 C14.5749758,483.153945 16.6149886,486.748754 19.4160901,489.575326 C22.2160058,492.400701 25.7763005,494.458558 29.7745226,495.424772 C31.9691557,496.029561 34.2238023,496.383332 36.4963747,496.479328 C38.8165059,496.609114 41.2524845,496.623894 45.1376167,496.625386 L207.785016,496.625115 C211.409267,496.622466 213.827119,496.603539 216.045392,496.479607 C218.315186,496.384037 220.567506,496.031377 222.759579,495.42824 C226.753167,494.465692 230.277773,492.414883 233.045718,489.598308 C235.822061,486.773186 237.837217,483.176851 238.796896,479.134958 C239.408372,476.922432 239.884421,474.644978 239.968452,472.35078 C240.096822,470.011514 240.111425,467.554568 240.112903,463.637423 L240.113079,94.605309 Z\"\n                        fill=\"#FFF\"\n                        stroke=\"#CCCDC9\"\n                        stroke-width=\"2.725\"\n                      />\n                      <g\n                        fill=\"#E4E4DF\"\n                        transform=\"translate(109.777 11.934)\"\n                      >\n                        <path\n                          d=\"M42.8910917,6.56372515 C41.0689305,6.56372515 39.591777,5.09438522 39.591777,3.28186257 C39.591777,1.46933992 41.0689305,0 42.8910917,0 C44.7132529,0 46.1904065,1.46933992 46.1904065,3.28186257 C46.1904065,5.09438522 44.7132529,6.56372515 42.8910917,6.56372515 Z\"\n                        />\n                        <rect\n                          height=\"2.984\"\n                          y=\"1.79\"\n                          width=\"33.593\"\n                          rx=\"1.492\"\n                        />\n                      </g>\n                      <g transform=\"translate(31 40)\">\n                        <g clip-path=\"url(#clip1_648_20203)\" transform=\"translate(-37, -35)\">\n                          <path\n                            d=\"M124.66 86.8807V74.5365H121.632V89.7988H131.387V86.8807H124.66Z\"\n                            fill=\"#212121\"\n                          />\n                          <path\n                            d=\"M140.172 74.2635C135.738 74.2635 132.291 77.7275 132.291 82.1362C132.291 86.5658 135.759 90.0088 140.172 90.0088C144.522 90.0088 148.052 86.4818 148.052 82.1362C148.052 77.8115 144.522 74.2635 140.172 74.2635ZM144.984 82.1571C144.984 84.9283 142.883 87.1116 140.172 87.1116C137.461 87.1116 135.339 84.9493 135.339 82.1571C135.339 79.386 137.461 77.2027 140.172 77.2027C142.883 77.2236 144.984 79.386 144.984 82.1571Z\"\n                            fill=\"#212121\"\n                          />\n