npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.128 → 0.0.129 - Mend

@tuki-io/tuki-widgets 0.0.128 → 0.0.129

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.

Files changed (49) hide show

package/esm2020/user-manage/src/user-manage-widget.component.mjs CHANGED Viewed

@@ -191,10 +191,10 @@ export class UserManageWidgetComponent {
     }
 }
 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 });
-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 : ''\"></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\">\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"] }, { 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"] }] });
+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 : ''\"></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\">\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}app-loader{transform:translateY(350px)}\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"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, decorators: [{
             type: Component,
-            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 : ''\"></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\">\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"] }]
+            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 : ''\"></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\">\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}app-loader{transform:translateY(350px)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.UserService }, { type: i2.APIService }]; }, propDecorators: { onSave: [{
                 type: Output
             }], onChange: [{

package/esm2020/user-manage/src/user-manage.module.mjs CHANGED Viewed

@@ -99,4 +99,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     exports: [UserManageWidgetComponent]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1tYW5hZ2UubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHVraS93aWRnZXRzL3VzZXItbWFuYWdlL3NyYy91c2VyLW1hbmFnZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNwRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDM0UsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQy9FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDbkQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDdEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDaEYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDckUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDOUUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDOUUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDdkUsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0scURBQXFELENBQUM7QUFDakcsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDM0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3BELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUM3RSxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSx3RUFBd0UsQ0FBQztBQUN2SCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUMxRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwrQ0FBK0MsQ0FBQzs7QUFzQ25GLE1BQU0sT0FBTyxnQkFBZ0I7OzhHQUFoQixnQkFBZ0I7K0dBQWhCLGdCQUFnQixpQkFsQ3pCLGtCQUFrQjtRQUNsQixpQkFBaUI7UUFDakIsc0JBQXNCO1FBQ3RCLG1CQUFtQjtRQUNuQiwwQkFBMEI7UUFDMUIseUJBQXlCO1FBQ3pCLG9CQUFvQjtRQUNwQiw2QkFBNkI7UUFDN0IsbUJBQW1CO1FBQ25CLGtCQUFrQixhQUdsQixZQUFZO1FBQ1osYUFBYTtRQUNiLHVCQUF1QjtRQUN2QixXQUFXO1FBQ1gsbUJBQW1CO1FBQ25CLGdCQUFnQjtRQUNoQixjQUFjLGFBYUoseUJBQXlCOytHQUcxQixnQkFBZ0IsYUFkaEI7UUFDVCxVQUFVO1FBQ1YsV0FBVztRQUNYLG1CQUFtQjtRQUNuQixrQkFBa0I7UUFDbEIsdUJBQXVCO1FBQ3ZCLG1CQUFtQjtRQUNuQixVQUFVO1FBQ1YsV0FBVztRQUNYLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFFBQVEsRUFBRSxlQUFlLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBQztLQUNyRSxZQWxCQyxZQUFZO1FBQ1osYUFBYTtRQUNiLHVCQUF1QjtRQUN2QixXQUFXO1FBQ1gsbUJBQW1CO1FBQ25CLGdCQUFnQjtRQUNoQixjQUFjOzRGQWdCTCxnQkFBZ0I7a0JBcEM1QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixrQkFBa0I7d0JBQ2xCLGlCQUFpQjt3QkFDakIsc0JBQXNCO3dCQUN0QixtQkFBbUI7d0JBQ25CLDBCQUEwQjt3QkFDMUIseUJBQXlCO3dCQUN6QixvQkFBb0I7d0JBQ3BCLDZCQUE2Qjt3QkFDN0IsbUJBQW1CO3dCQUNuQixrQkFBa0I7cUJBQ25CO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGFBQWE7d0JBQ2IsdUJBQXVCO3dCQUN2QixXQUFXO3dCQUNYLG1CQUFtQjt3QkFDbkIsZ0JBQWdCO3dCQUNoQixjQUFjO3FCQUNmO29CQUNELFNBQVMsRUFBRTt3QkFDVCxVQUFVO3dCQUNWLFdBQVc7d0JBQ1gsbUJBQW1CO3dCQUNuQixrQkFBa0I7d0JBQ2xCLHVCQUF1Qjt3QkFDdkIsbUJBQW1CO3dCQUNuQixVQUFVO3dCQUNWLFdBQVc7d0JBQ1gsRUFBQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsUUFBUSxFQUFFLGVBQWUsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDO3FCQUNyRTtvQkFDQyxPQUFPLEVBQUUsQ0FBQyx5QkFBeUIsQ0FBQztpQkFFdkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBCcm93c2VyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XHJcbmltcG9ydCB7IEZvcm1zTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBBUElTZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9hcGkuc2VydmljZSc7XHJcbmltcG9ydCB7IEFwcExvYWRlckNvbXBvbmVudCB9IGZyb20gJy4vdXRpbHMvYXBwLWxvYWRlci9hcHAtbG9hZGVyJztcclxuaW1wb3J0IHsgVXNlclNlcnZpY2UgfSBmcm9tICcuL3NlcnZpY2VzL3VzZXIuc2VydmljZSc7XHJcbmltcG9ydCB7IEhUVFBfSU5URVJDRVBUT1JTLCBIdHRwQ2xpZW50TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xyXG5pbXBvcnQgeyBBdXRoSW50ZXJjZXB0b3IgfSBmcm9tICcuL2ludGVyc2VwdG9ycy9hdXRoLmludGVyY2VwdG9yJztcclxuaW1wb3J0IHsgQnJvd3NlckFuaW1hdGlvbnNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyL2FuaW1hdGlvbnMnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBVc2VySW5mb0NvbXBvbmVudCB9IGZyb20gJy4vdXNlci1pbmZvL3VzZXItaW5mby5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBNYXRlcmlhbE1vZHVsZSB9IGZyb20gJy4vbWF0ZXJpYWwubW9kdWxlJztcclxuaW1wb3J0IHsgTm90aWZpY2F0aW9uU2VydmljZSB9IGZyb20gJy4vc2VydmljZXMvbm90aWZpY2F0aW9uLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBOb3RpZmljYXRpb25zQ29tcG9uZW50IH0gZnJvbSAnLi9ub3RpZmljYXRpb25zL25vdGlmaWNhdGlvbi5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBVc2Vyc1NlYXJjaFNlcnZpY2UgfSBmcm9tICcuL3NlcnZpY2VzL3VzZXJzLXNlYXJjaC5zZXJ2aWNlJztcclxuaW1wb3J0IHsgUGFnaW5hdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vdXRpbHMvcGFnaW5hdGlvbi9wYWdpbmF0aW9uLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFJlbW92ZUt5bkZyb21JQk1TZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9yZW1vdmVLeW5Gcm9tSUJNLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBTaXRlU2V0dGluZ3NTZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9zaXRlLXNldHRpbmdzLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBMYXp5TG9hZGluZ1NlbGVjdENvbXBvbmVudCB9IGZyb20gJy4vbGF6eS1sb2FkaW5nLXNlbGVjdC9sYXp5LWxvYWRpbmctc2VsZWN0LmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFVzZXJNYW5hZ2VXaWRnZXRDb21wb25lbnQgfSBmcm9tICcuL3VzZXItbWFuYWdlLXdpZGdldC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBEbnNTZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9kbnMuc2VydmljZSc7XHJcbmltcG9ydCB7IExpbmVTZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9saW5lLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBVc2VyQ2FsbGluZ0NvbXBvbmVudCB9IGZyb20gJy4vdXNlci1jYWxsaW5nL3VzZXItY2FsbGluZy5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBVc2VyQ2FsbGluZ0V4dGVuc2lvbkNvbXBvbmVudCB9IGZyb20gJy4vdXNlci1jYWxsaW5nL3VzZXItY2FsbGluZy1leHRlbnNpb24vdXNlci1jYWxsaW5nLWV4dGVuc2lvbi5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBEZXZpY2VMaXN0Q29tcG9uZW50IH0gZnJvbSAnLi9kZXZpY2UtbGlzdC9kZXZpY2UtbGlzdC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBEZXZpY2VSb3dDb21wb25lbnQgfSBmcm9tICcuL2RldmljZS1saXN0L2RldmljZS1yb3cvZGV2aWNlLXJvdy5jb21wb25lbnQnO1xyXG5cclxuQE5nTW9kdWxlKHtcclxuICBkZWNsYXJhdGlvbnM6IFtcclxuICAgIEFwcExvYWRlckNvbXBvbmVudCxcclxuICAgIFVzZXJJbmZvQ29tcG9uZW50LFxyXG4gICAgTm90aWZpY2F0aW9uc0NvbXBvbmVudCxcclxuICAgIFBhZ2luYXRpb25Db21wb25lbnQsXHJcbiAgICBMYXp5TG9hZGluZ1NlbGVjdENvbXBvbmVudCxcclxuICAgIFVzZXJNYW5hZ2VXaWRnZXRDb21wb25lbnQsXHJcbiAgICBVc2VyQ2FsbGluZ0NvbXBvbmVudCxcclxuICAgIFVzZXJDYWxsaW5nRXh0ZW5zaW9uQ29tcG9uZW50LFxyXG4gICAgRGV2aWNlTGlzdENvbXBvbmVudCxcclxuICAgIERldmljZVJvd0NvbXBvbmVudCxcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEJyb3dzZXJNb2R1bGUsXHJcbiAgICBCcm93c2VyQW5pbWF0aW9uc01vZHVsZSxcclxuICAgIEZvcm1zTW9kdWxlLFxyXG4gICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcclxuICAgIEh0dHBDbGllbnRNb2R1bGUsXHJcbiAgICBNYXRlcmlhbE1vZHVsZSxcclxuICBdLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAgQVBJU2VydmljZSxcclxuICAgIFVzZXJTZXJ2aWNlLFxyXG4gICAgTm90aWZpY2F0aW9uU2VydmljZSxcclxuICAgIFVzZXJzU2VhcmNoU2VydmljZSxcclxuICAgIFJlbW92ZUt5bkZyb21JQk1TZXJ2aWNlLFxyXG4gICAgU2l0ZVNldHRpbmdzU2VydmljZSxcclxuICAgIERuc1NlcnZpY2UsXHJcbiAgICBMaW5lU2VydmljZSxcclxuICAgIHtwcm92aWRlOiBIVFRQX0lOVEVSQ0VQVE9SUywgdXNlQ2xhc3M6IEF1dGhJbnRlcmNlcHRvciwgbXVsdGk6IHRydWV9XHJcbiAgXSxcclxuICAgIGV4cG9ydHM6IFtVc2VyTWFuYWdlV2lkZ2V0Q29tcG9uZW50XVxyXG5cclxufSlcclxuZXhwb3J0IGNsYXNzIFVzZXJNYW5hZ2VNb2R1bGUge1xyXG59XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1tYW5hZ2UubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHVraS93aWRnZXRzL3VzZXItbWFuYWdlL3NyYy91c2VyLW1hbmFnZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNwRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDM0UsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQy9FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDbkQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDdEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDaEYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDckUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDOUUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDOUUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDdkUsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0scURBQXFELENBQUM7QUFDakcsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDM0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3BELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUM3RSxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSx3RUFBd0UsQ0FBQztBQUN2SCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUMxRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwrQ0FBK0MsQ0FBQzs7QUFzQ25GLE1BQU0sT0FBTyxnQkFBZ0I7OzhHQUFoQixnQkFBZ0I7K0dBQWhCLGdCQUFnQixpQkFsQ3pCLGtCQUFrQjtRQUNsQixpQkFBaUI7UUFDakIsc0JBQXNCO1FBQ3RCLG1CQUFtQjtRQUNuQiwwQkFBMEI7UUFDMUIseUJBQXlCO1FBQ3pCLG9CQUFvQjtRQUNwQiw2QkFBNkI7UUFDN0IsbUJBQW1CO1FBQ25CLGtCQUFrQixhQUdsQixZQUFZO1FBQ1osYUFBYTtRQUNiLHVCQUF1QjtRQUN2QixXQUFXO1FBQ1gsbUJBQW1CO1FBQ25CLGdCQUFnQjtRQUNoQixjQUFjLGFBYUoseUJBQXlCOytHQUcxQixnQkFBZ0IsYUFkaEI7UUFDVCxVQUFVO1FBQ1YsV0FBVztRQUNYLG1CQUFtQjtRQUNuQixrQkFBa0I7UUFDbEIsdUJBQXVCO1FBQ3ZCLG1CQUFtQjtRQUNuQixVQUFVO1FBQ1YsV0FBVztRQUNYLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFFBQVEsRUFBRSxlQUFlLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBQztLQUNyRSxZQWxCQyxZQUFZO1FBQ1osYUFBYTtRQUNiLHVCQUF1QjtRQUN2QixXQUFXO1FBQ1gsbUJBQW1CO1FBQ25CLGdCQUFnQjtRQUNoQixjQUFjOzRGQWdCTCxnQkFBZ0I7a0JBcEM1QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixrQkFBa0I7d0JBQ2xCLGlCQUFpQjt3QkFDakIsc0JBQXNCO3dCQUN0QixtQkFBbUI7d0JBQ25CLDBCQUEwQjt3QkFDMUIseUJBQXlCO3dCQUN6QixvQkFBb0I7d0JBQ3BCLDZCQUE2Qjt3QkFDN0IsbUJBQW1CO3dCQUNuQixrQkFBa0I7cUJBQ25CO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGFBQWE7d0JBQ2IsdUJBQXVCO3dCQUN2QixXQUFXO3dCQUNYLG1CQUFtQjt3QkFDbkIsZ0JBQWdCO3dCQUNoQixjQUFjO3FCQUNmO29CQUNELFNBQVMsRUFBRTt3QkFDVCxVQUFVO3dCQUNWLFdBQVc7d0JBQ1gsbUJBQW1CO3dCQUNuQixrQkFBa0I7d0JBQ2xCLHVCQUF1Qjt3QkFDdkIsbUJBQW1CO3dCQUNuQixVQUFVO3dCQUNWLFdBQVc7d0JBQ1gsRUFBQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsUUFBUSxFQUFFLGVBQWUsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDO3FCQUNyRTtvQkFDQyxPQUFPLEVBQUUsQ0FBQyx5QkFBeUIsQ0FBQztpQkFFdkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnJvd3Nlck1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBBUElTZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9hcGkuc2VydmljZSc7XG5pbXBvcnQgeyBBcHBMb2FkZXJDb21wb25lbnQgfSBmcm9tICcuL3V0aWxzL2FwcC1sb2FkZXIvYXBwLWxvYWRlcic7XG5pbXBvcnQgeyBVc2VyU2VydmljZSB9IGZyb20gJy4vc2VydmljZXMvdXNlci5zZXJ2aWNlJztcbmltcG9ydCB7IEhUVFBfSU5URVJDRVBUT1JTLCBIdHRwQ2xpZW50TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xuaW1wb3J0IHsgQXV0aEludGVyY2VwdG9yIH0gZnJvbSAnLi9pbnRlcnNlcHRvcnMvYXV0aC5pbnRlcmNlcHRvcic7XG5pbXBvcnQgeyBCcm93c2VyQW5pbWF0aW9uc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgVXNlckluZm9Db21wb25lbnQgfSBmcm9tICcuL3VzZXItaW5mby91c2VyLWluZm8uY29tcG9uZW50JztcbmltcG9ydCB7IE1hdGVyaWFsTW9kdWxlIH0gZnJvbSAnLi9tYXRlcmlhbC5tb2R1bGUnO1xuaW1wb3J0IHsgTm90aWZpY2F0aW9uU2VydmljZSB9IGZyb20gJy4vc2VydmljZXMvbm90aWZpY2F0aW9uLnNlcnZpY2UnO1xuaW1wb3J0IHsgTm90aWZpY2F0aW9uc0NvbXBvbmVudCB9IGZyb20gJy4vbm90aWZpY2F0aW9ucy9ub3RpZmljYXRpb24uY29tcG9uZW50JztcbmltcG9ydCB7IFVzZXJzU2VhcmNoU2VydmljZSB9IGZyb20gJy4vc2VydmljZXMvdXNlcnMtc2VhcmNoLnNlcnZpY2UnO1xuaW1wb3J0IHsgUGFnaW5hdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vdXRpbHMvcGFnaW5hdGlvbi9wYWdpbmF0aW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBSZW1vdmVLeW5Gcm9tSUJNU2VydmljZSB9IGZyb20gJy4vc2VydmljZXMvcmVtb3ZlS3luRnJvbUlCTS5zZXJ2aWNlJztcbmltcG9ydCB7IFNpdGVTZXR0aW5nc1NlcnZpY2UgfSBmcm9tICcuL3NlcnZpY2VzL3NpdGUtc2V0dGluZ3Muc2VydmljZSc7XG5pbXBvcnQgeyBMYXp5TG9hZGluZ1NlbGVjdENvbXBvbmVudCB9IGZyb20gJy4vbGF6eS1sb2FkaW5nLXNlbGVjdC9sYXp5LWxvYWRpbmctc2VsZWN0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBVc2VyTWFuYWdlV2lkZ2V0Q29tcG9uZW50IH0gZnJvbSAnLi91c2VyLW1hbmFnZS13aWRnZXQuY29tcG9uZW50JztcbmltcG9ydCB7IERuc1NlcnZpY2UgfSBmcm9tICcuL3NlcnZpY2VzL2Rucy5zZXJ2aWNlJztcbmltcG9ydCB7IExpbmVTZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9saW5lLnNlcnZpY2UnO1xuaW1wb3J0IHsgVXNlckNhbGxpbmdDb21wb25lbnQgfSBmcm9tICcuL3VzZXItY2FsbGluZy91c2VyLWNhbGxpbmcuY29tcG9uZW50JztcbmltcG9ydCB7IFVzZXJDYWxsaW5nRXh0ZW5zaW9uQ29tcG9uZW50IH0gZnJvbSAnLi91c2VyLWNhbGxpbmcvdXNlci1jYWxsaW5nLWV4dGVuc2lvbi91c2VyLWNhbGxpbmctZXh0ZW5zaW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEZXZpY2VMaXN0Q29tcG9uZW50IH0gZnJvbSAnLi9kZXZpY2UtbGlzdC9kZXZpY2UtbGlzdC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGV2aWNlUm93Q29tcG9uZW50IH0gZnJvbSAnLi9kZXZpY2UtbGlzdC9kZXZpY2Utcm93L2RldmljZS1yb3cuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgQXBwTG9hZGVyQ29tcG9uZW50LFxuICAgIFVzZXJJbmZvQ29tcG9uZW50LFxuICAgIE5vdGlmaWNhdGlvbnNDb21wb25lbnQsXG4gICAgUGFnaW5hdGlvbkNvbXBvbmVudCxcbiAgICBMYXp5TG9hZGluZ1NlbGVjdENvbXBvbmVudCxcbiAgICBVc2VyTWFuYWdlV2lkZ2V0Q29tcG9uZW50LFxuICAgIFVzZXJDYWxsaW5nQ29tcG9uZW50LFxuICAgIFVzZXJDYWxsaW5nRXh0ZW5zaW9uQ29tcG9uZW50LFxuICAgIERldmljZUxpc3RDb21wb25lbnQsXG4gICAgRGV2aWNlUm93Q29tcG9uZW50LFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEJyb3dzZXJNb2R1bGUsXG4gICAgQnJvd3NlckFuaW1hdGlvbnNNb2R1bGUsXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICBIdHRwQ2xpZW50TW9kdWxlLFxuICAgIE1hdGVyaWFsTW9kdWxlLFxuICBdLFxuICBwcm92aWRlcnM6IFtcbiAgICBBUElTZXJ2aWNlLFxuICAgIFVzZXJTZXJ2aWNlLFxuICAgIE5vdGlmaWNhdGlvblNlcnZpY2UsXG4gICAgVXNlcnNTZWFyY2hTZXJ2aWNlLFxuICAgIFJlbW92ZUt5bkZyb21JQk1TZXJ2aWNlLFxuICAgIFNpdGVTZXR0aW5nc1NlcnZpY2UsXG4gICAgRG5zU2VydmljZSxcbiAgICBMaW5lU2VydmljZSxcbiAgICB7cHJvdmlkZTogSFRUUF9JTlRFUkNFUFRPUlMsIHVzZUNsYXNzOiBBdXRoSW50ZXJjZXB0b3IsIG11bHRpOiB0cnVlfVxuICBdLFxuICAgIGV4cG9ydHM6IFtVc2VyTWFuYWdlV2lkZ2V0Q29tcG9uZW50XVxuXG59KVxuZXhwb3J0IGNsYXNzIFVzZXJNYW5hZ2VNb2R1bGUge1xufVxuIl19

package/esm2020/user-manage/src/utils/app-loader/app-loader.mjs CHANGED Viewed

@@ -6,9 +6,9 @@ export class AppLoaderComponent {
     }
 }
 AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"], dependencies: [{ kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
+AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"], dependencies: [{ kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"] }]
+            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"] }]
         }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWxvYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3R1a2kvd2lkZ2V0cy91c2VyLW1hbmFnZS9zcmMvdXRpbHMvYXBwLWxvYWRlci9hcHAtbG9hZGVyLnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHVraS93aWRnZXRzL3VzZXItbWFuYWdlL3NyYy91dGlscy9hcHAtbG9hZGVyL2FwcC1sb2FkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUTdELE1BQU0sT0FBTyxrQkFBa0I7SUFDN0I7SUFDQSxDQUFDOztnSEFGVSxrQkFBa0I7b0dBQWxCLGtCQUFrQixrRENSL0Isd01BT0E7NEZEQ2Esa0JBQWtCO2tCQU45QixTQUFTOytCQUNFLFlBQVksaUJBR1AsaUJBQWlCLENBQUMsSUFBSSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLWxvYWRlcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2FwcC1sb2FkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2FwcC1sb2FkZXIuY29tcG9uZW50LnNjc3MnXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQXBwTG9hZGVyQ29tcG9uZW50IHtcclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJvdmVybGF5XCI+XHJcbiAgPG1hdC1wcm9ncmVzcy1zcGlubmVyXHJcbiAgICBjbGFzcz1cInBhZ2Utc3Bpbm5lclwiXHJcbiAgICBtb2RlPVwiaW5kZXRlcm1pbmF0ZVwiXHJcbiAgICBbZGlhbWV0ZXJdPVwiNzBcIlxyXG4gICAgc3Ryb2tlV2lkdGg9XCIzXCI+PC9tYXQtcHJvZ3Jlc3Mtc3Bpbm5lcj5cclxuPC9kaXY+XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWxvYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3R1a2kvd2lkZ2V0cy91c2VyLW1hbmFnZS9zcmMvdXRpbHMvYXBwLWxvYWRlci9hcHAtbG9hZGVyLnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHVraS93aWRnZXRzL3VzZXItbWFuYWdlL3NyYy91dGlscy9hcHAtbG9hZGVyL2FwcC1sb2FkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUTdELE1BQU0sT0FBTyxrQkFBa0I7SUFDN0I7SUFDQSxDQUFDOztnSEFGVSxrQkFBa0I7b0dBQWxCLGtCQUFrQixrRENSL0IsMExBT0E7NEZEQ2Esa0JBQWtCO2tCQU45QixTQUFTOytCQUNFLFlBQVksaUJBR1AsaUJBQWlCLENBQUMsSUFBSSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLWxvYWRlcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2FwcC1sb2FkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2FwcC1sb2FkZXIuY29tcG9uZW50LnNjc3MnXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQXBwTG9hZGVyQ29tcG9uZW50IHtcclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJvdmVybGF5XCI+XG4gIDxtYXQtcHJvZ3Jlc3Mtc3Bpbm5lclxuICAgIGNsYXNzPVwicGFnZS1zcGlubmVyXCJcbiAgICBtb2RlPVwiaW5kZXRlcm1pbmF0ZVwiXG4gICAgW2RpYW1ldGVyXT1cIjcwXCJcbiAgICBzdHJva2VXaWR0aD1cIjNcIj48L21hdC1wcm9ncmVzcy1zcGlubmVyPlxuPC9kaXY+XG4iXX0=

package/esm2020/users-list/src/utils/app-loader/app-loader.mjs CHANGED Viewed

@@ -6,9 +6,9 @@ export class AppLoaderComponent {
     }
 }
 AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
+AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
+            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
         }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWxvYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3R1a2kvd2lkZ2V0cy91c2Vycy1saXN0L3NyYy91dGlscy9hcHAtbG9hZGVyL2FwcC1sb2FkZXIudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90dWtpL3dpZGdldHMvdXNlcnMtbGlzdC9zcmMvdXRpbHMvYXBwLWxvYWRlci9hcHAtbG9hZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVE3RCxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO0lBQ0EsQ0FBQzs7Z0hBRlUsa0JBQWtCO29HQUFsQixrQkFBa0Isa0RDUi9CLHdNQU9BOzRGRENhLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDRSxZQUFZLGlCQUdQLGlCQUFpQixDQUFDLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1sb2FkZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9hcHAtbG9hZGVyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9hcHAtbG9hZGVyLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEFwcExvYWRlckNvbXBvbmVudCB7XHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwib3ZlcmxheVwiPlxyXG4gIDxtYXQtcHJvZ3Jlc3Mtc3Bpbm5lclxyXG4gICAgY2xhc3M9XCJwYWdlLXNwaW5uZXJcIlxyXG4gICAgbW9kZT1cImluZGV0ZXJtaW5hdGVcIlxyXG4gICAgW2RpYW1ldGVyXT1cIjcwXCJcclxuICAgIHN0cm9rZVdpZHRoPVwiM1wiPjwvbWF0LXByb2dyZXNzLXNwaW5uZXI+XHJcbjwvZGl2PlxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWxvYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3R1a2kvd2lkZ2V0cy91c2Vycy1saXN0L3NyYy91dGlscy9hcHAtbG9hZGVyL2FwcC1sb2FkZXIudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90dWtpL3dpZGdldHMvdXNlcnMtbGlzdC9zcmMvdXRpbHMvYXBwLWxvYWRlci9hcHAtbG9hZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVE3RCxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO0lBQ0EsQ0FBQzs7Z0hBRlUsa0JBQWtCO29HQUFsQixrQkFBa0Isa0RDUi9CLDBMQU9BOzRGRENhLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDRSxZQUFZLGlCQUdQLGlCQUFpQixDQUFDLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1sb2FkZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9hcHAtbG9hZGVyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9hcHAtbG9hZGVyLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEFwcExvYWRlckNvbXBvbmVudCB7XHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwib3ZlcmxheVwiPlxuICA8bWF0LXByb2dyZXNzLXNwaW5uZXJcbiAgICBjbGFzcz1cInBhZ2Utc3Bpbm5lclwiXG4gICAgbW9kZT1cImluZGV0ZXJtaW5hdGVcIlxuICAgIFtkaWFtZXRlcl09XCI3MFwiXG4gICAgc3Ryb2tlV2lkdGg9XCIzXCI+PC9tYXQtcHJvZ3Jlc3Mtc3Bpbm5lcj5cbjwvZGl2PlxuIl19

package/fesm2015/tuki-io-tuki-widgets-contact-center.mjs CHANGED Viewed

@@ -318,10 +318,10 @@ class LicencesRequirementComponent {
     }
 }
 LicencesRequirementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LicencesRequirementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LicencesRequirementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LicencesRequirementComponent, selector: "cc-licenses-requirement", inputs: { customerId: "customerId", token: "token" }, usesOnChanges: true, ngImport: i0, template: "<tk-card title=\"Licenses requirement\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div\r\n      class=\"widget-body\"\r\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\r\n    >\r\n      <div class=\"left-section\">\r\n        <mat-select\r\n          [(value)]=\"selectedSummaryIndex\"\r\n          (selectionChange)=\"onFilterChange($event.value)\"\r\n          class=\"filter-select\"\r\n        >\r\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\r\n            {{ option }}\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n        <div class=\"chart-section\">\r\n          <div class=\"chart-wrapper\">\r\n            <apx-chart\r\n              [series]=\"viewModel.chartOptions.series\"\r\n              [chart]=\"viewModel.chartOptions.chart\"\r\n              [labels]=\"viewModel.chartOptions.labels\"\r\n              [colors]=\"viewModel.chartOptions.colors\"\r\n              [legend]=\"viewModel.chartOptions.legend\"\r\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\r\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\r\n            >\r\n            </apx-chart>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\r\n              <span\r\n                class=\"legend-marker\"\r\n                [style.backgroundColor]=\"item.color\"\r\n              ></span>\r\n              <span class=\"legend-label\">{{ item.label }}</span>\r\n              <span class=\"legend-value\">{{ item.count | number }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"divider\" aria-hidden=\"true\"></div>\r\n\r\n      <div class=\"table-section\">\r\n        <div class=\"table-header\">\r\n          <span>License</span>\r\n          <span>Required</span>\r\n        </div>\r\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\r\n          <span>{{ row.label }}</span>\r\n          <span>{{ row.value | number }}</span>\r\n        </div>\r\n        <div class=\"table-row total-row\">\r\n          <span>Total</span>\r\n          <span>{{ viewModel.totalRequired | number }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #widgetState>\r\n      <div class=\"state-message\" *ngIf=\"loading\">\r\n        Loading license requirements\u2026\r\n      </div>\r\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\r\n        Unable to load license requirements.\r\n      </div>\r\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\r\n        No license data available.\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</tk-card>\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&display=swap\";:host{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+LicencesRequirementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LicencesRequirementComponent, selector: "cc-licenses-requirement", inputs: { customerId: "customerId", token: "token" }, usesOnChanges: true, ngImport: i0, template: "<tk-card title=\"Licenses requirement\">\n  <ng-container ngProjectAs=\"card-content\">\n    <div\n      class=\"widget-body\"\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\n    >\n      <div class=\"left-section\">\n        <mat-select\n          [(value)]=\"selectedSummaryIndex\"\n          (selectionChange)=\"onFilterChange($event.value)\"\n          class=\"filter-select\"\n        >\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\n            {{ option }}\n          </mat-option>\n        </mat-select>\n\n        <div class=\"chart-section\">\n          <div class=\"chart-wrapper\">\n            <apx-chart\n              [series]=\"viewModel.chartOptions.series\"\n              [chart]=\"viewModel.chartOptions.chart\"\n              [labels]=\"viewModel.chartOptions.labels\"\n              [colors]=\"viewModel.chartOptions.colors\"\n              [legend]=\"viewModel.chartOptions.legend\"\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\n            >\n            </apx-chart>\n          </div>\n          <div class=\"legend\">\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\n              <span\n                class=\"legend-marker\"\n                [style.backgroundColor]=\"item.color\"\n              ></span>\n              <span class=\"legend-label\">{{ item.label }}</span>\n              <span class=\"legend-value\">{{ item.count | number }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"divider\" aria-hidden=\"true\"></div>\n\n      <div class=\"table-section\">\n        <div class=\"lic-table-header\">\n          <span>License</span>\n          <span>Required</span>\n        </div>\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\n          <span>{{ row.label }}</span>\n          <span>{{ row.value | number }}</span>\n        </div>\n        <div class=\"table-row total-row\">\n          <span>Total</span>\n          <span>{{ viewModel.totalRequired | number }}</span>\n        </div>\n      </div>\n    </div>\n\n    <ng-template #widgetState>\n      <div class=\"state-message\" *ngIf=\"loading\">\n        Loading license requirements\u2026\n      </div>\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\n        Unable to load license requirements.\n      </div>\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\n        No license data available.\n      </div>\n    </ng-template>\n  </ng-container>\n</tk-card>\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&display=swap\";:host{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.lic-table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.lic-table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LicencesRequirementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-licenses-requirement', template: "<tk-card title=\"Licenses requirement\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div\r\n      class=\"widget-body\"\r\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\r\n    >\r\n      <div class=\"left-section\">\r\n        <mat-select\r\n          [(value)]=\"selectedSummaryIndex\"\r\n          (selectionChange)=\"onFilterChange($event.value)\"\r\n          class=\"filter-select\"\r\n        >\r\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\r\n            {{ option }}\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n        <div class=\"chart-section\">\r\n          <div class=\"chart-wrapper\">\r\n            <apx-chart\r\n              [series]=\"viewModel.chartOptions.series\"\r\n              [chart]=\"viewModel.chartOptions.chart\"\r\n              [labels]=\"viewModel.chartOptions.labels\"\r\n              [colors]=\"viewModel.chartOptions.colors\"\r\n              [legend]=\"viewModel.chartOptions.legend\"\r\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\r\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\r\n            >\r\n            </apx-chart>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\r\n              <span\r\n                class=\"legend-marker\"\r\n                [style.backgroundColor]=\"item.color\"\r\n              ></span>\r\n              <span class=\"legend-label\">{{ item.label }}</span>\r\n              <span class=\"legend-value\">{{ item.count | number }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"divider\" aria-hidden=\"true\"></div>\r\n\r\n      <div class=\"table-section\">\r\n        <div class=\"table-header\">\r\n          <span>License</span>\r\n          <span>Required</span>\r\n        </div>\r\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\r\n          <span>{{ row.label }}</span>\r\n          <span>{{ row.value | number }}</span>\r\n        </div>\r\n        <div class=\"table-row total-row\">\r\n          <span>Total</span>\r\n          <span>{{ viewModel.totalRequired | number }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #widgetState>\r\n      <div class=\"state-message\" *ngIf=\"loading\">\r\n        Loading license requirements\u2026\r\n      </div>\r\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\r\n        Unable to load license requirements.\r\n      </div>\r\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\r\n        No license data available.\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</tk-card>\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&display=swap\";:host{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\n"] }]
+            args: [{ selector: 'cc-licenses-requirement', template: "<tk-card title=\"Licenses requirement\">\n  <ng-container ngProjectAs=\"card-content\">\n    <div\n      class=\"widget-body\"\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\n    >\n      <div class=\"left-section\">\n        <mat-select\n          [(value)]=\"selectedSummaryIndex\"\n          (selectionChange)=\"onFilterChange($event.value)\"\n          class=\"filter-select\"\n        >\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\n            {{ option }}\n          </mat-option>\n        </mat-select>\n\n        <div class=\"chart-section\">\n          <div class=\"chart-wrapper\">\n            <apx-chart\n              [series]=\"viewModel.chartOptions.series\"\n              [chart]=\"viewModel.chartOptions.chart\"\n              [labels]=\"viewModel.chartOptions.labels\"\n              [colors]=\"viewModel.chartOptions.colors\"\n              [legend]=\"viewModel.chartOptions.legend\"\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\n            >\n            </apx-chart>\n          </div>\n          <div class=\"legend\">\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\n              <span\n                class=\"legend-marker\"\n                [style.backgroundColor]=\"item.color\"\n              ></span>\n              <span class=\"legend-label\">{{ item.label }}</span>\n              <span class=\"legend-value\">{{ item.count | number }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"divider\" aria-hidden=\"true\"></div>\n\n      <div class=\"table-section\">\n        <div class=\"lic-table-header\">\n          <span>License</span>\n          <span>Required</span>\n        </div>\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\n          <span>{{ row.label }}</span>\n          <span>{{ row.value | number }}</span>\n        </div>\n        <div class=\"table-row total-row\">\n          <span>Total</span>\n          <span>{{ viewModel.totalRequired | number }}</span>\n        </div>\n      </div>\n    </div>\n\n    <ng-template #widgetState>\n      <div class=\"state-message\" *ngIf=\"loading\">\n        Loading license requirements\u2026\n      </div>\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\n        Unable to load license requirements.\n      </div>\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\n        No license data available.\n      </div>\n    </ng-template>\n  </ng-container>\n</tk-card>\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&display=swap\";:host{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.lic-table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.lic-table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\n"] }]
         }], propDecorators: { customerId: [{
                 type: Input
             }], token: [{
@@ -359,10 +359,10 @@ class SummaryGridComponent {
     }
 }
 SummaryGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SummaryGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SummaryGridComponent, selector: "cc-summary-grid", inputs: { customerId: "customerId", token: "token" }, ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div *ngFor=\"let stats of data\">\r\n        <tk-card [title]=\"stats.uccxIp\">\r\n            <ng-container ngProjectAs=\"card-content\">\r\n                <div class=\"grid-wrapper\">\r\n                    <div class=\"grid-item\" *ngFor=\"let item of stats.counts\">\r\n                        <div class=\"item-top\">\r\n                            <span class=\"item-icon\">\r\n                                <img width=\"24\" height=\"24\" src=\"assets/icons/{{ item.name }}.svg\" alt=\"{{ item.name }} Icon\">\r\n                            </span>\r\n                            <span class=\"item-count\">{{ item.value }}</span>\r\n                        </div>\r\n                        <span class=\"item-label\">{{ ENTITY_CONFIG[item.name].label }}</span>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </tk-card>\r\n    </div>\r\n</ng-container>", styles: [".grid-wrapper{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;row-gap:2rem}.grid-item{display:flex;flex-direction:column;gap:.5rem}.item-top{display:flex;align-items:center;gap:inherit}.item-icon{display:flex;align-items:center}.item-count{font-size:20px}.item-label{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+SummaryGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SummaryGridComponent, selector: "cc-summary-grid", inputs: { customerId: "customerId", token: "token" }, ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div *ngFor=\"let stats of data\">\r\n        <tk-card [title]=\"stats.uccxIp\">\r\n            <ng-container ngProjectAs=\"card-content\">\r\n                <div class=\"grid-wrapper\">\r\n                    <div class=\"grid-item\" *ngFor=\"let item of stats.counts\">\r\n                        <div class=\"item-top\">\r\n                            <span class=\"item-icon\">\r\n                                <img width=\"24\" height=\"24\" src=\"assets/icons/{{ item.name }}.svg\" alt=\"{{ item.name }} Icon\">\r\n                            </span>\r\n                            <span class=\"item-count\">{{ item.value }}</span>\r\n                        </div>\r\n                        <span class=\"item-label\">{{ ENTITY_CONFIG[item.name].label }}</span>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </tk-card>\r\n    </div>\r\n</ng-container>", styles: [".grid-wrapper{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;row-gap:2rem}.grid-item{display:flex;flex-direction:column;gap:.5rem}.item-top{display:flex;align-items:center;gap:inherit}.item-icon{display:flex;align-items:center;background-color:#f2f2f2;padding:.75rem;border-radius:.5rem}.item-count{font-size:30px}.item-label{font-size:14px;margin-left:.15rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-summary-grid', template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div *ngFor=\"let stats of data\">\r\n        <tk-card [title]=\"stats.uccxIp\">\r\n            <ng-container ngProjectAs=\"card-content\">\r\n                <div class=\"grid-wrapper\">\r\n                    <div class=\"grid-item\" *ngFor=\"let item of stats.counts\">\r\n                        <div class=\"item-top\">\r\n                            <span class=\"item-icon\">\r\n                                <img width=\"24\" height=\"24\" src=\"assets/icons/{{ item.name }}.svg\" alt=\"{{ item.name }} Icon\">\r\n                            </span>\r\n                            <span class=\"item-count\">{{ item.value }}</span>\r\n                        </div>\r\n                        <span class=\"item-label\">{{ ENTITY_CONFIG[item.name].label }}</span>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </tk-card>\r\n    </div>\r\n</ng-container>", styles: [".grid-wrapper{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;row-gap:2rem}.grid-item{display:flex;flex-direction:column;gap:.5rem}.item-top{display:flex;align-items:center;gap:inherit}.item-icon{display:flex;align-items:center}.item-count{font-size:20px}.item-label{font-size:14px}\n"] }]
+            args: [{ selector: 'cc-summary-grid', template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div *ngFor=\"let stats of data\">\r\n        <tk-card [title]=\"stats.uccxIp\">\r\n            <ng-container ngProjectAs=\"card-content\">\r\n                <div class=\"grid-wrapper\">\r\n                    <div class=\"grid-item\" *ngFor=\"let item of stats.counts\">\r\n                        <div class=\"item-top\">\r\n                            <span class=\"item-icon\">\r\n                                <img width=\"24\" height=\"24\" src=\"assets/icons/{{ item.name }}.svg\" alt=\"{{ item.name }} Icon\">\r\n                            </span>\r\n                            <span class=\"item-count\">{{ item.value }}</span>\r\n                        </div>\r\n                        <span class=\"item-label\">{{ ENTITY_CONFIG[item.name].label }}</span>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </tk-card>\r\n    </div>\r\n</ng-container>", styles: [".grid-wrapper{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;row-gap:2rem}.grid-item{display:flex;flex-direction:column;gap:.5rem}.item-top{display:flex;align-items:center;gap:inherit}.item-icon{display:flex;align-items:center;background-color:#f2f2f2;padding:.75rem;border-radius:.5rem}.item-count{font-size:30px}.item-label{font-size:14px;margin-left:.15rem}\n"] }]
         }], propDecorators: { customerId: [{
                 type: Input
             }], token: [{