@tuki-io/tuki-widgets 0.0.173 → 0.0.174
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/user-creation/src/widgets/user-creation-wizard/components/user-details-step/user-details-step.component.mjs +9 -3
- package/esm2020/user-creation/src/widgets/user-creation-wizard/components/user-overview-step/user-overview-step.component.mjs +3 -3
- package/esm2020/user-creation/src/widgets/user-creation-wizard/user-creation-wizard.service.mjs +41 -5
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs +51 -8
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs +50 -8
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/package.json +1 -1
- package/user-creation/src/widgets/user-creation-wizard/components/user-details-step/user-details-step.component.d.ts +3 -1
- package/user-creation/src/widgets/user-creation-wizard/user-creation-wizard.service.d.ts +4 -0
|
@@ -415,8 +415,22 @@ class UserCreationWizardService {
|
|
|
415
415
|
this.selectedSite = null;
|
|
416
416
|
this.selectedTemplate = null;
|
|
417
417
|
this.selectedUserCreationType = 'CUCM';
|
|
418
|
+
this.addedLdapUserIds = new Set();
|
|
418
419
|
this.loadPlaceholderData();
|
|
419
420
|
}
|
|
421
|
+
addLdapUser(row) {
|
|
422
|
+
this.userDetailsForm = {
|
|
423
|
+
userId: row.userId,
|
|
424
|
+
firstName: row.firstName,
|
|
425
|
+
lastName: row.lastName,
|
|
426
|
+
email: row.email
|
|
427
|
+
};
|
|
428
|
+
this.addedLdapUserIds.add(row.userId);
|
|
429
|
+
this.rebuildOverviewUsers();
|
|
430
|
+
}
|
|
431
|
+
isLdapUserAdded(row) {
|
|
432
|
+
return this.addedLdapUserIds.has(row.userId);
|
|
433
|
+
}
|
|
420
434
|
setSelectedSite(site) {
|
|
421
435
|
this.selectedSite = site;
|
|
422
436
|
}
|
|
@@ -530,12 +544,30 @@ class UserCreationWizardService {
|
|
|
530
544
|
if (!this.deviceEntries[index]) {
|
|
531
545
|
return;
|
|
532
546
|
}
|
|
547
|
+
const deviceType = this.deviceEntries[index].deviceType || '';
|
|
548
|
+
const normalizedName = deviceType.includes('8851')
|
|
549
|
+
? name.replace(/^SEP\s*/i, '')
|
|
550
|
+
: name;
|
|
533
551
|
this.deviceEntries[index] = {
|
|
534
552
|
...this.deviceEntries[index],
|
|
535
|
-
name
|
|
553
|
+
name: normalizedName
|
|
536
554
|
};
|
|
537
555
|
this.rebuildOverviewDevices();
|
|
538
556
|
}
|
|
557
|
+
getDeviceDisplayName(index) {
|
|
558
|
+
const entry = this.deviceEntries[index];
|
|
559
|
+
if (!entry) {
|
|
560
|
+
return '';
|
|
561
|
+
}
|
|
562
|
+
if (entry.deviceType?.includes('8851')) {
|
|
563
|
+
return `SEP ${entry.name || ''}`;
|
|
564
|
+
}
|
|
565
|
+
if (index === 1) {
|
|
566
|
+
const lineNumber = this.lineSelections[0]?.lineNumber;
|
|
567
|
+
return lineNumber ? `CSF${lineNumber}` : 'CSF[DN]';
|
|
568
|
+
}
|
|
569
|
+
return entry.name || '';
|
|
570
|
+
}
|
|
539
571
|
// Placeholder bootstrap until backend APIs are connected.
|
|
540
572
|
loadPlaceholderData() {
|
|
541
573
|
this.siteOptions = ['Site 1', 'Site 2', 'Site 3'];
|
|
@@ -627,9 +659,13 @@ class UserCreationWizardService {
|
|
|
627
659
|
rebuildOverviewDevices() {
|
|
628
660
|
const selectedLineNumbers = this.overviewLines.map(line => line.number).join(', ');
|
|
629
661
|
this.overviewDevices = this.deviceEntries
|
|
630
|
-
.
|
|
631
|
-
|
|
632
|
-
|
|
662
|
+
.map((device, index) => ({
|
|
663
|
+
device,
|
|
664
|
+
displayName: this.getDeviceDisplayName(index)
|
|
665
|
+
}))
|
|
666
|
+
.filter(({ device, displayName }) => displayName.trim().length > 0 || device.deviceType.trim().length > 0)
|
|
667
|
+
.map(({ device, displayName }) => ({
|
|
668
|
+
name: displayName,
|
|
633
669
|
deviceType: device.deviceType,
|
|
634
670
|
lines: selectedLineNumbers,
|
|
635
671
|
description: `${device.protocol} / ${device.buttonTemplate}`
|
|
@@ -676,12 +712,18 @@ class UserDetailsStepComponent {
|
|
|
676
712
|
constructor(userCreationWizardService) {
|
|
677
713
|
this.userCreationWizardService = userCreationWizardService;
|
|
678
714
|
}
|
|
715
|
+
onAddUser(row) {
|
|
716
|
+
this.userCreationWizardService.addLdapUser(row);
|
|
717
|
+
}
|
|
718
|
+
getDeviceName(index) {
|
|
719
|
+
return this.userCreationWizardService.getDeviceDisplayName(index);
|
|
720
|
+
}
|
|
679
721
|
}
|
|
680
722
|
UserDetailsStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
681
|
-
UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef>\r\n <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns;\"></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-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" }] });
|
|
723
|
+
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" }] });
|
|
682
724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, decorators: [{
|
|
683
725
|
type: Component,
|
|
684
|
-
args: [{ selector: 'tk-user-details-step', template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef>\r\n <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns;\"></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-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"] }]
|
|
726
|
+
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"] }]
|
|
685
727
|
}], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
|
|
686
728
|
|
|
687
729
|
class UserOverviewStepComponent {
|
|
@@ -693,10 +735,10 @@ class UserOverviewStepComponent {
|
|
|
693
735
|
}
|
|
694
736
|
}
|
|
695
737
|
UserOverviewStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserOverviewStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
696
|
-
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\"
|
|
738
|
+
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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
697
739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserOverviewStepComponent, decorators: [{
|
|
698
740
|
type: Component,
|
|
699
|
-
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\"
|
|
741
|
+
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"] }]
|
|
700
742
|
}], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
|
|
701
743
|
|
|
702
744
|
class UserTemplateStepComponent {
|