@tuki-io/tuki-widgets 0.0.224 → 0.0.226

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

@@ -557,6 +557,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+function deviceNameHasDynamicTokens(name) {
+    return /\[DN\]|\[LN\]|\[FN\]/i.test(name !== null && name !== void 0 ? name : '');
+}
+
 function deviceNameValidator(options) {
     return (control) => {
         var _a, _b;
@@ -1017,11 +1021,29 @@ function buildSavableEndUser(endUser, lines, devices, deviceProfiles, form, opti
 /** Matches device types like `Cisco 8851`. */
 const CISCO_DIGIT_DEVICE_TYPE_PATTERN = /^Cisco\s+\d+$/i;
 const DEFAULT_SEP_DEVICE_PREFIX = 'SEP';
-function applyDefaultDevicePrefixIfMissing(device) {
+/**
+ * Extracts a literal prefix from `deviceNameExplained` patterns such as
+ * `SEP[mac]`, `TCT[0-9A-Z._-]{1,12}`, or `[A-Z0-9]{1,15}` (no prefix).
+ */
+function extractDevicePrefixFromNameExplained(deviceNameExplained) {
+    var _a, _b;
+    const explained = (_a = deviceNameExplained === null || deviceNameExplained === void 0 ? void 0 : deviceNameExplained.trim()) !== null && _a !== void 0 ? _a : '';
+    if (!explained) {
+        return null;
+    }
+    const match = explained.match(/^([A-Za-z]+)\[/);
+    return (_b = match === null || match === void 0 ? void 0 : match[1]) !== null && _b !== void 0 ? _b : null;
+}
+function applyDefaultDevicePrefixIfMissing(device, defaults) {
     var _a, _b, _c;
     if ((_a = device.prefix) === null || _a === void 0 ? void 0 : _a.trim()) {
         return;
     }
+    const prefixFromDefaults = extractDevicePrefixFromNameExplained(defaults.deviceNameExplained);
+    if (prefixFromDefaults) {
+        device.prefix = prefixFromDefaults;
+        return;
+    }
     const deviceType = (_c = (_b = device.deviceType) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
     if (CISCO_DIGIT_DEVICE_TYPE_PATTERN.test(deviceType)) {
         device.prefix = DEFAULT_SEP_DEVICE_PREFIX;
@@ -1033,6 +1055,7 @@ function applyDefaultDevicePrefixIfMissing(device) {
  * to validate the name field value (without matPrefix).
  *
  * - `([sS][eE][pP]|BAT)[0-9a-fA-F]{12}` → `[0-9a-fA-F]{12}`
+ * - `TCT[0-9A-Z._-]{1,12}` → `[0-9A-Z._-]{1,12}`
  * - `[a-zA-Z0-9]{1,15}` → `[a-zA-Z0-9]{1,15}` (unchanged)
  */
 function parseDeviceNameRegexBody(deviceNameRegex) {
@@ -1043,13 +1066,15 @@ function parseDeviceNameRegexBody(deviceNameRegex) {
     }
     return stripLeadingPrefixGroup(fullRegex);
 }
+/** Character class with an optional trailing quantifier, e.g. `[0-9a-fA-F]{12}`. */
+const CHAR_CLASS_WITH_QUANTIFIER = String.raw `\[[^\]]+\](?:\{[^}]+\})?`;
 function stripLeadingPrefixGroup(regex) {
     var _a, _b;
-    const parenMatch = regex.match(/^(\(.+?\))(.+)$/s);
+    const parenMatch = regex.match(new RegExp(`^(\\([^)]+\\))(${CHAR_CLASS_WITH_QUANTIFIER})$`));
     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);
+    const literalMatch = regex.match(new RegExp(`^([A-Za-z]+)(${CHAR_CLASS_WITH_QUANTIFIER})$`));
     if ((_b = literalMatch === null || literalMatch === void 0 ? void 0 : literalMatch[2]) === null || _b === void 0 ? void 0 : _b.trim()) {
         return literalMatch[2];
     }
@@ -1214,7 +1239,7 @@ class UserCreationWizardService {
         //     .filter(line => line.number.trim().length > 0);
         this.devices.forEach(device => {
             this.initDeviceWithSiteInfo(device);
-            applyDefaultDevicePrefixIfMissing(device);
+            // applyDefaultDevicePrefixIfMissing(device);
         });
         this.deviceProfiles.forEach(device => this.initDeviceWithSiteInfo(device));
         this.lines.forEach(line => this.initLineWithSiteInfo(line));
@@ -1285,12 +1310,12 @@ class UserCreationWizardService {
         if (this.templateLinesSnapshot) {
             this.lines = JSON.parse(JSON.stringify(this.templateLinesSnapshot));
         }
-        this.devices.forEach(device => {
-            device.name = '';
-        });
-        this.deviceProfiles.forEach(profile => {
-            profile.name = '';
-        });
+        // this.devices.forEach(device => {
+        //     device.name = '';
+        // });
+        // this.deviceProfiles.forEach(profile => {
+        //     profile.name = '';
+        // });
         if (this.endUser) {
             this.endUser.userid = '';
             this.endUser.firstName = '';
@@ -1432,6 +1457,7 @@ class UserCreationWizardService {
             device.deviceDefaults = defaults;
             device.nameValidationRegex = nameValidationRegex;
             device.nameValidationCaption = defaults.deviceNameExplained;
+            applyDefaultDevicePrefixIfMissing(device, defaults);
         });
     }
     getDeviceNamePrefix(deviceIndex, isProfile = false) {
@@ -1688,7 +1714,9 @@ class UserCreationWizardService {
     initDeviceWithSiteInfo(device) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         device.newName = device.name;
-        device.name = '';
+        if (!deviceNameHasDynamicTokens(device.name)) {
+            device.name = '';
+        }
         if (!device['enabledExtensionMobility']) {
             device.enabledExtensionMobility = (_b = (_a = this.siteDefaults) === null || _a === void 0 ? void 0 : _a.enableEm) !== null && _b !== void 0 ? _b : false;
         }
@@ -1930,9 +1958,6 @@ class UserDetailsStepComponent {
         this.setupFormSync();
         this.setupValidityEmitter();
         this.fetchInitialAvailableNumbers();
-        if (!isRestoringPreviousEntry) {
-            this.userCreationWizardService.applyUserDetailsFormValue(this.userDetailsForm.getRawValue());
-        }
         this.applyDeviceNameValidators();
         this.userCreationWizardService.deviceDefaultsLoaded$
             .pipe(takeUntil(this.destroy$))
@@ -1980,6 +2005,13 @@ class UserDetailsStepComponent {
     getDeviceProfileNameValidationCaption(index) {
         return this.userCreationWizardService.getDeviceNameValidationCaption(index, true);
     }
+    isDeviceNameReadonly(index, isProfile) {
+        var _a;
+        const device = isProfile
+            ? this.userCreationWizardService.deviceProfiles[index]
+            : this.userCreationWizardService.devices[index];
+        return deviceNameHasDynamicTokens((_a = device === null || device === void 0 ? void 0 : device.name) !== null && _a !== void 0 ? _a : device === null || device === void 0 ? void 0 : device.newName);
+    }
     getFilteredNumbers(lineIndex) {
         var _a;
         return (_a = this.filteredAvailableNumbersByLine[lineIndex]) !== null && _a !== void 0 ? _a : [];
@@ -2011,6 +2043,24 @@ class UserDetailsStepComponent {
         const lineGroup = this.linesFormArray.at(lineIndex);
         const displayNumber = this.extractDirectoryNumber(number);
         (_a = lineGroup.get('number')) === null || _a === void 0 ? void 0 : _a.setValue(displayNumber, { emitEvent: true });
+        this.devicesFormArray.controls.forEach((_, deviceIndex) => {
+            var _a;
+            const device = this.userCreationWizardService.devices[deviceIndex];
+            const templateName = (_a = device === null || device === void 0 ? void 0 : device.newName) !== null && _a !== void 0 ? _a : '';
+            if (!templateName || !templateName.includes('[DN]')) {
+                return;
+            }
+            const resolvedName = templateName.replace(/\[DN\]/g, displayNumber);
+            const deviceGroup = this.getDeviceGroup(deviceIndex);
+            const nameControl = deviceGroup.get('name');
+            if (!nameControl) {
+                return;
+            }
+            if (nameControl.value === resolvedName) {
+                return;
+            }
+            nameControl.setValue(resolvedName);
+        });
     }
     searchLdapUsers(pageIndex = 0) {
         var _a, _b;
@@ -2160,7 +2210,7 @@ class UserDetailsStepComponent {
                 ],
                 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,
+                    [Validators.required, this.createAvailableNumberValidator()],
                 ],
                 routePartition: [
                     (_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 : '',
@@ -2171,29 +2221,33 @@ class UserDetailsStepComponent {
             this.setupLineListeners(index, lineGroup);
         });
         service.devices.forEach((device, index) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             const savedDevice = (_a = savedFormValue === null || savedFormValue === void 0 ? void 0 : savedFormValue.devices) === null || _a === void 0 ? void 0 : _a[index];
+            const nameReadonly = deviceNameHasDynamicTokens((_b = device.name) !== null && _b !== void 0 ? _b : device.newName);
             devicesArray.push(this.fb.group({
                 deviceType: [{ value: device.deviceType || '', disabled: true }],
                 protocol: [{ value: device.protocol || '', disabled: true }],
                 buttonTemplate: [{ value: device.buttonTemplate || '', disabled: true }],
-                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),
-                ],
+                name: [{
+                        value: (_e = (_d = (_c = savedDevice === null || savedDevice === void 0 ? void 0 : savedDevice.name) !== null && _c !== void 0 ? _c : device.name) !== null && _d !== void 0 ? _d : device.newName) !== null && _e !== void 0 ? _e : '',
+                        disabled: nameReadonly,
+                    },
+                    nameReadonly ? [] : this.buildDeviceNameValidators(index, false),],
             }));
         });
         service.deviceProfiles.forEach((profile, index) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             const savedProfile = (_a = savedFormValue === null || savedFormValue === void 0 ? void 0 : savedFormValue.deviceProfiles) === null || _a === void 0 ? void 0 : _a[index];
+            const nameReadonly = deviceNameHasDynamicTokens((_b = profile.name) !== null && _b !== void 0 ? _b : profile.newName);
             profilesArray.push(this.fb.group({
                 deviceType: [{ value: profile.deviceType || '', disabled: true }],
                 protocol: [{ value: profile.protocol || '', disabled: true }],
                 buttonTemplate: [{ value: profile.buttonTemplate || '', disabled: true }],
-                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),
-                ],
+                name: [{
+                        value: (_e = (_d = (_c = profile === null || profile === void 0 ? void 0 : profile.name) !== null && _c !== void 0 ? _c : profile.name) !== null && _d !== void 0 ? _d : profile.newName) !== null && _e !== void 0 ? _e : '',
+                        disabled: nameReadonly,
+                    },
+                    nameReadonly ? [] : this.buildDeviceNameValidators(index, false),],
             }));
         });
     }
@@ -2207,11 +2261,17 @@ class UserDetailsStepComponent {
     }
     applyDeviceNameValidators() {
         this.devicesFormArray.controls.forEach((_, index) => {
+            if (this.isDeviceNameReadonly(index, false)) {
+                return;
+            }
             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) => {
+            if (this.isDeviceNameReadonly(index, true)) {
+                return;
+            }
             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 });
@@ -2314,6 +2374,10 @@ class UserDetailsStepComponent {
             const current = String((_b = (_a = this.linesFormArray.at(index).get('number')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '');
             return this.filterOptions(numbers, current);
         });
+        this.linesFormArray.controls.forEach(lineGroup => {
+            var _a;
+            (_a = lineGroup.get('number')) === null || _a === void 0 ? void 0 : _a.updateValueAndValidity({ emitEvent: false });
+        });
     }
     applyNumberFilter(lineIndex, raw) {
         const value = raw.trim().toLowerCase();
@@ -2336,6 +2400,18 @@ class UserDetailsStepComponent {
         }
         return source.filter(item => !!item && item.toLowerCase().includes(value));
     }
+    createAvailableNumberValidator() {
+        return (control) => {
+            var _a;
+            const value = String((_a = control.value) !== null && _a !== void 0 ? _a : '').trim();
+            if (!value) {
+                return null;
+            }
+            const numbers = this.userCreationWizardService.availableNumbers || [];
+            const isAvailableNumber = numbers.some(number => this.extractDirectoryNumber(number) === value);
+            return isAvailableNumber ? null : { availableNumber: true };
+        };
+    }
     extractDirectoryNumber(value) {
         const trimmed = value.trim();
         const spaceIndex = trimmed.indexOf(' ');
@@ -2370,10 +2446,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                  <span matPrefix *ngIf=\"getDeviceNamePrefix(idx) as devicePrefix\">{{ devicePrefix }}</span>\r\n                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceGroup(idx).get('name')?.hasError('deviceName') && getDeviceGroup(idx).get('name')?.touched\">\r\n                    {{ getDeviceGroup(idx).get('name')?.getError('deviceName')?.caption || getDeviceNameValidationCaption(idx) || 'Please enter a valid device name' }}\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"getDeviceGroup(idx).get('name')?.hasError('required') && getDeviceGroup(idx).get('name')?.touched\">\r\n                    Name is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <section class=\"details-step-section\" *ngIf=\"deviceProfilesFormArray.length\">\r\n        <h3 class=\"details-step-section__title\">Device profiles</h3>\r\n        <div class=\"details-step-section__content\" formArrayName=\"deviceProfiles\">\r\n          <div class=\"devices-rows\">\r\n            <div\r\n              class=\"details-inline-fields details-inline-fields--four\"\r\n              *ngFor=\"let profileGroup of deviceProfilesFormArray.controls; let idx = index\"\r\n              [formGroupName]=\"idx\"\r\n            >\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Device type</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"deviceType\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Protocol</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"protocol\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Button Template</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <input matInput formControlName=\"buttonTemplate\" />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"details-inline-field\">\r\n                <label class=\"details-inline-field__label\">Name</label>\r\n                <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                  <span matPrefix *ngIf=\"getDeviceProfileNamePrefix(idx) as profilePrefix\">{{ profilePrefix }}</span>\r\n                  <input matInput placeholder=\"Name\" formControlName=\"name\" />\r\n                  <mat-error *ngIf=\"getDeviceProfileGroup(idx).get('name')?.hasError('deviceName') && getDeviceProfileGroup(idx).get('name')?.touched\">\r\n                    {{ getDeviceProfileGroup(idx).get('name')?.getError('deviceName')?.caption || getDeviceProfileNameValidationCaption(idx) || 'Please enter a valid device name' }}\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n  </form>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-search{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}.details-ldap-search__input{min-width:180px;width:180px}.details-ldap-search__select{flex:0 1 180px;min-width:160px}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-wrapper,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin:0}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-flex,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:0 12px}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-start,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-end,:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-outline-gap,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-start,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-end,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-form-field-infix,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-form-field-infix{width:100%;border-top:0;padding:0;display:flex;align-items:center;min-height:unset}:host ::ng-deep .details-ldap-search__input.mat-form-field .mat-input-element,:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-input-element{margin:0;line-height:20px}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-trigger{display:flex;align-items:center;width:100%;height:100%}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-value{display:flex;align-items:center;max-width:100%}:host ::ng-deep .details-ldap-search__select.mat-form-field .mat-select-arrow-wrapper{display:flex;align-items:center}.details-ldap-search__chip{flex:0 0 auto}.details-ldap-search__btn{flex:0 0 auto;min-width:0;padding:0 12px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;color:#0d56aa}.details-ldap-paginator{margin-top:8px}.details-ldap-table__add-btn--delete{color:#c62828}.details-ldap-table{width:100%}.details-ldap-table__empty{margin:16px 0 8px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#737480;text-align:center}.details-ldap-table__row--disabled{opacity:.35}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-info{display:flex;align-items:flex-start;gap:16px}.line-route-field{flex:1 1 180px;min-width:160px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-field:nth-of-type(1) .line-route-select{width:230px}.line-route-field .line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .line-info .details-step-input .mat-form-field-flex{height:36px;padding:0 8px}:host ::ng-deep .line-info .details-step-input .mat-form-field-infix{padding:0}:host ::ng-deep .line-info .details-step-input .mat-input-element{font-size:14px;line-height:20px}:host ::ng-deep .mat-form-field-subscript-wrapper{position:relative}:host ::ng-deep .line-info .details-step-input .mat-form-field-subscript-wrapper{margin-top:4px;position:relative}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}:host ::ng-deep .devices-rows .details-inline-fields .details-inline-field .mat-form-field .mat-form-field-flex{display:flex;gap:3px}:host ::ng-deep .devices-rows .details-inline-fields .details-inline-field .mat-form-field .mat-form-field-flex .mat-form-field-prefix{top:1px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i14.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i14.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i14.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i15.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i15.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i15.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i15.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
+UserDetailsStepComponent.ɵ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')?.hasError('required') && getLineGroup(idx).get('number')?.touched\">\r\n                    Number is required\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"getLineGroup(idx).get('number')?.hasError('availableNumber') && getLineGroup(idx).get('number')?.touched\">\r\n                    Select a number from the list\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\" [readonly]=\"isDeviceNameReadonly(idx, false)\" />\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\" [readonly]=\"isDeviceNameReadonly(idx, true)\" />\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                  <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"] }]
+            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')?.hasError('required') && getLineGroup(idx).get('number')?.touched\">\r\n                    Number is required\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"getLineGroup(idx).get('number')?.hasError('availableNumber') && getLineGroup(idx).get('number')?.touched\">\r\n                    Select a number from the list\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\" [readonly]=\"isDeviceNameReadonly(idx, false)\" />\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\" [readonly]=\"isDeviceNameReadonly(idx, true)\" />\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
             }] } });