@tuki-io/tuki-widgets 0.0.163 → 0.0.164
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 +3 -3
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs +2 -2
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -577,10 +577,10 @@ class UserDetailsStepComponent {
|
|
|
577
577
|
}
|
|
578
578
|
}
|
|
579
579
|
UserDetailsStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
580
|
-
UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-dropdowns\">\r\n <div class=\"details-step-field\">\r\n <label class=\"details-step-label\">Select site</label>\r\n <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Site name\"\r\n [value]=\"userCreationWizardService.selectedSite\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n {{ site }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-step-field\">\r\n <label class=\"details-step-label\">Select user template</label>\r\n <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Templates\"\r\n [value]=\"userCreationWizardService.selectedTemplate\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n {{ template }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef>\r\n <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns;\"></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
580
|
+
UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef>\r\n <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns;\"></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
581
581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, decorators: [{
|
|
582
582
|
type: Component,
|
|
583
|
-
args: [{ selector: 'tk-user-details-step', template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-dropdowns\">\r\n <div class=\"details-step-field\">\r\n <label class=\"details-step-label\">Select site</label>\r\n <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Site name\"\r\n [value]=\"userCreationWizardService.selectedSite\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n {{ site }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-step-field\">\r\n <label class=\"details-step-label\">Select user template</label>\r\n <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Templates\"\r\n [value]=\"userCreationWizardService.selectedTemplate\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n {{ template }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef>\r\n <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns;\"></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"] }]
|
|
583
|
+
args: [{ selector: 'tk-user-details-step', template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef>\r\n <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns;\"></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-sections>.details-step-section:first-child{padding-top:0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"] }]
|
|
584
584
|
}], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
|
|
585
585
|
|
|
586
586
|
class UserOverviewStepComponent {
|