@tuki-io/tuki-widgets 0.0.219-dev.6 → 0.0.219-dev.7

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

@@ -227,10 +227,10 @@ class NotificationsComponent {
     }
 }
 NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, deps: [{ token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "\r\n\r\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div class=\"notification\"\r\n       *ngFor=\"let notification of list\"\r\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\r\n\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{notification.message | truncate:[93]}}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{notification.message}}\r\n      </div>\r\n    </div>\r\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\r\n         (click)=\"readMore()\">{{(isReadMore ? 'Collapse' : 'Read More')}}</div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      (click)=\"removeNotification(notification)\">\r\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.notification-block{right:10px;top:80px;position:absolute;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "\n\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\n  <div class=\"notification\"\n       *ngFor=\"let notification of list\"\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\n\n    <div class=\"flex-box\">\n      <div class=\"notification-icons-block\">\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\n      </div>\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\n        {{notification.message | truncate:[93]}}\n      </div>\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\n        {{notification.message}}\n      </div>\n    </div>\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\n         (click)=\"readMore()\">{{(isReadMore ? 'Collapse' : 'Read More')}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      (click)=\"removeNotification(notification)\">\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\n    </button>\n  </div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.notification-block{right:10px;top:80px;position:absolute;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n\r\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div class=\"notification\"\r\n       *ngFor=\"let notification of list\"\r\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\r\n\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{notification.message | truncate:[93]}}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{notification.message}}\r\n      </div>\r\n    </div>\r\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\r\n         (click)=\"readMore()\">{{(isReadMore ? 'Collapse' : 'Read More')}}</div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      (click)=\"removeNotification(notification)\">\r\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.notification-block{right:10px;top:80px;position:absolute;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"] }]
+            args: [{ selector: 'app-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\n  <div class=\"notification\"\n       *ngFor=\"let notification of list\"\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\n\n    <div class=\"flex-box\">\n      <div class=\"notification-icons-block\">\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\n      </div>\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\n        {{notification.message | truncate:[93]}}\n      </div>\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\n        {{notification.message}}\n      </div>\n    </div>\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\n         (click)=\"readMore()\">{{(isReadMore ? 'Collapse' : 'Read More')}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      (click)=\"removeNotification(notification)\">\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\n    </button>\n  </div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.notification-block{right:10px;top:80px;position:absolute;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"] }]
         }], ctorParameters: function () { return [{ type: NotificationService }, { type: i0.ChangeDetectorRef }]; } });
 
 class MaterialModule {
@@ -1853,10 +1853,10 @@ class AppLoaderComponent {
     }
 }
 AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
+AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 const LDAP_PAGE_SIZE = 10;
@@ -2654,10 +2654,10 @@ class UserCreationWizardComponent {
     }
 }
 UserCreationWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", host: "host", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, viewQueries: [{ propertyName: "templateStep", first: true, predicate: UserTemplateStepComponent, descendants: true }, { propertyName: "detailsStep", first: true, predicate: UserDetailsStepComponent, descendants: true }], ngImport: i0, template: "<app-notification></app-notification>\r\n<app-loader *ngIf=\"isLoading\"></app-loader>\r\n<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\r\n  <header class=\"move-user-header\">\r\n    <div class=\"move-user-header__title\">{{ title }}</div>\r\n    <div class=\"move-user-header__close\">\r\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\r\n    </div>\r\n  </header>\r\n\r\n  <div id=\"user-creation-stepper\">\r\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper\r\n      [selectedIndex]=\"selectedIndex\"\r\n      (selectionChange)=\"onStepSelectionChange($event)\">\r\n\r\n      <mat-step>\r\n        <div class=\"step-title\">Step 1: User creation with template</div>\r\n        <ng-template matStepLabel>User creation</ng-template>\r\n\r\n        <ng-container *ngIf=\"selectedIndex === 0\">\r\n          <div class=\"move-user-tab-content-box\">\r\n            <tk-user-template-step\r\n              [customerId]=\"customerId\"\r\n              (validityChange)=\"templateStepValid = $event\"\r\n            ></tk-user-template-step>\r\n          </div>\r\n        </ng-container>\r\n      </mat-step>\r\n\r\n      <mat-step>\r\n        <div class=\"step-title\">Step 2 : User details</div>\r\n        <ng-template matStepLabel>User details</ng-template>\r\n\r\n        <ng-container *ngIf=\"selectedIndex === 1\">\r\n          <div class=\"move-user-tab-content-box\">\r\n            <tk-user-details-step (validityChange)=\"detailsStepValid = $event\"></tk-user-details-step>\r\n          </div>\r\n        </ng-container>\r\n      </mat-step>\r\n\r\n      <mat-step>\r\n        <div class=\"step-title\">Step 3: Review</div>\r\n        <ng-template matStepLabel>Review</ng-template>\r\n\r\n        <ng-container *ngIf=\"selectedIndex === 2\">\r\n          <div class=\"move-user-tab-content-box\">\r\n            <tk-user-overview-step></tk-user-overview-step>\r\n          </div>\r\n        </ng-container>\r\n      </mat-step>\r\n    </mat-stepper>\r\n\r\n    <div class=\"wizard-actions\">\r\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\r\n        <ng-container *ngSwitchCase=\"0\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"!templateStepValid\"\r\n            (click)=\"onStepperNext(stepper)\"\r\n          >\r\n            Next\r\n          </button>\r\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\r\n            Cancel\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"1\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"!detailsStepValid\"\r\n            (click)=\"onStepperNext(stepper)\"\r\n          >\r\n            Next\r\n          </button>\r\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\r\n            Previous\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"2\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"isSubmitting\"\r\n            (click)=\"onSubmit()\"\r\n          >\r\n            <span class=\"uc-btn__inline-content\">\r\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\r\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\r\n            </span>\r\n          </button>\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-secondary\"\r\n            type=\"button\"\r\n            [disabled]=\"isSubmitting\"\r\n            (click)=\"stepper.previous()\"\r\n          >\r\n            Previous\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\r\n</div>", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%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%0D%3C%2Fsvg%3E%0D\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.wizard-actions .uc-btn-primary.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important;opacity:.3}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: ["customerId"], outputs: ["validityChange"] }, { kind: "component", type: NotificationsComponent, selector: "app-notification" }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step", outputs: ["validityChange"] }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }], encapsulation: i0.ViewEncapsulation.None });
+UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", host: "host", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, viewQueries: [{ propertyName: "templateStep", first: true, predicate: UserTemplateStepComponent, descendants: true }, { propertyName: "detailsStep", first: true, predicate: UserDetailsStepComponent, descendants: true }], ngImport: i0, template: "<app-notification></app-notification>\n<app-loader *ngIf=\"isLoading\"></app-loader>\n<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper\n      [selectedIndex]=\"selectedIndex\"\n      (selectionChange)=\"onStepSelectionChange($event)\">\n\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 0\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-template-step\n              [customerId]=\"customerId\"\n              (validityChange)=\"templateStepValid = $event\"\n            ></tk-user-template-step>\n          </div>\n        </ng-container>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 1\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-details-step (validityChange)=\"detailsStepValid = $event\"></tk-user-details-step>\n          </div>\n        </ng-container>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 2\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-overview-step></tk-user-overview-step>\n          </div>\n        </ng-container>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!templateStepValid\"\n            (click)=\"onStepperNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!detailsStepValid\"\n            (click)=\"onStepperNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"onSubmit()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"stepper.previous()\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.wizard-actions .uc-btn-primary.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important;opacity:.3}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: ["customerId"], outputs: ["validityChange"] }, { kind: "component", type: NotificationsComponent, selector: "app-notification" }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step", outputs: ["validityChange"] }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-user-creation-wizard', encapsulation: ViewEncapsulation.None, template: "<app-notification></app-notification>\r\n<app-loader *ngIf=\"isLoading\"></app-loader>\r\n<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\r\n  <header class=\"move-user-header\">\r\n    <div class=\"move-user-header__title\">{{ title }}</div>\r\n    <div class=\"move-user-header__close\">\r\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\r\n    </div>\r\n  </header>\r\n\r\n  <div id=\"user-creation-stepper\">\r\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper\r\n      [selectedIndex]=\"selectedIndex\"\r\n      (selectionChange)=\"onStepSelectionChange($event)\">\r\n\r\n      <mat-step>\r\n        <div class=\"step-title\">Step 1: User creation with template</div>\r\n        <ng-template matStepLabel>User creation</ng-template>\r\n\r\n        <ng-container *ngIf=\"selectedIndex === 0\">\r\n          <div class=\"move-user-tab-content-box\">\r\n            <tk-user-template-step\r\n              [customerId]=\"customerId\"\r\n              (validityChange)=\"templateStepValid = $event\"\r\n            ></tk-user-template-step>\r\n          </div>\r\n        </ng-container>\r\n      </mat-step>\r\n\r\n      <mat-step>\r\n        <div class=\"step-title\">Step 2 : User details</div>\r\n        <ng-template matStepLabel>User details</ng-template>\r\n\r\n        <ng-container *ngIf=\"selectedIndex === 1\">\r\n          <div class=\"move-user-tab-content-box\">\r\n            <tk-user-details-step (validityChange)=\"detailsStepValid = $event\"></tk-user-details-step>\r\n          </div>\r\n        </ng-container>\r\n      </mat-step>\r\n\r\n      <mat-step>\r\n        <div class=\"step-title\">Step 3: Review</div>\r\n        <ng-template matStepLabel>Review</ng-template>\r\n\r\n        <ng-container *ngIf=\"selectedIndex === 2\">\r\n          <div class=\"move-user-tab-content-box\">\r\n            <tk-user-overview-step></tk-user-overview-step>\r\n          </div>\r\n        </ng-container>\r\n      </mat-step>\r\n    </mat-stepper>\r\n\r\n    <div class=\"wizard-actions\">\r\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\r\n        <ng-container *ngSwitchCase=\"0\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"!templateStepValid\"\r\n            (click)=\"onStepperNext(stepper)\"\r\n          >\r\n            Next\r\n          </button>\r\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\r\n            Cancel\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"1\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"!detailsStepValid\"\r\n            (click)=\"onStepperNext(stepper)\"\r\n          >\r\n            Next\r\n          </button>\r\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\r\n            Previous\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"2\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"isSubmitting\"\r\n            (click)=\"onSubmit()\"\r\n          >\r\n            <span class=\"uc-btn__inline-content\">\r\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\r\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\r\n            </span>\r\n          </button>\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-secondary\"\r\n            type=\"button\"\r\n            [disabled]=\"isSubmitting\"\r\n            (click)=\"stepper.previous()\"\r\n          >\r\n            Previous\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\r\n</div>", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%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%0D%3C%2Fsvg%3E%0D\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.wizard-actions .uc-btn-primary.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important;opacity:.3}\n"] }]
+            args: [{ selector: 'tk-user-creation-wizard', encapsulation: ViewEncapsulation.None, template: "<app-notification></app-notification>\n<app-loader *ngIf=\"isLoading\"></app-loader>\n<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n    </div>\n  </header>\n\n  <div id=\"user-creation-stepper\">\n    <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper\n      [selectedIndex]=\"selectedIndex\"\n      (selectionChange)=\"onStepSelectionChange($event)\">\n\n      <mat-step>\n        <div class=\"step-title\">Step 1: User creation with template</div>\n        <ng-template matStepLabel>User creation</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 0\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-template-step\n              [customerId]=\"customerId\"\n              (validityChange)=\"templateStepValid = $event\"\n            ></tk-user-template-step>\n          </div>\n        </ng-container>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 2 : User details</div>\n        <ng-template matStepLabel>User details</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 1\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-details-step (validityChange)=\"detailsStepValid = $event\"></tk-user-details-step>\n          </div>\n        </ng-container>\n      </mat-step>\n\n      <mat-step>\n        <div class=\"step-title\">Step 3: Review</div>\n        <ng-template matStepLabel>Review</ng-template>\n\n        <ng-container *ngIf=\"selectedIndex === 2\">\n          <div class=\"move-user-tab-content-box\">\n            <tk-user-overview-step></tk-user-overview-step>\n          </div>\n        </ng-container>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!templateStepValid\"\n            (click)=\"onStepperNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!detailsStepValid\"\n            (click)=\"onStepperNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n            Previous\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"2\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"onSubmit()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n              <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"isSubmitting\"\n            (click)=\"stepper.previous()\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.wizard-actions .uc-btn-primary.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important;opacity:.3}\n"] }]
         }], ctorParameters: function () { return [{ type: NotificationService }]; }, propDecorators: { title: [{
                 type: Input
             }], host: [{