@tuki-io/tuki-widgets 0.0.72 → 0.0.74

package/projects/tuki/widgets/di2mt/shared/components/table-filters/table-filters.component.scss

@@ -0,0 +1,244 @@
+:host .filters-wrapper {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+
+  .filter {
+    .search-field,
+    .select-field {
+      width: 100%;
+      // min-width: 200px;
+
+      .search-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.25rem;
+        padding: 0;
+
+        img {
+          width: 24px;
+          height: 24px;
+          object-fit: contain;
+          opacity: 0.6;
+          vertical-align: middle;
+        }
+      }
+    }
+
+   /* ::ng-deep {
+      .mat-form-field-appearance-outline .mat-form-field-wrapper {
+        margin: 0 !important;
+        padding: 0 !important;
+      }
+      .mat-form-field-infix {
+        padding: 0.5rem 1rem !important;
+      }
+      .mat-form-field-label-wrapper {
+        top: -1.1rem !important;
+      }
+      .mat-form-field-infix .mat-input-element {
+        // margin-top: -2.0625em;
+        transform: translateX(-16px) translateY(-4px) !important;
+      }
+
+      .mat-select-value {
+        transform: translateY(-4px) !important;
+      }
+    }*/
+  }
+}
+::ng-deep {
+  /* Custom styles for mat-form-field with appearance="outline" */
+  .custom-mat-form-field {
+    width: 265px;
+  }
+
+  .custom-mat-form-field .mat-form-field-wrapper {
+    height: 34px;
+    padding-bottom: 0;
+  }
+
+  .custom-mat-form-field .mat-form-field-flex {
+    height: 34px;
+    align-items: center;
+    padding: 0 12px;
+  }
+
+  .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 0;
+    font-size: 14px;
+  }
+
+  /* Custom outline styling */
+  .custom-mat-form-field .mat-form-field-outline {
+    color: #737480;
+  }
+
+  .custom-mat-form-field .mat-form-field-outline-start,
+  .custom-mat-form-field .mat-form-field-outline-gap,
+  .custom-mat-form-field .mat-form-field-outline-end {
+    border-color: #737480;
+    border-width: 1px;
+  }
+
+  .custom-mat-form-field .mat-form-field-outline-start {
+    border-radius: 6px 0 0 6px;
+    min-width: 6px;
+  }
+
+  .custom-mat-form-field .mat-form-field-outline-end {
+    border-radius: 0 6px 6px 0;
+  }
+
+  .custom-mat-form-field .mat-form-field-outline-gap {
+    border-radius: 0;
+  }
+
+  /* Thick outline (focused state) */
+  .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,
+  .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,
+  .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end {
+    border-color: #737480;
+    border-width: 2px;
+  }
+
+  /* Remove subscript wrapper to reduce height */
+  .custom-mat-form-field .mat-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  .custom-mat-form-field .mat-form-field-label {
+    color: #555555;
+    top: 71%;
+    font-size: 14px;
+  }
+
+  .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
+  .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label {
+    transform: translateY(-50%);
+  }
+
+
+  /*.custom-mat-form-field .mat-select-trigger {
+    height: 34px;
+    display: flex;
+    align-items: center;
+  }*/
+
+  .custom-mat-form-field .mat-select-value {
+    max-width: calc(100% - 20px);
+  }
+
+  .custom-mat-form-field .mat-select-arrow-wrapper {
+    transform: none;
+    //height: 34px;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: -10px;
+    top: 5px;
+  }
+
+  /* Input element styling (for regular inputs) */
+  .custom-mat-form-field input.mat-input-element {
+    height: 34px;
+    line-height: 34px;
+  }
+
+  /* Disabled state */
+  .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,
+  .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,
+  .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end {
+    border-color: #ccc;
+  }
+
+  /* Error state */
+  .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,
+  .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,
+  .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end {
+    border-color: #E70707;
+  }
+  /*.custom-mat-form-field .mat-select-arrow {
+    display: none;
+  }*/
+
+  /* Replace arrow with chevron down arrow */
+  .custom-mat-form-field .mat-select-arrow {
+    width: 16px;
+    height: 16px;
+    border: none;
+    margin: 0 4px;
+    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;
+  }
+
+  /* Alternative: Pure CSS chevron down arrow */
+  .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: 0 4px;
+    background: none;
+  }
+
+  //-----------
+  /* Label positioning */
+  .custom-mat-form-field .mat-form-field-label-wrapper {
+    top: 2px;
+    padding-top: 0;
+    height: 28px;
+    display: flex;
+    align-items: center;
+  }
+
+  .custom-mat-form-field .mat-form-field-label {
+    color: #555555;
+    position: relative;
+    top: auto;
+    transform: none;
+    padding: 0 4px;
+    background: white;
+  }
+
+  /* Floating label (when focused or has value) */
+  .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
+    position: absolute;
+    top: -6px;
+    left: 12px;
+    font-size: 12px;
+    color: #555555;
+    background: white;
+    padding: 0 4px;
+  }
+
+  /* Empty state label positioning */
+  .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;
+  }
+
+  /* Mat-select placeholder positioning */
+  .custom-mat-form-field .mat-select-placeholder {
+    color: #555555;
+    line-height: 34px;
+  }
+
+}
+

package/{user-device-manage/src → projects/tuki/widgets/di2mt/shared/constants}/app.constants.ts

@@ -1,96 +1,96 @@
-export const API = {
-  USER_TOKEN: '/api/provision/:siteId/users/:userId/token',
-  UPDATE_USER_FIELDS: '/api/provision/:siteId/userFields/:token',
-  PERSIST_USER_CACHE: '/api/provision/:siteId/saveUser/:token',
-  USER_BY_ID: '/api/provision/:siteId/users/:userId',
-  QUICK_USERS_SEARCH: "/api/search/quickusers",
-  LOCATION: "/api/provision/options/:siteId/locations",
-  USER_LOCALES: "/api/provision/options/:siteId/userlocales",
-  USER_PROFILES: "/api/provision/options/:siteId/userprofiles",
-  RECORDING_PROFILE: "/api/provision/options/:siteId/recordingprofiles",
-  AVAILABLE_DN_IN_RANGES: "/api/sites/:siteId/available-dn-in-ranges",
-  DELETE_LINE: "/api/provision/:siteId/deleteLine/:pkid/:token",
-  DISASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/deleteLineAssociation/:linePkid/:token",
-  CHECK_DELETE_LINE: "/api/provision/:siteId/checklinedeletion",
-  ASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/createLineAssociation/:token",
-  CHECK_DESTINATION_NUMBER: "/api/provision/:siteId/check-dn",
-  UPDATE_LINE_FIELDS: "/api/provision/:siteId/lineFields/:pkid/:token",
-  UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token",
-  SOFTKEY_TEMPLATES: "/api/provision/options/:siteId/softkeytemplates",
-  SITE_SETTINGS: "/api/sites/:siteId/settings",
-  LINE_SLOTS: "/api/provision/:siteId/buttontemplate",
-  LEAN_USER_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserDetailsToken",
-  LEAN_USER_DEVICES_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserDevicesToken",
-  LEAN_USER_LINES_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/:leanUserDevicesToken/leanUserLinesToken",
-  LEAN_USER_SNR_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserSNRToken",
-  DEVICE_LINE_MONITOR_CSS: "/api/provision/options/:siteId/callingSearchSpace"
-};
-export const REGEX_PATTERN = {
-  EMAIL: '^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))' +
-    '@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,62}[a-zA-Z0-9])' +
-    '?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,62}[a-zA-Z0-9])?)*$'
-};
-
-export const PAGINATION_DEFAULTS = {
-  SIZE: 10,
-  INDEX: 0
-}
-export const PAGINATION_SIZE_OPTIONS = [
-  10,
-  50,
-  100,
-  500
-];
-export const CUCS_TO_IGNORE = [
-  189,
-  194,
-  191,
-  190
-];
-export const CUCMS_TO_IGNORE = [
-  249,
-  255,
-  251,
-  250
-];
-export const RECORDING_MEDIA_SOURCE = [
-  "Gateway Preferred",
-  "Phone Preferred"
-];
-export const STATIC_OPTIONS = {
-  CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_ACTIVE: ['Use System Default', 'Disable', 'Beep Only'],
-  CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_IDLE: ['Use System Default', 'Disable', 'Ring Once'],
-  CONF_ACCESS_MODE: ['Fixed', 'Variable'],
-  DEFAULT_ON_OFF: ['Default', 'On', 'Off'],
-  DEFAULT_EN_DIS: ['Default', 'Enabled', 'Disabled'],
-  DND: ['Use Common Phone Profile Setting', 'Call Reject', 'Ringer Off'],
-  DND_INCOMING_CALL_ALLERT: ['Disable', 'Flash Only', 'Beep Only'],
-  LATENT_CAPABILITY: ['Gateway Controlled', 'Modem Relay', 'Modem Passthrough', 'Modem Relay and Passthrough', 'None'],
-  LINE_MODE: ['Session Line mode', 'Enhanced Line mode'],
-  ACTIONABLE_ALERT: ['Disabled', 'Show for all Incoming Call', 'Show for Invisible Incoming Call'],
-  MLPP_PREEMPTION: ['Default', 'Forceful', 'Disabled'],
-  PACKET_CAPTURE_MODE: ['None', 'Batch Processing Mode'],
-  RING_VOLUME: ['0-Silent', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
-  PORT_DIRECTION: ['Bothways', 'Inbound', 'Outbound'],
-  RING_SETTING_IDLE: ['Use System Default', 'Disable' , 'Flash Only' , 'Ring Once' , 'Ring'],
-  RING_SETTING_ACTIVE: ['Use System Default', 'Disable' , 'Flash Only' , 'Ring Once' , 'Ring', 'Beep Only'],
-  SERVICE_PROVISIONING: ['Default', 'Internal', 'External URL', 'Both'],
-  SETTINGS_ACCES: ['Enabled', 'Disabled', 'Restricted'],
-  VISUAL_MWI: ['Use System Policy', 'Light and Prompt' , 'Prompt Only' , 'Light Only' , 'None'],
-  WEEKDAYS: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-  BUILD_BRIDGE: ['None', 'On', 'Off', 'Default'],
-  TRANSFER_TYPES: ['Release to Switch', 'Supervise Transfer'],
-  EXTENSION_IS_BUSY_TYPES: ['Send Callers to Voicemail', 'Put Callers on Hold Without Asking', 'Ask Callers to Hold'],
-  CALL_ACTIONS: ['Hang Up', 'Restart Greeting', 'Route From Next Call Routing Rule', 'Take Message'],
-  AUTHENTICATION_802: ['User controlled', 'Disabled', 'Enabled'],
-  CERTIFICATE_OPERATION: ['No Pending Operation', 'Install/Upgrade', 'Delete', 'Troubleshoot' ],
-  AUTHENTICATION_MODE: ['By Authentication String', 'By Null String', 'By Existing Certificate (precedence to LSC)', 'By Existing Certificate (precedence to MIC)'],
-  KEY_ORDER: ['RSA Only', 'EC Only', 'EC Preferred, RSA Backup'],
-  RSA_KEY_SIZE: ['512', '1024', '2048'],
-  RSA_KEY_SIZE_SPECIFIC_DEVICE: ['512', '1024', '2048', '3072', '4096']
-};
-
-export const TOGGLE_TYPES = {
-  TABS: 'TABS',
-  ASSOCIATED_LINE_ONLY: 'ASSOCIATED_LINE_ONLY'
-}
+export const API = {
+  USER_TOKEN: '/api/provision/:siteId/users/:userId/token',
+  UPDATE_USER_FIELDS: '/api/provision/:siteId/userFields/:token',
+  PERSIST_USER_CACHE: '/api/provision/:siteId/saveUser/:token',
+  USER_BY_ID: '/api/provision/:siteId/users/:userId',
+  QUICK_USERS_SEARCH: "/api/search/quickusers",
+  LOCATION: "/api/provision/options/:siteId/locations",
+  USER_LOCALES: "/api/provision/options/:siteId/userlocales",
+  USER_PROFILES: "/api/provision/options/:siteId/userprofiles",
+  RECORDING_PROFILE: "/api/provision/options/:siteId/recordingprofiles",
+  AVAILABLE_DN_IN_RANGES: "/api/sites/:siteId/available-dn-in-ranges",
+  DELETE_LINE: "/api/provision/:siteId/deleteLine/:pkid/:token",
+  DISASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/deleteLineAssociation/:linePkid/:token",
+  CHECK_DELETE_LINE: "/api/provision/:siteId/checklinedeletion",
+  ASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/createLineAssociation/:token",
+  CHECK_DESTINATION_NUMBER: "/api/provision/:siteId/check-dn",
+  UPDATE_LINE_FIELDS: "/api/provision/:siteId/lineFields/:pkid/:token",
+  UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token",
+  SOFTKEY_TEMPLATES: "/api/provision/options/:siteId/softkeytemplates",
+  SITE_SETTINGS: "/api/sites/:siteId/settings",
+  LINE_SLOTS: "/api/provision/:siteId/buttontemplate",
+  LEAN_USER_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserDetailsToken",
+  LEAN_USER_DEVICES_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserDevicesToken",
+  LEAN_USER_LINES_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/:leanUserDevicesToken/leanUserLinesToken",
+  LEAN_USER_SNR_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserSNRToken",
+  DEVICE_LINE_MONITOR_CSS: "/api/provision/options/:siteId/callingSearchSpace"
+};
+export const REGEX_PATTERN = {
+  EMAIL: '^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))' +
+    '@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,62}[a-zA-Z0-9])' +
+    '?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,62}[a-zA-Z0-9])?)*$'
+};
+
+export const PAGINATION_DEFAULTS = {
+  SIZE: 10,
+  INDEX: 0
+}
+export const PAGINATION_SIZE_OPTIONS = [
+  10,
+  50,
+  100,
+  500
+];
+export const CUCS_TO_IGNORE = [
+  189,
+  194,
+  191,
+  190
+];
+export const CUCMS_TO_IGNORE = [
+  249,
+  255,
+  251,
+  250
+];
+export const RECORDING_MEDIA_SOURCE = [
+  "Gateway Preferred",
+  "Phone Preferred"
+];
+export const STATIC_OPTIONS = {
+  CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_ACTIVE: ['Use System Default', 'Disable', 'Beep Only'],
+  CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_IDLE: ['Use System Default', 'Disable', 'Ring Once'],
+  CONF_ACCESS_MODE: ['Fixed', 'Variable'],
+  DEFAULT_ON_OFF: ['Default', 'On', 'Off'],
+  DEFAULT_EN_DIS: ['Default', 'Enabled', 'Disabled'],
+  DND: ['Use Common Phone Profile Setting', 'Call Reject', 'Ringer Off'],
+  DND_INCOMING_CALL_ALLERT: ['Disable', 'Flash Only', 'Beep Only'],
+  LATENT_CAPABILITY: ['Gateway Controlled', 'Modem Relay', 'Modem Passthrough', 'Modem Relay and Passthrough', 'None'],
+  LINE_MODE: ['Session Line mode', 'Enhanced Line mode'],
+  ACTIONABLE_ALERT: ['Disabled', 'Show for all Incoming Call', 'Show for Invisible Incoming Call'],
+  MLPP_PREEMPTION: ['Default', 'Forceful', 'Disabled'],
+  PACKET_CAPTURE_MODE: ['None', 'Batch Processing Mode'],
+  RING_VOLUME: ['0-Silent', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
+  PORT_DIRECTION: ['Bothways', 'Inbound', 'Outbound'],
+  RING_SETTING_IDLE: ['Use System Default', 'Disable' , 'Flash Only' , 'Ring Once' , 'Ring'],
+  RING_SETTING_ACTIVE: ['Use System Default', 'Disable' , 'Flash Only' , 'Ring Once' , 'Ring', 'Beep Only'],
+  SERVICE_PROVISIONING: ['Default', 'Internal', 'External URL', 'Both'],
+  SETTINGS_ACCES: ['Enabled', 'Disabled', 'Restricted'],
+  VISUAL_MWI: ['Use System Policy', 'Light and Prompt' , 'Prompt Only' , 'Light Only' , 'None'],
+  WEEKDAYS: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  BUILD_BRIDGE: ['None', 'On', 'Off', 'Default'],
+  TRANSFER_TYPES: ['Release to Switch', 'Supervise Transfer'],
+  EXTENSION_IS_BUSY_TYPES: ['Send Callers to Voicemail', 'Put Callers on Hold Without Asking', 'Ask Callers to Hold'],
+  CALL_ACTIONS: ['Hang Up', 'Restart Greeting', 'Route From Next Call Routing Rule', 'Take Message'],
+  AUTHENTICATION_802: ['User controlled', 'Disabled', 'Enabled'],
+  CERTIFICATE_OPERATION: ['No Pending Operation', 'Install/Upgrade', 'Delete', 'Troubleshoot' ],
+  AUTHENTICATION_MODE: ['By Authentication String', 'By Null String', 'By Existing Certificate (precedence to LSC)', 'By Existing Certificate (precedence to MIC)'],
+  KEY_ORDER: ['RSA Only', 'EC Only', 'EC Preferred, RSA Backup'],
+  RSA_KEY_SIZE: ['512', '1024', '2048'],
+  RSA_KEY_SIZE_SPECIFIC_DEVICE: ['512', '1024', '2048', '3072', '4096']
+};
+
+export const TOGGLE_TYPES = {
+  TABS: 'TABS',
+  ASSOCIATED_LINE_ONLY: 'ASSOCIATED_LINE_ONLY'
+}

package/{di2mt → projects/tuki/widgets/di2mt}/shared/types/constants.ts

@@ -1,4 +1,5 @@
 export type Status = 'Ready' | 'Not Ready' | 'Partial Ready' | 'Failed' | 'Completed';
+export type UpgradeStatus = 'READY' | 'NOT_READY' | 'PARTIAL_READY' | 'FAILED' | 'COMPLETED';
 
 export const STATUS_ENTRIES: { [key: string]: Status } = {
     READY: 'Ready',
@@ -11,4 +12,4 @@ export const STATUS_ENTRIES: { [key: string]: Status } = {
 export const DEPENDENCIES_STATUS: { [key: string]: string } = {
     DEPENDENCIES_FOUND: 'Dependencies found',
     NO_DEPENDENCIES: 'No dependencies',
-};
+};

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="isAvailable" class="progress-bar-container">
+  <div class="progress-bar {{color}}" [ngStyle]="{'width': progress + '%'}"></div>
+</div>

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.scss

@@ -0,0 +1,37 @@
+.progress-bar-container {
+  background-color: #E5E5E5;
+  border-radius: 20px;
+  width: 100%;
+}
+
+.progress-bar {
+  height: 7px;
+  width: 0;
+  border-radius: 15px;
+  text-align: center;
+}
+
+.progress-percent {
+  font-weight: 600;
+}
+
+.progress-bar.green {
+  background-color: #94D326;
+}
+
+.progress-bar.red {
+  background-color: #ED4364;
+}
+
+.progress-bar.yellow {
+  background-color: #FED200;
+}
+
+.progress-bar.darkblue {
+  background-color: #2C355D;
+}
+
+.progress-bar.lightblue {
+  background-color: #2299D9;
+}
+

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss']
+})
+export class ProgressBarComponent implements OnInit {
+  @Input()
+  public isAvailable = false;
+  @Input()
+  public progress = 0;
+  public color = 'grey';
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit() {
+  }
+
+  public updatedProgress(progress: number): void {
+    this.progress = progress;
+    this.setColor(this.progress);
+  }
+
+  private setColor(progress: number): void {
+    if (progress <= 20) {
+      this.color = 'red';
+    } else if (progress <= 40) {
+      this.color = 'yellow';
+    } else if (progress <= 60) {
+      this.color = 'darkblue';
+    } else if (progress <= 80) {
+      this.color = 'lightblue';
+    } else if (progress <= 100.0) {
+      this.color = 'green';
+    }
+  }
+}