@tuki-io/tuki-widgets 0.0.134 → 0.0.136

package/esm2020/user-manage/src/user-calling/user-calling.component.mjs

@@ -0,0 +1,75 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../services/user.service";
+import * as i2 from "../services/dns.service";
+export class UserCallingComponent {
+    get form() {
+        return this.userService?.user?.devices[0] && this.userService?.user?.devices[0].lineAssociations[0].form;
+    }
+    get formControl() {
+        const control = this.form?.get('directoryNumber');
+        return control;
+    }
+    get lineAssociation() {
+        return this.userService?.user?.devices[0].lineAssociations[0];
+    }
+    get user() {
+        return this.userService.user;
+    }
+    constructor(userService, dnsService) {
+        this.userService = userService;
+        this.dnsService = dnsService;
+        this.onExtensionChange = new EventEmitter();
+    }
+    ngOnInit() {
+        // this.getData();
+    }
+    onDirectoryNumberChange(value) {
+        if (this.lineAssociation && this.lineAssociation.directoryNumber) {
+            // @ts-ignore
+            this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
+            this.onExtensionChange.next(true);
+        }
+    }
+    onChangeField(token) {
+        if (!token) {
+            return;
+        }
+        this.userService.user[token] = this.form?.get(token)?.value;
+    }
+    toggleEditMode() {
+        this.userService.user.toggleEditMode();
+    }
+    isSavingDisabled() {
+        return !this.userService.hasUnsavedChanges() || this.userService.hasExistedUserId;
+    }
+    onChangeExtension(value) {
+        if (this.lineAssociation && this.lineAssociation.directoryNumber) {
+            // @ts-ignore
+            this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
+        }
+    }
+    getData() {
+        this.dataPending = true;
+        this.dnsService.getNumberRange(String(this.siteId), this.userId)
+            .subscribe({
+            complete: (v) => {
+                this.dataPending = false;
+            },
+            error: (e) => this.dataPending = false,
+        });
+    }
+}
+UserCallingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingComponent, deps: [{ token: i1.UserService }, { token: i2.DnsService }], target: i0.ɵɵFactoryTarget.Component });
+UserCallingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCallingComponent, selector: "app-user-calling", inputs: { siteId: "siteId", userId: "userId" }, outputs: { onExtensionChange: "onExtensionChange" }, ngImport: i0, template: "<!--    NUMBERS BOX -->\r\n<div style=\"display: flex; flex-direction: column; padding: 24px 0; gap: 24px;\">\r\n  <div class=\"user-info-box user-details-box\" style=\"display: flex;\">\r\n    <h3 class=\"user-box-title\" style=\"width: 180px;\">Numbers</h3>\r\n    <div style=\"flex:1; display:flex; flex-direction:column;\">\r\n      <!-- Directory numbers section -->\r\n      <div style=\"display:flex; align-items:flex-start; padding:16px 0;\">\r\n        <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n          <span>Directory numbers</span>\r\n          <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </div>\r\n        <div style=\"flex:1; display:flex; flex-direction:column; align-items:flex-start;\">\r\n          <!-- Table -->\r\n          <table style=\"width:100%; border-collapse:collapse; margin-bottom:16px;\">\r\n            <thead>\r\n              <tr style=\"background:#ededed;\">\r\n                <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Type</th>\r\n                <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Phone number</th>\r\n                <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Extension</th>\r\n                <th style=\"padding:10px 8px; border-bottom:1px solid #e8e8e8; width:30px;\"></th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\">\r\n                <td style=\"padding:12px 16px; border-bottom:1px solid #e8e8e8;\">\r\n                  <span style=\"display:inline-block; background:#e8f4fc; color:#1170a8; padding:4px 14px; border-radius:14px; font-size:13px; font-weight:400; border:1px solid #b8d9ed;\">Primary</span>\r\n                </td>\r\n                <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\"></td>\r\n                <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n                  <span>{{ formControl.value }}</span>\r\n                  <img style=\"margin-left: .5rem;\" src=\"assets/icons/copy-regular.svg\" width=\"16\" alt=\"\">\r\n                </td>\r\n                <td style=\"padding:19px 8px; text-align:center; border-bottom:1px solid #e8e8e8; display:flex; align-items:center; justify-content:center; line-height:0;\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n                    <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n                  </svg>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n          <!-- Add secondary number button -->\r\n          <button style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:pointer; color:#333;\" onmouseover=\"this.style.background='#ededed'\" onmouseout=\"this.style.background='#fff'\">Add secondary number</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n      <!-- Caller ID section -->\r\n      <div style=\"display:flex; align-items:center; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n        <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n          <span>Caller ID</span>\r\n          <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </div>\r\n        <div style=\"flex:1;\"></div>\r\n        <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n            <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n      <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n      <!-- Emergency callback number section -->\r\n      <div style=\"display:flex; align-items:flex-start; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n        <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:flex-start;\">\r\n          <div>\r\n            <div style=\"display:flex; align-items:center;\">\r\n              <span>Emergency callback</span>\r\n            </div>\r\n            <div style=\"display:flex; align-items:center;\">\r\n              <span>number</span>\r\n              <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div style=\"flex:1; display:flex; align-items:flex-start; padding-top:2px;\">\r\n          <i class=\"fa fa-times-circle\" style=\"color:#c62828; margin-right:8px; margin-top: 2px; font-size:14px;\"></i>\r\n          <span style=\"color:#c62828; font-size:13px; line-height:1.4;\">All calls will be blocked if there's no ECBN, assign a phone number to this user or set the location default ECBN.</span>\r\n        </div>\r\n        <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n            <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- user-calling-extension\r\n    *ngIf=\"formControl\"\r\n    [siteId]=\"this.siteId\"\r\n              [control]=\"formControl\"\r\n              [routePartition]=\"this.lineAssociation.directoryNumber.routePartitionName\"\r\n              [directoryNumber]=\"this.lineAssociation.directoryNumber.directoryNumber\"\r\n              (onChange)=\"onDirectoryNumberChange($event)\">\r\n            </app-user-calling-extension> -->\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling{height:calc(100vh - 100px)}#user-calling table{margin:10px 0;width:100%}#user-calling th{color:#000;text-align:left;background:#efefef;font-size:14px;font-weight:500;padding:2px 5px}.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:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;font-size:16px}.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;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}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-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:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-calling', template: "<!--    NUMBERS BOX -->\r\n<div style=\"display: flex; flex-direction: column; padding: 24px 0; gap: 24px;\">\r\n  <div class=\"user-info-box user-details-box\" style=\"display: flex;\">\r\n    <h3 class=\"user-box-title\" style=\"width: 180px;\">Numbers</h3>\r\n    <div style=\"flex:1; display:flex; flex-direction:column;\">\r\n      <!-- Directory numbers section -->\r\n      <div style=\"display:flex; align-items:flex-start; padding:16px 0;\">\r\n        <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n          <span>Directory numbers</span>\r\n          <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </div>\r\n        <div style=\"flex:1; display:flex; flex-direction:column; align-items:flex-start;\">\r\n          <!-- Table -->\r\n          <table style=\"width:100%; border-collapse:collapse; margin-bottom:16px;\">\r\n            <thead>\r\n              <tr style=\"background:#ededed;\">\r\n                <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Type</th>\r\n                <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Phone number</th>\r\n                <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Extension</th>\r\n                <th style=\"padding:10px 8px; border-bottom:1px solid #e8e8e8; width:30px;\"></th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\">\r\n                <td style=\"padding:12px 16px; border-bottom:1px solid #e8e8e8;\">\r\n                  <span style=\"display:inline-block; background:#e8f4fc; color:#1170a8; padding:4px 14px; border-radius:14px; font-size:13px; font-weight:400; border:1px solid #b8d9ed;\">Primary</span>\r\n                </td>\r\n                <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\"></td>\r\n                <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n                  <span>{{ formControl.value }}</span>\r\n                  <img style=\"margin-left: .5rem;\" src=\"assets/icons/copy-regular.svg\" width=\"16\" alt=\"\">\r\n                </td>\r\n                <td style=\"padding:19px 8px; text-align:center; border-bottom:1px solid #e8e8e8; display:flex; align-items:center; justify-content:center; line-height:0;\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n                    <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n                  </svg>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n          <!-- Add secondary number button -->\r\n          <button style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:pointer; color:#333;\" onmouseover=\"this.style.background='#ededed'\" onmouseout=\"this.style.background='#fff'\">Add secondary number</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n      <!-- Caller ID section -->\r\n      <div style=\"display:flex; align-items:center; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n        <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n          <span>Caller ID</span>\r\n          <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </div>\r\n        <div style=\"flex:1;\"></div>\r\n        <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n            <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n      <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n      <!-- Emergency callback number section -->\r\n      <div style=\"display:flex; align-items:flex-start; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n        <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:flex-start;\">\r\n          <div>\r\n            <div style=\"display:flex; align-items:center;\">\r\n              <span>Emergency callback</span>\r\n            </div>\r\n            <div style=\"display:flex; align-items:center;\">\r\n              <span>number</span>\r\n              <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div style=\"flex:1; display:flex; align-items:flex-start; padding-top:2px;\">\r\n          <i class=\"fa fa-times-circle\" style=\"color:#c62828; margin-right:8px; margin-top: 2px; font-size:14px;\"></i>\r\n          <span style=\"color:#c62828; font-size:13px; line-height:1.4;\">All calls will be blocked if there's no ECBN, assign a phone number to this user or set the location default ECBN.</span>\r\n        </div>\r\n        <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n            <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- user-calling-extension\r\n    *ngIf=\"formControl\"\r\n    [siteId]=\"this.siteId\"\r\n              [control]=\"formControl\"\r\n              [routePartition]=\"this.lineAssociation.directoryNumber.routePartitionName\"\r\n              [directoryNumber]=\"this.lineAssociation.directoryNumber.directoryNumber\"\r\n              (onChange)=\"onDirectoryNumberChange($event)\">\r\n            </app-user-calling-extension> -->\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling{height:calc(100vh - 100px)}#user-calling table{margin:10px 0;width:100%}#user-calling th{color:#000;text-align:left;background:#efefef;font-size:14px;font-weight:500;padding:2px 5px}.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:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;font-size:16px}.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;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}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-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:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UserService }, { type: i2.DnsService }]; }, propDecorators: { siteId: [{
+                type: Input
+            }], userId: [{
+                type: Input
+            }], onExtensionChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1jYWxsaW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3R1a2kvd2lkZ2V0cy91c2VyLW1hbmFnZS9zcmMvdXNlci1jYWxsaW5nL3VzZXItY2FsbGluZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90dWtpL3dpZGdldHMvdXNlci1tYW5hZ2Uvc3JjL3VzZXItY2FsbGluZy91c2VyLWNhbGxpbmcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQWEvRSxNQUFNLE9BQU8sb0JBQW9CO0lBTS9CLElBQUksSUFBSTtRQUNOLE9BQU8sSUFBSSxDQUFDLFdBQVcsRUFBRSxJQUFJLEVBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDM0csQ0FBQztJQUVELElBQUksV0FBVztRQUNiLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsR0FBRyxDQUFDLGlCQUFpQixDQUFnQixDQUFDO1FBQ2pFLE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFRCxJQUFJLGVBQWU7UUFDakIsT0FBTyxJQUFJLENBQUMsV0FBVyxFQUFFLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDaEUsQ0FBQztJQUVELElBQUksSUFBSTtRQUNOLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUM7SUFDL0IsQ0FBQztJQUdELFlBQ1MsV0FBd0IsRUFDdkIsVUFBc0I7UUFEdkIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFDdkIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQXZCdEIsc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQXlCdEQsQ0FBQztJQUVELFFBQVE7UUFDTixrQkFBa0I7SUFDcEIsQ0FBQztJQUVELHVCQUF1QixDQUFDLEtBQVU7UUFDaEMsSUFBSSxJQUFJLENBQUMsZUFBZSxJQUFJLElBQUksQ0FBQyxlQUFlLENBQUMsZUFBZSxFQUFFO1lBQ2hFLGFBQWE7WUFDYixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7WUFDN0YsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUNuQztJQUNILENBQUM7SUFFTSxhQUFhLENBQUMsS0FBYTtRQUNoQyxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ1YsT0FBTztTQUNSO1FBQ0EsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFZLENBQUMsS0FBSyxDQUFDLEdBQUcsSUFBSSxDQUFDLElBQUksRUFBRSxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUUsS0FBSyxDQUFDO0lBRXZFLENBQUM7SUFFTSxjQUFjO1FBQ25CLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3pDLENBQUM7SUFFTSxnQkFBZ0I7UUFDckIsT0FBTyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLGdCQUFnQixDQUFDO0lBQ3BGLENBQUM7SUFFTSxpQkFBaUIsQ0FBQyxLQUFhO1FBQ3BDLElBQUksSUFBSSxDQUFDLGVBQWUsSUFBSSxJQUFJLENBQUMsZUFBZSxDQUFDLGVBQWUsRUFBRTtZQUNoRSxhQUFhO1lBQ2IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxlQUFlLEdBQUcsS0FBSyxDQUFDO1NBQzlGO0lBQ0gsQ0FBQztJQUVPLE9BQU87UUFDYixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztRQUN4QixJQUFJLENBQUMsVUFBVSxDQUFDLGNBQWMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUM7YUFDN0QsU0FBUyxDQUFDO1lBQ1QsUUFBUSxFQUFFLENBQUMsQ0FBTSxFQUFFLEVBQUU7Z0JBQ25CLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1lBQzNCLENBQUM7WUFDRCxLQUFLLEVBQUUsQ0FBQyxDQUFNLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSztTQUM1QyxDQUFDLENBQUM7SUFDUCxDQUFDOztrSEExRVUsb0JBQW9CO3NHQUFwQixvQkFBb0IsNkpDYmpDLGdrT0FpR0E7NEZEcEZhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxrQkFBa0I7MkhBS25CLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksaUJBQWlCO3NCQUExQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGb3JtQ29udHJvbCwgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBTaW1wbGlmaWVkVXNlciB9IGZyb20gJy4uL2NsYXNzZXMvc2ltcGxpZmllZC11c2VyJztcclxuaW1wb3J0IHsgTGluZUFzc29jaWF0aW9uIH0gZnJvbSAnLi4vY2xhc3Nlcy9saW5lLWFzc29jaWF0aW9uJztcclxuaW1wb3J0IHsgTGluZUFzc29jaWF0aW9uSW50ZXJmYWNlIH0gZnJvbSAnLi4vY2xhc3Nlcy9saW5lLWFzc29jaWF0aW9uLWludGVyZmFjZSc7XHJcbmltcG9ydCB7IFVzZXJTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvdXNlci5zZXJ2aWNlJztcclxuaW1wb3J0IHsgRG5zU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL2Rucy5zZXJ2aWNlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLXVzZXItY2FsbGluZycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3VzZXItY2FsbGluZy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdXNlci1jYWxsaW5nLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBVc2VyQ2FsbGluZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgc2l0ZUlkITogbnVtYmVyO1xyXG4gIEBJbnB1dCgpIHVzZXJJZCE6IHN0cmluZztcclxuICBAT3V0cHV0KCkgb25FeHRlbnNpb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuICBwdWJsaWMgZGF0YVBlbmRpbmchOiBib29sZWFuO1xyXG5cclxuICBnZXQgZm9ybSgpOiBGb3JtR3JvdXAge1xyXG4gICAgcmV0dXJuIHRoaXMudXNlclNlcnZpY2U/LnVzZXI/LmRldmljZXNbMF0gJiYgdGhpcy51c2VyU2VydmljZT8udXNlcj8uZGV2aWNlc1swXS5saW5lQXNzb2NpYXRpb25zWzBdLmZvcm07XHJcbiAgfVxyXG5cclxuICBnZXQgZm9ybUNvbnRyb2woKTogRm9ybUNvbnRyb2wge1xyXG4gICAgY29uc3QgY29udHJvbCA9IHRoaXMuZm9ybT8uZ2V0KCdkaXJlY3RvcnlOdW1iZXInKSBhcyBGb3JtQ29udHJvbDtcclxuICAgIHJldHVybiBjb250cm9sO1xyXG4gIH1cclxuXHJcbiAgZ2V0IGxpbmVBc3NvY2lhdGlvbigpOiBMaW5lQXNzb2NpYXRpb24gfCBMaW5lQXNzb2NpYXRpb25JbnRlcmZhY2Uge1xyXG4gICAgcmV0dXJuIHRoaXMudXNlclNlcnZpY2U/LnVzZXI/LmRldmljZXNbMF0ubGluZUFzc29jaWF0aW9uc1swXTtcclxuICB9XHJcblxyXG4gIGdldCB1c2VyKCk6IFNpbXBsaWZpZWRVc2VyIHtcclxuICAgIHJldHVybiB0aGlzLnVzZXJTZXJ2aWNlLnVzZXI7XHJcbiAgfVxyXG5cclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwdWJsaWMgdXNlclNlcnZpY2U6IFVzZXJTZXJ2aWNlLFxyXG4gICAgcHJpdmF0ZSBkbnNTZXJ2aWNlOiBEbnNTZXJ2aWNlXHJcbiAgKSB7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIC8vIHRoaXMuZ2V0RGF0YSgpO1xyXG4gIH1cclxuXHJcbiAgb25EaXJlY3RvcnlOdW1iZXJDaGFuZ2UodmFsdWU6IGFueSk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMubGluZUFzc29jaWF0aW9uICYmIHRoaXMubGluZUFzc29jaWF0aW9uLmRpcmVjdG9yeU51bWJlcikge1xyXG4gICAgICAvLyBAdHMtaWdub3JlXHJcbiAgICAgIHRoaXMudXNlclNlcnZpY2UudXNlci5kZXZpY2VzWzBdLmxpbmVBc3NvY2lhdGlvbnNbMF0uZGlyZWN0b3J5TnVtYmVyLmRpcmVjdG9yeU51bWJlciA9IHZhbHVlO1xyXG4gICAgICB0aGlzLm9uRXh0ZW5zaW9uQ2hhbmdlLm5leHQodHJ1ZSk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgb25DaGFuZ2VGaWVsZCh0b2tlbjogc3RyaW5nKTogdm9pZCB7XHJcbiAgICBpZiAoIXRva2VuKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICAgICh0aGlzLnVzZXJTZXJ2aWNlLnVzZXIgYXMgYW55KVt0b2tlbl0gPSB0aGlzLmZvcm0/LmdldCh0b2tlbik/LnZhbHVlO1xyXG5cclxuICB9XHJcblxyXG4gIHB1YmxpYyB0b2dnbGVFZGl0TW9kZSgpIHtcclxuICAgIHRoaXMudXNlclNlcnZpY2UudXNlci50b2dnbGVFZGl0TW9kZSgpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGlzU2F2aW5nRGlzYWJsZWQoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gIXRoaXMudXNlclNlcnZpY2UuaGFzVW5zYXZlZENoYW5nZXMoKSB8fCB0aGlzLnVzZXJTZXJ2aWNlLmhhc0V4aXN0ZWRVc2VySWQ7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgb25DaGFuZ2VFeHRlbnNpb24odmFsdWU6IHN0cmluZyk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMubGluZUFzc29jaWF0aW9uICYmIHRoaXMubGluZUFzc29jaWF0aW9uLmRpcmVjdG9yeU51bWJlcikge1xyXG4gICAgICAvLyBAdHMtaWdub3JlXHJcbiAgICAgIHRoaXMudXNlclNlcnZpY2UudXNlci5kZXZpY2VzWzBdLmxpbmVBc3NvY2lhdGlvbnNbMF0uZGlyZWN0b3J5TnVtYmVyLmRpcmVjdG9yeU51bWJlciA9IHZhbHVlO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBnZXREYXRhKCkge1xyXG4gICAgdGhpcy5kYXRhUGVuZGluZyA9IHRydWU7XHJcbiAgICB0aGlzLmRuc1NlcnZpY2UuZ2V0TnVtYmVyUmFuZ2UoU3RyaW5nKHRoaXMuc2l0ZUlkKSwgdGhpcy51c2VySWQpXHJcbiAgICAgIC5zdWJzY3JpYmUoe1xyXG4gICAgICAgIGNvbXBsZXRlOiAodjogYW55KSA9PiB7XHJcbiAgICAgICAgICB0aGlzLmRhdGFQZW5kaW5nID0gZmFsc2U7XHJcbiAgICAgICAgfSxcclxuICAgICAgICBlcnJvcjogKGU6IGFueSkgPT4gdGhpcy5kYXRhUGVuZGluZyA9IGZhbHNlLFxyXG4gICAgICB9KTtcclxuICB9XHJcbn1cclxuIiwiPCEtLSAgICBOVU1CRVJTIEJPWCAtLT5cclxuPGRpdiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7IGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47IHBhZGRpbmc6IDI0cHggMDsgZ2FwOiAyNHB4O1wiPlxyXG4gIDxkaXYgY2xhc3M9XCJ1c2VyLWluZm8tYm94IHVzZXItZGV0YWlscy1ib3hcIiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7XCI+XHJcbiAgICA8aDMgY2xhc3M9XCJ1c2VyLWJveC10aXRsZVwiIHN0eWxlPVwid2lkdGg6IDE4MHB4O1wiPk51bWJlcnM8L2gzPlxyXG4gICAgPGRpdiBzdHlsZT1cImZsZXg6MTsgZGlzcGxheTpmbGV4OyBmbGV4LWRpcmVjdGlvbjpjb2x1bW47XCI+XHJcbiAgICAgIDwhLS0gRGlyZWN0b3J5IG51bWJlcnMgc2VjdGlvbiAtLT5cclxuICAgICAgPGRpdiBzdHlsZT1cImRpc3BsYXk6ZmxleDsgYWxpZ24taXRlbXM6ZmxleC1zdGFydDsgcGFkZGluZzoxNnB4IDA7XCI+XHJcbiAgICAgICAgPGRpdiBzdHlsZT1cIm1pbi13aWR0aDoxNzBweDsgZm9udC13ZWlnaHQ6NDAwOyBmb250LXNpemU6MTRweDsgY29sb3I6IzEyMTIxMjsgZGlzcGxheTpmbGV4OyBhbGlnbi1pdGVtczpjZW50ZXI7XCI+XHJcbiAgICAgICAgICA8c3Bhbj5EaXJlY3RvcnkgbnVtYmVyczwvc3Bhbj5cclxuICAgICAgICAgIDxpbWcgc3R5bGU9XCJtYXJnaW4tbGVmdDogLjVyZW07XCIgc3JjPVwiYXNzZXRzL2ljb25zL2luZm8tY2lyY2xlLXJlZ3VsYXIuc3ZnXCIgd2lkdGg9XCIxNlwiIGFsdD1cIlwiPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgc3R5bGU9XCJmbGV4OjE7IGRpc3BsYXk6ZmxleDsgZmxleC1kaXJlY3Rpb246Y29sdW1uOyBhbGlnbi1pdGVtczpmbGV4LXN0YXJ0O1wiPlxyXG4gICAgICAgICAgPCEtLSBUYWJsZSAtLT5cclxuICAgICAgICAgIDx0YWJsZSBzdHlsZT1cIndpZHRoOjEwMCU7IGJvcmRlci1jb2xsYXBzZTpjb2xsYXBzZTsgbWFyZ2luLWJvdHRvbToxNnB4O1wiPlxyXG4gICAgICAgICAgICA8dGhlYWQ+XHJcbiAgICAgICAgICAgICAgPHRyIHN0eWxlPVwiYmFja2dyb3VuZDojZWRlZGVkO1wiPlxyXG4gICAgICAgICAgICAgICAgPHRoIHN0eWxlPVwicGFkZGluZzoxMHB4IDE2cHg7IGZvbnQtc2l6ZToxM3B4OyBmb250LXdlaWdodDo0MDA7IGNvbG9yOiM1NDU0NTQ7IHRleHQtYWxpZ246bGVmdDsgYm9yZGVyLWJvdHRvbToxcHggc29saWQgI2U4ZThlODtcIj5UeXBlPC90aD5cclxuICAgICAgICAgICAgICAgIDx0aCBzdHlsZT1cInBhZGRpbmc6MTBweCAxNnB4OyBmb250LXNpemU6MTNweDsgZm9udC13ZWlnaHQ6NDAwOyBjb2xvcjojNTQ1NDU0OyB0ZXh0LWFsaWduOmxlZnQ7IGJvcmRlci1ib3R0b206MXB4IHNvbGlkICNlOGU4ZTg7XCI+UGhvbmUgbnVtYmVyPC90aD5cclxuICAgICAgICAgICAgICAgIDx0aCBzdHlsZT1cInBhZGRpbmc6MTBweCAxNnB4OyBmb250LXNpemU6MTNweDsgZm9udC13ZWlnaHQ6NDAwOyBjb2xvcjojNTQ1NDU0OyB0ZXh0LWFsaWduOmxlZnQ7IGJvcmRlci1ib3R0b206MXB4IHNvbGlkICNlOGU4ZTg7XCI+RXh0ZW5zaW9uPC90aD5cclxuICAgICAgICAgICAgICAgIDx0aCBzdHlsZT1cInBhZGRpbmc6MTBweCA4cHg7IGJvcmRlci1ib3R0b206MXB4IHNvbGlkICNlOGU4ZTg7IHdpZHRoOjMwcHg7XCI+PC90aD5cclxuICAgICAgICAgICAgICA8L3RyPlxyXG4gICAgICAgICAgICA8L3RoZWFkPlxyXG4gICAgICAgICAgICA8dGJvZHk+XHJcbiAgICAgICAgICAgICAgPHRyIHN0eWxlPVwiYmFja2dyb3VuZDojZmZmOyBjdXJzb3I6cG9pbnRlcjtcIiBvbm1vdXNlb3Zlcj1cInRoaXMuc3R5bGUuYmFja2dyb3VuZD0nI2ZhZmFmYSdcIiBvbm1vdXNlb3V0PVwidGhpcy5zdHlsZS5iYWNrZ3JvdW5kPScjZmZmJ1wiPlxyXG4gICAgICAgICAgICAgICAgPHRkIHN0eWxlPVwicGFkZGluZzoxMnB4IDE2cHg7IGJvcmRlci1ib3R0b206MXB4IHNvbGlkICNlOGU4ZTg7XCI+XHJcbiAgICAgICAgICAgICAgICAgIDxzcGFuIHN0eWxlPVwiZGlzcGxheTppbmxpbmUtYmxvY2s7IGJhY2tncm91bmQ6I2U4ZjRmYzsgY29sb3I6IzExNzBhODsgcGFkZGluZzo0cHggMTRweDsgYm9yZGVyLXJhZGl1czoxNHB4OyBmb250LXNpemU6MTNweDsgZm9udC13ZWlnaHQ6NDAwOyBib3JkZXI6MXB4IHNvbGlkICNiOGQ5ZWQ7XCI+UHJpbWFyeTwvc3Bhbj5cclxuICAgICAgICAgICAgICAgIDwvdGQ+XHJcbiAgICAgICAgICAgICAgICA8dGQgc3R5bGU9XCJwYWRkaW5nOjEycHggMTZweDsgY29sb3I6IzMzMzsgZm9udC1zaXplOjE0cHg7IGJvcmRlci1ib3R0b206MXB4IHNvbGlkICNlOGU4ZTg7XCI+PC90ZD5cclxuICAgICAgICAgICAgICAgIDx0ZCBzdHlsZT1cInBhZGRpbmc6MTJweCAxNnB4OyBjb2xvcjojMzMzOyBmb250LXNpemU6MTRweDsgYm9yZGVyLWJvdHRvbToxcHggc29saWQgI2U4ZThlODtcIj5cclxuICAgICAgICAgICAgICAgICAgPHNwYW4+e3sgZm9ybUNvbnRyb2wudmFsdWUgfX08L3NwYW4+XHJcbiAgICAgICAgICAgICAgICAgIDxpbWcgc3R5bGU9XCJtYXJnaW4tbGVmdDogLjVyZW07XCIgc3JjPVwiYXNzZXRzL2ljb25zL2NvcHktcmVndWxhci5zdmdcIiB3aWR0aD1cIjE2XCIgYWx0PVwiXCI+XHJcbiAgICAgICAgICAgICAgICA8L3RkPlxyXG4gICAgICAgICAgICAgICAgPHRkIHN0eWxlPVwicGFkZGluZzoxOXB4IDhweDsgdGV4dC1hbGlnbjpjZW50ZXI7IGJvcmRlci1ib3R0b206MXB4IHNvbGlkICNlOGU4ZTg7IGRpc3BsYXk6ZmxleDsgYWxpZ24taXRlbXM6Y2VudGVyOyBqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyOyBsaW5lLWhlaWdodDowO1wiPlxyXG4gICAgICAgICAgICAgICAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB2aWV3Qm94PVwiMCAwIDMyIDMyXCIgc3R5bGU9XCJ3aWR0aDoxNnB4OyBoZWlnaHQ6MTZweDsgY29sb3I6IzIyMjIyMjsgdHJhbnNmb3JtOnJvdGF0ZSgtOTBkZWcpOyB0cmFuc2Zvcm0tb3JpZ2luOmNlbnRlcjsgZGlzcGxheTpibG9jazsgbWFyZ2luOjA7XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPHBhdGggZmlsbD1cImN1cnJlbnRDb2xvclwiIGQ9XCJNMjguNzA4IDkuMjkzYTEgMSAwIDAgMC0xLjQxNSAwTDE2IDIwLjU4NiA0LjcwNyA5LjI5M2ExIDEgMCAwIDAtMS40MTQgMS40MTRsMTIgMTJhMSAxIDAgMCAwIDEuNDE0IDBsMTItMTJhMSAxIDAgMCAwIDAtMS40MTRcIi8+XHJcbiAgICAgICAgICAgICAgICAgIDwvc3ZnPlxyXG4gICAgICAgICAgICAgICAgPC90ZD5cclxuICAgICAgICAgICAgICA8L3RyPlxyXG4gICAgICAgICAgICA8L3Rib2R5PlxyXG4gICAgICAgICAgPC90YWJsZT5cclxuICAgICAgICAgIDwhLS0gQWRkIHNlY29uZGFyeSBudW1iZXIgYnV0dG9uIC0tPlxyXG4gICAgICAgICAgPGJ1dHRvbiBzdHlsZT1cImJhY2tncm91bmQ6I2ZmZjsgYm9yZGVyOjFweCBzb2xpZCAjYzRjNGM0OyBwYWRkaW5nOjhweCAyMHB4OyBib3JkZXItcmFkaXVzOjE4cHg7IGZvbnQtc2l6ZToxNHB4OyBmb250LXdlaWdodDo0MDA7IGN1cnNvcjpwb2ludGVyOyBjb2xvcjojMzMzO1wiIG9ubW91c2VvdmVyPVwidGhpcy5zdHlsZS5iYWNrZ3JvdW5kPScjZWRlZGVkJ1wiIG9ubW91c2VvdXQ9XCJ0aGlzLnN0eWxlLmJhY2tncm91bmQ9JyNmZmYnXCI+QWRkIHNlY29uZGFyeSBudW1iZXI8L2J1dHRvbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8ZGl2IHN0eWxlPVwiaGVpZ2h0OjFweDsgYmFja2dyb3VuZDojZThlOGU4OyBtYXJnaW46OHB4IDA7XCI+PC9kaXY+XHJcblxyXG4gICAgICA8IS0tIENhbGxlciBJRCBzZWN0aW9uIC0tPlxyXG4gICAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTpmbGV4OyBhbGlnbi1pdGVtczpjZW50ZXI7IHBhZGRpbmc6MTZweCAwOyBjdXJzb3I6cG9pbnRlcjtcIiBvbm1vdXNlb3Zlcj1cInRoaXMuc3R5bGUuYmFja2dyb3VuZD0nI2ZhZmFmYSdcIiBvbm1vdXNlb3V0PVwidGhpcy5zdHlsZS5iYWNrZ3JvdW5kPSd0cmFuc3BhcmVudCdcIj5cclxuICAgICAgICA8ZGl2IHN0eWxlPVwibWluLXdpZHRoOjE3MHB4OyBmb250LXdlaWdodDo0MDA7IGZvbnQtc2l6ZToxNHB4OyBjb2xvcjojMTIxMjEyOyBkaXNwbGF5OmZsZXg7IGFsaWduLWl0ZW1zOmNlbnRlcjtcIj5cclxuICAgICAgICAgIDxzcGFuPkNhbGxlciBJRDwvc3Bhbj5cclxuICAgICAgICAgIDxpbWcgc3R5bGU9XCJtYXJnaW4tbGVmdDogLjVyZW07XCIgc3JjPVwiYXNzZXRzL2ljb25zL2luZm8tY2lyY2xlLXJlZ3VsYXIuc3ZnXCIgd2lkdGg9XCIxNlwiIGFsdD1cIlwiPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgc3R5bGU9XCJmbGV4OjE7XCI+PC9kaXY+XHJcbiAgICAgICAgPGRpdiBzdHlsZT1cInBhZGRpbmctcmlnaHQ6OHB4OyBkaXNwbGF5OmZsZXg7IGFsaWduLWl0ZW1zOmNlbnRlcjtcIj5cclxuICAgICAgICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHZpZXdCb3g9XCIwIDAgMzIgMzJcIiBzdHlsZT1cIndpZHRoOjE2cHg7IGhlaWdodDoxNnB4OyBjb2xvcjojMjIyMjIyOyB0cmFuc2Zvcm06cm90YXRlKC05MGRlZyk7IHRyYW5zZm9ybS1vcmlnaW46Y2VudGVyOyBkaXNwbGF5OmJsb2NrOyBtYXJnaW46MDtcIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cclxuICAgICAgICAgICAgPHBhdGggZmlsbD1cImN1cnJlbnRDb2xvclwiIGQ9XCJNMjguNzA4IDkuMjkzYTEgMSAwIDAgMC0xLjQxNSAwTDE2IDIwLjU4NiA0LjcwNyA5LjI5M2ExIDEgMCAwIDAtMS40MTQgMS40MTRsMTIgMTJhMSAxIDAgMCAwIDEuNDE0IDBsMTItMTJhMSAxIDAgMCAwIDAtMS40MTRcIi8+XHJcbiAgICAgICAgICA8L3N2Zz5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxkaXYgc3R5bGU9XCJoZWlnaHQ6MXB4OyBiYWNrZ3JvdW5kOiNlOGU4ZTg7IG1hcmdpbjo4cHggMDtcIj48L2Rpdj5cclxuXHJcbiAgICAgIDwhLS0gRW1lcmdlbmN5IGNhbGxiYWNrIG51bWJlciBzZWN0aW9uIC0tPlxyXG4gICAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTpmbGV4OyBhbGlnbi1pdGVtczpmbGV4LXN0YXJ0OyBwYWRkaW5nOjE2cHggMDsgY3Vyc29yOnBvaW50ZXI7XCIgb25tb3VzZW92ZXI9XCJ0aGlzLnN0eWxlLmJhY2tncm91bmQ9JyNmYWZhZmEnXCIgb25tb3VzZW91dD1cInRoaXMuc3R5bGUuYmFja2dyb3VuZD0ndHJhbnNwYXJlbnQnXCI+XHJcbiAgICAgICAgPGRpdiBzdHlsZT1cIm1pbi13aWR0aDoxNzBweDsgZm9udC13ZWlnaHQ6NDAwOyBmb250LXNpemU6MTRweDsgY29sb3I6IzEyMTIxMjsgZGlzcGxheTpmbGV4OyBhbGlnbi1pdGVtczpmbGV4LXN0YXJ0O1wiPlxyXG4gICAgICAgICAgPGRpdj5cclxuICAgICAgICAgICAgPGRpdiBzdHlsZT1cImRpc3BsYXk6ZmxleDsgYWxpZ24taXRlbXM6Y2VudGVyO1wiPlxyXG4gICAgICAgICAgICAgIDxzcGFuPkVtZXJnZW5jeSBjYWxsYmFjazwvc3Bhbj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgc3R5bGU9XCJkaXNwbGF5OmZsZXg7IGFsaWduLWl0ZW1zOmNlbnRlcjtcIj5cclxuICAgICAgICAgICAgICA8c3Bhbj5udW1iZXI8L3NwYW4+XHJcbiAgICAgICAgICAgICAgPGltZyBzdHlsZT1cIm1hcmdpbi1sZWZ0OiAuNXJlbTtcIiBzcmM9XCJhc3NldHMvaWNvbnMvaW5mby1jaXJjbGUtcmVndWxhci5zdmdcIiB3aWR0aD1cIjE2XCIgYWx0PVwiXCI+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBzdHlsZT1cImZsZXg6MTsgZGlzcGxheTpmbGV4OyBhbGlnbi1pdGVtczpmbGV4LXN0YXJ0OyBwYWRkaW5nLXRvcDoycHg7XCI+XHJcbiAgICAgICAgICA8aSBjbGFzcz1cImZhIGZhLXRpbWVzLWNpcmNsZVwiIHN0eWxlPVwiY29sb3I6I2M2MjgyODsgbWFyZ2luLXJpZ2h0OjhweDsgbWFyZ2luLXRvcDogMnB4OyBmb250LXNpemU6MTRweDtcIj48L2k+XHJcbiAgICAgICAgICA8c3BhbiBzdHlsZT1cImNvbG9yOiNjNjI4Mjg7IGZvbnQtc2l6ZToxM3B4OyBsaW5lLWhlaWdodDoxLjQ7XCI+QWxsIGNhbGxzIHdpbGwgYmUgYmxvY2tlZCBpZiB0aGVyZSdzIG5vIEVDQk4sIGFzc2lnbiBhIHBob25lIG51bWJlciB0byB0aGlzIHVzZXIgb3Igc2V0IHRoZSBsb2NhdGlvbiBkZWZhdWx0IEVDQk4uPC9zcGFuPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgc3R5bGU9XCJwYWRkaW5nLXJpZ2h0OjhweDsgZGlzcGxheTpmbGV4OyBhbGlnbi1pdGVtczpjZW50ZXI7XCI+XHJcbiAgICAgICAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB2aWV3Qm94PVwiMCAwIDMyIDMyXCIgc3R5bGU9XCJ3aWR0aDoxNnB4OyBoZWlnaHQ6MTZweDsgY29sb3I6IzIyMjIyMjsgdHJhbnNmb3JtOnJvdGF0ZSgtOTBkZWcpOyB0cmFuc2Zvcm0tb3JpZ2luOmNlbnRlcjsgZGlzcGxheTpibG9jazsgbWFyZ2luOjA7XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XHJcbiAgICAgICAgICAgIDxwYXRoIGZpbGw9XCJjdXJyZW50Q29sb3JcIiBkPVwiTTI4LjcwOCA5LjI5M2ExIDEgMCAwIDAtMS40MTUgMEwxNiAyMC41ODYgNC43MDcgOS4yOTNhMSAxIDAgMCAwLTEuNDE0IDEuNDE0bDEyIDEyYTEgMSAwIDAgMCAxLjQxNCAwbDEyLTEyYTEgMSAwIDAgMCAwLTEuNDE0XCIvPlxyXG4gICAgICAgICAgPC9zdmc+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG5cclxuPCEtLSB1c2VyLWNhbGxpbmctZXh0ZW5zaW9uXHJcbiAgICAqbmdJZj1cImZvcm1Db250cm9sXCJcclxuICAgIFtzaXRlSWRdPVwidGhpcy5zaXRlSWRcIlxyXG4gICAgICAgICAgICAgIFtjb250cm9sXT1cImZvcm1Db250cm9sXCJcclxuICAgICAgICAgICAgICBbcm91dGVQYXJ0aXRpb25dPVwidGhpcy5saW5lQXNzb2NpYXRpb24uZGlyZWN0b3J5TnVtYmVyLnJvdXRlUGFydGl0aW9uTmFtZVwiXHJcbiAgICAgICAgICAgICAgW2RpcmVjdG9yeU51bWJlcl09XCJ0aGlzLmxpbmVBc3NvY2lhdGlvbi5kaXJlY3RvcnlOdW1iZXIuZGlyZWN0b3J5TnVtYmVyXCJcclxuICAgICAgICAgICAgICAob25DaGFuZ2UpPVwib25EaXJlY3RvcnlOdW1iZXJDaGFuZ2UoJGV2ZW50KVwiPlxyXG4gICAgICAgICAgICA8L2FwcC11c2VyLWNhbGxpbmctZXh0ZW5zaW9uPiAtLT5cclxuIl19

package/esm2020/user-manage/src/user-info/user-info.component.mjs

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/material/tooltip";
+export class UserInfoComponent {
+}
+UserInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserInfoComponent, selector: "app-user-info", inputs: { name: "name", active: "active", email: "email", position: "position", webexUUID: "webexUUID" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n  <!-- <div class=\"content-box\"> -->\n  <div class=\"info-holder\">\n     <div class=\"info-holder__user-image\">\n        <i class=\"icon-people-regular\"></i>\n    </div>\n    <div class=\"info-holder__user-information\">\n      <div class=\"info-holder__user-name\">\n        {{name}}\n        <ng-container *ngIf=\"webexUUID\">\n          <span [matTooltip]=\"'Multi-Tenant'\" matTooltipPosition=\"right\" style=\"margin-left: 8px; vertical-align: middle;\">\n            <img src=\"assets/icons/webex.svg\" width=\"20\" alt=\"\" />\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"!webexUUID\">\n          <span [matTooltip]=\"'Dedicated Instance'\" matTooltipPosition=\"right\" style=\"margin-left: 8px; vertical-align: middle;\">\n            <img src=\"assets/icons/mt.svg\" width=\"20\" alt=\"\" />\n          </span>\n        </ng-container>\n      </div>\n      <div class=\"info-holder__user-breadcrumbs\">\n        <div class=\"is-active\" *ngIf=\"active; else notActive\">\n          <span class=\"icon-user-status icon-user-status-active\"></span>Active\n        </div>\n        <div class=\"icon-text-wrapper\">\n          <div class=\"icon-separator\"></div>\n          <div class=\"email\">{{email}}</div>\n        </div>\n        <div class=\"icon-text-wrapper\">\n          <div class=\"icon-separator\"></div>\n          <div class=\"position\">{{position}}</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"action-btn-wrapper\">\n      <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n    </div>\n  </div>\n  <!-- </div> -->\n</div>\n\n<ng-template #notActive>\n    <div class=\"is-active\">\n        <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n        </svg>\n        <div>Not active</div>\n    </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{flex:1;display:flex;align-items:center;justify-content:flex-end}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-info', template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n  <!-- <div class=\"content-box\"> -->\n  <div class=\"info-holder\">\n     <div class=\"info-holder__user-image\">\n        <i class=\"icon-people-regular\"></i>\n    </div>\n    <div class=\"info-holder__user-information\">\n      <div class=\"info-holder__user-name\">\n        {{name}}\n        <ng-container *ngIf=\"webexUUID\">\n          <span [matTooltip]=\"'Multi-Tenant'\" matTooltipPosition=\"right\" style=\"margin-left: 8px; vertical-align: middle;\">\n            <img src=\"assets/icons/webex.svg\" width=\"20\" alt=\"\" />\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"!webexUUID\">\n          <span [matTooltip]=\"'Dedicated Instance'\" matTooltipPosition=\"right\" style=\"margin-left: 8px; vertical-align: middle;\">\n            <img src=\"assets/icons/mt.svg\" width=\"20\" alt=\"\" />\n          </span>\n        </ng-container>\n      </div>\n      <div class=\"info-holder__user-breadcrumbs\">\n        <div class=\"is-active\" *ngIf=\"active; else notActive\">\n          <span class=\"icon-user-status icon-user-status-active\"></span>Active\n        </div>\n        <div class=\"icon-text-wrapper\">\n          <div class=\"icon-separator\"></div>\n          <div class=\"email\">{{email}}</div>\n        </div>\n        <div class=\"icon-text-wrapper\">\n          <div class=\"icon-separator\"></div>\n          <div class=\"position\">{{position}}</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"action-btn-wrapper\">\n      <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n    </div>\n  </div>\n  <!-- </div> -->\n</div>\n\n<ng-template #notActive>\n    <div class=\"is-active\">\n        <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n        </svg>\n        <div>Not active</div>\n    </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{flex:1;display:flex;align-items:center;justify-content:flex-end}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], email: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], webexUUID: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1pbmZvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3R1a2kvd2lkZ2V0cy91c2VyLW1hbmFnZS9zcmMvdXNlci1pbmZvL3VzZXItaW5mby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90dWtpL3dpZGdldHMvdXNlci1tYW5hZ2Uvc3JjL3VzZXItaW5mby91c2VyLWluZm8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFPakQsTUFBTSxPQUFPLGlCQUFpQjs7K0dBQWpCLGlCQUFpQjttR0FBakIsaUJBQWlCLCtKQ1A5Qix5NEVBaURBOzRGRDFDYSxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0UsZUFBZTs4QkFNekIsSUFBSTtzQkFESCxLQUFLO2dCQUdOLE1BQU07c0JBREwsS0FBSztnQkFHTixLQUFLO3NCQURKLEtBQUs7Z0JBR04sUUFBUTtzQkFEUCxLQUFLO2dCQUdOLFNBQVM7c0JBRFIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLXVzZXItaW5mbycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3VzZXItaW5mby5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdXNlci1pbmZvLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFVzZXJJbmZvQ29tcG9uZW50IHtcclxuICBASW5wdXQoKVxyXG4gIG5hbWUhOiBzdHJpbmc7XHJcbiAgQElucHV0KClcclxuICBhY3RpdmUhOiBib29sZWFuO1xyXG4gIEBJbnB1dCgpXHJcbiAgZW1haWwhOiBzdHJpbmc7XHJcbiAgQElucHV0KClcclxuICBwb3NpdGlvbiE6IHN0cmluZztcclxuICBASW5wdXQoKVxyXG4gIHdlYmV4VVVJRCE6IHN0cmluZztcclxuXHJcblxyXG59XHJcbiIsIjxkaXYgc3R5bGU9XCJkaXNwbGF5OiBmbGV4OyBhbGlnbi1pdGVtczogY2VudGVyOyBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47IGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1wiPlxuICA8IS0tIDxkaXYgY2xhc3M9XCJjb250ZW50LWJveFwiPiAtLT5cbiAgPGRpdiBjbGFzcz1cImluZm8taG9sZGVyXCI+XG4gICAgIDxkaXYgY2xhc3M9XCJpbmZvLWhvbGRlcl9fdXNlci1pbWFnZVwiPlxuICAgICAgICA8aSBjbGFzcz1cImljb24tcGVvcGxlLXJlZ3VsYXJcIj48L2k+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImluZm8taG9sZGVyX191c2VyLWluZm9ybWF0aW9uXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiaW5mby1ob2xkZXJfX3VzZXItbmFtZVwiPlxuICAgICAgICB7e25hbWV9fVxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwid2ViZXhVVUlEXCI+XG4gICAgICAgICAgPHNwYW4gW21hdFRvb2x0aXBdPVwiJ011bHRpLVRlbmFudCdcIiBtYXRUb29sdGlwUG9zaXRpb249XCJyaWdodFwiIHN0eWxlPVwibWFyZ2luLWxlZnQ6IDhweDsgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcIj5cbiAgICAgICAgICAgIDxpbWcgc3JjPVwiYXNzZXRzL2ljb25zL3dlYmV4LnN2Z1wiIHdpZHRoPVwiMjBcIiBhbHQ9XCJcIiAvPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhd2ViZXhVVUlEXCI+XG4gICAgICAgICAgPHNwYW4gW21hdFRvb2x0aXBdPVwiJ0RlZGljYXRlZCBJbnN0YW5jZSdcIiBtYXRUb29sdGlwUG9zaXRpb249XCJyaWdodFwiIHN0eWxlPVwibWFyZ2luLWxlZnQ6IDhweDsgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcIj5cbiAgICAgICAgICAgIDxpbWcgc3JjPVwiYXNzZXRzL2ljb25zL210LnN2Z1wiIHdpZHRoPVwiMjBcIiBhbHQ9XCJcIiAvPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJpbmZvLWhvbGRlcl9fdXNlci1icmVhZGNydW1ic1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaXMtYWN0aXZlXCIgKm5nSWY9XCJhY3RpdmU7IGVsc2Ugbm90QWN0aXZlXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJpY29uLXVzZXItc3RhdHVzIGljb24tdXNlci1zdGF0dXMtYWN0aXZlXCI+PC9zcGFuPkFjdGl2ZVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImljb24tdGV4dC13cmFwcGVyXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImljb24tc2VwYXJhdG9yXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImVtYWlsXCI+e3tlbWFpbH19PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaWNvbi10ZXh0LXdyYXBwZXJcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaWNvbi1zZXBhcmF0b3JcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwicG9zaXRpb25cIj57e3Bvc2l0aW9ufX08L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uLWJ0bi13cmFwcGVyXCI+XG4gICAgICA8YnV0dG9uPjxzcGFuPkFjdGlvbnM8L3NwYW4+PHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxMlwiIGhlaWdodD1cIjE0XCIgdmlld0JveD1cIjAgMCAzMiAzMlwiIHN0eWxlPVwidmVydGljYWwtYWxpZ246bWlkZGxlO1wiPjxwYXRoIGQ9XCJNMjguNzA4IDkuMjkzYTEgMSAwIDAgMC0xLjQxNSAwTDE2IDIwLjU4NiA0LjcwNyA5LjI5M2ExIDEgMCAwIDAtMS40MTQgMS40MTRsMTIgMTJhMSAxIDAgMCAwIDEuNDE0IDBsMTItMTJhMSAxIDAgMCAwIDAtMS40MTRcIiBmaWxsPVwiY3VycmVudENvbG9yXCIvPjwvc3ZnPjwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPCEtLSA8L2Rpdj4gLS0+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNub3RBY3RpdmU+XG4gICAgPGRpdiBjbGFzcz1cImlzLWFjdGl2ZVwiPlxuICAgICAgICA8c3ZnIHdpZHRoPVwiOFwiIGhlaWdodD1cIjlcIiB2aWV3Qm94PVwiMCAwIDggOVwiIGZpbGw9XCJub25lXCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiPlxuICAgICAgICAgICAgPHBhdGggZmlsbC1ydWxlPVwiZXZlbm9kZFwiIGNsaXAtcnVsZT1cImV2ZW5vZGRcIiBkPVwiTTQgOC41QzYuMjA5MTQgOC41IDggNi43MDkxNCA4IDQuNUM4IDIuMjkwODYgNi4yMDkxNCAwLjUgNCAwLjVDMS43OTA4NiAwLjUgMCAyLjI5MDg2IDAgNC41QzAgNi43MDkxNCAxLjc5MDg2IDguNSA0IDguNVpcIiBmaWxsPVwiZ3JleVwiLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICAgIDxkaXY+Tm90IGFjdGl2ZTwvZGl2PlxuICAgIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==