@tuki-io/tuki-widgets 0.0.194 → 0.0.196

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

@@ -7,18 +7,16 @@ import { ReactiveFormsModule, FormsModule, FormBuilder, Validators, FormControl
 import * as i15 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i4$1 from '@angular/material/stepper';
+import * as i4 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import { Subject, BehaviorSubject, tap, forkJoin, map, take, catchError, of, finalize, startWith, takeUntil, debounceTime, timer, switchMap, filter, distinctUntilChanged } from 'rxjs';
-import * as i3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i4 from '@angular/material/button';
+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 * as i5 from '@ngx-translate/core';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i5$1 from '@angular/material/table';
+import * as i5 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 { MatIconModule } from '@angular/material/icon';
@@ -42,6 +40,8 @@ import { NgApexchartsModule } from 'ng-apexcharts';
 import Big from 'big.js';
 import { __rest } from 'tslib';
 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 = {
@@ -227,10 +227,10 @@ class NotificationsComponent {
     }
 }
 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 ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\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: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.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: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\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"] }]
+            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 }]; } });
 
 class MaterialModule {
@@ -519,7 +519,8 @@ class UserCreationApiService {
         return this.apiService.post(API.CREATE_NEW_USER_FROM_TEMPLATE, user, { siteId: siteId, templateId: templateId });
     }
     getDeviceDefaults(siteId, deviceType) {
-        return this.apiService.fetch(API.DEVICE_DEFAULTS.replace(':siteId', siteId).replace(':deviceType', 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 });
@@ -576,20 +577,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-const MAC_ADDRESS_REGEX = /^[A-Fa-f0-9]{12}$/;
-const Validation = {
-    macAddress() {
-        return (control) => {
-            var _a;
-            const raw = String((_a = control.value) !== null && _a !== void 0 ? _a : '').trim();
-            if (!raw) {
-                return null;
+function deviceNameValidator(options) {
+    return (control) => {
+        var _a, _b;
+        const raw = String((_a = control.value) !== null && _a !== void 0 ? _a : '').trim();
+        if (!raw || !((_b = options.regex) === null || _b === void 0 ? void 0 : _b.trim())) {
+            return null;
+        }
+        try {
+            const rule = new RegExp(`^(?:${options.regex})$`);
+            if (!rule.test(raw)) {
+                return {
+                    deviceName: {
+                        caption: options.caption || options.regex,
+                    },
+                };
             }
-            const normalized = raw.replace(/^SEP\s*/i, '').trim();
-            return MAC_ADDRESS_REGEX.test(normalized) ? null : { macAddress: true };
-        };
-    },
-};
+        }
+        catch (_c) {
+            return null;
+        }
+        return null;
+    };
+}
 
 const getSavableData = (model, exclude) => {
     let result = Object.keys(model);
@@ -826,6 +836,34 @@ function buildSavableEndUser(endUser, lines, devices, deviceProfiles, form, opti
     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) {
+    var _a;
+    const fullRegex = (_a = deviceNameRegex === null || deviceNameRegex === void 0 ? void 0 : deviceNameRegex.trim()) !== null && _a !== void 0 ? _a : '';
+    if (!fullRegex) {
+        return '';
+    }
+    return stripLeadingPrefixGroup(fullRegex);
+}
+function stripLeadingPrefixGroup(regex) {
+    var _a, _b;
+    const parenMatch = regex.match(/^(\(.+?\))(.+)$/s);
+    if ((_a = parenMatch === null || parenMatch === void 0 ? void 0 : parenMatch[2]) === null || _a === void 0 ? void 0 : _a.trim()) {
+        return parenMatch[2];
+    }
+    const literalMatch = regex.match(/^([A-Za-z]+)(\[.+\])$/s);
+    if ((_b = literalMatch === null || literalMatch === void 0 ? void 0 : literalMatch[2]) === null || _b === void 0 ? void 0 : _b.trim()) {
+        return literalMatch[2];
+    }
+    return regex;
+}
+
 class UserCreationWizardService {
     get currentSite() {
         return this._currentSite;
@@ -850,6 +888,7 @@ class UserCreationWizardService {
         this.lines = [];
         this.devices = [];
         this.deviceProfiles = [];
+        this.templateLinesSnapshot = null;
         this._currentSite = null;
         this.siteOptions = [];
         this.templateOptions = [];
@@ -882,6 +921,8 @@ class UserCreationWizardService {
         this.selectedTemplateId = null;
         this.selectedUserCreationType = 'CUCM';
         this.availableDidPatternsMappedToDn = {};
+        this.deviceDefaultsLoadedSubject = new Subject();
+        this.deviceDefaultsLoaded$ = this.deviceDefaultsLoadedSubject.asObservable();
         this.selectedLdapUser = null;
         this.ldapUsersTotal = 0;
         // this.loadPlaceholderData();
@@ -982,6 +1023,10 @@ class UserCreationWizardService {
         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 => ({
@@ -1031,6 +1076,42 @@ class UserCreationWizardService {
     setSelectedUserCreationType(type) {
         this.selectedUserCreationType = type;
     }
+    resetUserDetailsStepState() {
+        this.userDetailsFormValue = null;
+        this.userDetailsForm = {
+            userId: '',
+            firstName: '',
+            lastName: '',
+            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;
+        }
+        this.overviewUsers = [];
+        this.rebuildOverviewLines();
+        this.rebuildOverviewDevices();
+        this.rebuildOverviewDeviceProfiles();
+    }
+    captureTemplateLinesSnapshot() {
+        this.templateLinesSnapshot = JSON.parse(JSON.stringify(this.lines));
+    }
     setUserDetailsField(field, value) {
         this.userDetailsForm = Object.assign(Object.assign({}, this.userDetailsForm), { [field]: value });
         this.rebuildOverviewUsers();
@@ -1066,6 +1147,12 @@ class UserCreationWizardService {
             }
             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();
@@ -1113,9 +1200,7 @@ class UserCreationWizardService {
         return entry.name || '';
     }
     getSiteAllData(siteId) {
-        return this.userCreationApiService.getSiteAllData(siteId)
-            .pipe(tap((res) => {
-            let site = null;
+        return this.userCreationApiService.getSiteAllData(siteId).pipe(tap((res) => {
             if (res && res[0]) {
                 const site = new Site(res[0]);
                 this.selectedSite = site.id;
@@ -1128,14 +1213,55 @@ class UserCreationWizardService {
             if (res && res[2]) {
                 this.deviceTypes = res[2];
             }
-            // this.routePartitionOptions = this.siteDefaults?.routePartition || [];
-            // this.devicePoolOptions = this.siteDefaults?.devicePool || [];
-            // this.cssOptions = this.siteDefaults?.cssFilter || [];
-            // this.voicemailProfileOptions = this.siteDefaults?.voicemailProfile || [];
-            // this.lineCss = this.siteDefaults?.lineCss || '';
-            // this.deviceCss = this.siteDefaults?.deviceCss || '';
-            // this.callForwardAllCss = this.siteDefaults?.callForwardAllCss || ''; 
-        }));
+        }), 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) {
+        var _a;
+        const device = isProfile ? this.deviceProfiles[deviceIndex] : this.devices[deviceIndex];
+        const prefix = (_a = device === null || device === void 0 ? void 0 : device.prefix) === null || _a === void 0 ? void 0 : _a.trim();
+        return prefix || null;
+    }
+    getDeviceNameValidationCaption(deviceIndex, isProfile = false) {
+        var _a;
+        const device = isProfile ? this.deviceProfiles[deviceIndex] : this.devices[deviceIndex];
+        return (device === null || device === void 0 ? void 0 : device.nameValidationCaption) || ((_a = device === null || device === void 0 ? void 0 : device.deviceDefaults) === null || _a === void 0 ? void 0 : _a.deviceNameExplained) || '';
+    }
+    getDeviceNameValidationOptions(deviceIndex, isProfile = false) {
+        var _a, _b;
+        const device = isProfile ? this.deviceProfiles[deviceIndex] : this.devices[deviceIndex];
+        const regex = ((_a = device === null || device === void 0 ? void 0 : device.nameValidationRegex) === null || _a === void 0 ? void 0 : _a.trim()) ||
+            parseDeviceNameRegexBody((_b = device === null || device === void 0 ? void 0 : device.deviceDefaults) === null || _b === void 0 ? void 0 : _b.deviceNameRegex);
+        if (!regex) {
+            return null;
+        }
+        return {
+            regex,
+            caption: this.getDeviceNameValidationCaption(deviceIndex, isProfile),
+        };
     }
     getNumberRange(siteId, routePartition) {
         this.availableDidPatternsMappedToDn = {};
@@ -1503,9 +1629,12 @@ class UserCreationWizardService {
     resolveDeviceNameForSave(_index, device) {
         var _a;
         const rawName = (device.name || device.newName || '').trim();
-        if ((_a = device.deviceType) === null || _a === void 0 ? void 0 : _a.includes('8851')) {
-            const withoutSep = rawName.replace(/^SEP\s*/i, '').trim();
-            return withoutSep ? `SEP ${withoutSep}` : '';
+        if (!rawName) {
+            return '';
+        }
+        const prefix = (_a = device.prefix) === null || _a === void 0 ? void 0 : _a.trim();
+        if (prefix && !rawName.toUpperCase().startsWith(prefix.toUpperCase())) {
+            return `${prefix}${rawName}`;
         }
         return rawName;
     }
@@ -1589,13 +1718,32 @@ class UserDetailsStepComponent {
         });
     }
     ngOnInit() {
-        this.buildDynamicFormArrays();
-        this.patchUserFieldsFromService();
+        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();
-        this.userCreationWizardService.applyUserDetailsFormValue(this.userDetailsForm.getRawValue());
+        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();
         }
@@ -1624,6 +1772,18 @@ class UserDetailsStepComponent {
     getDeviceProfileGroup(index) {
         return this.deviceProfilesFormArray.at(index);
     }
+    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) {
         var _a;
         return (_a = this.filteredAvailableNumbersByLine[lineIndex]) !== null && _a !== void 0 ? _a : [];
@@ -1778,7 +1938,7 @@ class UserDetailsStepComponent {
     emitValidity() {
         this.validityChange.emit(this.isStepValid());
     }
-    buildDynamicFormArrays() {
+    buildDynamicFormArrays(savedFormValue) {
         const service = this.userCreationWizardService;
         const linesArray = this.linesFormArray;
         const devicesArray = this.devicesFormArray;
@@ -1793,48 +1953,102 @@ class UserDetailsStepComponent {
             profilesArray.removeAt(0);
         }
         service.lines.forEach((line, index) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const savedLine = (_a = savedFormValue === null || savedFormValue === void 0 ? void 0 : savedFormValue.lines) === null || _a === void 0 ? void 0 : _a[index];
             const lineGroup = this.fb.group({
                 lineNumber: [
                     {
-                        value: ((_a = line.directoryNumber) === null || _a === void 0 ? void 0 : _a.templateDirectoryNumber) || '',
+                        value: ((_b = line.directoryNumber) === null || _b === void 0 ? void 0 : _b.templateDirectoryNumber) || '',
                         disabled: true,
                     },
                 ],
-                number: [((_b = line.directoryNumber) === null || _b === void 0 ? void 0 : _b.directoryNumber) || '', Validators.required],
+                number: [
+                    (_e = (_c = savedLine === null || savedLine === void 0 ? void 0 : savedLine.number) !== null && _c !== void 0 ? _c : (_d = line.directoryNumber) === null || _d === void 0 ? void 0 : _d.directoryNumber) !== null && _e !== void 0 ? _e : '',
+                    Validators.required,
+                ],
                 routePartition: [
-                    ((_c = line.directoryNumber) === null || _c === void 0 ? void 0 : _c.routePartitionName) || '',
+                    (_h = (_f = savedLine === null || savedLine === void 0 ? void 0 : savedLine.routePartition) !== null && _f !== void 0 ? _f : (_g = line.directoryNumber) === null || _g === void 0 ? void 0 : _g.routePartitionName) !== null && _h !== void 0 ? _h : '',
                     Validators.required,
                 ],
             });
             linesArray.push(lineGroup);
             this.setupLineListeners(index, lineGroup);
         });
-        service.devices.forEach(device => {
+        service.devices.forEach((device, index) => {
+            var _a, _b, _c;
+            const savedDevice = (_a = savedFormValue === null || savedFormValue === void 0 ? void 0 : savedFormValue.devices) === null || _a === void 0 ? void 0 : _a[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: ['', [Validators.required, Validation.macAddress()]],
+                name: [
+                    (_c = (_b = savedDevice === null || savedDevice === void 0 ? void 0 : savedDevice.name) !== null && _b !== void 0 ? _b : device.name) !== null && _c !== void 0 ? _c : '',
+                    this.buildDeviceNameValidators(index, false),
+                ],
             }));
         });
-        service.deviceProfiles.forEach(profile => {
+        service.deviceProfiles.forEach((profile, index) => {
+            var _a, _b, _c;
+            const savedProfile = (_a = savedFormValue === null || savedFormValue === void 0 ? void 0 : savedFormValue.deviceProfiles) === null || _a === void 0 ? void 0 : _a[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: ['', [Validation.macAddress()]],
+                name: [
+                    (_c = (_b = savedProfile === null || savedProfile === void 0 ? void 0 : savedProfile.name) !== null && _b !== void 0 ? _b : profile.name) !== null && _c !== void 0 ? _c : '',
+                    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 === null || nameControl === void 0 ? void 0 : nameControl.setValidators(this.buildDeviceNameValidators(index, false));
+            nameControl === null || nameControl === void 0 ? void 0 : nameControl.updateValueAndValidity({ emitEvent: false });
+        });
+        this.deviceProfilesFormArray.controls.forEach((_, index) => {
+            const nameControl = this.getDeviceProfileGroup(index).get('name');
+            nameControl === null || nameControl === void 0 ? void 0 : nameControl.setValidators(this.buildDeviceNameValidators(index, true));
+            nameControl === null || nameControl === void 0 ? void 0 : 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 endUser = this.userCreationWizardService.endUser;
+        const service = this.userCreationWizardService;
+        const endUser = service.endUser;
         this.userDetailsForm.patchValue({
-            userId: (endUser === null || endUser === void 0 ? void 0 : endUser.userid) || this.userCreationWizardService.userDetailsForm.userId || '',
-            firstName: (endUser === null || endUser === void 0 ? void 0 : endUser.firstName) || this.userCreationWizardService.userDetailsForm.firstName || '',
-            lastName: (endUser === null || endUser === void 0 ? void 0 : endUser.lastName) || this.userCreationWizardService.userDetailsForm.lastName || '',
-            email: (endUser === null || endUser === void 0 ? void 0 : endUser.email) || this.userCreationWizardService.userDetailsForm.email || '',
+            userId: (endUser === null || endUser === void 0 ? void 0 : endUser.userid) || service.userDetailsForm.userId || '',
+            firstName: (endUser === null || endUser === void 0 ? void 0 : endUser.firstName) || service.userDetailsForm.firstName || '',
+            lastName: (endUser === null || endUser === void 0 ? void 0 : endUser.lastName) || service.userDetailsForm.lastName || '',
+            email: (endUser === null || endUser === void 0 ? void 0 : endUser.email) || service.userDetailsForm.email || '',
         });
+        this.userDetailsForm.markAsPristine();
+        this.userDetailsForm.markAsUntouched();
     }
     setupLineListeners(lineIndex, lineGroup) {
         var _a, _b;
@@ -1960,10 +2174,10 @@ class UserDetailsStepComponent {
     }
 }
 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                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceGroup(idx).get('name')?.hasError('macAddress') && getDeviceGroup(idx).get('name')?.touched\">\r\n                    Please enter a valid MAC address\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                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceProfileGroup(idx).get('name')?.hasError('macAddress') && getDeviceProfileGroup(idx).get('name')?.touched\">\r\n                    Please enter a valid MAC address\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}\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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.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: 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.ɵ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" }] });
 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                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceGroup(idx).get('name')?.hasError('macAddress') && getDeviceGroup(idx).get('name')?.touched\">\r\n                    Please enter a valid MAC address\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                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceProfileGroup(idx).get('name')?.hasError('macAddress') && getDeviceProfileGroup(idx).get('name')?.touched\">\r\n                    Please enter a valid MAC address\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}\n"] }]
+            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
             }] } });
@@ -1977,10 +2191,10 @@ 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  <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"] }] });
 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  <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"] }]
         }], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
 
 class UserTemplateStepComponent {
@@ -2144,7 +2358,7 @@ class UserTemplateStepComponent {
     }
 }
 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: i3.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.ɵ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" }] });
 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"] }]
@@ -2177,6 +2391,13 @@ 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) {
         var _a, _b, _c, _d, _e;
         if (stepper.selectedIndex === 0) {
@@ -2223,20 +2444,24 @@ class UserCreationWizardComponent {
             this.notificationService.success('User created successfully!');
             this.submit.emit();
         }, (error) => {
+            var _a;
             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(((_a = error === null || error === void 0 ? void 0 : error.error) === null || _a === void 0 ? void 0 : _a.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)=\"selectedIndex = $event.selectedIndex\">\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: i4.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$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4$1.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.ɵ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 });
 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)=\"selectedIndex = $event.selectedIndex\">\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"] }]
+            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: [{
                 type: Input
             }], host: [{
@@ -2276,7 +2501,7 @@ UserCreationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         MatExpansionModule,
         FormsModule,
         ReactiveFormsModule,
-        MatRadioModule, i5.TranslateModule], exports: [UserCreationWizardComponent] });
+        MatRadioModule, i1$3.TranslateModule], exports: [UserCreationWizardComponent] });
 UserCreationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, providers: [
         UserCreationApiService,
         UserCreationWizardService,