@tuki-io/tuki-widgets 0.0.139 → 0.0.141
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/di2mt/widgets/user-upgrade/user-upgrade-data-table/user-upgrade-data-table.component.mjs +2 -2
- package/esm2020/user-manage/src/user-manage-widget.component.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs +2 -2
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs +2 -2
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -351,10 +351,10 @@ export class UserUpgradeDataTableComponent {
|
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
353
|
UserUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
354
|
-
UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid black;border-radius:.5rem;color:#000}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: i6.TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
|
|
354
|
+
UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#fff!important;border:2px solid black!important;border-radius:1rem!important;color:#000!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: i6.TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
|
|
355
355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, decorators: [{
|
|
356
356
|
type: Component,
|
|
357
|
-
args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid black;border-radius:.5rem;color:#000}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
|
|
357
|
+
args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#fff!important;border:2px solid black!important;border-radius:1rem!important;color:#000!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
|
|
358
358
|
}], propDecorators: { token: [{
|
|
359
359
|
type: Input
|
|
360
360
|
}], customerId: [{
|
|
@@ -191,10 +191,10 @@ export class UserManageWidgetComponent {
|
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
UserManageWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, deps: [{ token: i1.UserService }, { token: i2.APIService }], target: i0.ɵɵFactoryTarget.Component });
|
|
194
|
-
UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n [webexUUID]=\"user.webexUUID\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input :host ::ng-deep .mat-form-field,:host .input-holder__input :host ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input :host ::ng-deep .mat-form-field:hover,:host .input-holder__input :host ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input :host ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input :host ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host :ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-tab-group{font-family:Inter,sans-serif}:host ::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}:host ::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.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: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i10.AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: i11.UserInfoComponent, selector: "app-user-info", inputs: ["name", "active", "email", "position", "webexUUID"] }, { kind: "component", type: i12.LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: ["siteId", "form", "standalone", "placeholder", "controlName", "optionsToken", "appearance", "errorCode", "errorText", "default", "id"], outputs: ["changeField"] }, { kind: "component", type: i13.UserCallingComponent, selector: "app-user-calling", inputs: ["siteId", "userId"], outputs: ["onExtensionChange"] }, { kind: "component", type: i14.DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }] });
|
|
194
|
+
UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n [webexUUID]=\"user.webexUUID\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.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: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i10.AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: i11.UserInfoComponent, selector: "app-user-info", inputs: ["name", "active", "email", "position", "webexUUID"] }, { kind: "component", type: i12.LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: ["siteId", "form", "standalone", "placeholder", "controlName", "optionsToken", "appearance", "errorCode", "errorText", "default", "id"], outputs: ["changeField"] }, { kind: "component", type: i13.UserCallingComponent, selector: "app-user-calling", inputs: ["siteId", "userId"], outputs: ["onExtensionChange"] }, { kind: "component", type: i14.DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }] });
|
|
195
195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, decorators: [{
|
|
196
196
|
type: Component,
|
|
197
|
-
args: [{ selector: 'app-user-manage-widget', template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n [webexUUID]=\"user.webexUUID\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input :host ::ng-deep .mat-form-field,:host .input-holder__input :host ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input :host ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input :host ::ng-deep .mat-form-field:hover,:host .input-holder__input :host ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input :host ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input :host ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host :ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-tab-group{font-family:Inter,sans-serif}:host ::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}:host ::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"] }]
|
|
197
|
+
args: [{ selector: 'app-user-manage-widget', template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n [webexUUID]=\"user.webexUUID\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"] }]
|
|
198
198
|
}], ctorParameters: function () { return [{ type: i1.UserService }, { type: i2.APIService }]; }, propDecorators: { onSave: [{
|
|
199
199
|
type: Output
|
|
200
200
|
}], onChange: [{
|