npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.148 → 0.0.149 - Mend

@tuki-io/tuki-widgets 0.0.148 → 0.0.149

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/fesm2015/tuki-io-tuki-widgets-users-list.mjs CHANGED Viewed

@@ -809,10 +809,10 @@ class AppLoaderComponent {
     }
 }
 AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
+AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
+            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
         }], ctorParameters: function () { return []; } });
 var EntityChangeType;
@@ -1384,10 +1384,9 @@ class MoveUserStepperComponent {
         this.dataPending = true;
         this.moveUserService.startMigration(migrationData)
             .subscribe((result) => {
-            var _a, _b;
             this.dataPending = false;
-            if ((_b = (_a = this.nextAfterMoveBtn) === null || _a === void 0 ? void 0 : _a._elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement) {
-                this.nextAfterMoveBtn._elementRef.nativeElement.click();
+            if (this.stepper) {
+                this.stepper.next();
             }
         }, () => {
             this.dataPending = false;
@@ -1426,13 +1425,16 @@ class MoveUserStepperComponent {
     }
 }
 MoveUserStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserStepperComponent, deps: [{ token: DnsService }, { token: UserService }, { token: SiteSettingsService }, { token: NotificationService }, { token: MoveUserService }], target: i0.ɵɵFactoryTarget.Component });
-MoveUserStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MoveUserStepperComponent, selector: "app-move-user-stepper", inputs: { user: "user", customerId: "customerId" }, outputs: { done: "done", runMoveUser: "runMoveUser", cancel: "cancel" }, viewQueries: [{ propertyName: "nextAfterMoveBtn", first: true, predicate: ["nextAfterMoveBtn"], descendants: true }], ngImport: i0, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n  <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 1: Select location</div>\r\n      <!--      <form>-->\r\n      <ng-template matStepLabel>Select location</ng-template>\r\n      <form>\r\n        <div class=\"move-user-tab-content-box\">\r\n          <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n          <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n            <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n                   (input)=\"onLocationAutocomplete($event)\"/>\r\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n                              (optionSelected)=\"onLocationChange($event)\">\r\n              <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n                {{ location.name }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <div *ngIf=\"!dataPending && !locations.length\" class=\"mat-error\">\r\n            Locations are not available\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n            <mat-label class=\"mat-label\">Phone number</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n                             (change)=\"selectPhoneNumberMigrationType($event)\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current number\r\n                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\"\r\n                [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n                Select a new number\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n                <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n                                      [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n                <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n                  <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n                         [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n                         (input)=\"onNumberAutocomplete()\"/>\r\n                  <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n                    <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n                      {{ number }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                </mat-form-field>\r\n                <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n                  Phone numbers are not available for this location\r\n                </div>\r\n              </div>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removeExtension\">\r\n                Remove number\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n\r\n            <mat-label class=\"mat-label\">Extension</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n                             (change)=\"selectExtensionMigrationType($event)\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\">\r\n                Select a new extension\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    name=\"newExtension\"\r\n                    (change)=\"onExtensionChange($event)\"\r\n                    [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n                    [placeholder]=\"'Enter extension'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n                [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <div class=\"move-user-tab-content-box\">\r\n        <app-devices-move-user-tab></app-devices-move-user-tab>\r\n      </div>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <ng-template matStepLabel>Validation</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Validation</mat-label>\r\n        <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n              (click)=\"goNextStep(stepper)\"></button>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\"\r\n                [disabled]=\"prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm\"\r\n                (click)=\"startMigration()\">\r\n          Upgrade\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 4: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n        <p class=\"validation-text\">\r\n          The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n          <br/>\r\n          For the progress of move, please visit the\r\n          <a class=\"form-link\" href=\"#\">user details</a>.\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n          Done\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n  <p class=\"validation-text\">\r\n    Validation has completed successfully. The user can be moved to the\r\n    new location. Please be aware of the potential impact of the changes\r\n    below.\r\n  </p>\r\n  <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n  <ul>\r\n    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n    <li>\r\n      The user will be removed from the Call Pickup Group:\r\n      1675090334-Paris_pickup\r\n    </li>\r\n    <li>\r\n      If Webex App is currently in use, the user will to sign in again to\r\n      update the service.\r\n    </li>\r\n  </ul>\r\n  <form>\r\n    <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n                  color=\"primary\">\r\n      I confirm that I understand these conditions. I acknowledge the\r\n      changes.\r\n    </mat-checkbox>\r\n  </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n  <p class=\"validation-text\">\r\n    Validation is failed. User migration is not available\r\n  </p>\r\n  <ul>\r\n    <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::ng-deep .mat-form-field-infix{padding:0!important;width:100%}::ng-deep .mat-form-field-appearance-outline .mat-input-element{height:35px;width:100%;line-height:35px;margin:5px 0 0}::ng-deep .mat-form-field{width:350px}::ng-deep .mat-step-header[aria-labelledby=disabled_af]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-icon,::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-label{cursor:not-allowed;opacity:.6}.mat-mdc-form-field{margin-top:16px}.mat-label{font-size:16px;font-weight:600;margin:1rem 0}.step-title{font-size:28px;font-weight:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.5rem}.step-actions{display:flex;flex-flow:row-reverse;margin-top:2rem;gap:1rem}.webex-btn{border:1px solid black;border-radius:1rem;cursor:pointer;gap:1rem}.btn-next{background-color:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i14.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i14.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i14.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i14.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i16.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: DevicesMoveUserWizardTabComponent, selector: "app-devices-move-user-tab" }], encapsulation: i0.ViewEncapsulation.None });
+MoveUserStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MoveUserStepperComponent, selector: "app-move-user-stepper", inputs: { user: "user", customerId: "customerId" }, outputs: { done: "done", runMoveUser: "runMoveUser", cancel: "cancel" }, viewQueries: [{ propertyName: "nextAfterMoveBtn", first: true, predicate: ["nextAfterMoveBtn"], descendants: true }, { propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n  <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 1: Select location</div>\r\n      <!--      <form>-->\r\n      <ng-template matStepLabel>Select location</ng-template>\r\n      <form>\r\n        <div class=\"move-user-tab-content-box\">\r\n          <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n          <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n            <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n                   (input)=\"onLocationAutocomplete($event)\"/>\r\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n                              (optionSelected)=\"onLocationChange($event)\">\r\n              <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n                {{ location.name }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <div *ngIf=\"!dataPending && !locations?.length\" class=\"mat-error\">\r\n            Locations are not available\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n            <mat-label class=\"mat-label\">Phone number</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n                             (change)=\"selectPhoneNumberMigrationType($event)\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current number\r\n                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\"\r\n                [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n                Select a new number\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n                <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n                                      [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n                <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n                  <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n                         [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n                         (input)=\"onNumberAutocomplete()\"/>\r\n                  <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n                    <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n                      {{ number }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                </mat-form-field>\r\n                <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n                  Phone numbers are not available for this location\r\n                </div>\r\n              </div>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removeExtension\">\r\n                Remove number\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n\r\n            <mat-label class=\"mat-label\">Extension</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n                             (change)=\"selectExtensionMigrationType($event)\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\">\r\n                Select a new extension\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    name=\"newExtension\"\r\n                    (change)=\"onExtensionChange($event)\"\r\n                    [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n                    [placeholder]=\"'Enter extension'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n                [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <div class=\"move-user-tab-content-box\">\r\n        <app-devices-move-user-tab></app-devices-move-user-tab>\r\n      </div>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <ng-template matStepLabel>Validation</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Validation</mat-label>\r\n        <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n              (click)=\"goNextStep(stepper)\"></button>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\"\r\n                [disabled]=\"prepareMigrationData?.errors?.length > 0 || !prepareMigrationData.isConfirm\"\r\n                (click)=\"startMigration()\">\r\n          Upgrade\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 4: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n        <p class=\"validation-text\">\r\n          The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n          <br/>\r\n          For the progress of move, please visit the\r\n          <a class=\"form-link\" href=\"#\">user details</a>.\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n          Done\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n  <p class=\"validation-text\">\r\n    Validation has completed successfully. The user can be moved to the\r\n    new location. Please be aware of the potential impact of the changes\r\n    below.\r\n  </p>\r\n  <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n  <ul>\r\n    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n    <li>\r\n      The user will be removed from the Call Pickup Group:\r\n      1675090334-Paris_pickup\r\n    </li>\r\n    <li>\r\n      If Webex App is currently in use, the user will to sign in again to\r\n      update the service.\r\n    </li>\r\n  </ul>\r\n  <form>\r\n    <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n                  color=\"primary\">\r\n      I confirm that I understand these conditions. I acknowledge the\r\n      changes.\r\n    </mat-checkbox>\r\n  </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n  <p class=\"validation-text\">\r\n    Validation is failed. User migration is not available\r\n  </p>\r\n  <ul>\r\n    <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::ng-deep .mat-form-field-infix{padding:0!important;width:100%}::ng-deep .mat-form-field-appearance-outline .mat-input-element{height:35px;width:100%;line-height:35px;margin:5px 0 0}::ng-deep .mat-form-field{width:350px}::ng-deep .mat-step-header[aria-labelledby=disabled_af]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-icon,::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-label{cursor:not-allowed;opacity:.6}.mat-mdc-form-field{margin-top:16px}.mat-label{font-size:16px;font-weight:600;margin:1rem 0}.step-title{font-size:28px;font-weight:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.5rem}.step-actions{display:flex;flex-flow:row-reverse;margin-top:2rem;gap:1rem}.webex-btn{border:1px solid black;border-radius:1rem;cursor:pointer;gap:1rem}.btn-next{background-color:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i14.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i14.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i14.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i14.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i16.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: DevicesMoveUserWizardTabComponent, selector: "app-devices-move-user-tab" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-move-user-stepper', encapsulation: ViewEncapsulation.None, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n  <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 1: Select location</div>\r\n      <!--      <form>-->\r\n      <ng-template matStepLabel>Select location</ng-template>\r\n      <form>\r\n        <div class=\"move-user-tab-content-box\">\r\n          <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n          <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n            <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n                   (input)=\"onLocationAutocomplete($event)\"/>\r\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n                              (optionSelected)=\"onLocationChange($event)\">\r\n              <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n                {{ location.name }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <div *ngIf=\"!dataPending && !locations.length\" class=\"mat-error\">\r\n            Locations are not available\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n            <mat-label class=\"mat-label\">Phone number</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n                             (change)=\"selectPhoneNumberMigrationType($event)\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current number\r\n                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\"\r\n                [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n                Select a new number\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n                <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n                                      [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n                <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n                  <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n                         [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n                         (input)=\"onNumberAutocomplete()\"/>\r\n                  <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n                    <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n                      {{ number }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                </mat-form-field>\r\n                <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n                  Phone numbers are not available for this location\r\n                </div>\r\n              </div>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removeExtension\">\r\n                Remove number\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n\r\n            <mat-label class=\"mat-label\">Extension</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n                             (change)=\"selectExtensionMigrationType($event)\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\">\r\n                Select a new extension\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    name=\"newExtension\"\r\n                    (change)=\"onExtensionChange($event)\"\r\n                    [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n                    [placeholder]=\"'Enter extension'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n                [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <div class=\"move-user-tab-content-box\">\r\n        <app-devices-move-user-tab></app-devices-move-user-tab>\r\n      </div>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <ng-template matStepLabel>Validation</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Validation</mat-label>\r\n        <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n              (click)=\"goNextStep(stepper)\"></button>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\"\r\n                [disabled]=\"prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm\"\r\n                (click)=\"startMigration()\">\r\n          Upgrade\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 4: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n        <p class=\"validation-text\">\r\n          The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n          <br/>\r\n          For the progress of move, please visit the\r\n          <a class=\"form-link\" href=\"#\">user details</a>.\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n          Done\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n  <p class=\"validation-text\">\r\n    Validation has completed successfully. The user can be moved to the\r\n    new location. Please be aware of the potential impact of the changes\r\n    below.\r\n  </p>\r\n  <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n  <ul>\r\n    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n    <li>\r\n      The user will be removed from the Call Pickup Group:\r\n      1675090334-Paris_pickup\r\n    </li>\r\n    <li>\r\n      If Webex App is currently in use, the user will to sign in again to\r\n      update the service.\r\n    </li>\r\n  </ul>\r\n  <form>\r\n    <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n                  color=\"primary\">\r\n      I confirm that I understand these conditions. I acknowledge the\r\n      changes.\r\n    </mat-checkbox>\r\n  </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n  <p class=\"validation-text\">\r\n    Validation is failed. User migration is not available\r\n  </p>\r\n  <ul>\r\n    <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::ng-deep .mat-form-field-infix{padding:0!important;width:100%}::ng-deep .mat-form-field-appearance-outline .mat-input-element{height:35px;width:100%;line-height:35px;margin:5px 0 0}::ng-deep .mat-form-field{width:350px}::ng-deep .mat-step-header[aria-labelledby=disabled_af]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-icon,::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-label{cursor:not-allowed;opacity:.6}.mat-mdc-form-field{margin-top:16px}.mat-label{font-size:16px;font-weight:600;margin:1rem 0}.step-title{font-size:28px;font-weight:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.5rem}.step-actions{display:flex;flex-flow:row-reverse;margin-top:2rem;gap:1rem}.webex-btn{border:1px solid black;border-radius:1rem;cursor:pointer;gap:1rem}.btn-next{background-color:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"] }]
+            args: [{ selector: 'app-move-user-stepper', encapsulation: ViewEncapsulation.None, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n  <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 1: Select location</div>\r\n      <!--      <form>-->\r\n      <ng-template matStepLabel>Select location</ng-template>\r\n      <form>\r\n        <div class=\"move-user-tab-content-box\">\r\n          <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n          <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n            <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n                   (input)=\"onLocationAutocomplete($event)\"/>\r\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n                              (optionSelected)=\"onLocationChange($event)\">\r\n              <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n                {{ location.name }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <div *ngIf=\"!dataPending && !locations?.length\" class=\"mat-error\">\r\n            Locations are not available\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n            <mat-label class=\"mat-label\">Phone number</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n                             (change)=\"selectPhoneNumberMigrationType($event)\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current number\r\n                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\"\r\n                [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n                Select a new number\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n                <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n                                      [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n                <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n                  <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n                         [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n                         (input)=\"onNumberAutocomplete()\"/>\r\n                  <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n                    <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n                      {{ number }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                </mat-form-field>\r\n                <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n                  Phone numbers are not available for this location\r\n                </div>\r\n              </div>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removeExtension\">\r\n                Remove number\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n\r\n            <mat-label class=\"mat-label\">Extension</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n                             (change)=\"selectExtensionMigrationType($event)\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\">\r\n                Select a new extension\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    name=\"newExtension\"\r\n                    (change)=\"onExtensionChange($event)\"\r\n                    [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n                    [placeholder]=\"'Enter extension'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n                [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <div class=\"move-user-tab-content-box\">\r\n        <app-devices-move-user-tab></app-devices-move-user-tab>\r\n      </div>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <ng-template matStepLabel>Validation</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Validation</mat-label>\r\n        <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n              (click)=\"goNextStep(stepper)\"></button>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\"\r\n                [disabled]=\"prepareMigrationData?.errors?.length > 0 || !prepareMigrationData.isConfirm\"\r\n                (click)=\"startMigration()\">\r\n          Upgrade\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 4: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n        <p class=\"validation-text\">\r\n          The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n          <br/>\r\n          For the progress of move, please visit the\r\n          <a class=\"form-link\" href=\"#\">user details</a>.\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n          Done\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n  <p class=\"validation-text\">\r\n    Validation has completed successfully. The user can be moved to the\r\n    new location. Please be aware of the potential impact of the changes\r\n    below.\r\n  </p>\r\n  <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n  <ul>\r\n    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n    <li>\r\n      The user will be removed from the Call Pickup Group:\r\n      1675090334-Paris_pickup\r\n    </li>\r\n    <li>\r\n      If Webex App is currently in use, the user will to sign in again to\r\n      update the service.\r\n    </li>\r\n  </ul>\r\n  <form>\r\n    <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n                  color=\"primary\">\r\n      I confirm that I understand these conditions. I acknowledge the\r\n      changes.\r\n    </mat-checkbox>\r\n  </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n  <p class=\"validation-text\">\r\n    Validation is failed. User migration is not available\r\n  </p>\r\n  <ul>\r\n    <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::ng-deep .mat-form-field-infix{padding:0!important;width:100%}::ng-deep .mat-form-field-appearance-outline .mat-input-element{height:35px;width:100%;line-height:35px;margin:5px 0 0}::ng-deep .mat-form-field{width:350px}::ng-deep .mat-step-header[aria-labelledby=disabled_af]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-icon,::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-label{cursor:not-allowed;opacity:.6}.mat-mdc-form-field{margin-top:16px}.mat-label{font-size:16px;font-weight:600;margin:1rem 0}.step-title{font-size:28px;font-weight:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.5rem}.step-actions{display:flex;flex-flow:row-reverse;margin-top:2rem;gap:1rem}.webex-btn{border:1px solid black;border-radius:1rem;cursor:pointer;gap:1rem}.btn-next{background-color:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"] }]
         }], ctorParameters: function () { return [{ type: DnsService }, { type: UserService }, { type: SiteSettingsService }, { type: NotificationService }, { type: MoveUserService }]; }, propDecorators: { nextAfterMoveBtn: [{
                 type: ViewChild,
                 args: ['nextAfterMoveBtn']
+            }], stepper: [{
+                type: ViewChild,
+                args: ['stepper']
             }], done: [{
                 type: Output
             }], user: [{