@tuki-io/tuki-widgets 0.0.161 → 0.0.162
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 +2 -2
- package/esm2020/user-creation/src/widgets/user-creation-wizard/components/user-template-step/user-template-step.component.mjs +6 -7
- package/esm2020/user-creation/src/widgets/user-creation-wizard/user-creation-wizard.component.mjs +6 -2
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs +14 -10
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs +14 -10
- 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/user-creation-wizard.component.d.ts +3 -1
|
@@ -2,18 +2,18 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Injectable, inject, Component, EventEmitter, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i4$1 from '@angular/material/button';
|
|
6
6
|
import { MatButtonModule } from '@angular/material/button';
|
|
7
7
|
import * as i3$2 from '@angular/material/stepper';
|
|
8
8
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i3 from '@angular/material/form-field';
|
|
10
10
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i4 from '@angular/material/select';
|
|
12
12
|
import { MatSelectModule } from '@angular/material/select';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i5 from '@angular/material/core';
|
|
14
14
|
import * as i3$1 from '@angular/material/table';
|
|
15
15
|
import { MatTableModule } from '@angular/material/table';
|
|
16
|
-
import * as i6
|
|
16
|
+
import * as i6 from '@angular/material/input';
|
|
17
17
|
import { MatInputModule } from '@angular/material/input';
|
|
18
18
|
import * as i9 from '@angular/material/expansion';
|
|
19
19
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
@@ -216,10 +216,10 @@ class UserTemplateStepComponent {
|
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
UserTemplateStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
219
|
-
UserTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserTemplateStepComponent, selector: "tk-user-template-step", ngImport: i0, template: "<section class=\"template-step-content\">\r\n <div class=\"template-step-field template-step-field--user-type\">\r\n <label class=\"template-step-label\">User type</label>\r\n <div class=\"user-type-
|
|
219
|
+
UserTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserTemplateStepComponent, selector: "tk-user-template-step", ngImport: i0, template: "<section class=\"template-step-content\">\r\n <div class=\"template-step-field template-step-field--user-type\">\r\n <label class=\"template-step-label\">User type</label>\r\n <div class=\"user-type-radio-group\" role=\"radiogroup\" aria-label=\"User type\">\r\n <label class=\"user-type-radio-option\" *ngFor=\"let type of userCreationWizardService.userCreationTypes\">\r\n <input\r\n class=\"user-type-radio-option__input\"\r\n type=\"radio\"\r\n name=\"user-creation-type\"\r\n [value]=\"type\"\r\n [checked]=\"type === userCreationWizardService.selectedUserCreationType\"\r\n (change)=\"userCreationWizardService.setSelectedUserCreationType(type)\"\r\n />\r\n <span class=\"user-type-radio-option__control\" aria-hidden=\"true\"></span>\r\n <span class=\"user-type-radio-option__label\">{{ type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"template-step-field\">\r\n <label class=\"template-step-label\">Select site</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Site name\"\r\n [value]=\"userCreationWizardService.selectedSite\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n {{ site }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"template-step-field\">\r\n <label class=\"template-step-label\">Select user template</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Templates\"\r\n [value]=\"userCreationWizardService.selectedTemplate\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n {{ template }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-radio-group{display:flex;flex-direction:column;gap:10px}.user-type-radio-option{display:inline-flex;align-items:center;gap:10px;width:-moz-fit-content;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none;margin:.5rem 0 0 1rem}.user-type-radio-option__input{position:absolute;opacity:0;width:0;height:0}.user-type-radio-option__control{width:18px;height:18px;border:2px solid #8a93a3;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,box-shadow .12s ease}.user-type-radio-option__control:after{content:\"\";width:10px;height:10px;border-radius:50%;background:transparent;transition:background-color .12s ease}.user-type-radio-option__label{color:#2a2f3b;font-size:14px;font-weight:500}.user-type-radio-option__input:checked+.user-type-radio-option__control{border-color:#1170cf;box-shadow:0 0 0 3px #1176ce1f}.user-type-radio-option__input:checked+.user-type-radio-option__control:after{background:rgb(17,112,207)}.user-type-radio-option__input:focus-visible+.user-type-radio-option__control{outline:2px solid rgba(17,118,206,.45);outline-offset:2px}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
|
|
220
220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserTemplateStepComponent, decorators: [{
|
|
221
221
|
type: Component,
|
|
222
|
-
args: [{ selector: 'tk-user-template-step', template: "<section class=\"template-step-content\">\r\n <div class=\"template-step-field template-step-field--user-type\">\r\n <label class=\"template-step-label\">User type</label>\r\n <div class=\"user-type-
|
|
222
|
+
args: [{ selector: 'tk-user-template-step', template: "<section class=\"template-step-content\">\r\n <div class=\"template-step-field template-step-field--user-type\">\r\n <label class=\"template-step-label\">User type</label>\r\n <div class=\"user-type-radio-group\" role=\"radiogroup\" aria-label=\"User type\">\r\n <label class=\"user-type-radio-option\" *ngFor=\"let type of userCreationWizardService.userCreationTypes\">\r\n <input\r\n class=\"user-type-radio-option__input\"\r\n type=\"radio\"\r\n name=\"user-creation-type\"\r\n [value]=\"type\"\r\n [checked]=\"type === userCreationWizardService.selectedUserCreationType\"\r\n (change)=\"userCreationWizardService.setSelectedUserCreationType(type)\"\r\n />\r\n <span class=\"user-type-radio-option__control\" aria-hidden=\"true\"></span>\r\n <span class=\"user-type-radio-option__label\">{{ type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"template-step-field\">\r\n <label class=\"template-step-label\">Select site</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Site name\"\r\n [value]=\"userCreationWizardService.selectedSite\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n {{ site }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"template-step-field\">\r\n <label class=\"template-step-label\">Select user template</label>\r\n <mat-form-field class=\"template-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Templates\"\r\n [value]=\"userCreationWizardService.selectedTemplate\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n {{ template }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n</section>\r\n", styles: [".template-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.template-step-field{display:flex;flex-direction:column;gap:10px}.template-step-field--user-type{margin-bottom:6px}.template-step-label{font-size:14px;font-weight:600;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.template-step-select{width:100%;max-width:333px}.user-type-radio-group{display:flex;flex-direction:column;gap:10px}.user-type-radio-option{display:inline-flex;align-items:center;gap:10px;width:-moz-fit-content;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none;margin:.5rem 0 0 1rem}.user-type-radio-option__input{position:absolute;opacity:0;width:0;height:0}.user-type-radio-option__control{width:18px;height:18px;border:2px solid #8a93a3;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,box-shadow .12s ease}.user-type-radio-option__control:after{content:\"\";width:10px;height:10px;border-radius:50%;background:transparent;transition:background-color .12s ease}.user-type-radio-option__label{color:#2a2f3b;font-size:14px;font-weight:500}.user-type-radio-option__input:checked+.user-type-radio-option__control{border-color:#1170cf;box-shadow:0 0 0 3px #1176ce1f}.user-type-radio-option__input:checked+.user-type-radio-option__control:after{background:rgb(17,112,207)}.user-type-radio-option__input:focus-visible+.user-type-radio-option__control{outline:2px solid rgba(17,118,206,.45);outline-offset:2px}:host ::ng-deep .template-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .template-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .template-step-select .mat-form-field-outline,:host ::ng-deep .template-step-select .mat-form-field-outline-start,:host ::ng-deep .template-step-select .mat-form-field-outline-end,:host ::ng-deep .template-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .template-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .template-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}\n"] }]
|
|
223
223
|
}], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
|
|
224
224
|
|
|
225
225
|
class UserDetailsStepComponent {
|
|
@@ -228,10 +228,10 @@ class UserDetailsStepComponent {
|
|
|
228
228
|
}
|
|
229
229
|
}
|
|
230
230
|
UserDetailsStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, deps: [{ token: UserCreationWizardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
231
|
-
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:.8px solid rgba(0,0,0,.95);border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #333333;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.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: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.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" }] });
|
|
231
|
+
UserDetailsStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserDetailsStepComponent, selector: "tk-user-details-step", ngImport: i0, template: "<section class=\"details-step-content\">\r\n <div class=\"details-step-dropdowns\">\r\n <div class=\"details-step-field\">\r\n <label class=\"details-step-label\">Select site</label>\r\n <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Site name\"\r\n [value]=\"userCreationWizardService.selectedSite\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedSite($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let site of userCreationWizardService.siteOptions\" [value]=\"site\">\r\n {{ site }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-step-field\">\r\n <label class=\"details-step-label\">Select user template</label>\r\n <mat-form-field class=\"details-step-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Templates\"\r\n [value]=\"userCreationWizardService.selectedTemplate\"\r\n (selectionChange)=\"userCreationWizardService.setSelectedTemplate($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let template of userCreationWizardService.templateOptions\" [value]=\"template\">\r\n {{ template }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-divider\"></div>\r\n\r\n <div class=\"details-step-sections\">\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">User details</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"details-step-section__part\">\r\n <div class=\"details-inline-fields\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User ID</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User ID\"\r\n [value]=\"userCreationWizardService.userDetailsForm.userId\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('userId', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">First Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"First Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.firstName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('firstName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Last Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Last Name\"\r\n [value]=\"userCreationWizardService.userDetailsForm.lastName\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('lastName', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Email</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Email\"\r\n [value]=\"userCreationWizardService.userDetailsForm.email\"\r\n (input)=\"userCreationWizardService.setUserDetailsField('email', $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">User Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"User Template\"\r\n [value]=\"userCreationWizardService.selectedTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"details-step-section__part\">\r\n <mat-accordion class=\"details-user-accordion\">\r\n <mat-expansion-panel togglePosition=\"before\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"details-user-accordion__content\">\r\n <table mat-table [dataSource]=\"userCreationWizardService.ldapUsers\" class=\"details-ldap-table\">\r\n <ng-container matColumnDef=\"userId\">\r\n <th mat-header-cell *matHeaderCellDef>User ID</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.userId }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"firstName\">\r\n <th mat-header-cell *matHeaderCellDef>First Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.firstName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"lastName\">\r\n <th mat-header-cell *matHeaderCellDef>Last Name</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.lastName }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef>Email</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.email }}</td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"add\">\r\n <th mat-header-cell *matHeaderCellDef>Add</th>\r\n <td mat-cell *matCellDef>\r\n <button mat-button class=\"details-ldap-table__add-btn\" type=\"button\">Add user</button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"userCreationWizardService.ldapTableColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: userCreationWizardService.ldapTableColumns;\"></tr>\r\n </table>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Lines</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"line-route-list\">\r\n <div class=\"line-route-row\" *ngFor=\"let lineSelection of userCreationWizardService.lineSelections; let idx = index\">\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select line\"\r\n [value]=\"lineSelection.lineNumber\"\r\n (selectionChange)=\"userCreationWizardService.setLineSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let line of userCreationWizardService.lineOptions\" [value]=\"line.number\">\r\n {{ line.number }} - {{ line.did }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"line-route-field\">\r\n <mat-form-field class=\"details-step-select line-route-select\" appearance=\"outline\">\r\n <mat-select\r\n placeholder=\"Select route partition\"\r\n [value]=\"lineSelection.routePartitionName\"\r\n (selectionChange)=\"userCreationWizardService.setRoutePartitionSelection(idx, $event.value)\"\r\n >\r\n <mat-option *ngFor=\"let partition of userCreationWizardService.routePartitionOptions\" [value]=\"partition\">\r\n {{ partition }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"details-step-section\">\r\n <h3 class=\"details-step-section__title\">Devices</h3>\r\n <div class=\"details-step-section__content\">\r\n <div class=\"devices-rows\">\r\n <div class=\"details-inline-fields details-inline-fields--four\" *ngFor=\"let _row of userCreationWizardService.deviceRows; let idx = index\">\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Device type</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Device type\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].deviceType || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Protocol</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Protocol\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].protocol || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Button Template</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Button Template\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].buttonTemplate || ''\"\r\n [disabled]=\"true\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"details-inline-field\">\r\n <label class=\"details-inline-field__label\">Name</label>\r\n <mat-form-field class=\"details-step-input\" appearance=\"outline\">\r\n <input\r\n matInput\r\n placeholder=\"Name\"\r\n [value]=\"userCreationWizardService.deviceEntries[idx].name || ''\"\r\n (input)=\"userCreationWizardService.setDeviceName(idx, $any($event.target).value)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</section>\r\n", styles: [".details-step-content{display:flex;flex-direction:column;gap:0}.details-step-dropdowns{display:flex;flex-direction:column;gap:1rem}.details-step-field{display:flex;flex-direction:column;gap:8px}.details-step-label{font-size:16px;font-weight:400;line-height:100%;letter-spacing:0;color:#333}.details-step-select{width:333px}.details-step-divider{border-top:1px solid #d9d9d9;margin-top:24px}.details-step-sections{display:flex;flex-direction:column}.details-step-section{display:flex;flex-direction:column;gap:0;padding:24px 0}.details-step-section+.details-step-section{border-top:1px solid #d9d9d9}.details-step-section__title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:100%;letter-spacing:0;color:#333}.details-step-section__content{margin-top:24px}.details-step-section__part+.details-step-section__part{margin-top:24px}.details-user-accordion{width:100%}.details-user-accordion__content{padding:12px 0 0}.details-ldap-table{width:100%}.details-ldap-table__add-btn{min-width:0;padding:0;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#0d56aa}:host ::ng-deep .details-ldap-table .mat-header-cell{font-family:Inter,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:#737480;height:30px;padding:7px 8px}:host ::ng-deep .details-ldap-table .mat-cell{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#333;height:40px;padding:8px}.details-inline-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.details-inline-fields--four{grid-template-columns:repeat(4,minmax(0,1fr))}.devices-rows{display:flex;flex-direction:column;gap:24px}.details-inline-field{display:flex;flex-direction:column;gap:4px}.details-inline-field__label{color:#c0c2ce;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0}.details-step-input{width:100%}.line-route-list{display:flex;flex-direction:column;gap:16px}.line-route-row{display:flex;gap:16px}.line-route-field{display:flex;flex-direction:column;gap:0}.line-route-select{width:185px}:host ::ng-deep .details-step-select .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-input .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .details-step-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #767676;border-radius:4px;padding:10px 8px}:host ::ng-deep .details-step-select .mat-form-field-outline,:host ::ng-deep .details-step-select .mat-form-field-outline-start,:host ::ng-deep .details-step-select .mat-form-field-outline-end,:host ::ng-deep .details-step-select .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-input .mat-form-field-outline,:host ::ng-deep .details-step-input .mat-form-field-outline-start,:host ::ng-deep .details-step-input .mat-form-field-outline-end,:host ::ng-deep .details-step-input .mat-form-field-outline-gap{display:none}:host ::ng-deep .details-step-select .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-input .mat-form-field-infix{width:100%;border-top:0;padding:0}:host ::ng-deep .details-step-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}:host ::ng-deep .details-step-input .mat-input-element{height:100%;margin:0}:host ::ng-deep .details-step-input.mat-form-field-disabled .mat-form-field-flex{background-color:#f5f6fa;border-color:#b8beca;opacity:.55;cursor:not-allowed}:host ::ng-deep .details-step-input .mat-input-element:disabled{color:#7f8694;-webkit-text-fill-color:#7f8694;cursor:not-allowed}:host ::ng-deep .details-user-accordion .mat-expansion-panel{border:0;border-radius:0!important;background:transparent;box-shadow:none!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header{padding:0 0 0 8px;min-height:32px;height:32px}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header-title{margin:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;color:#333}:host ::ng-deep .details-user-accordion .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-content{display:flex;align-items:center}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator{display:block!important;opacity:1!important;color:#333!important;align-self:center;margin:0 8px 0 0!important}:host ::ng-deep .details-user-accordion .mat-expansion-panel-header .mat-expansion-indicator:after{color:#333!important;border-color:#333!important;position:relative;top:-4px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
232
232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDetailsStepComponent, decorators: [{
|
|
233
233
|
type: Component,
|
|
234
|
-
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:.8px solid rgba(0,0,0,.95);border-radius:6px;padding:0 12px}:host ::ng-deep .details-step-input .mat-form-field-flex{align-items:center;height:36px;border:1px solid #333333;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"] }]
|
|
234
|
+
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"] }]
|
|
235
235
|
}], ctorParameters: function () { return [{ type: UserCreationWizardService }]; } });
|
|
236
236
|
|
|
237
237
|
class UserOverviewStepComponent {
|
|
@@ -263,12 +263,16 @@ class UserCreationWizardComponent {
|
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
265
|
UserCreationWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
266
|
-
UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title" }, outputs: { cancel: "cancel", submit: "submit" }, ngImport: i0, template: "<div class=\"move-user-stepper-container\">\n <header class=\"move-user-header\">\n <div class=\"move-user-header__title\">{{ title }}</div>\n <div class=\"move-user-header__close\">\n <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n </div>\n </header>\n\n <div id=\"user-creation-stepper\">\n <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n <mat-step>\n <div class=\"step-title\">Step 1: User creation with template</div>\n <ng-template matStepLabel>User creation</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-template-step></tk-user-template-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 2 : User details</div>\n <ng-template matStepLabel>User details</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-details-step></tk-user-details-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 3: Review</div>\n <ng-template matStepLabel>Review</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-overview-step></tk-user-overview-step>\n </div>\n </mat-step>\n </mat-stepper>\n\n <div class=\"wizard-actions\">\n <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n <ng-container *ngSwitchCase=\"0\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n Cancel\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"1\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"2\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"onSubmit()\">\n Create\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type:
|
|
266
|
+
UserCreationWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCreationWizardComponent, selector: "tk-user-creation-wizard", inputs: { title: "title", token: "token", customerId: "customerId" }, outputs: { cancel: "cancel", submit: "submit" }, ngImport: i0, template: "<div class=\"move-user-stepper-container\">\n <header class=\"move-user-header\">\n <div class=\"move-user-header__title\">{{ title }}</div>\n <div class=\"move-user-header__close\">\n <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n </div>\n </header>\n\n <div id=\"user-creation-stepper\">\n <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n <mat-step>\n <div class=\"step-title\">Step 1: User creation with template</div>\n <ng-template matStepLabel>User creation</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-template-step></tk-user-template-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 2 : User details</div>\n <ng-template matStepLabel>User details</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-details-step></tk-user-details-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 3: Review</div>\n <ng-template matStepLabel>Review</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-overview-step></tk-user-overview-step>\n </div>\n </mat-step>\n </mat-stepper>\n\n <div class=\"wizard-actions\">\n <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n <ng-container *ngSwitchCase=\"0\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n Cancel\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"1\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"2\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"onSubmit()\">\n Create\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: UserTemplateStepComponent, selector: "tk-user-template-step" }, { kind: "component", type: UserDetailsStepComponent, selector: "tk-user-details-step" }, { kind: "component", type: UserOverviewStepComponent, selector: "tk-user-overview-step" }], encapsulation: i0.ViewEncapsulation.None });
|
|
267
267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCreationWizardComponent, decorators: [{
|
|
268
268
|
type: Component,
|
|
269
269
|
args: [{ selector: 'tk-user-creation-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"move-user-stepper-container\">\n <header class=\"move-user-header\">\n <div class=\"move-user-header__title\">{{ title }}</div>\n <div class=\"move-user-header__close\">\n <span class=\"app-icon user-creation-close-icon\" (click)=\"onCancel()\"></span>\n </div>\n </header>\n\n <div id=\"user-creation-stepper\">\n <mat-stepper [linear]=\"false\" labelPosition=\"bottom\" #stepper>\n <mat-step>\n <div class=\"step-title\">Step 1: User creation with template</div>\n <ng-template matStepLabel>User creation</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-template-step></tk-user-template-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 2 : User details</div>\n <ng-template matStepLabel>User details</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-details-step></tk-user-details-step>\n </div>\n </mat-step>\n\n <mat-step>\n <div class=\"step-title\">Step 3: Review</div>\n <ng-template matStepLabel>Review</ng-template>\n\n <div class=\"move-user-tab-content-box\">\n <tk-user-overview-step></tk-user-overview-step>\n </div>\n </mat-step>\n </mat-stepper>\n\n <div class=\"wizard-actions\">\n <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n <ng-container *ngSwitchCase=\"0\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n Cancel\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"1\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"stepper.next()\">\n Next\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"2\">\n <button mat-button class=\"uc-btn uc-btn-primary\" type=\"button\" (click)=\"onSubmit()\">\n Create\n </button>\n <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"stepper.previous()\">\n Previous\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:center}.user-creation-close-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");background-size:20px 20px}#user-creation-stepper{display:flex;flex-direction:column;width:100%}#user-creation-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent}#user-creation-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#user-creation-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#user-creation-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#user-creation-stepper .mat-step-icon-state-number{background-color:#fff}#user-creation-stepper .mat-step-icon-state-edit,#user-creation-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#user-creation-stepper .mat-step-icon-content{display:none}#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#user-creation-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#user-creation-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#user-creation-stepper .mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header:after,#user-creation-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#user-creation-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#user-creation-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#user-creation-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #C3C1C1;border-radius:8px;box-sizing:border-box;padding:25px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}\n"] }]
|
|
270
270
|
}], propDecorators: { title: [{
|
|
271
271
|
type: Input
|
|
272
|
+
}], token: [{
|
|
273
|
+
type: Input
|
|
274
|
+
}], customerId: [{
|
|
275
|
+
type: Input
|
|
272
276
|
}], cancel: [{
|
|
273
277
|
type: Output
|
|
274
278
|
}], submit: [{
|