npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.133 → 0.0.135 - Mend

@tuki-io/tuki-widgets 0.0.133 → 0.0.135

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

package/esm2020/di2mt/shared/components/table-filters/table-filters.component.mjs CHANGED Viewed

@@ -25,10 +25,10 @@ export class TableFiltersComponent {
     }
 }
 TableFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableFiltersComponent, selector: "tk-table-filters", inputs: { filters: "filters" }, outputs: { filter: "filter" }, ngImport: i0, template: "<div class=\"filters-wrapper\">\r\n    <ng-container *ngFor=\"let filter of filters\">\r\n        <div class=\"filter\">\r\n            <ng-container [ngSwitch]=\"filter.type\">\r\n                <!-- Search Input with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'search'\" appearance=\"outline\" class=\"search-field custom-mat-form-field\">\r\n<!--                    <mat-label>{{ filter.placeholder }}</mat-label>-->\r\n                    <input matInput\r\n                           [placeholder]=\"filter.placeholder\"\r\n                           (input)=\"onFilter(filter.columnKey, $event)\">\r\n                    <mat-icon matPrefix class=\"search-icon\">\r\n                        <!-- <img src=\"assets/icons/search_icon.png\" alt=\"Search\" /> -->\r\n                    </mat-icon>\r\n                </mat-form-field>\r\n\r\n                <!-- Select Dropdown with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'select'\" appearance=\"outline\" class=\"select-field custom-mat-form-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <mat-select (selectionChange)=\"onFilter(filter.columnKey, $event)\">\r\n                        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host .filters-wrapper{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:0}:host .filters-wrapper .filter .search-field,:host .filters-wrapper .filter .select-field{width:100%}:host .filters-wrapper .filter .search-field .search-icon,:host .filters-wrapper .filter .select-field .search-icon{display:flex;align-items:center;justify-content:center;margin-right:.25rem;padding:0}:host .filters-wrapper .filter .search-field .search-icon img,:host .filters-wrapper .filter .select-field .search-icon img{width:24px;height:24px;object-fit:contain;opacity:.6;vertical-align:middle}::ng-deep .custom-mat-form-field{width:265px}::ng-deep .custom-mat-form-field .mat-form-field-wrapper{height:24px;padding-bottom:0}::ng-deep .custom-mat-form-field .mat-form-field-flex{height:34px;align-items:center;padding:0 12px}::ng-deep .custom-mat-form-field .mat-form-field-infix{padding:0;border:none;min-height:auto;display:flex;align-items:center;height:28px;margin:4px 0 0;font-size:14px}::ng-deep .custom-mat-form-field .mat-form-field-outline{color:#737480}::ng-deep .custom-mat-form-field .mat-form-field-outline-start,::ng-deep .custom-mat-form-field .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-color:#737480;border-width:1px}::ng-deep .custom-mat-form-field .mat-form-field-outline-start{border-radius:6px 0 0 6px;min-width:6px}::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-radius:0 6px 6px 0}::ng-deep .custom-mat-form-field .mat-form-field-outline-gap{border-radius:0}::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end{border-color:#737480;border-width:2px}::ng-deep .custom-mat-form-field .mat-form-field-subscript-wrapper{display:none}::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;font-size:14px}::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{transform:translateY(-50%)}::ng-deep .custom-mat-form-field .mat-select-value{max-width:calc(100% - 20px)}::ng-deep .custom-mat-form-field .mat-select-arrow-wrapper{transform:none;display:flex;align-items:center;position:absolute;right:-10px;top:5px}::ng-deep .custom-mat-form-field input.mat-input-element{height:24px;line-height:24px;margin:3px 0 0}::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end{border-color:#ccc}::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end{border-color:#e70707}::ng-deep .custom-mat-form-field .mat-select-arrow{width:16px;height:16px;border:none;margin:-6px 4px 0 0;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}::ng-deep .custom-mat-form-field.use-css-arrow .mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #737480;margin:-6px 4px 0 0;background:none}::ng-deep .custom-mat-form-field .mat-form-field-label-wrapper{top:2px;padding-top:0;height:28px;display:flex;overflow:visible!important;align-items:center}::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;position:relative;top:auto;transform:none;padding:0 4px;background:white}::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{position:absolute;top:-5px;width:-moz-fit-content;width:fit-content;font-size:12px;color:#555;background:white;padding:0 4px}::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{position:relative;top:auto;left:auto;transform:none;font-size:14px;background:transparent}::ng-deep .custom-mat-form-field .mat-select-placeholder{color:#555;line-height:34px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+TableFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableFiltersComponent, selector: "tk-table-filters", inputs: { filters: "filters" }, outputs: { filter: "filter" }, ngImport: i0, template: "<div class=\"filters-wrapper\">\r\n    <ng-container *ngFor=\"let filter of filters\">\r\n        <div class=\"filter\">\r\n            <ng-container [ngSwitch]=\"filter.type\">\r\n                <!-- Search Input with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'search'\" appearance=\"outline\" class=\"search-field custom-mat-form-field\">\r\n<!--                    <mat-label>{{ filter.placeholder }}</mat-label>-->\r\n                    <input matInput\r\n                           [placeholder]=\"filter.placeholder\"\r\n                           (input)=\"onFilter(filter.columnKey, $event)\">\r\n                    <mat-icon matPrefix class=\"search-icon\">\r\n                        <!-- <img src=\"assets/icons/search_icon.png\" alt=\"Search\" /> -->\r\n                    </mat-icon>\r\n                </mat-form-field>\r\n\r\n                <!-- Select Dropdown with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'select'\" appearance=\"outline\" class=\"select-field custom-mat-form-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <mat-select (selectionChange)=\"onFilter(filter.columnKey, $event)\">\r\n                        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host .filters-wrapper{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:0}:host .filters-wrapper .filter .search-field,:host .filters-wrapper .filter .select-field{width:100%}:host .filters-wrapper .filter .search-field .search-icon,:host .filters-wrapper .filter .select-field .search-icon{display:flex;align-items:center;justify-content:center;margin-right:.25rem;padding:0}:host .filters-wrapper .filter .search-field .search-icon img,:host .filters-wrapper .filter .select-field .search-icon img{width:24px;height:24px;object-fit:contain;opacity:.6;vertical-align:middle}:host ::ng-deep .custom-mat-form-field{width:265px}:host ::ng-deep .custom-mat-form-field .mat-form-field-wrapper{height:24px;padding-bottom:0}:host ::ng-deep .custom-mat-form-field .mat-form-field-flex{height:34px;align-items:center;padding:0 12px}:host ::ng-deep .custom-mat-form-field .mat-form-field-infix{padding:0;border:none;min-height:auto;display:flex;align-items:center;height:28px;margin:4px 0 0;font-size:14px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline{color:#737480}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-color:#737480;border-width:1px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-start{border-radius:6px 0 0 6px;min-width:6px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-radius:0 6px 6px 0}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-gap{border-radius:0}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end{border-color:#737480;border-width:2px}:host ::ng-deep .custom-mat-form-field .mat-form-field-subscript-wrapper{display:none}:host ::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;font-size:14px}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{transform:translateY(-50%)}:host ::ng-deep .custom-mat-form-field .mat-select-value{max-width:calc(100% - 20px)}:host ::ng-deep .custom-mat-form-field .mat-select-arrow-wrapper{transform:none;display:flex;align-items:center;position:absolute;right:-10px;top:5px}:host ::ng-deep .custom-mat-form-field input.mat-input-element{height:24px;line-height:24px;margin:3px 0 0}:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end{border-color:#ccc}:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end{border-color:#e70707}:host ::ng-deep .custom-mat-form-field .mat-select-arrow{width:16px;height:16px;border:none;margin:-6px 4px 0 0;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}:host ::ng-deep .custom-mat-form-field.use-css-arrow .mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #737480;margin:-6px 4px 0 0;background:none}:host ::ng-deep .custom-mat-form-field .mat-form-field-label-wrapper{top:2px;padding-top:0;height:28px;display:flex;overflow:visible!important;align-items:center}:host ::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;position:relative;top:auto;transform:none;padding:0 4px;background:white}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{position:absolute;top:-5px;width:-moz-fit-content;width:fit-content;font-size:12px;color:#555;background:white;padding:0 4px}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{position:relative;top:auto;left:auto;transform:none;font-size:14px;background:transparent}:host ::ng-deep .custom-mat-form-field .mat-select-placeholder{color:#555;line-height:34px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-table-filters', template: "<div class=\"filters-wrapper\">\r\n    <ng-container *ngFor=\"let filter of filters\">\r\n        <div class=\"filter\">\r\n            <ng-container [ngSwitch]=\"filter.type\">\r\n                <!-- Search Input with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'search'\" appearance=\"outline\" class=\"search-field custom-mat-form-field\">\r\n<!--                    <mat-label>{{ filter.placeholder }}</mat-label>-->\r\n                    <input matInput\r\n                           [placeholder]=\"filter.placeholder\"\r\n                           (input)=\"onFilter(filter.columnKey, $event)\">\r\n                    <mat-icon matPrefix class=\"search-icon\">\r\n                        <!-- <img src=\"assets/icons/search_icon.png\" alt=\"Search\" /> -->\r\n                    </mat-icon>\r\n                </mat-form-field>\r\n\r\n                <!-- Select Dropdown with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'select'\" appearance=\"outline\" class=\"select-field custom-mat-form-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <mat-select (selectionChange)=\"onFilter(filter.columnKey, $event)\">\r\n                        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host .filters-wrapper{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:0}:host .filters-wrapper .filter .search-field,:host .filters-wrapper .filter .select-field{width:100%}:host .filters-wrapper .filter .search-field .search-icon,:host .filters-wrapper .filter .select-field .search-icon{display:flex;align-items:center;justify-content:center;margin-right:.25rem;padding:0}:host .filters-wrapper .filter .search-field .search-icon img,:host .filters-wrapper .filter .select-field .search-icon img{width:24px;height:24px;object-fit:contain;opacity:.6;vertical-align:middle}::ng-deep .custom-mat-form-field{width:265px}::ng-deep .custom-mat-form-field .mat-form-field-wrapper{height:24px;padding-bottom:0}::ng-deep .custom-mat-form-field .mat-form-field-flex{height:34px;align-items:center;padding:0 12px}::ng-deep .custom-mat-form-field .mat-form-field-infix{padding:0;border:none;min-height:auto;display:flex;align-items:center;height:28px;margin:4px 0 0;font-size:14px}::ng-deep .custom-mat-form-field .mat-form-field-outline{color:#737480}::ng-deep .custom-mat-form-field .mat-form-field-outline-start,::ng-deep .custom-mat-form-field .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-color:#737480;border-width:1px}::ng-deep .custom-mat-form-field .mat-form-field-outline-start{border-radius:6px 0 0 6px;min-width:6px}::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-radius:0 6px 6px 0}::ng-deep .custom-mat-form-field .mat-form-field-outline-gap{border-radius:0}::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end{border-color:#737480;border-width:2px}::ng-deep .custom-mat-form-field .mat-form-field-subscript-wrapper{display:none}::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;font-size:14px}::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{transform:translateY(-50%)}::ng-deep .custom-mat-form-field .mat-select-value{max-width:calc(100% - 20px)}::ng-deep .custom-mat-form-field .mat-select-arrow-wrapper{transform:none;display:flex;align-items:center;position:absolute;right:-10px;top:5px}::ng-deep .custom-mat-form-field input.mat-input-element{height:24px;line-height:24px;margin:3px 0 0}::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end{border-color:#ccc}::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end{border-color:#e70707}::ng-deep .custom-mat-form-field .mat-select-arrow{width:16px;height:16px;border:none;margin:-6px 4px 0 0;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}::ng-deep .custom-mat-form-field.use-css-arrow .mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #737480;margin:-6px 4px 0 0;background:none}::ng-deep .custom-mat-form-field .mat-form-field-label-wrapper{top:2px;padding-top:0;height:28px;display:flex;overflow:visible!important;align-items:center}::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;position:relative;top:auto;transform:none;padding:0 4px;background:white}::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{position:absolute;top:-5px;width:-moz-fit-content;width:fit-content;font-size:12px;color:#555;background:white;padding:0 4px}::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{position:relative;top:auto;left:auto;transform:none;font-size:14px;background:transparent}::ng-deep .custom-mat-form-field .mat-select-placeholder{color:#555;line-height:34px}\n"] }]
+            args: [{ selector: 'tk-table-filters', template: "<div class=\"filters-wrapper\">\r\n    <ng-container *ngFor=\"let filter of filters\">\r\n        <div class=\"filter\">\r\n            <ng-container [ngSwitch]=\"filter.type\">\r\n                <!-- Search Input with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'search'\" appearance=\"outline\" class=\"search-field custom-mat-form-field\">\r\n<!--                    <mat-label>{{ filter.placeholder }}</mat-label>-->\r\n                    <input matInput\r\n                           [placeholder]=\"filter.placeholder\"\r\n                           (input)=\"onFilter(filter.columnKey, $event)\">\r\n                    <mat-icon matPrefix class=\"search-icon\">\r\n                        <!-- <img src=\"assets/icons/search_icon.png\" alt=\"Search\" /> -->\r\n                    </mat-icon>\r\n                </mat-form-field>\r\n\r\n                <!-- Select Dropdown with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'select'\" appearance=\"outline\" class=\"select-field custom-mat-form-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <mat-select (selectionChange)=\"onFilter(filter.columnKey, $event)\">\r\n                        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host .filters-wrapper{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:0}:host .filters-wrapper .filter .search-field,:host .filters-wrapper .filter .select-field{width:100%}:host .filters-wrapper .filter .search-field .search-icon,:host .filters-wrapper .filter .select-field .search-icon{display:flex;align-items:center;justify-content:center;margin-right:.25rem;padding:0}:host .filters-wrapper .filter .search-field .search-icon img,:host .filters-wrapper .filter .select-field .search-icon img{width:24px;height:24px;object-fit:contain;opacity:.6;vertical-align:middle}:host ::ng-deep .custom-mat-form-field{width:265px}:host ::ng-deep .custom-mat-form-field .mat-form-field-wrapper{height:24px;padding-bottom:0}:host ::ng-deep .custom-mat-form-field .mat-form-field-flex{height:34px;align-items:center;padding:0 12px}:host ::ng-deep .custom-mat-form-field .mat-form-field-infix{padding:0;border:none;min-height:auto;display:flex;align-items:center;height:28px;margin:4px 0 0;font-size:14px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline{color:#737480}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-color:#737480;border-width:1px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-start{border-radius:6px 0 0 6px;min-width:6px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-radius:0 6px 6px 0}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-gap{border-radius:0}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end{border-color:#737480;border-width:2px}:host ::ng-deep .custom-mat-form-field .mat-form-field-subscript-wrapper{display:none}:host ::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;font-size:14px}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{transform:translateY(-50%)}:host ::ng-deep .custom-mat-form-field .mat-select-value{max-width:calc(100% - 20px)}:host ::ng-deep .custom-mat-form-field .mat-select-arrow-wrapper{transform:none;display:flex;align-items:center;position:absolute;right:-10px;top:5px}:host ::ng-deep .custom-mat-form-field input.mat-input-element{height:24px;line-height:24px;margin:3px 0 0}:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end{border-color:#ccc}:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end{border-color:#e70707}:host ::ng-deep .custom-mat-form-field .mat-select-arrow{width:16px;height:16px;border:none;margin:-6px 4px 0 0;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}:host ::ng-deep .custom-mat-form-field.use-css-arrow .mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #737480;margin:-6px 4px 0 0;background:none}:host ::ng-deep .custom-mat-form-field .mat-form-field-label-wrapper{top:2px;padding-top:0;height:28px;display:flex;overflow:visible!important;align-items:center}:host ::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;position:relative;top:auto;transform:none;padding:0 4px;background:white}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{position:absolute;top:-5px;width:-moz-fit-content;width:fit-content;font-size:12px;color:#555;background:white;padding:0 4px}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{position:relative;top:auto;left:auto;transform:none;font-size:14px;background:transparent}:host ::ng-deep .custom-mat-form-field .mat-select-placeholder{color:#555;line-height:34px}\n"] }]
         }], propDecorators: { filters: [{
                 type: Input
             }], filter: [{

package/esm2020/di2mt/widgets/site-upgrade/site-upgrade-data-table/site-upgrade-data-table.component.mjs CHANGED Viewed

@@ -421,10 +421,10 @@ export class SiteUpgradeDataTableComponent {
     }
 }
 SiteUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SiteUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SiteUpgradeDataTableComponent, selector: "tk-site-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"siteUpgradeTable\" class=\"wrapper\">\r\n  <div class=\"site-upgrade-status-wrapper\">\r\n    <tk-summary-card [description]=\"'Sites are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites are not ready'\" [value]=\"statusCounts['Not Ready']\"\r\n                     [status]=\"'Not Ready'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\"\r\n                     [status]=\"'Failed'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\"\r\n                     [status]=\"'Completed'\"></tk-summary-card>\r\n  </div>\r\n  <div class=\"table-action-panel\">\r\n    <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n    <div class=\"action-wrapper\">\r\n      <span>{{ filteredDataCount }} Sites</span>\r\n    </div>\r\n  </div>\r\n  <table mat-table [dataSource]=\"data\" class=\"site-upgrade-table\">\r\n\r\n    <!-- Site Column -->\r\n    <ng-container matColumnDef=\"site\">\r\n      <th mat-header-cell *matHeaderCellDef>Site</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"site-info\">\r\n          {{ element.siteName }}\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Ready Users Column -->\r\n    <ng-container matColumnDef=\"ready users\">\r\n      <th mat-header-cell *matHeaderCellDef>Ready Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalReadyUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Ready/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Upgraded Users Column -->\r\n    <ng-container matColumnDef=\"upgraded users\">\r\n      <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalUpgradedUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Upgraded/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Location Mapping Column -->\r\n    <ng-container matColumnDef=\"location mapping\">\r\n      <th mat-header-cell *matHeaderCellDef>Location Mapping</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.locationMapping\" src=\"assets/icons/check2_icon.png\" alt=\"Location Mapping Enabled\"/>\r\n          <img *ngIf=\"!element.locationMapping\" src=\"assets/icons/issue_icon.png\" alt=\"Location Mapping Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- PSTN Trunk Column -->\r\n    <ng-container matColumnDef=\"pstn trunk\">\r\n      <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.PSTNTrunk\" src=\"assets/icons/check2_icon.png\" alt=\"PSTN Trunk Enabled\"/>\r\n          <img *ngIf=\"!element.PSTNTrunk\" src=\"assets/icons/issue_icon.png\" alt=\"PSTN Trunk Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Site Upgrade Status Column -->\r\n    <ng-container matColumnDef=\"site upgrade status\">\r\n      <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"upgrade-status-cell\">\r\n          <ng-container *ngIf=\"element.upgradeStatus === 'READY'; else statusBlock\">\r\n            <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"onSiteMigration(element)\">Upgrade</button>\r\n          </ng-container>\r\n          <ng-template #statusBlock>\r\n            <div class=\"status-info\">\r\n              <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n              <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"progressBar\">\r\n      <th class=\"header\" mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"app-progress-bar-container\">\r\n          <app-progress-bar\r\n            [isAvailable]=\"element.isProgressBarAvailable\"\r\n            [progress]=\"element.progress\"\r\n            #progressBars>\r\n          </app-progress-bar>\r\n        </div>\r\n        <span *ngIf=\"element.isProgressBarAvailable\" class=\"progress-percents\">\r\n            {{ element.progress }} %\r\n          </span>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Action Column -->\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n      <td mat-cell *matCellDef=\"let element\" class=\"progress-spinner-td\">\r\n        <div class=\"flex-container\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"defaultBatchMenu\">\r\n            <span style=\"font-size: 17px;\">\u22EE</span>\r\n          </button>\r\n        </div>\r\n\r\n        <mat-menu\r\n          #defaultBatchMenu=\"matMenu\"\r\n          xPosition=\"after\"\r\n          class=\"webex-action-menu\">\r\n\r\n          <div class=\"webex-action-menu-row\"\r\n               [ngClass]=\"{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }\"\r\n               (click)=\"element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)\">\r\n                    <span\r\n                      class=\"webex-details-icon webex-icon\"\r\n                      [ngClass]=\"{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}\">\r\n                    </span>\r\n            <span class=\"webex-action-menu-title\">Collect</span>\r\n          </div>\r\n        </mat-menu>\r\n\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"userUpgradeLoader\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n        <mat-progress-spinner\r\n          *ngIf=\"element.pending\"\r\n          class=\"field-spinner\"\r\n          [diameter]=\"20\"\r\n          mode=\"indeterminate\">\r\n        </mat-progress-spinner>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.webex-action-menu{box-shadow:0 4px 40px #0000001a!important;border-radius:0!important;width:258px;box-sizing:content-box;cursor:pointer}.webex-action-menu-row-disabled{cursor:default!important;opacity:.4}.webex-action-menu-row-disabled .webex-action-menu-title{color:#bababa!important;line-height:23px}.app-progress-bar-container{margin:7px 20px 0 0}.progress-bar-container{min-width:40px}.webex-action-menu-row:hover{background:#f5f5f5}.webex-icon{display:inline-block;height:25px;width:25px;margin:0 7px 0 0}.webex-details-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.2115 19.5H17.0961V16H16.2115V19.5ZM16.6538 15.0865C16.7743 15.0929 16.8782 15.0509 16.9653 14.9606C17.0525 14.8702 17.0961 14.7647 17.0961 14.6442C17.0961 14.5237 17.0509 14.4199 16.9605 14.3327C16.8701 14.2455 16.7679 14.2019 16.6538 14.2019C16.5333 14.2019 16.4294 14.2455 16.3422 14.3327C16.2551 14.4199 16.2115 14.5237 16.2115 14.6442C16.2115 14.7583 16.2551 14.8606 16.3422 14.951C16.4294 15.0413 16.5333 15.0865 16.6538 15.0865ZM4.99997 3.99998V10.1827V10.1538V20V3.99998ZM7.25 13.75H10.7231C10.8679 13.4692 11.0307 13.2038 11.2115 12.9538C11.3923 12.7038 11.591 12.4692 11.8077 12.25H7.25V13.75ZM7.25 17.75H10.0173C9.98009 17.5 9.9615 17.2516 9.9615 17.0048C9.9615 16.758 9.97688 16.5064 10.0076 16.25H7.25V17.75ZM5.3077 21.5C4.80257 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V4.3077C3.5 3.80257 3.675 3.375 4.025 3.025C4.375 2.675 4.80257 2.5 5.3077 2.5H13.25L18.5 7.74995V10.425C18.2538 10.3506 18.0073 10.2933 17.7605 10.2529C17.5137 10.2125 17.2602 10.1891 17 10.1827V8.49995H12.5V3.99998H5.3077C5.23077 3.99998 5.16024 4.03203 5.09612 4.09613C5.03202 4.16024 4.99997 4.23077 4.99997 4.3077V19.6923C4.99997 19.7692 5.03202 19.8397 5.09612 19.9038C5.16024 19.9679 5.23077 20 5.3077 20H10.7615C10.9064 20.2871 11.0692 20.5557 11.25 20.8057C11.4307 21.0557 11.6327 21.2871 11.8557 21.5H5.3077ZM16.6538 12.3462C17.9025 12.3462 18.9647 12.784 19.8403 13.6596C20.7159 14.5352 21.1538 15.5974 21.1538 16.8461C21.1538 18.0948 20.7159 19.157 19.8403 20.0326C18.9647 20.9083 17.9025 21.3461 16.6538 21.3461C15.4051 21.3461 14.3429 20.9083 13.4673 20.0326C12.5916 19.157 12.1538 18.0948 12.1538 16.8461C12.1538 15.5974 12.5916 14.5352 13.4673 13.6596C14.3429 12.784 15.4051 12.3462 16.6538 12.3462Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\")}.webex-action-menu-row{padding:5px 15px;display:flex;justify-content:flex-start}.webex-action-menu-row .webex-action-menu-title{line-height:23px}.mat-menu-content:not(:empty){padding-top:0!important}.mat-menu-panel{min-height:auto!important}#siteUpgradeTable{font-family:Inter,sans-serif!important}.wrapper{display:flex;flex-direction:column;gap:1rem}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}.mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0;position:absolute}.progress-percents{font-weight:500;font-size:12px}::ng-deep .mat-progress-spinner-td{position:relative}::ng-deep #siteUpgradeTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.site-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.site-upgrade-table .mat-header-row{font-size:12px;height:35px}.site-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}.site-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.site-upgrade-table .indicator-status-ready{color:#1170cf!important}.site-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.site-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:4px}.site-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.site-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.site-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.site-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.site-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.site-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.site-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.site-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.site-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.site-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.site-upgrade-table .flex-container{display:flex}.site-upgrade-table .upgrade-button{border:1px solid #08599c!important;color:#08599c!important;background:white!important;border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.site-upgrade-table .upgrade-button:hover{background-color:#e3f2fd!important}.site-upgrade-table .user-count-info .user-count{font-weight:500;color:#212121}.site-upgrade-table .user-count-info .user-label{font-size:12px;color:#757575}.site-upgrade-table .status-icon-cell,.site-upgrade-table .collect-icon-cell{display:flex;align-items:center}.site-upgrade-table .icon-play{width:24px;height:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2219%22 viewBox%3D%220 0 18 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.09567 11.7427L11.3625 9.64421C11.523 9.54226 11.6033 9.40067 11.6033 9.21945C11.6033 9.03821 11.523 8.89615 11.3625 8.79326L8.09567 6.69472C7.92739 6.57933 7.75479 6.5701 7.57787 6.66701C7.40096 6.76391 7.3125 6.91497 7.3125 7.12019V11.3173C7.3125 11.5225 7.40096 11.6736 7.57787 11.7705C7.75479 11.8674 7.92739 11.8581 8.09567 11.7427ZM9.00124 16.3437C8.01579 16.3437 7.08951 16.1567 6.22241 15.7827C5.3553 15.4087 4.60104 14.9012 3.95963 14.26C3.3182 13.6189 2.81041 12.865 2.43624 11.9982C2.06208 11.1315 1.875 10.2054 1.875 9.21999C1.875 8.23454 2.062 7.30826 2.436 6.44116C2.81 5.57405 3.31756 4.81979 3.95869 4.17838C4.59983 3.53695 5.35376 3.02916 6.22048 2.65499C7.08719 2.28083 8.01328 2.09375 8.99873 2.09375C9.98418 2.09375 10.9105 2.28075 11.7776 2.65475C12.6447 3.02875 13.3989 3.53631 14.0403 4.17744C14.6818 4.81858 15.1896 5.57251 15.5637 6.43923C15.9379 7.30594 16.125 8.23203 16.125 9.21748C16.125 10.2029 15.938 11.1292 15.564 11.9963C15.19 12.8634 14.6824 13.6177 14.0413 14.2591C13.4001 14.9005 12.6462 15.4083 11.7795 15.7825C10.9128 16.1566 9.98669 16.3437 9.00124 16.3437ZM8.99998 15.2187C10.675 15.2187 12.0937 14.6375 13.2562 13.475C14.4187 12.3125 15 10.8937 15 9.21873C15 7.54373 14.4187 6.12498 13.2562 4.96248C12.0937 3.79998 10.675 3.21873 8.99998 3.21873C7.32498 3.21873 5.90623 3.79998 4.74373 4.96248C3.58123 6.12498 2.99998 7.54373 2.99998 9.21873C2.99998 10.8937 3.58123 12.3125 4.74373 13.475C5.90623 14.6375 7.32498 15.2187 8.99998 15.2187Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}.site-upgrade-table .collect-icon-cell{cursor:pointer}::ng-deep .action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem;color:#555}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.pay-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid #2c355d;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.pay-button-icon:after{content:\"\";width:0;height:0;border-left:6px solid #2c355d;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.pay-button-icon:hover{border-color:#2c355d;background-color:#f8fafc;transform:scale(1.05)}.pay-button-icon:hover:after{border-left-color:#2c355d}.pay-button-icon:active{transform:scale(.95);background-color:#e2e8f0}.pay-button-icon:disabled,.pay-button-icon.disabled{opacity:.5;cursor:not-allowed}.pay-button-icon:disabled:hover,.pay-button-icon.disabled:hover{transform:none;border-color:#d1d5db;background-color:#fff}.pay-button-icon:disabled:hover:after,.pay-button-icon.disabled:hover:after{border-left-color:#2c355d}.pay-button-icon.small{width:32px;height:32px;border-width:1.5px}.pay-button-icon.small:after{border-left-width:6px;border-top-width:5px;border-bottom-width:5px;margin-left:1px}.pay-button-icon.large{width:48px;height:48px;border-width:2.5px}.pay-button-icon.large:after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}.pay-button-icon.xl{width:56px;height:56px;border-width:3px}.pay-button-icon.xl:after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}.pay-button-icon.loading:after{display:none}.pay-button-icon.loading:before{content:\"\";width:16px;height:16px;border:2px solid #2c355d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#2c355d;transition:color .3s ease}.pay-button .pay-button-icon{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: i5.TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.ProgressBarComponent, selector: "app-progress-bar", inputs: ["isAvailable", "progress"] }], encapsulation: i0.ViewEncapsulation.None });
+SiteUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SiteUpgradeDataTableComponent, selector: "tk-site-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"siteUpgradeTable\" class=\"wrapper\">\r\n  <div class=\"site-upgrade-status-wrapper\">\r\n    <tk-summary-card [description]=\"'Sites are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites are not ready'\" [value]=\"statusCounts['Not Ready']\"\r\n                     [status]=\"'Not Ready'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\"\r\n                     [status]=\"'Failed'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\"\r\n                     [status]=\"'Completed'\"></tk-summary-card>\r\n  </div>\r\n  <div class=\"table-action-panel\">\r\n    <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n    <div class=\"action-wrapper\">\r\n      <span>{{ filteredDataCount }} Sites</span>\r\n    </div>\r\n  </div>\r\n  <table mat-table [dataSource]=\"data\" class=\"site-upgrade-table\">\r\n\r\n    <!-- Site Column -->\r\n    <ng-container matColumnDef=\"site\">\r\n      <th mat-header-cell *matHeaderCellDef>Site</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"site-info\">\r\n          {{ element.siteName }}\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Ready Users Column -->\r\n    <ng-container matColumnDef=\"ready users\">\r\n      <th mat-header-cell *matHeaderCellDef>Ready Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalReadyUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Ready/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Upgraded Users Column -->\r\n    <ng-container matColumnDef=\"upgraded users\">\r\n      <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalUpgradedUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Upgraded/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Location Mapping Column -->\r\n    <ng-container matColumnDef=\"location mapping\">\r\n      <th mat-header-cell *matHeaderCellDef>Location Mapping</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.locationMapping\" src=\"assets/icons/check2_icon.png\" alt=\"Location Mapping Enabled\"/>\r\n          <img *ngIf=\"!element.locationMapping\" src=\"assets/icons/issue_icon.png\" alt=\"Location Mapping Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- PSTN Trunk Column -->\r\n    <ng-container matColumnDef=\"pstn trunk\">\r\n      <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.PSTNTrunk\" src=\"assets/icons/check2_icon.png\" alt=\"PSTN Trunk Enabled\"/>\r\n          <img *ngIf=\"!element.PSTNTrunk\" src=\"assets/icons/issue_icon.png\" alt=\"PSTN Trunk Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Site Upgrade Status Column -->\r\n    <ng-container matColumnDef=\"site upgrade status\">\r\n      <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"upgrade-status-cell\">\r\n          <ng-container *ngIf=\"element.upgradeStatus === 'READY'; else statusBlock\">\r\n            <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"onSiteMigration(element)\">Upgrade</button>\r\n          </ng-container>\r\n          <ng-template #statusBlock>\r\n            <div class=\"status-info\">\r\n              <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n              <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"progressBar\">\r\n      <th class=\"header\" mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"app-progress-bar-container\">\r\n          <app-progress-bar\r\n            [isAvailable]=\"element.isProgressBarAvailable\"\r\n            [progress]=\"element.progress\"\r\n            #progressBars>\r\n          </app-progress-bar>\r\n        </div>\r\n        <span *ngIf=\"element.isProgressBarAvailable\" class=\"progress-percents\">\r\n            {{ element.progress }} %\r\n          </span>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Action Column -->\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n      <td mat-cell *matCellDef=\"let element\" class=\"progress-spinner-td\">\r\n        <div class=\"flex-container\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"defaultBatchMenu\">\r\n            <span style=\"font-size: 17px;\">\u22EE</span>\r\n          </button>\r\n        </div>\r\n\r\n        <mat-menu\r\n          #defaultBatchMenu=\"matMenu\"\r\n          xPosition=\"after\"\r\n          class=\"webex-action-menu\">\r\n\r\n          <div class=\"webex-action-menu-row\"\r\n               [ngClass]=\"{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }\"\r\n               (click)=\"element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)\">\r\n                    <span\r\n                      class=\"webex-details-icon webex-icon\"\r\n                      [ngClass]=\"{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}\">\r\n                    </span>\r\n            <span class=\"webex-action-menu-title\">Collect</span>\r\n          </div>\r\n        </mat-menu>\r\n\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"userUpgradeLoader\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n        <mat-progress-spinner\r\n          *ngIf=\"element.pending\"\r\n          class=\"field-spinner\"\r\n          [diameter]=\"20\"\r\n          mode=\"indeterminate\">\r\n        </mat-progress-spinner>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.webex-action-menu{box-shadow:0 4px 40px #0000001a!important;border-radius:0!important;width:258px;box-sizing:content-box;cursor:pointer}.webex-action-menu-row-disabled{cursor:default!important;opacity:.4}.webex-action-menu-row-disabled .webex-action-menu-title{color:#bababa!important;line-height:23px}.app-progress-bar-container{margin:7px 20px 0 0}.progress-bar-container{min-width:40px}.webex-action-menu-row:hover{background:#f5f5f5}.webex-icon{display:inline-block;height:25px;width:25px;margin:0 7px 0 0}.webex-details-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.2115 19.5H17.0961V16H16.2115V19.5ZM16.6538 15.0865C16.7743 15.0929 16.8782 15.0509 16.9653 14.9606C17.0525 14.8702 17.0961 14.7647 17.0961 14.6442C17.0961 14.5237 17.0509 14.4199 16.9605 14.3327C16.8701 14.2455 16.7679 14.2019 16.6538 14.2019C16.5333 14.2019 16.4294 14.2455 16.3422 14.3327C16.2551 14.4199 16.2115 14.5237 16.2115 14.6442C16.2115 14.7583 16.2551 14.8606 16.3422 14.951C16.4294 15.0413 16.5333 15.0865 16.6538 15.0865ZM4.99997 3.99998V10.1827V10.1538V20V3.99998ZM7.25 13.75H10.7231C10.8679 13.4692 11.0307 13.2038 11.2115 12.9538C11.3923 12.7038 11.591 12.4692 11.8077 12.25H7.25V13.75ZM7.25 17.75H10.0173C9.98009 17.5 9.9615 17.2516 9.9615 17.0048C9.9615 16.758 9.97688 16.5064 10.0076 16.25H7.25V17.75ZM5.3077 21.5C4.80257 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V4.3077C3.5 3.80257 3.675 3.375 4.025 3.025C4.375 2.675 4.80257 2.5 5.3077 2.5H13.25L18.5 7.74995V10.425C18.2538 10.3506 18.0073 10.2933 17.7605 10.2529C17.5137 10.2125 17.2602 10.1891 17 10.1827V8.49995H12.5V3.99998H5.3077C5.23077 3.99998 5.16024 4.03203 5.09612 4.09613C5.03202 4.16024 4.99997 4.23077 4.99997 4.3077V19.6923C4.99997 19.7692 5.03202 19.8397 5.09612 19.9038C5.16024 19.9679 5.23077 20 5.3077 20H10.7615C10.9064 20.2871 11.0692 20.5557 11.25 20.8057C11.4307 21.0557 11.6327 21.2871 11.8557 21.5H5.3077ZM16.6538 12.3462C17.9025 12.3462 18.9647 12.784 19.8403 13.6596C20.7159 14.5352 21.1538 15.5974 21.1538 16.8461C21.1538 18.0948 20.7159 19.157 19.8403 20.0326C18.9647 20.9083 17.9025 21.3461 16.6538 21.3461C15.4051 21.3461 14.3429 20.9083 13.4673 20.0326C12.5916 19.157 12.1538 18.0948 12.1538 16.8461C12.1538 15.5974 12.5916 14.5352 13.4673 13.6596C14.3429 12.784 15.4051 12.3462 16.6538 12.3462Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\")}.webex-action-menu-row{padding:5px 15px;display:flex;justify-content:flex-start}.webex-action-menu-row .webex-action-menu-title{line-height:23px}.mat-menu-content:not(:empty){padding-top:0!important}.mat-menu-panel{min-height:auto!important}#siteUpgradeTable{font-family:Inter,sans-serif!important}.wrapper{display:flex;flex-direction:column;gap:1rem}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}.mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0;position:absolute}.progress-percents{font-weight:500;font-size:12px}:host ::ng-deep .mat-progress-spinner-td{position:relative}:host ::ng-deep #siteUpgradeTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.site-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.site-upgrade-table .mat-header-row{font-size:12px;height:35px}.site-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}.site-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.site-upgrade-table .indicator-status-ready{color:#1170cf!important}.site-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.site-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:4px}.site-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.site-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.site-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.site-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.site-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.site-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.site-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.site-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.site-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.site-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.site-upgrade-table .flex-container{display:flex}.site-upgrade-table .upgrade-button{border:1px solid #08599c!important;color:#08599c!important;background:white!important;border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.site-upgrade-table .upgrade-button:hover{background-color:#e3f2fd!important}.site-upgrade-table .user-count-info .user-count{font-weight:500;color:#212121}.site-upgrade-table .user-count-info .user-label{font-size:12px;color:#757575}.site-upgrade-table .status-icon-cell,.site-upgrade-table .collect-icon-cell{display:flex;align-items:center}.site-upgrade-table .icon-play{width:24px;height:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2219%22 viewBox%3D%220 0 18 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.09567 11.7427L11.3625 9.64421C11.523 9.54226 11.6033 9.40067 11.6033 9.21945C11.6033 9.03821 11.523 8.89615 11.3625 8.79326L8.09567 6.69472C7.92739 6.57933 7.75479 6.5701 7.57787 6.66701C7.40096 6.76391 7.3125 6.91497 7.3125 7.12019V11.3173C7.3125 11.5225 7.40096 11.6736 7.57787 11.7705C7.75479 11.8674 7.92739 11.8581 8.09567 11.7427ZM9.00124 16.3437C8.01579 16.3437 7.08951 16.1567 6.22241 15.7827C5.3553 15.4087 4.60104 14.9012 3.95963 14.26C3.3182 13.6189 2.81041 12.865 2.43624 11.9982C2.06208 11.1315 1.875 10.2054 1.875 9.21999C1.875 8.23454 2.062 7.30826 2.436 6.44116C2.81 5.57405 3.31756 4.81979 3.95869 4.17838C4.59983 3.53695 5.35376 3.02916 6.22048 2.65499C7.08719 2.28083 8.01328 2.09375 8.99873 2.09375C9.98418 2.09375 10.9105 2.28075 11.7776 2.65475C12.6447 3.02875 13.3989 3.53631 14.0403 4.17744C14.6818 4.81858 15.1896 5.57251 15.5637 6.43923C15.9379 7.30594 16.125 8.23203 16.125 9.21748C16.125 10.2029 15.938 11.1292 15.564 11.9963C15.19 12.8634 14.6824 13.6177 14.0413 14.2591C13.4001 14.9005 12.6462 15.4083 11.7795 15.7825C10.9128 16.1566 9.98669 16.3437 9.00124 16.3437ZM8.99998 15.2187C10.675 15.2187 12.0937 14.6375 13.2562 13.475C14.4187 12.3125 15 10.8937 15 9.21873C15 7.54373 14.4187 6.12498 13.2562 4.96248C12.0937 3.79998 10.675 3.21873 8.99998 3.21873C7.32498 3.21873 5.90623 3.79998 4.74373 4.96248C3.58123 6.12498 2.99998 7.54373 2.99998 9.21873C2.99998 10.8937 3.58123 12.3125 4.74373 13.475C5.90623 14.6375 7.32498 15.2187 8.99998 15.2187Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}.site-upgrade-table .collect-icon-cell{cursor:pointer}:host ::ng-deep .action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem;color:#555}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.pay-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid #2c355d;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.pay-button-icon:after{content:\"\";width:0;height:0;border-left:6px solid #2c355d;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.pay-button-icon:hover{border-color:#2c355d;background-color:#f8fafc;transform:scale(1.05)}.pay-button-icon:hover:after{border-left-color:#2c355d}.pay-button-icon:active{transform:scale(.95);background-color:#e2e8f0}.pay-button-icon:disabled,.pay-button-icon.disabled{opacity:.5;cursor:not-allowed}.pay-button-icon:disabled:hover,.pay-button-icon.disabled:hover{transform:none;border-color:#d1d5db;background-color:#fff}.pay-button-icon:disabled:hover:after,.pay-button-icon.disabled:hover:after{border-left-color:#2c355d}.pay-button-icon.small{width:32px;height:32px;border-width:1.5px}.pay-button-icon.small:after{border-left-width:6px;border-top-width:5px;border-bottom-width:5px;margin-left:1px}.pay-button-icon.large{width:48px;height:48px;border-width:2.5px}.pay-button-icon.large:after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}.pay-button-icon.xl{width:56px;height:56px;border-width:3px}.pay-button-icon.xl:after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}.pay-button-icon.loading:after{display:none}.pay-button-icon.loading:before{content:\"\";width:16px;height:16px;border:2px solid #2c355d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#2c355d;transition:color .3s ease}.pay-button .pay-button-icon{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: i5.TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.ProgressBarComponent, selector: "app-progress-bar", inputs: ["isAvailable", "progress"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-site-upgrade-data-table', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"siteUpgradeTable\" class=\"wrapper\">\r\n  <div class=\"site-upgrade-status-wrapper\">\r\n    <tk-summary-card [description]=\"'Sites are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites are not ready'\" [value]=\"statusCounts['Not Ready']\"\r\n                     [status]=\"'Not Ready'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\"\r\n                     [status]=\"'Failed'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\"\r\n                     [status]=\"'Completed'\"></tk-summary-card>\r\n  </div>\r\n  <div class=\"table-action-panel\">\r\n    <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n    <div class=\"action-wrapper\">\r\n      <span>{{ filteredDataCount }} Sites</span>\r\n    </div>\r\n  </div>\r\n  <table mat-table [dataSource]=\"data\" class=\"site-upgrade-table\">\r\n\r\n    <!-- Site Column -->\r\n    <ng-container matColumnDef=\"site\">\r\n      <th mat-header-cell *matHeaderCellDef>Site</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"site-info\">\r\n          {{ element.siteName }}\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Ready Users Column -->\r\n    <ng-container matColumnDef=\"ready users\">\r\n      <th mat-header-cell *matHeaderCellDef>Ready Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalReadyUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Ready/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Upgraded Users Column -->\r\n    <ng-container matColumnDef=\"upgraded users\">\r\n      <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalUpgradedUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Upgraded/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Location Mapping Column -->\r\n    <ng-container matColumnDef=\"location mapping\">\r\n      <th mat-header-cell *matHeaderCellDef>Location Mapping</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.locationMapping\" src=\"assets/icons/check2_icon.png\" alt=\"Location Mapping Enabled\"/>\r\n          <img *ngIf=\"!element.locationMapping\" src=\"assets/icons/issue_icon.png\" alt=\"Location Mapping Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- PSTN Trunk Column -->\r\n    <ng-container matColumnDef=\"pstn trunk\">\r\n      <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.PSTNTrunk\" src=\"assets/icons/check2_icon.png\" alt=\"PSTN Trunk Enabled\"/>\r\n          <img *ngIf=\"!element.PSTNTrunk\" src=\"assets/icons/issue_icon.png\" alt=\"PSTN Trunk Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Site Upgrade Status Column -->\r\n    <ng-container matColumnDef=\"site upgrade status\">\r\n      <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"upgrade-status-cell\">\r\n          <ng-container *ngIf=\"element.upgradeStatus === 'READY'; else statusBlock\">\r\n            <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"onSiteMigration(element)\">Upgrade</button>\r\n          </ng-container>\r\n          <ng-template #statusBlock>\r\n            <div class=\"status-info\">\r\n              <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n              <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"progressBar\">\r\n      <th class=\"header\" mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"app-progress-bar-container\">\r\n          <app-progress-bar\r\n            [isAvailable]=\"element.isProgressBarAvailable\"\r\n            [progress]=\"element.progress\"\r\n            #progressBars>\r\n          </app-progress-bar>\r\n        </div>\r\n        <span *ngIf=\"element.isProgressBarAvailable\" class=\"progress-percents\">\r\n            {{ element.progress }} %\r\n          </span>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Action Column -->\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n      <td mat-cell *matCellDef=\"let element\" class=\"progress-spinner-td\">\r\n        <div class=\"flex-container\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"defaultBatchMenu\">\r\n            <span style=\"font-size: 17px;\">\u22EE</span>\r\n          </button>\r\n        </div>\r\n\r\n        <mat-menu\r\n          #defaultBatchMenu=\"matMenu\"\r\n          xPosition=\"after\"\r\n          class=\"webex-action-menu\">\r\n\r\n          <div class=\"webex-action-menu-row\"\r\n               [ngClass]=\"{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }\"\r\n               (click)=\"element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)\">\r\n                    <span\r\n                      class=\"webex-details-icon webex-icon\"\r\n                      [ngClass]=\"{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}\">\r\n                    </span>\r\n            <span class=\"webex-action-menu-title\">Collect</span>\r\n          </div>\r\n        </mat-menu>\r\n\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"userUpgradeLoader\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n        <mat-progress-spinner\r\n          *ngIf=\"element.pending\"\r\n          class=\"field-spinner\"\r\n          [diameter]=\"20\"\r\n          mode=\"indeterminate\">\r\n        </mat-progress-spinner>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.webex-action-menu{box-shadow:0 4px 40px #0000001a!important;border-radius:0!important;width:258px;box-sizing:content-box;cursor:pointer}.webex-action-menu-row-disabled{cursor:default!important;opacity:.4}.webex-action-menu-row-disabled .webex-action-menu-title{color:#bababa!important;line-height:23px}.app-progress-bar-container{margin:7px 20px 0 0}.progress-bar-container{min-width:40px}.webex-action-menu-row:hover{background:#f5f5f5}.webex-icon{display:inline-block;height:25px;width:25px;margin:0 7px 0 0}.webex-details-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.2115 19.5H17.0961V16H16.2115V19.5ZM16.6538 15.0865C16.7743 15.0929 16.8782 15.0509 16.9653 14.9606C17.0525 14.8702 17.0961 14.7647 17.0961 14.6442C17.0961 14.5237 17.0509 14.4199 16.9605 14.3327C16.8701 14.2455 16.7679 14.2019 16.6538 14.2019C16.5333 14.2019 16.4294 14.2455 16.3422 14.3327C16.2551 14.4199 16.2115 14.5237 16.2115 14.6442C16.2115 14.7583 16.2551 14.8606 16.3422 14.951C16.4294 15.0413 16.5333 15.0865 16.6538 15.0865ZM4.99997 3.99998V10.1827V10.1538V20V3.99998ZM7.25 13.75H10.7231C10.8679 13.4692 11.0307 13.2038 11.2115 12.9538C11.3923 12.7038 11.591 12.4692 11.8077 12.25H7.25V13.75ZM7.25 17.75H10.0173C9.98009 17.5 9.9615 17.2516 9.9615 17.0048C9.9615 16.758 9.97688 16.5064 10.0076 16.25H7.25V17.75ZM5.3077 21.5C4.80257 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V4.3077C3.5 3.80257 3.675 3.375 4.025 3.025C4.375 2.675 4.80257 2.5 5.3077 2.5H13.25L18.5 7.74995V10.425C18.2538 10.3506 18.0073 10.2933 17.7605 10.2529C17.5137 10.2125 17.2602 10.1891 17 10.1827V8.49995H12.5V3.99998H5.3077C5.23077 3.99998 5.16024 4.03203 5.09612 4.09613C5.03202 4.16024 4.99997 4.23077 4.99997 4.3077V19.6923C4.99997 19.7692 5.03202 19.8397 5.09612 19.9038C5.16024 19.9679 5.23077 20 5.3077 20H10.7615C10.9064 20.2871 11.0692 20.5557 11.25 20.8057C11.4307 21.0557 11.6327 21.2871 11.8557 21.5H5.3077ZM16.6538 12.3462C17.9025 12.3462 18.9647 12.784 19.8403 13.6596C20.7159 14.5352 21.1538 15.5974 21.1538 16.8461C21.1538 18.0948 20.7159 19.157 19.8403 20.0326C18.9647 20.9083 17.9025 21.3461 16.6538 21.3461C15.4051 21.3461 14.3429 20.9083 13.4673 20.0326C12.5916 19.157 12.1538 18.0948 12.1538 16.8461C12.1538 15.5974 12.5916 14.5352 13.4673 13.6596C14.3429 12.784 15.4051 12.3462 16.6538 12.3462Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\")}.webex-action-menu-row{padding:5px 15px;display:flex;justify-content:flex-start}.webex-action-menu-row .webex-action-menu-title{line-height:23px}.mat-menu-content:not(:empty){padding-top:0!important}.mat-menu-panel{min-height:auto!important}#siteUpgradeTable{font-family:Inter,sans-serif!important}.wrapper{display:flex;flex-direction:column;gap:1rem}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}.mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0;position:absolute}.progress-percents{font-weight:500;font-size:12px}::ng-deep .mat-progress-spinner-td{position:relative}::ng-deep #siteUpgradeTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.site-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.site-upgrade-table .mat-header-row{font-size:12px;height:35px}.site-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}.site-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.site-upgrade-table .indicator-status-ready{color:#1170cf!important}.site-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.site-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:4px}.site-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.site-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.site-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.site-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.site-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.site-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.site-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.site-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.site-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.site-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.site-upgrade-table .flex-container{display:flex}.site-upgrade-table .upgrade-button{border:1px solid #08599c!important;color:#08599c!important;background:white!important;border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.site-upgrade-table .upgrade-button:hover{background-color:#e3f2fd!important}.site-upgrade-table .user-count-info .user-count{font-weight:500;color:#212121}.site-upgrade-table .user-count-info .user-label{font-size:12px;color:#757575}.site-upgrade-table .status-icon-cell,.site-upgrade-table .collect-icon-cell{display:flex;align-items:center}.site-upgrade-table .icon-play{width:24px;height:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2219%22 viewBox%3D%220 0 18 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.09567 11.7427L11.3625 9.64421C11.523 9.54226 11.6033 9.40067 11.6033 9.21945C11.6033 9.03821 11.523 8.89615 11.3625 8.79326L8.09567 6.69472C7.92739 6.57933 7.75479 6.5701 7.57787 6.66701C7.40096 6.76391 7.3125 6.91497 7.3125 7.12019V11.3173C7.3125 11.5225 7.40096 11.6736 7.57787 11.7705C7.75479 11.8674 7.92739 11.8581 8.09567 11.7427ZM9.00124 16.3437C8.01579 16.3437 7.08951 16.1567 6.22241 15.7827C5.3553 15.4087 4.60104 14.9012 3.95963 14.26C3.3182 13.6189 2.81041 12.865 2.43624 11.9982C2.06208 11.1315 1.875 10.2054 1.875 9.21999C1.875 8.23454 2.062 7.30826 2.436 6.44116C2.81 5.57405 3.31756 4.81979 3.95869 4.17838C4.59983 3.53695 5.35376 3.02916 6.22048 2.65499C7.08719 2.28083 8.01328 2.09375 8.99873 2.09375C9.98418 2.09375 10.9105 2.28075 11.7776 2.65475C12.6447 3.02875 13.3989 3.53631 14.0403 4.17744C14.6818 4.81858 15.1896 5.57251 15.5637 6.43923C15.9379 7.30594 16.125 8.23203 16.125 9.21748C16.125 10.2029 15.938 11.1292 15.564 11.9963C15.19 12.8634 14.6824 13.6177 14.0413 14.2591C13.4001 14.9005 12.6462 15.4083 11.7795 15.7825C10.9128 16.1566 9.98669 16.3437 9.00124 16.3437ZM8.99998 15.2187C10.675 15.2187 12.0937 14.6375 13.2562 13.475C14.4187 12.3125 15 10.8937 15 9.21873C15 7.54373 14.4187 6.12498 13.2562 4.96248C12.0937 3.79998 10.675 3.21873 8.99998 3.21873C7.32498 3.21873 5.90623 3.79998 4.74373 4.96248C3.58123 6.12498 2.99998 7.54373 2.99998 9.21873C2.99998 10.8937 3.58123 12.3125 4.74373 13.475C5.90623 14.6375 7.32498 15.2187 8.99998 15.2187Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}.site-upgrade-table .collect-icon-cell{cursor:pointer}::ng-deep .action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem;color:#555}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.pay-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid #2c355d;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.pay-button-icon:after{content:\"\";width:0;height:0;border-left:6px solid #2c355d;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.pay-button-icon:hover{border-color:#2c355d;background-color:#f8fafc;transform:scale(1.05)}.pay-button-icon:hover:after{border-left-color:#2c355d}.pay-button-icon:active{transform:scale(.95);background-color:#e2e8f0}.pay-button-icon:disabled,.pay-button-icon.disabled{opacity:.5;cursor:not-allowed}.pay-button-icon:disabled:hover,.pay-button-icon.disabled:hover{transform:none;border-color:#d1d5db;background-color:#fff}.pay-button-icon:disabled:hover:after,.pay-button-icon.disabled:hover:after{border-left-color:#2c355d}.pay-button-icon.small{width:32px;height:32px;border-width:1.5px}.pay-button-icon.small:after{border-left-width:6px;border-top-width:5px;border-bottom-width:5px;margin-left:1px}.pay-button-icon.large{width:48px;height:48px;border-width:2.5px}.pay-button-icon.large:after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}.pay-button-icon.xl{width:56px;height:56px;border-width:3px}.pay-button-icon.xl:after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}.pay-button-icon.loading:after{display:none}.pay-button-icon.loading:before{content:\"\";width:16px;height:16px;border:2px solid #2c355d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#2c355d;transition:color .3s ease}.pay-button .pay-button-icon{margin:0}\n"] }]
+            args: [{ selector: 'tk-site-upgrade-data-table', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"siteUpgradeTable\" class=\"wrapper\">\r\n  <div class=\"site-upgrade-status-wrapper\">\r\n    <tk-summary-card [description]=\"'Sites are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites are not ready'\" [value]=\"statusCounts['Not Ready']\"\r\n                     [status]=\"'Not Ready'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\"\r\n                     [status]=\"'Failed'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\"\r\n                     [status]=\"'Completed'\"></tk-summary-card>\r\n  </div>\r\n  <div class=\"table-action-panel\">\r\n    <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n    <div class=\"action-wrapper\">\r\n      <span>{{ filteredDataCount }} Sites</span>\r\n    </div>\r\n  </div>\r\n  <table mat-table [dataSource]=\"data\" class=\"site-upgrade-table\">\r\n\r\n    <!-- Site Column -->\r\n    <ng-container matColumnDef=\"site\">\r\n      <th mat-header-cell *matHeaderCellDef>Site</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"site-info\">\r\n          {{ element.siteName }}\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Ready Users Column -->\r\n    <ng-container matColumnDef=\"ready users\">\r\n      <th mat-header-cell *matHeaderCellDef>Ready Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalReadyUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Ready/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Upgraded Users Column -->\r\n    <ng-container matColumnDef=\"upgraded users\">\r\n      <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalUpgradedUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Upgraded/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Location Mapping Column -->\r\n    <ng-container matColumnDef=\"location mapping\">\r\n      <th mat-header-cell *matHeaderCellDef>Location Mapping</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.locationMapping\" src=\"assets/icons/check2_icon.png\" alt=\"Location Mapping Enabled\"/>\r\n          <img *ngIf=\"!element.locationMapping\" src=\"assets/icons/issue_icon.png\" alt=\"Location Mapping Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- PSTN Trunk Column -->\r\n    <ng-container matColumnDef=\"pstn trunk\">\r\n      <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.PSTNTrunk\" src=\"assets/icons/check2_icon.png\" alt=\"PSTN Trunk Enabled\"/>\r\n          <img *ngIf=\"!element.PSTNTrunk\" src=\"assets/icons/issue_icon.png\" alt=\"PSTN Trunk Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Site Upgrade Status Column -->\r\n    <ng-container matColumnDef=\"site upgrade status\">\r\n      <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"upgrade-status-cell\">\r\n          <ng-container *ngIf=\"element.upgradeStatus === 'READY'; else statusBlock\">\r\n            <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"onSiteMigration(element)\">Upgrade</button>\r\n          </ng-container>\r\n          <ng-template #statusBlock>\r\n            <div class=\"status-info\">\r\n              <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n              <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"progressBar\">\r\n      <th class=\"header\" mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"app-progress-bar-container\">\r\n          <app-progress-bar\r\n            [isAvailable]=\"element.isProgressBarAvailable\"\r\n            [progress]=\"element.progress\"\r\n            #progressBars>\r\n          </app-progress-bar>\r\n        </div>\r\n        <span *ngIf=\"element.isProgressBarAvailable\" class=\"progress-percents\">\r\n            {{ element.progress }} %\r\n          </span>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Action Column -->\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n      <td mat-cell *matCellDef=\"let element\" class=\"progress-spinner-td\">\r\n        <div class=\"flex-container\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"defaultBatchMenu\">\r\n            <span style=\"font-size: 17px;\">\u22EE</span>\r\n          </button>\r\n        </div>\r\n\r\n        <mat-menu\r\n          #defaultBatchMenu=\"matMenu\"\r\n          xPosition=\"after\"\r\n          class=\"webex-action-menu\">\r\n\r\n          <div class=\"webex-action-menu-row\"\r\n               [ngClass]=\"{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }\"\r\n               (click)=\"element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)\">\r\n                    <span\r\n                      class=\"webex-details-icon webex-icon\"\r\n                      [ngClass]=\"{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}\">\r\n                    </span>\r\n            <span class=\"webex-action-menu-title\">Collect</span>\r\n          </div>\r\n        </mat-menu>\r\n\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"userUpgradeLoader\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n        <mat-progress-spinner\r\n          *ngIf=\"element.pending\"\r\n          class=\"field-spinner\"\r\n          [diameter]=\"20\"\r\n          mode=\"indeterminate\">\r\n        </mat-progress-spinner>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.webex-action-menu{box-shadow:0 4px 40px #0000001a!important;border-radius:0!important;width:258px;box-sizing:content-box;cursor:pointer}.webex-action-menu-row-disabled{cursor:default!important;opacity:.4}.webex-action-menu-row-disabled .webex-action-menu-title{color:#bababa!important;line-height:23px}.app-progress-bar-container{margin:7px 20px 0 0}.progress-bar-container{min-width:40px}.webex-action-menu-row:hover{background:#f5f5f5}.webex-icon{display:inline-block;height:25px;width:25px;margin:0 7px 0 0}.webex-details-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.2115 19.5H17.0961V16H16.2115V19.5ZM16.6538 15.0865C16.7743 15.0929 16.8782 15.0509 16.9653 14.9606C17.0525 14.8702 17.0961 14.7647 17.0961 14.6442C17.0961 14.5237 17.0509 14.4199 16.9605 14.3327C16.8701 14.2455 16.7679 14.2019 16.6538 14.2019C16.5333 14.2019 16.4294 14.2455 16.3422 14.3327C16.2551 14.4199 16.2115 14.5237 16.2115 14.6442C16.2115 14.7583 16.2551 14.8606 16.3422 14.951C16.4294 15.0413 16.5333 15.0865 16.6538 15.0865ZM4.99997 3.99998V10.1827V10.1538V20V3.99998ZM7.25 13.75H10.7231C10.8679 13.4692 11.0307 13.2038 11.2115 12.9538C11.3923 12.7038 11.591 12.4692 11.8077 12.25H7.25V13.75ZM7.25 17.75H10.0173C9.98009 17.5 9.9615 17.2516 9.9615 17.0048C9.9615 16.758 9.97688 16.5064 10.0076 16.25H7.25V17.75ZM5.3077 21.5C4.80257 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V4.3077C3.5 3.80257 3.675 3.375 4.025 3.025C4.375 2.675 4.80257 2.5 5.3077 2.5H13.25L18.5 7.74995V10.425C18.2538 10.3506 18.0073 10.2933 17.7605 10.2529C17.5137 10.2125 17.2602 10.1891 17 10.1827V8.49995H12.5V3.99998H5.3077C5.23077 3.99998 5.16024 4.03203 5.09612 4.09613C5.03202 4.16024 4.99997 4.23077 4.99997 4.3077V19.6923C4.99997 19.7692 5.03202 19.8397 5.09612 19.9038C5.16024 19.9679 5.23077 20 5.3077 20H10.7615C10.9064 20.2871 11.0692 20.5557 11.25 20.8057C11.4307 21.0557 11.6327 21.2871 11.8557 21.5H5.3077ZM16.6538 12.3462C17.9025 12.3462 18.9647 12.784 19.8403 13.6596C20.7159 14.5352 21.1538 15.5974 21.1538 16.8461C21.1538 18.0948 20.7159 19.157 19.8403 20.0326C18.9647 20.9083 17.9025 21.3461 16.6538 21.3461C15.4051 21.3461 14.3429 20.9083 13.4673 20.0326C12.5916 19.157 12.1538 18.0948 12.1538 16.8461C12.1538 15.5974 12.5916 14.5352 13.4673 13.6596C14.3429 12.784 15.4051 12.3462 16.6538 12.3462Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\")}.webex-action-menu-row{padding:5px 15px;display:flex;justify-content:flex-start}.webex-action-menu-row .webex-action-menu-title{line-height:23px}.mat-menu-content:not(:empty){padding-top:0!important}.mat-menu-panel{min-height:auto!important}#siteUpgradeTable{font-family:Inter,sans-serif!important}.wrapper{display:flex;flex-direction:column;gap:1rem}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}.mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0;position:absolute}.progress-percents{font-weight:500;font-size:12px}:host ::ng-deep .mat-progress-spinner-td{position:relative}:host ::ng-deep #siteUpgradeTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.site-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.site-upgrade-table .mat-header-row{font-size:12px;height:35px}.site-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}.site-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.site-upgrade-table .indicator-status-ready{color:#1170cf!important}.site-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.site-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:4px}.site-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.site-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.site-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.site-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.site-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.site-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.site-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.site-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.site-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.site-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.site-upgrade-table .flex-container{display:flex}.site-upgrade-table .upgrade-button{border:1px solid #08599c!important;color:#08599c!important;background:white!important;border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.site-upgrade-table .upgrade-button:hover{background-color:#e3f2fd!important}.site-upgrade-table .user-count-info .user-count{font-weight:500;color:#212121}.site-upgrade-table .user-count-info .user-label{font-size:12px;color:#757575}.site-upgrade-table .status-icon-cell,.site-upgrade-table .collect-icon-cell{display:flex;align-items:center}.site-upgrade-table .icon-play{width:24px;height:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2219%22 viewBox%3D%220 0 18 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.09567 11.7427L11.3625 9.64421C11.523 9.54226 11.6033 9.40067 11.6033 9.21945C11.6033 9.03821 11.523 8.89615 11.3625 8.79326L8.09567 6.69472C7.92739 6.57933 7.75479 6.5701 7.57787 6.66701C7.40096 6.76391 7.3125 6.91497 7.3125 7.12019V11.3173C7.3125 11.5225 7.40096 11.6736 7.57787 11.7705C7.75479 11.8674 7.92739 11.8581 8.09567 11.7427ZM9.00124 16.3437C8.01579 16.3437 7.08951 16.1567 6.22241 15.7827C5.3553 15.4087 4.60104 14.9012 3.95963 14.26C3.3182 13.6189 2.81041 12.865 2.43624 11.9982C2.06208 11.1315 1.875 10.2054 1.875 9.21999C1.875 8.23454 2.062 7.30826 2.436 6.44116C2.81 5.57405 3.31756 4.81979 3.95869 4.17838C4.59983 3.53695 5.35376 3.02916 6.22048 2.65499C7.08719 2.28083 8.01328 2.09375 8.99873 2.09375C9.98418 2.09375 10.9105 2.28075 11.7776 2.65475C12.6447 3.02875 13.3989 3.53631 14.0403 4.17744C14.6818 4.81858 15.1896 5.57251 15.5637 6.43923C15.9379 7.30594 16.125 8.23203 16.125 9.21748C16.125 10.2029 15.938 11.1292 15.564 11.9963C15.19 12.8634 14.6824 13.6177 14.0413 14.2591C13.4001 14.9005 12.6462 15.4083 11.7795 15.7825C10.9128 16.1566 9.98669 16.3437 9.00124 16.3437ZM8.99998 15.2187C10.675 15.2187 12.0937 14.6375 13.2562 13.475C14.4187 12.3125 15 10.8937 15 9.21873C15 7.54373 14.4187 6.12498 13.2562 4.96248C12.0937 3.79998 10.675 3.21873 8.99998 3.21873C7.32498 3.21873 5.90623 3.79998 4.74373 4.96248C3.58123 6.12498 2.99998 7.54373 2.99998 9.21873C2.99998 10.8937 3.58123 12.3125 4.74373 13.475C5.90623 14.6375 7.32498 15.2187 8.99998 15.2187Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}.site-upgrade-table .collect-icon-cell{cursor:pointer}:host ::ng-deep .action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem;color:#555}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.pay-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid #2c355d;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.pay-button-icon:after{content:\"\";width:0;height:0;border-left:6px solid #2c355d;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.pay-button-icon:hover{border-color:#2c355d;background-color:#f8fafc;transform:scale(1.05)}.pay-button-icon:hover:after{border-left-color:#2c355d}.pay-button-icon:active{transform:scale(.95);background-color:#e2e8f0}.pay-button-icon:disabled,.pay-button-icon.disabled{opacity:.5;cursor:not-allowed}.pay-button-icon:disabled:hover,.pay-button-icon.disabled:hover{transform:none;border-color:#d1d5db;background-color:#fff}.pay-button-icon:disabled:hover:after,.pay-button-icon.disabled:hover:after{border-left-color:#2c355d}.pay-button-icon.small{width:32px;height:32px;border-width:1.5px}.pay-button-icon.small:after{border-left-width:6px;border-top-width:5px;border-bottom-width:5px;margin-left:1px}.pay-button-icon.large{width:48px;height:48px;border-width:2.5px}.pay-button-icon.large:after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}.pay-button-icon.xl{width:56px;height:56px;border-width:3px}.pay-button-icon.xl:after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}.pay-button-icon.loading:after{display:none}.pay-button-icon.loading:before{content:\"\";width:16px;height:16px;border:2px solid #2c355d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#2c355d;transition:color .3s ease}.pay-button .pay-button-icon{margin:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { token: [{
                 type: Input
             }], customerId: [{

package/esm2020/di2mt/widgets/user-upgrade/user-upgrade-data-table/user-upgrade-data-table.component.mjs CHANGED Viewed

@@ -351,10 +351,10 @@ export class UserUpgradeDataTableComponent {
     }
 }
 UserUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"\r\n    ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n    <div class=\"user-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Users</span>\r\n            <button\r\n                mat-button\r\n                class=\"upgrade-bulk-button\"\r\n                color=\"primary\"\r\n                [disabled]=\"selection.selected.length === 0\"\r\n                (click)=\"upgradeSelectedUsers()\">\r\n                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n        <!-- Checkbox Column -->\r\n        <ng-container matColumnDef=\"select\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox\r\n                    (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let row\">\r\n                <mat-checkbox\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"$event ? selection.toggle(row) : null\"\r\n                    [checked]=\"selection.isSelected(row)\"\r\n                    [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Column -->\r\n        <ng-container matColumnDef=\"user\">\r\n            <th mat-header-cell *matHeaderCellDef>User</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"user-info\">\r\n                    <div class=\"user-name\">{{element.userName}}</div>\r\n                    <div class=\"user-email\">{{element.userName}}</div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Site Column -->\r\n        <ng-container matColumnDef=\"site\">\r\n            <th mat-header-cell *matHeaderCellDef>Site</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"site-info\">\r\n                  <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                    <span>{{element.siteName}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Device Column -->\r\n        <ng-container matColumnDef=\"device\">\r\n            <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n              <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n                <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n                     class=\"device-item\"\r\n                     [class.no-border]=\"last\">\r\n                  <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n                  <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n                  <span class=\"device-model\">\r\n                    {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n                <div class=\"device-info\">\r\n                    <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n                        <div class=\"device-name-wrapper clickable\"\r\n                             (mouseenter)=\"onMultipleDevices(element)\"\r\n                             (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n                            <span class=\"device-name\">Multiple devices ></span>\r\n                        </div>\r\n                    </div>\r\n                  <ng-template #oneDevice>\r\n                    <div class=\"device-name-wrapper\">\r\n                      <span class=\"device-indicator\"></span>\r\n                      <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n                    </div>\r\n                    <div class=\"device-model one-dev-extensions\">\r\n                      {{ element.devicesWithExtensions[0].extensions?.length ?\r\n                      'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dial Plan Status Column -->\r\n        <ng-container matColumnDef=\"dialPlanStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"status-info\">\r\n                    <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n                  <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dependencies Column -->\r\n        <ng-container matColumnDef=\"dependencies\">\r\n            <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Upgrade Status Column -->\r\n        <ng-container matColumnDef=\"userUpgradeStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"upgrade-status-cell\">\r\n                    <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                        <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n                    </ng-container>\r\n                    <ng-template #statusBlock>\r\n                        <div class=\"status-info\">\r\n                            <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n\r\n            </td>\r\n        </ng-container>\r\n\r\n      <ng-container matColumnDef=\"userUpgradeLoader\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n          <mat-progress-spinner\r\n            *ngIf=\"element.pending\"\r\n            class=\"field-spinner\"\r\n            [diameter]=\"20\"\r\n            mode=\"indeterminate\">\r\n          </mat-progress-spinner>\r\n        </td>\r\n      </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n    </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n  <mat-paginator\r\n    [length]=\"pagination.total\"\r\n    [pageSize]=\"pagination.pageSize\"\r\n    [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n    [pageIndex]=\"pagination.pageIndex\"\r\n    (page)=\"pageEvent($event)\"\r\n    showFirstLastButtons>\r\n  </mat-paginator>\r\n\r\n  <!--<div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n  </div>\r\n\r\n  <div class=\"per-page-block\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}::ng-deep .progress-spinner-td{position:relative}::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#000!important;color:#fffffff5!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: i6.TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
+UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"\r\n    ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n    <div class=\"user-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Users</span>\r\n            <button\r\n                mat-button\r\n                class=\"upgrade-bulk-button\"\r\n                color=\"primary\"\r\n                [disabled]=\"selection.selected.length === 0\"\r\n                (click)=\"upgradeSelectedUsers()\">\r\n                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n        <!-- Checkbox Column -->\r\n        <ng-container matColumnDef=\"select\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox\r\n                    (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let row\">\r\n                <mat-checkbox\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"$event ? selection.toggle(row) : null\"\r\n                    [checked]=\"selection.isSelected(row)\"\r\n                    [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Column -->\r\n        <ng-container matColumnDef=\"user\">\r\n            <th mat-header-cell *matHeaderCellDef>User</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"user-info\">\r\n                    <div class=\"user-name\">{{element.userName}}</div>\r\n                    <div class=\"user-email\">{{element.userName}}</div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Site Column -->\r\n        <ng-container matColumnDef=\"site\">\r\n            <th mat-header-cell *matHeaderCellDef>Site</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"site-info\">\r\n                  <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                    <span>{{element.siteName}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Device Column -->\r\n        <ng-container matColumnDef=\"device\">\r\n            <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n              <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n                <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n                     class=\"device-item\"\r\n                     [class.no-border]=\"last\">\r\n                  <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n                  <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n                  <span class=\"device-model\">\r\n                    {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n                <div class=\"device-info\">\r\n                    <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n                        <div class=\"device-name-wrapper clickable\"\r\n                             (mouseenter)=\"onMultipleDevices(element)\"\r\n                             (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n                            <span class=\"device-name\">Multiple devices ></span>\r\n                        </div>\r\n                    </div>\r\n                  <ng-template #oneDevice>\r\n                    <div class=\"device-name-wrapper\">\r\n                      <span class=\"device-indicator\"></span>\r\n                      <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n                    </div>\r\n                    <div class=\"device-model one-dev-extensions\">\r\n                      {{ element.devicesWithExtensions[0].extensions?.length ?\r\n                      'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dial Plan Status Column -->\r\n        <ng-container matColumnDef=\"dialPlanStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"status-info\">\r\n                    <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n                  <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dependencies Column -->\r\n        <ng-container matColumnDef=\"dependencies\">\r\n            <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Upgrade Status Column -->\r\n        <ng-container matColumnDef=\"userUpgradeStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"upgrade-status-cell\">\r\n                    <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                        <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n                    </ng-container>\r\n                    <ng-template #statusBlock>\r\n                        <div class=\"status-info\">\r\n                            <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n\r\n            </td>\r\n        </ng-container>\r\n\r\n      <ng-container matColumnDef=\"userUpgradeLoader\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n          <mat-progress-spinner\r\n            *ngIf=\"element.pending\"\r\n            class=\"field-spinner\"\r\n            [diameter]=\"20\"\r\n            mode=\"indeterminate\">\r\n          </mat-progress-spinner>\r\n        </td>\r\n      </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n    </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n  <mat-paginator\r\n    [length]=\"pagination.total\"\r\n    [pageSize]=\"pagination.pageSize\"\r\n    [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n    [pageIndex]=\"pagination.pageIndex\"\r\n    (page)=\"pageEvent($event)\"\r\n    showFirstLastButtons>\r\n  </mat-paginator>\r\n\r\n  <!--<div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n  </div>\r\n\r\n  <div class=\"per-page-block\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#000!important;color:#fffffff5!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: i6.TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"\r\n    ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n    <div class=\"user-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Users</span>\r\n            <button\r\n                mat-button\r\n                class=\"upgrade-bulk-button\"\r\n                color=\"primary\"\r\n                [disabled]=\"selection.selected.length === 0\"\r\n                (click)=\"upgradeSelectedUsers()\">\r\n                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n        <!-- Checkbox Column -->\r\n        <ng-container matColumnDef=\"select\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox\r\n                    (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let row\">\r\n                <mat-checkbox\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"$event ? selection.toggle(row) : null\"\r\n                    [checked]=\"selection.isSelected(row)\"\r\n                    [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Column -->\r\n        <ng-container matColumnDef=\"user\">\r\n            <th mat-header-cell *matHeaderCellDef>User</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"user-info\">\r\n                    <div class=\"user-name\">{{element.userName}}</div>\r\n                    <div class=\"user-email\">{{element.userName}}</div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Site Column -->\r\n        <ng-container matColumnDef=\"site\">\r\n            <th mat-header-cell *matHeaderCellDef>Site</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"site-info\">\r\n                  <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                    <span>{{element.siteName}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Device Column -->\r\n        <ng-container matColumnDef=\"device\">\r\n            <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n              <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n                <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n                     class=\"device-item\"\r\n                     [class.no-border]=\"last\">\r\n                  <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n                  <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n                  <span class=\"device-model\">\r\n                    {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n                <div class=\"device-info\">\r\n                    <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n                        <div class=\"device-name-wrapper clickable\"\r\n                             (mouseenter)=\"onMultipleDevices(element)\"\r\n                             (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n                            <span class=\"device-name\">Multiple devices ></span>\r\n                        </div>\r\n                    </div>\r\n                  <ng-template #oneDevice>\r\n                    <div class=\"device-name-wrapper\">\r\n                      <span class=\"device-indicator\"></span>\r\n                      <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n                    </div>\r\n                    <div class=\"device-model one-dev-extensions\">\r\n                      {{ element.devicesWithExtensions[0].extensions?.length ?\r\n                      'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dial Plan Status Column -->\r\n        <ng-container matColumnDef=\"dialPlanStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"status-info\">\r\n                    <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n                  <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dependencies Column -->\r\n        <ng-container matColumnDef=\"dependencies\">\r\n            <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Upgrade Status Column -->\r\n        <ng-container matColumnDef=\"userUpgradeStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"upgrade-status-cell\">\r\n                    <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                        <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n                    </ng-container>\r\n                    <ng-template #statusBlock>\r\n                        <div class=\"status-info\">\r\n                            <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n\r\n            </td>\r\n        </ng-container>\r\n\r\n      <ng-container matColumnDef=\"userUpgradeLoader\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n          <mat-progress-spinner\r\n            *ngIf=\"element.pending\"\r\n            class=\"field-spinner\"\r\n            [diameter]=\"20\"\r\n            mode=\"indeterminate\">\r\n          </mat-progress-spinner>\r\n        </td>\r\n      </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n    </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n  <mat-paginator\r\n    [length]=\"pagination.total\"\r\n    [pageSize]=\"pagination.pageSize\"\r\n    [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n    [pageIndex]=\"pagination.pageIndex\"\r\n    (page)=\"pageEvent($event)\"\r\n    showFirstLastButtons>\r\n  </mat-paginator>\r\n\r\n  <!--<div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n  </div>\r\n\r\n  <div class=\"per-page-block\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}::ng-deep .progress-spinner-td{position:relative}::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#000!important;color:#fffffff5!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
+            args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"\r\n    ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n    <div class=\"user-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Users</span>\r\n            <button\r\n                mat-button\r\n                class=\"upgrade-bulk-button\"\r\n                color=\"primary\"\r\n                [disabled]=\"selection.selected.length === 0\"\r\n                (click)=\"upgradeSelectedUsers()\">\r\n                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n        <!-- Checkbox Column -->\r\n        <ng-container matColumnDef=\"select\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox\r\n                    (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let row\">\r\n                <mat-checkbox\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"$event ? selection.toggle(row) : null\"\r\n                    [checked]=\"selection.isSelected(row)\"\r\n                    [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Column -->\r\n        <ng-container matColumnDef=\"user\">\r\n            <th mat-header-cell *matHeaderCellDef>User</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"user-info\">\r\n                    <div class=\"user-name\">{{element.userName}}</div>\r\n                    <div class=\"user-email\">{{element.userName}}</div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Site Column -->\r\n        <ng-container matColumnDef=\"site\">\r\n            <th mat-header-cell *matHeaderCellDef>Site</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"site-info\">\r\n                  <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                    <span>{{element.siteName}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Device Column -->\r\n        <ng-container matColumnDef=\"device\">\r\n            <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n              <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n                <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n                     class=\"device-item\"\r\n                     [class.no-border]=\"last\">\r\n                  <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n                  <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n                  <span class=\"device-model\">\r\n                    {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n                <div class=\"device-info\">\r\n                    <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n                        <div class=\"device-name-wrapper clickable\"\r\n                             (mouseenter)=\"onMultipleDevices(element)\"\r\n                             (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n                            <span class=\"device-name\">Multiple devices ></span>\r\n                        </div>\r\n                    </div>\r\n                  <ng-template #oneDevice>\r\n                    <div class=\"device-name-wrapper\">\r\n                      <span class=\"device-indicator\"></span>\r\n                      <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n                    </div>\r\n                    <div class=\"device-model one-dev-extensions\">\r\n                      {{ element.devicesWithExtensions[0].extensions?.length ?\r\n                      'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dial Plan Status Column -->\r\n        <ng-container matColumnDef=\"dialPlanStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"status-info\">\r\n                    <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n                  <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dependencies Column -->\r\n        <ng-container matColumnDef=\"dependencies\">\r\n            <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Upgrade Status Column -->\r\n        <ng-container matColumnDef=\"userUpgradeStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"upgrade-status-cell\">\r\n                    <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                        <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n                    </ng-container>\r\n                    <ng-template #statusBlock>\r\n                        <div class=\"status-info\">\r\n                            <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n\r\n            </td>\r\n        </ng-container>\r\n\r\n      <ng-container matColumnDef=\"userUpgradeLoader\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n          <mat-progress-spinner\r\n            *ngIf=\"element.pending\"\r\n            class=\"field-spinner\"\r\n            [diameter]=\"20\"\r\n            mode=\"indeterminate\">\r\n          </mat-progress-spinner>\r\n        </td>\r\n      </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n    </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n  <mat-paginator\r\n    [length]=\"pagination.total\"\r\n    [pageSize]=\"pagination.pageSize\"\r\n    [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n    [pageIndex]=\"pagination.pageIndex\"\r\n    (page)=\"pageEvent($event)\"\r\n    showFirstLastButtons>\r\n  </mat-paginator>\r\n\r\n  <!--<div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n  </div>\r\n\r\n  <div class=\"per-page-block\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#000!important;color:#fffffff5!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
         }], propDecorators: { token: [{
                 type: Input
             }], customerId: [{