@tuki-io/tuki-widgets 0.0.197 → 0.0.199

package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs

@@ -1,236 +1,34 @@
-import * as i2 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, Component, ChangeDetectionStrategy, NgModule, inject, ViewEncapsulation, EventEmitter, Output, Input, ViewChild } from '@angular/core';
-import * as i1$2 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, FormBuilder, Validators, FormControl } from '@angular/forms';
-import * as i15 from '@angular/material/expansion';
+import { NgModule, Injectable, inject, Component, Input, EventEmitter, ViewEncapsulation, Output } from '@angular/core';
+import * as i3$1 from '@angular/forms';
+import { FormBuilder, Validators, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i9 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i4 from '@angular/material/stepper';
+import * as i3$2 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import { Subject, BehaviorSubject, tap, forkJoin, map, switchMap, of, catchError, takeUntil, take, finalize, startWith, debounceTime, timer, filter, distinctUntilChanged } from 'rxjs';
-import * as i3 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i5 from '@angular/material/table';
+import * as i3 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i5$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7 from '@angular/material/icon';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import * as i8 from '@angular/material/form-field';
+import * as i5 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i9 from '@angular/material/input';
+import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i7$1 from '@angular/material/select';
+import * as i7 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i12 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i1$1 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i13 from '@angular/material/paginator';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i14 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
+import { BehaviorSubject, tap, forkJoin, map, Subject, takeUntil, startWith, switchMap, filter, of } from 'rxjs';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import { NgApexchartsModule } from 'ng-apexcharts';
-import Big from 'big.js';
-import * as i11 from '@angular/material/core';
-import * as i1$3 from '@ngx-translate/core';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-
-const environment = {
-    production: false,
-    // apiUrl: 'http://localhost:4200',
-    apiUrl: 'http://192.168.0.191:8080',
-    notificationsLifetime: 30000,
-    longNotificationsLifetime: 45000,
-    cashCleanTimer: 900000,
-    cashArrayLength: 10000,
-    matomoUrl: 'http://192.168.0.136/matomo/',
-};
-
-const TTL_DEFAULT = environment.notificationsLifetime;
-const TTL_LONG_DEFAULT = environment.longNotificationsLifetime;
-var NotificationType;
-(function (NotificationType) {
-    NotificationType["info"] = "info";
-    NotificationType["error"] = "error";
-    NotificationType["success"] = "success";
-    NotificationType["warning"] = "warning";
-})(NotificationType || (NotificationType = {}));
-class Notification {
-    constructor(data) {
-        this.ttl = TTL_DEFAULT;
-        Object.assign(this, data || {});
-        if (this.ttl === undefined) {
-            this.ttl = this.message && this.message.length && this.message.length < 80 ? TTL_DEFAULT : TTL_LONG_DEFAULT;
-        }
-    }
-    isInfo() {
-        return this.type === NotificationType.info;
-    }
-    isError() {
-        return this.type === NotificationType.error;
-    }
-    isSuccess() {
-        return this.type === NotificationType.success;
-    }
-    isWarning() {
-        return this.type === NotificationType.warning;
-    }
-}
-
-const SUCCESS_TIME = 5000;
-const INACTIVE_SESSION_MESSAGE = 'Your session was lost due to inactivity. Please login again';
-const INACTIVE_SESSION = 'SESSION_INACTIVE';
-class NotificationService {
-    constructor() {
-        this.listChange = new Subject();
-        this.max = 0;
-        this.list = [];
-    }
-    error(message, ttl) {
-        this.notify('error', message, ttl);
-    }
-    success(message, ttl) {
-        this.notify('success', message, (!ttl) ? SUCCESS_TIME : ttl);
-    }
-    warning(message, ttl) {
-        this.notify('warning', message, ttl);
-    }
-    info(message, ttl) {
-        this.notify('info', message, ttl);
-    }
-    notify(type, message, ttl) {
-        const found = this.list.find((n) => n.message === message);
-        if (found) {
-            this.remove(found);
-        }
-        const notification = new Notification({
-            id: ++this.max,
-            type, message, ttl
-        });
-        if (notification.ttl > 0) {
-            notification.timerId = setTimeout(() => this.remove(notification, true), notification.ttl);
-        }
-        this.list.push(notification);
-        this.listChange.next(this.list);
-    }
-    remove(notification, auto) {
-        if (!auto && notification.timerId) {
-            // clear timeout in case of manual remove
-            clearInterval(notification.timerId);
-        }
-        this.list = this.list.filter(n => n.id !== notification.id);
-        this.listChange.next(this.list);
-    }
-    removeInactiveSessionError() {
-        if (!this.list || !this.list.length) {
-            return;
-        }
-        this.list = this.list.filter(n => n.message !== INACTIVE_SESSION_MESSAGE && n.message !== INACTIVE_SESSION);
-        this.listChange.next(this.list);
-    }
-}
-NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-const API = {
-    WEBEX_CHECK_CONTROL_HUB_INTEGRATION: "/webex/api/search/webex/customers/:customerId/controlhubexists",
-    SITES: "/dcp/api/customers/:customerId/sites",
-    SITE: "/dcp/api/sites/:siteId",
-    DEVICE_TYPES: "/dcp/api/provision/options/:siteId/devicetypes",
-    SITE_SETTINGS: "/dcp/api/sites/:siteId/settings",
-    VM_USER_TEMPLATES: "/dcp/api/provision/options/:siteId/vmusertemplates",
-    EXISTING_USERS: "/dcp/api/provision/:siteId/users",
-    USER_TEMPLATES_UPLOAD_LIST: "/dcp/api/searchbulkupdate/uploadedusertemplatelist",
-    USER_TEMPLATE_TOKEN: "/dcp/api/bulkupdate/:customerId/usertemplate/:id/token",
-    AVAILABLE_DN_IN_RANGES: "/dcp/api/sites/:siteId/available-dn-in-ranges",
-    USER_CHECK_ID_EXISTING: "/dcp/api/provision/:siteId/users/:userId",
-    LDAP_USERS: "/dcp/api/provision/:siteId/users",
-    USERS: "/dcp/api/provision/:siteId/users",
-    CREATE_NEW_USER_FROM_TEMPLATE: "/dcp/api/provision/newUserFromUserTemplate",
-    DEVICE_DEFAULTS: "/api/provision/options/:siteId/devicedefaults/:deviceType",
-};
-const USER_CREATION_TYPES = {
-    CUCM: 'CUCM',
-    MT: 'MT'
-};
-const MAX_INTEGER = 2147483647;
-const CUTTING_SYMBOLS = [
-    " ",
-    "_",
-    "-"
-];
-const BREADCRUMB_LENGTH_LIMIT = 20;
-const DEFAULT_CUTTING_LENGTH = 15;
-
-class TruncatePipe {
-    transform(value, args) {
-        if (!value) {
-            return '';
-        }
-        if (args) {
-            const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
-            const trail = args.length > 1 ? args[1] : '...';
-            return value.length > limit ? value.substring(0, limit) + trail : value;
-        }
-        if (value.length <= BREADCRUMB_LENGTH_LIMIT) {
-            return value;
-        }
-        const foundSymbol = CUTTING_SYMBOLS.find((symbol) => value.includes(symbol, DEFAULT_CUTTING_LENGTH));
-        const cutIndex = foundSymbol ? value.indexOf(foundSymbol, DEFAULT_CUTTING_LENGTH) : BREADCRUMB_LENGTH_LIMIT;
-        return value.substring(0, cutIndex) + '...';
-    }
-}
-TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TruncatePipe, name: "truncate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TruncatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'truncate'
-                }]
-        }] });
-
-class NotificationsComponent {
-    constructor(notificationService, ref) {
-        this.notificationService = notificationService;
-        this.ref = ref;
-    }
-    ngOnInit() {
-        this.listChangeSubscribe();
-    }
-    ngOnDestroy() {
-        this.listSubscription.unsubscribe();
-    }
-    readMore() {
-        this.isReadMore = !this.isReadMore;
-    }
-    removeNotification(notification) {
-        this.notificationService.remove(notification);
-    }
-    listChangeSubscribe() {
-        this.listSubscription = this.notificationService.listChange
-            .subscribe((list) => {
-            this.list = list;
-            this.ref.detectChanges();
-        });
-    }
-}
-NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, deps: [{ token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "\n\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\n  <div class=\"notification\"\n       *ngFor=\"let notification of list\"\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\n\n    <div class=\"flex-box\">\n      <div class=\"notification-icons-block\">\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\n      </div>\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\n        {{notification.message | truncate:[93]}}\n      </div>\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\n        {{notification.message}}\n      </div>\n    </div>\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\n         (click)=\"readMore()\">{{(isReadMore ? 'Collapse' : 'Read More')}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      (click)=\"removeNotification(notification)\">\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\n    </button>\n  </div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.notification-block{right:10px;top:80px;position:absolute;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\n  <div class=\"notification\"\n       *ngFor=\"let notification of list\"\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\n\n    <div class=\"flex-box\">\n      <div class=\"notification-icons-block\">\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\n      </div>\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\n        {{notification.message | truncate:[93]}}\n      </div>\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\n        {{notification.message}}\n      </div>\n    </div>\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\n         (click)=\"readMore()\">{{(isReadMore ? 'Collapse' : 'Read More')}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      (click)=\"removeNotification(notification)\">\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\n    </button>\n  </div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.notification-block{right:10px;top:80px;position:absolute;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: NotificationService }, { type: i0.ChangeDetectorRef }]; } });
+import * as i8 from '@angular/material/core';
 
 class MaterialModule {
 }
@@ -243,11 +41,7 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         MatIconModule,
         MatFormFieldModule,
         MatInputModule,
-        MatSelectModule,
-        MatAutocompleteModule,
-        MatProgressSpinnerModule,
-        MatPaginatorModule,
-        MatChipsModule], exports: [MatProgressBarModule,
+        MatSelectModule], exports: [MatProgressBarModule,
         MatTooltipModule,
         MatTableModule,
         MatCheckboxModule,
@@ -255,11 +49,7 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         MatIconModule,
         MatFormFieldModule,
         MatInputModule,
-        MatSelectModule,
-        MatAutocompleteModule,
-        MatProgressSpinnerModule,
-        MatPaginatorModule,
-        MatChipsModule] });
+        MatSelectModule] });
 MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
         MatTooltipModule,
         MatTableModule,
@@ -268,11 +58,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         MatIconModule,
         MatFormFieldModule,
         MatInputModule,
-        MatSelectModule,
-        MatAutocompleteModule,
-        MatProgressSpinnerModule,
-        MatPaginatorModule,
-        MatChipsModule, MatProgressBarModule,
+        MatSelectModule, MatProgressBarModule,
         MatTooltipModule,
         MatTableModule,
         MatCheckboxModule,
@@ -280,11 +66,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         MatIconModule,
         MatFormFieldModule,
         MatInputModule,
-        MatSelectModule,
-        MatAutocompleteModule,
-        MatProgressSpinnerModule,
-        MatPaginatorModule,
-        MatChipsModule] });
+        MatSelectModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
             type: NgModule,
             args: [{
@@ -297,11 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MatIconModule,
                         MatFormFieldModule,
                         MatInputModule,
-                        MatSelectModule,
-                        MatAutocompleteModule,
-                        MatProgressSpinnerModule,
-                        MatPaginatorModule,
-                        MatChipsModule,
+                        MatSelectModule
                     ],
                     exports: [
                         MatProgressBarModule,
@@ -312,15 +90,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MatIconModule,
                         MatFormFieldModule,
                         MatInputModule,
-                        MatSelectModule,
-                        MatAutocompleteModule,
-                        MatProgressSpinnerModule,
-                        MatPaginatorModule,
-                        MatChipsModule,
+                        MatSelectModule
                     ]
                 }]
         }] });
 
+const getSavableData = (model, exclude) => {
+    let result = Object.keys(model);
+    if (exclude && exclude.length) {
+        result = result.filter(key => !exclude.some(item => item === key));
+    }
+    return result.reduce((result, key) => {
+        if (model[key] instanceof Array && model[key].length && model[key][0].getSavableData) {
+            result[key] = model[key].map((item) => item.getSavableData());
+        }
+        else if (model[key] instanceof Object && model[key].getSavableData) {
+            result[key] = model[key].getSavableData();
+        }
+        else {
+            result[key] = model[key];
+        }
+        return result;
+    }, {});
+};
+
+class Site {
+    constructor(site) {
+        Object.assign(this, site);
+        this.initForm();
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            name: [this.name || '', [Validators.required]],
+            shortName: [this.shortName || '', [Validators.required]],
+            cucm: [this.cucm || ''],
+            cuc: [this.cuc || ''],
+            address1: [this.address1 || ''],
+            zipCode: [this.country || ''],
+            city: [this.city || ''],
+            state: [this.state || ''],
+            country: [this.country || '', [Validators.required]],
+            isAfterTtu: [this.isAfterTtu || ''],
+            ttuEnableDate: [this.ttuEnableDate || '']
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+    getSavableData() {
+        const nonSavableData = ['form'];
+        return getSavableData(this, nonSavableData);
+    }
+    getId() {
+        return this.id;
+    }
+}
+class SiteDefaults {
+    constructor(siteDefaults, isSharedLineSite) {
+        this.routePartitionFilter = [];
+        this.devicePoolFilter = [];
+        this.cssFilter = [];
+        this.voicemailProfileFilter = [];
+        if (siteDefaults) {
+            Object.assign(this, siteDefaults);
+            this.enableEm = siteDefaults.enableEm === 'true';
+            this.routePartitionFilter.sort();
+            this.devicePoolFilter.sort();
+            this.cssFilter.sort();
+            this.voicemailProfileFilter.sort();
+        }
+        if (isSharedLineSite) {
+            this.cssFilter = siteDefaults?.sharedSitesCssFilter || [];
+            this.routePartitionFilter = siteDefaults?.sharedSitesRPFilter || [];
+        }
+    }
+}
+
+const API = {
+    WEBEX_CHECK_CONTROL_HUB_INTEGRATION: "/webex/api/search/webex/customers/:customerId/controlhubexists",
+    SITES: "/api/customers/:customerId/sites",
+    SITE: "/dcp/api/sites/:siteId",
+    DEVICE_TYPES: "/dcp/api/provision/options/:siteId/devicetypes",
+    SITE_SETTINGS: "/dcp/api/sites/:siteId/settings",
+    VM_USER_TEMPLATES: "/dcp/api/provision/options/:siteId/vmusertemplates",
+    USER_TEMPLATES_UPLOAD_LIST: "/dcp/api/searchbulkupdate/uploadedusertemplatelist",
+    USER_TEMPLATE_TOKEN: "/dcp/api/bulkupdate/:customerId/usertemplate/:id/token",
+};
+const USER_CREATION_TYPES = {
+    CUCM: 'CUCM',
+    MT: 'MT'
+};
+const MAX_INTEGER = 2147483647;
+
 class APIService {
     constructor(httpClient) {
         this.httpClient = httpClient;
@@ -398,26 +258,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
-const BERLIN_MT_SITE = {
-    address2: "Address 2",
-    address3: "Address 3",
-    country: "IL",
-    cucm: {
-        platformType: "CUCM",
-        id: 2073,
-        name: "DI_220"
-    },
-    id: 9329,
-    name: "Berlin_MT",
-    hqStatus: false,
-    hasActivated: true,
-    isAfterTtu: false,
-    prefetchDn: false,
-    settings: [],
-    shortName: "Berl1758105407",
-    state: "",
-    timezone: "GMT"
-};
 class UserCreationApiService {
     constructor() {
         this._allSites = [];
@@ -447,21 +287,32 @@ class UserCreationApiService {
             // }
             // this.allCustomerSites$.next(true);
             // return this._allSites;
-            this.sitesListSubject$.next([BERLIN_MT_SITE, ...res.pageData].sort((a, b) => a.name.localeCompare(b.name)));
+            this.sitesListSubject$.next(res.pageData);
         }));
         //   .pipe(this.handleError(true));
     }
-    getSiteAllData(siteId) {
+    getSiteData(siteId) {
         // this.dataPending = true;
         return forkJoin([
             this.getSite(siteId),
+            this.getDeviceTypes(siteId),
             this.getSiteDefaults(siteId, false),
-            // this.getDeviceTypes(siteId),
-            // this.getVoiceMailUserTemplates(siteId)
-        ]);
+            this.getVoiceMailUserTemplates(siteId)
+        ]).pipe(tap(() => {
+            //   this.userFeaturesService.setDefaultUcProfile();
+        }));
     }
     getSite(siteId, isEdit) {
-        return this.apiService.fetch(API.SITE.replace(':siteId', String(siteId)), null, false);
+        return this.apiService.fetch(API.SITE.replace(':siteId', String(siteId)), null, false)
+            .pipe(map((siteData) => {
+            const site = new Site(siteData);
+            // if (isEdit) {
+            //   this.setEditSite(site);
+            // } else {
+            //   this.setCurrentSite(site);
+            // }
+            return site;
+        }));
     }
     getDeviceTypes(siteId) {
         return this.apiService.fetch(API.DEVICE_TYPES.replace(':siteId', String(siteId)), null, true);
@@ -505,22 +356,6 @@ class UserCreationApiService {
         return this.apiService.fetch(API.USER_TEMPLATE_TOKEN.replace(':customerId', customerId).replace(':id', id));
         // .pipe(this.handleError(false, true));
     }
-    getAvailableDnInRanges(siteId, params) {
-        return this.apiService.fetch(API.AVAILABLE_DN_IN_RANGES.replace(':siteId', siteId), params);
-    }
-    getLdapUsers(siteId, params) {
-        return this.apiService.fetch(API.LDAP_USERS.replace(':siteId', siteId), params);
-    }
-    checkUserIdExisting(siteId, userId) {
-        return this.apiService.fetch(API.USER_CHECK_ID_EXISTING.replace(':siteId', siteId).replace(':userId', userId));
-    }
-    saveTemplateUser(user, templateId, siteId) {
-        return this.apiService.post(API.CREATE_NEW_USER_FROM_TEMPLATE, user, { siteId: siteId, templateId: templateId });
-    }
-    getDeviceDefaults(siteId, deviceType) {
-        const encodedType = encodeURIComponent(deviceType);
-        return this.apiService.fetch(API.DEVICE_DEFAULTS.replace(':siteId', siteId).replace(':deviceType', encodedType));
-    }
 }
 UserCreationApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 UserCreationApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationApiService });
@@ -534,25 +369,11 @@ SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
         MaterialModule,
         NgApexchartsModule,
-        HttpClientModule,
-        ReactiveFormsModule,
-        FormsModule], exports: [MaterialModule,
-        ReactiveFormsModule,
-        FormsModule,
-        MatTableModule,
-        NgApexchartsModule,
-        HttpClientModule] });
+        HttpClientModule], exports: [MaterialModule] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
         MaterialModule,
         NgApexchartsModule,
-        HttpClientModule,
-        ReactiveFormsModule,
-        FormsModule, MaterialModule,
-        ReactiveFormsModule,
-        FormsModule,
-        MatTableModule,
-        NgApexchartsModule,
-        HttpClientModule] });
+        HttpClientModule, MaterialModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
@@ -562,329 +383,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MaterialModule,
                         NgApexchartsModule,
                         HttpClientModule,
-                        ReactiveFormsModule,
-                        FormsModule,
                     ],
                     exports: [
-                        MaterialModule,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        MatTableModule,
-                        NgApexchartsModule,
-                        HttpClientModule,
+                        MaterialModule
                     ]
                 }]
         }] });
 
-function deviceNameValidator(options) {
-    return (control) => {
-        const raw = String(control.value ?? '').trim();
-        if (!raw || !options.regex?.trim()) {
-            return null;
-        }
-        try {
-            const rule = new RegExp(`^(?:${options.regex})$`);
-            if (!rule.test(raw)) {
-                return {
-                    deviceName: {
-                        caption: options.caption || options.regex,
-                    },
-                };
-            }
-        }
-        catch {
-            return null;
-        }
-        return null;
-    };
-}
-
-const getSavableData = (model, exclude) => {
-    let result = Object.keys(model);
-    if (exclude && exclude.length) {
-        result = result.filter(key => !exclude.some(item => item === key));
-    }
-    return result.reduce((result, key) => {
-        if (model[key] instanceof Array && model[key].length && model[key][0].getSavableData) {
-            result[key] = model[key].map((item) => item.getSavableData());
-        }
-        else if (model[key] instanceof Object && model[key].getSavableData) {
-            result[key] = model[key].getSavableData();
-        }
-        else {
-            result[key] = model[key];
-        }
-        return result;
-    }, {});
-};
-
-class Site {
-    constructor(site) {
-        Object.assign(this, site);
-        this.initForm();
-    }
-    initForm() {
-        const formBuilder = new FormBuilder();
-        const formSettings = {
-            name: [this.name || '', [Validators.required]],
-            shortName: [this.shortName || '', [Validators.required]],
-            cucm: [this.cucm || ''],
-            cuc: [this.cuc || ''],
-            address1: [this.address1 || ''],
-            zipCode: [this.country || ''],
-            city: [this.city || ''],
-            state: [this.state || ''],
-            country: [this.country || '', [Validators.required]],
-            isAfterTtu: [this.isAfterTtu || ''],
-            ttuEnableDate: [this.ttuEnableDate || '']
-        };
-        this.form = formBuilder.group(formSettings);
-    }
-    getSavableData() {
-        const nonSavableData = ['form'];
-        return getSavableData(this, nonSavableData);
-    }
-    getId() {
-        return this.id;
-    }
-}
-class SiteDefaults {
-    constructor(siteDefaults, isSharedLineSite) {
-        this.routePartitionFilter = [];
-        this.devicePoolFilter = [];
-        this.cssFilter = [];
-        this.voicemailProfileFilter = [];
-        if (siteDefaults) {
-            Object.assign(this, siteDefaults);
-            this.enableEm = siteDefaults.enableEm === 'true';
-            this.routePartitionFilter.sort();
-            this.devicePoolFilter.sort();
-            this.cssFilter.sort();
-            this.voicemailProfileFilter.sort();
-        }
-        if (isSharedLineSite) {
-            this.cssFilter = siteDefaults?.sharedSitesCssFilter || [];
-            this.routePartitionFilter = siteDefaults?.sharedSitesRPFilter || [];
-        }
-    }
-}
-
-var DnRangeType;
-(function (DnRangeType) {
-    DnRangeType["extension"] = "EXTENSION";
-    DnRangeType["cpg"] = "CPG";
-    DnRangeType["callpark"] = "CALLPARK";
-    DnRangeType["huntgroup"] = "HUNTGROUP";
-    DnRangeType["meetme"] = "MEETME";
-    DnRangeType["did"] = "DID";
-})(DnRangeType || (DnRangeType = {}));
-var UserViewType;
-(function (UserViewType) {
-    UserViewType[UserViewType["details"] = 0] = "details";
-    UserViewType[UserViewType["devices"] = 1] = "devices";
-    UserViewType[UserViewType["lines"] = 2] = "lines";
-    UserViewType[UserViewType["snr"] = 3] = "snr";
-    UserViewType[UserViewType["features"] = 4] = "features";
-    UserViewType[UserViewType["overview"] = 5] = "overview";
-})(UserViewType || (UserViewType = {}));
-
-const ENTITY_CHANGE_TYPE = {
-    ADDED: 'added',
-    UPDATED: 'updated',
-    EXISTING: 'existing',
-    REMOVED: 'removed',
-};
-function deepClone(value) {
-    return JSON.parse(JSON.stringify(value));
-}
-function toApiBooleanString(value) {
-    if (value === true || value === 'true') {
-        return 'true';
-    }
-    if (value === false || value === 'false') {
-        return 'false';
-    }
-    return value == null || value === '' ? '' : String(value);
-}
-function toApiStringValue(value) {
-    if (value === true) {
-        return 'true';
-    }
-    if (value === false) {
-        return 'false';
-    }
-    return value == null ? '' : String(value);
-}
-function normalizeCallInfoDisplay(callInfoDisplay) {
-    if (!callInfoDisplay) {
-        return null;
-    }
-    if (typeof callInfoDisplay === 'string') {
-        try {
-            const parsed = JSON.parse(callInfoDisplay);
-            return normalizeCallInfoDisplay(parsed);
-        }
-        catch {
-            return null;
-        }
-    }
-    if (typeof callInfoDisplay !== 'object') {
-        return null;
-    }
-    const source = callInfoDisplay;
-    return {
-        callerName: source['callerName'] != null ? toApiBooleanString(source['callerName']) : null,
-        callerNumber: source['callerNumber'] != null ? toApiBooleanString(source['callerNumber']) : null,
-        redirectedNumber: source['redirectedNumber'] != null ? toApiBooleanString(source['redirectedNumber']) : null,
-        dialedNumber: source['dialedNumber'] != null ? toApiBooleanString(source['dialedNumber']) : null,
-    };
-}
-function normalizeDidPattern(didPattern, line, directoryNumber) {
-    if (didPattern && typeof didPattern === 'object') {
-        return didPattern;
-    }
-    if (typeof didPattern === 'string' && didPattern.trim()) {
-        return { calledPartyTransformationMask: didPattern };
-    }
-    const dn = directoryNumber || line?.directoryNumber?.directoryNumber;
-    if (dn) {
-        return { calledPartyTransformationMask: dn };
-    }
-    return null;
-}
-function normalizeDirectoryNumber(directoryNumber) {
-    const { displayValue: _displayValue, ...rest } = directoryNumber;
-    return {
-        directoryNumber: rest.directoryNumber ?? '',
-        routePartitionName: rest.routePartitionName ?? '',
-        templateDirectoryNumber: rest.templateDirectoryNumber,
-        pkid: rest.pkid || null,
-        dnType: rest.dnType || null,
-        subType: rest.subType ?? null,
-    };
-}
-function prepareLineAssociation(association, line) {
-    const prepared = deepClone(association);
-    const lineDn = line?.directoryNumber;
-    if (lineDn) {
-        prepared.directoryNumber = {
-            ...prepared.directoryNumber,
-            directoryNumber: lineDn.directoryNumber || '',
-            routePartitionName: lineDn.routePartitionName || '',
-            templateDirectoryNumber: lineDn.templateDirectoryNumber ??
-                prepared.directoryNumber?.templateDirectoryNumber,
-        };
-    }
-    prepared.directoryNumber = normalizeDirectoryNumber(prepared.directoryNumber);
-    prepared.entityChangeType = prepared.entityChangeType || ENTITY_CHANGE_TYPE.ADDED;
-    prepared.logMissedCall = toApiBooleanString(prepared.logMissedCall);
-    prepared.callInfoDisplay = normalizeCallInfoDisplay(prepared.callInfoDisplay);
-    prepared.didPattern = normalizeDidPattern(prepared.didPattern, line, prepared.directoryNumber?.directoryNumber);
-    prepared.visualMWI = toApiStringValue(prepared.visualMWI);
-    prepared.audibleMWI = toApiStringValue(prepared.audibleMWI);
-    prepared.associated = prepared.associated ?? true;
-    return prepared;
-}
-function prepareLine(line) {
-    const prepared = deepClone(line);
-    prepared.entityChangeType = prepared.entityChangeType || ENTITY_CHANGE_TYPE.ADDED;
-    if (prepared.directoryNumber) {
-        prepared.directoryNumber = normalizeDirectoryNumber(prepared.directoryNumber);
-    }
-    return prepared;
-}
-function syncDeviceLineAssociations(device, lines) {
-    device.lineAssociations = (device.lineAssociations || []).map((association, index) => prepareLineAssociation(association, lines[index]));
-}
-function prepareDeviceForSave(device, userId, lines, deviceName) {
-    const prepared = deepClone(device);
-    const resolvedName = deviceName.trim();
-    prepared.name = resolvedName;
-    prepared.newName = resolvedName;
-    prepared.entityChangeType = prepared.entityChangeType || ENTITY_CHANGE_TYPE.ADDED;
-    prepared.createDeviceMode = prepared.createDeviceMode ?? false;
-    if (prepared.extraOptions) {
-        prepared.extraOptions.mobilityUserId = userId;
-    }
-    syncDeviceLineAssociations(prepared, lines);
-    return prepared;
-}
-function resolvePrimaryLineReference(user) {
-    const firstDeviceAssociation = user.devices?.[0]?.lineAssociations?.[0]?.directoryNumber;
-    if (firstDeviceAssociation) {
-        return firstDeviceAssociation;
-    }
-    const firstLineDn = user.lines?.[0]?.directoryNumber;
-    return firstLineDn ?? null;
-}
-function buildSavableEndUser(endUser, lines, devices, deviceProfiles, form, options = {}) {
-    const user = deepClone(endUser);
-    user.userid = form.userId || user.userid || '';
-    user.firstName = form.firstName || user.firstName || '';
-    user.lastName = form.lastName || user.lastName || '';
-    user.email = form.email || user.email || '';
-    user.createUserMode = false;
-    user.lines = (lines || []).map(line => prepareLine(line));
-    user.devices = (devices || []).map((device, index) => prepareDeviceForSave(device, user.userid || '', user.lines, options.resolveDeviceName?.(index, device) ?? device.name ?? device.newName ?? ''));
-    user.deviceProfiles = (deviceProfiles || []).map((profile, index) => prepareDeviceForSave(profile, user.userid || '', user.lines, options.resolveDeviceProfileName?.(index, profile) ?? profile.name ?? profile.newName ?? ''));
-    user.primaryLineReference = resolvePrimaryLineReference(user);
-    const snr = user.singleNumberReach;
-    if (snr && !snr.remoteDestinationProfileName) {
-        user.singleNumberReach = null;
-    }
-    return user;
-}
-
-/**
- * Strips a leading device-prefix group from `deviceNameRegex`, returning the pattern
- * to validate the name field value (without matPrefix).
- *
- * - `([sS][eE][pP]|BAT)[0-9a-fA-F]{12}` → `[0-9a-fA-F]{12}`
- * - `[a-zA-Z0-9]{1,15}` → `[a-zA-Z0-9]{1,15}` (unchanged)
- */
-function parseDeviceNameRegexBody(deviceNameRegex) {
-    const fullRegex = deviceNameRegex?.trim() ?? '';
-    if (!fullRegex) {
-        return '';
-    }
-    return stripLeadingPrefixGroup(fullRegex);
-}
-function stripLeadingPrefixGroup(regex) {
-    const parenMatch = regex.match(/^(\(.+?\))(.+)$/s);
-    if (parenMatch?.[2]?.trim()) {
-        return parenMatch[2];
-    }
-    const literalMatch = regex.match(/^([A-Za-z]+)(\[.+\])$/s);
-    if (literalMatch?.[2]?.trim()) {
-        return literalMatch[2];
-    }
-    return regex;
-}
-
 class UserCreationWizardService {
-    get currentSite() {
-        return this._currentSite;
-    }
-    get firstLineRoutePartition() {
-        return this.lines[0]?.directoryNumber?.routePartitionName ?? '';
-    }
-    get siteDefaultRoutePartition() {
-        return this.siteDefaults?.routePartition || '';
-    }
-    get routePartitionNamesList() {
-        return this.siteDefaults ? this.siteDefaults.routePartitionFilter : [];
-    }
     constructor() {
-        this.userCreationApiService = inject(UserCreationApiService);
+        this.api = inject(UserCreationApiService);
         this.ldapTableColumns = ['userId', 'firstName', 'lastName', 'email', 'add'];
         this.userCreationTypes = ['CUCM', 'MT'];
-        this.template = null;
-        this.endUser = null;
-        this.lines = [];
-        this.devices = [];
-        this.deviceProfiles = [];
-        this.templateLinesSnapshot = null;
-        this._currentSite = null;
         this.siteOptions = [];
         this.templateOptions = [];
         this.lineOptions = [];
@@ -894,89 +404,40 @@ class UserCreationWizardService {
         this.overviewUsers = [];
         this.overviewLines = [];
         this.overviewDevices = [];
-        this.overviewDeviceProfiles = [];
-        this.userDetailsFormValue = null;
         this.userDetailsForm = {
             userId: '',
             firstName: '',
             lastName: '',
-            email: '',
+            email: ''
         };
         this.lineSelections = [];
         this.deviceEntries = [];
-        this.availableNumbers = [];
-        this.deviceTypes = [];
-        this.siteDefaults = null;
-        this.originalSiteDefaults = null;
-        this.templateLines = [];
-        this.templateDevices = [];
-        this.templateUserDetails = {};
         this.selectedSite = null;
-        this.selectedTemplateName = null;
-        this.selectedTemplateId = null;
+        this.selectedTemplate = null;
         this.selectedUserCreationType = 'CUCM';
-        this.availableDidPatternsMappedToDn = {};
-        this.deviceDefaultsLoadedSubject = new Subject();
-        this.deviceDefaultsLoaded$ = this.deviceDefaultsLoadedSubject.asObservable();
-        this.selectedLdapUser = null;
-        this.ldapUsersTotal = 0;
-        // this.loadPlaceholderData();
-    }
-    get isLdapIntegrated() {
-        return !!this.endUser?.ldapIntegrated;
-    }
-    selectLdapUser(user) {
-        this.selectedLdapUser = user;
-        if (this.endUser) {
-            this.endUser.ldapIntegrated = true;
-            this.endUser.userid = user.userid;
-            this.endUser.firstName = user.firstName ?? '';
-            this.endUser.lastName = user.lastName ?? '';
-            this.endUser.email = user.email ?? '';
-        }
-        this.userDetailsForm = {
-            userId: user.userid,
-            firstName: user.firstName ?? '',
-            lastName: user.lastName ?? '',
-            email: user.email ?? '',
-        };
-        this.rebuildOverviewUsers();
+        this.addedLdapUserIds = new Set();
+        this.loadPlaceholderData();
     }
-    clearLdapUserSelection() {
-        this.selectedLdapUser = null;
-        if (this.endUser) {
-            this.endUser.ldapIntegrated = false;
-            this.endUser.userid = '';
-            this.endUser.firstName = '';
-            this.endUser.lastName = '';
-            this.endUser.email = '';
-        }
+    addLdapUser(row) {
         this.userDetailsForm = {
-            userId: '',
-            firstName: '',
-            lastName: '',
-            email: '',
+            userId: row.userId,
+            firstName: row.firstName,
+            lastName: row.lastName,
+            email: row.email
         };
+        this.addedLdapUserIds.add(row.userId);
         this.rebuildOverviewUsers();
     }
-    isLdapUserRowSelected(row) {
-        return this.selectedLdapUser?.userid === row.userid;
-    }
-    setLdapUsersResult(users, total) {
-        this.ldapUsers = users;
-        this.ldapUsersTotal = total;
+    isLdapUserAdded(row) {
+        return this.addedLdapUserIds.has(row.userId);
     }
     setSelectedSite(site) {
-        this.selectedSite = site || null;
+        this.selectedSite = site;
     }
     setSelectedTemplate(template) {
-        this.selectedTemplateName = template?.name || null;
-        this.selectedTemplateId = template?.id || null;
+        this.selectedTemplate = template;
         this.rebuildOverviewUsers();
     }
-    setCurrentSite(site) {
-        this._currentSite = site;
-    }
     resetTemplateDrivenData() {
         this.lineOptions = [];
         this.routePartitionOptions = [];
@@ -987,121 +448,69 @@ class UserCreationWizardService {
         this.rebuildOverviewDevices();
     }
     applyTemplateTokenPayload(payload) {
-        this.template = this.extractTemplateFromTokenPayload(payload);
-        this.endUser = this.template?.endUser || null;
-        this.lines = this.endUser && Array.isArray(this.endUser?.lines) ? this.endUser.lines : [];
-        this.devices = this.endUser && Array.isArray(this.endUser?.devices) ? this.endUser.devices : [];
-        this.deviceProfiles = this.endUser && Array.isArray(this.endUser?.deviceProfiles) ? this.endUser.deviceProfiles : [];
-        this.initTemplateDnsNamesForLines();
-        // this.userDetailsForm = {
-        //     userId: this.valueToString(this.endUser?.userid ?? ''),
-        //     firstName: this.valueToString(this.endUser?.firstName ?? ''),
-        //     lastName: this.valueToString(this.endUser?.lastName ?? ''),
-        //     email: this.valueToString(this.endUser?.email ?? '')
-        // };
-        // const mappedLineOptions: LineOption[] = linesFromTemplate
-        //     .map(line => ({
-        //         number: this.valueToString(line?.directoryNumber?.directoryNumber),
-        //         did: this.valueToString(line?.didPatterns?.[0]?.pattern || line?.directoryNumber?.directoryNumber),
-        //         css: this.valueToString(
-        //             typeof line?.callingSearchSpace === 'string'
-        //                 ? line.callingSearchSpace
-        //                 : line?.callingSearchSpace?.name
-        //         ),
-        //         description: this.valueToString(line?.description)
-        //     }))
-        //     .filter(line => line.number.trim().length > 0);
-        this.devices.forEach(device => this.initDeviceWithSiteInfo(device));
-        this.deviceProfiles.forEach(device => this.initDeviceWithSiteInfo(device));
-        this.lines.forEach(line => this.initLineWithSiteInfo(line));
-        this.captureTemplateLinesSnapshot();
-        if (this.selectedSite) {
-            this.loadDeviceDefaultsForDevices(this.selectedSite).subscribe();
-        }
-        // if (mappedLineOptions.length) {
-        //     this.lineOptions = this.uniqueByNumber(mappedLineOptions);
-        //     this.lineSelections = this.lineOptions.map(line => ({
-        //         lineNumber: line.number,
-        //         routePartitionName: linesFromTemplate.find(
-        //             source => (source?.directoryNumber?.directoryNumber || '') === line.number
-        //         )?.directoryNumber?.routePartitionName || null
-        //     }));
-        // } else {
-        //     const lineAssociations = devicesFromTemplate.flatMap(device => device.lineAssociations || []);
-        //     const associatedLineOptions: LineOption[] = lineAssociations
-        //         .map(association => {
-        //             const number = association?.directoryNumber?.directoryNumber || '';
-        //             return {
-        //                 number,
-        //                 did: number,
-        //                 css: '',
-        //                 description: ''
-        //             };
-        //         })
-        //         .filter(line => line.number.trim().length > 0);
-        //     this.lineOptions = this.uniqueByNumber(associatedLineOptions);
-        //     this.lineSelections = this.lineOptions.map(line => ({
-        //         lineNumber: line.number,
-        //         routePartitionName: lineAssociations.find(
-        //             source => (source?.directoryNumber?.directoryNumber || '') === line.number
-        //         )?.directoryNumber?.routePartitionName || null
-        //     }));
-        //     this.templateLines.forEach((line: any) => this.initLineWithSiteInfo(line));
-        //     this.initTemplateDnsNamesForLines(this.templateLines);
-        // }
-        // const routePartitions = this.lineSelections
-        //     .map(line => line.routePartitionName)
-        //     .filter((value): value is string => !!value && value.trim().length > 0);
-        // this.routePartitionOptions = this.uniqueStrings(routePartitions);
-        // this.deviceEntries = devicesFromTemplate.map(device => ({
-        //     deviceType: this.valueToString(device.deviceType),
-        //     protocol: this.valueToString(device.protocol),
-        //     buttonTemplate: this.valueToString(device.buttonTemplate),
-        //     name: this.valueToString(device.name)
-        // }));
-        // this.deviceRows = this.deviceEntries.map((_, index) => index + 1);
-        // this.rebuildOverviewUsers();
-        // this.rebuildOverviewLines();
-        // this.rebuildOverviewDevices();
-    }
-    setSelectedUserCreationType(type) {
-        this.selectedUserCreationType = type;
-    }
-    resetUserDetailsStepState() {
-        this.userDetailsFormValue = null;
+        const template = this.extractTemplateFromTokenPayload(payload);
+        const endUser = template?.endUser || {};
+        const linesFromTemplate = Array.isArray(endUser.lines) ? endUser.lines : [];
+        const devicesFromTemplate = Array.isArray(endUser.devices) ? endUser.devices : [];
         this.userDetailsForm = {
-            userId: '',
-            firstName: '',
-            lastName: '',
-            email: '',
+            userId: this.valueToString(endUser.userid),
+            firstName: this.valueToString(endUser.firstName),
+            lastName: this.valueToString(endUser.lastName),
+            email: this.valueToString(endUser.email)
         };
-        this.selectedLdapUser = null;
-        this.ldapUsers = [];
-        this.ldapUsersTotal = 0;
-        if (this.templateLinesSnapshot) {
-            this.lines = JSON.parse(JSON.stringify(this.templateLinesSnapshot));
-        }
-        this.devices.forEach(device => {
-            device.name = '';
-        });
-        this.deviceProfiles.forEach(profile => {
-            profile.name = '';
-        });
-        if (this.endUser) {
-            this.endUser.userid = '';
-            this.endUser.firstName = '';
-            this.endUser.lastName = '';
-            this.endUser.email = '';
-            this.endUser.ldapIntegrated = false;
-            this.endUser.lines = this.lines;
+        const mappedLineOptions = linesFromTemplate
+            .map(line => ({
+            number: this.valueToString(line?.directoryNumber?.directoryNumber),
+            did: this.valueToString(line?.didPatterns?.[0]?.pattern || line?.directoryNumber?.directoryNumber),
+            css: this.valueToString(typeof line?.callingSearchSpace === 'string'
+                ? line.callingSearchSpace
+                : line?.callingSearchSpace?.name),
+            description: this.valueToString(line?.description)
+        }))
+            .filter(line => line.number.trim().length > 0);
+        if (mappedLineOptions.length) {
+            this.lineOptions = this.uniqueByNumber(mappedLineOptions);
+            this.lineSelections = this.lineOptions.map(line => ({
+                lineNumber: line.number,
+                routePartitionName: linesFromTemplate.find(source => (source?.directoryNumber?.directoryNumber || '') === line.number)?.directoryNumber?.routePartitionName || null
+            }));
         }
-        this.overviewUsers = [];
+        else {
+            const lineAssociations = devicesFromTemplate.flatMap(device => device.lineAssociations || []);
+            const associatedLineOptions = lineAssociations
+                .map(association => {
+                const number = association?.directoryNumber?.directoryNumber || '';
+                return {
+                    number,
+                    did: number,
+                    css: '',
+                    description: ''
+                };
+            })
+                .filter(line => line.number.trim().length > 0);
+            this.lineOptions = this.uniqueByNumber(associatedLineOptions);
+            this.lineSelections = this.lineOptions.map(line => ({
+                lineNumber: line.number,
+                routePartitionName: lineAssociations.find(source => (source?.directoryNumber?.directoryNumber || '') === line.number)?.directoryNumber?.routePartitionName || null
+            }));
+        }
+        const routePartitions = this.lineSelections
+            .map(line => line.routePartitionName)
+            .filter((value) => !!value && value.trim().length > 0);
+        this.routePartitionOptions = this.uniqueStrings(routePartitions);
+        this.deviceEntries = devicesFromTemplate.map(device => ({
+            deviceType: this.valueToString(device.deviceType),
+            protocol: this.valueToString(device.protocol),
+            buttonTemplate: this.valueToString(device.buttonTemplate),
+            name: this.valueToString(device.name)
+        }));
+        this.deviceRows = this.deviceEntries.map((_, index) => index + 1);
+        this.rebuildOverviewUsers();
         this.rebuildOverviewLines();
         this.rebuildOverviewDevices();
-        this.rebuildOverviewDeviceProfiles();
     }
-    captureTemplateLinesSnapshot() {
-        this.templateLinesSnapshot = JSON.parse(JSON.stringify(this.lines));
+    setSelectedUserCreationType(type) {
+        this.selectedUserCreationType = type;
     }
     setUserDetailsField(field, value) {
         this.userDetailsForm = {
@@ -1110,47 +519,6 @@ class UserCreationWizardService {
         };
         this.rebuildOverviewUsers();
     }
-    applyUserDetailsFormValue(formValue) {
-        this.userDetailsFormValue = formValue;
-        this.userDetailsForm = {
-            userId: formValue.userId || '',
-            firstName: formValue.firstName || '',
-            lastName: formValue.lastName || '',
-            email: formValue.email || '',
-        };
-        formValue.lines?.forEach((lineValue, index) => {
-            const line = this.lines[index];
-            if (!line?.directoryNumber) {
-                return;
-            }
-            line.directoryNumber.directoryNumber = lineValue.number || '';
-            line.directoryNumber.routePartitionName = lineValue.routePartition || '';
-        });
-        formValue.devices?.forEach((deviceValue, index) => {
-            const device = this.devices[index];
-            if (!device) {
-                return;
-            }
-            device.name = deviceValue.name || '';
-        });
-        formValue.deviceProfiles?.forEach((profileValue, index) => {
-            const profile = this.deviceProfiles[index];
-            if (!profile) {
-                return;
-            }
-            profile.name = profileValue.name || '';
-        });
-        if (this.endUser) {
-            this.endUser.userid = formValue.userId || '';
-            this.endUser.firstName = formValue.firstName || '';
-            this.endUser.lastName = formValue.lastName || '';
-            this.endUser.email = formValue.email || '';
-        }
-        this.rebuildOverviewUsers();
-        this.rebuildOverviewLines();
-        this.rebuildOverviewDevices();
-        this.rebuildOverviewDeviceProfiles();
-    }
     setLineSelection(index, lineNumber) {
         if (!this.lineSelections[index]) {
             return;
@@ -1200,83 +568,63 @@ class UserCreationWizardService {
         }
         return entry.name || '';
     }
-    getSiteAllData(siteId) {
-        return this.userCreationApiService.getSiteAllData(siteId).pipe(tap((res) => {
-            if (res && res[0]) {
-                const site = new Site(res[0]);
-                this.selectedSite = site.id;
+    // Placeholder bootstrap until backend APIs are connected.
+    loadPlaceholderData() {
+        this.siteOptions = ['Site 1', 'Site 2', 'Site 3'];
+        this.templateOptions = ['User 8851 Office'];
+        this.lineOptions = [
+            {
+                number: '557046',
+                did: '+13125557046',
+                css: 'Atlanta_internal_css',
+                description: ''
+            },
+            {
+                number: '557047',
+                did: '+13125557047',
+                css: 'Atlanta_internal_css',
+                description: ''
+            },
+            {
+                number: '557048',
+                did: '+13125557048',
+                css: 'Atlanta_internal_css',
+                description: ''
             }
-            if (res && res[1]) {
-                this.siteDefaults = new SiteDefaults(res[1], false);
-                this.originalSiteDefaults = new SiteDefaults(res[1], false);
-                this.routePartitionOptions = [...this.routePartitionNamesList];
+        ];
+        this.routePartitionOptions = ['Atlanta_internal_PT', 'Beijing_national_PT'];
+        this.deviceRows = [1, 2];
+        this.ldapUsers = [
+            { userId: 'John.Doe', firstName: 'John', lastName: 'Doe', email: 'john.doe@car.west.io' },
+            { userId: 'Jane.Smith', firstName: 'Jane', lastName: 'Smith', email: 'jane.smith@car.west.io' }
+        ];
+        this.lineSelections = [
+            {
+                lineNumber: null,
+                routePartitionName: this.routePartitionOptions[0] || null
             }
-            if (res && res[2]) {
-                this.deviceTypes = res[2];
+        ];
+        this.deviceEntries = [
+            {
+                deviceType: 'Cisco 8851',
+                protocol: 'SIP',
+                buttonTemplate: 'Standard 8851 SIP',
+                name: ''
+            },
+            {
+                deviceType: 'Cisco Unified Client Services Framework',
+                protocol: 'SIP',
+                buttonTemplate: 'Standard Client Services Framework',
+                name: ''
             }
-        }), switchMap(res => this.loadDeviceDefaultsForDevices(siteId).pipe(map(() => res))));
-    }
-    loadDeviceDefaultsForDevices(siteId) {
-        const deviceTypes = this.getUniqueDeviceTypes();
-        if (!deviceTypes.length) {
-            return of(undefined);
-        }
-        const requests = deviceTypes.map(deviceType => this.userCreationApiService.getDeviceDefaults(String(siteId), deviceType).pipe(tap(defaults => this.applyDeviceDefaultsToType(deviceType, defaults)), catchError(() => of(null))));
-        return forkJoin(requests).pipe(tap(() => this.deviceDefaultsLoadedSubject.next()), map(() => undefined));
-    }
-    getUniqueDeviceTypes() {
-        const types = [
-            ...this.devices.map(device => device.deviceType),
-            ...this.deviceProfiles.map(profile => profile.deviceType),
-        ].filter((type) => !!type && type.trim().length > 0);
-        return [...new Set(types)];
-    }
-    applyDeviceDefaultsToType(deviceType, defaults) {
-        const nameValidationRegex = parseDeviceNameRegexBody(defaults.deviceNameRegex);
-        const targets = [...this.devices, ...this.deviceProfiles].filter(device => device.deviceType === deviceType);
-        targets.forEach(device => {
-            device.deviceDefaults = defaults;
-            device.nameValidationRegex = nameValidationRegex;
-            device.nameValidationCaption = defaults.deviceNameExplained;
-        });
-    }
-    getDeviceNamePrefix(deviceIndex, isProfile = false) {
-        const device = isProfile ? this.deviceProfiles[deviceIndex] : this.devices[deviceIndex];
-        const prefix = device?.prefix?.trim();
-        return prefix || null;
-    }
-    getDeviceNameValidationCaption(deviceIndex, isProfile = false) {
-        const device = isProfile ? this.deviceProfiles[deviceIndex] : this.devices[deviceIndex];
-        return device?.nameValidationCaption || device?.deviceDefaults?.deviceNameExplained || '';
-    }
-    getDeviceNameValidationOptions(deviceIndex, isProfile = false) {
-        const device = isProfile ? this.deviceProfiles[deviceIndex] : this.devices[deviceIndex];
-        const regex = device?.nameValidationRegex?.trim() ||
-            parseDeviceNameRegexBody(device?.deviceDefaults?.deviceNameRegex);
-        if (!regex) {
-            return null;
-        }
-        return {
-            regex,
-            caption: this.getDeviceNameValidationCaption(deviceIndex, isProfile),
-        };
-    }
-    getNumberRange(siteId, routePartition) {
-        this.availableDidPatternsMappedToDn = {};
-        const pageSize = 9999;
-        const params = { dntype: DnRangeType.extension, routepartition: routePartition, size: pageSize, page: 0 };
-        this.availableNumbers = [];
-        return this.userCreationApiService.getAvailableDnInRanges(siteId, params)
-            .pipe(map((res) => {
-            res.availableNumberList.forEach((availableNumber) => {
-                this.setAvailableDidMappedToDn(availableNumber);
-                this.availableNumbers = [...this.availableNumbers, ...this.getUnwrapNumberRange(availableNumber)];
-            });
-        }));
-        // .pipe(this.handleError(true, false));
+        ];
+        this.selectedTemplate = this.selectedTemplate ?? null;
+        this.rebuildOverviewUsers();
+        this.rebuildOverviewLines();
+        this.rebuildOverviewDevices();
     }
     rebuildOverviewUsers() {
-        const userTemplate = this.selectedTemplateName || '';
+        const userTemplate = this.selectedTemplate || '';
         const hasUserData = Object.values(this.userDetailsForm).some(value => value.trim().length > 0);
         this.overviewUsers = hasUserData
             ? [{
@@ -1289,23 +637,6 @@ class UserCreationWizardService {
             : [];
     }
     rebuildOverviewLines() {
-        const formLines = this.userDetailsFormValue?.lines;
-        if (formLines?.length) {
-            this.overviewLines = formLines
-                .filter(line => !!line?.number?.trim())
-                .map((lineValue, index) => {
-                const templateLine = this.lines[index];
-                const css = this.valueToString(templateLine?.callingSearchSpace);
-                return {
-                    number: lineValue.number,
-                    did: lineValue.lineNumber || lineValue.number,
-                    routePartitionName: lineValue.routePartition || '',
-                    css,
-                    description: this.valueToString(templateLine?.description),
-                };
-            });
-            return;
-        }
         this.overviewLines = this.lineSelections
             .map(selection => {
             if (!selection?.lineNumber) {
@@ -1327,18 +658,6 @@ class UserCreationWizardService {
     }
     rebuildOverviewDevices() {
         const selectedLineNumbers = this.overviewLines.map(line => line.number).join(', ');
-        const formDevices = this.userDetailsFormValue?.devices;
-        if (formDevices?.length) {
-            this.overviewDevices = formDevices
-                .filter(device => !!device.deviceType?.trim() || !!device.name?.trim())
-                .map(device => ({
-                name: device.name || '',
-                deviceType: device.deviceType || '',
-                lines: selectedLineNumbers,
-                description: `${device.protocol || ''} / ${device.buttonTemplate || ''}`.trim(),
-            }));
-            return;
-        }
         this.overviewDevices = this.deviceEntries
             .map((device, index) => ({
             device,
@@ -1352,22 +671,6 @@ class UserCreationWizardService {
             description: `${device.protocol} / ${device.buttonTemplate}`
         }));
     }
-    rebuildOverviewDeviceProfiles() {
-        const selectedLineNumbers = this.overviewLines.map(line => line.number).join(', ');
-        const formProfiles = this.userDetailsFormValue?.deviceProfiles;
-        if (!formProfiles?.length) {
-            this.overviewDeviceProfiles = [];
-            return;
-        }
-        this.overviewDeviceProfiles = formProfiles
-            .filter(profile => !!profile.deviceType?.trim() || !!profile.name?.trim())
-            .map(profile => ({
-            name: profile.name || '',
-            deviceType: profile.deviceType || '',
-            lines: selectedLineNumbers,
-            description: `${profile.protocol || ''} / ${profile.buttonTemplate || ''}`.trim(),
-        }));
-    }
     extractTemplateFromTokenPayload(payload) {
         if (!payload || typeof payload !== 'object') {
             return null;
@@ -1394,247 +697,10 @@ class UserCreationWizardService {
     valueToString(value) {
         return typeof value === 'string' ? value : '';
     }
-    getUnwrapNumberRange(availableNumber) {
-        let unwrapNumberRange = this.unwrapNumberRange(availableNumber.phoneNumberRange.from, availableNumber.phoneNumberRange.to)
-            .map((unwrappedNumber) => {
-            const dn = availableNumber.phoneNumberRange.prefix + unwrappedNumber;
-            let str = dn;
-            if (this.availableDidPatternsMappedToDn[dn] && this.availableDidPatternsMappedToDn[dn].length > 0) {
-                if (this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] && this.availableDidPatternsMappedToDn[dn][0]['mappedDids'].length > 0) {
-                    str += '        DID:  ' + (this.availableDidPatternsMappedToDn[dn][0]['mappedDids'].length > 1 ? 'multiple' :
-                        this.availableDidPatternsMappedToDn[dn][0]['mappedDids'][0]);
-                }
-                if (this.availableDidPatternsMappedToDn[dn][0]['vm']) {
-                    str += '        In Use - VM';
-                }
-            }
-            return str;
-        });
-        unwrapNumberRange = unwrapNumberRange.filter((unwrappedNumber) => !availableNumber.usedNumbers.includes(unwrappedNumber));
-        return unwrapNumberRange;
-    }
-    unwrapNumberRange(start, end) {
-        const regExp = /(^0+)/;
-        let leadingZeros = '';
-        const matches = start.match(regExp);
-        if (matches) {
-            leadingZeros = matches[1];
-        }
-        const startNumeric = new Big(start);
-        const endNumeric = new Big(end);
-        return Array.from({ length: Number(endNumeric.minus(startNumeric).plus(new Big(1)).toFixed(0)) }, (v, k) => {
-            const number = String(startNumeric.plus(new Big(k.toString())).toFixed(0));
-            if ((leadingZeros + number).length > start.length) {
-                leadingZeros = leadingZeros.substr(1);
-            }
-            return leadingZeros + number;
-        });
-    }
-    setAvailableDidMappedToDn(availableNumber) {
-        if (availableNumber.unUsedNumbersWithDids && availableNumber.unUsedNumbersWithDids.length) {
-            availableNumber.unUsedNumbersWithDids.forEach((numberWithDids) => {
-                const dn = numberWithDids['unUsedNumber'];
-                this.availableDidPatternsMappedToDn[dn] = [{}];
-                if (numberWithDids['translationPatternList'] && numberWithDids['translationPatternList'].length > 0) {
-                    this.availableDidPatternsMappedToDn[dn] = numberWithDids['translationPatternList'];
-                    this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] = [{}];
-                    if (numberWithDids['mappedDids'] && numberWithDids['mappedDids'].length > 0) {
-                        this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] = numberWithDids['mappedDids'];
-                    }
-                }
-                this.availableDidPatternsMappedToDn[dn][0]['vm'] = numberWithDids['vm'];
-            });
-        }
-    }
     // TODO: replace placeholders with real API integration.
     loadDataFromApi() {
         // this.api.getWizardBootstrapData().subscribe(...)
     }
-    initLineWithSiteInfo(line) {
-        line.directoryNumber.routePartitionName = this.siteDefaults?.routePartition || '';
-        let callingSearchSpaceVal = this.siteDefaults?.lineCss || '';
-        line.callingSearchSpace = callingSearchSpaceVal;
-    }
-    // private initTemplateDnsNamesForLines(userLines: TemplateLineLike[]): void {
-    //     const routePartition = this.siteDefaults?.routePartition || '';
-    //     if (userLines && userLines.length > 0) {
-    //         userLines.forEach((line, index) => {
-    //             line && line.directoryNumber && (line.directoryNumber.templateDirectoryNumber = line.directoryNumber.directoryNumber);
-    //             line && line.directoryNumber && (line.directoryNumber.directoryNumber = '');
-    //             return line;
-    //         });
-    //         // const routePartition = this.siteDefaults?.routePartition || '';
-    //         // if (line.lineAssociations && line.lineAssociations.length) {
-    //         // this.setLineAssociationsForDevice(line, routePartition);
-    //         // }
-    //     }
-    //     this.templateDevices.forEach(device => {
-    //         if (device.lineAssociations && device.lineAssociations.length) {
-    //             this.setLineAssociationsForDevice(device, routePartition);
-    //         }
-    //     });
-    // }
-    setLineAssociationsForDevice(device, routePartition) {
-        const lineAssociations = device.lineAssociations || [];
-        if (lineAssociations && lineAssociations.length) {
-            lineAssociations.forEach(lineAssociation => {
-                lineAssociation && lineAssociation.directoryNumber && (lineAssociation.directoryNumber.templateDirectoryNumber = lineAssociation.directoryNumber.directoryNumber || '');
-                lineAssociation && lineAssociation.directoryNumber && (lineAssociation.directoryNumber.routePartitionName = routePartition);
-            });
-        }
-    }
-    initDeviceWithSiteInfo(device) {
-        device.newName = device.name;
-        device.name = '';
-        if (!device['enabledExtensionMobility']) {
-            device.enabledExtensionMobility = this.siteDefaults?.enableEm ?? false;
-        }
-        else if (device['enabledExtensionMobility'].toString() === 'Yes') {
-            device.enabledExtensionMobility = true;
-        }
-        else if (device['enabledExtensionMobility'].toString() === 'No') {
-            device.enabledExtensionMobility = false;
-        }
-        if (device.location) {
-            const replacedValue = this.replaceDynamicValueSiteInfo(device.location, this.currentSite?.shortName ?? '') ?? null;
-            device.location = replacedValue;
-        }
-        if (device.location) {
-            const replacedValue = this.replaceDynamicValueSiteInfo(device.devicePoolName, this.currentSite?.shortName ?? '') ?? null;
-            device.devicePoolName = replacedValue;
-        }
-        if (device.location) {
-            const replacedValue = this.replaceDynamicValueSiteInfo(device.callingSearchSpaceName, this.currentSite?.shortName ?? '') ?? null;
-            device.callingSearchSpaceName = replacedValue;
-        }
-        if (device.extraOptions) {
-            const replacedValue = this.replaceDynamicValueSiteInfo(device.extraOptions.aarCss, this.currentSite?.shortName ?? '') ?? null;
-            device.extraOptions.aarCss = replacedValue;
-        }
-        if (!device.description && this.siteDefaults) {
-            device.description = this.siteDefaults.deviceDescription;
-        }
-    }
-    replaceDynamicValueSiteInfo(fieldValue, siteShortName) {
-        if (fieldValue) {
-            fieldValue = this.replaceDynamicValueFormat(fieldValue);
-            const paramsToReplaces = { 'SiteShortName': siteShortName };
-            return this.mutliStringReplace(paramsToReplaces, fieldValue);
-        }
-        return null;
-    }
-    replaceDynamicValueFormat(str) {
-        str = str.replace(/\[FN\]/ig, '[FN]').replace(/\[LN\]/ig, '[LN]').replace(/\[ID\]/ig, '[UserId]')
-            .replace(/\[UserId\]/ig, '[UserId]').replace(/<Match User ID>/ig, '[UserId]')
-            .replace(/\[Email\]/ig, '[Email]').replace(/\[DN\(/ig, '[DN(')
-            .replace(/\[SiteShortName\]/ig, '[SiteShortName]').replace(/\$\(SiteShortName\)/ig, '[SiteShortName]')
-            .replace(/\$\{SiteShortName\}/ig, '[SiteShortName]').replace(/{SiteShortName}/ig, '[SiteShortName]')
-            .replace(/\[FN\(/ig, '[FN(').replace(/\[LN\(/ig, '[LN(')
-            .replace(/\[ID\(/ig, '[ID(');
-        return str;
-    }
-    mutliStringReplace(object, input, directoryNumber, user) {
-        var val = input;
-        if (val.includes('[DN]') && directoryNumber && !directoryNumber.includes('Line')) {
-            val = val.replace('[DN]', directoryNumber);
-        }
-        var indexOfDN = val.indexOf('[DN(');
-        if (indexOfDN !== -1 && directoryNumber) {
-            var digit = val.substring(indexOfDN + 4, val.indexOf(')', indexOfDN + 4));
-            var digitCount = Number(digit) || 0;
-            var dnDigit = (digitCount > val.length) ? directoryNumber : directoryNumber.substring(directoryNumber.length - digitCount, directoryNumber.length);
-            val = val.replace('[DN(' + digit + ')]', dnDigit);
-        }
-        var indexOfFN = val.indexOf('[FN(');
-        if (indexOfFN !== -1 && user && user.firstName) {
-            var digit = val.substring(indexOfFN + 4, val.indexOf(')', indexOfFN + 4));
-            var fnDigit = user.firstName.substring(0, digit);
-            val = val.replace('[FN(' + digit + ')]', fnDigit);
-        }
-        var indexOfLN = val.indexOf('[LN(');
-        if (indexOfLN !== -1 && user && user.lastName) {
-            var digit = val.substring(indexOfLN + 4, val.indexOf(')', indexOfLN + 4));
-            var lnDigit = user.lastName.substring(0, digit);
-            val = val.replace('[LN(' + digit + ')]', lnDigit);
-        }
-        var indexOfID = val.indexOf('[ID(');
-        if (indexOfID !== -1 && user && user.userid) {
-            var digit = val.substring(indexOfID + 4, val.indexOf(')', indexOfID + 4));
-            var idDigit = user.userid.substring(0, digit);
-            val = val.replace('[ID(' + digit + ')]', idDigit);
-        }
-        var entries = Object.entries(object);
-        entries.forEach((para) => {
-            var find = '[' + para[0] + ']';
-            var replacement = para[1] != null ? String(para[1]) : '';
-            val = val.split(find).join(replacement);
-        });
-        return val;
-    }
-    initTemplateDnsNamesForLines() {
-        if (this.lines && this.lines.length > 0) {
-            this.lines.forEach((line, index) => {
-                line.directoryNumber.templateDirectoryNumber = line.directoryNumber.directoryNumber;
-                line.directoryNumber.directoryNumber = '';
-                return line;
-            });
-            const routePartition = this.siteDefaults?.routePartition || '';
-            this.devices.forEach(device => {
-                if (device.lineAssociations && device.lineAssociations.length) {
-                    this.setLineAssociationsForDevice(device, routePartition);
-                }
-            });
-            this.deviceProfiles.forEach(deviceProfile => {
-                if (deviceProfile.lineAssociations && deviceProfile.lineAssociations.length) {
-                    this.setLineAssociationsForDevice(deviceProfile, routePartition);
-                }
-            });
-            if (this.endUser?.singleNumberReach && this.endUser.singleNumberReach.associatedLines && this.endUser.singleNumberReach.associatedLines.length) {
-                if (this.endUser.singleNumberReach.associatedLines && this.endUser.singleNumberReach.associatedLines.length) {
-                    this.endUser.singleNumberReach.associatedLines.map(lineAssociation => {
-                        lineAssociation.directoryNumber.templateDirectoryNumber = lineAssociation.directoryNumber.directoryNumber;
-                        lineAssociation.directoryNumber.routePartitionName = routePartition;
-                    });
-                }
-                if (this.endUser.singleNumberReach.remoteDestinations && this.endUser.singleNumberReach.remoteDestinations.length) {
-                    this.endUser.singleNumberReach.remoteDestinations.forEach(remoteDestination => {
-                        if (remoteDestination.lineAssociations && remoteDestination.lineAssociations.length) {
-                            remoteDestination.lineAssociations.map(lineAssociation => {
-                                lineAssociation.directoryNumber.templateDirectoryNumber = lineAssociation.directoryNumber.directoryNumber;
-                                lineAssociation.directoryNumber.routePartitionName = routePartition;
-                            });
-                        }
-                    });
-                }
-            }
-        }
-    }
-    buildSavableEndUser() {
-        if (!this.endUser) {
-            throw new Error('No template user loaded');
-        }
-        return buildSavableEndUser(this.endUser, this.lines, this.devices, this.deviceProfiles, this.userDetailsForm, {
-            resolveDeviceName: (index, device) => this.resolveDeviceNameForSave(index, device),
-            resolveDeviceProfileName: (index, profile) => this.resolveDeviceNameForSave(index, profile),
-        });
-    }
-    resolveDeviceNameForSave(_index, device) {
-        const rawName = (device.name || device.newName || '').trim();
-        if (!rawName) {
-            return '';
-        }
-        const prefix = device.prefix?.trim();
-        if (prefix && !rawName.toUpperCase().startsWith(prefix.toUpperCase())) {
-            return `${prefix}${rawName}`;
-        }
-        return rawName;
-    }
-    saveNewUser() {
-        const user = this.buildSavableEndUser();
-        const siteId = String(this.selectedSite ?? '');
-        const templateId = String(this.selectedTemplateId ?? '');
-        return this.userCreationApiService.saveTemplateUser(user, templateId, siteId);
-    }
 }
 UserCreationWizardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 UserCreationWizardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardService });
@@ -1642,516 +708,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-class AppLoaderComponent {
-    constructor() {
-    }
-}
-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;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$1.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;display:flex;justify-content:center;align-items:center}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-const LDAP_PAGE_SIZE = 10;
 class UserDetailsStepComponent {
-    get linesFormArray() {
-        return this.userDetailsForm.get('lines');
-    }
-    get devicesFormArray() {
-        return this.userDetailsForm.get('devices');
-    }
-    get deviceProfilesFormArray() {
-        return this.userDetailsForm.get('deviceProfiles');
-    }
-    get selectedLdapUser() {
-        return this.userCreationWizardService.selectedLdapUser;
-    }
-    get ldapTotalCount() {
-        return this.userCreationWizardService.ldapUsersTotal;
-    }
-    get hasLdapUsers() {
-        return this.userCreationWizardService.ldapUsers.length > 0;
-    }
-    constructor(fb, userCreationApiService, userCreationWizardService) {
-        this.fb = fb;
-        this.userCreationApiService = userCreationApiService;
+    constructor(userCreationWizardService) {
         this.userCreationWizardService = userCreationWizardService;
-        this.validityChange = new EventEmitter();
-        this.userIdCheckPending = false;
-        this.loadingAvailableNumbers = false;
-        this.ldapLoading = false;
-        this.ldapSearchAttempted = false;
-        this.ldapPageSize = LDAP_PAGE_SIZE;
-        this.ldapPageIndex = 0;
-        this.ldapQueryTypeOptions = [
-            { label: 'User ID', value: 'userId' },
-            { label: 'First Name', value: 'firstName' },
-            { label: 'Last Name', value: 'lastName' },
-        ];
-        this.filteredAvailableNumbersByLine = [];
-        this.filteredRoutePartitionsByLine = [];
-        this.destroy$ = new Subject();
-        this.userIdAsyncValidator = this.createUserIdAsyncValidator();
-        this.ldapSearchForm = this.fb.group({
-            queryValue: [''],
-            queryType: ['userId'],
-        });
-        this.userDetailsForm = this.fb.group({
-            userId: ['', [Validators.required], [this.userIdAsyncValidator]],
-            firstName: ['', Validators.required],
-            lastName: ['', Validators.required],
-            email: ['', [Validators.required, Validators.email]],
-            lines: this.fb.array([]),
-            devices: this.fb.array([]),
-            deviceProfiles: this.fb.array([]),
-        });
-    }
-    ngOnInit() {
-        const savedFormValue = this.userCreationWizardService.userDetailsFormValue;
-        const isRestoringPreviousEntry = !!savedFormValue;
-        if (!isRestoringPreviousEntry) {
-            this.resetLdapSearchForm();
-        }
-        this.buildDynamicFormArrays(savedFormValue);
-        if (isRestoringPreviousEntry) {
-            this.patchUserFieldsFromSavedValue(savedFormValue);
-        }
-        else {
-            this.patchUserFieldsFromService();
-        }
-        this.initLineFilters();
-        this.setupFormSync();
-        this.setupValidityEmitter();
-        this.fetchInitialAvailableNumbers();
-        if (!isRestoringPreviousEntry) {
-            this.userCreationWizardService.applyUserDetailsFormValue(this.userDetailsForm.getRawValue());
-        }
-        this.applyDeviceNameValidators();
-        this.userCreationWizardService.deviceDefaultsLoaded$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.applyDeviceNameValidators();
-            this.emitValidity();
-        });
-        if (this.userCreationWizardService.isLdapIntegrated && this.selectedLdapUser) {
-            this.applyLdapIntegratedFormState();
-        }
-        this.emitValidity();
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    isStepValid() {
-        return this.userDetailsForm.valid && !this.userIdCheckPending;
-    }
-    markAllAsTouched() {
-        this.userDetailsForm.markAllAsTouched();
-        this.emitValidity();
-    }
-    syncToService() {
-        this.userCreationWizardService.applyUserDetailsFormValue(this.userDetailsForm.getRawValue());
-    }
-    getLineGroup(index) {
-        return this.linesFormArray.at(index);
-    }
-    getDeviceGroup(index) {
-        return this.devicesFormArray.at(index);
     }
-    getDeviceProfileGroup(index) {
-        return this.deviceProfilesFormArray.at(index);
+    onAddUser(row) {
+        this.userCreationWizardService.addLdapUser(row);
     }
-    getDeviceNamePrefix(index) {
-        return this.userCreationWizardService.getDeviceNamePrefix(index, false);
-    }
-    getDeviceProfileNamePrefix(index) {
-        return this.userCreationWizardService.getDeviceNamePrefix(index, true);
-    }
-    getDeviceNameValidationCaption(index) {
-        return this.userCreationWizardService.getDeviceNameValidationCaption(index, false);
-    }
-    getDeviceProfileNameValidationCaption(index) {
-        return this.userCreationWizardService.getDeviceNameValidationCaption(index, true);
-    }
-    getFilteredNumbers(lineIndex) {
-        return this.filteredAvailableNumbersByLine[lineIndex] ?? [];
-    }
-    getFilteredRoutePartitions(lineIndex) {
-        return this.filteredRoutePartitionsByLine[lineIndex] ?? [];
-    }
-    filterAvailableNumbers(lineIndex, event) {
-        const raw = event.target?.value || '';
-        this.applyNumberFilter(lineIndex, raw);
-    }
-    filterRoutePartitions(lineIndex, event) {
-        const raw = event.target?.value || '';
-        this.applyRoutePartitionFilter(lineIndex, raw);
-    }
-    onRoutePartitionSelected(lineIndex, routePartition) {
-        const lineGroup = this.linesFormArray.at(lineIndex);
-        lineGroup.get('routePartition')?.setValue(routePartition, { emitEvent: false });
-        lineGroup.get('number')?.setValue('');
-        this.applyRoutePartitionFilter(lineIndex, routePartition);
-        this.loadAvailableNumbersForLine(lineIndex, routePartition);
-    }
-    onNumberSelected(lineIndex, number) {
-        const lineGroup = this.linesFormArray.at(lineIndex);
-        const displayNumber = this.extractDirectoryNumber(number);
-        lineGroup.get('number')?.setValue(displayNumber, { emitEvent: true });
-    }
-    searchLdapUsers(pageIndex = 0) {
-        const queryValue = String(this.ldapSearchForm.get('queryValue')?.value).trim() || undefined;
-        const siteId = this.userCreationWizardService.selectedSite;
-        if (!siteId) {
-            this.userCreationWizardService.setLdapUsersResult([], 0);
-            this.ldapPageIndex = 0;
-            this.ldapSearchAttempted = false;
-            return;
-        }
-        this.ldapPageIndex = pageIndex;
-        const queryType = this.ldapSearchForm.get('queryType')?.value;
-        const params = {
-            size: String(LDAP_PAGE_SIZE),
-            page: String(pageIndex),
-            deviceless: 'true',
-            querytype: queryType,
-            withEmailOnly: 'true',
-            queryvalue: queryValue,
-        };
-        this.ldapLoading = true;
-        this.userCreationApiService
-            .getLdapUsers(String(siteId), params)
-            .pipe(take(1), map((res) => ({
-            users: res?.pageData ?? [],
-            total: res?.total ?? 0,
-        })), catchError(() => of({ users: [], total: 0 })), finalize(() => {
-            this.ldapLoading = false;
-        }))
-            .subscribe(({ users, total }) => {
-            this.ldapSearchAttempted = true;
-            this.userCreationWizardService.setLdapUsersResult(users, total);
-        });
-    }
-    onLdapPageChange(event) {
-        this.searchLdapUsers(event.pageIndex);
-    }
-    onAddLdapUser(row) {
-        this.userCreationWizardService.selectLdapUser(row);
-        this.userDetailsForm.patchValue({
-            userId: row.userid,
-            firstName: row.firstName ?? '',
-            lastName: row.lastName ?? '',
-            email: row.email ?? '',
-        });
-        this.applyLdapIntegratedFormState();
-        this.emitValidity();
-    }
-    onDeleteLdapUser(row) {
-        if (!this.userCreationWizardService.isLdapUserRowSelected(row)) {
-            return;
-        }
-        this.clearLdapSelection();
-    }
-    onRemoveLdapTag() {
-        this.clearLdapSelection();
-    }
-    isLdapUserRowSelected(row) {
-        return this.userCreationWizardService.isLdapUserRowSelected(row);
-    }
-    clearLdapSelection() {
-        this.userCreationWizardService.clearLdapUserSelection();
-        this.userDetailsForm.patchValue({
-            userId: '',
-            firstName: '',
-            lastName: '',
-            email: '',
-        });
-        this.restoreManualEntryFormState();
-        this.emitValidity();
-    }
-    applyLdapIntegratedFormState() {
-        this.setUserIdentityFieldsReadonly(true);
-        this.toggleUserIdAsyncValidator(false);
-        this.userDetailsForm.get('userId')?.updateValueAndValidity({ emitEvent: false });
-    }
-    restoreManualEntryFormState() {
-        this.setUserIdentityFieldsReadonly(false);
-        this.toggleUserIdAsyncValidator(true);
-        this.userDetailsForm.get('userId')?.updateValueAndValidity();
-    }
-    setUserIdentityFieldsReadonly(readonly) {
-        ['userId', 'firstName', 'lastName', 'email'].forEach(fieldName => {
-            const control = this.userDetailsForm.get(fieldName);
-            if (!control) {
-                return;
-            }
-            if (readonly) {
-                control.disable({ emitEvent: false });
-            }
-            else {
-                control.enable({ emitEvent: false });
-            }
-        });
-    }
-    toggleUserIdAsyncValidator(enabled) {
-        const control = this.userDetailsForm.get('userId');
-        if (!control) {
-            return;
-        }
-        if (enabled) {
-            control.setAsyncValidators([this.userIdAsyncValidator]);
-        }
-        else {
-            control.clearAsyncValidators();
-        }
-        control.updateValueAndValidity({ emitEvent: false });
-    }
-    setupValidityEmitter() {
-        this.userDetailsForm.statusChanges
-            .pipe(startWith(this.userDetailsForm.status), takeUntil(this.destroy$))
-            .subscribe(() => this.emitValidity());
-    }
-    emitValidity() {
-        this.validityChange.emit(this.isStepValid());
-    }
-    buildDynamicFormArrays(savedFormValue) {
-        const service = this.userCreationWizardService;
-        const linesArray = this.linesFormArray;
-        const devicesArray = this.devicesFormArray;
-        const profilesArray = this.deviceProfilesFormArray;
-        while (linesArray.length) {
-            linesArray.removeAt(0);
-        }
-        while (devicesArray.length) {
-            devicesArray.removeAt(0);
-        }
-        while (profilesArray.length) {
-            profilesArray.removeAt(0);
-        }
-        service.lines.forEach((line, index) => {
-            const savedLine = savedFormValue?.lines?.[index];
-            const lineGroup = this.fb.group({
-                lineNumber: [
-                    {
-                        value: line.directoryNumber?.templateDirectoryNumber || '',
-                        disabled: true,
-                    },
-                ],
-                number: [
-                    savedLine?.number ?? line.directoryNumber?.directoryNumber ?? '',
-                    Validators.required,
-                ],
-                routePartition: [
-                    savedLine?.routePartition ?? line.directoryNumber?.routePartitionName ?? '',
-                    Validators.required,
-                ],
-            });
-            linesArray.push(lineGroup);
-            this.setupLineListeners(index, lineGroup);
-        });
-        service.devices.forEach((device, index) => {
-            const savedDevice = savedFormValue?.devices?.[index];
-            devicesArray.push(this.fb.group({
-                deviceType: [{ value: device.deviceType || '', disabled: true }],
-                protocol: [{ value: device.protocol || '', disabled: true }],
-                buttonTemplate: [{ value: device.buttonTemplate || '', disabled: true }],
-                name: [
-                    savedDevice?.name ?? device.name ?? '',
-                    this.buildDeviceNameValidators(index, false),
-                ],
-            }));
-        });
-        service.deviceProfiles.forEach((profile, index) => {
-            const savedProfile = savedFormValue?.deviceProfiles?.[index];
-            profilesArray.push(this.fb.group({
-                deviceType: [{ value: profile.deviceType || '', disabled: true }],
-                protocol: [{ value: profile.protocol || '', disabled: true }],
-                buttonTemplate: [{ value: profile.buttonTemplate || '', disabled: true }],
-                name: [
-                    savedProfile?.name ?? profile.name ?? '',
-                    this.buildDeviceNameValidators(index, true),
-                ],
-            }));
-        });
-    }
-    buildDeviceNameValidators(deviceIndex, isProfile) {
-        const validators = isProfile ? [] : [Validators.required];
-        const options = this.userCreationWizardService.getDeviceNameValidationOptions(deviceIndex, isProfile);
-        if (options) {
-            validators.push(deviceNameValidator(options));
-        }
-        return validators;
-    }
-    applyDeviceNameValidators() {
-        this.devicesFormArray.controls.forEach((_, index) => {
-            const nameControl = this.getDeviceGroup(index).get('name');
-            nameControl?.setValidators(this.buildDeviceNameValidators(index, false));
-            nameControl?.updateValueAndValidity({ emitEvent: false });
-        });
-        this.deviceProfilesFormArray.controls.forEach((_, index) => {
-            const nameControl = this.getDeviceProfileGroup(index).get('name');
-            nameControl?.setValidators(this.buildDeviceNameValidators(index, true));
-            nameControl?.updateValueAndValidity({ emitEvent: false });
-        });
-    }
-    resetLdapSearchForm() {
-        this.ldapSearchForm.reset({
-            queryValue: '',
-            queryType: 'userId',
-        });
-        this.ldapSearchAttempted = false;
-        this.ldapPageIndex = 0;
-        this.userIdCheckPending = false;
-    }
-    patchUserFieldsFromSavedValue(saved) {
-        this.userDetailsForm.patchValue({
-            userId: saved.userId || '',
-            firstName: saved.firstName || '',
-            lastName: saved.lastName || '',
-            email: saved.email || '',
-        });
-    }
-    patchUserFieldsFromService() {
-        const service = this.userCreationWizardService;
-        const endUser = service.endUser;
-        this.userDetailsForm.patchValue({
-            userId: endUser?.userid || service.userDetailsForm.userId || '',
-            firstName: endUser?.firstName || service.userDetailsForm.firstName || '',
-            lastName: endUser?.lastName || service.userDetailsForm.lastName || '',
-            email: endUser?.email || service.userDetailsForm.email || '',
-        });
-        this.userDetailsForm.markAsPristine();
-        this.userDetailsForm.markAsUntouched();
-    }
-    setupLineListeners(lineIndex, lineGroup) {
-        lineGroup
-            .get('routePartition')
-            ?.valueChanges.pipe(debounceTime(300), takeUntil(this.destroy$))
-            .subscribe(value => {
-            this.applyRoutePartitionFilter(lineIndex, String(value ?? ''));
-        });
-        lineGroup
-            .get('number')
-            ?.valueChanges.pipe(debounceTime(150), takeUntil(this.destroy$))
-            .subscribe(value => {
-            this.applyNumberFilter(lineIndex, String(value ?? ''));
-        });
-    }
-    initLineFilters() {
-        const partitions = this.userCreationWizardService.routePartitionOptions;
-        const numbers = this.userCreationWizardService.availableNumbers;
-        this.filteredRoutePartitionsByLine = this.linesFormArray.controls.map((_, index) => {
-            const current = String(this.linesFormArray.at(index).get('routePartition')?.value ?? '');
-            return this.filterOptions(partitions, current);
-        });
-        this.filteredAvailableNumbersByLine = this.linesFormArray.controls.map((_, index) => {
-            const current = String(this.linesFormArray.at(index).get('number')?.value ?? '');
-            return this.filterOptions(numbers, current);
-        });
-    }
-    setupFormSync() {
-        this.userDetailsForm.valueChanges
-            .pipe(debounceTime(200), takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.userCreationWizardService.applyUserDetailsFormValue(this.userDetailsForm.getRawValue());
-        });
-    }
-    fetchInitialAvailableNumbers() {
-        const firstPartition = this.linesFormArray.length > 0
-            ? String(this.linesFormArray.at(0).get('routePartition')?.value ?? '').trim()
-            : this.userCreationWizardService.firstLineRoutePartition ||
-                this.userCreationWizardService.siteDefaultRoutePartition ||
-                '';
-        if (firstPartition) {
-            this.loadAvailableNumbersForLine(0, firstPartition, false);
-        }
-    }
-    loadAvailableNumbersForLine(lineIndex, routePartition, clearNumber = true) {
-        const siteId = this.userCreationWizardService.selectedSite;
-        if (!siteId || !routePartition.trim()) {
-            return;
-        }
-        if (clearNumber) {
-            this.linesFormArray.at(lineIndex).get('number')?.setValue('');
-        }
-        this.loadingAvailableNumbers = true;
-        this.userCreationWizardService
-            .getNumberRange(String(siteId), routePartition)
-            .pipe(take(1), catchError(() => of(null)), finalize(() => {
-            this.loadingAvailableNumbers = false;
-            this.refreshNumberFilters();
-        }))
-            .subscribe();
-    }
-    refreshNumberFilters() {
-        const numbers = this.userCreationWizardService.availableNumbers;
-        this.filteredAvailableNumbersByLine = this.linesFormArray.controls.map((_, index) => {
-            const current = String(this.linesFormArray.at(index).get('number')?.value ?? '');
-            return this.filterOptions(numbers, current);
-        });
-    }
-    applyNumberFilter(lineIndex, raw) {
-        const value = raw.trim().toLowerCase();
-        const source = this.userCreationWizardService.availableNumbers || [];
-        this.filteredAvailableNumbersByLine[lineIndex] = value.length
-            ? source.filter(n => !!n && n.toLowerCase().includes(value))
-            : [...source];
-    }
-    applyRoutePartitionFilter(lineIndex, raw) {
-        const value = raw.trim().toLowerCase();
-        const source = this.userCreationWizardService.routePartitionOptions || [];
-        this.filteredRoutePartitionsByLine[lineIndex] = value.length
-            ? source.filter(n => !!n && n.toLowerCase().includes(value))
-            : [...source];
-    }
-    filterOptions(source, raw) {
-        const value = raw.trim().toLowerCase();
-        if (!value.length) {
-            return [...source];
-        }
-        return source.filter(item => !!item && item.toLowerCase().includes(value));
-    }
-    extractDirectoryNumber(value) {
-        const trimmed = value.trim();
-        const spaceIndex = trimmed.indexOf(' ');
-        return spaceIndex > -1 ? trimmed.substring(0, spaceIndex) : trimmed;
-    }
-    createUserIdAsyncValidator() {
-        return (control) => {
-            if (this.userCreationWizardService.isLdapIntegrated) {
-                this.userIdCheckPending = false;
-                return of(null);
-            }
-            const userId = String(control.value ?? '').trim();
-            const siteId = this.userCreationWizardService.selectedSite;
-            if (!userId || !siteId) {
-                this.userIdCheckPending = false;
-                this.emitValidity();
-                return of(null);
-            }
-            this.userIdCheckPending = true;
-            this.emitValidity();
-            return timer(500).pipe(switchMap(() => this.userCreationApiService
-                .checkUserIdExisting(String(siteId), encodeURIComponent(encodeURIComponent(userId)))
-                .pipe(map(() => ({ userIdExists: true })), catchError(() => of(null)))), tap(() => {
-                this.userIdCheckPending = false;
-                this.emitValidity();
-            }), finalize(() => {
-                this.userIdCheckPending = false;
-                this.emitValidity();
-            }));
-        };
+    getDeviceName(index) {
+        return this.userCreationWizardService.getDeviceDisplayName(index);
     }
 }
-UserDetailsStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, deps: [{ token: i1$2.FormBuilder }, { token: UserCreationApiService }, { token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
-UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", outputs: { validityChange: "validityChange" }, ngImport: i0, template: "<app-loader *ngIf=\"loadingAvailableNumbers\"></app-loader>\r\n<section class=\"details-step-content\">\r\n  <form [formGroup]=\"userDetailsForm\">\r\n    <div class=\"details-step-sections\">\r\n      <section class=\"details-step-section\">\r\n        <h3 class=\"details-step-section__title\">User details</h3>\r\n        <div class=\"details-step-section__content\">\r\n          <div class=\"details-step-section__part\">\r\n            <div class=\"details-inline-fields\">\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">User ID</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput placeholder=\"User ID\" formControlName=\"userId\" />\r\n                  <mat-error *ngIf=\"userDetailsForm.get('userId')?.hasError('required') && userDetailsForm.get('userId')?.touched\">\r\n                    User ID is required\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"userDetailsForm.get('userId')?.hasError('userIdExists') && userDetailsForm.get('userId')?.touched\">\r\n                    User ID already exists\r\n                  </mat-error>\r\n                  <mat-hint *ngIf=\"userIdCheckPending\">Checking user ID...</mat-hint>\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">First Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput placeholder=\"First Name\" formControlName=\"firstName\" />\r\n                  <mat-error *ngIf=\"userDetailsForm.get('firstName')?.hasError('required') && userDetailsForm.get('firstName')?.touched\">\r\n                    First name is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Last Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput placeholder=\"Last Name\" formControlName=\"lastName\" />\r\n                  <mat-error *ngIf=\"userDetailsForm.get('lastName')?.hasError('required') && userDetailsForm.get('lastName')?.touched\">\r\n                    Last name is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Email</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput placeholder=\"Email\" formControlName=\"email\" />\r\n                  <mat-error *ngIf=\"userDetailsForm.get('email')?.invalid && userDetailsForm.get('email')?.touched\">\r\n                    <span *ngIf=\"userDetailsForm.get('email')?.hasError('required')\">Email is required</span>\r\n                    <span *ngIf=\"userDetailsForm.get('email')?.hasError('email')\">Please enter a valid email</span>\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">User Template</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    placeholder=\"User Template\"\r\n                    [value]=\"userCreationWizardService.selectedTemplateName || ''\"\r\n                    [disabled]=\"true\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"details-step-section__part\">\r\n            <mat-accordion class=\"details-user-accordion\">\r\n              <mat-expansion-panel togglePosition=\"before\">\r\n                <mat-expansion-panel-header>\r\n                  <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n                <div class=\"details-user-accordion__content\">\r\n                  <div class=\"details-ldap-search\" [formGroup]=\"ldapSearchForm\">\r\n                    <mat-form-field\r\n                      class=\"details-ldap-search__input\"\r\n                      appearance=\"outline\"\r\n                      floatLabel=\"never\"\r\n                    >\r\n                      <input\r\n                        matInput\r\n                        placeholder=\"Search\"\r\n                        formControlName=\"queryValue\"\r\n                        (keyup.enter)=\"searchLdapUsers()\"\r\n                      />\r\n                    </mat-form-field>\r\n\r\n                    <mat-form-field\r\n                      class=\"details-ldap-search__select\"\r\n                      appearance=\"outline\"\r\n                      floatLabel=\"never\"\r\n                    >\r\n                      <mat-select formControlName=\"queryType\">\r\n                        <mat-option *ngFor=\"let option of ldapQueryTypeOptions\" [value]=\"option.value\">\r\n                          {{ option.label }}\r\n                        </mat-option>\r\n                      </mat-select>\r\n                    </mat-form-field>\r\n\r\n                    <mat-chip-list *ngIf=\"selectedLdapUser\" class=\"details-ldap-search__chip\">\r\n                      <mat-chip removable (removed)=\"onRemoveLdapTag()\">\r\n                        {{ selectedLdapUser.userid }}\r\n                        <mat-icon matChipRemove>cancel</mat-icon>\r\n                      </mat-chip>\r\n                    </mat-chip-list>\r\n\r\n                    <button\r\n                      mat-button\r\n                      class=\"details-ldap-search__btn\"\r\n                      type=\"button\"\r\n                      [disabled]=\"ldapLoading\"\r\n                      (click)=\"searchLdapUsers()\"\r\n                    >\r\n                      Search\r\n                    </button>\r\n                  </div>\r\n\r\n                  <app-loader *ngIf=\"ldapLoading\"></app-loader>\r\n\r\n                  <p\r\n                    *ngIf=\"!ldapLoading && ldapSearchAttempted && !hasLdapUsers\"\r\n                    class=\"details-ldap-table__empty\"\r\n                  >\r\n                    No users found\r\n                  </p>\r\n\r\n                  <table\r\n                    *ngIf=\"!ldapLoading && hasLdapUsers\"\r\n                    mat-table\r\n                    [dataSource]=\"userCreationWizardService.ldapUsers\"\r\n                    class=\"details-ldap-table\"\r\n                  >\r\n                    <ng-container matColumnDef=\"userId\">\r\n                      <th mat-header-cell *matHeaderCellDef>User Id</th>\r\n                      <td mat-cell *matCellDef=\"let row\">{{ row.userid }}</td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"firstName\">\r\n                      <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n                      <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"lastName\">\r\n                      <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n                      <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"email\">\r\n                      <th mat-header-cell *matHeaderCellDef>Email</th>\r\n                      <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"add\">\r\n                      <th mat-header-cell *matHeaderCellDef>Add</th>\r\n                      <td mat-cell *matCellDef=\"let row\">\r\n                        <button\r\n                          *ngIf=\"!isLdapUserRowSelected(row); else deleteLdapUserBtn\"\r\n                          mat-button\r\n                          class=\"details-ldap-table__add-btn\"\r\n                          type=\"button\"\r\n                          (click)=\"onAddLdapUser(row)\"\r\n                        >\r\n                          Add User\r\n                        </button>\r\n                        <ng-template #deleteLdapUserBtn>\r\n                          <button\r\n                            mat-button\r\n                            class=\"details-ldap-table__add-btn details-ldap-table__add-btn--delete\"\r\n                            type=\"button\"\r\n                            (click)=\"onDeleteLdapUser(row)\"\r\n                          >\r\n                            Delete user\r\n                          </button>\r\n                        </ng-template>\r\n                      </td>\r\n                    </ng-container>\r\n\r\n                    <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n                    <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns\"></tr>\r\n                  </table>\r\n\r\n                  <mat-paginator\r\n                    *ngIf=\"!ldapLoading && hasLdapUsers\"\r\n                    class=\"details-ldap-paginator\"\r\n                    [length]=\"ldapTotalCount\"\r\n                    [pageSize]=\"ldapPageSize\"\r\n                    [pageIndex]=\"ldapPageIndex\"\r\n                    [pageSizeOptions]=\"[ldapPageSize]\"\r\n                    [hidePageSize]=\"true\"\r\n                    [disabled]=\"ldapLoading\"\r\n                    (page)=\"onLdapPageChange($event)\"\r\n                  ></mat-paginator>\r\n                </div>\r\n              </mat-expansion-panel>\r\n            </mat-accordion>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <section class=\"details-step-section\">\r\n        <h3 class=\"details-step-section__title\">Lines</h3>\r\n        <div class=\"details-step-section__content\" formArrayName=\"lines\">\r\n          <div class=\"line-route-list\">\r\n            <div\r\n              class=\"line-route-row\"\r\n              *ngFor=\"let lineGroup of linesFormArray.controls; let idx = index\"\r\n              [formGroupName]=\"idx\"\r\n            >\r\n              <div class=\"line-info\">\r\n                <mat-form-field\r\n                  class=\"details-step-input line-route-field\"\r\n                  appearance=\"outline\"\r\n                  floatLabel=\"never\"\r\n                  hideRequiredMarker\r\n                >\r\n                  <input matInput placeholder=\"Line number\" formControlName=\"lineNumber\" />\r\n                </mat-form-field>\r\n\r\n                <mat-form-field\r\n                  class=\"details-step-input line-route-field\"\r\n                  appearance=\"outline\"\r\n                  floatLabel=\"never\"\r\n                  hideRequiredMarker\r\n                >\r\n                  <input\r\n                    matInput\r\n                    placeholder=\"Search for a number\"\r\n                    formControlName=\"number\"\r\n                    [matAutocomplete]=\"numberAuto\"\r\n                    (input)=\"filterAvailableNumbers(idx, $event)\"\r\n                  />\r\n                  <mat-autocomplete\r\n                    #numberAuto=\"matAutocomplete\"\r\n                    [panelWidth]=\"'auto'\"\r\n                    (optionSelected)=\"onNumberSelected(idx, $event.option.value)\"\r\n                  >\r\n                    <mat-option *ngFor=\"let option of getFilteredNumbers(idx)\" [value]=\"option\">\r\n                      {{ option }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                  <mat-error *ngIf=\"getLineGroup(idx).get('number')?.invalid && getLineGroup(idx).get('number')?.touched\">\r\n                    Number is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field\r\n                  class=\"details-step-input line-route-field\"\r\n                  appearance=\"outline\"\r\n                  floatLabel=\"never\"\r\n                  hideRequiredMarker\r\n                >\r\n                  <input\r\n                    matInput\r\n                    placeholder=\"Select route partition\"\r\n                    formControlName=\"routePartition\"\r\n                    [matAutocomplete]=\"routePartitionAuto\"\r\n                    (input)=\"filterRoutePartitions(idx, $event)\"\r\n                  />\r\n                  <mat-autocomplete\r\n                    #routePartitionAuto=\"matAutocomplete\"\r\n                    (optionSelected)=\"onRoutePartitionSelected(idx, $event.option.value)\"\r\n                  >\r\n                    <mat-option\r\n                      *ngFor=\"let routePartition of getFilteredRoutePartitions(idx)\"\r\n                      [value]=\"routePartition\"\r\n                    >\r\n                      {{ routePartition }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                  <mat-error *ngIf=\"getLineGroup(idx).get('routePartition')?.invalid && getLineGroup(idx).get('routePartition')?.touched\">\r\n                    Route partition is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <section class=\"details-step-section\">\r\n        <h3 class=\"details-step-section__title\">Devices</h3>\r\n        <div class=\"details-step-section__content\" formArrayName=\"devices\">\r\n          <div class=\"devices-rows\">\r\n            <div\r\n              class=\"details-inline-fields details-inline-fields--four\"\r\n              *ngFor=\"let deviceGroup of devicesFormArray.controls; let idx = index\"\r\n              [formGroupName]=\"idx\"\r\n            >\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Device type</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"deviceType\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Protocol</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"protocol\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Button Template</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"buttonTemplate\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <span matPrefix *ngIf=\"getDeviceNamePrefix(idx) as devicePrefix\">{{ devicePrefix }}</span>\r\n                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceGroup(idx).get('name')?.hasError('deviceName') && getDeviceGroup(idx).get('name')?.touched\">\r\n                    {{ getDeviceGroup(idx).get('name')?.getError('deviceName')?.caption || getDeviceNameValidationCaption(idx) || 'Please enter a valid device name' }}\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"getDeviceGroup(idx).get('name')?.hasError('required') && getDeviceGroup(idx).get('name')?.touched\">\r\n                    Name is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <section class=\"details-step-section\" *ngIf=\"deviceProfilesFormArray.length\">\r\n        <h3 class=\"details-step-section__title\">Device profiles</h3>\r\n        <div class=\"details-step-section__content\" formArrayName=\"deviceProfiles\">\r\n          <div class=\"devices-rows\">\r\n            <div\r\n              class=\"details-inline-fields details-inline-fields--four\"\r\n              *ngFor=\"let profileGroup of deviceProfilesFormArray.controls; let idx = index\"\r\n              [formGroupName]=\"idx\"\r\n            >\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Device type</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"deviceType\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Protocol</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"protocol\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Button Template</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"buttonTemplate\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <span matPrefix *ngIf=\"getDeviceProfileNamePrefix(idx) as profilePrefix\">{{ profilePrefix }}</span>\r\n                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceProfileGroup(idx).get('name')?.hasError('deviceName') && getDeviceProfileGroup(idx).get('name')?.touched\">\r\n                    {{ getDeviceProfileGroup(idx).get('name')?.getError('deviceName')?.caption || getDeviceProfileNameValidationCaption(idx) || 'Please enter a valid device name' }}\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n  </form>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-search{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}.details-ldap-search__input{min-width:180px;width:180px}.details-ldap-search__select{flex:0 1 180px;min-width:160px}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-wrapper,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin:0}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-flex,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:0 12px}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-start,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-end,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-gap,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-start,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-end,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-infix,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-infix{width:100%;border-top:0;padding:0;display:flex;align-items:center;min-height:unset}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-input-element,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-input-element{margin:0;line-height:20px}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-trigger{display:flex;align-items:center;width:100%;height:100%}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-value{display:flex;align-items:center;max-width:100%}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-arrow-wrapper{display:flex;align-items:center}.details-ldap-search__chip{flex:0 0 auto}.details-ldap-search__btn{flex:0 0 auto;min-width:0;padding:0 12px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;color:#0d56aa}.details-ldap-paginator{margin-top:8px}.details-ldap-table__add-btn--delete{color:#c62828}.details-ldap-table{width:100%}.details-ldap-table__empty{margin:16px 0 8px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#737480;text-align:center}.details-ldap-table__row--disabled{opacity:.35}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-info{display:flex;align-items:flex-start;gap:16px}.line-route-field{flex:1 1 180px;min-width:160px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-field:nth-of-type(1) .line-route-select{width:230px}.line-route-field .line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .line-info .details-step-input .mat-form-field-flex{height:36px;padding:0 8px}:host ::ng-deep .line-info .details-step-input .mat-form-field-infix{padding:0}:host ::ng-deep .line-info .details-step-input .mat-input-element{font-size:14px;line-height:20px}:host ::ng-deep .mat-form-field-subscript-wrapper{position:relative}:host ::ng-deep .line-info .details-step-input .mat-form-field-subscript-wrapper{margin-top:4px;position:relative}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}:host ::ng-deep .devices-rows .details-inline-fields .details-inline-field .mat-form-field .mat-form-field-flex{display:flex;gap:3px}:host ::ng-deep .devices-rows .details-inline-fields .details-inline-field .mat-form-field .mat-form-field-flex .mat-form-field-prefix{top:1px}\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: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i9.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: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i14.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i14.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i14.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i15.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i15.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i15.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i15.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
+UserDetailsStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
+UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"details-step-section__part\">\r\n          <div class=\"details-inline-fields\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User ID</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User ID\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setUserDetailsField(\r\n                      'userId',\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">First Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"First Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setUserDetailsField(\r\n                      'firstName',\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Last Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Last Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setUserDetailsField(\r\n                      'lastName',\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Email</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Email\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setUserDetailsField(\r\n                      'email',\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User Template\"\r\n                  [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"details-step-section__part\">\r\n          <mat-accordion class=\"details-user-accordion\">\r\n            <mat-expansion-panel togglePosition=\"before\">\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title\r\n                  >Choose an existing or a LDAP user</mat-panel-title\r\n                >\r\n              </mat-expansion-panel-header>\r\n              <div class=\"details-user-accordion__content\">\r\n                <table\r\n                  mat-table\r\n                  [dataSource]=\"userCreationWizardService.ldapUsers\"\r\n                  class=\"details-ldap-table\"\r\n                >\r\n                  <ng-container matColumnDef=\"userId\">\r\n                    <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n                    <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n                  </ng-container>\r\n\r\n                  <ng-container matColumnDef=\"firstName\">\r\n                    <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n                    <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n                  </ng-container>\r\n\r\n                  <ng-container matColumnDef=\"lastName\">\r\n                    <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n                    <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n                  </ng-container>\r\n\r\n                  <ng-container matColumnDef=\"email\">\r\n                    <th mat-header-cell *matHeaderCellDef>Email</th>\r\n                    <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n                  </ng-container>\r\n\r\n                  <ng-container matColumnDef=\"add\">\r\n                    <th mat-header-cell *matHeaderCellDef>Add</th>\r\n                    <td mat-cell *matCellDef=\"let row\">\r\n                      <button\r\n                        mat-button\r\n                        class=\"details-ldap-table__add-btn\"\r\n                        type=\"button\"\r\n                        [disabled]=\"\r\n                          userCreationWizardService.isLdapUserAdded(row)\r\n                        \"\r\n                        (click)=\"onAddUser(row)\"\r\n                      >\r\n                        Add user\r\n                      </button>\r\n                    </td>\r\n                  </ng-container>\r\n\r\n                  <tr\r\n                    mat-header-row\r\n                    *matHeaderRowDef=\"\r\n                      userCreationWizardService.ldapTableColumns\r\n                    \"\r\n                  ></tr>\r\n                  <tr\r\n                    mat-row\r\n                    *matRowDef=\"\r\n                      let row;\r\n                      columns: userCreationWizardService.ldapTableColumns\r\n                    \"\r\n                    [class.details-ldap-table__row--disabled]=\"\r\n                      userCreationWizardService.isLdapUserAdded(row)\r\n                    \"\r\n                  ></tr>\r\n                </table>\r\n              </div>\r\n            </mat-expansion-panel>\r\n          </mat-accordion>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"line-route-list\">\r\n          <div\r\n            class=\"line-route-row\"\r\n            *ngFor=\"\r\n              let lineSelection of userCreationWizardService.lineSelections;\r\n              let idx = index\r\n            \"\r\n          >\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field\r\n                class=\"details-step-select line-route-select\"\r\n                appearance=\"outline\"\r\n              >\r\n                <mat-select\r\n                  placeholder=\"Select line\"\r\n                  [value]=\"lineSelection.lineNumber\"\r\n                  (selectionChange)=\"\r\n                    userCreationWizardService.setLineSelection(\r\n                      idx,\r\n                      $event.value\r\n                    )\r\n                  \"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let line of userCreationWizardService.lineOptions\"\r\n                    [value]=\"line.number\"\r\n                  >\r\n                    {{ line.number }} - {{ line.did }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field\r\n                class=\"details-step-select line-route-select\"\r\n                appearance=\"outline\"\r\n              >\r\n                <mat-select\r\n                  placeholder=\"Select route partition\"\r\n                  [value]=\"lineSelection.routePartitionName\"\r\n                  (selectionChange)=\"\r\n                    userCreationWizardService.setRoutePartitionSelection(\r\n                      idx,\r\n                      $event.value\r\n                    )\r\n                  \"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"\r\n                      let partition of userCreationWizardService.routePartitionOptions\r\n                    \"\r\n                    [value]=\"partition\"\r\n                  >\r\n                    {{ partition }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"devices-rows\">\r\n          <div\r\n            class=\"details-inline-fields details-inline-fields--four\"\r\n            *ngFor=\"\r\n              let _row of userCreationWizardService.deviceRows;\r\n              let idx = index\r\n            \"\r\n          >\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Device type</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Device type\"\r\n                  [value]=\"\r\n                    userCreationWizardService.deviceEntries[idx].deviceType ||\r\n                    ''\r\n                  \"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Protocol</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Protocol\"\r\n                  [value]=\"\r\n                    userCreationWizardService.deviceEntries[idx].protocol || ''\r\n                  \"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Button Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Button Template\"\r\n                  [value]=\"\r\n                    userCreationWizardService.deviceEntries[idx]\r\n                      .buttonTemplate || ''\r\n                  \"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Name\"\r\n                  [value]=\"getDeviceName(idx)\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setDeviceName(\r\n                      idx,\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__row--disabled{opacity:.35}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-field:nth-of-type(1) .line-route-select{width:230px}.line-route-field .line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.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: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-user-details-step', template: "<app-loader *ngIf=\"loadingAvailableNumbers\"></app-loader>\r\n<section class=\"details-step-content\">\r\n  <form [formGroup]=\"userDetailsForm\">\r\n    <div class=\"details-step-sections\">\r\n      <section class=\"details-step-section\">\r\n        <h3 class=\"details-step-section__title\">User details</h3>\r\n        <div class=\"details-step-section__content\">\r\n          <div class=\"details-step-section__part\">\r\n            <div class=\"details-inline-fields\">\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">User ID</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput placeholder=\"User ID\" formControlName=\"userId\" />\r\n                  <mat-error *ngIf=\"userDetailsForm.get('userId')?.hasError('required') && userDetailsForm.get('userId')?.touched\">\r\n                    User ID is required\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"userDetailsForm.get('userId')?.hasError('userIdExists') && userDetailsForm.get('userId')?.touched\">\r\n                    User ID already exists\r\n                  </mat-error>\r\n                  <mat-hint *ngIf=\"userIdCheckPending\">Checking user ID...</mat-hint>\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">First Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput placeholder=\"First Name\" formControlName=\"firstName\" />\r\n                  <mat-error *ngIf=\"userDetailsForm.get('firstName')?.hasError('required') && userDetailsForm.get('firstName')?.touched\">\r\n                    First name is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Last Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput placeholder=\"Last Name\" formControlName=\"lastName\" />\r\n                  <mat-error *ngIf=\"userDetailsForm.get('lastName')?.hasError('required') && userDetailsForm.get('lastName')?.touched\">\r\n                    Last name is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Email</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput placeholder=\"Email\" formControlName=\"email\" />\r\n                  <mat-error *ngIf=\"userDetailsForm.get('email')?.invalid && userDetailsForm.get('email')?.touched\">\r\n                    <span *ngIf=\"userDetailsForm.get('email')?.hasError('required')\">Email is required</span>\r\n                    <span *ngIf=\"userDetailsForm.get('email')?.hasError('email')\">Please enter a valid email</span>\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">User Template</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    placeholder=\"User Template\"\r\n                    [value]=\"userCreationWizardService.selectedTemplateName || ''\"\r\n                    [disabled]=\"true\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"details-step-section__part\">\r\n            <mat-accordion class=\"details-user-accordion\">\r\n              <mat-expansion-panel togglePosition=\"before\">\r\n                <mat-expansion-panel-header>\r\n                  <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n                <div class=\"details-user-accordion__content\">\r\n                  <div class=\"details-ldap-search\" [formGroup]=\"ldapSearchForm\">\r\n                    <mat-form-field\r\n                      class=\"details-ldap-search__input\"\r\n                      appearance=\"outline\"\r\n                      floatLabel=\"never\"\r\n                    >\r\n                      <input\r\n                        matInput\r\n                        placeholder=\"Search\"\r\n                        formControlName=\"queryValue\"\r\n                        (keyup.enter)=\"searchLdapUsers()\"\r\n                      />\r\n                    </mat-form-field>\r\n\r\n                    <mat-form-field\r\n                      class=\"details-ldap-search__select\"\r\n                      appearance=\"outline\"\r\n                      floatLabel=\"never\"\r\n                    >\r\n                      <mat-select formControlName=\"queryType\">\r\n                        <mat-option *ngFor=\"let option of ldapQueryTypeOptions\" [value]=\"option.value\">\r\n                          {{ option.label }}\r\n                        </mat-option>\r\n                      </mat-select>\r\n                    </mat-form-field>\r\n\r\n                    <mat-chip-list *ngIf=\"selectedLdapUser\" class=\"details-ldap-search__chip\">\r\n                      <mat-chip removable (removed)=\"onRemoveLdapTag()\">\r\n                        {{ selectedLdapUser.userid }}\r\n                        <mat-icon matChipRemove>cancel</mat-icon>\r\n                      </mat-chip>\r\n                    </mat-chip-list>\r\n\r\n                    <button\r\n                      mat-button\r\n                      class=\"details-ldap-search__btn\"\r\n                      type=\"button\"\r\n                      [disabled]=\"ldapLoading\"\r\n                      (click)=\"searchLdapUsers()\"\r\n                    >\r\n                      Search\r\n                    </button>\r\n                  </div>\r\n\r\n                  <app-loader *ngIf=\"ldapLoading\"></app-loader>\r\n\r\n                  <p\r\n                    *ngIf=\"!ldapLoading && ldapSearchAttempted && !hasLdapUsers\"\r\n                    class=\"details-ldap-table__empty\"\r\n                  >\r\n                    No users found\r\n                  </p>\r\n\r\n                  <table\r\n                    *ngIf=\"!ldapLoading && hasLdapUsers\"\r\n                    mat-table\r\n                    [dataSource]=\"userCreationWizardService.ldapUsers\"\r\n                    class=\"details-ldap-table\"\r\n                  >\r\n                    <ng-container matColumnDef=\"userId\">\r\n                      <th mat-header-cell *matHeaderCellDef>User Id</th>\r\n                      <td mat-cell *matCellDef=\"let row\">{{ row.userid }}</td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"firstName\">\r\n                      <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n                      <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"lastName\">\r\n                      <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n                      <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"email\">\r\n                      <th mat-header-cell *matHeaderCellDef>Email</th>\r\n                      <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"add\">\r\n                      <th mat-header-cell *matHeaderCellDef>Add</th>\r\n                      <td mat-cell *matCellDef=\"let row\">\r\n                        <button\r\n                          *ngIf=\"!isLdapUserRowSelected(row); else deleteLdapUserBtn\"\r\n                          mat-button\r\n                          class=\"details-ldap-table__add-btn\"\r\n                          type=\"button\"\r\n                          (click)=\"onAddLdapUser(row)\"\r\n                        >\r\n                          Add User\r\n                        </button>\r\n                        <ng-template #deleteLdapUserBtn>\r\n                          <button\r\n                            mat-button\r\n                            class=\"details-ldap-table__add-btn details-ldap-table__add-btn--delete\"\r\n                            type=\"button\"\r\n                            (click)=\"onDeleteLdapUser(row)\"\r\n                          >\r\n                            Delete user\r\n                          </button>\r\n                        </ng-template>\r\n                      </td>\r\n                    </ng-container>\r\n\r\n                    <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n                    <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns\"></tr>\r\n                  </table>\r\n\r\n                  <mat-paginator\r\n                    *ngIf=\"!ldapLoading && hasLdapUsers\"\r\n                    class=\"details-ldap-paginator\"\r\n                    [length]=\"ldapTotalCount\"\r\n                    [pageSize]=\"ldapPageSize\"\r\n                    [pageIndex]=\"ldapPageIndex\"\r\n                    [pageSizeOptions]=\"[ldapPageSize]\"\r\n                    [hidePageSize]=\"true\"\r\n                    [disabled]=\"ldapLoading\"\r\n                    (page)=\"onLdapPageChange($event)\"\r\n                  ></mat-paginator>\r\n                </div>\r\n              </mat-expansion-panel>\r\n            </mat-accordion>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <section class=\"details-step-section\">\r\n        <h3 class=\"details-step-section__title\">Lines</h3>\r\n        <div class=\"details-step-section__content\" formArrayName=\"lines\">\r\n          <div class=\"line-route-list\">\r\n            <div\r\n              class=\"line-route-row\"\r\n              *ngFor=\"let lineGroup of linesFormArray.controls; let idx = index\"\r\n              [formGroupName]=\"idx\"\r\n            >\r\n              <div class=\"line-info\">\r\n                <mat-form-field\r\n                  class=\"details-step-input line-route-field\"\r\n                  appearance=\"outline\"\r\n                  floatLabel=\"never\"\r\n                  hideRequiredMarker\r\n                >\r\n                  <input matInput placeholder=\"Line number\" formControlName=\"lineNumber\" />\r\n                </mat-form-field>\r\n\r\n                <mat-form-field\r\n                  class=\"details-step-input line-route-field\"\r\n                  appearance=\"outline\"\r\n                  floatLabel=\"never\"\r\n                  hideRequiredMarker\r\n                >\r\n                  <input\r\n                    matInput\r\n                    placeholder=\"Search for a number\"\r\n                    formControlName=\"number\"\r\n                    [matAutocomplete]=\"numberAuto\"\r\n                    (input)=\"filterAvailableNumbers(idx, $event)\"\r\n                  />\r\n                  <mat-autocomplete\r\n                    #numberAuto=\"matAutocomplete\"\r\n                    [panelWidth]=\"'auto'\"\r\n                    (optionSelected)=\"onNumberSelected(idx, $event.option.value)\"\r\n                  >\r\n                    <mat-option *ngFor=\"let option of getFilteredNumbers(idx)\" [value]=\"option\">\r\n                      {{ option }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                  <mat-error *ngIf=\"getLineGroup(idx).get('number')?.invalid && getLineGroup(idx).get('number')?.touched\">\r\n                    Number is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field\r\n                  class=\"details-step-input line-route-field\"\r\n                  appearance=\"outline\"\r\n                  floatLabel=\"never\"\r\n                  hideRequiredMarker\r\n                >\r\n                  <input\r\n                    matInput\r\n                    placeholder=\"Select route partition\"\r\n                    formControlName=\"routePartition\"\r\n                    [matAutocomplete]=\"routePartitionAuto\"\r\n                    (input)=\"filterRoutePartitions(idx, $event)\"\r\n                  />\r\n                  <mat-autocomplete\r\n                    #routePartitionAuto=\"matAutocomplete\"\r\n                    (optionSelected)=\"onRoutePartitionSelected(idx, $event.option.value)\"\r\n                  >\r\n                    <mat-option\r\n                      *ngFor=\"let routePartition of getFilteredRoutePartitions(idx)\"\r\n                      [value]=\"routePartition\"\r\n                    >\r\n                      {{ routePartition }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                  <mat-error *ngIf=\"getLineGroup(idx).get('routePartition')?.invalid && getLineGroup(idx).get('routePartition')?.touched\">\r\n                    Route partition is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <section class=\"details-step-section\">\r\n        <h3 class=\"details-step-section__title\">Devices</h3>\r\n        <div class=\"details-step-section__content\" formArrayName=\"devices\">\r\n          <div class=\"devices-rows\">\r\n            <div\r\n              class=\"details-inline-fields details-inline-fields--four\"\r\n              *ngFor=\"let deviceGroup of devicesFormArray.controls; let idx = index\"\r\n              [formGroupName]=\"idx\"\r\n            >\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Device type</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"deviceType\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Protocol</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"protocol\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Button Template</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"buttonTemplate\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <span matPrefix *ngIf=\"getDeviceNamePrefix(idx) as devicePrefix\">{{ devicePrefix }}</span>\r\n                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceGroup(idx).get('name')?.hasError('deviceName') && getDeviceGroup(idx).get('name')?.touched\">\r\n                    {{ getDeviceGroup(idx).get('name')?.getError('deviceName')?.caption || getDeviceNameValidationCaption(idx) || 'Please enter a valid device name' }}\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"getDeviceGroup(idx).get('name')?.hasError('required') && getDeviceGroup(idx).get('name')?.touched\">\r\n                    Name is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <section class=\"details-step-section\" *ngIf=\"deviceProfilesFormArray.length\">\r\n        <h3 class=\"details-step-section__title\">Device profiles</h3>\r\n        <div class=\"details-step-section__content\" formArrayName=\"deviceProfiles\">\r\n          <div class=\"devices-rows\">\r\n            <div\r\n              class=\"details-inline-fields details-inline-fields--four\"\r\n              *ngFor=\"let profileGroup of deviceProfilesFormArray.controls; let idx = index\"\r\n              [formGroupName]=\"idx\"\r\n            >\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Device type</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"deviceType\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Protocol</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"protocol\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Button Template</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"buttonTemplate\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <span matPrefix *ngIf=\"getDeviceProfileNamePrefix(idx) as profilePrefix\">{{ profilePrefix }}</span>\r\n                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceProfileGroup(idx).get('name')?.hasError('deviceName') && getDeviceProfileGroup(idx).get('name')?.touched\">\r\n                    {{ getDeviceProfileGroup(idx).get('name')?.getError('deviceName')?.caption || getDeviceProfileNameValidationCaption(idx) || 'Please enter a valid device name' }}\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n  </form>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-search{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}.details-ldap-search__input{min-width:180px;width:180px}.details-ldap-search__select{flex:0 1 180px;min-width:160px}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-wrapper,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin:0}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-flex,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:0 12px}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-start,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-end,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-gap,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-start,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-end,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-infix,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-infix{width:100%;border-top:0;padding:0;display:flex;align-items:center;min-height:unset}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-input-element,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-input-element{margin:0;line-height:20px}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-trigger{display:flex;align-items:center;width:100%;height:100%}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-value{display:flex;align-items:center;max-width:100%}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-arrow-wrapper{display:flex;align-items:center}.details-ldap-search__chip{flex:0 0 auto}.details-ldap-search__btn{flex:0 0 auto;min-width:0;padding:0 12px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;color:#0d56aa}.details-ldap-paginator{margin-top:8px}.details-ldap-table__add-btn--delete{color:#c62828}.details-ldap-table{width:100%}.details-ldap-table__empty{margin:16px 0 8px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#737480;text-align:center}.details-ldap-table__row--disabled{opacity:.35}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-info{display:flex;align-items:flex-start;gap:16px}.line-route-field{flex:1 1 180px;min-width:160px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-field:nth-of-type(1) .line-route-select{width:230px}.line-route-field .line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .line-info .details-step-input .mat-form-field-flex{height:36px;padding:0 8px}:host ::ng-deep .line-info .details-step-input .mat-form-field-infix{padding:0}:host ::ng-deep .line-info .details-step-input .mat-input-element{font-size:14px;line-height:20px}:host ::ng-deep .mat-form-field-subscript-wrapper{position:relative}:host ::ng-deep .line-info .details-step-input .mat-form-field-subscript-wrapper{margin-top:4px;position:relative}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}:host ::ng-deep .devices-rows .details-inline-fields .details-inline-field .mat-form-field .mat-form-field-flex{display:flex;gap:3px}:host ::ng-deep .devices-rows .details-inline-fields .details-inline-field .mat-form-field .mat-form-field-flex .mat-form-field-prefix{top:1px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: UserCreationApiService }, { type: UserCreationWizardService }]; }, propDecorators: { validityChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tk-user-details-step', template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"details-step-section__part\">\r\n          <div class=\"details-inline-fields\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User ID</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User ID\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setUserDetailsField(\r\n                      'userId',\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">First Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"First Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setUserDetailsField(\r\n                      'firstName',\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Last Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Last Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setUserDetailsField(\r\n                      'lastName',\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Email</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Email\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setUserDetailsField(\r\n                      'email',\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User Template\"\r\n                  [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"details-step-section__part\">\r\n          <mat-accordion class=\"details-user-accordion\">\r\n            <mat-expansion-panel togglePosition=\"before\">\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title\r\n                  >Choose an existing or a LDAP user</mat-panel-title\r\n                >\r\n              </mat-expansion-panel-header>\r\n              <div class=\"details-user-accordion__content\">\r\n                <table\r\n                  mat-table\r\n                  [dataSource]=\"userCreationWizardService.ldapUsers\"\r\n                  class=\"details-ldap-table\"\r\n                >\r\n                  <ng-container matColumnDef=\"userId\">\r\n                    <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n                    <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n                  </ng-container>\r\n\r\n                  <ng-container matColumnDef=\"firstName\">\r\n                    <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n                    <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n                  </ng-container>\r\n\r\n                  <ng-container matColumnDef=\"lastName\">\r\n                    <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n                    <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n                  </ng-container>\r\n\r\n                  <ng-container matColumnDef=\"email\">\r\n                    <th mat-header-cell *matHeaderCellDef>Email</th>\r\n                    <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n                  </ng-container>\r\n\r\n                  <ng-container matColumnDef=\"add\">\r\n                    <th mat-header-cell *matHeaderCellDef>Add</th>\r\n                    <td mat-cell *matCellDef=\"let row\">\r\n                      <button\r\n                        mat-button\r\n                        class=\"details-ldap-table__add-btn\"\r\n                        type=\"button\"\r\n                        [disabled]=\"\r\n                          userCreationWizardService.isLdapUserAdded(row)\r\n                        \"\r\n                        (click)=\"onAddUser(row)\"\r\n                      >\r\n                        Add user\r\n                      </button>\r\n                    </td>\r\n                  </ng-container>\r\n\r\n                  <tr\r\n                    mat-header-row\r\n                    *matHeaderRowDef=\"\r\n                      userCreationWizardService.ldapTableColumns\r\n                    \"\r\n                  ></tr>\r\n                  <tr\r\n                    mat-row\r\n                    *matRowDef=\"\r\n                      let row;\r\n                      columns: userCreationWizardService.ldapTableColumns\r\n                    \"\r\n                    [class.details-ldap-table__row--disabled]=\"\r\n                      userCreationWizardService.isLdapUserAdded(row)\r\n                    \"\r\n                  ></tr>\r\n                </table>\r\n              </div>\r\n            </mat-expansion-panel>\r\n          </mat-accordion>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"line-route-list\">\r\n          <div\r\n            class=\"line-route-row\"\r\n            *ngFor=\"\r\n              let lineSelection of userCreationWizardService.lineSelections;\r\n              let idx = index\r\n            \"\r\n          >\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field\r\n                class=\"details-step-select line-route-select\"\r\n                appearance=\"outline\"\r\n              >\r\n                <mat-select\r\n                  placeholder=\"Select line\"\r\n                  [value]=\"lineSelection.lineNumber\"\r\n                  (selectionChange)=\"\r\n                    userCreationWizardService.setLineSelection(\r\n                      idx,\r\n                      $event.value\r\n                    )\r\n                  \"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let line of userCreationWizardService.lineOptions\"\r\n                    [value]=\"line.number\"\r\n                  >\r\n                    {{ line.number }} - {{ line.did }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field\r\n                class=\"details-step-select line-route-select\"\r\n                appearance=\"outline\"\r\n              >\r\n                <mat-select\r\n                  placeholder=\"Select route partition\"\r\n                  [value]=\"lineSelection.routePartitionName\"\r\n                  (selectionChange)=\"\r\n                    userCreationWizardService.setRoutePartitionSelection(\r\n                      idx,\r\n                      $event.value\r\n                    )\r\n                  \"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"\r\n                      let partition of userCreationWizardService.routePartitionOptions\r\n                    \"\r\n                    [value]=\"partition\"\r\n                  >\r\n                    {{ partition }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"devices-rows\">\r\n          <div\r\n            class=\"details-inline-fields details-inline-fields--four\"\r\n            *ngFor=\"\r\n              let _row of userCreationWizardService.deviceRows;\r\n              let idx = index\r\n            \"\r\n          >\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Device type</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Device type\"\r\n                  [value]=\"\r\n                    userCreationWizardService.deviceEntries[idx].deviceType ||\r\n                    ''\r\n                  \"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Protocol</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Protocol\"\r\n                  [value]=\"\r\n                    userCreationWizardService.deviceEntries[idx].protocol || ''\r\n                  \"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Button Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Button Template\"\r\n                  [value]=\"\r\n                    userCreationWizardService.deviceEntries[idx]\r\n                      .buttonTemplate || ''\r\n                  \"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Name\"\r\n                  [value]=\"getDeviceName(idx)\"\r\n                  (input)=\"\r\n                    userCreationWizardService.setDeviceName(\r\n                      idx,\r\n                      $any($event.target).value\r\n                    )\r\n                  \"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__row--disabled{opacity:.35}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-field:nth-of-type(1) .line-route-select{width:230px}.line-route-field .line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
 
 class UserOverviewStepComponent {
     constructor(userCreationWizardService) {
@@ -2162,21 +735,17 @@ class UserOverviewStepComponent {
     }
 }
 UserOverviewStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserOverviewStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
-UserOverviewStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserOverviewStepComponent, selector: "tk-user-overview-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n            <span>{{ user.userId }}</span>\r\n            <span>{{ user.firstName }}</span>\r\n            <span>{{ user.lastName }}</span>\r\n            <span>{{ user.email }}</span>\r\n            <span>{{ user.userTemplate }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n            <span>{{ line.number }}</span>\r\n            <span>{{ line.did }}</span>\r\n            <span>{{ line.routePartitionName }}</span>\r\n            <span>{{ line.css }}</span>\r\n            <span>{{ line.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n            <span>{{ device.name }}</span>\r\n            <span>{{ device.deviceType }}</span>\r\n            <span>{{ device.lines }}</span>\r\n            <span>{{ device.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"userCreationWizardService.overviewDeviceProfiles.length\">\r\n    <div class=\"details-step-divider\"></div>\r\n\r\n    <div class=\"details-step-sections\">\r\n      <section class=\"details-step-section\">\r\n        <h3 class=\"details-step-section__title\">Device profiles</h3>\r\n        <div class=\"details-step-section__content\">\r\n          <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n            <div class=\"preview-list__header\">\r\n              <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n            </div>\r\n            <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDeviceProfiles\">\r\n              <span>{{ device.name }}</span>\r\n              <span>{{ device.deviceType }}</span>\r\n              <span>{{ device.lines }}</span>\r\n              <span>{{ device.description }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n\r\n  <!-- <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div> -->\r\n\r\n  <!-- <div class=\"details-step-divider\"></div>\r\n\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Features</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <span style=\"margin-right: 1rem;\">Voicemail</span> 557046\r\n      </div>\r\n    </section>\r\n  </div> -->\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\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"] }] });
+UserOverviewStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserOverviewStepComponent, selector: "tk-user-overview-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n            <span>{{ user.userId }}</span>\r\n            <span>{{ user.firstName }}</span>\r\n            <span>{{ user.lastName }}</span>\r\n            <span>{{ user.email }}</span>\r\n            <span>{{ user.userTemplate }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n            <span>{{ line.number }}</span>\r\n            <span>{{ line.did }}</span>\r\n            <span>{{ line.routePartitionName }}</span>\r\n            <span>{{ line.css }}</span>\r\n            <span>{{ line.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n            <span>{{ device.name }}</span>\r\n            <span>{{ device.deviceType }}</span>\r\n            <span>{{ device.lines }}</span>\r\n            <span>{{ device.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Features</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <span style=\"margin-right: 1rem;\">Voicemail</span> 557046\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n</section>", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserOverviewStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-user-overview-step', template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n            <span>{{ user.userId }}</span>\r\n            <span>{{ user.firstName }}</span>\r\n            <span>{{ user.lastName }}</span>\r\n            <span>{{ user.email }}</span>\r\n            <span>{{ user.userTemplate }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n            <span>{{ line.number }}</span>\r\n            <span>{{ line.did }}</span>\r\n            <span>{{ line.routePartitionName }}</span>\r\n            <span>{{ line.css }}</span>\r\n            <span>{{ line.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n            <span>{{ device.name }}</span>\r\n            <span>{{ device.deviceType }}</span>\r\n            <span>{{ device.lines }}</span>\r\n            <span>{{ device.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"userCreationWizardService.overviewDeviceProfiles.length\">\r\n    <div class=\"details-step-divider\"></div>\r\n\r\n    <div class=\"details-step-sections\">\r\n      <section class=\"details-step-section\">\r\n        <h3 class=\"details-step-section__title\">Device profiles</h3>\r\n        <div class=\"details-step-section__content\">\r\n          <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n            <div class=\"preview-list__header\">\r\n              <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n            </div>\r\n            <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDeviceProfiles\">\r\n              <span>{{ device.name }}</span>\r\n              <span>{{ device.deviceType }}</span>\r\n              <span>{{ device.lines }}</span>\r\n              <span>{{ device.description }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n\r\n  <!-- <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div> -->\r\n\r\n  <!-- <div class=\"details-step-divider\"></div>\r\n\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Features</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <span style=\"margin-right: 1rem;\">Voicemail</span> 557046\r\n      </div>\r\n    </section>\r\n  </div> -->\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"] }]
+            args: [{ selector: 'tk-user-overview-step', template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n            <span>{{ user.userId }}</span>\r\n            <span>{{ user.firstName }}</span>\r\n            <span>{{ user.lastName }}</span>\r\n            <span>{{ user.email }}</span>\r\n            <span>{{ user.userTemplate }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n            <span>{{ line.number }}</span>\r\n            <span>{{ line.did }}</span>\r\n            <span>{{ line.routePartitionName }}</span>\r\n            <span>{{ line.css }}</span>\r\n            <span>{{ line.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n            <span>{{ device.name }}</span>\r\n            <span>{{ device.deviceType }}</span>\r\n            <span>{{ device.lines }}</span>\r\n            <span>{{ device.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Features</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <span style=\"margin-right: 1rem;\">Voicemail</span> 557046\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n</section>", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"] }]
         }], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
 
 class UserTemplateStepComponent {
-    get isLoading() {
-        return this.loadingSites || this.loadingSiteData;
-    }
     constructor(userCreationWizardService, userCreationService, fb) {
         this.userCreationWizardService = userCreationWizardService;
         this.userCreationService = userCreationService;
         this.fb = fb;
-        this.validityChange = new EventEmitter();
         this.formGroup = this.fb.group({
             userType: [USER_CREATION_TYPES.CUCM],
             siteId: [null],
@@ -2184,8 +753,8 @@ class UserTemplateStepComponent {
         });
         this.userCreationType = USER_CREATION_TYPES.CUCM;
         this.USER_CREATION_TYPES = USER_CREATION_TYPES;
-        // readonly defaultTemplateName = 'User 8851 Office';
-        // readonly fallbackTemplateId = '-1';
+        this.defaultTemplateName = 'User 8851 Office';
+        this.fallbackTemplateId = '-1';
         this.destroy$ = new Subject();
         this.sitesList = [];
         this.sitesList$ = this.userCreationService.sitesList$.pipe(takeUntil(this.destroy$), tap((res) => this.sitesList = res));
@@ -2194,19 +763,15 @@ class UserTemplateStepComponent {
             const templateControl = this.formGroup.get('userTemplateId');
             const currentTemplateId = templateControl?.value;
             const selectedSiteId = this.formGroup.get('siteId')?.value;
-            // const defaultTemplate = this.templates.find(
-            //     template => template.name === this.defaultTemplateName
-            // );
+            const defaultTemplate = this.templates.find(template => template.name === this.defaultTemplateName);
             const hasSelectedSite = selectedSiteId !== null && selectedSiteId !== undefined;
-            // if (hasSelectedSite && defaultTemplate && String(currentTemplateId || '') !== String(defaultTemplate.id)) {
-            //     templateControl?.setValue(String(defaultTemplate.id));
-            // }
+            if (hasSelectedSite && defaultTemplate && String(currentTemplateId || '') !== String(defaultTemplate.id)) {
+                templateControl?.setValue(String(defaultTemplate.id));
+            }
         }), takeUntil(this.destroy$));
         this.isTemplateSelectable = false;
         this.templates = [];
-        this.loadingSites = false;
-        this.loadingSiteData = false;
-        this.templateToggleFormControl = new FormControl(false);
+        this.templateToggleFormControl = new FormControl(true);
     }
     ngOnInit() {
         this.formGroup.get('userType').valueChanges
@@ -2220,24 +785,10 @@ class UserTemplateStepComponent {
             .pipe(
         // filter((value) => value !== null && value !== undefined),
         tap((value) => {
-            // this.formGroup.get('userTemplateId')?.setValue(this.fallbackTemplateId);
-            const selectedSite = this.sitesList.find(site => String(site.id) === String(value));
-            if (selectedSite) {
-                this.userCreationWizardService.setCurrentSite(selectedSite);
-            }
-            return this.userCreationWizardService.setSelectedSite(value);
-        }), takeUntil(this.destroy$), switchMap((value) => {
-            if (value === null || value === undefined || value === '') {
-                this.loadingSiteData = false;
-                return of(null);
-            }
-            this.loadingSiteData = true;
-            return forkJoin([
-                this.userCreationService.fetchAllUserTemplates(Number(value)),
-                this.userCreationWizardService.getSiteAllData(Number(value)),
-            ]).pipe(finalize(() => {
-                this.loadingSiteData = false;
-            }));
+            this.formGroup.get('userTemplateId')?.setValue(this.fallbackTemplateId);
+            // return this.userCreationWizardService.setSelectedTemplate(value);
+        }), startWith(this.formGroup.get('siteId')?.value), takeUntil(this.destroy$), switchMap((value) => {
+            return this.userCreationService.fetchAllUserTemplates(Number(value));
         }))
             .subscribe();
         // .subscribe((value) => {
@@ -2245,39 +796,35 @@ class UserTemplateStepComponent {
         // })
         this.formGroup.get('userTemplateId').valueChanges
             .pipe(filter((value) => value !== null && value !== undefined && String(value).trim().length > 0), takeUntil(this.destroy$), switchMap((value) => {
-            // if (String(value) === this.fallbackTemplateId) {
-            //     this.userCreationWizardService.setSelectedTemplate(this.defaultTemplateName);
-            //     return of(null);
-            // }
+            if (String(value) === this.fallbackTemplateId) {
+                this.userCreationWizardService.setSelectedTemplate(this.defaultTemplateName);
+                return of(null);
+            }
             return this.userCreationService.getUserTemplateToken(String(value), String(String(this.customerId)))
                 .pipe(tap((payload) => {
                 const selectedTemplate = this.templates.find(template => String(template.id) === String(value));
-                this.userCreationWizardService.setSelectedTemplate(selectedTemplate);
+                this.userCreationWizardService.setSelectedTemplate(selectedTemplate?.name || null);
                 this.userCreationWizardService.applyTemplateTokenPayload(payload);
             }));
         }))
             .subscribe();
-        this.templateToggleFormControl.valueChanges
-            .pipe(startWith(true), takeUntil(this.destroy$), distinctUntilChanged())
-            .subscribe((value) => {
-            if (value === true) {
-                const siteId = this.formGroup.get('siteId')?.value || 7095;
-                this.userCreationService.fetchAllUserTemplates(siteId)
-                    .subscribe();
-            }
-            else {
-                this.formGroup.get('userTemplateId')?.reset();
-            }
-        });
+        // this.templateToggleFormControl.valueChanges
+        //     .pipe(startWith(true), takeUntil(this.destroy$), distinctUntilChanged())
+        //     .subscribe((value) => {
+        //         if(value === true) {
+        //             const siteId = this.formGroup.get('siteId')?.value || 7095;
+        //             this.userCreationService.fetchAllUserTemplates(siteId)
+        //                 .subscribe();
+        //         } else {
+        //             this.formGroup.get('userTemplateId')?.reset();
+        //         }
+        //     });
         this.getData();
-        this.formGroup.statusChanges
-            .pipe(startWith(this.formGroup.status), takeUntil(this.destroy$))
-            .subscribe(() => this.validityChange.emit(this.isStepValid()));
     }
     reseFieldstForm() {
         this.formGroup.get('siteId')?.reset();
         this.formGroup.get('userTemplateId')?.reset();
-        this.userCreationWizardService.setSelectedTemplate();
+        this.userCreationWizardService.setSelectedTemplate(null);
         this.userCreationWizardService.resetTemplateDrivenData();
     }
     getData() {
@@ -2287,10 +834,7 @@ class UserTemplateStepComponent {
             .subscribe();
     }
     getSites(isOnlyWithLocations) {
-        this.loadingSites = true;
-        return this.userCreationService.getAllCustomerSites(String(this.customerId), isOnlyWithLocations).pipe(finalize(() => {
-            this.loadingSites = false;
-        }));
+        return this.userCreationService.getAllCustomerSites(String(this.customerId), isOnlyWithLocations);
     }
     isCUCM(site) {
         return site?.cucm?.id === 2542;
@@ -2300,51 +844,28 @@ class UserTemplateStepComponent {
         const foundedSite = this.sitesList.find((site) => site.id === siteId);
         return siteId && foundedSite ? foundedSite.name : '';
     }
-    getSelectedTemplateName() {
-        const templateId = this.formGroup.get('userTemplateId')?.value;
-        const foundedTemplate = this.templates.find((template) => String(template.id) === String(templateId));
-        return templateId && foundedTemplate ? foundedTemplate.name : '';
-    }
-    isStepValid() {
-        const siteId = this.formGroup.get('siteId')?.value;
-        const templateId = this.formGroup.get('userTemplateId')?.value;
-        return siteId !== null && siteId !== undefined && String(templateId || '').trim().length > 0;
-    }
-    markStepTouched() {
-        this.formGroup.get('siteId')?.markAsTouched();
-        this.formGroup.get('userTemplateId')?.markAsTouched();
-    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
 }
-UserTemplateStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, deps: [{ token: UserCreationWizardService }, { token: UserCreationApiService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-UserTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: { customerId: "customerId" }, outputs: { validityChange: "validityChange" }, ngImport: i0, template: "<section class=\"template-step-content\">\r\n  <app-loader *ngIf=\"isLoading\"></app-loader>\r\n  <ng-container [formGroup]=\"formGroup\">\r\n    <!-- <div class=\"template-step-field template-step-field--user-type\">\r\n      <label class=\"template-step-label\">User type</label>\r\n      <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"USER_CREATION_TYPES.CUCM\">\r\n          UCM/DI\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"USER_CREATION_TYPES.MT\">\r\n          MT\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </div> -->\r\n\r\n    <div class=\"template-step-field\">\r\n      <label class=\"template-step-label\">Select site</label>\r\n      <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Site name\"\r\n          formControlName=\"siteId\">\r\n\r\n          <mat-select-trigger>\r\n              {{ getSelectedSiteName() }}\r\n          </mat-select-trigger>\r\n\r\n          <mat-option *ngFor=\"let site of sitesList$ | async\" [value]=\"site.id\">\r\n             <div class=\"option-row\">\r\n              <span class=\"name\">{{ site.name }}</span>\r\n              <span *ngIf=\"site.name === 'Berlin' else notBerlinSite\" class=\"type\">{{ 'Multi Tenant' }}</span>\r\n              <ng-template #notBerlinSite>\r\n                <span class=\"type\">{{ isCUCM(site) ? 'UCM' : 'Dedicated Instance' }}</span>\r\n              </ng-template>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"formGroup.get('userType')?.value === USER_CREATION_TYPES.CUCM\">\r\n      <div class=\"template-step-field\">\r\n        <!-- <label class=\"template-step-label\">Would you like to use a template for the user creation?</label> -->\r\n        <!-- <mat-radio-group [formControl]=\"templateToggleFormControl\">\r\n          <mat-radio-button [color]=\"'primary'\" [value]=\"true\">\r\n            {{ 'Yes' }}\r\n          </mat-radio-button>\r\n          <mat-radio-button [color]=\"'primary'\" [value]=\"false\">\r\n            {{ 'No' }}\r\n          </mat-radio-button>\r\n        </mat-radio-group> -->\r\n\r\n        <!-- <ng-container *ngIf=\"templateToggleFormControl.value === true\"> -->\r\n          <label class=\"template-step-label\">Select user template</label>\r\n          <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n            <mat-select\r\n              placeholder=\"Templates\"\r\n              formControlName=\"userTemplateId\">\r\n              <mat-select-trigger>\r\n                <span matTooltip=\"'A new user will be created based on the selected template, including a Cisco 8851 physical device with a single line configured, without SNR (Single Number Reach) and without voicemail.'\">\r\n                  {{ getSelectedTemplateName() }}\r\n                </span>\r\n              </mat-select-trigger>\r\n              <mat-option *ngFor=\"let template of templatesList$ | async\" [value]=\"template.id\">\r\n                {{ template.name }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </ng-container>\r\n    \r\n  </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field .mat-radio-group{display:flex;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}::ng-deep .option-row{display:flex;justify-content:space-between;align-items:center;width:100%}\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: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+UserTemplateStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, deps: [{ token: UserCreationWizardService }, { token: UserCreationApiService }, { token: i3$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+UserTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: { customerId: "customerId" }, ngImport: i0, template: "<section class=\"template-step-content\">\r\n  <ng-container [formGroup]=\"formGroup\">\r\n    <!-- <div class=\"template-step-field template-step-field--user-type\">\r\n      <label class=\"template-step-label\">User type</label>\r\n      <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"USER_CREATION_TYPES.CUCM\">\r\n          UCM/DI\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"USER_CREATION_TYPES.MT\">\r\n          MT\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </div> -->\r\n\r\n    <div class=\"template-step-field\">\r\n      <label class=\"template-step-label\">Select site</label>\r\n      <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Site name\"\r\n          formControlName=\"siteId\">\r\n\r\n          <mat-select-trigger>\r\n              {{ getSelectedSiteName() }}\r\n          </mat-select-trigger>\r\n\r\n          <mat-option *ngFor=\"let site of sitesList$ | async\" [value]=\"site.id\">\r\n             <div class=\"option-row\">\r\n              <span class=\"name\">{{ site.name }}</span>\r\n              <span *ngIf=\"site.name === 'Berlin' else notBerlinSite\" class=\"type\">{{ 'Multi Tenant' }}</span>\r\n              <ng-template #notBerlinSite>\r\n                <span class=\"type\">{{ isCUCM(site) ? 'UCM' : 'Dedicated Instance' }}</span>\r\n              </ng-template>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"formGroup.get('userType')?.value === USER_CREATION_TYPES.CUCM\">\r\n      <div class=\"template-step-field\">\r\n        <!-- <label class=\"template-step-label\">Would you like to use a template for the user creation?</label>\r\n        <mat-radio-group [formControl]=\"templateToggleFormControl\">\r\n          <mat-radio-button [color]=\"'primary'\" [value]=\"true\">\r\n            {{ 'Yes' }}\r\n          </mat-radio-button>\r\n          <mat-radio-button [color]=\"'primary'\" [value]=\"false\">\r\n            {{ 'No' }}\r\n          </mat-radio-button>\r\n        </mat-radio-group> -->\r\n\r\n        <!-- <ng-container *ngIf=\"templateToggleFormControl.value === true\"> -->\r\n          <label class=\"template-step-label\">Select user template</label>\r\n          <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n            <mat-select\r\n              placeholder=\"Templates\"\r\n              formControlName=\"userTemplateId\">\r\n              <mat-select-trigger>\r\n                <span matTooltip=\"'A new user will be created based on the selected template, including a Cisco 8851 physical device with a single line configured, without SNR (Single Number Reach) and without voicemail.'\">\r\n                  {{ defaultTemplateName }}\r\n                </span>\r\n              </mat-select-trigger>\r\n              <mat-option [value]=\"fallbackTemplateId\">\r\n                {{ defaultTemplateName }}\r\n              </mat-option>\r\n              <mat-option *ngFor=\"let template of templatesList$ | async\" [value]=\"template.id\">\r\n                {{ template.name }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </ng-container>\r\n    \r\n  </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}::ng-deep .option-row{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i7.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-user-template-step', template: "<section class=\"template-step-content\">\r\n  <app-loader *ngIf=\"isLoading\"></app-loader>\r\n  <ng-container [formGroup]=\"formGroup\">\r\n    <!-- <div class=\"template-step-field template-step-field--user-type\">\r\n      <label class=\"template-step-label\">User type</label>\r\n      <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"USER_CREATION_TYPES.CUCM\">\r\n          UCM/DI\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"USER_CREATION_TYPES.MT\">\r\n          MT\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </div> -->\r\n\r\n    <div class=\"template-step-field\">\r\n      <label class=\"template-step-label\">Select site</label>\r\n      <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Site name\"\r\n          formControlName=\"siteId\">\r\n\r\n          <mat-select-trigger>\r\n              {{ getSelectedSiteName() }}\r\n          </mat-select-trigger>\r\n\r\n          <mat-option *ngFor=\"let site of sitesList$ | async\" [value]=\"site.id\">\r\n             <div class=\"option-row\">\r\n              <span class=\"name\">{{ site.name }}</span>\r\n              <span *ngIf=\"site.name === 'Berlin' else notBerlinSite\" class=\"type\">{{ 'Multi Tenant' }}</span>\r\n              <ng-template #notBerlinSite>\r\n                <span class=\"type\">{{ isCUCM(site) ? 'UCM' : 'Dedicated Instance' }}</span>\r\n              </ng-template>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"formGroup.get('userType')?.value === USER_CREATION_TYPES.CUCM\">\r\n      <div class=\"template-step-field\">\r\n        <!-- <label class=\"template-step-label\">Would you like to use a template for the user creation?</label> -->\r\n        <!-- <mat-radio-group [formControl]=\"templateToggleFormControl\">\r\n          <mat-radio-button [color]=\"'primary'\" [value]=\"true\">\r\n            {{ 'Yes' }}\r\n          </mat-radio-button>\r\n          <mat-radio-button [color]=\"'primary'\" [value]=\"false\">\r\n            {{ 'No' }}\r\n          </mat-radio-button>\r\n        </mat-radio-group> -->\r\n\r\n        <!-- <ng-container *ngIf=\"templateToggleFormControl.value === true\"> -->\r\n          <label class=\"template-step-label\">Select user template</label>\r\n          <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n            <mat-select\r\n              placeholder=\"Templates\"\r\n              formControlName=\"userTemplateId\">\r\n              <mat-select-trigger>\r\n                <span matTooltip=\"'A new user will be created based on the selected template, including a Cisco 8851 physical device with a single line configured, without SNR (Single Number Reach) and without voicemail.'\">\r\n                  {{ getSelectedTemplateName() }}\r\n                </span>\r\n              </mat-select-trigger>\r\n              <mat-option *ngFor=\"let template of templatesList$ | async\" [value]=\"template.id\">\r\n                {{ template.name }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </ng-container>\r\n    \r\n  </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field .mat-radio-group{display:flex;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}::ng-deep .option-row{display:flex;justify-content:space-between;align-items:center;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: UserCreationWizardService }, { type: UserCreationApiService }, { type: i1$2.FormBuilder }]; }, propDecorators: { customerId: [{
+            args: [{ selector: 'tk-user-template-step', template: "<section class=\"template-step-content\">\r\n  <ng-container [formGroup]=\"formGroup\">\r\n    <!-- <div class=\"template-step-field template-step-field--user-type\">\r\n      <label class=\"template-step-label\">User type</label>\r\n      <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"USER_CREATION_TYPES.CUCM\">\r\n          UCM/DI\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"USER_CREATION_TYPES.MT\">\r\n          MT\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </div> -->\r\n\r\n    <div class=\"template-step-field\">\r\n      <label class=\"template-step-label\">Select site</label>\r\n      <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Site name\"\r\n          formControlName=\"siteId\">\r\n\r\n          <mat-select-trigger>\r\n              {{ getSelectedSiteName() }}\r\n          </mat-select-trigger>\r\n\r\n          <mat-option *ngFor=\"let site of sitesList$ | async\" [value]=\"site.id\">\r\n             <div class=\"option-row\">\r\n              <span class=\"name\">{{ site.name }}</span>\r\n              <span *ngIf=\"site.name === 'Berlin' else notBerlinSite\" class=\"type\">{{ 'Multi Tenant' }}</span>\r\n              <ng-template #notBerlinSite>\r\n                <span class=\"type\">{{ isCUCM(site) ? 'UCM' : 'Dedicated Instance' }}</span>\r\n              </ng-template>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"formGroup.get('userType')?.value === USER_CREATION_TYPES.CUCM\">\r\n      <div class=\"template-step-field\">\r\n        <!-- <label class=\"template-step-label\">Would you like to use a template for the user creation?</label>\r\n        <mat-radio-group [formControl]=\"templateToggleFormControl\">\r\n          <mat-radio-button [color]=\"'primary'\" [value]=\"true\">\r\n            {{ 'Yes' }}\r\n          </mat-radio-button>\r\n          <mat-radio-button [color]=\"'primary'\" [value]=\"false\">\r\n            {{ 'No' }}\r\n          </mat-radio-button>\r\n        </mat-radio-group> -->\r\n\r\n        <!-- <ng-container *ngIf=\"templateToggleFormControl.value === true\"> -->\r\n          <label class=\"template-step-label\">Select user template</label>\r\n          <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n            <mat-select\r\n              placeholder=\"Templates\"\r\n              formControlName=\"userTemplateId\">\r\n              <mat-select-trigger>\r\n                <span matTooltip=\"'A new user will be created based on the selected template, including a Cisco 8851 physical device with a single line configured, without SNR (Single Number Reach) and without voicemail.'\">\r\n                  {{ defaultTemplateName }}\r\n                </span>\r\n              </mat-select-trigger>\r\n              <mat-option [value]=\"fallbackTemplateId\">\r\n                {{ defaultTemplateName }}\r\n              </mat-option>\r\n              <mat-option *ngFor=\"let template of templatesList$ | async\" [value]=\"template.id\">\r\n                {{ template.name }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </ng-container>\r\n    \r\n  </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}::ng-deep .option-row{display:flex;justify-content:space-between;align-items:center;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserCreationWizardService }, { type: UserCreationApiService }, { type: i3$1.FormBuilder }]; }, propDecorators: { customerId: [{
                 type: Input
-            }], validityChange: [{
-                type: Output
             }] } });
 
-const USER_CREATED_SUCCESSFLLY = 'User created successfully';
 class UserCreationWizardComponent {
-    constructor(notificationService) {
-        this.notificationService = notificationService;
+    constructor() {
         this.apiService = inject(APIService);
-        this.userCreationWizardService = inject(UserCreationWizardService);
         this.title = 'Create User';
         this.cancel = new EventEmitter();
         this.submit = new EventEmitter();
         this.isSubmitting = false;
         this.submitTimerId = null;
-        this.selectedIndex = 0;
-        this.templateStepValid = false;
-        this.detailsStepValid = false;
-        this.isLoading = false;
     }
     ngOnInit() {
         this.apiService.token = this.token;
@@ -2353,42 +874,17 @@ class UserCreationWizardComponent {
     onCancel() {
         this.cancel.emit();
     }
-    onStepSelectionChange(event) {
-        this.selectedIndex = event.selectedIndex;
-        if (event.selectedIndex === 1 && event.previouslySelectedIndex === 0) {
-            this.userCreationWizardService.resetUserDetailsStepState();
-            this.detailsStepValid = false;
-        }
-    }
-    onStepperNext(stepper) {
-        if (stepper.selectedIndex === 0) {
-            if (!this.templateStep?.isStepValid()) {
-                this.templateStep?.markStepTouched();
-                return;
-            }
-        }
-        if (stepper.selectedIndex === 1) {
-            if (!this.detailsStep?.isStepValid()) {
-                this.detailsStep?.markAllAsTouched();
-                return;
-            }
-            this.detailsStep?.syncToService();
-        }
-        stepper.next();
-    }
     onSubmit() {
         if (this.isSubmitting) {
             return;
         }
         this.isSubmitting = true;
-        // const delayMs = 3000 + Math.floor(Math.random() * 1001);
-        // this.submitTimerId = window.setTimeout(() => {
-        //   this.isSubmitting = false;
-        //   this.submitTimerId = null;
-        //   this.notificationService.success('User created successfully!');
-        //   this.submit.emit();
-        // }, delayMs);
-        this._saveChanges();
+        const delayMs = 3000 + Math.floor(Math.random() * 1001);
+        this.submitTimerId = window.setTimeout(() => {
+            this.isSubmitting = false;
+            this.submitTimerId = null;
+            this.submit.emit();
+        }, delayMs);
     }
     ngOnDestroy() {
         if (this.submitTimerId) {
@@ -2396,33 +892,13 @@ class UserCreationWizardComponent {
             this.submitTimerId = null;
         }
     }
-    _saveChanges() {
-        this.isLoading = true;
-        this.userCreationWizardService.saveNewUser()
-            .subscribe((res) => {
-            this.isLoading = false;
-            this.isSubmitting = false;
-            this.notificationService.success('User created successfully!');
-            this.submit.emit();
-        }, (error) => {
-            this.isLoading = false;
-            this.isSubmitting = false;
-            if (typeof error === 'string' && error.indexOf(USER_CREATED_SUCCESSFLLY) > -1) {
-                this.notificationService.success('User created successfully!');
-                this.submit.emit();
-            }
-            else {
-                this.notificationService.error(error?.error?.message || 'An error occurred while creating the user. Please try again.');
-            }
-        });
-    }
 }
-UserCreationWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", host: "host", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, viewQueries: [{ propertyName: "templateStep", first: true, predicate: UserTemplateStepComponent, descendants: true }, { propertyName: "detailsStep", first: true, predicate: UserDetailsStepComponent, descendants: true }], ngImport: i0, template: "<app-notification></app-notification>\n<app-loader *ngIf=\"isLoading\"></app-loader>\n<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper\n      [selectedIndex]=\"selectedIndex\"\n      (selectionChange)=\"onStepSelectionChange($event)\">\n\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 0\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-template-step\n              [customerId]=\"customerId\"\n              (validityChange)=\"templateStepValid = $event\"\n            ></tk-user-template-step>\n          </div>\n        </ng-container>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 1\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-details-step (validityChange)=\"detailsStepValid = $event\"></tk-user-details-step>\n          </div>\n        </ng-container>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 2\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-overview-step></tk-user-overview-step>\n          </div>\n        </ng-container>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!templateStepValid\"\n            (click)=\"onStepperNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!detailsStepValid\"\n            (click)=\"onStepperNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"onSubmit()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"stepper.previous()\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .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}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.wizard-actions .uc-btn-primary.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important;opacity:.3}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.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: i4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4.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: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: ["customerId"], outputs: ["validityChange"] }, { kind: "component", type: NotificationsComponent, selector: "app-notification" }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step", outputs: ["validityChange"] }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }], encapsulation: i0.ViewEncapsulation.None });
+UserCreationWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", host: "host", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, ngImport: i0, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-template-step [customerId]=\"customerId\"></tk-user-template-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-details-step></tk-user-details-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-overview-step></tk-user-overview-step>\n        </div>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"onSubmit()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"stepper.previous()\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .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}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$1.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: i3$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$2.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: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: ["customerId"] }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step" }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-user-creation-wizard', encapsulation: ViewEncapsulation.None, template: "<app-notification></app-notification>\n<app-loader *ngIf=\"isLoading\"></app-loader>\n<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper\n      [selectedIndex]=\"selectedIndex\"\n      (selectionChange)=\"onStepSelectionChange($event)\">\n\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 0\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-template-step\n              [customerId]=\"customerId\"\n              (validityChange)=\"templateStepValid = $event\"\n            ></tk-user-template-step>\n          </div>\n        </ng-container>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 1\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-details-step (validityChange)=\"detailsStepValid = $event\"></tk-user-details-step>\n          </div>\n        </ng-container>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 2\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-overview-step></tk-user-overview-step>\n          </div>\n        </ng-container>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!templateStepValid\"\n            (click)=\"onStepperNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!detailsStepValid\"\n            (click)=\"onStepperNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"onSubmit()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"stepper.previous()\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .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}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.wizard-actions .uc-btn-primary.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important;opacity:.3}\n"] }]
-        }], ctorParameters: function () { return [{ type: NotificationService }]; }, propDecorators: { title: [{
+            args: [{ selector: 'tk-user-creation-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-template-step [customerId]=\"customerId\"></tk-user-template-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-details-step></tk-user-details-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-overview-step></tk-user-overview-step>\n        </div>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"onSubmit()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"stepper.previous()\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .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}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"] }]
+        }], propDecorators: { title: [{
                 type: Input
             }], host: [{
                 type: Input
@@ -2434,38 +910,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], submit: [{
                 type: Output
-            }], templateStep: [{
-                type: ViewChild,
-                args: [UserTemplateStepComponent]
-            }], detailsStep: [{
-                type: ViewChild,
-                args: [UserDetailsStepComponent]
             }] } });
 
-function HttpLoaderFactory(http) {
-    return new TranslateHttpLoader(http);
-}
 class UserCreationModule {
 }
 UserCreationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 UserCreationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, declarations: [UserCreationWizardComponent,
         UserTemplateStepComponent,
-        NotificationsComponent,
         UserDetailsStepComponent,
-        UserOverviewStepComponent,
-        AppLoaderComponent,
-        TruncatePipe], imports: [CommonModule,
+        UserOverviewStepComponent], imports: [CommonModule,
         SharedModule,
         MaterialModule,
         MatStepperModule,
         MatExpansionModule,
         FormsModule,
         ReactiveFormsModule,
-        MatRadioModule, i1$3.TranslateModule], exports: [UserCreationWizardComponent] });
+        MatRadioModule], exports: [UserCreationWizardComponent] });
 UserCreationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, providers: [
         UserCreationApiService,
         UserCreationWizardService,
-        NotificationService,
     ], imports: [CommonModule,
         SharedModule,
         MaterialModule,
@@ -2473,25 +936,15 @@ UserCreationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
         MatExpansionModule,
         FormsModule,
         ReactiveFormsModule,
-        MatRadioModule,
-        TranslateModule.forRoot({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient]
-            }
-        })] });
+        MatRadioModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         UserCreationWizardComponent,
                         UserTemplateStepComponent,
-                        NotificationsComponent,
                         UserDetailsStepComponent,
-                        UserOverviewStepComponent,
-                        AppLoaderComponent,
-                        TruncatePipe,
+                        UserOverviewStepComponent
                     ],
                     imports: [
                         CommonModule,
@@ -2501,22 +954,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MatExpansionModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        MatRadioModule,
-                        TranslateModule.forRoot({
-                            loader: {
-                                provide: TranslateLoader,
-                                useFactory: HttpLoaderFactory,
-                                deps: [HttpClient]
-                            }
-                        }),
+                        MatRadioModule
                     ],
                     exports: [
-                        UserCreationWizardComponent,
+                        UserCreationWizardComponent
                     ],
                     providers: [
                         UserCreationApiService,
                         UserCreationWizardService,
-                        NotificationService,
                     ]
                 }]
         }] });
@@ -2534,5 +979,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { HttpLoaderFactory, USER_CREATED_SUCCESSFLLY, UserCreationModule, UserCreationWizardComponent };
+export { UserCreationModule, UserCreationWizardComponent };
 //# sourceMappingURL=tuki-io-tuki-widgets-user-creation.mjs.map