npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.176 → 0.0.178 - Mend

@tuki-io/tuki-widgets 0.0.176 → 0.0.178

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 (161) hide show

package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs CHANGED Viewed

@@ -1845,10 +1845,10 @@ class NotificationsComponent {
     }
 }
 NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, deps: [{ token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "<!--\r\n\r\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div class=\"notification\"\r\n       *ngFor=\"let notification of list\"\r\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\r\n\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{notification.message | truncate:[93]}}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{notification.message}}\r\n      </div>\r\n    </div>\r\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\r\n         (click)=\"readMore()\">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\r\n      (click)=\"removeNotification(notification)\">\r\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\r\n    </button>\r\n  </div>\r\n</div>\r\n-->\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.notification-block{right:0;top:110px;position:absolute;width:20%;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .notification-icons-block{text-align:center;width:56px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "<!--\n\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\n  <div class=\"notification\"\n       *ngFor=\"let notification of list\"\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\n\n    <div class=\"flex-box\">\n      <div class=\"notification-icons-block\">\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\n      </div>\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\n        {{notification.message | truncate:[93]}}\n      </div>\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\n        {{notification.message}}\n      </div>\n    </div>\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\n         (click)=\"readMore()\">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\n      (click)=\"removeNotification(notification)\">\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\n    </button>\n  </div>\n</div>\n-->\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.notification-block{right:0;top:110px;position:absolute;width:20%;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .notification-icons-block{text-align:center;width:56px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n\r\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div class=\"notification\"\r\n       *ngFor=\"let notification of list\"\r\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\r\n\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{notification.message | truncate:[93]}}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{notification.message}}\r\n      </div>\r\n    </div>\r\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\r\n         (click)=\"readMore()\">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\r\n      (click)=\"removeNotification(notification)\">\r\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\r\n    </button>\r\n  </div>\r\n</div>\r\n-->\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.notification-block{right:0;top:110px;position:absolute;width:20%;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .notification-icons-block{text-align:center;width:56px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"] }]
+            args: [{ selector: 'app-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\n  <div class=\"notification\"\n       *ngFor=\"let notification of list\"\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\n\n    <div class=\"flex-box\">\n      <div class=\"notification-icons-block\">\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\n      </div>\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\n        {{notification.message | truncate:[93]}}\n      </div>\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\n        {{notification.message}}\n      </div>\n    </div>\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\n         (click)=\"readMore()\">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\n      (click)=\"removeNotification(notification)\">\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\n    </button>\n  </div>\n</div>\n-->\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.notification-block{right:0;top:110px;position:absolute;width:20%;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .notification-icons-block{text-align:center;width:56px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"] }]
         }], ctorParameters: function () { return [{ type: NotificationService }, { type: i0.ChangeDetectorRef }]; } });
 class RemoveKynFromIBMService {
@@ -3143,10 +3143,10 @@ class DeviceManageWidgetComponent {
     }
 }
 DeviceManageWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceManageWidgetComponent, deps: [{ token: UserService }, { token: DeviceService }, { token: APIService }, { token: LineService }, { token: SiteSettingsService }, { token: ValidationService }, { token: i7$1.MatDialog }, { token: DnsService }], target: i0.ɵɵFactoryTarget.Component });
-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]=\"firstName\" \r\n    [lastName]=\"lastName\"\r\n    (onclickBack)=\"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\">{{ form?.get('maxLineCount')?.value || '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\">{{ (form?.get('macAddress')?.value | 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\">{{ form?.get('ipAddress')?.value || '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\">{{ form?.get('remoteIpAddress')?.value || '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\">{{ form?.get('softwareVersion')?.value || 'N/A'}}</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\">{{ form?.get('softwareChannel')?.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]=\"hotelingEnabled\"></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]=\"guestHoursLimit\">\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=\"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                        <ng-container *ngIf=\"device?.lines && device?.lines.length\">\r\n                            <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\"\r\n                            \r\n                            *ngFor=\"let line of device.lines; let i = index\">\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;\">{{line?.name}}</span>\r\n                                </td>\r\n                                <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n                                    <div style=\"display: flex; align-items: center;\">\r\n                                        <div style=\"width: 120px;\"\r\n                                            [attr.contenteditable]=\"!isWebex\"\r\n                                            (blur)=\"onNumberChange($event, i)\">\r\n                                            {{ line?.number || 'NA' }}\r\n                                        </div> \r\n                                        <span> &nbsp;/&nbsp; </span>\r\n                                        <!-- <span\r\n                                            [attr.contenteditable]=\"!isWebex\"\r\n                                            (blur)=\"onExtensionChange($event, i)\">\r\n                                            {{ line?.extension }}\r\n                                        </span> -->\r\n                                        <app-device-associated-line-extension\r\n                                                [control]=\"linesControls.at(i)\"\r\n                                                [routePartition]=\"line.routePartitionName\"\r\n                                                [directoryNumber]=\"line.directoryNumber\"\r\n                                                [siteId]=\"siteId\"\r\n                                                (onChange)=\"onExtensionChange($event, i)\">\r\n                                            </app-device-associated-line-extension>\r\n                                    </div>\r\n                                    \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                        </ng-container>\r\n                        \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}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host :ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px;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}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-tab-group{font-family:Inter,sans-serif}:host ::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}:host ::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}:host ::ng-deep .mat-tab-labels{gap:30px}:host ::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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i15.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: DeviceAssociatedLineExtensionComponent, selector: "app-device-associated-line-extension", inputs: ["control", "routePartition", "directoryNumber", "siteId"], outputs: ["onChange"] }, { kind: "component", type: DeviceInfoComponent, selector: "app-device-info", inputs: ["device", "firstName", "lastName", "active", "email", "position"], outputs: ["onclickBack"] }, { kind: "pipe", type: MacAddressPipe, name: "macAddress" }] });
+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]=\"firstName\" \r\n    [lastName]=\"lastName\"\r\n    (onclickBack)=\"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\">{{ form?.get('maxLineCount')?.value || '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\">{{ (form?.get('macAddress')?.value | 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\">{{ form?.get('ipAddress')?.value || '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\">{{ form?.get('remoteIpAddress')?.value || '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\">{{ form?.get('softwareVersion')?.value || 'N/A'}}</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\">{{ form?.get('softwareChannel')?.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]=\"hotelingEnabled\"></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]=\"guestHoursLimit\">\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=\"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                        <ng-container *ngIf=\"device?.lines && device?.lines.length\">\r\n                            <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\"\r\n                            \r\n                            *ngFor=\"let line of device.lines; let i = index\">\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;\">{{line?.name}}</span>\r\n                                </td>\r\n                                <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n                                    <div style=\"display: flex; align-items: center;\">\r\n                                        <div style=\"width: 120px;\"\r\n                                            [attr.contenteditable]=\"!isWebex\"\r\n                                            (blur)=\"onNumberChange($event, i)\">\r\n                                            {{ line?.number || 'NA' }}\r\n                                        </div> \r\n                                        <span> &nbsp;/&nbsp; </span>\r\n                                        <!-- <span\r\n                                            [attr.contenteditable]=\"!isWebex\"\r\n                                            (blur)=\"onExtensionChange($event, i)\">\r\n                                            {{ line?.extension }}\r\n                                        </span> -->\r\n                                        <app-device-associated-line-extension\r\n                                                [control]=\"linesControls.at(i)\"\r\n                                                [routePartition]=\"line.routePartitionName\"\r\n                                                [directoryNumber]=\"line.directoryNumber\"\r\n                                                [siteId]=\"siteId\"\r\n                                                (onChange)=\"onExtensionChange($event, i)\">\r\n                                            </app-device-associated-line-extension>\r\n                                    </div>\r\n                                    \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                        </ng-container>\r\n                        \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}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host :ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px;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}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-tab-group{font-family:Inter,sans-serif}:host ::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}:host ::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}:host ::ng-deep .mat-tab-labels{gap:30px}:host ::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%3Cg id%3D%22arrow-right%22%3E%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%3C%2Fg%3E%3C%2Fsvg%3E\")}.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%3Cg id%3D%22arrow-left%22%3E%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%3C%2Fg%3E%3C%2Fsvg%3E\")}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i15.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: DeviceAssociatedLineExtensionComponent, selector: "app-device-associated-line-extension", inputs: ["control", "routePartition", "directoryNumber", "siteId"], outputs: ["onChange"] }, { kind: "component", type: DeviceInfoComponent, selector: "app-device-info", inputs: ["device", "firstName", "lastName", "active", "email", "position"], outputs: ["onclickBack"] }, { kind: "pipe", type: MacAddressPipe, name: "macAddress" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceManageWidgetComponent, decorators: [{
             type: Component,
-            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]=\"firstName\" \r\n    [lastName]=\"lastName\"\r\n    (onclickBack)=\"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\">{{ form?.get('maxLineCount')?.value || '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\">{{ (form?.get('macAddress')?.value | 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\">{{ form?.get('ipAddress')?.value || '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\">{{ form?.get('remoteIpAddress')?.value || '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\">{{ form?.get('softwareVersion')?.value || 'N/A'}}</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\">{{ form?.get('softwareChannel')?.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]=\"hotelingEnabled\"></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]=\"guestHoursLimit\">\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=\"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                        <ng-container *ngIf=\"device?.lines && device?.lines.length\">\r\n                            <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\"\r\n                            \r\n                            *ngFor=\"let line of device.lines; let i = index\">\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;\">{{line?.name}}</span>\r\n                                </td>\r\n                                <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n                                    <div style=\"display: flex; align-items: center;\">\r\n                                        <div style=\"width: 120px;\"\r\n                                            [attr.contenteditable]=\"!isWebex\"\r\n                                            (blur)=\"onNumberChange($event, i)\">\r\n                                            {{ line?.number || 'NA' }}\r\n                                        </div> \r\n                                        <span> &nbsp;/&nbsp; </span>\r\n                                        <!-- <span\r\n                                            [attr.contenteditable]=\"!isWebex\"\r\n                                            (blur)=\"onExtensionChange($event, i)\">\r\n                                            {{ line?.extension }}\r\n                                        </span> -->\r\n                                        <app-device-associated-line-extension\r\n                                                [control]=\"linesControls.at(i)\"\r\n                                                [routePartition]=\"line.routePartitionName\"\r\n                                                [directoryNumber]=\"line.directoryNumber\"\r\n                                                [siteId]=\"siteId\"\r\n                                                (onChange)=\"onExtensionChange($event, i)\">\r\n                                            </app-device-associated-line-extension>\r\n                                    </div>\r\n                                    \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                        </ng-container>\r\n                        \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}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host :ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px;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}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-tab-group{font-family:Inter,sans-serif}:host ::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}:host ::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}:host ::ng-deep .mat-tab-labels{gap:30px}:host ::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"] }]
+            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]=\"firstName\" \r\n    [lastName]=\"lastName\"\r\n    (onclickBack)=\"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\">{{ form?.get('maxLineCount')?.value || '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\">{{ (form?.get('macAddress')?.value | 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\">{{ form?.get('ipAddress')?.value || '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\">{{ form?.get('remoteIpAddress')?.value || '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\">{{ form?.get('softwareVersion')?.value || 'N/A'}}</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\">{{ form?.get('softwareChannel')?.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]=\"hotelingEnabled\"></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]=\"guestHoursLimit\">\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=\"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                        <ng-container *ngIf=\"device?.lines && device?.lines.length\">\r\n                            <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\"\r\n                            \r\n                            *ngFor=\"let line of device.lines; let i = index\">\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;\">{{line?.name}}</span>\r\n                                </td>\r\n                                <td style=\"padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;\">\r\n                                    <div style=\"display: flex; align-items: center;\">\r\n                                        <div style=\"width: 120px;\"\r\n                                            [attr.contenteditable]=\"!isWebex\"\r\n                                            (blur)=\"onNumberChange($event, i)\">\r\n                                            {{ line?.number || 'NA' }}\r\n                                        </div> \r\n                                        <span> &nbsp;/&nbsp; </span>\r\n                                        <!-- <span\r\n                                            [attr.contenteditable]=\"!isWebex\"\r\n                                            (blur)=\"onExtensionChange($event, i)\">\r\n                                            {{ line?.extension }}\r\n                                        </span> -->\r\n                                        <app-device-associated-line-extension\r\n                                                [control]=\"linesControls.at(i)\"\r\n                                                [routePartition]=\"line.routePartitionName\"\r\n                                                [directoryNumber]=\"line.directoryNumber\"\r\n                                                [siteId]=\"siteId\"\r\n                                                (onChange)=\"onExtensionChange($event, i)\">\r\n                                            </app-device-associated-line-extension>\r\n                                    </div>\r\n                                    \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                        </ng-container>\r\n                        \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}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host :ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px;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}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-tab-group{font-family:Inter,sans-serif}:host ::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}:host ::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}:host ::ng-deep .mat-tab-labels{gap:30px}:host ::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%3Cg id%3D%22arrow-right%22%3E%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%3C%2Fg%3E%3C%2Fsvg%3E\")}.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%3Cg id%3D%22arrow-left%22%3E%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%3C%2Fg%3E%3C%2Fsvg%3E\")}.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"] }]
         }], ctorParameters: function () { return [{ type: UserService }, { type: DeviceService }, { type: APIService }, { type: LineService }, { type: SiteSettingsService }, { type: ValidationService }, { type: i7$1.MatDialog }, { type: DnsService }]; }, propDecorators: { onSave: [{
                 type: Output
             }], onChange: [{
@@ -3178,10 +3178,10 @@ class DeviceAssociatedLineDetailsBoxComponent {
     }
 }
 DeviceAssociatedLineDetailsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceAssociatedLineDetailsBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DeviceAssociatedLineDetailsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceAssociatedLineDetailsBoxComponent, selector: "app-line-details-block", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"line-details-block\">\r\n    <div class=\"line-details-block__title\">{{ title }}</div>\r\n    <div class=\"line-details-block__content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".line-details-block{display:flex;padding:1rem 1.5rem}.line-details-block__title{width:150px;max-width:150px;font-weight:500}.line-details-block__content{display:flex;flex-direction:column;width:100%;margin-left:2.5rem}\n"] });
+DeviceAssociatedLineDetailsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceAssociatedLineDetailsBoxComponent, selector: "app-line-details-block", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"line-details-block\">\n    <div class=\"line-details-block__title\">{{ title }}</div>\n    <div class=\"line-details-block__content\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".line-details-block{display:flex;padding:1rem 1.5rem}.line-details-block__title{width:150px;max-width:150px;font-weight:500}.line-details-block__content{display:flex;flex-direction:column;width:100%;margin-left:2.5rem}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceAssociatedLineDetailsBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-line-details-block", template: "<div class=\"line-details-block\">\r\n    <div class=\"line-details-block__title\">{{ title }}</div>\r\n    <div class=\"line-details-block__content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".line-details-block{display:flex;padding:1rem 1.5rem}.line-details-block__title{width:150px;max-width:150px;font-weight:500}.line-details-block__content{display:flex;flex-direction:column;width:100%;margin-left:2.5rem}\n"] }]
+            args: [{ selector: "app-line-details-block", template: "<div class=\"line-details-block\">\n    <div class=\"line-details-block__title\">{{ title }}</div>\n    <div class=\"line-details-block__content\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".line-details-block{display:flex;padding:1rem 1.5rem}.line-details-block__title{width:150px;max-width:150px;font-weight:500}.line-details-block__content{display:flex;flex-direction:column;width:100%;margin-left:2.5rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }] } });
@@ -3366,10 +3366,10 @@ class AssociatedLineRowComponent {
     }
 }
 AssociatedLineRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssociatedLineRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssociatedLineRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AssociatedLineRowComponent, selector: "app-associated-line-row", inputs: { line: "line", toggled: "toggled" }, outputs: { toggleAssociatedLine: "toggleAssociatedLine", removeAssociatedLine: "removeAssociatedLine" }, ngImport: i0, template: "<div class=\"line-item\">\r\n    <div class=\"line-informations\">\r\n        <div class=\"line-drag\">\r\n          <i class=\"app-icon icon-dragger-vertical\"></i>\r\n        </div>\r\n        <div class=\"line-label\">Button Position {{ line.position }}</div>\r\n        <div class=\"line-sep flex-box\">\r\n          <div class=\"app-icon icon-vertical-divider\"></div>\r\n          <div class=\"line-dn-box\">Line {{line.directoryNumber.directoryNumber}}</div>\r\n        </div>\r\n        <div class=\"line-name\">{{ line.displayLabel }}</div>\r\n    </div>\r\n    <div class=\"line-actions\">\r\n        <div class=\"line-delete\">\r\n          <i class=\"app-icon icon-delete\" (click)=\"onLineRemove()\"></i>\r\n        </div>\r\n        <div class=\"line-toggle-details\" (click)=\"onToggleDetails()\">\r\n          <i class=\"app-icon icon-arrow-right\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".line-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:.5rem;border:1px solid #cfcfcf;padding:1rem;margin:1rem 0 0;z-index:10}.line-informations,.line-actions{display:inherit;align-items:inherit;gap:.5rem;padding:0 .5rem}.line-actions{cursor:pointer}.line-drag,.line-toggle-details,.line-delete{display:inherit;align-items:inherit;justify-content:center;font-size:1rem;color:#969696;width:36px;height:36px;border-radius:50%;transition:all .25s ease-out}.line-delete :hover{color:red!important}.line-drag{cursor:grab}.line-label{margin-right:2.5rem}.flex-box{display:flex;justify-content:flex-start}.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}.toggled{transform:rotate(-90deg)}.line-dn-box{line-height:20px}.icon-dragger-vertical{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%3Cpath d%3D%22M13.125 5C12.7935 5 12.4755 4.8683 12.2411 4.63388C12.0067 4.39946 11.875 4.08152 11.875 3.75C11.875 3.41848 12.0067 3.10054 12.2411 2.86612C12.4755 2.6317 12.7935 2.5 13.125 2.5C13.4565 2.5 13.7745 2.6317 14.0089 2.86612C14.2433 3.10054 14.375 3.41848 14.375 3.75C14.375 4.08152 14.2433 4.39946 14.0089 4.63388C13.7745 4.8683 13.4565 5 13.125 5ZM6.875 5C6.54348 5 6.22554 4.8683 5.99112 4.63388C5.7567 4.39946 5.625 4.08152 5.625 3.75C5.625 3.41848 5.7567 3.10054 5.99112 2.86612C6.22554 2.6317 6.54348 2.5 6.875 2.5C7.20652 2.5 7.52446 2.6317 7.75888 2.86612C7.9933 3.10054 8.125 3.41848 8.125 3.75C8.125 4.08152 7.9933 4.39946 7.75888 4.63388C7.52446 4.8683 7.20652 5 6.875 5ZM13.125 11.25C12.7935 11.25 12.4755 11.1183 12.2411 10.8839C12.0067 10.6495 11.875 10.3315 11.875 10C11.875 9.66848 12.0067 9.35054 12.2411 9.11612C12.4755 8.8817 12.7935 8.75 13.125 8.75C13.4565 8.75 13.7745 8.8817 14.0089 9.11612C14.2433 9.35054 14.375 9.66848 14.375 10C14.375 10.3315 14.2433 10.6495 14.0089 10.8839C13.7745 11.1183 13.4565 11.25 13.125 11.25ZM6.875 11.25C6.54348 11.25 6.22554 11.1183 5.99112 10.8839C5.7567 10.6495 5.625 10.3315 5.625 10C5.625 9.66848 5.7567 9.35054 5.99112 9.11612C6.22554 8.8817 6.54348 8.75 6.875 8.75C7.20652 8.75 7.52446 8.8817 7.75888 9.11612C7.9933 9.35054 8.125 9.66848 8.125 10C8.125 10.3315 7.9933 10.6495 7.75888 10.8839C7.52446 11.1183 7.20652 11.25 6.875 11.25ZM13.125 17.5C12.7935 17.5 12.4755 17.3683 12.2411 17.1339C12.0067 16.8995 11.875 16.5815 11.875 16.25C11.875 15.9185 12.0067 15.6005 12.2411 15.3661C12.4755 15.1317 12.7935 15 13.125 15C13.4565 15 13.7745 15.1317 14.0089 15.3661C14.2433 15.6005 14.375 15.9185 14.375 16.25C14.375 16.5815 14.2433 16.8995 14.0089 17.1339C13.7745 17.3683 13.4565 17.5 13.125 17.5ZM6.875 17.5C6.54348 17.5 6.22554 17.3683 5.99112 17.1339C5.7567 16.8995 5.625 16.5815 5.625 16.25C5.625 15.9185 5.7567 15.6005 5.99112 15.3661C6.22554 15.1317 6.54348 15 6.875 15C7.20652 15 7.52446 15.1317 7.75888 15.3661C7.9933 15.6005 8.125 15.9185 8.125 16.25C8.125 16.5815 7.9933 16.8995 7.75888 17.1339C7.52446 17.3683 7.20652 17.5 6.875 17.5Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fsvg%3E%0D\");width:1px;margin:0 10px 0 0}.icon-delete{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%22Icon%2FDelete%22%3E%0D%3Cpath id%3D%22Remove all%22 d%3D%22M9.5835 1.96973C10.9439 1.96973 12.0528 3.09413 12.1036 4.50119L12.1054 4.60217H15.2853C15.588 4.60217 15.8335 4.85838 15.8335 5.17444C15.8335 5.47074 15.6178 5.71444 15.3413 5.74375L15.2853 5.7467H14.8067L14.0597 16.0795C13.9864 17.0944 13.176 17.8788 12.201 17.8788H6.966C5.99094 17.8788 5.18064 17.0944 5.10725 16.0795L4.35981 5.7467H3.88174C3.59788 5.7467 3.3644 5.52152 3.33633 5.23295L3.3335 5.17444C3.3335 4.87813 3.54923 4.63443 3.82569 4.60512L3.88174 4.60217H7.06157C7.06157 3.14831 8.19067 1.96973 9.5835 1.96973ZM13.7072 5.7467L5.45977 5.7467L6.20064 15.9934C6.23085 16.4113 6.56451 16.7343 6.966 16.7343H12.201C12.6025 16.7343 12.9361 16.4113 12.9664 15.9934L13.7072 5.7467ZM11.0089 8.15024C11.2928 8.15024 11.5263 8.37542 11.5543 8.66399L11.5572 8.72251V13.7585C11.5572 14.0745 11.3117 14.3307 11.0089 14.3307C10.7251 14.3307 10.4916 14.1056 10.4635 13.817L10.4607 13.7585L10.4607 8.72251C10.4607 8.40645 10.7061 8.15024 11.0089 8.15024ZM8.15806 8.15024C8.44192 8.15024 8.6754 8.37542 8.70347 8.66399L8.7063 8.72251L8.7063 13.7585C8.7063 14.0745 8.46084 14.3307 8.15806 14.3307C7.87419 14.3307 7.64072 14.1056 7.61264 13.817L7.60981 13.7585L7.60981 8.72251C7.60981 8.40645 7.85527 8.15024 8.15806 8.15024ZM9.5835 3.11427C8.82339 3.11427 8.20225 3.73527 8.16031 4.51773L8.15806 4.60217L11.0089 4.60217C11.0089 3.78042 10.3707 3.11427 9.5835 3.11427Z%22 fill%3D%22%23737480%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-arrow-right{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-vertical-divider{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%221%22 height%3D%2218%22 viewBox%3D%220 0 1 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cline x1%3D%220.5%22 y1%3D%222.18557e-08%22 x2%3D%220.499999%22 y2%3D%2218%22 stroke%3D%22%23333333%22%2F%3E%0D%3C%2Fsvg%3E%0D\");height:20px}.line-item:hover{background-color:#d6d6d680}\n"] });
+AssociatedLineRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AssociatedLineRowComponent, selector: "app-associated-line-row", inputs: { line: "line", toggled: "toggled" }, outputs: { toggleAssociatedLine: "toggleAssociatedLine", removeAssociatedLine: "removeAssociatedLine" }, ngImport: i0, template: "<div class=\"line-item\">\r\n    <div class=\"line-informations\">\r\n        <div class=\"line-drag\">\r\n          <i class=\"app-icon icon-dragger-vertical\"></i>\r\n        </div>\r\n        <div class=\"line-label\">Button Position {{ line.position }}</div>\r\n        <div class=\"line-sep flex-box\">\r\n          <div class=\"app-icon icon-vertical-divider\"></div>\r\n          <div class=\"line-dn-box\">Line {{line.directoryNumber.directoryNumber}}</div>\r\n        </div>\r\n        <div class=\"line-name\">{{ line.displayLabel }}</div>\r\n    </div>\r\n    <div class=\"line-actions\">\r\n        <div class=\"line-delete\">\r\n          <i class=\"app-icon icon-delete\" (click)=\"onLineRemove()\"></i>\r\n        </div>\r\n        <div class=\"line-toggle-details\" (click)=\"onToggleDetails()\">\r\n          <i class=\"app-icon icon-arrow-right\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".line-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:.5rem;border:1px solid #cfcfcf;padding:1rem;margin:1rem 0 0;z-index:10}.line-informations,.line-actions{display:inherit;align-items:inherit;gap:.5rem;padding:0 .5rem}.line-actions{cursor:pointer}.line-drag,.line-toggle-details,.line-delete{display:inherit;align-items:inherit;justify-content:center;font-size:1rem;color:#969696;width:36px;height:36px;border-radius:50%;transition:all .25s ease-out}.line-delete :hover{color:red!important}.line-drag{cursor:grab}.line-label{margin-right:2.5rem}.flex-box{display:flex;justify-content:flex-start}.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}.toggled{transform:rotate(-90deg)}.line-dn-box{line-height:20px}.icon-dragger-vertical{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%3Cpath d%3D%22M13.125 5C12.7935 5 12.4755 4.8683 12.2411 4.63388C12.0067 4.39946 11.875 4.08152 11.875 3.75C11.875 3.41848 12.0067 3.10054 12.2411 2.86612C12.4755 2.6317 12.7935 2.5 13.125 2.5C13.4565 2.5 13.7745 2.6317 14.0089 2.86612C14.2433 3.10054 14.375 3.41848 14.375 3.75C14.375 4.08152 14.2433 4.39946 14.0089 4.63388C13.7745 4.8683 13.4565 5 13.125 5ZM6.875 5C6.54348 5 6.22554 4.8683 5.99112 4.63388C5.7567 4.39946 5.625 4.08152 5.625 3.75C5.625 3.41848 5.7567 3.10054 5.99112 2.86612C6.22554 2.6317 6.54348 2.5 6.875 2.5C7.20652 2.5 7.52446 2.6317 7.75888 2.86612C7.9933 3.10054 8.125 3.41848 8.125 3.75C8.125 4.08152 7.9933 4.39946 7.75888 4.63388C7.52446 4.8683 7.20652 5 6.875 5ZM13.125 11.25C12.7935 11.25 12.4755 11.1183 12.2411 10.8839C12.0067 10.6495 11.875 10.3315 11.875 10C11.875 9.66848 12.0067 9.35054 12.2411 9.11612C12.4755 8.8817 12.7935 8.75 13.125 8.75C13.4565 8.75 13.7745 8.8817 14.0089 9.11612C14.2433 9.35054 14.375 9.66848 14.375 10C14.375 10.3315 14.2433 10.6495 14.0089 10.8839C13.7745 11.1183 13.4565 11.25 13.125 11.25ZM6.875 11.25C6.54348 11.25 6.22554 11.1183 5.99112 10.8839C5.7567 10.6495 5.625 10.3315 5.625 10C5.625 9.66848 5.7567 9.35054 5.99112 9.11612C6.22554 8.8817 6.54348 8.75 6.875 8.75C7.20652 8.75 7.52446 8.8817 7.75888 9.11612C7.9933 9.35054 8.125 9.66848 8.125 10C8.125 10.3315 7.9933 10.6495 7.75888 10.8839C7.52446 11.1183 7.20652 11.25 6.875 11.25ZM13.125 17.5C12.7935 17.5 12.4755 17.3683 12.2411 17.1339C12.0067 16.8995 11.875 16.5815 11.875 16.25C11.875 15.9185 12.0067 15.6005 12.2411 15.3661C12.4755 15.1317 12.7935 15 13.125 15C13.4565 15 13.7745 15.1317 14.0089 15.3661C14.2433 15.6005 14.375 15.9185 14.375 16.25C14.375 16.5815 14.2433 16.8995 14.0089 17.1339C13.7745 17.3683 13.4565 17.5 13.125 17.5ZM6.875 17.5C6.54348 17.5 6.22554 17.3683 5.99112 17.1339C5.7567 16.8995 5.625 16.5815 5.625 16.25C5.625 15.9185 5.7567 15.6005 5.99112 15.3661C6.22554 15.1317 6.54348 15 6.875 15C7.20652 15 7.52446 15.1317 7.75888 15.3661C7.9933 15.6005 8.125 15.9185 8.125 16.25C8.125 16.5815 7.9933 16.8995 7.75888 17.1339C7.52446 17.3683 7.20652 17.5 6.875 17.5Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");width:1px;margin:0 10px 0 0}.icon-delete{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%3Cg id%3D%22Icon%2FDelete%22%3E%3Cpath id%3D%22Remove all%22 d%3D%22M9.5835 1.96973C10.9439 1.96973 12.0528 3.09413 12.1036 4.50119L12.1054 4.60217H15.2853C15.588 4.60217 15.8335 4.85838 15.8335 5.17444C15.8335 5.47074 15.6178 5.71444 15.3413 5.74375L15.2853 5.7467H14.8067L14.0597 16.0795C13.9864 17.0944 13.176 17.8788 12.201 17.8788H6.966C5.99094 17.8788 5.18064 17.0944 5.10725 16.0795L4.35981 5.7467H3.88174C3.59788 5.7467 3.3644 5.52152 3.33633 5.23295L3.3335 5.17444C3.3335 4.87813 3.54923 4.63443 3.82569 4.60512L3.88174 4.60217H7.06157C7.06157 3.14831 8.19067 1.96973 9.5835 1.96973ZM13.7072 5.7467L5.45977 5.7467L6.20064 15.9934C6.23085 16.4113 6.56451 16.7343 6.966 16.7343H12.201C12.6025 16.7343 12.9361 16.4113 12.9664 15.9934L13.7072 5.7467ZM11.0089 8.15024C11.2928 8.15024 11.5263 8.37542 11.5543 8.66399L11.5572 8.72251V13.7585C11.5572 14.0745 11.3117 14.3307 11.0089 14.3307C10.7251 14.3307 10.4916 14.1056 10.4635 13.817L10.4607 13.7585L10.4607 8.72251C10.4607 8.40645 10.7061 8.15024 11.0089 8.15024ZM8.15806 8.15024C8.44192 8.15024 8.6754 8.37542 8.70347 8.66399L8.7063 8.72251L8.7063 13.7585C8.7063 14.0745 8.46084 14.3307 8.15806 14.3307C7.87419 14.3307 7.64072 14.1056 7.61264 13.817L7.60981 13.7585L7.60981 8.72251C7.60981 8.40645 7.85527 8.15024 8.15806 8.15024ZM9.5835 3.11427C8.82339 3.11427 8.20225 3.73527 8.16031 4.51773L8.15806 4.60217L11.0089 4.60217C11.0089 3.78042 10.3707 3.11427 9.5835 3.11427Z%22 fill%3D%22%23737480%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.icon-arrow-right{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%3Cg id%3D%22arrow-right%22%3E%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%3C%2Fg%3E%3C%2Fsvg%3E\")}.icon-vertical-divider{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%221%22 height%3D%2218%22 viewBox%3D%220 0 1 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cline x1%3D%220.5%22 y1%3D%222.18557e-08%22 x2%3D%220.499999%22 y2%3D%2218%22 stroke%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E\");height:20px}.line-item:hover{background-color:#d6d6d680}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssociatedLineRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-associated-line-row", template: "<div class=\"line-item\">\r\n    <div class=\"line-informations\">\r\n        <div class=\"line-drag\">\r\n          <i class=\"app-icon icon-dragger-vertical\"></i>\r\n        </div>\r\n        <div class=\"line-label\">Button Position {{ line.position }}</div>\r\n        <div class=\"line-sep flex-box\">\r\n          <div class=\"app-icon icon-vertical-divider\"></div>\r\n          <div class=\"line-dn-box\">Line {{line.directoryNumber.directoryNumber}}</div>\r\n        </div>\r\n        <div class=\"line-name\">{{ line.displayLabel }}</div>\r\n    </div>\r\n    <div class=\"line-actions\">\r\n        <div class=\"line-delete\">\r\n          <i class=\"app-icon icon-delete\" (click)=\"onLineRemove()\"></i>\r\n        </div>\r\n        <div class=\"line-toggle-details\" (click)=\"onToggleDetails()\">\r\n          <i class=\"app-icon icon-arrow-right\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".line-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:.5rem;border:1px solid #cfcfcf;padding:1rem;margin:1rem 0 0;z-index:10}.line-informations,.line-actions{display:inherit;align-items:inherit;gap:.5rem;padding:0 .5rem}.line-actions{cursor:pointer}.line-drag,.line-toggle-details,.line-delete{display:inherit;align-items:inherit;justify-content:center;font-size:1rem;color:#969696;width:36px;height:36px;border-radius:50%;transition:all .25s ease-out}.line-delete :hover{color:red!important}.line-drag{cursor:grab}.line-label{margin-right:2.5rem}.flex-box{display:flex;justify-content:flex-start}.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}.toggled{transform:rotate(-90deg)}.line-dn-box{line-height:20px}.icon-dragger-vertical{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%3Cpath d%3D%22M13.125 5C12.7935 5 12.4755 4.8683 12.2411 4.63388C12.0067 4.39946 11.875 4.08152 11.875 3.75C11.875 3.41848 12.0067 3.10054 12.2411 2.86612C12.4755 2.6317 12.7935 2.5 13.125 2.5C13.4565 2.5 13.7745 2.6317 14.0089 2.86612C14.2433 3.10054 14.375 3.41848 14.375 3.75C14.375 4.08152 14.2433 4.39946 14.0089 4.63388C13.7745 4.8683 13.4565 5 13.125 5ZM6.875 5C6.54348 5 6.22554 4.8683 5.99112 4.63388C5.7567 4.39946 5.625 4.08152 5.625 3.75C5.625 3.41848 5.7567 3.10054 5.99112 2.86612C6.22554 2.6317 6.54348 2.5 6.875 2.5C7.20652 2.5 7.52446 2.6317 7.75888 2.86612C7.9933 3.10054 8.125 3.41848 8.125 3.75C8.125 4.08152 7.9933 4.39946 7.75888 4.63388C7.52446 4.8683 7.20652 5 6.875 5ZM13.125 11.25C12.7935 11.25 12.4755 11.1183 12.2411 10.8839C12.0067 10.6495 11.875 10.3315 11.875 10C11.875 9.66848 12.0067 9.35054 12.2411 9.11612C12.4755 8.8817 12.7935 8.75 13.125 8.75C13.4565 8.75 13.7745 8.8817 14.0089 9.11612C14.2433 9.35054 14.375 9.66848 14.375 10C14.375 10.3315 14.2433 10.6495 14.0089 10.8839C13.7745 11.1183 13.4565 11.25 13.125 11.25ZM6.875 11.25C6.54348 11.25 6.22554 11.1183 5.99112 10.8839C5.7567 10.6495 5.625 10.3315 5.625 10C5.625 9.66848 5.7567 9.35054 5.99112 9.11612C6.22554 8.8817 6.54348 8.75 6.875 8.75C7.20652 8.75 7.52446 8.8817 7.75888 9.11612C7.9933 9.35054 8.125 9.66848 8.125 10C8.125 10.3315 7.9933 10.6495 7.75888 10.8839C7.52446 11.1183 7.20652 11.25 6.875 11.25ZM13.125 17.5C12.7935 17.5 12.4755 17.3683 12.2411 17.1339C12.0067 16.8995 11.875 16.5815 11.875 16.25C11.875 15.9185 12.0067 15.6005 12.2411 15.3661C12.4755 15.1317 12.7935 15 13.125 15C13.4565 15 13.7745 15.1317 14.0089 15.3661C14.2433 15.6005 14.375 15.9185 14.375 16.25C14.375 16.5815 14.2433 16.8995 14.0089 17.1339C13.7745 17.3683 13.4565 17.5 13.125 17.5ZM6.875 17.5C6.54348 17.5 6.22554 17.3683 5.99112 17.1339C5.7567 16.8995 5.625 16.5815 5.625 16.25C5.625 15.9185 5.7567 15.6005 5.99112 15.3661C6.22554 15.1317 6.54348 15 6.875 15C7.20652 15 7.52446 15.1317 7.75888 15.3661C7.9933 15.6005 8.125 15.9185 8.125 16.25C8.125 16.5815 7.9933 16.8995 7.75888 17.1339C7.52446 17.3683 7.20652 17.5 6.875 17.5Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fsvg%3E%0D\");width:1px;margin:0 10px 0 0}.icon-delete{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%22Icon%2FDelete%22%3E%0D%3Cpath id%3D%22Remove all%22 d%3D%22M9.5835 1.96973C10.9439 1.96973 12.0528 3.09413 12.1036 4.50119L12.1054 4.60217H15.2853C15.588 4.60217 15.8335 4.85838 15.8335 5.17444C15.8335 5.47074 15.6178 5.71444 15.3413 5.74375L15.2853 5.7467H14.8067L14.0597 16.0795C13.9864 17.0944 13.176 17.8788 12.201 17.8788H6.966C5.99094 17.8788 5.18064 17.0944 5.10725 16.0795L4.35981 5.7467H3.88174C3.59788 5.7467 3.3644 5.52152 3.33633 5.23295L3.3335 5.17444C3.3335 4.87813 3.54923 4.63443 3.82569 4.60512L3.88174 4.60217H7.06157C7.06157 3.14831 8.19067 1.96973 9.5835 1.96973ZM13.7072 5.7467L5.45977 5.7467L6.20064 15.9934C6.23085 16.4113 6.56451 16.7343 6.966 16.7343H12.201C12.6025 16.7343 12.9361 16.4113 12.9664 15.9934L13.7072 5.7467ZM11.0089 8.15024C11.2928 8.15024 11.5263 8.37542 11.5543 8.66399L11.5572 8.72251V13.7585C11.5572 14.0745 11.3117 14.3307 11.0089 14.3307C10.7251 14.3307 10.4916 14.1056 10.4635 13.817L10.4607 13.7585L10.4607 8.72251C10.4607 8.40645 10.7061 8.15024 11.0089 8.15024ZM8.15806 8.15024C8.44192 8.15024 8.6754 8.37542 8.70347 8.66399L8.7063 8.72251L8.7063 13.7585C8.7063 14.0745 8.46084 14.3307 8.15806 14.3307C7.87419 14.3307 7.64072 14.1056 7.61264 13.817L7.60981 13.7585L7.60981 8.72251C7.60981 8.40645 7.85527 8.15024 8.15806 8.15024ZM9.5835 3.11427C8.82339 3.11427 8.20225 3.73527 8.16031 4.51773L8.15806 4.60217L11.0089 4.60217C11.0089 3.78042 10.3707 3.11427 9.5835 3.11427Z%22 fill%3D%22%23737480%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-arrow-right{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-vertical-divider{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%221%22 height%3D%2218%22 viewBox%3D%220 0 1 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cline x1%3D%220.5%22 y1%3D%222.18557e-08%22 x2%3D%220.499999%22 y2%3D%2218%22 stroke%3D%22%23333333%22%2F%3E%0D%3C%2Fsvg%3E%0D\");height:20px}.line-item:hover{background-color:#d6d6d680}\n"] }]
+            args: [{ selector: "app-associated-line-row", template: "<div class=\"line-item\">\r\n    <div class=\"line-informations\">\r\n        <div class=\"line-drag\">\r\n          <i class=\"app-icon icon-dragger-vertical\"></i>\r\n        </div>\r\n        <div class=\"line-label\">Button Position {{ line.position }}</div>\r\n        <div class=\"line-sep flex-box\">\r\n          <div class=\"app-icon icon-vertical-divider\"></div>\r\n          <div class=\"line-dn-box\">Line {{line.directoryNumber.directoryNumber}}</div>\r\n        </div>\r\n        <div class=\"line-name\">{{ line.displayLabel }}</div>\r\n    </div>\r\n    <div class=\"line-actions\">\r\n        <div class=\"line-delete\">\r\n          <i class=\"app-icon icon-delete\" (click)=\"onLineRemove()\"></i>\r\n        </div>\r\n        <div class=\"line-toggle-details\" (click)=\"onToggleDetails()\">\r\n          <i class=\"app-icon icon-arrow-right\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".line-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:.5rem;border:1px solid #cfcfcf;padding:1rem;margin:1rem 0 0;z-index:10}.line-informations,.line-actions{display:inherit;align-items:inherit;gap:.5rem;padding:0 .5rem}.line-actions{cursor:pointer}.line-drag,.line-toggle-details,.line-delete{display:inherit;align-items:inherit;justify-content:center;font-size:1rem;color:#969696;width:36px;height:36px;border-radius:50%;transition:all .25s ease-out}.line-delete :hover{color:red!important}.line-drag{cursor:grab}.line-label{margin-right:2.5rem}.flex-box{display:flex;justify-content:flex-start}.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}.toggled{transform:rotate(-90deg)}.line-dn-box{line-height:20px}.icon-dragger-vertical{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%3Cpath d%3D%22M13.125 5C12.7935 5 12.4755 4.8683 12.2411 4.63388C12.0067 4.39946 11.875 4.08152 11.875 3.75C11.875 3.41848 12.0067 3.10054 12.2411 2.86612C12.4755 2.6317 12.7935 2.5 13.125 2.5C13.4565 2.5 13.7745 2.6317 14.0089 2.86612C14.2433 3.10054 14.375 3.41848 14.375 3.75C14.375 4.08152 14.2433 4.39946 14.0089 4.63388C13.7745 4.8683 13.4565 5 13.125 5ZM6.875 5C6.54348 5 6.22554 4.8683 5.99112 4.63388C5.7567 4.39946 5.625 4.08152 5.625 3.75C5.625 3.41848 5.7567 3.10054 5.99112 2.86612C6.22554 2.6317 6.54348 2.5 6.875 2.5C7.20652 2.5 7.52446 2.6317 7.75888 2.86612C7.9933 3.10054 8.125 3.41848 8.125 3.75C8.125 4.08152 7.9933 4.39946 7.75888 4.63388C7.52446 4.8683 7.20652 5 6.875 5ZM13.125 11.25C12.7935 11.25 12.4755 11.1183 12.2411 10.8839C12.0067 10.6495 11.875 10.3315 11.875 10C11.875 9.66848 12.0067 9.35054 12.2411 9.11612C12.4755 8.8817 12.7935 8.75 13.125 8.75C13.4565 8.75 13.7745 8.8817 14.0089 9.11612C14.2433 9.35054 14.375 9.66848 14.375 10C14.375 10.3315 14.2433 10.6495 14.0089 10.8839C13.7745 11.1183 13.4565 11.25 13.125 11.25ZM6.875 11.25C6.54348 11.25 6.22554 11.1183 5.99112 10.8839C5.7567 10.6495 5.625 10.3315 5.625 10C5.625 9.66848 5.7567 9.35054 5.99112 9.11612C6.22554 8.8817 6.54348 8.75 6.875 8.75C7.20652 8.75 7.52446 8.8817 7.75888 9.11612C7.9933 9.35054 8.125 9.66848 8.125 10C8.125 10.3315 7.9933 10.6495 7.75888 10.8839C7.52446 11.1183 7.20652 11.25 6.875 11.25ZM13.125 17.5C12.7935 17.5 12.4755 17.3683 12.2411 17.1339C12.0067 16.8995 11.875 16.5815 11.875 16.25C11.875 15.9185 12.0067 15.6005 12.2411 15.3661C12.4755 15.1317 12.7935 15 13.125 15C13.4565 15 13.7745 15.1317 14.0089 15.3661C14.2433 15.6005 14.375 15.9185 14.375 16.25C14.375 16.5815 14.2433 16.8995 14.0089 17.1339C13.7745 17.3683 13.4565 17.5 13.125 17.5ZM6.875 17.5C6.54348 17.5 6.22554 17.3683 5.99112 17.1339C5.7567 16.8995 5.625 16.5815 5.625 16.25C5.625 15.9185 5.7567 15.6005 5.99112 15.3661C6.22554 15.1317 6.54348 15 6.875 15C7.20652 15 7.52446 15.1317 7.75888 15.3661C7.9933 15.6005 8.125 15.9185 8.125 16.25C8.125 16.5815 7.9933 16.8995 7.75888 17.1339C7.52446 17.3683 7.20652 17.5 6.875 17.5Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E\");width:1px;margin:0 10px 0 0}.icon-delete{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%3Cg id%3D%22Icon%2FDelete%22%3E%3Cpath id%3D%22Remove all%22 d%3D%22M9.5835 1.96973C10.9439 1.96973 12.0528 3.09413 12.1036 4.50119L12.1054 4.60217H15.2853C15.588 4.60217 15.8335 4.85838 15.8335 5.17444C15.8335 5.47074 15.6178 5.71444 15.3413 5.74375L15.2853 5.7467H14.8067L14.0597 16.0795C13.9864 17.0944 13.176 17.8788 12.201 17.8788H6.966C5.99094 17.8788 5.18064 17.0944 5.10725 16.0795L4.35981 5.7467H3.88174C3.59788 5.7467 3.3644 5.52152 3.33633 5.23295L3.3335 5.17444C3.3335 4.87813 3.54923 4.63443 3.82569 4.60512L3.88174 4.60217H7.06157C7.06157 3.14831 8.19067 1.96973 9.5835 1.96973ZM13.7072 5.7467L5.45977 5.7467L6.20064 15.9934C6.23085 16.4113 6.56451 16.7343 6.966 16.7343H12.201C12.6025 16.7343 12.9361 16.4113 12.9664 15.9934L13.7072 5.7467ZM11.0089 8.15024C11.2928 8.15024 11.5263 8.37542 11.5543 8.66399L11.5572 8.72251V13.7585C11.5572 14.0745 11.3117 14.3307 11.0089 14.3307C10.7251 14.3307 10.4916 14.1056 10.4635 13.817L10.4607 13.7585L10.4607 8.72251C10.4607 8.40645 10.7061 8.15024 11.0089 8.15024ZM8.15806 8.15024C8.44192 8.15024 8.6754 8.37542 8.70347 8.66399L8.7063 8.72251L8.7063 13.7585C8.7063 14.0745 8.46084 14.3307 8.15806 14.3307C7.87419 14.3307 7.64072 14.1056 7.61264 13.817L7.60981 13.7585L7.60981 8.72251C7.60981 8.40645 7.85527 8.15024 8.15806 8.15024ZM9.5835 3.11427C8.82339 3.11427 8.20225 3.73527 8.16031 4.51773L8.15806 4.60217L11.0089 4.60217C11.0089 3.78042 10.3707 3.11427 9.5835 3.11427Z%22 fill%3D%22%23737480%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.icon-arrow-right{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%3Cg id%3D%22arrow-right%22%3E%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%3C%2Fg%3E%3C%2Fsvg%3E\")}.icon-vertical-divider{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%221%22 height%3D%2218%22 viewBox%3D%220 0 1 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cline x1%3D%220.5%22 y1%3D%222.18557e-08%22 x2%3D%220.499999%22 y2%3D%2218%22 stroke%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E\");height:20px}.line-item:hover{background-color:#d6d6d680}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { line: [{
                 type: Input
             }], toggled: [{
@@ -3398,10 +3398,10 @@ class InfoDialogComponent {
     }
 }
 InfoDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfoDialogComponent, deps: [{ token: i7$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-InfoDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InfoDialogComponent, selector: "app-info-dialog", ngImport: i0, template: "<div id=\"info-dialog\" class=\"app-dialog\" aria-labelledby=\"info-dialog-label\" role=\"dialog\">\r\n  <h3 *ngIf=\"title\" class=\"app-dialog-title\">{{title}}</h3>\r\n  <div mat-dialog-content *ngIf=\"message\" class=\"app-dialog-content\">\r\n    <div [innerHTML]=\"message\"></div>\r\n  </div>\r\n  <div mat-dialog-actions class=\"flex-gap-container\">\r\n    <button class=\"app-dialog-button app-dialog-cancel-button\" (click)=\"onClose(false)\">\r\n      Cancel\r\n    </button>\r\n    <button class=\"app-dialog-button app-dialog-confirm-button\" (click)=\"onClose(true)\">\r\n      {{confirmButtonText}}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";#info-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative}#info-dialog .fa{font-size:35px;margin:0 auto 20px;display:block;text-align:center;color:#009fdb;cursor:default}.scroll-content{overflow-y:auto;margin:auto;max-height:150px;width:100%}.app-dialog{font-family:Inter,Inter,sans-serif}.app-dialog .app-dialog-title{text-align:center;font-weight:600;font-size:16px;font-family:Inter,Inter,sans-serif;margin:0 0 24px}.app-dialog .flex-gap-container{gap:16px;position:absolute;right:0;bottom:0;gap:15px;display:flex}.app-dialog .app-dialog-content{color:#000000b3;font-size:14px}.app-dialog-button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Inter,sans-serif;cursor:pointer}.app-dialog-cancel-button{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.app-dialog-confirm-button{background:black;color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+InfoDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InfoDialogComponent, selector: "app-info-dialog", ngImport: i0, template: "<div id=\"info-dialog\" class=\"app-dialog\" aria-labelledby=\"info-dialog-label\" role=\"dialog\">\n  <h3 *ngIf=\"title\" class=\"app-dialog-title\">{{title}}</h3>\n  <div mat-dialog-content *ngIf=\"message\" class=\"app-dialog-content\">\n    <div [innerHTML]=\"message\"></div>\n  </div>\n  <div mat-dialog-actions class=\"flex-gap-container\">\n    <button class=\"app-dialog-button app-dialog-cancel-button\" (click)=\"onClose(false)\">\n      Cancel\n    </button>\n    <button class=\"app-dialog-button app-dialog-confirm-button\" (click)=\"onClose(true)\">\n      {{confirmButtonText}}\n    </button>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";#info-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative}#info-dialog .fa{font-size:35px;margin:0 auto 20px;display:block;text-align:center;color:#009fdb;cursor:default}.scroll-content{overflow-y:auto;margin:auto;max-height:150px;width:100%}.app-dialog{font-family:Inter,Inter,sans-serif}.app-dialog .app-dialog-title{text-align:center;font-weight:600;font-size:16px;font-family:Inter,Inter,sans-serif;margin:0 0 24px}.app-dialog .flex-gap-container{gap:16px;position:absolute;right:0;bottom:0;gap:15px;display:flex}.app-dialog .app-dialog-content{color:#000000b3;font-size:14px}.app-dialog-button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Inter,sans-serif;cursor:pointer}.app-dialog-cancel-button{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.app-dialog-confirm-button{background:black;color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfoDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-info-dialog', encapsulation: ViewEncapsulation.None, template: "<div id=\"info-dialog\" class=\"app-dialog\" aria-labelledby=\"info-dialog-label\" role=\"dialog\">\r\n  <h3 *ngIf=\"title\" class=\"app-dialog-title\">{{title}}</h3>\r\n  <div mat-dialog-content *ngIf=\"message\" class=\"app-dialog-content\">\r\n    <div [innerHTML]=\"message\"></div>\r\n  </div>\r\n  <div mat-dialog-actions class=\"flex-gap-container\">\r\n    <button class=\"app-dialog-button app-dialog-cancel-button\" (click)=\"onClose(false)\">\r\n      Cancel\r\n    </button>\r\n    <button class=\"app-dialog-button app-dialog-confirm-button\" (click)=\"onClose(true)\">\r\n      {{confirmButtonText}}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";#info-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative}#info-dialog .fa{font-size:35px;margin:0 auto 20px;display:block;text-align:center;color:#009fdb;cursor:default}.scroll-content{overflow-y:auto;margin:auto;max-height:150px;width:100%}.app-dialog{font-family:Inter,Inter,sans-serif}.app-dialog .app-dialog-title{text-align:center;font-weight:600;font-size:16px;font-family:Inter,Inter,sans-serif;margin:0 0 24px}.app-dialog .flex-gap-container{gap:16px;position:absolute;right:0;bottom:0;gap:15px;display:flex}.app-dialog .app-dialog-content{color:#000000b3;font-size:14px}.app-dialog-button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Inter,sans-serif;cursor:pointer}.app-dialog-cancel-button{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.app-dialog-confirm-button{background:black;color:#fff}\n"] }]
+            args: [{ selector: 'app-info-dialog', encapsulation: ViewEncapsulation.None, template: "<div id=\"info-dialog\" class=\"app-dialog\" aria-labelledby=\"info-dialog-label\" role=\"dialog\">\n  <h3 *ngIf=\"title\" class=\"app-dialog-title\">{{title}}</h3>\n  <div mat-dialog-content *ngIf=\"message\" class=\"app-dialog-content\">\n    <div [innerHTML]=\"message\"></div>\n  </div>\n  <div mat-dialog-actions class=\"flex-gap-container\">\n    <button class=\"app-dialog-button app-dialog-cancel-button\" (click)=\"onClose(false)\">\n      Cancel\n    </button>\n    <button class=\"app-dialog-button app-dialog-confirm-button\" (click)=\"onClose(true)\">\n      {{confirmButtonText}}\n    </button>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";#info-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative}#info-dialog .fa{font-size:35px;margin:0 auto 20px;display:block;text-align:center;color:#009fdb;cursor:default}.scroll-content{overflow-y:auto;margin:auto;max-height:150px;width:100%}.app-dialog{font-family:Inter,Inter,sans-serif}.app-dialog .app-dialog-title{text-align:center;font-weight:600;font-size:16px;font-family:Inter,Inter,sans-serif;margin:0 0 24px}.app-dialog .flex-gap-container{gap:16px;position:absolute;right:0;bottom:0;gap:15px;display:flex}.app-dialog .app-dialog-content{color:#000000b3;font-size:14px}.app-dialog-button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Inter,sans-serif;cursor:pointer}.app-dialog-cancel-button{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.app-dialog-confirm-button{background:black;color:#fff}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i7$1.MatDialogRef }, { type: InfoDialogConfig, decorators: [{
                         type: Inject,