@tuki-io/tuki-widgets 0.0.124 → 0.0.126

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 (12) hide show
  1. package/esm2020/user-device-manage/src/device-manage-widget.component.mjs +2 -2
  2. package/esm2020/users-list/src/users-list.component.mjs +3 -3
  3. package/esm2020/users-list/src/utils/pagination/pagination.component.mjs +3 -3
  4. package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs +2 -2
  5. package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
  6. package/fesm2015/tuki-io-tuki-widgets-users-list.mjs +4 -4
  7. package/fesm2015/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
  8. package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs +2 -2
  9. package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
  10. package/fesm2020/tuki-io-tuki-widgets-users-list.mjs +4 -4
  11. package/fesm2020/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
  12. package/package.json +1 -1
package/esm2020/user-device-manage/src/device-manage-widget.component.mjs CHANGED
@@ -89,10 +89,10 @@ export class DeviceManageWidgetComponent {
89
89
  }
90
90
  }
91
91
  DeviceManageWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceManageWidgetComponent, deps: [{ token: i1.UserService }, { token: i2.DeviceService }, { token: i3.APIService }, { token: i4.LineService }, { token: i5.SiteSettingsService }, { token: i6.ValidationService }, { token: i7.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
92
- DeviceManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceManageWidgetComponent, selector: "app-device-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", isLdap: "isLdap", deviceName: "deviceName" }, outputs: { onSave: "onSave", onChange: "onChange", discardChanges: "discardChanges", goBack: "goBack" }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "\r\n\r\n<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!dataPending\">\r\n <!-- <div class=\"go-back-box\" (click)=\"onGoBack()\"> -->\r\n <div class=\"go-back-box\">\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\">Devices</span>\r\n </div>\r\n </div>\r\n\r\n <app-device-info \r\n [device]=\"device\" \r\n [firstName]=\"tokenObj?.firstName\" \r\n [lastName]=\"tokenObj?.lastName\"\r\n (click)=\"onGoBack()\"\r\n >\r\n \r\n </app-device-info>\r\n <div class=\"device-info\">\r\n\r\n <div class=\"device-info-part\">\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Details</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">{{ device?.lines || 'N/A' }}</span>\r\n <span class=\"extra-info\">Lines</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">{{ device?.macAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">MAC address</span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">{{ device?.ipAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">Host IP address</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">{{ device?.remoteIpAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">Remote IP address</span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">Cisco</span>\r\n <span class=\"extra-info\">Managed By</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Software</span>\r\n <div class=\"icon-bordered-wrapper\">\r\n <i class=\"icon configure-icon rem1\"></i>\r\n </div>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">Stable</span>\r\n <span class=\"extra-info\">Software Channel</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">N/A</span>\r\n <span class=\"extra-info\">Software version</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Tags</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\" style=\"flex-direction: column; gap: 1rem;\">\r\n <div class=\"tags-list-container\">\r\n <div *ngFor=\"let tag of tags; let i = index\" class=\"tag-label\">\r\n <span class=\"tag-desccription\">{{ tag }}</span>\r\n <i class=\"icon close-icon\" (click)=\"removeTag(i)\" style=\"width: 0.75rem; height: 0.75rem; flex: 0 0 auto;\"></i>\r\n </div>\r\n </div>\r\n <div class=\"tags-list-container\">\r\n <button class=\"tag-label add-tag\" (click)=\"showInput()\">\r\n <span class=\"icon plus-icon\" style=\"width: 0.75rem; height: 0.75rem;\"></span>\r\n <span>Add tag</span>\r\n </button>\r\n <input \r\n #tagInput\r\n id=\"enter-tag-input\" \r\n *ngIf=\"isAdding\"\r\n [(ngModel)]=\"newTag\"\r\n (blur)=\"onBlur()\"\r\n type=\"text\"\r\n class=\"add-tag-input\" \r\n placeholder=\"Enter tag...\"\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n <div class=\"device-info-part\">\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Issues & Information</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"description\">\r\n <i class=\"icon check-icon rem1\" style=\"filter: invert(26%) sepia(27%) saturate(1093%) hue-rotate(114deg) brightness(93%) contrast(90%);\"></i>\r\n <span class=\"text-description\">No reported issues at this time</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Hoteling</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <span class=\"text-description\">Allow this device to be used as a Hoteling Host by visiting guests.</span>\r\n <div class=\"toggle-wrapper\">\r\n <mat-slide-toggle class=\"custom-toggle\" name=\"logMissedCalls\" [formControl]=\"logMissedCall\"></mat-slide-toggle>\r\n <i class=\"icon info-icon rem1\" \r\n style=\"filter: invert(20%) sepia(99%) saturate(2065%) hue-rotate(197deg) brightness(92%) contrast(101%);\"\r\n [matTooltip]=\"'Enabling this device for Hoteling means that a guest (end user) can log into this host (workspace phone) and use this phone as if it were their own. This is useful when traveling to a remote office but still needing to place/receive calls with their telephone number and to access features normally available to them on their own office phone.'\"\r\n ></i>\r\n </div>\r\n <span class=\"text-description\">Limit the time a guest can use this phone to</span>\r\n <mat-select [formControl]=\"hotelingLimitTime\">\r\n <mat-option *ngFor=\"let type of HOTELING_TIME_HOURS\" [value]=\"type\">\r\n {{type}}\r\n </mat-option>\r\n </mat-select>\r\n </div>\r\n </div>\r\n </section>\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Device Management</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <p class=\"text-description\">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>\r\n <div class=\"flex-column\">\r\n <span class=\"text-description\">To add and remove users and workspaces, select <b>Configure Lines.</b></span>\r\n <span class=\"text-description\">To customize the programmable Line Keys, select <b>Configure Layout.</b></span>\r\n <span class=\"text-description\">To set up the display settings and dialing options, select <b>Device Settings</b>.</span>\r\n </div>\r\n <table style=\"width:100%; border-collapse:collapse;\">\r\n <thead>\r\n <tr style=\"background:#ededed;\">\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Index #</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Name</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Number/Extension</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Appearances</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Registered</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: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\"></span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">kelliey kellie</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">NA/333004</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">1</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <i class=\"icon warning-icon rem1\" [matTooltip]=\"'Unregistered'\"></i>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"totals\">\r\n <span class=\"text-description\">15 of 16 total lines available</span>\r\n </div>\r\n <div class=\"configure-lines\">\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Configure Lines</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Configure Layout</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Device Settings</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Support</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <div class=\"configure-lines\">\r\n <div class=\"line\">\r\n <div>\r\n <span class=\"text-description\">Meetings & Calls</span>\r\n <span class=\"label new\">New</span>\r\n <i class=\"icon info-icon rem1\"\r\n [matTooltip]=\"'Troubleshooting provides details about the device related to status, network activity, and call information.'\"\r\n ></i>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Go to troubleshooting</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <span class=\"text-description\">Device Logs</span>\r\n <i class=\"icon info-icon rem1\" [matTooltip]=\"'Generate device logs and download them to your computer.'\"></i>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n \r\n</div>", styles: ["@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: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}.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;max-width:175px;margin-left:2.75rem;border:2px solid gray;padding:.25rem .75rem;border-radius:8px}::ng-deep .mat-option{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;line-height:48px!important;height:48px!important;padding:0 10px!important;text-align:left!important;text-decoration:none!important;position:relative!important;cursor:pointer!important;outline:none!important;display:flex!important;flex-direction:row!important;max-width:100%!important;box-sizing:border-box!important;align-items:center!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important}::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:#bfe3ff;color:#000}::ng-deep .mat-select-panel .mat-option:not(.search-input):hover{background:#daedfc}::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}::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{width:95%;margin:auto;margin-left:.5rem;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}.device-info{display:flex;gap:1rem;padding:1.5rem}.device-info .device-info-part{display:flex;flex-direction:column;gap:1rem;flex:1;min-width:0}.device-info .device-info-part .card{display:flex;flex-direction:column;padding:1rem 1.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#ffffff;min-width:0}.device-info .device-info-part .card .header{display:flex;align-items:center;justify-content:space-between}.device-info .device-info-part .card .header .title{font-weight:500;font-size:1rem;font-family:Poppins,Poppins,sans-serif}.device-info .device-info-part .card .main-content{display:flex;flex-direction:column;min-width:0}.device-info .device-info-part .card .main-content .detail-row{display:flex;flex:1;padding:1rem 0;min-width:0}.device-info .device-info-part .card .main-content .detail-row .side{display:flex;flex-direction:column;flex:1}.device-info .device-info-part .card .main-content .detail-row .side .main-value{font-weight:500;font-size:.875rem}.device-info .device-info-part .card .main-content .detail-row .side .extra-info{font-weight:350;font-size:.75rem}.device-info .device-info-part .card .main-content .detail-row .description{display:flex;gap:.5rem;align-items:center}.device-info .device-info-part .card .main-content .detail-row .toggle-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.device-info .device-info-part .card .main-content .detail-row .configure-lines{display:flex;flex-direction:column}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line{display:flex;align-items:center;justify-content:space-between;flex:1;padding:.5rem 0}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div{gap:.5rem;display:flex;align-items:center}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div .label{display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div .label.new{font-size:.75rem;border-color:#30c9b0;background-color:#e9f7f3;color:#12615a}.device-info .device-info-part .card .main-content .tags-list-container{display:flex;gap:.5rem;flex-wrap:wrap;min-width:0}.device-info .device-info-part .card .main-content .tags-list-container .tag-label{border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;padding:8px 12px;border-radius:25px;color:#000000b3;background-color:#ededed;font-weight:500;cursor:pointer;gap:.5rem;height:40px;font-size:smaller;max-width:100%;min-width:0;overflow:hidden}.device-info .device-info-part .card .main-content .tags-list-container .tag-label .tag-desccription{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.device-info .device-info-part .card .main-content .tags-list-container .add-tag-input{border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;padding:8px 12px;border-radius:25px;color:#000000b3;background-color:#ededed;font-weight:500;cursor:pointer;flex-wrap:wrap;gap:.5rem;height:40px;font-size:smaller;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important;margin-left:-99px}.device-info .device-info-part .card .main-content .tags-list-container .add-tag-input:focus-visible{outline:none}.device-info .device-info-part .card .main-content .add-tag{background-color:#fff!important}.device-info .device-info-part .card .main-content .add-tag:hover{color:#0353a8!important}.flex-column{display:flex;flex-direction:column}.gap-0_75{gap:.75rem}.text-description{font-size:.875rem;font-weight:400}.icon{background-repeat:no-repeat;background-position:center;display:inline-block;background-size:contain}.icon-bordered-wrapper{display:flex;inline-size:1.5rem;border-radius:50rem;border:1px solid rgba(0,0,0,.5019607843);width:1.5rem;height:1.5rem;align-items:center;justify-content:center;cursor:pointer}.configure-icon{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%22M16 10.25A5.75 5.75 0 1 0 21.75 16 5.756 5.756 0 0 0 16 10.25m0 10a4.25 4.25 0 1 1 0-8.5 4.25 4.25 0 0 1 0 8.5M28 13.25H25.67a.25.25 0 0 1-.231-.155l-.667-1.633a.25.25 0 0 1 .057-.273l1.66-1.631a1.75 1.75 0 0 0 .024-2.475l-1.4-1.427a1.753 1.753 0 0 0-2.476-.024l-1.665 1.635a.25.25 0 0 1-.273.053l-1.796-.754a.25.25 0 0 1-.154-.23V4A1.75 1.75 0 0 0 17 2.25h-2A1.75 1.75 0 0 0 13.25 4v2.331a.25.25 0 0 1-.155.232l-1.714.71a.25.25 0 0 1-.273-.054L9.459 5.571a1.75 1.75 0 0 0-2.475 0L5.57 6.985a1.75 1.75 0 0 0 0 2.474l1.65 1.649a.25.25 0 0 1 .054.272l-.712 1.716a.25.25 0 0 1-.23.154H4A1.75 1.75 0 0 0 2.25 15v2A1.75 1.75 0 0 0 4 18.75h2.332a.25.25 0 0 1 .23.155l.71 1.713a.25.25 0 0 1-.053.274L5.57 22.54a1.75 1.75 0 0 0 0 2.476l1.415 1.414a1.75 1.75 0 0 0 2.476 0l1.648-1.65a.25.25 0 0 1 .272-.054l1.716.712a.25.25 0 0 1 .153.23V28A1.75 1.75 0 0 0 15 29.75h2A1.75 1.75 0 0 0 18.75 28v-2.332a.25.25 0 0 1 .156-.231l1.715-.71a.25.25 0 0 1 .272.054l1.649 1.649a1.753 1.753 0 0 0 2.474 0l1.416-1.415a1.753 1.753 0 0 0-.002-2.475l-1.648-1.648a.25.25 0 0 1-.055-.273l.712-1.715a.25.25 0 0 1 .23-.154H28A1.75 1.75 0 0 0 29.75 17v-2A1.75 1.75 0 0 0 28 13.25m.25 3.75a.25.25 0 0 1-.25.25h-2.331a1.74 1.74 0 0 0-1.617 1.08l-.712 1.716a1.75 1.75 0 0 0 .38 1.907L25.37 23.6a.25.25 0 0 1 0 .355l-1.414 1.414a.25.25 0 0 1-.273.054.3.3 0 0 1-.08-.054l-1.65-1.65a1.74 1.74 0 0 0-1.907-.379l-1.713.71a1.74 1.74 0 0 0-1.082 1.617V28a.25.25 0 0 1-.25.25h-2a.25.25 0 0 1-.25-.25v-2.332a1.74 1.74 0 0 0-1.08-1.616l-1.716-.712a1.74 1.74 0 0 0-1.907.38L8.4 25.37a.25.25 0 0 1-.355 0L6.63 23.955a.25.25 0 0 1 0-.354l1.65-1.648a1.745 1.745 0 0 0 .379-1.908l-.71-1.714a1.74 1.74 0 0 0-1.617-1.08H4a.25.25 0 0 1-.25-.25v-2a.25.25 0 0 1 .25-.25h2.332a1.74 1.74 0 0 0 1.616-1.082l.712-1.715a1.75 1.75 0 0 0-.38-1.907L6.63 8.4a.25.25 0 0 1 0-.354l1.414-1.414a.25.25 0 0 1 .355 0l1.648 1.649a1.74 1.74 0 0 0 1.908.379l1.713-.71A1.74 1.74 0 0 0 14.75 6.33v-2.33a.25.25 0 0 1 .25-.25h2a.25.25 0 0 1 .25.25v2.334a1.75 1.75 0 0 0 1.073 1.614l1.796.754a1.75 1.75 0 0 0 1.903-.364h.001l1.666-1.636a.255.255 0 0 1 .355.003l1.4 1.428a.25.25 0 0 1-.004.354l-1.66 1.63a1.745 1.745 0 0 0-.396 1.91l.668 1.636a1.74 1.74 0 0 0 1.62 1.086H28a.25.25 0 0 1 .25.25z%22%2F%3E%3C%2Fsvg%3E\")}.arrow-right-icon{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%22m22.53 15.47-12-12a.75.75 0 1 0-1.06 1.06L20.94 16 9.47 27.47a.75.75 0 1 0 1.06 1.06l12-12a.75.75 0 0 0 0-1.06%22%2F%3E%3C%2Fsvg%3E\")}.check-icon{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%22M16 2.25A13.75 13.75 0 1 0 29.75 16 13.765 13.765 0 0 0 16 2.25m0 26A12.25 12.25 0 1 1 28.25 16 12.264 12.264 0 0 1 16 28.25M20.512 12.43l-6.472 5.547-2.509-2.521a.75.75 0 0 0-1.062 1.058l3 3.015a.75.75 0 0 0 1.02.04l7-6a.75.75 0 1 0-.977-1.139%22%2F%3E%3C%2Fsvg%3E\")}.info-icon{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%22M15.75 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M16.75 14.5a.75.75 0 0 0-.75-.75h-2a.75.75 0 0 0 0 1.5h1.25v7H13a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-2.25zM2.25 16C2.25 8.406 8.406 2.25 16 2.25S29.75 8.406 29.75 16 23.594 29.75 16 29.75 2.25 23.594 2.25 16M16 3.75C9.235 3.75 3.75 9.235 3.75 16S9.235 28.25 16 28.25 28.25 22.765 28.25 16 22.765 3.75 16 3.75%22%2F%3E%3C%2Fsvg%3E\")}.warning-icon{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%22M29.379 23.624 18.382 4.625a2.75 2.75 0 0 0-4.764 0l-11 19A2.75 2.75 0 0 0 5 27.75h21.997a2.75 2.75 0 0 0 2.382-4.126m-1.3 2.001a1.24 1.24 0 0 1-1.082.625H5a1.25 1.25 0 0 1-1.082-1.874l10.999-19A1.25 1.25 0 0 1 16 4.75a1.25 1.25 0 0 1 1.083.626l10.997 19a1.24 1.24 0 0 1 0 1.25M16 23.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2M16 19.75a.75.75 0 0 0 .75-.75v-7a.75.75 0 1 0-1.5 0v7a.75.75 0 0 0 .75.75%22%2F%3E%3C%2Fsvg%3E\")}.plus-icon{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%22M26 15.25h-9.25V6a.75.75 0 1 0-1.5 0v9.25H6a.75.75 0 1 0 0 1.5h9.25V26a.75.75 0 1 0 1.5 0v-9.25H26a.75.75 0 1 0 0-1.5%22%2F%3E%3C%2Fsvg%3E\")}.close-icon{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%22m17.06 16 8.47-8.47a.75.75 0 0 0-.242-1.224.75.75 0 0 0-.819.163L16 14.94 7.53 6.47A.75.75 0 1 0 6.47 7.53L14.94 16l-8.47 8.47a.75.75 0 0 0 1.06 1.06L16 17.06l8.47 8.47a.75.75 0 1 0 1.06-1.06z%22%2F%3E%3C%2Fsvg%3E\")}.rem1{height:1rem;width:1rem}.rem1-25{height:1.25rem;width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i15.AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: i16.DeviceInfoComponent, selector: "app-device-info", inputs: ["device", "firstName", "lastName", "active", "email", "position"] }] });
92
+ DeviceManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceManageWidgetComponent, selector: "app-device-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", isLdap: "isLdap", deviceName: "deviceName" }, outputs: { onSave: "onSave", onChange: "onChange", discardChanges: "discardChanges", goBack: "goBack" }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "\r\n\r\n<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!dataPending\">\r\n <!-- <div class=\"go-back-box\" (click)=\"onGoBack()\"> -->\r\n <div class=\"go-back-box\">\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\">Devices</span>\r\n </div>\r\n </div>\r\n\r\n <app-device-info \r\n [device]=\"device\" \r\n [firstName]=\"tokenObj?.firstName\" \r\n [lastName]=\"tokenObj?.lastName\"\r\n (click)=\"onGoBack()\"\r\n >\r\n \r\n </app-device-info>\r\n <div class=\"device-info\">\r\n\r\n <div class=\"device-info-part\">\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Details</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">{{ device?.lines || 'N/A' }}</span>\r\n <span class=\"extra-info\">Lines</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">{{ device?.macAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">MAC address</span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">{{ device?.ipAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">Host IP address</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">{{ device?.remoteIpAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">Remote IP address</span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">Cisco</span>\r\n <span class=\"extra-info\">Managed By</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Software</span>\r\n <div class=\"icon-bordered-wrapper\">\r\n <i class=\"icon configure-icon rem1\"></i>\r\n </div>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">Stable</span>\r\n <span class=\"extra-info\">Software Channel</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">N/A</span>\r\n <span class=\"extra-info\">Software version</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Tags</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\" style=\"flex-direction: column; gap: 1rem;\">\r\n <div class=\"tags-list-container\">\r\n <div *ngFor=\"let tag of tags; let i = index\" class=\"tag-label\">\r\n <span class=\"tag-desccription\">{{ tag }}</span>\r\n <i class=\"icon close-icon\" (click)=\"removeTag(i)\" style=\"width: 0.75rem; height: 0.75rem; flex: 0 0 auto;\"></i>\r\n </div>\r\n </div>\r\n <div class=\"tags-list-container\">\r\n <button class=\"tag-label add-tag\" (click)=\"showInput()\">\r\n <span class=\"icon plus-icon\" style=\"width: 0.75rem; height: 0.75rem;\"></span>\r\n <span>Add tag</span>\r\n </button>\r\n <input \r\n #tagInput\r\n id=\"enter-tag-input\" \r\n *ngIf=\"isAdding\"\r\n [(ngModel)]=\"newTag\"\r\n (blur)=\"onBlur()\"\r\n type=\"text\"\r\n class=\"add-tag-input\" \r\n placeholder=\"Enter tag...\"\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n <div class=\"device-info-part\">\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Issues & Information</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"description\">\r\n <i class=\"icon check-icon rem1\" style=\"filter: invert(26%) sepia(27%) saturate(1093%) hue-rotate(114deg) brightness(93%) contrast(90%);\"></i>\r\n <span class=\"text-description\">No reported issues at this time</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Hoteling</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <span class=\"text-description\">Allow this device to be used as a Hoteling Host by visiting guests.</span>\r\n <div class=\"toggle-wrapper\">\r\n <mat-slide-toggle class=\"custom-toggle\" name=\"logMissedCalls\" [formControl]=\"logMissedCall\"></mat-slide-toggle>\r\n <i class=\"icon info-icon rem1\" \r\n style=\"filter: invert(20%) sepia(99%) saturate(2065%) hue-rotate(197deg) brightness(92%) contrast(101%);\"\r\n [matTooltip]=\"'Enabling this device for Hoteling means that a guest (end user) can log into this host (workspace phone) and use this phone as if it were their own. This is useful when traveling to a remote office but still needing to place/receive calls with their telephone number and to access features normally available to them on their own office phone.'\"\r\n ></i>\r\n </div>\r\n <span class=\"text-description\">Limit the time a guest can use this phone to</span>\r\n <mat-select [formControl]=\"hotelingLimitTime\">\r\n <mat-option *ngFor=\"let type of HOTELING_TIME_HOURS\" [value]=\"type\">\r\n {{type}}\r\n </mat-option>\r\n </mat-select>\r\n </div>\r\n </div>\r\n </section>\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Device Management</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <p class=\"text-description\">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>\r\n <div class=\"flex-column\">\r\n <span class=\"text-description\">To add and remove users and workspaces, select <b>Configure Lines.</b></span>\r\n <span class=\"text-description\">To customize the programmable Line Keys, select <b>Configure Layout.</b></span>\r\n <span class=\"text-description\">To set up the display settings and dialing options, select <b>Device Settings</b>.</span>\r\n </div>\r\n <table style=\"width:100%; border-collapse:collapse;\">\r\n <thead>\r\n <tr style=\"background:#ededed;\">\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Index #</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Name</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Number/Extension</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Appearances</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Registered</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: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\"></span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">kelliey kellie</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">NA/333004</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">1</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <i class=\"icon warning-icon rem1\" [matTooltip]=\"'Unregistered'\"></i>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"totals\">\r\n <span class=\"text-description\">15 of 16 total lines available</span>\r\n </div>\r\n <div class=\"configure-lines\">\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Configure Lines</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Configure Layout</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Device Settings</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Support</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <div class=\"configure-lines\">\r\n <div class=\"line\">\r\n <div>\r\n <span class=\"text-description\">Meetings & Calls</span>\r\n <span class=\"label new\">New</span>\r\n <i class=\"icon info-icon rem1\"\r\n [matTooltip]=\"'Troubleshooting provides details about the device related to status, network activity, and call information.'\"\r\n ></i>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Go to troubleshooting</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <span class=\"text-description\">Device Logs</span>\r\n <i class=\"icon info-icon rem1\" [matTooltip]=\"'Generate device logs and download them to your computer.'\"></i>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n \r\n</div>", styles: ["@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: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}.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}:host ::ng-deep .mat-select{line-height:20px;max-width:175px;margin-left:2.75rem;border:2px solid gray;padding:.25rem .75rem;border-radius:8px}:host ::ng-deep .mat-option{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;line-height:48px!important;height:48px!important;padding:0 10px!important;text-align:left!important;text-decoration:none!important;position:relative!important;cursor:pointer!important;outline:none!important;display:flex!important;flex-direction:row!important;max-width:100%!important;box-sizing:border-box!important;align-items:center!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important}:host ::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:#bfe3ff;color:#000}:host ::ng-deep .mat-select-panel .mat-option:not(.search-input):hover{background:#daedfc}::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}::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{width:95%;margin:auto;margin-left:.5rem;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}.device-info{display:flex;gap:1rem;padding:1.5rem}.device-info .device-info-part{display:flex;flex-direction:column;gap:1rem;flex:1;min-width:0}.device-info .device-info-part .card{display:flex;flex-direction:column;padding:1rem 1.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#ffffff;min-width:0}.device-info .device-info-part .card .header{display:flex;align-items:center;justify-content:space-between}.device-info .device-info-part .card .header .title{font-weight:500;font-size:1rem;font-family:Poppins,Poppins,sans-serif}.device-info .device-info-part .card .main-content{display:flex;flex-direction:column;min-width:0}.device-info .device-info-part .card .main-content .detail-row{display:flex;flex:1;padding:1rem 0;min-width:0}.device-info .device-info-part .card .main-content .detail-row .side{display:flex;flex-direction:column;flex:1}.device-info .device-info-part .card .main-content .detail-row .side .main-value{font-weight:500;font-size:.875rem}.device-info .device-info-part .card .main-content .detail-row .side .extra-info{font-weight:350;font-size:.75rem}.device-info .device-info-part .card .main-content .detail-row .description{display:flex;gap:.5rem;align-items:center}.device-info .device-info-part .card .main-content .detail-row .toggle-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.device-info .device-info-part .card .main-content .detail-row .configure-lines{display:flex;flex-direction:column}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line{display:flex;align-items:center;justify-content:space-between;flex:1;padding:.5rem 0}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div{gap:.5rem;display:flex;align-items:center}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div .label{display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div .label.new{font-size:.75rem;border-color:#30c9b0;background-color:#e9f7f3;color:#12615a}.device-info .device-info-part .card .main-content .tags-list-container{display:flex;gap:.5rem;flex-wrap:wrap;min-width:0}.device-info .device-info-part .card .main-content .tags-list-container .tag-label{border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;padding:8px 12px;border-radius:25px;color:#000000b3;background-color:#ededed;font-weight:500;cursor:pointer;gap:.5rem;height:40px;font-size:smaller;max-width:100%;min-width:0;overflow:hidden}.device-info .device-info-part .card .main-content .tags-list-container .tag-label .tag-desccription{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.device-info .device-info-part .card .main-content .tags-list-container .add-tag-input{border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;padding:8px 12px;border-radius:25px;color:#000000b3;background-color:#ededed;font-weight:500;cursor:pointer;flex-wrap:wrap;gap:.5rem;height:40px;font-size:smaller;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important;margin-left:-99px}.device-info .device-info-part .card .main-content .tags-list-container .add-tag-input:focus-visible{outline:none}.device-info .device-info-part .card .main-content .add-tag{background-color:#fff!important}.device-info .device-info-part .card .main-content .add-tag:hover{color:#0353a8!important}.flex-column{display:flex;flex-direction:column}.gap-0_75{gap:.75rem}.text-description{font-size:.875rem;font-weight:400}.icon{background-repeat:no-repeat;background-position:center;display:inline-block;background-size:contain}.icon-bordered-wrapper{display:flex;inline-size:1.5rem;border-radius:50rem;border:1px solid rgba(0,0,0,.5019607843);width:1.5rem;height:1.5rem;align-items:center;justify-content:center;cursor:pointer}.configure-icon{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%22M16 10.25A5.75 5.75 0 1 0 21.75 16 5.756 5.756 0 0 0 16 10.25m0 10a4.25 4.25 0 1 1 0-8.5 4.25 4.25 0 0 1 0 8.5M28 13.25H25.67a.25.25 0 0 1-.231-.155l-.667-1.633a.25.25 0 0 1 .057-.273l1.66-1.631a1.75 1.75 0 0 0 .024-2.475l-1.4-1.427a1.753 1.753 0 0 0-2.476-.024l-1.665 1.635a.25.25 0 0 1-.273.053l-1.796-.754a.25.25 0 0 1-.154-.23V4A1.75 1.75 0 0 0 17 2.25h-2A1.75 1.75 0 0 0 13.25 4v2.331a.25.25 0 0 1-.155.232l-1.714.71a.25.25 0 0 1-.273-.054L9.459 5.571a1.75 1.75 0 0 0-2.475 0L5.57 6.985a1.75 1.75 0 0 0 0 2.474l1.65 1.649a.25.25 0 0 1 .054.272l-.712 1.716a.25.25 0 0 1-.23.154H4A1.75 1.75 0 0 0 2.25 15v2A1.75 1.75 0 0 0 4 18.75h2.332a.25.25 0 0 1 .23.155l.71 1.713a.25.25 0 0 1-.053.274L5.57 22.54a1.75 1.75 0 0 0 0 2.476l1.415 1.414a1.75 1.75 0 0 0 2.476 0l1.648-1.65a.25.25 0 0 1 .272-.054l1.716.712a.25.25 0 0 1 .153.23V28A1.75 1.75 0 0 0 15 29.75h2A1.75 1.75 0 0 0 18.75 28v-2.332a.25.25 0 0 1 .156-.231l1.715-.71a.25.25 0 0 1 .272.054l1.649 1.649a1.753 1.753 0 0 0 2.474 0l1.416-1.415a1.753 1.753 0 0 0-.002-2.475l-1.648-1.648a.25.25 0 0 1-.055-.273l.712-1.715a.25.25 0 0 1 .23-.154H28A1.75 1.75 0 0 0 29.75 17v-2A1.75 1.75 0 0 0 28 13.25m.25 3.75a.25.25 0 0 1-.25.25h-2.331a1.74 1.74 0 0 0-1.617 1.08l-.712 1.716a1.75 1.75 0 0 0 .38 1.907L25.37 23.6a.25.25 0 0 1 0 .355l-1.414 1.414a.25.25 0 0 1-.273.054.3.3 0 0 1-.08-.054l-1.65-1.65a1.74 1.74 0 0 0-1.907-.379l-1.713.71a1.74 1.74 0 0 0-1.082 1.617V28a.25.25 0 0 1-.25.25h-2a.25.25 0 0 1-.25-.25v-2.332a1.74 1.74 0 0 0-1.08-1.616l-1.716-.712a1.74 1.74 0 0 0-1.907.38L8.4 25.37a.25.25 0 0 1-.355 0L6.63 23.955a.25.25 0 0 1 0-.354l1.65-1.648a1.745 1.745 0 0 0 .379-1.908l-.71-1.714a1.74 1.74 0 0 0-1.617-1.08H4a.25.25 0 0 1-.25-.25v-2a.25.25 0 0 1 .25-.25h2.332a1.74 1.74 0 0 0 1.616-1.082l.712-1.715a1.75 1.75 0 0 0-.38-1.907L6.63 8.4a.25.25 0 0 1 0-.354l1.414-1.414a.25.25 0 0 1 .355 0l1.648 1.649a1.74 1.74 0 0 0 1.908.379l1.713-.71A1.74 1.74 0 0 0 14.75 6.33v-2.33a.25.25 0 0 1 .25-.25h2a.25.25 0 0 1 .25.25v2.334a1.75 1.75 0 0 0 1.073 1.614l1.796.754a1.75 1.75 0 0 0 1.903-.364h.001l1.666-1.636a.255.255 0 0 1 .355.003l1.4 1.428a.25.25 0 0 1-.004.354l-1.66 1.63a1.745 1.745 0 0 0-.396 1.91l.668 1.636a1.74 1.74 0 0 0 1.62 1.086H28a.25.25 0 0 1 .25.25z%22%2F%3E%3C%2Fsvg%3E\")}.arrow-right-icon{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%22m22.53 15.47-12-12a.75.75 0 1 0-1.06 1.06L20.94 16 9.47 27.47a.75.75 0 1 0 1.06 1.06l12-12a.75.75 0 0 0 0-1.06%22%2F%3E%3C%2Fsvg%3E\")}.check-icon{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%22M16 2.25A13.75 13.75 0 1 0 29.75 16 13.765 13.765 0 0 0 16 2.25m0 26A12.25 12.25 0 1 1 28.25 16 12.264 12.264 0 0 1 16 28.25M20.512 12.43l-6.472 5.547-2.509-2.521a.75.75 0 0 0-1.062 1.058l3 3.015a.75.75 0 0 0 1.02.04l7-6a.75.75 0 1 0-.977-1.139%22%2F%3E%3C%2Fsvg%3E\")}.info-icon{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%22M15.75 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M16.75 14.5a.75.75 0 0 0-.75-.75h-2a.75.75 0 0 0 0 1.5h1.25v7H13a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-2.25zM2.25 16C2.25 8.406 8.406 2.25 16 2.25S29.75 8.406 29.75 16 23.594 29.75 16 29.75 2.25 23.594 2.25 16M16 3.75C9.235 3.75 3.75 9.235 3.75 16S9.235 28.25 16 28.25 28.25 22.765 28.25 16 22.765 3.75 16 3.75%22%2F%3E%3C%2Fsvg%3E\")}.warning-icon{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%22M29.379 23.624 18.382 4.625a2.75 2.75 0 0 0-4.764 0l-11 19A2.75 2.75 0 0 0 5 27.75h21.997a2.75 2.75 0 0 0 2.382-4.126m-1.3 2.001a1.24 1.24 0 0 1-1.082.625H5a1.25 1.25 0 0 1-1.082-1.874l10.999-19A1.25 1.25 0 0 1 16 4.75a1.25 1.25 0 0 1 1.083.626l10.997 19a1.24 1.24 0 0 1 0 1.25M16 23.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2M16 19.75a.75.75 0 0 0 .75-.75v-7a.75.75 0 1 0-1.5 0v7a.75.75 0 0 0 .75.75%22%2F%3E%3C%2Fsvg%3E\")}.plus-icon{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%22M26 15.25h-9.25V6a.75.75 0 1 0-1.5 0v9.25H6a.75.75 0 1 0 0 1.5h9.25V26a.75.75 0 1 0 1.5 0v-9.25H26a.75.75 0 1 0 0-1.5%22%2F%3E%3C%2Fsvg%3E\")}.close-icon{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%22m17.06 16 8.47-8.47a.75.75 0 0 0-.242-1.224.75.75 0 0 0-.819.163L16 14.94 7.53 6.47A.75.75 0 1 0 6.47 7.53L14.94 16l-8.47 8.47a.75.75 0 0 0 1.06 1.06L16 17.06l8.47 8.47a.75.75 0 1 0 1.06-1.06z%22%2F%3E%3C%2Fsvg%3E\")}.rem1{height:1rem;width:1rem}.rem1-25{height:1.25rem;width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i15.AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: i16.DeviceInfoComponent, selector: "app-device-info", inputs: ["device", "firstName", "lastName", "active", "email", "position"] }] });
93
93
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceManageWidgetComponent, decorators: [{
94
94
  type: Component,
95
- args: [{ selector: 'app-device-manage-widget', template: "\r\n\r\n<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!dataPending\">\r\n <!-- <div class=\"go-back-box\" (click)=\"onGoBack()\"> -->\r\n <div class=\"go-back-box\">\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\">Devices</span>\r\n </div>\r\n </div>\r\n\r\n <app-device-info \r\n [device]=\"device\" \r\n [firstName]=\"tokenObj?.firstName\" \r\n [lastName]=\"tokenObj?.lastName\"\r\n (click)=\"onGoBack()\"\r\n >\r\n \r\n </app-device-info>\r\n <div class=\"device-info\">\r\n\r\n <div class=\"device-info-part\">\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Details</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">{{ device?.lines || 'N/A' }}</span>\r\n <span class=\"extra-info\">Lines</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">{{ device?.macAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">MAC address</span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">{{ device?.ipAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">Host IP address</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">{{ device?.remoteIpAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">Remote IP address</span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">Cisco</span>\r\n <span class=\"extra-info\">Managed By</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Software</span>\r\n <div class=\"icon-bordered-wrapper\">\r\n <i class=\"icon configure-icon rem1\"></i>\r\n </div>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">Stable</span>\r\n <span class=\"extra-info\">Software Channel</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">N/A</span>\r\n <span class=\"extra-info\">Software version</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Tags</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\" style=\"flex-direction: column; gap: 1rem;\">\r\n <div class=\"tags-list-container\">\r\n <div *ngFor=\"let tag of tags; let i = index\" class=\"tag-label\">\r\n <span class=\"tag-desccription\">{{ tag }}</span>\r\n <i class=\"icon close-icon\" (click)=\"removeTag(i)\" style=\"width: 0.75rem; height: 0.75rem; flex: 0 0 auto;\"></i>\r\n </div>\r\n </div>\r\n <div class=\"tags-list-container\">\r\n <button class=\"tag-label add-tag\" (click)=\"showInput()\">\r\n <span class=\"icon plus-icon\" style=\"width: 0.75rem; height: 0.75rem;\"></span>\r\n <span>Add tag</span>\r\n </button>\r\n <input \r\n #tagInput\r\n id=\"enter-tag-input\" \r\n *ngIf=\"isAdding\"\r\n [(ngModel)]=\"newTag\"\r\n (blur)=\"onBlur()\"\r\n type=\"text\"\r\n class=\"add-tag-input\" \r\n placeholder=\"Enter tag...\"\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n <div class=\"device-info-part\">\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Issues & Information</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"description\">\r\n <i class=\"icon check-icon rem1\" style=\"filter: invert(26%) sepia(27%) saturate(1093%) hue-rotate(114deg) brightness(93%) contrast(90%);\"></i>\r\n <span class=\"text-description\">No reported issues at this time</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Hoteling</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <span class=\"text-description\">Allow this device to be used as a Hoteling Host by visiting guests.</span>\r\n <div class=\"toggle-wrapper\">\r\n <mat-slide-toggle class=\"custom-toggle\" name=\"logMissedCalls\" [formControl]=\"logMissedCall\"></mat-slide-toggle>\r\n <i class=\"icon info-icon rem1\" \r\n style=\"filter: invert(20%) sepia(99%) saturate(2065%) hue-rotate(197deg) brightness(92%) contrast(101%);\"\r\n [matTooltip]=\"'Enabling this device for Hoteling means that a guest (end user) can log into this host (workspace phone) and use this phone as if it were their own. This is useful when traveling to a remote office but still needing to place/receive calls with their telephone number and to access features normally available to them on their own office phone.'\"\r\n ></i>\r\n </div>\r\n <span class=\"text-description\">Limit the time a guest can use this phone to</span>\r\n <mat-select [formControl]=\"hotelingLimitTime\">\r\n <mat-option *ngFor=\"let type of HOTELING_TIME_HOURS\" [value]=\"type\">\r\n {{type}}\r\n </mat-option>\r\n </mat-select>\r\n </div>\r\n </div>\r\n </section>\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Device Management</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <p class=\"text-description\">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>\r\n <div class=\"flex-column\">\r\n <span class=\"text-description\">To add and remove users and workspaces, select <b>Configure Lines.</b></span>\r\n <span class=\"text-description\">To customize the programmable Line Keys, select <b>Configure Layout.</b></span>\r\n <span class=\"text-description\">To set up the display settings and dialing options, select <b>Device Settings</b>.</span>\r\n </div>\r\n <table style=\"width:100%; border-collapse:collapse;\">\r\n <thead>\r\n <tr style=\"background:#ededed;\">\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Index #</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Name</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Number/Extension</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Appearances</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Registered</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: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\"></span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">kelliey kellie</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">NA/333004</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">1</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <i class=\"icon warning-icon rem1\" [matTooltip]=\"'Unregistered'\"></i>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"totals\">\r\n <span class=\"text-description\">15 of 16 total lines available</span>\r\n </div>\r\n <div class=\"configure-lines\">\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Configure Lines</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Configure Layout</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Device Settings</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Support</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <div class=\"configure-lines\">\r\n <div class=\"line\">\r\n <div>\r\n <span class=\"text-description\">Meetings & Calls</span>\r\n <span class=\"label new\">New</span>\r\n <i class=\"icon info-icon rem1\"\r\n [matTooltip]=\"'Troubleshooting provides details about the device related to status, network activity, and call information.'\"\r\n ></i>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Go to troubleshooting</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <span class=\"text-description\">Device Logs</span>\r\n <i class=\"icon info-icon rem1\" [matTooltip]=\"'Generate device logs and download them to your computer.'\"></i>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n \r\n</div>", styles: ["@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: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}.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;max-width:175px;margin-left:2.75rem;border:2px solid gray;padding:.25rem .75rem;border-radius:8px}::ng-deep .mat-option{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;line-height:48px!important;height:48px!important;padding:0 10px!important;text-align:left!important;text-decoration:none!important;position:relative!important;cursor:pointer!important;outline:none!important;display:flex!important;flex-direction:row!important;max-width:100%!important;box-sizing:border-box!important;align-items:center!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important}::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:#bfe3ff;color:#000}::ng-deep .mat-select-panel .mat-option:not(.search-input):hover{background:#daedfc}::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}::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{width:95%;margin:auto;margin-left:.5rem;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}.device-info{display:flex;gap:1rem;padding:1.5rem}.device-info .device-info-part{display:flex;flex-direction:column;gap:1rem;flex:1;min-width:0}.device-info .device-info-part .card{display:flex;flex-direction:column;padding:1rem 1.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#ffffff;min-width:0}.device-info .device-info-part .card .header{display:flex;align-items:center;justify-content:space-between}.device-info .device-info-part .card .header .title{font-weight:500;font-size:1rem;font-family:Poppins,Poppins,sans-serif}.device-info .device-info-part .card .main-content{display:flex;flex-direction:column;min-width:0}.device-info .device-info-part .card .main-content .detail-row{display:flex;flex:1;padding:1rem 0;min-width:0}.device-info .device-info-part .card .main-content .detail-row .side{display:flex;flex-direction:column;flex:1}.device-info .device-info-part .card .main-content .detail-row .side .main-value{font-weight:500;font-size:.875rem}.device-info .device-info-part .card .main-content .detail-row .side .extra-info{font-weight:350;font-size:.75rem}.device-info .device-info-part .card .main-content .detail-row .description{display:flex;gap:.5rem;align-items:center}.device-info .device-info-part .card .main-content .detail-row .toggle-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.device-info .device-info-part .card .main-content .detail-row .configure-lines{display:flex;flex-direction:column}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line{display:flex;align-items:center;justify-content:space-between;flex:1;padding:.5rem 0}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div{gap:.5rem;display:flex;align-items:center}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div .label{display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div .label.new{font-size:.75rem;border-color:#30c9b0;background-color:#e9f7f3;color:#12615a}.device-info .device-info-part .card .main-content .tags-list-container{display:flex;gap:.5rem;flex-wrap:wrap;min-width:0}.device-info .device-info-part .card .main-content .tags-list-container .tag-label{border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;padding:8px 12px;border-radius:25px;color:#000000b3;background-color:#ededed;font-weight:500;cursor:pointer;gap:.5rem;height:40px;font-size:smaller;max-width:100%;min-width:0;overflow:hidden}.device-info .device-info-part .card .main-content .tags-list-container .tag-label .tag-desccription{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.device-info .device-info-part .card .main-content .tags-list-container .add-tag-input{border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;padding:8px 12px;border-radius:25px;color:#000000b3;background-color:#ededed;font-weight:500;cursor:pointer;flex-wrap:wrap;gap:.5rem;height:40px;font-size:smaller;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important;margin-left:-99px}.device-info .device-info-part .card .main-content .tags-list-container .add-tag-input:focus-visible{outline:none}.device-info .device-info-part .card .main-content .add-tag{background-color:#fff!important}.device-info .device-info-part .card .main-content .add-tag:hover{color:#0353a8!important}.flex-column{display:flex;flex-direction:column}.gap-0_75{gap:.75rem}.text-description{font-size:.875rem;font-weight:400}.icon{background-repeat:no-repeat;background-position:center;display:inline-block;background-size:contain}.icon-bordered-wrapper{display:flex;inline-size:1.5rem;border-radius:50rem;border:1px solid rgba(0,0,0,.5019607843);width:1.5rem;height:1.5rem;align-items:center;justify-content:center;cursor:pointer}.configure-icon{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%22M16 10.25A5.75 5.75 0 1 0 21.75 16 5.756 5.756 0 0 0 16 10.25m0 10a4.25 4.25 0 1 1 0-8.5 4.25 4.25 0 0 1 0 8.5M28 13.25H25.67a.25.25 0 0 1-.231-.155l-.667-1.633a.25.25 0 0 1 .057-.273l1.66-1.631a1.75 1.75 0 0 0 .024-2.475l-1.4-1.427a1.753 1.753 0 0 0-2.476-.024l-1.665 1.635a.25.25 0 0 1-.273.053l-1.796-.754a.25.25 0 0 1-.154-.23V4A1.75 1.75 0 0 0 17 2.25h-2A1.75 1.75 0 0 0 13.25 4v2.331a.25.25 0 0 1-.155.232l-1.714.71a.25.25 0 0 1-.273-.054L9.459 5.571a1.75 1.75 0 0 0-2.475 0L5.57 6.985a1.75 1.75 0 0 0 0 2.474l1.65 1.649a.25.25 0 0 1 .054.272l-.712 1.716a.25.25 0 0 1-.23.154H4A1.75 1.75 0 0 0 2.25 15v2A1.75 1.75 0 0 0 4 18.75h2.332a.25.25 0 0 1 .23.155l.71 1.713a.25.25 0 0 1-.053.274L5.57 22.54a1.75 1.75 0 0 0 0 2.476l1.415 1.414a1.75 1.75 0 0 0 2.476 0l1.648-1.65a.25.25 0 0 1 .272-.054l1.716.712a.25.25 0 0 1 .153.23V28A1.75 1.75 0 0 0 15 29.75h2A1.75 1.75 0 0 0 18.75 28v-2.332a.25.25 0 0 1 .156-.231l1.715-.71a.25.25 0 0 1 .272.054l1.649 1.649a1.753 1.753 0 0 0 2.474 0l1.416-1.415a1.753 1.753 0 0 0-.002-2.475l-1.648-1.648a.25.25 0 0 1-.055-.273l.712-1.715a.25.25 0 0 1 .23-.154H28A1.75 1.75 0 0 0 29.75 17v-2A1.75 1.75 0 0 0 28 13.25m.25 3.75a.25.25 0 0 1-.25.25h-2.331a1.74 1.74 0 0 0-1.617 1.08l-.712 1.716a1.75 1.75 0 0 0 .38 1.907L25.37 23.6a.25.25 0 0 1 0 .355l-1.414 1.414a.25.25 0 0 1-.273.054.3.3 0 0 1-.08-.054l-1.65-1.65a1.74 1.74 0 0 0-1.907-.379l-1.713.71a1.74 1.74 0 0 0-1.082 1.617V28a.25.25 0 0 1-.25.25h-2a.25.25 0 0 1-.25-.25v-2.332a1.74 1.74 0 0 0-1.08-1.616l-1.716-.712a1.74 1.74 0 0 0-1.907.38L8.4 25.37a.25.25 0 0 1-.355 0L6.63 23.955a.25.25 0 0 1 0-.354l1.65-1.648a1.745 1.745 0 0 0 .379-1.908l-.71-1.714a1.74 1.74 0 0 0-1.617-1.08H4a.25.25 0 0 1-.25-.25v-2a.25.25 0 0 1 .25-.25h2.332a1.74 1.74 0 0 0 1.616-1.082l.712-1.715a1.75 1.75 0 0 0-.38-1.907L6.63 8.4a.25.25 0 0 1 0-.354l1.414-1.414a.25.25 0 0 1 .355 0l1.648 1.649a1.74 1.74 0 0 0 1.908.379l1.713-.71A1.74 1.74 0 0 0 14.75 6.33v-2.33a.25.25 0 0 1 .25-.25h2a.25.25 0 0 1 .25.25v2.334a1.75 1.75 0 0 0 1.073 1.614l1.796.754a1.75 1.75 0 0 0 1.903-.364h.001l1.666-1.636a.255.255 0 0 1 .355.003l1.4 1.428a.25.25 0 0 1-.004.354l-1.66 1.63a1.745 1.745 0 0 0-.396 1.91l.668 1.636a1.74 1.74 0 0 0 1.62 1.086H28a.25.25 0 0 1 .25.25z%22%2F%3E%3C%2Fsvg%3E\")}.arrow-right-icon{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%22m22.53 15.47-12-12a.75.75 0 1 0-1.06 1.06L20.94 16 9.47 27.47a.75.75 0 1 0 1.06 1.06l12-12a.75.75 0 0 0 0-1.06%22%2F%3E%3C%2Fsvg%3E\")}.check-icon{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%22M16 2.25A13.75 13.75 0 1 0 29.75 16 13.765 13.765 0 0 0 16 2.25m0 26A12.25 12.25 0 1 1 28.25 16 12.264 12.264 0 0 1 16 28.25M20.512 12.43l-6.472 5.547-2.509-2.521a.75.75 0 0 0-1.062 1.058l3 3.015a.75.75 0 0 0 1.02.04l7-6a.75.75 0 1 0-.977-1.139%22%2F%3E%3C%2Fsvg%3E\")}.info-icon{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%22M15.75 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M16.75 14.5a.75.75 0 0 0-.75-.75h-2a.75.75 0 0 0 0 1.5h1.25v7H13a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-2.25zM2.25 16C2.25 8.406 8.406 2.25 16 2.25S29.75 8.406 29.75 16 23.594 29.75 16 29.75 2.25 23.594 2.25 16M16 3.75C9.235 3.75 3.75 9.235 3.75 16S9.235 28.25 16 28.25 28.25 22.765 28.25 16 22.765 3.75 16 3.75%22%2F%3E%3C%2Fsvg%3E\")}.warning-icon{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%22M29.379 23.624 18.382 4.625a2.75 2.75 0 0 0-4.764 0l-11 19A2.75 2.75 0 0 0 5 27.75h21.997a2.75 2.75 0 0 0 2.382-4.126m-1.3 2.001a1.24 1.24 0 0 1-1.082.625H5a1.25 1.25 0 0 1-1.082-1.874l10.999-19A1.25 1.25 0 0 1 16 4.75a1.25 1.25 0 0 1 1.083.626l10.997 19a1.24 1.24 0 0 1 0 1.25M16 23.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2M16 19.75a.75.75 0 0 0 .75-.75v-7a.75.75 0 1 0-1.5 0v7a.75.75 0 0 0 .75.75%22%2F%3E%3C%2Fsvg%3E\")}.plus-icon{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%22M26 15.25h-9.25V6a.75.75 0 1 0-1.5 0v9.25H6a.75.75 0 1 0 0 1.5h9.25V26a.75.75 0 1 0 1.5 0v-9.25H26a.75.75 0 1 0 0-1.5%22%2F%3E%3C%2Fsvg%3E\")}.close-icon{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%22m17.06 16 8.47-8.47a.75.75 0 0 0-.242-1.224.75.75 0 0 0-.819.163L16 14.94 7.53 6.47A.75.75 0 1 0 6.47 7.53L14.94 16l-8.47 8.47a.75.75 0 0 0 1.06 1.06L16 17.06l8.47 8.47a.75.75 0 1 0 1.06-1.06z%22%2F%3E%3C%2Fsvg%3E\")}.rem1{height:1rem;width:1rem}.rem1-25{height:1.25rem;width:1.25rem}\n"] }]
95
+ args: [{ selector: 'app-device-manage-widget', template: "\r\n\r\n<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!dataPending\">\r\n <!-- <div class=\"go-back-box\" (click)=\"onGoBack()\"> -->\r\n <div class=\"go-back-box\">\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\">Devices</span>\r\n </div>\r\n </div>\r\n\r\n <app-device-info \r\n [device]=\"device\" \r\n [firstName]=\"tokenObj?.firstName\" \r\n [lastName]=\"tokenObj?.lastName\"\r\n (click)=\"onGoBack()\"\r\n >\r\n \r\n </app-device-info>\r\n <div class=\"device-info\">\r\n\r\n <div class=\"device-info-part\">\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Details</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">{{ device?.lines || 'N/A' }}</span>\r\n <span class=\"extra-info\">Lines</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">{{ device?.macAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">MAC address</span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">{{ device?.ipAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">Host IP address</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">{{ device?.remoteIpAddress || 'N/A' }}</span>\r\n <span class=\"extra-info\">Remote IP address</span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">Cisco</span>\r\n <span class=\"extra-info\">Managed By</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Software</span>\r\n <div class=\"icon-bordered-wrapper\">\r\n <i class=\"icon configure-icon rem1\"></i>\r\n </div>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"side left-part\">\r\n <span class=\"main-value\">Stable</span>\r\n <span class=\"extra-info\">Software Channel</span>\r\n </div>\r\n <div class=\"side right-part\">\r\n <span class=\"main-value\">N/A</span>\r\n <span class=\"extra-info\">Software version</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Tags</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\" style=\"flex-direction: column; gap: 1rem;\">\r\n <div class=\"tags-list-container\">\r\n <div *ngFor=\"let tag of tags; let i = index\" class=\"tag-label\">\r\n <span class=\"tag-desccription\">{{ tag }}</span>\r\n <i class=\"icon close-icon\" (click)=\"removeTag(i)\" style=\"width: 0.75rem; height: 0.75rem; flex: 0 0 auto;\"></i>\r\n </div>\r\n </div>\r\n <div class=\"tags-list-container\">\r\n <button class=\"tag-label add-tag\" (click)=\"showInput()\">\r\n <span class=\"icon plus-icon\" style=\"width: 0.75rem; height: 0.75rem;\"></span>\r\n <span>Add tag</span>\r\n </button>\r\n <input \r\n #tagInput\r\n id=\"enter-tag-input\" \r\n *ngIf=\"isAdding\"\r\n [(ngModel)]=\"newTag\"\r\n (blur)=\"onBlur()\"\r\n type=\"text\"\r\n class=\"add-tag-input\" \r\n placeholder=\"Enter tag...\"\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n <div class=\"device-info-part\">\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Issues & Information</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row\">\r\n <div class=\"description\">\r\n <i class=\"icon check-icon rem1\" style=\"filter: invert(26%) sepia(27%) saturate(1093%) hue-rotate(114deg) brightness(93%) contrast(90%);\"></i>\r\n <span class=\"text-description\">No reported issues at this time</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Hoteling</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <span class=\"text-description\">Allow this device to be used as a Hoteling Host by visiting guests.</span>\r\n <div class=\"toggle-wrapper\">\r\n <mat-slide-toggle class=\"custom-toggle\" name=\"logMissedCalls\" [formControl]=\"logMissedCall\"></mat-slide-toggle>\r\n <i class=\"icon info-icon rem1\" \r\n style=\"filter: invert(20%) sepia(99%) saturate(2065%) hue-rotate(197deg) brightness(92%) contrast(101%);\"\r\n [matTooltip]=\"'Enabling this device for Hoteling means that a guest (end user) can log into this host (workspace phone) and use this phone as if it were their own. This is useful when traveling to a remote office but still needing to place/receive calls with their telephone number and to access features normally available to them on their own office phone.'\"\r\n ></i>\r\n </div>\r\n <span class=\"text-description\">Limit the time a guest can use this phone to</span>\r\n <mat-select [formControl]=\"hotelingLimitTime\">\r\n <mat-option *ngFor=\"let type of HOTELING_TIME_HOURS\" [value]=\"type\">\r\n {{type}}\r\n </mat-option>\r\n </mat-select>\r\n </div>\r\n </div>\r\n </section>\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Device Management</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <p class=\"text-description\">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>\r\n <div class=\"flex-column\">\r\n <span class=\"text-description\">To add and remove users and workspaces, select <b>Configure Lines.</b></span>\r\n <span class=\"text-description\">To customize the programmable Line Keys, select <b>Configure Layout.</b></span>\r\n <span class=\"text-description\">To set up the display settings and dialing options, select <b>Device Settings</b>.</span>\r\n </div>\r\n <table style=\"width:100%; border-collapse:collapse;\">\r\n <thead>\r\n <tr style=\"background:#ededed;\">\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Index #</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Name</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Number/Extension</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Appearances</th>\r\n <th style=\"padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Registered</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: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\"></span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">kelliey kellie</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">NA/333004</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;\">1</span>\r\n </td>\r\n <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n <i class=\"icon warning-icon rem1\" [matTooltip]=\"'Unregistered'\"></i>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"totals\">\r\n <span class=\"text-description\">15 of 16 total lines available</span>\r\n </div>\r\n <div class=\"configure-lines\">\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Configure Lines</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Configure Layout</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <i class=\"icon configure-icon rem1-25\"></i>\r\n <span class=\"text-description\">Device Settings</span>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"card\">\r\n <div class=\"header\">\r\n <span class=\"title\">Support</span>\r\n </div>\r\n <div class=\"main-content\">\r\n <div class=\"detail-row flex-column gap-0_75\">\r\n <div class=\"configure-lines\">\r\n <div class=\"line\">\r\n <div>\r\n <span class=\"text-description\">Meetings & Calls</span>\r\n <span class=\"label new\">New</span>\r\n <i class=\"icon info-icon rem1\"\r\n [matTooltip]=\"'Troubleshooting provides details about the device related to status, network activity, and call information.'\"\r\n ></i>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Go to troubleshooting</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"line\">\r\n <div>\r\n <span class=\"text-description\">Device Logs</span>\r\n <i class=\"icon info-icon rem1\" [matTooltip]=\"'Generate device logs and download them to your computer.'\"></i>\r\n </div>\r\n <div style=\"cursor: pointer\">\r\n <span class=\"text-description\" style=\"font-weight: 500;\">Manage</span>\r\n <i class=\"icon arrow-right-icon rem1-25\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n \r\n</div>", styles: ["@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: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}.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}:host ::ng-deep .mat-select{line-height:20px;max-width:175px;margin-left:2.75rem;border:2px solid gray;padding:.25rem .75rem;border-radius:8px}:host ::ng-deep .mat-option{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;line-height:48px!important;height:48px!important;padding:0 10px!important;text-align:left!important;text-decoration:none!important;position:relative!important;cursor:pointer!important;outline:none!important;display:flex!important;flex-direction:row!important;max-width:100%!important;box-sizing:border-box!important;align-items:center!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important}:host ::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:#bfe3ff;color:#000}:host ::ng-deep .mat-select-panel .mat-option:not(.search-input):hover{background:#daedfc}::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}::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{width:95%;margin:auto;margin-left:.5rem;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}.device-info{display:flex;gap:1rem;padding:1.5rem}.device-info .device-info-part{display:flex;flex-direction:column;gap:1rem;flex:1;min-width:0}.device-info .device-info-part .card{display:flex;flex-direction:column;padding:1rem 1.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#ffffff;min-width:0}.device-info .device-info-part .card .header{display:flex;align-items:center;justify-content:space-between}.device-info .device-info-part .card .header .title{font-weight:500;font-size:1rem;font-family:Poppins,Poppins,sans-serif}.device-info .device-info-part .card .main-content{display:flex;flex-direction:column;min-width:0}.device-info .device-info-part .card .main-content .detail-row{display:flex;flex:1;padding:1rem 0;min-width:0}.device-info .device-info-part .card .main-content .detail-row .side{display:flex;flex-direction:column;flex:1}.device-info .device-info-part .card .main-content .detail-row .side .main-value{font-weight:500;font-size:.875rem}.device-info .device-info-part .card .main-content .detail-row .side .extra-info{font-weight:350;font-size:.75rem}.device-info .device-info-part .card .main-content .detail-row .description{display:flex;gap:.5rem;align-items:center}.device-info .device-info-part .card .main-content .detail-row .toggle-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.device-info .device-info-part .card .main-content .detail-row .configure-lines{display:flex;flex-direction:column}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line{display:flex;align-items:center;justify-content:space-between;flex:1;padding:.5rem 0}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div{gap:.5rem;display:flex;align-items:center}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div .label{display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis}.device-info .device-info-part .card .main-content .detail-row .configure-lines .line>div .label.new{font-size:.75rem;border-color:#30c9b0;background-color:#e9f7f3;color:#12615a}.device-info .device-info-part .card .main-content .tags-list-container{display:flex;gap:.5rem;flex-wrap:wrap;min-width:0}.device-info .device-info-part .card .main-content .tags-list-container .tag-label{border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;padding:8px 12px;border-radius:25px;color:#000000b3;background-color:#ededed;font-weight:500;cursor:pointer;gap:.5rem;height:40px;font-size:smaller;max-width:100%;min-width:0;overflow:hidden}.device-info .device-info-part .card .main-content .tags-list-container .tag-label .tag-desccription{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.device-info .device-info-part .card .main-content .tags-list-container .add-tag-input{border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;padding:8px 12px;border-radius:25px;color:#000000b3;background-color:#ededed;font-weight:500;cursor:pointer;flex-wrap:wrap;gap:.5rem;height:40px;font-size:smaller;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important;margin-left:-99px}.device-info .device-info-part .card .main-content .tags-list-container .add-tag-input:focus-visible{outline:none}.device-info .device-info-part .card .main-content .add-tag{background-color:#fff!important}.device-info .device-info-part .card .main-content .add-tag:hover{color:#0353a8!important}.flex-column{display:flex;flex-direction:column}.gap-0_75{gap:.75rem}.text-description{font-size:.875rem;font-weight:400}.icon{background-repeat:no-repeat;background-position:center;display:inline-block;background-size:contain}.icon-bordered-wrapper{display:flex;inline-size:1.5rem;border-radius:50rem;border:1px solid rgba(0,0,0,.5019607843);width:1.5rem;height:1.5rem;align-items:center;justify-content:center;cursor:pointer}.configure-icon{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%22M16 10.25A5.75 5.75 0 1 0 21.75 16 5.756 5.756 0 0 0 16 10.25m0 10a4.25 4.25 0 1 1 0-8.5 4.25 4.25 0 0 1 0 8.5M28 13.25H25.67a.25.25 0 0 1-.231-.155l-.667-1.633a.25.25 0 0 1 .057-.273l1.66-1.631a1.75 1.75 0 0 0 .024-2.475l-1.4-1.427a1.753 1.753 0 0 0-2.476-.024l-1.665 1.635a.25.25 0 0 1-.273.053l-1.796-.754a.25.25 0 0 1-.154-.23V4A1.75 1.75 0 0 0 17 2.25h-2A1.75 1.75 0 0 0 13.25 4v2.331a.25.25 0 0 1-.155.232l-1.714.71a.25.25 0 0 1-.273-.054L9.459 5.571a1.75 1.75 0 0 0-2.475 0L5.57 6.985a1.75 1.75 0 0 0 0 2.474l1.65 1.649a.25.25 0 0 1 .054.272l-.712 1.716a.25.25 0 0 1-.23.154H4A1.75 1.75 0 0 0 2.25 15v2A1.75 1.75 0 0 0 4 18.75h2.332a.25.25 0 0 1 .23.155l.71 1.713a.25.25 0 0 1-.053.274L5.57 22.54a1.75 1.75 0 0 0 0 2.476l1.415 1.414a1.75 1.75 0 0 0 2.476 0l1.648-1.65a.25.25 0 0 1 .272-.054l1.716.712a.25.25 0 0 1 .153.23V28A1.75 1.75 0 0 0 15 29.75h2A1.75 1.75 0 0 0 18.75 28v-2.332a.25.25 0 0 1 .156-.231l1.715-.71a.25.25 0 0 1 .272.054l1.649 1.649a1.753 1.753 0 0 0 2.474 0l1.416-1.415a1.753 1.753 0 0 0-.002-2.475l-1.648-1.648a.25.25 0 0 1-.055-.273l.712-1.715a.25.25 0 0 1 .23-.154H28A1.75 1.75 0 0 0 29.75 17v-2A1.75 1.75 0 0 0 28 13.25m.25 3.75a.25.25 0 0 1-.25.25h-2.331a1.74 1.74 0 0 0-1.617 1.08l-.712 1.716a1.75 1.75 0 0 0 .38 1.907L25.37 23.6a.25.25 0 0 1 0 .355l-1.414 1.414a.25.25 0 0 1-.273.054.3.3 0 0 1-.08-.054l-1.65-1.65a1.74 1.74 0 0 0-1.907-.379l-1.713.71a1.74 1.74 0 0 0-1.082 1.617V28a.25.25 0 0 1-.25.25h-2a.25.25 0 0 1-.25-.25v-2.332a1.74 1.74 0 0 0-1.08-1.616l-1.716-.712a1.74 1.74 0 0 0-1.907.38L8.4 25.37a.25.25 0 0 1-.355 0L6.63 23.955a.25.25 0 0 1 0-.354l1.65-1.648a1.745 1.745 0 0 0 .379-1.908l-.71-1.714a1.74 1.74 0 0 0-1.617-1.08H4a.25.25 0 0 1-.25-.25v-2a.25.25 0 0 1 .25-.25h2.332a1.74 1.74 0 0 0 1.616-1.082l.712-1.715a1.75 1.75 0 0 0-.38-1.907L6.63 8.4a.25.25 0 0 1 0-.354l1.414-1.414a.25.25 0 0 1 .355 0l1.648 1.649a1.74 1.74 0 0 0 1.908.379l1.713-.71A1.74 1.74 0 0 0 14.75 6.33v-2.33a.25.25 0 0 1 .25-.25h2a.25.25 0 0 1 .25.25v2.334a1.75 1.75 0 0 0 1.073 1.614l1.796.754a1.75 1.75 0 0 0 1.903-.364h.001l1.666-1.636a.255.255 0 0 1 .355.003l1.4 1.428a.25.25 0 0 1-.004.354l-1.66 1.63a1.745 1.745 0 0 0-.396 1.91l.668 1.636a1.74 1.74 0 0 0 1.62 1.086H28a.25.25 0 0 1 .25.25z%22%2F%3E%3C%2Fsvg%3E\")}.arrow-right-icon{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%22m22.53 15.47-12-12a.75.75 0 1 0-1.06 1.06L20.94 16 9.47 27.47a.75.75 0 1 0 1.06 1.06l12-12a.75.75 0 0 0 0-1.06%22%2F%3E%3C%2Fsvg%3E\")}.check-icon{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%22M16 2.25A13.75 13.75 0 1 0 29.75 16 13.765 13.765 0 0 0 16 2.25m0 26A12.25 12.25 0 1 1 28.25 16 12.264 12.264 0 0 1 16 28.25M20.512 12.43l-6.472 5.547-2.509-2.521a.75.75 0 0 0-1.062 1.058l3 3.015a.75.75 0 0 0 1.02.04l7-6a.75.75 0 1 0-.977-1.139%22%2F%3E%3C%2Fsvg%3E\")}.info-icon{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%22M15.75 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M16.75 14.5a.75.75 0 0 0-.75-.75h-2a.75.75 0 0 0 0 1.5h1.25v7H13a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-2.25zM2.25 16C2.25 8.406 8.406 2.25 16 2.25S29.75 8.406 29.75 16 23.594 29.75 16 29.75 2.25 23.594 2.25 16M16 3.75C9.235 3.75 3.75 9.235 3.75 16S9.235 28.25 16 28.25 28.25 22.765 28.25 16 22.765 3.75 16 3.75%22%2F%3E%3C%2Fsvg%3E\")}.warning-icon{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%22M29.379 23.624 18.382 4.625a2.75 2.75 0 0 0-4.764 0l-11 19A2.75 2.75 0 0 0 5 27.75h21.997a2.75 2.75 0 0 0 2.382-4.126m-1.3 2.001a1.24 1.24 0 0 1-1.082.625H5a1.25 1.25 0 0 1-1.082-1.874l10.999-19A1.25 1.25 0 0 1 16 4.75a1.25 1.25 0 0 1 1.083.626l10.997 19a1.24 1.24 0 0 1 0 1.25M16 23.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2M16 19.75a.75.75 0 0 0 .75-.75v-7a.75.75 0 1 0-1.5 0v7a.75.75 0 0 0 .75.75%22%2F%3E%3C%2Fsvg%3E\")}.plus-icon{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%22M26 15.25h-9.25V6a.75.75 0 1 0-1.5 0v9.25H6a.75.75 0 1 0 0 1.5h9.25V26a.75.75 0 1 0 1.5 0v-9.25H26a.75.75 0 1 0 0-1.5%22%2F%3E%3C%2Fsvg%3E\")}.close-icon{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%22m17.06 16 8.47-8.47a.75.75 0 0 0-.242-1.224.75.75 0 0 0-.819.163L16 14.94 7.53 6.47A.75.75 0 1 0 6.47 7.53L14.94 16l-8.47 8.47a.75.75 0 0 0 1.06 1.06L16 17.06l8.47 8.47a.75.75 0 1 0 1.06-1.06z%22%2F%3E%3C%2Fsvg%3E\")}.rem1{height:1rem;width:1rem}.rem1-25{height:1.25rem;width:1.25rem}\n"] }]
96
96
  }], ctorParameters: function () { return [{ type: i1.UserService }, { type: i2.DeviceService }, { type: i3.APIService }, { type: i4.LineService }, { type: i5.SiteSettingsService }, { type: i6.ValidationService }, { type: i7.MatDialog }]; }, propDecorators: { onSave: [{
97
97
  type: Output
98
98
  }], onChange: [{