import * as i0 from '@angular/core';
import { inject, Injectable, Component, DestroyRef, ViewChild } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i3 from '@c8y/ngx-components';
import { FeatureCacheService, InterAppService, SupportedApps, CoreModule, C8yStepper, OperationResultComponent } from '@c8y/ngx-components';
import { gettext } from '@c8y/ngx-components/gettext';
import * as i1 from 'ngx-bootstrap/modal';
import { throttleTime } from 'rxjs/operators';
import * as i5 from '@angular/cdk/stepper';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import * as i4 from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { isEmpty } from 'lodash-es';
import { TrustedCertificateService, DeviceRegistrationService } from '@c8y/client';
import { TooltipDirective } from 'ngx-bootstrap/tooltip';
import * as i6 from '@angular/common';

class DeviceEnrolmentService {
    constructor() {
        this.trustedCertificateService = inject(TrustedCertificateService);
        this.deviceRegistrationService = inject(DeviceRegistrationService);
        this.featureCacheService = inject(FeatureCacheService);
    }
    async getRegistrationCode(name) {
        const available = await this.caAvailableAndConfigured();
        if (available) {
            const otp = this.generateSecurePassword();
            const host = window.location.hostname;
            const newDeviceReq = {
                id: name,
                name,
                enrollmentToken: otp,
                type: 'thin-edge.io'
            };
            try {
                await this.deviceRegistrationService.create(newDeviceReq);
            }
            catch (e) {
                const statusCode = e?.status || e?.res?.status;
                const errorType = e?.data?.error || e?.res?.error;
                if (statusCode === 422) {
                    if (errorType === 'devicecontrol/Non Unique Result') {
                        return {
                            error: gettext('Device ID already exists. Please choose a different name.'),
                            statusCode,
                            errorType: 'duplicate'
                        };
                    }
                    if (errorType === 'undefined/validationError') {
                        return {
                            error: gettext('Device ID cannot contain whitespace, slashes or any of (+$:). Please choose a different name.'),
                            statusCode,
                            errorType: 'validation'
                        };
                    }
                }
                throw e;
            }
            return {
                script: `curl -fsSL https://thin-edge.io/trial-linux.sh | sh -s -- --device-id "${name}" --c8y-url "${host}" --one-time-password '${otp}'`,
                docker: `curl -fsSL https://thin-edge.io/trial-linux-docker.sh | sh -s -- --device-id "${name}" --c8y-url "${host}" --one-time-password '${otp}'`
            };
        }
        return { error: gettext('Certificate authority not available.') };
    }
    generateSecurePassword(length = 32) {
        const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+;:,.<>?';
        let password = '';
        const crypto = window.crypto || window.msCrypto;
        const maxValidByte = 256 - (256 % charset.length);
        while (password.length < length) {
            const buffer = new Uint8Array(length - password.length);
            crypto.getRandomValues(buffer);
            for (let i = 0; i < buffer.length && password.length < length; i++) {
                const byte = buffer[i];
                if (byte < maxValidByte) {
                    password += charset[byte % charset.length];
                }
            }
        }
        return password;
    }
    async showQuicklink() {
        return this.featureCacheService.getFeatureStatePromise('certificate-authority');
    }
    async caAvailableAndConfigured() {
        try {
            const shouldShow = await this.featureCacheService.getFeatureStatePromise('certificate-authority');
            if (!shouldShow) {
                return false;
            }
            const { data: certs } = await this.trustedCertificateService.list({
                certificateAuthority: true
            });
            return (certs || []).some(c => c.status === 'ENABLED');
        }
        catch (e) {
            // ignore
            return false;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeviceEnrolmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeviceEnrolmentService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeviceEnrolmentService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

/**
 * Thin-edge.io illustration component
 *
 * Uses Cumulocity design tokens for colors:
 * - Light green: --c8y-brand-60 (#A5DAA5)
 * - Green: --c8y-brand-primary (#119D11)
 * - Dark green: --c8y-brand-30 (#0f880f)
 * - Light gray: --c8y-palette-gray-70 (#E3E5E8)
 * - Gray: --c8y-palette-gray-60 (#D4D9DE)
 * - Dark gray: --c8y-palette-gray-50 (#8B96A0)
 * - Stroke: #212121 (hardcoded black)
 *
 * Colors can be customized by setting CSS variables:
 * --te-illustration-light-green, --te-illustration-green, --te-illustration-dark-green,
 * --te-illustration-light-gray, --te-illustration-gray, --te-illustration-dark-gray,
 * --te-illustration-stroke, --te-illustration-bg, --te-illustration-shadow, --te-illustration-blue
 */
class ThinEdgeIllustrationComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ThinEdgeIllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ThinEdgeIllustrationComponent, isStandalone: true, selector: "c8y-thin-edge-illustration", ngImport: i0, template: `
    <svg viewBox="0 0 326 362" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect height="362" width="326" />
      <g opacity="0.05" filter="url(#filter0_f_1482_34959)">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M204.841 265.5L98.959 326L75.5763 312.5L181.458 252L204.841 265.5Z"
          fill="var(--te-illustration-shadow, black)"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M264.224 230.5L158.342 291L134.959 277.5L240.841 217L264.224 230.5Z"
          fill="var(--te-illustration-shadow, black)"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M141.378 286.16L209.205 247L139.923 207L72.0957 246.16L141.378 286.16Z"
          fill="var(--te-illustration-shadow, black)"
        />
      </g>
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M195.039 200.5L108.539 250.441L85.1562 236.941L171.656 187L195.039 200.5Z"
        fill="var(--te-illustration-light-gray, var(--c8y-palette-gray-70))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M120.519 208.223L83.3417 272.622L59.959 259.122L97.1361 194.723L120.519 208.223Z"
        fill="var(--te-illustration-gray, var(--c8y-palette-gray-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        d="M120.519 294.089L83.3379 272.622L89.8738 261.302V261.217L89.9474 261.174L120.519 208.223L129.814 213.589L108.538 250.441L195.038 200.5V215.679L108.464 265.662L129.814 277.989L120.519 294.089Z"
        fill="var(--te-illustration-dark-gray, var(--c8y-palette-gray-50))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M232.862 107.5L223.566 123.6L200.184 110.1L209.479 94L232.862 107.5Z"
        fill="var(--te-illustration-gray, var(--c8y-palette-gray-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M232.861 193.366L263.433 140.414L240.05 126.914L209.479 179.866L232.861 193.366Z"
        fill="var(--te-illustration-gray, var(--c8y-palette-gray-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M270.042 128.966L232.861 107.5L223.565 123.6L244.915 135.926L158.342 185.91V201.089L244.842 151.148L223.565 187.999L232.861 193.366L263.432 140.415L263.506 140.372V140.287L270.042 128.966Z"
        fill="var(--te-illustration-dark-gray, var(--c8y-palette-gray-50))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M244.915 135.926L158.342 185.909L134.959 172.409L221.533 122.426L244.915 135.926Z"
        fill="var(--te-illustration-light-gray, var(--c8y-palette-gray-70))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M158.342 185.909V201.088L134.959 187.588V172.409L158.342 185.909Z"
        fill="var(--te-illustration-gray, var(--c8y-palette-gray-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M125.241 115.16L193.068 76L123.786 36L55.959 75.16L125.241 115.16Z"
        fill="var(--te-illustration-light-green, var(--c8y-brand-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M193.068 154.32L125.241 193.48L55.959 153.48L123.786 114.32L193.068 154.32Z"
        fill="var(--te-illustration-blue, #6580E1)"
        fill-opacity="0.6"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M125.241 193.48V115.16L55.959 75.1602V153.48L125.241 193.48Z"
        fill="var(--te-illustration-green, var(--c8y-brand-primary))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <path
        d="M125.24 115.16L193.067 76V154.32L125.24 193.48V115.16Z"
        fill="var(--te-illustration-dark-green, var(--c8y-brand-30))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <path
        d="M148.292 117.821V127.546L159.298 121.192V125.918L148.292 132.272V152.338L148.295 152.569C148.332 154.076 148.738 155.009 149.512 155.366C150.221 155.694 151.133 155.582 152.249 155.032L150.085 161.3C148.432 161.973 147.031 162.075 145.883 161.605C144.405 161 143.624 159.245 143.539 156.339L143.533 156.045V135.02L137.584 138.454V133.729L143.533 130.294V122.076L148.292 117.821ZM179.995 113.24C182.557 114.799 183.839 118.318 183.839 123.8C183.839 125.242 183.753 126.498 183.582 127.566L183.541 127.809L163.218 139.543L163.261 139.794C163.596 141.607 164.267 142.704 165.274 143.083C166.327 143.48 167.727 143.174 169.476 142.165C170.946 141.316 172.148 140.303 173.081 139.124C173.96 138.015 174.566 136.8 174.899 135.48L174.959 135.231L183.183 133.497L183.1 133.826C182.243 137.106 180.652 140.158 178.326 142.982C175.922 145.9 172.972 148.369 169.476 150.387C164.409 153.313 160.5 154.098 157.749 152.743L164.799 132.326L174.363 126.804C173.886 122.603 172.058 121.42 168.88 123.255C168.443 123.507 168.03 123.787 167.641 124.094L171.162 113.9C174.898 112.152 177.842 111.932 179.995 113.24ZM175.011 95.9238C176.313 95.9225 176.842 97.4425 176.194 99.3201L151.938 169.579C151.291 171.454 149.712 172.977 148.412 172.98L148.409 172.98C147.108 172.982 146.579 171.462 147.227 169.584L171.482 99.3251C172.13 97.4498 173.709 95.927 175.009 95.9238H175.011Z"
        fill="var(--te-illustration-light-green, var(--c8y-brand-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <defs>
        <filter
          id="filter0_f_1482_34959"
          height="135"
          x="64.0957"
          y="199"
          width="208.129"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_1482_34959" />
        </filter>
      </defs>
    </svg>
  `, isInline: true, styles: [":host{display:block}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ThinEdgeIllustrationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-thin-edge-illustration', template: `
    <svg viewBox="0 0 326 362" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect height="362" width="326" />
      <g opacity="0.05" filter="url(#filter0_f_1482_34959)">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M204.841 265.5L98.959 326L75.5763 312.5L181.458 252L204.841 265.5Z"
          fill="var(--te-illustration-shadow, black)"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M264.224 230.5L158.342 291L134.959 277.5L240.841 217L264.224 230.5Z"
          fill="var(--te-illustration-shadow, black)"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M141.378 286.16L209.205 247L139.923 207L72.0957 246.16L141.378 286.16Z"
          fill="var(--te-illustration-shadow, black)"
        />
      </g>
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M195.039 200.5L108.539 250.441L85.1562 236.941L171.656 187L195.039 200.5Z"
        fill="var(--te-illustration-light-gray, var(--c8y-palette-gray-70))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M120.519 208.223L83.3417 272.622L59.959 259.122L97.1361 194.723L120.519 208.223Z"
        fill="var(--te-illustration-gray, var(--c8y-palette-gray-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        d="M120.519 294.089L83.3379 272.622L89.8738 261.302V261.217L89.9474 261.174L120.519 208.223L129.814 213.589L108.538 250.441L195.038 200.5V215.679L108.464 265.662L129.814 277.989L120.519 294.089Z"
        fill="var(--te-illustration-dark-gray, var(--c8y-palette-gray-50))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M232.862 107.5L223.566 123.6L200.184 110.1L209.479 94L232.862 107.5Z"
        fill="var(--te-illustration-gray, var(--c8y-palette-gray-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M232.861 193.366L263.433 140.414L240.05 126.914L209.479 179.866L232.861 193.366Z"
        fill="var(--te-illustration-gray, var(--c8y-palette-gray-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M270.042 128.966L232.861 107.5L223.565 123.6L244.915 135.926L158.342 185.91V201.089L244.842 151.148L223.565 187.999L232.861 193.366L263.432 140.415L263.506 140.372V140.287L270.042 128.966Z"
        fill="var(--te-illustration-dark-gray, var(--c8y-palette-gray-50))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M244.915 135.926L158.342 185.909L134.959 172.409L221.533 122.426L244.915 135.926Z"
        fill="var(--te-illustration-light-gray, var(--c8y-palette-gray-70))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M158.342 185.909V201.088L134.959 187.588V172.409L158.342 185.909Z"
        fill="var(--te-illustration-gray, var(--c8y-palette-gray-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="round"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M125.241 115.16L193.068 76L123.786 36L55.959 75.16L125.241 115.16Z"
        fill="var(--te-illustration-light-green, var(--c8y-brand-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M193.068 154.32L125.241 193.48L55.959 153.48L123.786 114.32L193.068 154.32Z"
        fill="var(--te-illustration-blue, #6580E1)"
        fill-opacity="0.6"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M125.241 193.48V115.16L55.959 75.1602V153.48L125.241 193.48Z"
        fill="var(--te-illustration-green, var(--c8y-brand-primary))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <path
        d="M125.24 115.16L193.067 76V154.32L125.24 193.48V115.16Z"
        fill="var(--te-illustration-dark-green, var(--c8y-brand-30))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <path
        d="M148.292 117.821V127.546L159.298 121.192V125.918L148.292 132.272V152.338L148.295 152.569C148.332 154.076 148.738 155.009 149.512 155.366C150.221 155.694 151.133 155.582 152.249 155.032L150.085 161.3C148.432 161.973 147.031 162.075 145.883 161.605C144.405 161 143.624 159.245 143.539 156.339L143.533 156.045V135.02L137.584 138.454V133.729L143.533 130.294V122.076L148.292 117.821ZM179.995 113.24C182.557 114.799 183.839 118.318 183.839 123.8C183.839 125.242 183.753 126.498 183.582 127.566L183.541 127.809L163.218 139.543L163.261 139.794C163.596 141.607 164.267 142.704 165.274 143.083C166.327 143.48 167.727 143.174 169.476 142.165C170.946 141.316 172.148 140.303 173.081 139.124C173.96 138.015 174.566 136.8 174.899 135.48L174.959 135.231L183.183 133.497L183.1 133.826C182.243 137.106 180.652 140.158 178.326 142.982C175.922 145.9 172.972 148.369 169.476 150.387C164.409 153.313 160.5 154.098 157.749 152.743L164.799 132.326L174.363 126.804C173.886 122.603 172.058 121.42 168.88 123.255C168.443 123.507 168.03 123.787 167.641 124.094L171.162 113.9C174.898 112.152 177.842 111.932 179.995 113.24ZM175.011 95.9238C176.313 95.9225 176.842 97.4425 176.194 99.3201L151.938 169.579C151.291 171.454 149.712 172.977 148.412 172.98L148.409 172.98C147.108 172.982 146.579 171.462 147.227 169.584L171.482 99.3251C172.13 97.4498 173.709 95.927 175.009 95.9238H175.011Z"
        fill="var(--te-illustration-light-green, var(--c8y-brand-60))"
        stroke="var(--te-illustration-stroke, #212121)"
        stroke-linejoin="bevel"
      />
      <defs>
        <filter
          id="filter0_f_1482_34959"
          height="135"
          x="64.0957"
          y="199"
          width="208.129"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_1482_34959" />
        </filter>
      </defs>
    </svg>
  `, styles: [":host{display:block}\n"] }]
        }] });

class DeviceEnrolmentModalComponent {
    constructor(bsModalRef, renderer, deviceEnrolmentService, clipboardService, gainsightService) {
        this.bsModalRef = bsModalRef;
        this.renderer = renderer;
        this.deviceEnrolmentService = deviceEnrolmentService;
        this.clipboardService = clipboardService;
        this.gainsightService = gainsightService;
        this.success = undefined;
        this.waitOrRetry = gettext('Waiting');
        this.connectSmartphoneTitle = gettext('Connect your device to our IoT platform');
        this.enterDeviceName = gettext('Name your device');
        this.generateCodeTitle = gettext('Run the connection command');
        this.resultTitle = gettext('Result');
        this.gainsightStepName = ['WizardIntro', 'DeviceName', 'CodeGeneration'];
        this.destroyRef = inject(DestroyRef);
        this.interAppService = inject(InterAppService);
        this.codeDevice = '';
        this.codeContainer = '';
        this.errorMessage = '';
        this.externalId = this.generateDeviceId();
        this.isCodeRequestPending = false;
        this.hasDeviceIdError = false;
        this.isCAAvailable = this.deviceEnrolmentService.caAvailableAndConfigured();
    }
    ngAfterViewInit() {
        this.stepper.selectionChange
            .pipe(throttleTime(100), takeUntilDestroyed(this.destroyRef))
            .subscribe((stepper) => this.onStepperSelectionChange(stepper));
        this.gainsightService.triggerEvent('thinEdge', {
            result: 'viewingWizardStepOpen',
            stepName: 'WizardOpened'
        });
    }
    onStepperSelectionChange(stepper) {
        const GENERATE_CODE_STEP_INDEX = 2;
        if (stepper.selectedIndex === GENERATE_CODE_STEP_INDEX) {
            if (isEmpty(this.codeDevice) && isEmpty(this.codeContainer)) {
                this.generateCode();
            }
        }
        this.gainsightService.triggerEvent('thinEdge', {
            result: `viewingWizardStep${stepper.selectedIndex}`,
            stepName: this.gainsightStepName[stepper.selectedIndex - 1]
        });
    }
    onComplete() {
        this.stepper.setIndex(3);
        this.success = true;
    }
    generateDeviceId() {
        return 'iotgw' + Math.floor(Math.random() * 100000);
    }
    back() {
        this.stepper.previous();
    }
    next($event) {
        const { step } = $event;
        step.completed = true;
        this.stepper.next();
    }
    cancel() {
        this.bsModalRef.hide();
        this.gainsightService.triggerEvent('thinEdge', {
            result: 'viewingWizardStepCancel',
            stepName: 'Cancel'
        });
    }
    close() {
        this.bsModalRef.hide();
        this.gainsightService.triggerEvent('thinEdge', {
            result: 'viewingWizardStepClose',
            stepName: 'Close'
        });
    }
    retry() {
        this.success = undefined;
        this.errorMessage = '';
        this.codeDevice = '';
        this.codeContainer = '';
        this.waitOrRetry = gettext('Retrying');
        // If duplicate device ID error (422), go back to device name step
        // Otherwise, navigate back to code generation step
        if (this.hasDeviceIdError) {
            this.hasDeviceIdError = false;
            this.externalId = this.generateDeviceId();
            this.stepper.setIndex(1);
        }
        else {
            // The onStepperSelectionChange will automatically call generateCode()
            this.stepper.setIndex(2);
        }
    }
    async generateCode() {
        this.hasDeviceIdError = false;
        try {
            this.isCodeRequestPending = true;
            const data = await this.deviceEnrolmentService.getRegistrationCode(this.externalId);
            if (data?.error) {
                this.errorMessage = data?.error;
                this.hasDeviceIdError = data?.statusCode === 422;
                this.success = false;
                this.stepper.setIndex(3);
            }
            else {
                this.codeDevice = data?.script || '';
                this.codeContainer = data?.docker || '';
                this.errorMessage = '';
            }
        }
        catch (e) {
            this.errorMessage = e.message || JSON.stringify(e);
            this.success = false;
            this.stepper.setIndex(3);
        }
        finally {
            this.isCodeRequestPending = false;
        }
    }
    copyIt(text) {
        this.clipboardService.writeText(text);
    }
    manageCertificates() {
        this.interAppService.navigateToApp(SupportedApps.devicemanagement, '#/trusted-certificates/certificates');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeviceEnrolmentModalComponent, deps: [{ token: i1.BsModalRef }, { token: i0.Renderer2 }, { token: DeviceEnrolmentService }, { token: i3.ClipboardService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeviceEnrolmentModalComponent, isStandalone: true, selector: "c8y-device-enrolment", providers: [
            {
                provide: STEPPER_GLOBAL_OPTIONS,
                useValue: { showError: true, displayDefaultIndicatorType: false }
            }
        ], viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-device-connect'\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n    >\n      Try thin-edge.io\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\n        class=\"p-l-40 p-r-40\"\n        style=\"min-height: 420px\"\n      >\n        <h4\n          class=\"p-t-24 m-b-24 animated text-center fadeInUp\"\n          style=\"animation-delay: 0.3s\"\n          translate\n        >\n          Connect your thin-edge.io device\n        </h4>\n        <div class=\"row overflow-hidden d-flex\">\n          <div class=\"col-xs-7\">\n            <p\n              class=\"m-b-16 lead animated fadeInUp\"\n              style=\"animation-delay: 0.5s\"\n              translate\n            >\n              To get more from Cumulocity, connect a thin-edge.io device or a container on your\n              computer. This wizard will automatically connect it so you can use Cumulocity's device\n              management features.\n            </p>\n            <div\n              class=\"m-b-16 animated fadeInUp\"\n              style=\"animation-delay: 0.75s\"\n              translate\n            >\n              <p>Before you begin, please have one of the following ready:</p>\n              <ul class=\"p-l-16\">\n                <li>A computer with Docker installed (to simulate a device), or</li>\n                <li>A physical Linux IoT device.</li>\n              </ul>\n            </div>\n            @if ((isCAAvailable | async) === false) {\n              <div\n                class=\"alert alert-warning animated fadeInUp\"\n                style=\"animation-delay: 0.85s\"\n              >\n                <p\n                  class=\"m-b-16\"\n                  translate\n                >\n                  Additionally, a trusted CA certificate must be available and enabled.\n                </p>\n                <button\n                  class=\"btn btn-default btn-sm\"\n                  type=\"button\"\n                  (click)=\"manageCertificates()\"\n                  translate\n                >\n                  Manage certificates\n                </button>\n              </div>\n            } @else {\n              <p\n                class=\"m-b-16 animated fadeInUp\"\n                style=\"animation-delay: 1s\"\n                translate\n              >\n                Click\n                <strong>Next</strong>\n                to continue.\n              </p>\n            }\n          </div>\n          <div\n            class=\"col-xs-5 no-gutter animated zoomIn\"\n            style=\"animation-delay: 0.4s\"\n          >\n            <c8y-thin-edge-illustration />\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        [disabled]=\"(isCAAvailable | async) === false\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step [label]=\"enterDeviceName\">\n      <div\n        class=\"p-l-24 p-r-24\"\n        style=\"min-height: 420px\"\n      >\n        <div class=\"p-l-40 p-r-40\">\n          <h4\n            class=\"p-t-24 m-b-24 text-center animated fadeInUp\"\n            style=\"animation-delay: 0.3s\"\n          >\n            {{ enterDeviceName | translate }}\n          </h4>\n          <p\n            class=\"p-b-24 animated fadeInUp\"\n            style=\"animation-delay: 0.5s\"\n            translate\n          >\n            Choose a unique name for your device. We've generated a suggestion, which you can change\n            if you like. This name identifies the device in your Cumulocity tenant.\n          </p>\n          <div\n            class=\"animated fadeInUp\"\n            style=\"animation-delay: 0.7s\"\n          >\n            <!-- Enter device name -->\n            <div class=\"form-group\">\n              <label translate>Device name</label>\n              <input\n                class=\"form-control\"\n                [(ngModel)]=\"externalId\"\n              />\n            </div>\n          </div>\n\n          <p\n            class=\"animated fadeInUp\"\n            style=\"animation-delay: 0.9s\"\n            translate\n          >\n            Enter the device name and click\n            <strong>Next</strong>.\n          </p>\n        </div>\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\n    <cdk-step [label]=\"generateCodeTitle\">\n      @if (errorMessage?.length === 0) {\n        <div\n          class=\"p-l-24 p-r-24\"\n          style=\"min-height: 420px\"\n        >\n          <div class=\"p-l-40 p-r-40\">\n            <h4\n              class=\"text-center p-t-24 m-b-8 animated fadeInUp\"\n              style=\"animation-delay: 0.3s\"\n            >\n              {{ generateCodeTitle | translate }}\n            </h4>\n            <p\n              class=\"p-b-8 animated fadeInUp\"\n              style=\"animation-delay: 0.5s\"\n              translate\n            >\n              Choose the option that matches your setup. Copy the entire command and run it in the\n              appropriate terminal on your computer or device.\n            </p>\n            <fieldset\n              class=\"c8y-fieldset animated fadeInUp\"\n              style=\"animation-delay: 0.7s\"\n            >\n              <legend\n                class=\"d-flex a-i-center gap-4\"\n                title=\"Docker\"\n                data-cy=\"asset-properties-label\"\n              >\n                <svg\n                  class=\"max-width-fit\"\n                  style=\"max-height: 18px\"\n                  viewBox=\"0 0 512 512\"\n                >\n                  <path\n                    stroke=\"currentColor\"\n                    stroke-width=\"38\"\n                    d=\"M296 226h42m-92 0h42m-91 0h42m-91 0h41m-91 0h42m8-46h41m8 0h42m7 0h42m-42-46h42\"\n                  />\n                  <path\n                    fill=\"currentColor\"\n                    d=\"m472 228s-18-17-55-11c-4-29-35-46-35-46s-29 35-8 74c-6 3-16 7-31 7H68c-5 19-5 145 133 145 99 0 173-46 208-130 52 4 63-39 63-39\"\n                  />\n                </svg>\n                <span>Docker</span>\n              </legend>\n              <p\n                class=\"m-b-8\"\n                translate\n              >\n                For connecting a simulated device, run this command on your computer with\n                Docker`KEEP_ORIGINAL` installed. It will install the\n                <a\n                  href=\"https://github.com/thin-edge/tedge-demo-container\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  >tedge-demo-container</a\n                >.\n              </p>\n              <div class=\"input-group m-b-16\">\n                <div class=\"form-control\">\n                  <code\n                    class=\"text-truncate\"\n                    title=\"{{ codeContainer || '-- code --' }}\"\n                  >\n                    {{ codeContainer || '-- code --' }}\n                  </code>\n                </div>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Copy' | translate\"\n                    tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    data-cy=\"asset-properties-edit-icon\"\n                    (click)=\"copyIt(codeContainer)\"\n                    [adaptivePosition]=\"false\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"copy\"></i>\n                  </button>\n                </div>\n              </div>\n            </fieldset>\n            <fieldset\n              class=\"c8y-fieldset animated fadeInUp\"\n              style=\"animation-delay: 0.9s\"\n            >\n              <legend\n                class=\"d-flex a-i-center gap-4\"\n                title=\"{{ 'Device' | translate }}\"\n                data-cy=\"asset-properties-label\"\n              >\n                <i c8yIcon=\"exchange\"></i>\n                {{ 'Device' | translate }}\n              </legend>\n              <p\n                class=\"p-b-8\"\n                translate\n              >\n                For connecting a physical Linux IoT device, run this command in the device's\n                terminal.\n              </p>\n\n              <div class=\"input-group m-b-16\">\n                <div class=\"form-control\">\n                  <code\n                    class=\"text-truncate\"\n                    title=\"{{ codeDevice || '-- code --' }}\"\n                  >\n                    {{ codeDevice || '-- code --' }}\n                  </code>\n                </div>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Copy' | translate\"\n                    tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    data-cy=\"asset-properties-edit-icon\"\n                    (click)=\"copyIt(codeDevice)\"\n                    [adaptivePosition]=\"false\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"copy\"></i>\n                  </button>\n                </div>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <div class=\"modal-footer d-block bg-component separator-top sticky-bottom animated fadeIn\">\n          @if (isCodeRequestPending) {\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Cancel' | translate }}\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Cancel' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary btn-pending\"\n              title=\"{{ waitOrRetry | translate }}\"\n              type=\"button\"\n            >\n              {{ waitOrRetry | translate }}\n            </button>\n          }\n\n          @if (!isCodeRequestPending && (codeContainer.length || codeDevice.length)) {\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Complete' | translate }}\"\n              type=\"button\"\n              (click)=\"onComplete()\"\n            >\n              {{ 'Complete' | translate }}\n            </button>\n          }\n        </div>\n      }\n    </cdk-step>\n\n    <cdk-step [label]=\"resultTitle\">\n      <!-- SUCCESS STATE -->\n      @if (success) {\n        <div\n          class=\"p-t-24\"\n          style=\"min-height: 420px\"\n        >\n          <div class=\"p-l-24 p-r-24 text-center\">\n            <c8y-operation-result\n              type=\"success\"\n              text=\"Setup completed\"\n              [size]=\"96\"\n              [vertical]=\"true\"\n            ></c8y-operation-result>\n            <div class=\"p-l-40 p-r-40\">\n              <h4\n                class=\"m-b-16 animated fadeInUp\"\n                style=\"animation-delay: 0.5s\"\n              >\n                <strong translate>Device enrollment completed</strong>\n              </h4>\n              <p\n                class=\"p-b-8 lead animated fadeInUp text-balance\"\n                style=\"animation-delay: 0.75s\"\n                translate\n              >\n                Your device is now connected and sending data to your Cumulocity tenant.\n              </p>\n              <p\n                class=\"animated fadeInUp text-balance\"\n                style=\"animation-delay: 0.75s\"\n                translate\n              >\n                Click\n                <strong>Close</strong>\n                to view your newly registered device in the device list.\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"modal-footer d-block bg-component separator-top sticky-bottom text-center\">\n          <div\n            class=\"text-center animated fadeInUp\"\n            style=\"animation-delay: 1s\"\n          >\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Close' | translate }}\"\n              type=\"button\"\n              (click)=\"close()\"\n            >\n              {{ 'Close' | translate }}\n            </button>\n          </div>\n        </div>\n      }\n\n      <!-- ERROR STATE -->\n      @if (success === false && errorMessage?.length > 0) {\n        <div\n          class=\"p-t-24\"\n          style=\"min-height: 420px\"\n        >\n          <div class=\"p-l-24 p-r-24 text-center\">\n            <c8y-operation-result\n              type=\"error\"\n              text=\"Setup failed\"\n              [size]=\"96\"\n              [vertical]=\"true\"\n            ></c8y-operation-result>\n            <div class=\"p-l-40 p-r-40\">\n              <h4\n                class=\"m-b-16 animated fadeInUp\"\n                style=\"animation-delay: 0.5s\"\n              >\n                <strong>{{ 'Device enrollment failed' | translate }}</strong>\n              </h4>\n              @if (errorMessage?.length) {\n                <div\n                  class=\"animated fadeInUp\"\n                  style=\"animation-delay: 0.75s\"\n                >\n                  <div class=\"alert alert-danger\">\n                    <p class=\"p-b-16 text-medium\">\n                      {{ 'The following error occurred:' | translate }}\n                    </p>\n                    <pre class=\"inner-scroll\">{{ errorMessage }}</pre>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"modal-footer d-block bg-component separator-top sticky-bottom text-center\">\n          <div\n            class=\"animated fadeIn col-xs-4 text-center fit-w\"\n            style=\"animation-delay: 1s\"\n          >\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Close' | translate }}\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Close' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Retry' | translate }}\"\n              type=\"button\"\n              (click)=\"retry()\"\n            >\n              {{ 'Retry' | translate }}\n            </button>\n          </div>\n        </div>\n      }\n    </cdk-step>\n  </c8y-stepper>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i5.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i3.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ThinEdgeIllustrationComponent, selector: "c8y-thin-edge-illustration" }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeviceEnrolmentModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-device-enrolment', imports: [
                        CoreModule,
                        ReactiveFormsModule,
                        ThinEdgeIllustrationComponent,
                        OperationResultComponent,
                        TooltipDirective
                    ], providers: [
                        {
                            provide: STEPPER_GLOBAL_OPTIONS,
                            useValue: { showError: true, displayDefaultIndicatorType: false }
                        }
                    ], template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-device-connect'\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n    >\n      Try thin-edge.io\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\n        class=\"p-l-40 p-r-40\"\n        style=\"min-height: 420px\"\n      >\n        <h4\n          class=\"p-t-24 m-b-24 animated text-center fadeInUp\"\n          style=\"animation-delay: 0.3s\"\n          translate\n        >\n          Connect your thin-edge.io device\n        </h4>\n        <div class=\"row overflow-hidden d-flex\">\n          <div class=\"col-xs-7\">\n            <p\n              class=\"m-b-16 lead animated fadeInUp\"\n              style=\"animation-delay: 0.5s\"\n              translate\n            >\n              To get more from Cumulocity, connect a thin-edge.io device or a container on your\n              computer. This wizard will automatically connect it so you can use Cumulocity's device\n              management features.\n            </p>\n            <div\n              class=\"m-b-16 animated fadeInUp\"\n              style=\"animation-delay: 0.75s\"\n              translate\n            >\n              <p>Before you begin, please have one of the following ready:</p>\n              <ul class=\"p-l-16\">\n                <li>A computer with Docker installed (to simulate a device), or</li>\n                <li>A physical Linux IoT device.</li>\n              </ul>\n            </div>\n            @if ((isCAAvailable | async) === false) {\n              <div\n                class=\"alert alert-warning animated fadeInUp\"\n                style=\"animation-delay: 0.85s\"\n              >\n                <p\n                  class=\"m-b-16\"\n                  translate\n                >\n                  Additionally, a trusted CA certificate must be available and enabled.\n                </p>\n                <button\n                  class=\"btn btn-default btn-sm\"\n                  type=\"button\"\n                  (click)=\"manageCertificates()\"\n                  translate\n                >\n                  Manage certificates\n                </button>\n              </div>\n            } @else {\n              <p\n                class=\"m-b-16 animated fadeInUp\"\n                style=\"animation-delay: 1s\"\n                translate\n              >\n                Click\n                <strong>Next</strong>\n                to continue.\n              </p>\n            }\n          </div>\n          <div\n            class=\"col-xs-5 no-gutter animated zoomIn\"\n            style=\"animation-delay: 0.4s\"\n          >\n            <c8y-thin-edge-illustration />\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        [disabled]=\"(isCAAvailable | async) === false\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step [label]=\"enterDeviceName\">\n      <div\n        class=\"p-l-24 p-r-24\"\n        style=\"min-height: 420px\"\n      >\n        <div class=\"p-l-40 p-r-40\">\n          <h4\n            class=\"p-t-24 m-b-24 text-center animated fadeInUp\"\n            style=\"animation-delay: 0.3s\"\n          >\n            {{ enterDeviceName | translate }}\n          </h4>\n          <p\n            class=\"p-b-24 animated fadeInUp\"\n            style=\"animation-delay: 0.5s\"\n            translate\n          >\n            Choose a unique name for your device. We've generated a suggestion, which you can change\n            if you like. This name identifies the device in your Cumulocity tenant.\n          </p>\n          <div\n            class=\"animated fadeInUp\"\n            style=\"animation-delay: 0.7s\"\n          >\n            <!-- Enter device name -->\n            <div class=\"form-group\">\n              <label translate>Device name</label>\n              <input\n                class=\"form-control\"\n                [(ngModel)]=\"externalId\"\n              />\n            </div>\n          </div>\n\n          <p\n            class=\"animated fadeInUp\"\n            style=\"animation-delay: 0.9s\"\n            translate\n          >\n            Enter the device name and click\n            <strong>Next</strong>.\n          </p>\n        </div>\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\n    <cdk-step [label]=\"generateCodeTitle\">\n      @if (errorMessage?.length === 0) {\n        <div\n          class=\"p-l-24 p-r-24\"\n          style=\"min-height: 420px\"\n        >\n          <div class=\"p-l-40 p-r-40\">\n            <h4\n              class=\"text-center p-t-24 m-b-8 animated fadeInUp\"\n              style=\"animation-delay: 0.3s\"\n            >\n              {{ generateCodeTitle | translate }}\n            </h4>\n            <p\n              class=\"p-b-8 animated fadeInUp\"\n              style=\"animation-delay: 0.5s\"\n              translate\n            >\n              Choose the option that matches your setup. Copy the entire command and run it in the\n              appropriate terminal on your computer or device.\n            </p>\n            <fieldset\n              class=\"c8y-fieldset animated fadeInUp\"\n              style=\"animation-delay: 0.7s\"\n            >\n              <legend\n                class=\"d-flex a-i-center gap-4\"\n                title=\"Docker\"\n                data-cy=\"asset-properties-label\"\n              >\n                <svg\n                  class=\"max-width-fit\"\n                  style=\"max-height: 18px\"\n                  viewBox=\"0 0 512 512\"\n                >\n                  <path\n                    stroke=\"currentColor\"\n                    stroke-width=\"38\"\n                    d=\"M296 226h42m-92 0h42m-91 0h42m-91 0h41m-91 0h42m8-46h41m8 0h42m7 0h42m-42-46h42\"\n                  />\n                  <path\n                    fill=\"currentColor\"\n                    d=\"m472 228s-18-17-55-11c-4-29-35-46-35-46s-29 35-8 74c-6 3-16 7-31 7H68c-5 19-5 145 133 145 99 0 173-46 208-130 52 4 63-39 63-39\"\n                  />\n                </svg>\n                <span>Docker</span>\n              </legend>\n              <p\n                class=\"m-b-8\"\n                translate\n              >\n                For connecting a simulated device, run this command on your computer with\n                Docker`KEEP_ORIGINAL` installed. It will install the\n                <a\n                  href=\"https://github.com/thin-edge/tedge-demo-container\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  >tedge-demo-container</a\n                >.\n              </p>\n              <div class=\"input-group m-b-16\">\n                <div class=\"form-control\">\n                  <code\n                    class=\"text-truncate\"\n                    title=\"{{ codeContainer || '-- code --' }}\"\n                  >\n                    {{ codeContainer || '-- code --' }}\n                  </code>\n                </div>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Copy' | translate\"\n                    tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    data-cy=\"asset-properties-edit-icon\"\n                    (click)=\"copyIt(codeContainer)\"\n                    [adaptivePosition]=\"false\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"copy\"></i>\n                  </button>\n                </div>\n              </div>\n            </fieldset>\n            <fieldset\n              class=\"c8y-fieldset animated fadeInUp\"\n              style=\"animation-delay: 0.9s\"\n            >\n              <legend\n                class=\"d-flex a-i-center gap-4\"\n                title=\"{{ 'Device' | translate }}\"\n                data-cy=\"asset-properties-label\"\n              >\n                <i c8yIcon=\"exchange\"></i>\n                {{ 'Device' | translate }}\n              </legend>\n              <p\n                class=\"p-b-8\"\n                translate\n              >\n                For connecting a physical Linux IoT device, run this command in the device's\n                terminal.\n              </p>\n\n              <div class=\"input-group m-b-16\">\n                <div class=\"form-control\">\n                  <code\n                    class=\"text-truncate\"\n                    title=\"{{ codeDevice || '-- code --' }}\"\n                  >\n                    {{ codeDevice || '-- code --' }}\n                  </code>\n                </div>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Copy' | translate\"\n                    tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    data-cy=\"asset-properties-edit-icon\"\n                    (click)=\"copyIt(codeDevice)\"\n                    [adaptivePosition]=\"false\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"copy\"></i>\n                  </button>\n                </div>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <div class=\"modal-footer d-block bg-component separator-top sticky-bottom animated fadeIn\">\n          @if (isCodeRequestPending) {\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Cancel' | translate }}\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Cancel' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary btn-pending\"\n              title=\"{{ waitOrRetry | translate }}\"\n              type=\"button\"\n            >\n              {{ waitOrRetry | translate }}\n            </button>\n          }\n\n          @if (!isCodeRequestPending && (codeContainer.length || codeDevice.length)) {\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Complete' | translate }}\"\n              type=\"button\"\n              (click)=\"onComplete()\"\n            >\n              {{ 'Complete' | translate }}\n            </button>\n          }\n        </div>\n      }\n    </cdk-step>\n\n    <cdk-step [label]=\"resultTitle\">\n      <!-- SUCCESS STATE -->\n      @if (success) {\n        <div\n          class=\"p-t-24\"\n          style=\"min-height: 420px\"\n        >\n          <div class=\"p-l-24 p-r-24 text-center\">\n            <c8y-operation-result\n              type=\"success\"\n              text=\"Setup completed\"\n              [size]=\"96\"\n              [vertical]=\"true\"\n            ></c8y-operation-result>\n            <div class=\"p-l-40 p-r-40\">\n              <h4\n                class=\"m-b-16 animated fadeInUp\"\n                style=\"animation-delay: 0.5s\"\n              >\n                <strong translate>Device enrollment completed</strong>\n              </h4>\n              <p\n                class=\"p-b-8 lead animated fadeInUp text-balance\"\n                style=\"animation-delay: 0.75s\"\n                translate\n              >\n                Your device is now connected and sending data to your Cumulocity tenant.\n              </p>\n              <p\n                class=\"animated fadeInUp text-balance\"\n                style=\"animation-delay: 0.75s\"\n                translate\n              >\n                Click\n                <strong>Close</strong>\n                to view your newly registered device in the device list.\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"modal-footer d-block bg-component separator-top sticky-bottom text-center\">\n          <div\n            class=\"text-center animated fadeInUp\"\n            style=\"animation-delay: 1s\"\n          >\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Close' | translate }}\"\n              type=\"button\"\n              (click)=\"close()\"\n            >\n              {{ 'Close' | translate }}\n            </button>\n          </div>\n        </div>\n      }\n\n      <!-- ERROR STATE -->\n      @if (success === false && errorMessage?.length > 0) {\n        <div\n          class=\"p-t-24\"\n          style=\"min-height: 420px\"\n        >\n          <div class=\"p-l-24 p-r-24 text-center\">\n            <c8y-operation-result\n              type=\"error\"\n              text=\"Setup failed\"\n              [size]=\"96\"\n              [vertical]=\"true\"\n            ></c8y-operation-result>\n            <div class=\"p-l-40 p-r-40\">\n              <h4\n                class=\"m-b-16 animated fadeInUp\"\n                style=\"animation-delay: 0.5s\"\n              >\n                <strong>{{ 'Device enrollment failed' | translate }}</strong>\n              </h4>\n              @if (errorMessage?.length) {\n                <div\n                  class=\"animated fadeInUp\"\n                  style=\"animation-delay: 0.75s\"\n                >\n                  <div class=\"alert alert-danger\">\n                    <p class=\"p-b-16 text-medium\">\n                      {{ 'The following error occurred:' | translate }}\n                    </p>\n                    <pre class=\"inner-scroll\">{{ errorMessage }}</pre>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"modal-footer d-block bg-component separator-top sticky-bottom text-center\">\n          <div\n            class=\"animated fadeIn col-xs-4 text-center fit-w\"\n            style=\"animation-delay: 1s\"\n          >\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Close' | translate }}\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Close' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Retry' | translate }}\"\n              type=\"button\"\n              (click)=\"retry()\"\n            >\n              {{ 'Retry' | translate }}\n            </button>\n          </div>\n        </div>\n      }\n    </cdk-step>\n  </c8y-stepper>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i0.Renderer2 }, { type: DeviceEnrolmentService }, { type: i3.ClipboardService }, { type: i3.GainsightService }], propDecorators: { stepper: [{
                type: ViewChild,
                args: [C8yStepper, { static: false }]
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { DeviceEnrolmentModalComponent };
//# sourceMappingURL=c8y-ngx-components-device-enrolment-modal.mjs.map
