import { Component, HostBinding, Input, Optional, ViewChild } from '@angular/core';
import { BottomDrawerRef, C8yStepper, CoreModule, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, gettext, ModalService, Status, UserPreferencesConfigurationStrategy } from '@c8y/ngx-components';
import { DeviceGridModule, DeviceGridService } from '@c8y/ngx-components/device-grid';
import { DeviceSelectorModule } from '@c8y/ngx-components/operations/device-selector';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { map } from 'rxjs/operators';
import { REPLACE_DEVICE_STEP_STATES_MAP } from './replace-device-wizard.model';
import { ReplaceDeviceWizardService } from './replace-device-wizard.service';
import * as i0 from "@angular/core";
import * as i1 from "./replace-device-wizard.service";
import * as i2 from "@c8y/ngx-components/device-grid";
import * as i3 from "@c8y/ngx-components";
import * as i4 from "@angular/common";
import * as i5 from "@angular/cdk/stepper";
import * as i6 from "ngx-bootstrap/tooltip";
import * as i7 from "ngx-bootstrap/collapse";
import * as i8 from "ngx-bootstrap/popover";
export class ReplaceDeviceWizardComponent {
    static { this.DEFAULT_VISIBLE_COLUMNS = [
        'status',
        'name',
        'serialNumber',
        'registrationDate',
        'systemId',
        'imei'
    ]; }
    set deviceToReplace(deviceToReplace) {
        this.service.forDevice(deviceToReplace);
    }
    constructor(service, deviceGridService, modal, drawerRef) {
        this.service = service;
        this.deviceGridService = deviceGridService;
        this.modal = modal;
        this.drawerRef = drawerRef;
        this.REPLACE_DEVICE_STEP_STATES_MAP = REPLACE_DEVICE_STEP_STATES_MAP;
        this.classes = 'd-contents';
        this.baseQuery$ = this.service.deviceToReplace$.pipe(map(device => ({
            __not: {
                id: {
                    __eq: device?.id
                }
            }
        })));
        this.columns = this.deviceGridService.getDefaultColumns().map(column => {
            column.visible = ReplaceDeviceWizardComponent.DEFAULT_VISIBLE_COLUMNS.includes(column.name);
            return column;
        });
    }
    getGridConfigContext() {
        return {
            key: 'replace-device-wizard-grid',
            configFilter: {
                filter: false
            }
        };
    }
    async replace() {
        try {
            await this.modal.confirm(gettext('Replace device'), gettext('You are about to replace a device. When the process is finished, the replacement device and its data will be deleted. Do you want to proceed?'), Status.DANGER, { ok: gettext('Replace'), cancel: gettext('Cancel') });
            this.service.replaceDevice();
            this.continue();
        }
        catch (ex) {
            // Intentionally empty
        }
    }
    continue() {
        this.stepper.selected.completed = true;
        this.stepper.next();
    }
    cancel() {
        this.close();
    }
    close() {
        if (this.drawerRef) {
            this.drawerRef.close();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ReplaceDeviceWizardComponent, deps: [{ token: i1.ReplaceDeviceWizardService }, { token: i2.DeviceGridService }, { token: i3.ModalService }, { token: i3.BottomDrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ReplaceDeviceWizardComponent, isStandalone: true, selector: "c8y-replace-device-wizard", inputs: { deviceToReplace: "deviceToReplace" }, host: { properties: { "class": "this.classes" } }, providers: [
            DeviceGridService,
            ReplaceDeviceWizardService,
            {
                provide: DATA_GRID_CONFIGURATION_STRATEGY,
                useClass: UserPreferencesConfigurationStrategy
            },
            {
                provide: DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
                useExisting: ReplaceDeviceWizardComponent
            }
        ], viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-stepper\n  class=\"d-contents c8y-stepper--no-btns\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n  id=\"modal-body\"\n  [customClasses]=\"[\n    'col-xs-10',\n    'col-xs-offset-1',\n    'col-sm-8',\n    'col-sm-offset-2',\n    'm-t-24',\n    'm-b-40',\n    'p-0',\n    'flex-no-shrink'\n  ]\"\n  linear\n>\n  <cdk-step [label]=\"'Replacement device' | translate\">\n    <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n      <div class=\"row\">\n        <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n          <div class=\"h4 text-center text-medium\">\n            {{ 'Replacement device' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <c8y-device-grid\n      class=\"flex-grow col-xs-12 no-gutter\"\n      [title]=\"'Select replacement device' | translate\"\n      [infiniteScroll]=\"'auto'\"\n      [actionControls]=\"[]\"\n      [columns]=\"columns\"\n      [selectable]=\"true\"\n      [singleSelection]=\"true\"\n      [baseQuery]=\"baseQuery$ | async\"\n      (itemsSelect)=\"replacementDeviceId = $event[0]\"\n    ></c8y-device-grid>\n    <c8y-stepper-buttons\n      class=\"d-block card-footer p-24 separator\"\n      [disabled]=\"!replacementDeviceId\"\n      (onCancel)=\"cancel()\"\n      (onNext)=\"service.changeReplacementDeviceId(replacementDeviceId); continue()\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n\n  <cdk-step [label]=\"'Select external IDs' | translate\">\n    <div class=\"p-16 p-t-0 flex-no-shrink col-xs-12\">\n      <div class=\"row\">\n        <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n          <div class=\"h4 text-center text-medium\">\n            {{ 'Select external IDs' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <c8y-li class=\"page-sticky-header hidden-sm hidden-xs\">\n      <c8y-li-icon><i class=\"p-l-24\"></i></c8y-li-icon>\n      <c8y-li-body class=\"content-flex-40\">\n        <div class=\"col-4\">\n          <span\n            class=\"text-medium text-truncate\"\n            title=\" {{ 'Type' | translate }} \"\n          >\n            {{ 'Type' | translate }}\n          </span>\n        </div>\n        <div class=\"col-6\">\n          <span\n            class=\"text-medium text-truncate\"\n            title=\"{{ 'External ID' | translate }}\"\n          >\n            {{ 'External ID' | translate }}\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n    <div\n      class=\"col-xs-12 flex-grow no-gutter\"\n      *ngIf=\"!(service.externalIdsLoading$ | async); else loading\"\n    >\n      <div\n        class=\"card-inner-scroll fit-h\"\n        *ngIf=\"(service.externalIdsWithSelection$ | async)?.length > 0; else noIds\"\n      >\n        <div class=\"card-block p-t-0 p-b-0\">\n          <c8y-list-group>\n            <c8y-li *ngFor=\"let extId of service.externalIdsWithSelection$ | async\">\n              <c8y-li-checkbox\n                [selected]=\"extId.selected\"\n                (onSelect)=\"service.checkExternalId(extId.id, $event)\"\n              ></c8y-li-checkbox>\n              <c8y-li-body class=\"content-flex-40\">\n                <div class=\"col-4 m-b-xs-8\">\n                  <div\n                    class=\"text-truncate\"\n                    title=\"{{ 'Type' | translate }}\"\n                  >\n                    <span\n                      class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                      translate\n                    >\n                      Type\n                    </span>\n                    {{ extId.id.type }}\n                  </div>\n                </div>\n                <div class=\"col-6 m-b-xs-8\">\n                  <div\n                    class=\"text-truncate\"\n                    title=\"{{ 'External ID' | translate }}\"\n                  >\n                    <span\n                      class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                      translate\n                    >\n                      External ID\n                    </span>\n                    {{ extId.id.externalId }}\n                  </div>\n                </div>\n              </c8y-li-body>\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n      </div>\n      <ng-template #noIds>\n        <c8y-ui-empty-state\n          [icon]=\"'barcode'\"\n          [title]=\"'No external IDs assigned.'\"\n          [subtitle]=\"\n            'The selected replacement device does not have external IDs assigned. Go back to &quot;Replacement device&quot; and select a different device.'\n              | translate\n          \"\n          *ngIf=\"true\"\n        ></c8y-ui-empty-state>\n      </ng-template>\n    </div>\n    <ng-template #loading>\n      <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n        <c8y-loading></c8y-loading>\n      </div>\n    </ng-template>\n    <c8y-stepper-buttons\n      class=\"d-block card-footer p-24 separator\"\n      [disabled]=\"\n        (service.externalIdsLoading$ | async) || !(service.selectedExternalIds$ | async)?.length\n      \"\n      (onCancel)=\"cancel()\"\n      (onNext)=\"replace()\"\n      [labels]=\"{ next: ('Replace' | translate) }\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n\n  <cdk-step [label]=\"'Replace' | translate\">\n    <div class=\"p-16 p-t-0 flex-no-shrink col-xs-12 separator-bottom\">\n      <div class=\"row\">\n        <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n          <div class=\"h4 text-center text-medium\">\n            {{ 'Replace' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-flex d-col a-i-center j-c-center inner-scroll\">\n      <c8y-list-group class=\"col-sm-8 col-md-6\">\n        <c8y-li\n          *ngFor=\"let step of service.steps\"\n          [attr.data-cy]=\"'c8y-replace-device-wizard--step-' + step.label\"\n        >\n          <c8y-li-icon>\n            <i\n              [c8yIcon]=\"REPLACE_DEVICE_STEP_STATES_MAP[step.state || 'Pending']?.icon\"\n              [tooltip]=\"(step.state || 'Pending').toString() | translate\"\n              [ngClass]=\"REPLACE_DEVICE_STEP_STATES_MAP[step.state || 'Pending']?.styleClass\"\n            ></i>\n          </c8y-li-icon>\n          <c8y-li-body>\n            <span [ngClass]=\"{ 'text-bold': !!step.error }\">{{ step.label | translate }}</span>\n            <button\n              class=\"btn-help btn-help--sm pull-right\"\n              [attr.aria-label]=\"'Help' | translate\"\n              [attr.aria-label]=\"step.info.msg | translate\"\n              [popover]=\"step.info.msg | translate\"\n              placement=\"right\"\n              triggers=\"focus\"\n              type=\"button\"\n              *ngIf=\"!!step.info?.msg\"\n            >\n              <i c8yIcon=\"question-circle-o\"></i>\n            </button>\n          </c8y-li-body>\n          <c8y-li-collapse\n            #alert\n            *ngIf=\"step.error\"\n          >\n            <span class=\"message\">{{ step.error?.text | translate }}</span>\n            <p\n              class=\"text-muted m-t-8\"\n              *ngIf=\"step?.error?.detailedData\"\n            >\n              <button\n                class=\"btn btn-clean\"\n                (click)=\"alert.expanded = !alert.expanded\"\n              >\n                <i c8yIcon=\"chevron-down\"></i>\n                <span *ngIf=\"!alert.expanded\">Show details</span>\n                <span *ngIf=\"alert.expanded\">Hide details</span>\n              </button>\n            </p>\n            <div\n              [collapse]=\"!alert.expanded\"\n              [isAnimated]=\"true\"\n            >\n              {{ step.error.detailedData | json }}\n            </div>\n          </c8y-li-collapse>\n          <c8y-li-action\n            icon=\"play\"\n            label=\"{{ 'Retry this step`button`' | translate }}\"\n            *ngIf=\"step.state === 'Failed' && !step.overrideContext\"\n            (click)=\"service.retryStep(step)\"\n            data-cy=\"c8y-replace-device-wizard--retry-step\"\n          ></c8y-li-action>\n        </c8y-li>\n      </c8y-list-group>\n    </div>\n\n    <c8y-stepper-buttons\n      class=\"d-block card-footer p-24 separator\"\n      [pending]=\"service.deviceReplacementInProgress$ | async\"\n      (onBack)=\"close()\"\n      [labels]=\"{ back: 'Close' | translate }\"\n    >\n      <button\n        class=\"btn btn-primary\"\n        [title]=\"'Retry' | translate\"\n        type=\"button\"\n        *ngIf=\"(service.deviceReplaced$ | async) === false\"\n        (click)=\"service.retryStep()\"\n        [ngClass]=\"{ 'btn-pending': service.deviceReplacementInProgress$ | async }\"\n        [disabled]=\"service.deviceReplacementInProgress$ | async\"\n        data-cy=\"c8y-replace-device-wizard--btn-retry\"\n      >\n        {{ 'Retry' | translate }}\n      </button>\n    </c8y-stepper-buttons>\n  </cdk-step>\n</c8y-stepper>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.JsonPipe, name: "json" }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { 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: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i3.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: DeviceGridModule }, { kind: "component", type: i2.DeviceGridComponent, selector: "c8y-device-grid", inputs: ["dataCallback", "refresh", "title", "loadMoreItemsLabel", "loadingItemsLabel", "legacyConfigKey", "legacyFilterKey", "columns", "pagination", "infiniteScroll", "actionControls", "selectable", "singleSelection", "baseQuery", "bulkActionControls", "headerActionControls", "childDeviceGrid", "parentDeviceId", "withChildren", "showSearch", "activeClassName"], outputs: ["onColumnsChange", "onFilterChange", "onDeviceQueryStringChange", "itemsSelect"] }, { kind: "ngmodule", type: DeviceSelectorModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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: "ngmodule", type: CollapseModule }, { kind: "directive", type: i7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ReplaceDeviceWizardComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'c8y-replace-device-wizard', imports: [
                        CoreModule,
                        DeviceGridModule,
                        DeviceSelectorModule,
                        TooltipModule,
                        CollapseModule,
                        PopoverModule
                    ], providers: [
                        DeviceGridService,
                        ReplaceDeviceWizardService,
                        {
                            provide: DATA_GRID_CONFIGURATION_STRATEGY,
                            useClass: UserPreferencesConfigurationStrategy
                        },
                        {
                            provide: DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
                            useExisting: ReplaceDeviceWizardComponent
                        }
                    ], template: "<c8y-stepper\n  class=\"d-contents c8y-stepper--no-btns\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n  id=\"modal-body\"\n  [customClasses]=\"[\n    'col-xs-10',\n    'col-xs-offset-1',\n    'col-sm-8',\n    'col-sm-offset-2',\n    'm-t-24',\n    'm-b-40',\n    'p-0',\n    'flex-no-shrink'\n  ]\"\n  linear\n>\n  <cdk-step [label]=\"'Replacement device' | translate\">\n    <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n      <div class=\"row\">\n        <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n          <div class=\"h4 text-center text-medium\">\n            {{ 'Replacement device' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <c8y-device-grid\n      class=\"flex-grow col-xs-12 no-gutter\"\n      [title]=\"'Select replacement device' | translate\"\n      [infiniteScroll]=\"'auto'\"\n      [actionControls]=\"[]\"\n      [columns]=\"columns\"\n      [selectable]=\"true\"\n      [singleSelection]=\"true\"\n      [baseQuery]=\"baseQuery$ | async\"\n      (itemsSelect)=\"replacementDeviceId = $event[0]\"\n    ></c8y-device-grid>\n    <c8y-stepper-buttons\n      class=\"d-block card-footer p-24 separator\"\n      [disabled]=\"!replacementDeviceId\"\n      (onCancel)=\"cancel()\"\n      (onNext)=\"service.changeReplacementDeviceId(replacementDeviceId); continue()\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n\n  <cdk-step [label]=\"'Select external IDs' | translate\">\n    <div class=\"p-16 p-t-0 flex-no-shrink col-xs-12\">\n      <div class=\"row\">\n        <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n          <div class=\"h4 text-center text-medium\">\n            {{ 'Select external IDs' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <c8y-li class=\"page-sticky-header hidden-sm hidden-xs\">\n      <c8y-li-icon><i class=\"p-l-24\"></i></c8y-li-icon>\n      <c8y-li-body class=\"content-flex-40\">\n        <div class=\"col-4\">\n          <span\n            class=\"text-medium text-truncate\"\n            title=\" {{ 'Type' | translate }} \"\n          >\n            {{ 'Type' | translate }}\n          </span>\n        </div>\n        <div class=\"col-6\">\n          <span\n            class=\"text-medium text-truncate\"\n            title=\"{{ 'External ID' | translate }}\"\n          >\n            {{ 'External ID' | translate }}\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n    <div\n      class=\"col-xs-12 flex-grow no-gutter\"\n      *ngIf=\"!(service.externalIdsLoading$ | async); else loading\"\n    >\n      <div\n        class=\"card-inner-scroll fit-h\"\n        *ngIf=\"(service.externalIdsWithSelection$ | async)?.length > 0; else noIds\"\n      >\n        <div class=\"card-block p-t-0 p-b-0\">\n          <c8y-list-group>\n            <c8y-li *ngFor=\"let extId of service.externalIdsWithSelection$ | async\">\n              <c8y-li-checkbox\n                [selected]=\"extId.selected\"\n                (onSelect)=\"service.checkExternalId(extId.id, $event)\"\n              ></c8y-li-checkbox>\n              <c8y-li-body class=\"content-flex-40\">\n                <div class=\"col-4 m-b-xs-8\">\n                  <div\n                    class=\"text-truncate\"\n                    title=\"{{ 'Type' | translate }}\"\n                  >\n                    <span\n                      class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                      translate\n                    >\n                      Type\n                    </span>\n                    {{ extId.id.type }}\n                  </div>\n                </div>\n                <div class=\"col-6 m-b-xs-8\">\n                  <div\n                    class=\"text-truncate\"\n                    title=\"{{ 'External ID' | translate }}\"\n                  >\n                    <span\n                      class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                      translate\n                    >\n                      External ID\n                    </span>\n                    {{ extId.id.externalId }}\n                  </div>\n                </div>\n              </c8y-li-body>\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n      </div>\n      <ng-template #noIds>\n        <c8y-ui-empty-state\n          [icon]=\"'barcode'\"\n          [title]=\"'No external IDs assigned.'\"\n          [subtitle]=\"\n            'The selected replacement device does not have external IDs assigned. Go back to &quot;Replacement device&quot; and select a different device.'\n              | translate\n          \"\n          *ngIf=\"true\"\n        ></c8y-ui-empty-state>\n      </ng-template>\n    </div>\n    <ng-template #loading>\n      <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n        <c8y-loading></c8y-loading>\n      </div>\n    </ng-template>\n    <c8y-stepper-buttons\n      class=\"d-block card-footer p-24 separator\"\n      [disabled]=\"\n        (service.externalIdsLoading$ | async) || !(service.selectedExternalIds$ | async)?.length\n      \"\n      (onCancel)=\"cancel()\"\n      (onNext)=\"replace()\"\n      [labels]=\"{ next: ('Replace' | translate) }\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n\n  <cdk-step [label]=\"'Replace' | translate\">\n    <div class=\"p-16 p-t-0 flex-no-shrink col-xs-12 separator-bottom\">\n      <div class=\"row\">\n        <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n          <div class=\"h4 text-center text-medium\">\n            {{ 'Replace' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-flex d-col a-i-center j-c-center inner-scroll\">\n      <c8y-list-group class=\"col-sm-8 col-md-6\">\n        <c8y-li\n          *ngFor=\"let step of service.steps\"\n          [attr.data-cy]=\"'c8y-replace-device-wizard--step-' + step.label\"\n        >\n          <c8y-li-icon>\n            <i\n              [c8yIcon]=\"REPLACE_DEVICE_STEP_STATES_MAP[step.state || 'Pending']?.icon\"\n              [tooltip]=\"(step.state || 'Pending').toString() | translate\"\n              [ngClass]=\"REPLACE_DEVICE_STEP_STATES_MAP[step.state || 'Pending']?.styleClass\"\n            ></i>\n          </c8y-li-icon>\n          <c8y-li-body>\n            <span [ngClass]=\"{ 'text-bold': !!step.error }\">{{ step.label | translate }}</span>\n            <button\n              class=\"btn-help btn-help--sm pull-right\"\n              [attr.aria-label]=\"'Help' | translate\"\n              [attr.aria-label]=\"step.info.msg | translate\"\n              [popover]=\"step.info.msg | translate\"\n              placement=\"right\"\n              triggers=\"focus\"\n              type=\"button\"\n              *ngIf=\"!!step.info?.msg\"\n            >\n              <i c8yIcon=\"question-circle-o\"></i>\n            </button>\n          </c8y-li-body>\n          <c8y-li-collapse\n            #alert\n            *ngIf=\"step.error\"\n          >\n            <span class=\"message\">{{ step.error?.text | translate }}</span>\n            <p\n              class=\"text-muted m-t-8\"\n              *ngIf=\"step?.error?.detailedData\"\n            >\n              <button\n                class=\"btn btn-clean\"\n                (click)=\"alert.expanded = !alert.expanded\"\n              >\n                <i c8yIcon=\"chevron-down\"></i>\n                <span *ngIf=\"!alert.expanded\">Show details</span>\n                <span *ngIf=\"alert.expanded\">Hide details</span>\n              </button>\n            </p>\n            <div\n              [collapse]=\"!alert.expanded\"\n              [isAnimated]=\"true\"\n            >\n              {{ step.error.detailedData | json }}\n            </div>\n          </c8y-li-collapse>\n          <c8y-li-action\n            icon=\"play\"\n            label=\"{{ 'Retry this step`button`' | translate }}\"\n            *ngIf=\"step.state === 'Failed' && !step.overrideContext\"\n            (click)=\"service.retryStep(step)\"\n            data-cy=\"c8y-replace-device-wizard--retry-step\"\n          ></c8y-li-action>\n        </c8y-li>\n      </c8y-list-group>\n    </div>\n\n    <c8y-stepper-buttons\n      class=\"d-block card-footer p-24 separator\"\n      [pending]=\"service.deviceReplacementInProgress$ | async\"\n      (onBack)=\"close()\"\n      [labels]=\"{ back: 'Close' | translate }\"\n    >\n      <button\n        class=\"btn btn-primary\"\n        [title]=\"'Retry' | translate\"\n        type=\"button\"\n        *ngIf=\"(service.deviceReplaced$ | async) === false\"\n        (click)=\"service.retryStep()\"\n        [ngClass]=\"{ 'btn-pending': service.deviceReplacementInProgress$ | async }\"\n        [disabled]=\"service.deviceReplacementInProgress$ | async\"\n        data-cy=\"c8y-replace-device-wizard--btn-retry\"\n      >\n        {{ 'Retry' | translate }}\n      </button>\n    </c8y-stepper-buttons>\n  </cdk-step>\n</c8y-stepper>\n" }]
        }], ctorParameters: () => [{ type: i1.ReplaceDeviceWizardService }, { type: i2.DeviceGridService }, { type: i3.ModalService }, { type: i3.BottomDrawerRef, decorators: [{
                    type: Optional
                }] }], propDecorators: { classes: [{
                type: HostBinding,
                args: ['class']
            }], stepper: [{
                type: ViewChild,
                args: [C8yStepper, { static: true }]
            }], deviceToReplace: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 