@tuki-io/tuki-widgets 0.0.162 → 0.0.164

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

@@ -1,35 +1,385 @@
-import * as i0 from '@angular/core';
-import { Injectable, inject, Component, EventEmitter, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i3$2 from '@angular/material/stepper';
-import { MatStepperModule } from '@angular/material/stepper';
-import * as i3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i5 from '@angular/material/core';
-import * as i3$1 from '@angular/material/table';
-import { MatTableModule } from '@angular/material/table';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import * as i0 from '@angular/core';
+import { NgModule, Injectable, inject, Component, EventEmitter, ViewEncapsulation, Input, Output } from '@angular/core';
+import * as i3$1 from '@angular/forms';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i9 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
+import * as i8$1 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i3$2 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i3 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { BehaviorSubject, tap, forkJoin, map, Subject, takeUntil, distinctUntilChanged, switchMap } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import { NgApexchartsModule } from 'ng-apexcharts';
-import { HttpClientModule } from '@angular/common/http';
+import * as i8 from '@angular/material/core';
+
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule], exports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule] });
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule, MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule
+                    ],
+                    exports: [
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule
+                    ]
+                }]
+        }] });
+
+const getSavableData = (model, exclude) => {
+    let result = Object.keys(model);
+    if (exclude && exclude.length) {
+        result = result.filter(key => !exclude.some(item => item === key));
+    }
+    return result.reduce((result, key) => {
+        if (model[key] instanceof Array && model[key].length && model[key][0].getSavableData) {
+            result[key] = model[key].map((item) => item.getSavableData());
+        }
+        else if (model[key] instanceof Object && model[key].getSavableData) {
+            result[key] = model[key].getSavableData();
+        }
+        else {
+            result[key] = model[key];
+        }
+        return result;
+    }, {});
+};
+
+class Site {
+    constructor(site) {
+        Object.assign(this, site);
+        this.initForm();
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            name: [this.name || '', [Validators.required]],
+            shortName: [this.shortName || '', [Validators.required]],
+            cucm: [this.cucm || ''],
+            cuc: [this.cuc || ''],
+            address1: [this.address1 || ''],
+            zipCode: [this.country || ''],
+            city: [this.city || ''],
+            state: [this.state || ''],
+            country: [this.country || '', [Validators.required]],
+            isAfterTtu: [this.isAfterTtu || ''],
+            ttuEnableDate: [this.ttuEnableDate || '']
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+    getSavableData() {
+        const nonSavableData = ['form'];
+        return getSavableData(this, nonSavableData);
+    }
+    getId() {
+        return this.id;
+    }
+}
+class SiteDefaults {
+    constructor(siteDefaults, isSharedLineSite) {
+        this.routePartitionFilter = [];
+        this.devicePoolFilter = [];
+        this.cssFilter = [];
+        this.voicemailProfileFilter = [];
+        if (siteDefaults) {
+            Object.assign(this, siteDefaults);
+            this.enableEm = siteDefaults.enableEm === 'true';
+            this.routePartitionFilter.sort();
+            this.devicePoolFilter.sort();
+            this.cssFilter.sort();
+            this.voicemailProfileFilter.sort();
+        }
+        if (isSharedLineSite) {
+            this.cssFilter = siteDefaults?.sharedSitesCssFilter || [];
+            this.routePartitionFilter = siteDefaults?.sharedSitesRPFilter || [];
+        }
+    }
+}
+
+const API = {
+    WEBEX_CHECK_CONTROL_HUB_INTEGRATION: "/api/search/webex/customers/:customerId/controlhubexists",
+    SITES: "/api/customers/:customerId/sites",
+    SITE: "/api/sites/:siteId",
+    DEVICE_TYPES: "/api/provision/options/:siteId/devicetypes",
+    SITE_SETTINGS: "/api/sites/:siteId/settings",
+    VM_USER_TEMPLATES: "/api/provision/options/:siteId/vmusertemplates",
+};
+const USER_CREATION_TYPES = {
+    CUCM: 'CUCM',
+    MT: 'MT'
+};
+const MAX_INTEGER = 2147483647;
+
+class APIService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
+        this.token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbkBjb3JyZW5ldC5jb20iLCJyb2xlcyI6IlNVUEVSX1VTRVIiLCJpYXQiOjE3NzM5MjU4NzAsImV4cCI6MTc3Mzk0Mzg3MH0.OFxsG5XvtI3zKpGtPSXVvDCkr3ls4k1Jp7_K1jO7V8Q';
+        // this.apiUrl = window.location.protocol + '//' + window.location.host + '/dcp';
+        this.apiUrl = 'https://dev.tuki.io/webex';
+        // this.apiUrl = 'http://localhost:8088/dcp';
+    }
+    fetch(url, params, cache) {
+        const headers = this.getHeaders(cache);
+        params = params || {};
+        return this.httpClient.get(this.apiUrl + url, { params: this.prepareEncodedParams(params), headers });
+    }
+    post(url, body, params = {}) {
+        body = body || null;
+        const headers = this.getHeaders();
+        return this.httpClient.post(this.apiUrl + url, body, { params: this.prepareEncodedParams(params), headers });
+    }
+    // use when response extended data is necessary:
+    postExtended(url, body = null, params = {}, headers = {}) {
+        headers = headers || this.getHeaders();
+        return this.httpClient.post(this.apiUrl + url, body, {
+            headers,
+            observe: 'response',
+            params: this.prepareEncodedParams(params)
+        });
+    }
+    put(url, body = null, params = {}) {
+        const headers = this.getHeaders();
+        return this.httpClient.put(this.apiUrl + url, body, { headers, params: this.prepareEncodedParams(params) });
+    }
+    delete(url, params = {}) {
+        const headers = this.getHeaders();
+        return this.httpClient.delete(this.apiUrl + url, { headers, params: this.prepareEncodedParams(params) });
+    }
+    fetchPagination(url, pageSize, pageNumber, additionalParams = {}, cache) {
+        const copyAdditionalParams = JSON.parse(JSON.stringify(additionalParams));
+        const params = Object.assign(copyAdditionalParams, { size: pageSize.toString(), page: pageNumber.toString() });
+        return this.fetch(url, params, cache);
+    }
+    prepareEncodedParams(params) {
+        const result = {};
+        if (!params) {
+            return {};
+        }
+        for (const key of Object.keys(params)) {
+            if (params[key]) {
+                const stringParam = params[key].toString();
+                result[key] = stringParam.includes('+') ? encodeURIComponent(stringParam) : stringParam;
+            }
+        }
+        return result;
+    }
+    getHeaders(cache) {
+        let headers = new HttpHeaders();
+        if (cache) {
+            headers = headers.append('_Cache', 'true ');
+        }
+        const token = this.token || this.getParameterByName('token');
+        headers = headers.append('Authorization', 'Bearer ' + token);
+        return headers;
+    }
+    getParameterByName(name, url = window.location.href) {
+        name = name.replace(/[\[\]]/g, '\\$&');
+        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
+        if (!results)
+            return null;
+        if (!results[2])
+            return '';
+        return decodeURIComponent(results[2].replace(/\+/g, ' '));
+    }
+}
+APIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+APIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
 class UserCreationApiService {
+    constructor() {
+        this._allSites = [];
+        this.sitesListSubject$ = new BehaviorSubject([]);
+        this.sitesList$ = this.sitesListSubject$.asObservable();
+        this.apiService = inject(APIService);
+    }
+    getSitesList() {
+    }
+    checkControlHubIntegration(customerId) {
+        const URL = API.WEBEX_CHECK_CONTROL_HUB_INTEGRATION.replace(':customerId', String(customerId));
+        return this.apiService.fetch(URL);
+        // .pipe(this.handleError(true, true));
+    }
+    getAllCustomerSites(customerId, onlySitesWithLocation) {
+        const params = {};
+        if (onlySitesWithLocation) {
+            params['onlySitesWithLocation'] = 'true';
+        }
+        return this.apiService.fetchPagination(API.SITES.replace(':customerId', String(customerId)), MAX_INTEGER, 0, params, false)
+            .pipe(tap((res) => {
+            // this._allSites = [];
+            // if (res.pageData && res.pageData.length) {
+            // this.assignAllSites(customerId, res.pageData);
+            // }
+            // this.allCustomerSites$.next(true);
+            // return this._allSites;
+            this.sitesListSubject$.next(res.pageData);
+        }));
+        //   .pipe(this.handleError(true));
+    }
+    getSiteData(siteId) {
+        // this.dataPending = true;
+        return forkJoin([
+            this.getSite(siteId),
+            this.getDeviceTypes(siteId),
+            this.getSiteDefaults(siteId, false),
+            this.getVoiceMailUserTemplates(siteId)
+        ]).subscribe(() => {
+            //   this.userFeaturesService.setDefaultUcProfile();
+            //   this.dataPending = false;
+        }, (error) => {
+            //   this.dataPending = false;
+            //   this.notifications.error(this.translate.instant('APP_USER_MSG.NO_DATA'));
+        });
+    }
+    getSite(siteId, isEdit) {
+        return this.apiService.fetch(API.SITE.replace(':siteId', String(siteId)), null, false)
+            .pipe(map((siteData) => {
+            const site = new Site(siteData);
+            // if (isEdit) {
+            //   this.setEditSite(site);
+            // } else {
+            //   this.setCurrentSite(site);
+            // }
+            return site;
+        }));
+    }
+    getDeviceTypes(siteId) {
+        return this.apiService.fetch(API.DEVICE_TYPES.replace(':siteId', String(siteId)), null, true);
+        //   .pipe(
+        //     map((types: string[]) => {
+        //         // this.deviceTypes = types)
+        //     })
+        // );
+        //   .pipe(this.handleError(false, true));
+    }
+    getSiteDefaults(siteId, directAccess, sharedLineSiteIds) {
+        const params = { directAccess: directAccess };
+        // if (sharedLineSiteIds) {
+        //   params['sharedLineSiteIds'] = sharedLineSiteIds;
+        // }
+        return this.apiService.fetch(API.SITE_SETTINGS.replace(':siteId', String(siteId)), params);
+        //   .pipe(map((siteDefaults: SiteTemplateInterface) => {
+        //     // this.siteDefaults = new SiteDefaults(siteDefaults, !!sharedLineSiteIds);
+        //     // const copiedSiteDefaults = JSON.parse(JSON.stringify(siteDefaults));
+        //     // this.originalSiteDefaults = new SiteDefaults(copiedSiteDefaults, !!sharedLineSiteIds);
+        //   }));
+        //   .pipe(this.handleError(true, true));
+    }
+    getVoiceMailUserTemplates(siteId) {
+        return this.apiService.fetch(API.VM_USER_TEMPLATES.replace(':siteId', String(siteId)), null, true)
+            .pipe(map((templates) => {
+            // this.voiceMailTemplates = templates;
+        }));
+        //   .pipe(this.handleError(false, true));
+    }
 }
 UserCreationApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 UserCreationApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationApiService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationApiService, decorators: [{
             type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class SharedModule {
+}
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
+        MaterialModule,
+        NgApexchartsModule,
+        HttpClientModule], exports: [MaterialModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
+        MaterialModule,
+        NgApexchartsModule,
+        HttpClientModule, MaterialModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        NgApexchartsModule,
+                        HttpClientModule,
+                    ],
+                    exports: [
+                        MaterialModule
+                    ]
+                }]
         }] });
 
 class UserCreationWizardService {
@@ -161,13 +511,13 @@ class UserCreationWizardService {
                 name: 'CSFJDOE'
             }
         ];
-        this.selectedTemplate = this.selectedTemplate || this.templateOptions[0] || null;
+        this.selectedTemplate = this.selectedTemplate ?? null;
         this.rebuildOverviewUsers();
         this.rebuildOverviewLines();
         this.rebuildOverviewDevices();
     }
     rebuildOverviewUsers() {
-        const userTemplate = this.selectedTemplate || this.templateOptions[0] || '';
+        const userTemplate = this.selectedTemplate || '';
         const hasUserData = Object.values(this.userDetailsForm).some(value => value.trim().length > 0);
         this.overviewUsers = hasUserData
             ? [{
@@ -221,28 +571,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-class UserTemplateStepComponent {
-    constructor(userCreationWizardService) {
-        this.userCreationWizardService = userCreationWizardService;
-    }
-}
-UserTemplateStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
-UserTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserTemplateStepComponent, selector: "tk-user-template-step", ngImport: i0, template: "<section class=\"template-step-content\">\r\n  <div class=\"template-step-field template-step-field--user-type\">\r\n    <label class=\"template-step-label\">User type</label>\r\n    <div class=\"user-type-radio-group\" role=\"radiogroup\" aria-label=\"User type\">\r\n      <label class=\"user-type-radio-option\" *ngFor=\"let type of userCreationWizardService.userCreationTypes\">\r\n        <input\r\n          class=\"user-type-radio-option__input\"\r\n          type=\"radio\"\r\n          name=\"user-creation-type\"\r\n          [value]=\"type\"\r\n          [checked]=\"type === userCreationWizardService.selectedUserCreationType\"\r\n          (change)=\"userCreationWizardService.setSelectedUserCreationType(type)\"\r\n        />\r\n        <span class=\"user-type-radio-option__control\" aria-hidden=\"true\"></span>\r\n        <span class=\"user-type-radio-option__label\">{{ type }}</span>\r\n      </label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"template-step-field\">\r\n    <label class=\"template-step-label\">Select site</label>\r\n    <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n      <mat-select\r\n        placeholder=\"Site name\"\r\n        [value]=\"userCreationWizardService.selectedSite\"\r\n        (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n      >\r\n        <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n          {{ site }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"template-step-field\">\r\n    <label class=\"template-step-label\">Select user template</label>\r\n    <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n      <mat-select\r\n        placeholder=\"Templates\"\r\n        [value]=\"userCreationWizardService.selectedTemplate\"\r\n        (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n      >\r\n        <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n          {{ template }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-radio-group{display:flex;flex-direction:column;gap:10px}.user-type-radio-option{display:inline-flex;align-items:center;gap:10px;width:-moz-fit-content;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none;margin:.5rem 0 0 1rem}.user-type-radio-option__input{position:absolute;opacity:0;width:0;height:0}.user-type-radio-option__control{width:18px;height:18px;border:2px solid #8a93a3;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,box-shadow .12s ease}.user-type-radio-option__control:after{content:\"\";width:10px;height:10px;border-radius:50%;background:transparent;transition:background-color .12s ease}.user-type-radio-option__label{color:#2a2f3b;font-size:14px;font-weight:500}.user-type-radio-option__input:checked+.user-type-radio-option__control{border-color:#1170cf;box-shadow:0 0 0 3px #1176ce1f}.user-type-radio-option__input:checked+.user-type-radio-option__control:after{background:rgb(17,112,207)}.user-type-radio-option__input:focus-visible+.user-type-radio-option__control{outline:2px solid rgba(17,118,206,.45);outline-offset:2px}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-user-template-step', template: "<section class=\"template-step-content\">\r\n  <div class=\"template-step-field template-step-field--user-type\">\r\n    <label class=\"template-step-label\">User type</label>\r\n    <div class=\"user-type-radio-group\" role=\"radiogroup\" aria-label=\"User type\">\r\n      <label class=\"user-type-radio-option\" *ngFor=\"let type of userCreationWizardService.userCreationTypes\">\r\n        <input\r\n          class=\"user-type-radio-option__input\"\r\n          type=\"radio\"\r\n          name=\"user-creation-type\"\r\n          [value]=\"type\"\r\n          [checked]=\"type === userCreationWizardService.selectedUserCreationType\"\r\n          (change)=\"userCreationWizardService.setSelectedUserCreationType(type)\"\r\n        />\r\n        <span class=\"user-type-radio-option__control\" aria-hidden=\"true\"></span>\r\n        <span class=\"user-type-radio-option__label\">{{ type }}</span>\r\n      </label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"template-step-field\">\r\n    <label class=\"template-step-label\">Select site</label>\r\n    <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n      <mat-select\r\n        placeholder=\"Site name\"\r\n        [value]=\"userCreationWizardService.selectedSite\"\r\n        (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n      >\r\n        <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n          {{ site }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"template-step-field\">\r\n    <label class=\"template-step-label\">Select user template</label>\r\n    <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n      <mat-select\r\n        placeholder=\"Templates\"\r\n        [value]=\"userCreationWizardService.selectedTemplate\"\r\n        (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n      >\r\n        <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n          {{ template }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-radio-group{display:flex;flex-direction:column;gap:10px}.user-type-radio-option{display:inline-flex;align-items:center;gap:10px;width:-moz-fit-content;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none;margin:.5rem 0 0 1rem}.user-type-radio-option__input{position:absolute;opacity:0;width:0;height:0}.user-type-radio-option__control{width:18px;height:18px;border:2px solid #8a93a3;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,box-shadow .12s ease}.user-type-radio-option__control:after{content:\"\";width:10px;height:10px;border-radius:50%;background:transparent;transition:background-color .12s ease}.user-type-radio-option__label{color:#2a2f3b;font-size:14px;font-weight:500}.user-type-radio-option__input:checked+.user-type-radio-option__control{border-color:#1170cf;box-shadow:0 0 0 3px #1176ce1f}.user-type-radio-option__input:checked+.user-type-radio-option__control:after{background:rgb(17,112,207)}.user-type-radio-option__input:focus-visible+.user-type-radio-option__control{outline:2px solid rgba(17,118,206,.45);outline-offset:2px}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
-
 class UserDetailsStepComponent {
     constructor(userCreationWizardService) {
         this.userCreationWizardService = userCreationWizardService;
     }
 }
 UserDetailsStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
-UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-dropdowns\">\r\n    <div class=\"details-step-field\">\r\n      <label class=\"details-step-label\">Select site</label>\r\n      <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Site name\"\r\n          [value]=\"userCreationWizardService.selectedSite\"\r\n          (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n        >\r\n          <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n            {{ site }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"details-step-field\">\r\n      <label class=\"details-step-label\">Select user template</label>\r\n      <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Templates\"\r\n          [value]=\"userCreationWizardService.selectedTemplate\"\r\n          (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n        >\r\n          <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n            {{ template }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"details-step-section__part\">\r\n          <div class=\"details-inline-fields\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User ID</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User ID\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">First Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"First Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Last Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Last Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Email</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Email\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User Template\"\r\n                  [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"details-step-section__part\">\r\n          <mat-accordion class=\"details-user-accordion\">\r\n            <mat-expansion-panel togglePosition=\"before\">\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title>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                <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\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>\r\n                      <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\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              </div>\r\n            </mat-expansion-panel>\r\n          </mat-accordion>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"line-route-list\">\r\n          <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  placeholder=\"Select line\"\r\n                  [value]=\"lineSelection.lineNumber\"\r\n                  (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n                >\r\n                  <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n                    {{ line.number }} - {{ line.did }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  placeholder=\"Select route partition\"\r\n                  [value]=\"lineSelection.routePartitionName\"\r\n                  (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n                >\r\n                  <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n                    {{ partition }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"devices-rows\">\r\n          <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Device type</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Device type\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Protocol</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Protocol\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Button Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Button Template\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Name\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n                  (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"details-step-section__part\">\r\n          <div class=\"details-inline-fields\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User ID</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User ID\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">First Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"First Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Last Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Last Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Email</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Email\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User Template\"\r\n                  [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"details-step-section__part\">\r\n          <mat-accordion class=\"details-user-accordion\">\r\n            <mat-expansion-panel togglePosition=\"before\">\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title>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                <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\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>\r\n                      <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\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              </div>\r\n            </mat-expansion-panel>\r\n          </mat-accordion>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"line-route-list\">\r\n          <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  placeholder=\"Select line\"\r\n                  [value]=\"lineSelection.lineNumber\"\r\n                  (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n                >\r\n                  <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n                    {{ line.number }} - {{ line.did }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  placeholder=\"Select route partition\"\r\n                  [value]=\"lineSelection.routePartitionName\"\r\n                  (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n                >\r\n                  <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n                    {{ partition }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"devices-rows\">\r\n          <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Device type</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Device type\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Protocol</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Protocol\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Button Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Button Template\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Name\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n                  (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-user-details-step', template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-dropdowns\">\r\n    <div class=\"details-step-field\">\r\n      <label class=\"details-step-label\">Select site</label>\r\n      <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Site name\"\r\n          [value]=\"userCreationWizardService.selectedSite\"\r\n          (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n        >\r\n          <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n            {{ site }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"details-step-field\">\r\n      <label class=\"details-step-label\">Select user template</label>\r\n      <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Templates\"\r\n          [value]=\"userCreationWizardService.selectedTemplate\"\r\n          (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n        >\r\n          <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n            {{ template }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"details-step-section__part\">\r\n          <div class=\"details-inline-fields\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User ID</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User ID\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">First Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"First Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Last Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Last Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Email</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Email\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User Template\"\r\n                  [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"details-step-section__part\">\r\n          <mat-accordion class=\"details-user-accordion\">\r\n            <mat-expansion-panel togglePosition=\"before\">\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title>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                <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\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>\r\n                      <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\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              </div>\r\n            </mat-expansion-panel>\r\n          </mat-accordion>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"line-route-list\">\r\n          <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  placeholder=\"Select line\"\r\n                  [value]=\"lineSelection.lineNumber\"\r\n                  (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n                >\r\n                  <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n                    {{ line.number }} - {{ line.did }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  placeholder=\"Select route partition\"\r\n                  [value]=\"lineSelection.routePartitionName\"\r\n                  (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n                >\r\n                  <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n                    {{ partition }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"devices-rows\">\r\n          <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Device type</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Device type\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Protocol</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Protocol\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Button Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Button Template\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Name\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n                  (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"] }]
+            args: [{ selector: 'tk-user-details-step', template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"details-step-section__part\">\r\n          <div class=\"details-inline-fields\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User ID</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User ID\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">First Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"First Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Last Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Last Name\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Email</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Email\"\r\n                  [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n                  (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">User Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"User Template\"\r\n                  [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"details-step-section__part\">\r\n          <mat-accordion class=\"details-user-accordion\">\r\n            <mat-expansion-panel togglePosition=\"before\">\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title>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                <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\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>\r\n                      <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\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              </div>\r\n            </mat-expansion-panel>\r\n          </mat-accordion>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"line-route-list\">\r\n          <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  placeholder=\"Select line\"\r\n                  [value]=\"lineSelection.lineNumber\"\r\n                  (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n                >\r\n                  <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n                    {{ line.number }} - {{ line.did }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"line-route-field\">\r\n              <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  placeholder=\"Select route partition\"\r\n                  [value]=\"lineSelection.routePartitionName\"\r\n                  (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n                >\r\n                  <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n                    {{ partition }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"devices-rows\">\r\n          <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Device type</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Device type\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Protocol</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Protocol\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Button Template</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Button Template\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n                  [disabled]=\"true\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"details-inline-field\">\r\n              <label class=\"details-inline-field__label\">Name</label>\r\n              <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n                <input\r\n                  matInput\r\n                  placeholder=\"Name\"\r\n                  [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n                  (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"] }]
         }], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
 
 class UserOverviewStepComponent {
@@ -254,30 +592,103 @@ class UserOverviewStepComponent {
     }
 }
 UserOverviewStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserOverviewStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
-UserOverviewStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserOverviewStepComponent, selector: "tk-user-overview-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n            <span>{{ user.userId }}</span>\r\n            <span>{{ user.firstName }}</span>\r\n            <span>{{ user.lastName }}</span>\r\n            <span>{{ user.email }}</span>\r\n            <span>{{ user.userTemplate }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n            <span>{{ line.number }}</span>\r\n            <span>{{ line.did }}</span>\r\n            <span>{{ line.routePartitionName }}</span>\r\n            <span>{{ line.css }}</span>\r\n            <span>{{ line.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n            <span>{{ device.name }}</span>\r\n            <span>{{ device.deviceType }}</span>\r\n            <span>{{ device.lines }}</span>\r\n            <span>{{ device.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Features</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+UserOverviewStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserOverviewStepComponent, selector: "tk-user-overview-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n            <span>{{ user.userId }}</span>\r\n            <span>{{ user.firstName }}</span>\r\n            <span>{{ user.lastName }}</span>\r\n            <span>{{ user.email }}</span>\r\n            <span>{{ user.userTemplate }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n            <span>{{ line.number }}</span>\r\n            <span>{{ line.did }}</span>\r\n            <span>{{ line.routePartitionName }}</span>\r\n            <span>{{ line.css }}</span>\r\n            <span>{{ line.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n            <span>{{ device.name }}</span>\r\n            <span>{{ device.deviceType }}</span>\r\n            <span>{{ device.lines }}</span>\r\n            <span>{{ device.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Features</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserOverviewStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-user-overview-step', template: "<section class=\"details-step-content\">\r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">User details</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n            <span>{{ user.userId }}</span>\r\n            <span>{{ user.firstName }}</span>\r\n            <span>{{ user.lastName }}</span>\r\n            <span>{{ user.email }}</span>\r\n            <span>{{ user.userTemplate }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Lines</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n            <span>{{ line.number }}</span>\r\n            <span>{{ line.did }}</span>\r\n            <span>{{ line.routePartitionName }}</span>\r\n            <span>{{ line.css }}</span>\r\n            <span>{{ line.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n  \r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Devices</h3>\r\n      <div class=\"details-step-section__content\">\r\n        <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n          <div class=\"preview-list__header\">\r\n            <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n          </div>\r\n          <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n            <span>{{ device.name }}</span>\r\n            <span>{{ device.deviceType }}</span>\r\n            <span>{{ device.lines }}</span>\r\n            <span>{{ device.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div>\r\n\r\n  <div class=\"details-step-divider\"></div>\r\n  \r\n  <div class=\"details-step-sections\">\r\n    <section class=\"details-step-section\">\r\n      <h3 class=\"details-step-section__title\">Features</h3>\r\n      <div class=\"details-step-section__content\"></div>\r\n    </section>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"] }]
         }], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
 
+class UserTemplateStepComponent {
+    constructor(userCreationWizardService, userCreationService, fb) {
+        this.userCreationWizardService = userCreationWizardService;
+        this.userCreationService = userCreationService;
+        this.fb = fb;
+        this.formGroup = this.fb.group({
+            userType: [USER_CREATION_TYPES.CUCM],
+            siteName: [''],
+            userTemplateName: [''],
+        });
+        this.templates = ["A", "B", "C"];
+        this.userCreationType = USER_CREATION_TYPES.CUCM;
+        this.destroy$ = new Subject();
+        this.customerId = localStorage.getItem('customerId') || '1477';
+        this.filteredSites$ = this.userCreationService.sitesList$.pipe(takeUntil(this.destroy$));
+    }
+    ngOnInit() {
+        this.formGroup.get('userType').valueChanges
+            .pipe(takeUntil(this.destroy$), distinctUntilChanged())
+            .subscribe((value) => {
+            const isOnlyWithLocations = value === USER_CREATION_TYPES.MT ? true : false;
+            this.getSites(isOnlyWithLocations).subscribe();
+        });
+        this.getData();
+    }
+    reseFieldstForm() {
+        this.formGroup.get('siteName')?.reset();
+        this.formGroup.get('userTemplateName')?.reset();
+    }
+    // public onSelectUserCreationType(event: any): void {
+    //     this.userCreationType = event.value;
+    //     const onlySitesWithLocation = this.userCreationType === USER_CREATION_TYPES.MT;
+    //     this.siteSelectionComponent.reset();
+    //     this.siteSelectionComponent.getOptions(onlySitesWithLocation);
+    // }
+    getData() {
+        const isOnlyWithLocations = this.formGroup.get('userType')?.value === USER_CREATION_TYPES.MT ? true : false;
+        this.userCreationService.checkControlHubIntegration(this.customerId)
+            .pipe(switchMap(() => this.getSites(isOnlyWithLocations)))
+            .subscribe();
+    }
+    getSites(isOnlyWithLocations) {
+        return this.userCreationService.getAllCustomerSites(this.customerId, isOnlyWithLocations);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+UserTemplateStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, deps: [{ token: UserCreationWizardService }, { token: UserCreationApiService }, { token: i3$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+UserTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserTemplateStepComponent, selector: "tk-user-template-step", ngImport: i0, template: "<section class=\"template-step-content\">\r\n  <ng-container [formGroup]=\"formGroup\">\r\n    <div class=\"template-step-field template-step-field--user-type\">\r\n      <label class=\"template-step-label\">User type</label>\r\n      <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"'CUCM'\">\r\n          CUCM\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"'MT'\">\r\n          MT\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </div>\r\n\r\n    <div class=\"template-step-field\">\r\n      <label class=\"template-step-label\">Select site</label>\r\n      <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Site name\"\r\n          formControlName=\"siteName\">\r\n          <mat-option *ngFor=\"let site of filteredSites$ | async\" [value]=\"site.id\">\r\n            {{ site.name }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"template-step-field\">\r\n      <label class=\"template-step-label\">Select user template</label>\r\n      <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Templates\"\r\n          formControlName=\"userTemplateName\">\r\n          <mat-option *ngFor=\"let template of templates\" [value]=\"template\">\r\n            {{ template }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-user-template-step', template: "<section class=\"template-step-content\">\r\n  <ng-container [formGroup]=\"formGroup\">\r\n    <div class=\"template-step-field template-step-field--user-type\">\r\n      <label class=\"template-step-label\">User type</label>\r\n      <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"'CUCM'\">\r\n          CUCM\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"'MT'\">\r\n          MT\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </div>\r\n\r\n    <div class=\"template-step-field\">\r\n      <label class=\"template-step-label\">Select site</label>\r\n      <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Site name\"\r\n          formControlName=\"siteName\">\r\n          <mat-option *ngFor=\"let site of filteredSites$ | async\" [value]=\"site.id\">\r\n            {{ site.name }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"template-step-field\">\r\n      <label class=\"template-step-label\">Select user template</label>\r\n      <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n        <mat-select\r\n          placeholder=\"Templates\"\r\n          formControlName=\"userTemplateName\">\r\n          <mat-option *ngFor=\"let template of templates\" [value]=\"template\">\r\n            {{ template }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserCreationWizardService }, { type: UserCreationApiService }, { type: i3$1.FormBuilder }]; } });
+
 class UserCreationWizardComponent {
     constructor() {
         this.title = 'Create User';
         this.cancel = new EventEmitter();
         this.submit = new EventEmitter();
+        this.isSubmitting = false;
+        this.submitTimerId = null;
     }
     onCancel() {
         this.cancel.emit();
     }
     onSubmit() {
-        this.submit.emit();
+        if (this.isSubmitting) {
+            return;
+        }
+        this.isSubmitting = true;
+        const delayMs = 3000 + Math.floor(Math.random() * 1001);
+        this.submitTimerId = window.setTimeout(() => {
+            this.isSubmitting = false;
+            this.submitTimerId = null;
+            this.submit.emit();
+        }, delayMs);
+    }
+    ngOnDestroy() {
+        if (this.submitTimerId) {
+            window.clearTimeout(this.submitTimerId);
+            this.submitTimerId = null;
+        }
     }
 }
 UserCreationWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, ngImport: i0, template: "<div class=\"move-user-stepper-container\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-template-step></tk-user-template-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-details-step></tk-user-details-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-overview-step></tk-user-overview-step>\n        </div>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"onSubmit()\">\n            Create\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step" }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step" }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }], encapsulation: i0.ViewEncapsulation.None });
+UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, ngImport: i0, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-template-step></tk-user-template-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-details-step></tk-user-details-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-overview-step></tk-user-overview-step>\n        </div>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"onSubmit()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"stepper.previous()\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step" }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step" }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-user-creation-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"move-user-stepper-container\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-template-step></tk-user-template-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-details-step></tk-user-details-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-overview-step></tk-user-overview-step>\n        </div>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"onSubmit()\">\n            Create\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"] }]
+            args: [{ selector: 'tk-user-creation-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-template-step></tk-user-template-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-details-step></tk-user-details-step>\n        </div>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <div class=\"move-user-tab-content-box\">\n          <tk-user-overview-step></tk-user-overview-step>\n        </div>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"onSubmit()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"stepper.previous()\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], token: [{
@@ -290,98 +701,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
-class MaterialModule {
-}
-MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule], exports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule] });
-MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule, MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatProgressBarModule,
-                        MatTooltipModule,
-                        MatTableModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule
-                    ],
-                    exports: [
-                        MatProgressBarModule,
-                        MatTooltipModule,
-                        MatTableModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule
-                    ]
-                }]
-        }] });
-
-class SharedModule {
-}
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
-        MaterialModule,
-        NgApexchartsModule,
-        HttpClientModule], exports: [MaterialModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
-        MaterialModule,
-        NgApexchartsModule,
-        HttpClientModule, MaterialModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [
-                        CommonModule,
-                        MaterialModule,
-                        NgApexchartsModule,
-                        HttpClientModule
-                    ],
-                    exports: [
-                        MaterialModule
-                    ]
-                }]
-        }] });
-
 class UserCreationModule {
 }
 UserCreationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -392,15 +711,21 @@ UserCreationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         SharedModule,
         MaterialModule,
         MatStepperModule,
-        MatExpansionModule], exports: [UserCreationWizardComponent] });
+        MatExpansionModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatRadioModule], exports: [UserCreationWizardComponent] });
 UserCreationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, providers: [
         UserCreationApiService,
-        UserCreationWizardService
+        UserCreationWizardService,
     ], imports: [CommonModule,
         SharedModule,
         MaterialModule,
         MatStepperModule,
-        MatExpansionModule] });
+        MatExpansionModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatRadioModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, decorators: [{
             type: NgModule,
             args: [{
@@ -415,14 +740,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         SharedModule,
                         MaterialModule,
                         MatStepperModule,
-                        MatExpansionModule
+                        MatExpansionModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatRadioModule
                     ],
                     exports: [
                         UserCreationWizardComponent
                     ],
                     providers: [
                         UserCreationApiService,
-                        UserCreationWizardService
+                        UserCreationWizardService,
                     ]
                 }]
         }] });