@tuki-io/tuki-widgets 0.0.73 → 0.0.75

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/projects/tuki/widgets/di2mt/shared/components/table-filters/table-filters.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { FilterKind, TableFilter } from "../../types/table/filter";
+
+@Component({
+    selector: 'tk-table-filters',
+    templateUrl: './table-filters.component.html',
+    styleUrls: ['./table-filters.component.scss']
+})
+export class TableFiltersComponent implements OnInit {
+    @Input() filters!: TableFilter[];
+
+    @Output() filter = new EventEmitter<{ key: string, value: any }>()
+
+    ngOnInit(): void {
+        if (this.filters) {
+            this.filters.forEach(filter => {
+                if (filter.type === 'select' && !filter.options.some(opt => opt.value === 'all')) {
+                    filter.options.unshift({ label: 'All', value: 'all' });
+                }
+            });
+        }
+    }
+
+    onFilter(key: string, value: any): void {
+        const val = { key, value };
+        this.filter.emit(val);
+    }
+}

package/projects/tuki/widgets/di2mt/shared/constants/app.constants.ts

@@ -0,0 +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'
+}

package/projects/tuki/widgets/di2mt/shared/material.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from "@angular/core";
+import { MatProgressBarModule } from "@angular/material/progress-bar"
+import { MatTableModule } from "@angular/material/table";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatSelectModule } from "@angular/material/select";
+
+@NgModule({
+    imports: [
+        MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule
+    ],
+    exports: [
+        MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule
+    ]
+})
+export class MaterialModule { }

package/projects/tuki/widgets/di2mt/shared/services/api.service.ts

@@ -0,0 +1,92 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class APIService {
+  public token: any;
+  apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
+  constructor(
+    private httpClient: HttpClient
+  ) {
+    this.token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbkBjb3JyZW5ldC5jb20iLCJyb2xlcyI6IlNVUEVSX1VTRVIiLCJpYXQiOjE3NTUwODUyMzgsImV4cCI6MTc1NTEwMzIzOH0.X1CKx-OBZvSs7Bzr_4SWW2ulBgHNkYZrmVuv6V7FZyo'
+    // this.apiUrl = window.location.protocol + '//' + window.location.host + '/dcp';
+    this.apiUrl = 'https://dev.tuki.io/webex';
+    // this.apiUrl = 'http://localhost:8088/dcp';
+  }
+
+  fetch(url: string, params?: any, cache?: boolean): Observable<any> {
+    const headers = this.getHeaders(cache);
+    params = params || {};
+    return this.httpClient.get(this.apiUrl + url, {params: this.prepareEncodedParams(params), headers});
+  }
+
+  post(url: string, body: any, params = {}): Observable<any> {
+    body = body || null;
+    const headers = this.getHeaders();
+    return this.httpClient.post(this.apiUrl + url, body, {params: this.prepareEncodedParams(params), headers});
+  }
+
+  // use when response extended data is necessary:
+  postExtended(url: string, body = null, params = {}, headers = {}) {
+    headers = headers || this.getHeaders();
+    return this.httpClient.post(this.apiUrl + url, body, {
+      headers,
+      observe: 'response',
+      params: this.prepareEncodedParams(params)
+    });
+  }
+
+  put(url: string, body = null, params = {}) {
+    const headers = this.getHeaders();
+    return this.httpClient.put(this.apiUrl + url, body, {headers, params: this.prepareEncodedParams(params)});
+  }
+
+  delete(url: string, params = {}) {
+    const headers = this.getHeaders();
+    return this.httpClient.delete(this.apiUrl + url, {headers, params: this.prepareEncodedParams(params)});
+  }
+
+  fetchPagination(url: string, pageSize: number, pageNumber: number, additionalParams = {}, cache?: boolean): Observable<any> {
+    const copyAdditionalParams = JSON.parse(JSON.stringify(additionalParams));
+    const params = Object.assign(copyAdditionalParams, {size: pageSize.toString(), page: pageNumber.toString()});
+    return this.fetch(url, params, cache) as Observable<any>;
+  }
+
+  private prepareEncodedParams(params: any) {
+    const result: any = {};
+
+    if (!params) {
+      return {};
+    }
+    for (const key of Object.keys(params)) {
+      if (params[key]) {
+        const stringParam = params[key].toString();
+        result[key] = stringParam.includes('+') ? encodeURIComponent(stringParam) : stringParam;
+      }
+    }
+    return result;
+  }
+
+  private getHeaders(cache?: boolean): HttpHeaders {
+    let headers = new HttpHeaders();
+    if (cache) {
+      headers = headers.append('_Cache', 'true ');
+    }
+    const token = this.token || this.getParameterByName('token');
+    headers = headers.append('Authorization', 'Bearer '+ token);
+    return headers;
+  }
+
+  private getParameterByName(name: any, url = window.location.href) {
+    name = name.replace(/[\[\]]/g, '\\$&');
+    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+      results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+  }
+
+}

package/projects/tuki/widgets/di2mt/shared/shared.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from "@angular/core";
+import { CardComponent } from "./components/card/card.component";
+import { CommonModule } from "@angular/common";
+import { MaterialModule } from "./material.module";
+import { StatCardComponent } from "./components/stat-card/stat-card.component";
+import { StatusListCardComponent } from "./components/status-list-card/status-list-card.component";
+import { ChartCardComponent } from "./components/chart-card/chart-card.component";
+import { NgApexchartsModule } from "ng-apexcharts"
+import { MatTableModule } from "@angular/material/table";
+import { TableFiltersComponent } from "./components/table-filters/table-filters.component";
+import { HttpClientModule } from "@angular/common/http";
+import { SummaryCardComponent } from "./components/summary-card/summary-card.component";
+
+@NgModule({
+    declarations: [
+        CardComponent,
+        StatCardComponent,
+        StatusListCardComponent,
+        ChartCardComponent,
+        SummaryCardComponent,
+        TableFiltersComponent
+    ],
+    imports: [
+        CommonModule,
+        MaterialModule,
+        NgApexchartsModule,
+        HttpClientModule
+    ],
+    exports: [
+        CardComponent,
+        StatCardComponent,
+        StatusListCardComponent,
+        ChartCardComponent,
+        SummaryCardComponent,
+        TableFiltersComponent
+    ]
+})
+export class SharedModule {}

package/projects/tuki/widgets/di2mt/shared/types/constants.ts

@@ -0,0 +1,15 @@
+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',
+    NOT_READY: 'Not Ready',
+    PARTIAL_READY: 'Partial Ready',
+    FAILED: 'Failed',
+    COMPLETED: 'Completed'
+};
+
+export const DEPENDENCIES_STATUS: { [key: string]: string } = {
+    DEPENDENCIES_FOUND: 'Dependencies found',
+    NO_DEPENDENCIES: 'No dependencies',
+};

package/projects/tuki/widgets/di2mt/shared/types/data-table.ts

@@ -0,0 +1,5 @@
+export type TableColumn = {
+    key: string,
+    label: string,
+    sortable: boolean
+};

package/projects/tuki/widgets/di2mt/shared/types/table/filter.ts

@@ -0,0 +1,14 @@
+export type FilterKind = 'search' | 'select';
+
+export type TableFilter = {
+    id: string,
+    columnKey: string,
+    type: FilterKind,
+    placeholder: string,
+    icon?: {
+        name?: string,
+        src?: string
+    },
+    options: { label: string, value: string }[],
+    defaultValue?: string
+}

package/projects/tuki/widgets/di2mt/styles/tuki-widgets-theme.scss

@@ -0,0 +1,13 @@
+/* Minimal Material Design styles for Tuki Widgets */
+
+/* Import only the core Material styles needed for our components */
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
+/* Override with Tuki brand colors */
+:root {
+  --tuki-primary-color: #08599C;
+  --tuki-accent-color: #1170CF;
+  --tuki-warn-color: #F23933;
+  --tuki-success-color: #1D805F;
+  --tuki-warning-color: #F8CD00;
+}

package/projects/tuki/widgets/di2mt/styles/variables.scss

@@ -0,0 +1,92 @@
+//@import url( 'https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
+//@import url('https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,800,700,900');
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
+
+@import '../../../../../node_modules/@angular/material/theming';
+
+$fa-font-path : '../../node_modules/font-awesome/fonts';
+
+//$common-font: Raleway, 'Raleway', sans-serif;
+//$special-font: Raleway, 'Roboto', sans-serif;
+//$content-font: 'Roboto', sans-serif;
+//$buttons-font: Raleway, 'Raleway', sans-serif;
+//$input-font: 'Roboto', sans-serif;
+$menu-font: Poppins, 'Poppins', sans-serif;
+$main-font: Inter, 'Inter', sans-serif;
+//$sub-menu-font: Inter, 'Inter', sans-serif;
+$font-size: 14px;
+$txt-color: rgba(0, 0, 0, 0.87);
+$table-title-color: rgba(0,0,0,.54);;
+$txt-grey-color: #454e5e;
+$header-gradient: linear-gradient(90deg,#0d56aa,#0d56ab);
+$poppins-font: Poppins, 'Poppins', sans-serif;
+
+$icon-color: #8E9FB7;
+$active-color: #0D56AA;
+$icon-box-color: #0773BC;
+$mark-color: #009FDB;
+$hover-color: #0985A0;
+$error-color: #C73636;
+$main-txt-color: #333;
+
+$table-border-color: rgba(0, 0, 0, 0.12);
+$input-border-color: rgba(0, 0, 0, 0.30);
+$bg-color: #F7F9FB;
+
+$error-bg-color: #f2dede;
+$error-border-color: #ebccd1;
+$error-txt-color: #bc1e1b;
+$qob-error-color: #E70707;
+
+$warning-bg-color: #fcf8e3;
+$warning-border-color: #e5e1cd;
+$warning-txt-color: #8a6d3b;
+
+$success-bg-color: #e3f4dc;
+$success-border-color: #b3d692;
+$success-txt-color: #3c763d;
+
+$read-only-txt-color: rgba(0, 0, 0, 0.38);
+$my-menu-txt-color: #555555;
+
+$page-background-color: #F3F6F6;
+$disabled-button-text-color: #BABCC5;
+$dark-elements-color: #2C355D;
+$dark-disabled-btn-color: #DFE3E7;
+$disabled-color: #DFE3E7;
+$link-color: #0985A0;
+$title-color: #0985A0;
+$active-link-color: #0985A0;
+$text-color: #646464;
+$light-border-color: #DEE5EA;
+$icon-background: #D2E5E5;
+
+// QOB style
+$navy: #2399DA;
+$dark-blue: #2C355D;
+$qob-danger-color: #E70707;
+$qob-disabled-color: #D4D4D4;
+
+// WEBEX STYLE
+
+$webex-body-bg: #f7f7f7;
+
+
+$webex-icon-bg: #d0d0d0;
+$webex-icon-color: #2a2a2a;
+$webex-text-color: #252525;
+
+$webex-tr-hover-bg: #ededed;
+$webex-tr-border: #dedede;
+
+$webex-table-th-bg: #f7f7f7;
+$webex-table-th-txt: #636363;
+$webex-table-th-size: 12px;
+
+$webex-table-td-bg: #fff;
+$webex-table-td-txt: #636363;
+$webex-table-td-size: 14px;
+
+$webex-pagination-txt: #636363;
+$webex-pagination-hover-bg: #ededed;

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>