@tuki-io/tuki-widgets 0.0.183 → 0.0.186
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/di2mt/api/api.endpoints.mjs +2 -2
- package/esm2020/di2mt/widgets/upgrade-overview/cards/pending-activation-users/pending-activation-users.component.mjs +20 -9
- package/esm2020/user-creation/src/classes/notification.mjs +32 -0
- package/esm2020/user-creation/src/environments/environment.mjs +11 -0
- package/esm2020/user-creation/src/shared/services/notification.service.mjs +62 -0
- package/esm2020/user-creation/src/user-creation.module.mjs +7 -1
- package/esm2020/user-creation/src/widgets/user-creation-wizard/user-creation-wizard.component.mjs +14 -11
- package/esm2020/user-device-manage/src/device-manage-widget.component.mjs +3 -3
- package/esm2020/user-manage/src/device-list/device-list.component.mjs +3 -3
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs +17 -7
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs +117 -10
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs +19 -8
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs +117 -10
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs +2 -2
- package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs +2 -2
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/package.json +1 -1
- package/user-creation/src/classes/notification.d.ts +18 -0
- package/user-creation/src/environments/environment.d.ts +9 -0
- package/user-creation/src/shared/services/notification.service.d.ts +18 -0
- package/user-creation/src/widgets/user-creation-wizard/user-creation-wizard.component.d.ts +3 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { NgModule, Injectable, inject, Component, Input, EventEmitter, ViewEncapsulation, Output } from '@angular/core';
|
|
@@ -7,7 +7,7 @@ import { FormBuilder, Validators, FormControl, FormsModule, ReactiveFormsModule
|
|
|
7
7
|
import * as i9 from '@angular/material/expansion';
|
|
8
8
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
9
9
|
import { MatRadioModule } from '@angular/material/radio';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i4$1 from '@angular/material/stepper';
|
|
11
11
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
12
12
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
13
13
|
import * as i3 from '@angular/material/table';
|
|
@@ -15,7 +15,7 @@ import { MatTableModule } from '@angular/material/table';
|
|
|
15
15
|
import * as i5$1 from '@angular/material/tooltip';
|
|
16
16
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
17
17
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
18
|
-
import * as i4
|
|
18
|
+
import * as i4 from '@angular/material/button';
|
|
19
19
|
import { MatButtonModule } from '@angular/material/button';
|
|
20
20
|
import { MatIconModule } from '@angular/material/icon';
|
|
21
21
|
import * as i5 from '@angular/material/form-field';
|
|
@@ -722,7 +722,7 @@ class UserDetailsStepComponent {
|
|
|
722
722
|
}
|
|
723
723
|
}
|
|
724
724
|
UserDetailsStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
725
|
-
UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'userId',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'firstName',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'lastName',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'email',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title\r\n >Choose an existing or a LDAP user</mat-panel-title\r\n >\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table\r\n mat-table\r\n [dataSource]=\"userCreationWizardService.ldapUsers\"\r\n class=\"details-ldap-table\"\r\n >\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <button\r\n mat-button\r\n class=\"details-ldap-table__add-btn\"\r\n type=\"button\"\r\n [disabled]=\"\r\n userCreationWizardService.isLdapUserAdded(row)\r\n \"\r\n (click)=\"onAddUser(row)\"\r\n >\r\n Add user\r\n </button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"\r\n userCreationWizardService.ldapTableColumns\r\n \"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"\r\n let row;\r\n columns: userCreationWizardService.ldapTableColumns\r\n \"\r\n [class.details-ldap-table__row--disabled]=\"\r\n userCreationWizardService.isLdapUserAdded(row)\r\n \"\r\n ></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div\r\n class=\"line-route-row\"\r\n *ngFor=\"\r\n let lineSelection of userCreationWizardService.lineSelections;\r\n let idx = index\r\n \"\r\n >\r\n <div class=\"line-route-field\">\r\n <mat-form-field\r\n class=\"details-step-select line-route-select\"\r\n appearance=\"outline\"\r\n >\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"\r\n userCreationWizardService.setLineSelection(\r\n idx,\r\n $event.value\r\n )\r\n \"\r\n >\r\n <mat-option\r\n *ngFor=\"let line of userCreationWizardService.lineOptions\"\r\n [value]=\"line.number\"\r\n >\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field\r\n class=\"details-step-select line-route-select\"\r\n appearance=\"outline\"\r\n >\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"\r\n userCreationWizardService.setRoutePartitionSelection(\r\n idx,\r\n $event.value\r\n )\r\n \"\r\n >\r\n <mat-option\r\n *ngFor=\"\r\n let partition of userCreationWizardService.routePartitionOptions\r\n \"\r\n [value]=\"partition\"\r\n >\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div\r\n class=\"details-inline-fields details-inline-fields--four\"\r\n *ngFor=\"\r\n let _row of userCreationWizardService.deviceRows;\r\n let idx = index\r\n \"\r\n >\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx].deviceType ||\r\n ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx].protocol || ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx]\r\n .buttonTemplate || ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"getDeviceName(idx)\"\r\n (input)=\"\r\n userCreationWizardService.setDeviceName(\r\n idx,\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__row--disabled{opacity:.35}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-field:nth-of-type(1) .line-route-select{width:230px}.line-route-field .line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
725
|
+
UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'userId',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'firstName',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'lastName',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'email',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title\r\n >Choose an existing or a LDAP user</mat-panel-title\r\n >\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table\r\n mat-table\r\n [dataSource]=\"userCreationWizardService.ldapUsers\"\r\n class=\"details-ldap-table\"\r\n >\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <button\r\n mat-button\r\n class=\"details-ldap-table__add-btn\"\r\n type=\"button\"\r\n [disabled]=\"\r\n userCreationWizardService.isLdapUserAdded(row)\r\n \"\r\n (click)=\"onAddUser(row)\"\r\n >\r\n Add user\r\n </button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"\r\n userCreationWizardService.ldapTableColumns\r\n \"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"\r\n let row;\r\n columns: userCreationWizardService.ldapTableColumns\r\n \"\r\n [class.details-ldap-table__row--disabled]=\"\r\n userCreationWizardService.isLdapUserAdded(row)\r\n \"\r\n ></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div\r\n class=\"line-route-row\"\r\n *ngFor=\"\r\n let lineSelection of userCreationWizardService.lineSelections;\r\n let idx = index\r\n \"\r\n >\r\n <div class=\"line-route-field\">\r\n <mat-form-field\r\n class=\"details-step-select line-route-select\"\r\n appearance=\"outline\"\r\n >\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"\r\n userCreationWizardService.setLineSelection(\r\n idx,\r\n $event.value\r\n )\r\n \"\r\n >\r\n <mat-option\r\n *ngFor=\"let line of userCreationWizardService.lineOptions\"\r\n [value]=\"line.number\"\r\n >\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field\r\n class=\"details-step-select line-route-select\"\r\n appearance=\"outline\"\r\n >\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"\r\n userCreationWizardService.setRoutePartitionSelection(\r\n idx,\r\n $event.value\r\n )\r\n \"\r\n >\r\n <mat-option\r\n *ngFor=\"\r\n let partition of userCreationWizardService.routePartitionOptions\r\n \"\r\n [value]=\"partition\"\r\n >\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div\r\n class=\"details-inline-fields details-inline-fields--four\"\r\n *ngFor=\"\r\n let _row of userCreationWizardService.deviceRows;\r\n let idx = index\r\n \"\r\n >\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx].deviceType ||\r\n ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx].protocol || ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx]\r\n .buttonTemplate || ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"getDeviceName(idx)\"\r\n (input)=\"\r\n userCreationWizardService.setDeviceName(\r\n idx,\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__row--disabled{opacity:.35}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-field:nth-of-type(1) .line-route-select{width:230px}.line-route-field .line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i2.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" }] });
|
|
726
726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, decorators: [{
|
|
727
727
|
type: Component,
|
|
728
728
|
args: [{ selector: 'tk-user-details-step', template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'userId',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'firstName',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'lastName',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"\r\n userCreationWizardService.setUserDetailsField(\r\n 'email',\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title\r\n >Choose an existing or a LDAP user</mat-panel-title\r\n >\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table\r\n mat-table\r\n [dataSource]=\"userCreationWizardService.ldapUsers\"\r\n class=\"details-ldap-table\"\r\n >\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <button\r\n mat-button\r\n class=\"details-ldap-table__add-btn\"\r\n type=\"button\"\r\n [disabled]=\"\r\n userCreationWizardService.isLdapUserAdded(row)\r\n \"\r\n (click)=\"onAddUser(row)\"\r\n >\r\n Add user\r\n </button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"\r\n userCreationWizardService.ldapTableColumns\r\n \"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"\r\n let row;\r\n columns: userCreationWizardService.ldapTableColumns\r\n \"\r\n [class.details-ldap-table__row--disabled]=\"\r\n userCreationWizardService.isLdapUserAdded(row)\r\n \"\r\n ></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div\r\n class=\"line-route-row\"\r\n *ngFor=\"\r\n let lineSelection of userCreationWizardService.lineSelections;\r\n let idx = index\r\n \"\r\n >\r\n <div class=\"line-route-field\">\r\n <mat-form-field\r\n class=\"details-step-select line-route-select\"\r\n appearance=\"outline\"\r\n >\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"\r\n userCreationWizardService.setLineSelection(\r\n idx,\r\n $event.value\r\n )\r\n \"\r\n >\r\n <mat-option\r\n *ngFor=\"let line of userCreationWizardService.lineOptions\"\r\n [value]=\"line.number\"\r\n >\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field\r\n class=\"details-step-select line-route-select\"\r\n appearance=\"outline\"\r\n >\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"\r\n userCreationWizardService.setRoutePartitionSelection(\r\n idx,\r\n $event.value\r\n )\r\n \"\r\n >\r\n <mat-option\r\n *ngFor=\"\r\n let partition of userCreationWizardService.routePartitionOptions\r\n \"\r\n [value]=\"partition\"\r\n >\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div\r\n class=\"details-inline-fields details-inline-fields--four\"\r\n *ngFor=\"\r\n let _row of userCreationWizardService.deviceRows;\r\n let idx = index\r\n \"\r\n >\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx].deviceType ||\r\n ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx].protocol || ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"\r\n userCreationWizardService.deviceEntries[idx]\r\n .buttonTemplate || ''\r\n \"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"getDeviceName(idx)\"\r\n (input)=\"\r\n userCreationWizardService.setDeviceName(\r\n idx,\r\n $any($event.target).value\r\n )\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__row--disabled{opacity:.35}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-field:nth-of-type(1) .line-route-select{width:230px}.line-route-field .line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"] }]
|
|
@@ -737,7 +737,7 @@ class UserOverviewStepComponent {
|
|
|
737
737
|
}
|
|
738
738
|
}
|
|
739
739
|
UserOverviewStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserOverviewStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
740
|
-
UserOverviewStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserOverviewStepComponent, selector: "tk-user-overview-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n <span>{{ user.userId }}</span>\r\n <span>{{ user.firstName }}</span>\r\n <span>{{ user.lastName }}</span>\r\n <span>{{ user.email }}</span>\r\n <span>{{ user.userTemplate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n \r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n <span>{{ line.number }}</span>\r\n <span>{{ line.did }}</span>\r\n <span>{{ line.routePartitionName }}</span>\r\n <span>{{ line.css }}</span>\r\n <span>{{ line.description }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n \r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n <span>{{ device.name }}</span>\r\n <span>{{ device.deviceType }}</span>\r\n <span>{{ device.lines }}</span>\r\n <span>{{ device.description }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n <div class=\"details-step-section__content\"></div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Features</h3>\r\n <div class=\"details-step-section__content\">\r\n <span style=\"margin-right: 1rem;\">Voicemail</span> 557046\r\n </div>\r\n </section>\r\n </div>\r\n\r\n</section>", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"], dependencies: [{ kind: "directive", type:
|
|
740
|
+
UserOverviewStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserOverviewStepComponent, selector: "tk-user-overview-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n <span>{{ user.userId }}</span>\r\n <span>{{ user.firstName }}</span>\r\n <span>{{ user.lastName }}</span>\r\n <span>{{ user.email }}</span>\r\n <span>{{ user.userTemplate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n \r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n <span>{{ line.number }}</span>\r\n <span>{{ line.did }}</span>\r\n <span>{{ line.routePartitionName }}</span>\r\n <span>{{ line.css }}</span>\r\n <span>{{ line.description }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n \r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n <span>{{ device.name }}</span>\r\n <span>{{ device.deviceType }}</span>\r\n <span>{{ device.lines }}</span>\r\n <span>{{ device.description }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n <div class=\"details-step-section__content\"></div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Features</h3>\r\n <div class=\"details-step-section__content\">\r\n <span style=\"margin-right: 1rem;\">Voicemail</span> 557046\r\n </div>\r\n </section>\r\n </div>\r\n\r\n</section>", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
741
741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserOverviewStepComponent, decorators: [{
|
|
742
742
|
type: Component,
|
|
743
743
|
args: [{ selector: 'tk-user-overview-step', template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"USER_DETAILS_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of USER_DETAILS_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let user of userCreationWizardService.overviewUsers\">\r\n <span>{{ user.userId }}</span>\r\n <span>{{ user.firstName }}</span>\r\n <span>{{ user.lastName }}</span>\r\n <span>{{ user.email }}</span>\r\n <span>{{ user.userTemplate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n \r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"LINES_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of LINES_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let line of userCreationWizardService.overviewLines\">\r\n <span>{{ line.number }}</span>\r\n <span>{{ line.did }}</span>\r\n <span>{{ line.routePartitionName }}</span>\r\n <span>{{ line.css }}</span>\r\n <span>{{ line.description }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n \r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"preview-list\" [style.--preview-cols]=\"DEVICES_COLS.length\">\r\n <div class=\"preview-list__header\">\r\n <span *ngFor=\"let col of DEVICES_COLS\">{{ col }}</span>\r\n </div>\r\n <div class=\"preview-list__row\" *ngFor=\"let device of userCreationWizardService.overviewDevices\">\r\n <span>{{ device.name }}</span>\r\n <span>{{ device.deviceType }}</span>\r\n <span>{{ device.lines }}</span>\r\n <span>{{ device.description }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Single Number Reach</h3>\r\n <div class=\"details-step-section__content\"></div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n \r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Features</h3>\r\n <div class=\"details-step-section__content\">\r\n <span style=\"margin-right: 1rem;\">Voicemail</span> 557046\r\n </div>\r\n </section>\r\n </div>\r\n\r\n</section>", styles: [".details-step-content{display:flex;flex-direction:column;gap:24px}.details-step-divider{border-top:1px solid #d9d9d9}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:16px}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.preview-list{display:flex;flex-direction:column;gap:4px}.preview-list__header,.preview-list__row{display:grid;grid-template-columns:repeat(var(--preview-cols, 1),minmax(0,1fr));column-gap:24px}.preview-list__header>span,.preview-list__row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-700, #737480);font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.preview-list__row>span{min-width:0;color:var(--Gray-700, #333);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}\n"] }]
|
|
@@ -852,7 +852,7 @@ class UserTemplateStepComponent {
|
|
|
852
852
|
}
|
|
853
853
|
}
|
|
854
854
|
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 });
|
|
855
|
-
UserTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: { customerId: "customerId" }, ngImport: i0, template: "<section class=\"template-step-content\">\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- <div class=\"template-step-field template-step-field--user-type\">\r\n <label class=\"template-step-label\">User type</label>\r\n <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"USER_CREATION_TYPES.CUCM\">\r\n UCM/DI\r\n </mat-radio-button>\r\n <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"USER_CREATION_TYPES.MT\">\r\n MT\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div> -->\r\n\r\n <div class=\"template-step-field\">\r\n <label class=\"template-step-label\">Select site</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Site name\"\r\n formControlName=\"siteId\">\r\n\r\n <mat-select-trigger>\r\n {{ getSelectedSiteName() }}\r\n </mat-select-trigger>\r\n\r\n <mat-option *ngFor=\"let site of sitesList$ | async\" [value]=\"site.id\">\r\n <div class=\"option-row\">\r\n <span class=\"name\">{{ site.name }}</span>\r\n <span *ngIf=\"site.name === 'Berlin' else notBerlinSite\" class=\"type\">{{ 'Multi Tenant' }}</span>\r\n <ng-template #notBerlinSite>\r\n <span class=\"type\">{{ isCUCM(site) ? 'UCM' : 'Dedicated Instance' }}</span>\r\n </ng-template>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"formGroup.get('userType')?.value === USER_CREATION_TYPES.CUCM\">\r\n <div class=\"template-step-field\">\r\n <!-- <label class=\"template-step-label\">Would you like to use a template for the user creation?</label>\r\n <mat-radio-group [formControl]=\"templateToggleFormControl\">\r\n <mat-radio-button [color]=\"'primary'\" [value]=\"true\">\r\n {{ 'Yes' }}\r\n </mat-radio-button>\r\n <mat-radio-button [color]=\"'primary'\" [value]=\"false\">\r\n {{ 'No' }}\r\n </mat-radio-button>\r\n </mat-radio-group> -->\r\n\r\n <!-- <ng-container *ngIf=\"templateToggleFormControl.value === true\"> -->\r\n <label class=\"template-step-label\">Select user template</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Templates\"\r\n formControlName=\"userTemplateId\">\r\n <mat-select-trigger>\r\n <span matTooltip=\"'A new user will be created based on the selected template, including a Cisco 8851 physical device with a single line configured, without SNR (Single Number Reach) and without voicemail.'\">\r\n {{ defaultTemplateName }}\r\n </span>\r\n </mat-select-trigger>\r\n <mat-option [value]=\"fallbackTemplateId\">\r\n {{ defaultTemplateName }}\r\n </mat-option>\r\n <mat-option *ngFor=\"let template of templatesList$ | async\" [value]=\"template.id\">\r\n {{ template.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <!-- </ng-container> -->\r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}::ng-deep .option-row{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "directive", type:
|
|
855
|
+
UserTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: { customerId: "customerId" }, ngImport: i0, template: "<section class=\"template-step-content\">\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- <div class=\"template-step-field template-step-field--user-type\">\r\n <label class=\"template-step-label\">User type</label>\r\n <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"USER_CREATION_TYPES.CUCM\">\r\n UCM/DI\r\n </mat-radio-button>\r\n <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"USER_CREATION_TYPES.MT\">\r\n MT\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div> -->\r\n\r\n <div class=\"template-step-field\">\r\n <label class=\"template-step-label\">Select site</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Site name\"\r\n formControlName=\"siteId\">\r\n\r\n <mat-select-trigger>\r\n {{ getSelectedSiteName() }}\r\n </mat-select-trigger>\r\n\r\n <mat-option *ngFor=\"let site of sitesList$ | async\" [value]=\"site.id\">\r\n <div class=\"option-row\">\r\n <span class=\"name\">{{ site.name }}</span>\r\n <span *ngIf=\"site.name === 'Berlin' else notBerlinSite\" class=\"type\">{{ 'Multi Tenant' }}</span>\r\n <ng-template #notBerlinSite>\r\n <span class=\"type\">{{ isCUCM(site) ? 'UCM' : 'Dedicated Instance' }}</span>\r\n </ng-template>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"formGroup.get('userType')?.value === USER_CREATION_TYPES.CUCM\">\r\n <div class=\"template-step-field\">\r\n <!-- <label class=\"template-step-label\">Would you like to use a template for the user creation?</label>\r\n <mat-radio-group [formControl]=\"templateToggleFormControl\">\r\n <mat-radio-button [color]=\"'primary'\" [value]=\"true\">\r\n {{ 'Yes' }}\r\n </mat-radio-button>\r\n <mat-radio-button [color]=\"'primary'\" [value]=\"false\">\r\n {{ 'No' }}\r\n </mat-radio-button>\r\n </mat-radio-group> -->\r\n\r\n <!-- <ng-container *ngIf=\"templateToggleFormControl.value === true\"> -->\r\n <label class=\"template-step-label\">Select user template</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Templates\"\r\n formControlName=\"userTemplateId\">\r\n <mat-select-trigger>\r\n <span matTooltip=\"'A new user will be created based on the selected template, including a Cisco 8851 physical device with a single line configured, without SNR (Single Number Reach) and without voicemail.'\">\r\n {{ defaultTemplateName }}\r\n </span>\r\n </mat-select-trigger>\r\n <mat-option [value]=\"fallbackTemplateId\">\r\n {{ defaultTemplateName }}\r\n </mat-option>\r\n <mat-option *ngFor=\"let template of templatesList$ | async\" [value]=\"template.id\">\r\n {{ template.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <!-- </ng-container> -->\r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}::ng-deep .option-row{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i7.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
|
|
856
856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, decorators: [{
|
|
857
857
|
type: Component,
|
|
858
858
|
args: [{ selector: 'tk-user-template-step', template: "<section class=\"template-step-content\">\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- <div class=\"template-step-field template-step-field--user-type\">\r\n <label class=\"template-step-label\">User type</label>\r\n <mat-radio-group class=\"user-type-mat-radio-group\" formControlName=\"userType\">\r\n <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationCucm\" [value]=\"USER_CREATION_TYPES.CUCM\">\r\n UCM/DI\r\n </mat-radio-button>\r\n <mat-radio-button class=\"user-type-mat-radio\" id=\"userCreationMT\" [value]=\"USER_CREATION_TYPES.MT\">\r\n MT\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div> -->\r\n\r\n <div class=\"template-step-field\">\r\n <label class=\"template-step-label\">Select site</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Site name\"\r\n formControlName=\"siteId\">\r\n\r\n <mat-select-trigger>\r\n {{ getSelectedSiteName() }}\r\n </mat-select-trigger>\r\n\r\n <mat-option *ngFor=\"let site of sitesList$ | async\" [value]=\"site.id\">\r\n <div class=\"option-row\">\r\n <span class=\"name\">{{ site.name }}</span>\r\n <span *ngIf=\"site.name === 'Berlin' else notBerlinSite\" class=\"type\">{{ 'Multi Tenant' }}</span>\r\n <ng-template #notBerlinSite>\r\n <span class=\"type\">{{ isCUCM(site) ? 'UCM' : 'Dedicated Instance' }}</span>\r\n </ng-template>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"formGroup.get('userType')?.value === USER_CREATION_TYPES.CUCM\">\r\n <div class=\"template-step-field\">\r\n <!-- <label class=\"template-step-label\">Would you like to use a template for the user creation?</label>\r\n <mat-radio-group [formControl]=\"templateToggleFormControl\">\r\n <mat-radio-button [color]=\"'primary'\" [value]=\"true\">\r\n {{ 'Yes' }}\r\n </mat-radio-button>\r\n <mat-radio-button [color]=\"'primary'\" [value]=\"false\">\r\n {{ 'No' }}\r\n </mat-radio-button>\r\n </mat-radio-group> -->\r\n\r\n <!-- <ng-container *ngIf=\"templateToggleFormControl.value === true\"> -->\r\n <label class=\"template-step-label\">Select user template</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Templates\"\r\n formControlName=\"userTemplateId\">\r\n <mat-select-trigger>\r\n <span matTooltip=\"'A new user will be created based on the selected template, including a Cisco 8851 physical device with a single line configured, without SNR (Single Number Reach) and without voicemail.'\">\r\n {{ defaultTemplateName }}\r\n </span>\r\n </mat-select-trigger>\r\n <mat-option [value]=\"fallbackTemplateId\">\r\n {{ defaultTemplateName }}\r\n </mat-option>\r\n <mat-option *ngFor=\"let template of templatesList$ | async\" [value]=\"template.id\">\r\n {{ template.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <!-- </ng-container> -->\r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-mat-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-top:8px}.user-type-mat-radio{color:#2a2f3b;font-size:14px;font-weight:500}:host ::ng-deep .user-type-mat-radio .mat-radio-label{gap:10px}:host ::ng-deep .user-type-mat-radio .mat-radio-outer-circle{border-color:#8a93a3;border-width:2px}:host ::ng-deep .user-type-mat-radio .mat-radio-inner-circle{background-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-outer-circle{border-color:#1170cf}:host ::ng-deep .user-type-mat-radio.mat-radio-checked .mat-radio-ripple .mat-ripple-element{background-color:#1176ce26!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__outer-circle{border-color:#8a93a3!important;border-width:2px!important}:host ::ng-deep .user-type-mat-radio .mdc-radio__inner-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#1170cf!important}:host ::ng-deep .user-type-mat-radio.mat-mdc-radio-checked .mdc-radio__background:before{background-color:#1176ce1f!important}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}::ng-deep .option-row{display:flex;justify-content:space-between;align-items:center;width:100%}\n"] }]
|
|
@@ -860,8 +860,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
860
860
|
type: Input
|
|
861
861
|
}] } });
|
|
862
862
|
|
|
863
|
-
|
|
863
|
+
const environment = {
|
|
864
|
+
production: false,
|
|
865
|
+
// apiUrl: 'http://localhost:4200',
|
|
866
|
+
apiUrl: 'http://192.168.0.191:8080',
|
|
867
|
+
notificationsLifetime: 30000,
|
|
868
|
+
longNotificationsLifetime: 45000,
|
|
869
|
+
cashCleanTimer: 900000,
|
|
870
|
+
cashArrayLength: 10000,
|
|
871
|
+
matomoUrl: 'http://192.168.0.136/matomo/',
|
|
872
|
+
};
|
|
873
|
+
|
|
874
|
+
const TTL_DEFAULT = environment.notificationsLifetime;
|
|
875
|
+
const TTL_LONG_DEFAULT = environment.longNotificationsLifetime;
|
|
876
|
+
var NotificationType;
|
|
877
|
+
(function (NotificationType) {
|
|
878
|
+
NotificationType["info"] = "info";
|
|
879
|
+
NotificationType["error"] = "error";
|
|
880
|
+
NotificationType["success"] = "success";
|
|
881
|
+
NotificationType["warning"] = "warning";
|
|
882
|
+
})(NotificationType || (NotificationType = {}));
|
|
883
|
+
class Notification {
|
|
884
|
+
constructor(data) {
|
|
885
|
+
this.ttl = TTL_DEFAULT;
|
|
886
|
+
Object.assign(this, data || {});
|
|
887
|
+
if (this.ttl === undefined) {
|
|
888
|
+
this.ttl = this.message && this.message.length && this.message.length < 80 ? TTL_DEFAULT : TTL_LONG_DEFAULT;
|
|
889
|
+
}
|
|
890
|
+
}
|
|
891
|
+
isInfo() {
|
|
892
|
+
return this.type === NotificationType.info;
|
|
893
|
+
}
|
|
894
|
+
isError() {
|
|
895
|
+
return this.type === NotificationType.error;
|
|
896
|
+
}
|
|
897
|
+
isSuccess() {
|
|
898
|
+
return this.type === NotificationType.success;
|
|
899
|
+
}
|
|
900
|
+
isWarning() {
|
|
901
|
+
return this.type === NotificationType.warning;
|
|
902
|
+
}
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
const SUCCESS_TIME = 5000;
|
|
906
|
+
const INACTIVE_SESSION_MESSAGE = 'Your session was lost due to inactivity. Please login again';
|
|
907
|
+
const INACTIVE_SESSION = 'SESSION_INACTIVE';
|
|
908
|
+
class NotificationService {
|
|
864
909
|
constructor() {
|
|
910
|
+
this.listChange = new Subject();
|
|
911
|
+
this.max = 0;
|
|
912
|
+
this.list = [];
|
|
913
|
+
}
|
|
914
|
+
error(message, ttl) {
|
|
915
|
+
this.notify('error', message, ttl);
|
|
916
|
+
}
|
|
917
|
+
success(message, ttl) {
|
|
918
|
+
this.notify('success', message, (!ttl) ? SUCCESS_TIME : ttl);
|
|
919
|
+
}
|
|
920
|
+
warning(message, ttl) {
|
|
921
|
+
this.notify('warning', message, ttl);
|
|
922
|
+
}
|
|
923
|
+
info(message, ttl) {
|
|
924
|
+
this.notify('info', message, ttl);
|
|
925
|
+
}
|
|
926
|
+
notify(type, message, ttl) {
|
|
927
|
+
const found = this.list.find((n) => n.message === message);
|
|
928
|
+
if (found) {
|
|
929
|
+
this.remove(found);
|
|
930
|
+
}
|
|
931
|
+
const notification = new Notification({
|
|
932
|
+
id: ++this.max,
|
|
933
|
+
type, message, ttl
|
|
934
|
+
});
|
|
935
|
+
if (notification.ttl > 0) {
|
|
936
|
+
notification.timerId = setTimeout(() => this.remove(notification, true), notification.ttl);
|
|
937
|
+
}
|
|
938
|
+
this.list.push(notification);
|
|
939
|
+
this.listChange.next(this.list);
|
|
940
|
+
}
|
|
941
|
+
remove(notification, auto) {
|
|
942
|
+
if (!auto && notification.timerId) {
|
|
943
|
+
// clear timeout in case of manual remove
|
|
944
|
+
clearInterval(notification.timerId);
|
|
945
|
+
}
|
|
946
|
+
this.list = this.list.filter(n => n.id !== notification.id);
|
|
947
|
+
this.listChange.next(this.list);
|
|
948
|
+
}
|
|
949
|
+
removeInactiveSessionError() {
|
|
950
|
+
if (!this.list || !this.list.length) {
|
|
951
|
+
return;
|
|
952
|
+
}
|
|
953
|
+
this.list = this.list.filter(n => n.message !== INACTIVE_SESSION_MESSAGE && n.message !== INACTIVE_SESSION);
|
|
954
|
+
this.listChange.next(this.list);
|
|
955
|
+
}
|
|
956
|
+
}
|
|
957
|
+
NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
958
|
+
NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService });
|
|
959
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, decorators: [{
|
|
960
|
+
type: Injectable
|
|
961
|
+
}], ctorParameters: function () { return []; } });
|
|
962
|
+
|
|
963
|
+
class UserCreationWizardComponent {
|
|
964
|
+
constructor(notificationService) {
|
|
965
|
+
this.notificationService = notificationService;
|
|
865
966
|
this.apiService = inject(APIService);
|
|
866
967
|
this.title = 'Create User';
|
|
867
968
|
this.cancel = new EventEmitter();
|
|
@@ -885,6 +986,7 @@ class UserCreationWizardComponent {
|
|
|
885
986
|
this.submitTimerId = window.setTimeout(() => {
|
|
886
987
|
this.isSubmitting = false;
|
|
887
988
|
this.submitTimerId = null;
|
|
989
|
+
this.notificationService.success('User created successfully!');
|
|
888
990
|
this.submit.emit();
|
|
889
991
|
}, delayMs);
|
|
890
992
|
}
|
|
@@ -895,12 +997,12 @@ class UserCreationWizardComponent {
|
|
|
895
997
|
}
|
|
896
998
|
}
|
|
897
999
|
}
|
|
898
|
-
UserCreationWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
899
|
-
UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", host: "host", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, ngImport: i0, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n <header class=\"move-user-header\">\n <div class=\"move-user-header__title\">{{ title }}</div>\n <div class=\"move-user-header__close\">\n <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n </div>\n </header>\n\n <div id=\"user-creation-stepper\">\n <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n <mat-step>\n <div class=\"step-title\">Step 1: User creation with template</div>\n <ng-template matStepLabel>User creation</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-template-step [customerId]=\"customerId\"></tk-user-template-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 2 : User details</div>\n <ng-template matStepLabel>User details</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-details-step></tk-user-details-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 3: Review</div>\n <ng-template matStepLabel>Review</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-overview-step></tk-user-overview-step>\n </div>\n </mat-step>\n </mat-stepper>\n\n <div class=\"wizard-actions\">\n <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n <ng-container *ngSwitchCase=\"0\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n Cancel\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"1\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"2\">\n <button\n mat-button\n class=\"uc-btn uc-btn-primary\"\n type=\"button\"\n [disabled]=\"isSubmitting\"\n (click)=\"onSubmit()\"\n >\n <span class=\"uc-btn__inline-content\">\n <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n </span>\n </button>\n <button\n mat-button\n class=\"uc-btn uc-btn-secondary\"\n type=\"button\"\n [disabled]=\"isSubmitting\"\n (click)=\"stepper.previous()\"\n >\n Previous\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: ["customerId"] }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step" }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1000
|
+
UserCreationWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1001
|
+
UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", host: "host", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, ngImport: i0, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n <header class=\"move-user-header\">\n <div class=\"move-user-header__title\">{{ title }}</div>\n <div class=\"move-user-header__close\">\n <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n </div>\n </header>\n\n <div id=\"user-creation-stepper\">\n <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n <mat-step>\n <div class=\"step-title\">Step 1: User creation with template</div>\n <ng-template matStepLabel>User creation</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-template-step [customerId]=\"customerId\"></tk-user-template-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 2 : User details</div>\n <ng-template matStepLabel>User details</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-details-step></tk-user-details-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 3: Review</div>\n <ng-template matStepLabel>Review</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-overview-step></tk-user-overview-step>\n </div>\n </mat-step>\n </mat-stepper>\n\n <div class=\"wizard-actions\">\n <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n <ng-container *ngSwitchCase=\"0\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n Cancel\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"1\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"2\">\n <button\n mat-button\n class=\"uc-btn uc-btn-primary\"\n type=\"button\"\n [disabled]=\"isSubmitting\"\n (click)=\"onSubmit()\"\n >\n <span class=\"uc-btn__inline-content\">\n <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n </span>\n </button>\n <button\n mat-button\n class=\"uc-btn uc-btn-secondary\"\n type=\"button\"\n [disabled]=\"isSubmitting\"\n (click)=\"stepper.previous()\"\n >\n Previous\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step", inputs: ["customerId"] }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step" }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }], encapsulation: i0.ViewEncapsulation.None });
|
|
900
1002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, decorators: [{
|
|
901
1003
|
type: Component,
|
|
902
1004
|
args: [{ selector: 'tk-user-creation-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"isSubmitting\">\n <header class=\"move-user-header\">\n <div class=\"move-user-header__title\">{{ title }}</div>\n <div class=\"move-user-header__close\">\n <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n </div>\n </header>\n\n <div id=\"user-creation-stepper\">\n <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n <mat-step>\n <div class=\"step-title\">Step 1: User creation with template</div>\n <ng-template matStepLabel>User creation</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-template-step [customerId]=\"customerId\"></tk-user-template-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 2 : User details</div>\n <ng-template matStepLabel>User details</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-details-step></tk-user-details-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 3: Review</div>\n <ng-template matStepLabel>Review</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-overview-step></tk-user-overview-step>\n </div>\n </mat-step>\n </mat-stepper>\n\n <div class=\"wizard-actions\">\n <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n <ng-container *ngSwitchCase=\"0\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n Cancel\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"1\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"2\">\n <button\n mat-button\n class=\"uc-btn uc-btn-primary\"\n type=\"button\"\n [disabled]=\"isSubmitting\"\n (click)=\"onSubmit()\"\n >\n <span class=\"uc-btn__inline-content\">\n <span class=\"uc-btn__spinner\" *ngIf=\"isSubmitting\" aria-hidden=\"true\"></span>\n <span>{{ isSubmitting ? 'Creating...' : 'Create' }}</span>\n </span>\n </button>\n <button\n mat-button\n class=\"uc-btn uc-btn-secondary\"\n type=\"button\"\n [disabled]=\"isSubmitting\"\n (click)=\"stepper.previous()\"\n >\n Previous\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"isSubmitting\" aria-hidden=\"true\"></div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"] }]
|
|
903
|
-
}], propDecorators: { title: [{
|
|
1005
|
+
}], ctorParameters: function () { return [{ type: NotificationService }]; }, propDecorators: { title: [{
|
|
904
1006
|
type: Input
|
|
905
1007
|
}], host: [{
|
|
906
1008
|
type: Input
|
|
@@ -914,11 +1016,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
914
1016
|
type: Output
|
|
915
1017
|
}] } });
|
|
916
1018
|
|
|
1019
|
+
// import { NotificationsComponent } from "./shared/components/notification/notification.component";
|
|
917
1020
|
class UserCreationModule {
|
|
918
1021
|
}
|
|
919
1022
|
UserCreationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
920
1023
|
UserCreationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, declarations: [UserCreationWizardComponent,
|
|
921
1024
|
UserTemplateStepComponent,
|
|
1025
|
+
// NotificationsComponent,
|
|
922
1026
|
UserDetailsStepComponent,
|
|
923
1027
|
UserOverviewStepComponent], imports: [CommonModule,
|
|
924
1028
|
SharedModule,
|
|
@@ -931,6 +1035,7 @@ UserCreationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
|
|
|
931
1035
|
UserCreationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationModule, providers: [
|
|
932
1036
|
UserCreationApiService,
|
|
933
1037
|
UserCreationWizardService,
|
|
1038
|
+
NotificationService,
|
|
934
1039
|
], imports: [CommonModule,
|
|
935
1040
|
SharedModule,
|
|
936
1041
|
MaterialModule,
|
|
@@ -945,6 +1050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
945
1050
|
declarations: [
|
|
946
1051
|
UserCreationWizardComponent,
|
|
947
1052
|
UserTemplateStepComponent,
|
|
1053
|
+
// NotificationsComponent,
|
|
948
1054
|
UserDetailsStepComponent,
|
|
949
1055
|
UserOverviewStepComponent
|
|
950
1056
|
],
|
|
@@ -964,6 +1070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
964
1070
|
providers: [
|
|
965
1071
|
UserCreationApiService,
|
|
966
1072
|
UserCreationWizardService,
|
|
1073
|
+
NotificationService,
|
|
967
1074
|
]
|
|
968
1075
|
}]
|
|
969
1076
|
}] });
|