@tuki-io/tuki-widgets 0.0.72 → 0.0.73

package/users-list/src/utils/pagination/pagination.component.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { PaginationDataDto } from '../../classes/pagination';
+import * as i0 from "@angular/core";
+export declare class PaginationComponent implements OnInit {
+    pagination: PaginationDataDto;
+    showPageSizeOptions: boolean;
+    showRefreshButton: boolean;
+    lengthPending: boolean;
+    pageEmitter: EventEmitter<any>;
+    pageNumberChangeEmitter: EventEmitter<any>;
+    pageSizeOptions: number[];
+    constructor();
+    ngOnInit(): void;
+    pageEvent(event: any): void;
+    changePerPageNumber(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "app-pagination", never, { "pagination": "pagination"; "showPageSizeOptions": "showPageSizeOptions"; "showRefreshButton": "showRefreshButton"; "lengthPending": "lengthPending"; }, { "pageEmitter": "pageEmitter"; "pageNumberChangeEmitter": "pageNumberChangeEmitter"; }, never, never, false, never>;
+}

package/users-list/src/utils/utils.service.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class UtilsService {
+    static sortSortArrayByProperty(array: [], sortBy: string): [] | null;
+    static diff(origObject: any, updatedObj: any, path: string, keysToIgnore?: string[]): any;
+    static formatIfEmpty(value: any): any;
+    static differs(obj1: any, obj2: any): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UtilsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UtilsService>;
+}

package/di2mt/api/api.endpoints.ts

@@ -1,20 +0,0 @@
-export const API = {
-    OVERVIEW: {
-        GET_UPGRADE_PRECONDITIONS: '/api/webex-upgrade/customers/:customerId/preconditions/fetch',
-        GET_SITE_INFRASTRUCTURE: '/api/webex-upgrade/customers/:customerId/infra/fetch',
-        GET_USERS_UPGRADE_SUMMARY: '/api/webex-upgrade/customers/:customerId/users/upgrade/fetch',
-        GET_SITES_UPGRADE_SUMMARY: '/api/webex-upgrade/customers/:customerId/sites/upgrade/fetch',
-        GET_USERS_UPGRADE_READINESS: '/api/webex-upgrade/customers/:customerId/users/readiness/fetch',
-        GET_SITES_UPGRADE_READINESS: '/api/webex-upgrade/customers/:customerId/sites/readiness/fetch'
-    },
-    USER_UPGRADE: {
-        GET_USERS_UPGRADE_DATA: '/api/webex-upgrade/customers/:customerId/user-upgrade',
-        GET_USERS_UPGRADE_STATUS_COUNTS: '/api/webex-upgrade/customers/:customerId/user-upgrades/status-counts',
-        UPGRADE_USER: '/api/migration/webex/sites/:siteId/users/:userId'
-    },
-    SITE_UPGRADE: {
-        GET_SITES_UPGRADE_DATA: '/api/webex-upgrade/customers/:customerId/site-upgrades',
-        GET_SITES_UPGRADE_STATUS_COUNTS: '/api/webex-upgrade/customers/:customerId/site-upgrades/status-counts',
-        UPGRADE_SITE: '/api/migration/webex/sites/:siteId'
-    }
-};

package/di2mt/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "public-api.ts"
-  },
-  "assets": ["./styles/", "./assets/","src/assets"]
-}

package/di2mt/shared/components/card/card.component.html

@@ -1,11 +0,0 @@
-<article class="card">
-    <header class="card__header">
-        <h2>{{ title }}</h2>
-        <div class="card__menu-button">
-            <img width="18" src="assets/icons/menu_icon.png" alt="Menu Icon">
-        </div>
-    </header>
-    <div class="card__content">
-        <ng-content select="card-content"></ng-content>
-    </div>
-</article>

package/di2mt/shared/components/card/card.component.scss

@@ -1,48 +0,0 @@
-@import "../../../styles/variables.scss";
-
-:host {
-  display: block;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.card {
-  font-family: $main-font;
-  background-color: white;
-  border-radius: 1rem;
-  padding: 2rem;
-  border: 1px solid hsl(0, 0%, 50%);
-  min-width: 300px;
-  // width: fit-content;
-  max-width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  gap: 2.5rem;
-}
-
-.card__header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  h2 {
-    font-size: 16px;
-    margin: 0;
-  }
-
-  .card__menu-button {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.card__content {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-  flex-grow: 1;
-}

package/di2mt/shared/components/card/card.component.ts

@@ -1,10 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
-    selector: 'tk-card',
-    templateUrl: './card.component.html',
-    styleUrls: ['./card.component.scss']
-})
-export class CardComponent {
-    @Input() title!: string;
-}

package/di2mt/shared/components/chart-card/chart-card.component.html

@@ -1,15 +0,0 @@
-<tk-card [title]="title">
-    <ng-container ngProjectAs="card-content">
-        <div class="chart-container">
-            <apx-chart
-                [series]="chartOptions.series"
-                [chart]="chartOptions.chart"
-                [labels]="chartOptions.labels"
-                [colors]="chartOptions.colors"
-                [legend]="chartOptions.legend"
-                [plotOptions]="chartOptions.plotOptions"
-                [dataLabels]="chartOptions.dataLabels">
-            </apx-chart>
-        </div>
-    </ng-container>
-</tk-card>

package/di2mt/shared/components/chart-card/chart-card.component.scss

@@ -1,38 +0,0 @@
-:host {
-    width: 100%;
-    display: block;
-    height: 100%;
-    box-sizing: border-box;
-}
-
-.chart-container {
-    width: 100%;
-    // height: 100%;
-    height: 220px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0;
-    
-    apx-chart {
-        width: 100%;
-        max-width: 400px;
-    }
-}
-
-// Override ApexCharts legend styles to match the design
-:host ::ng-deep .apexcharts-legend {
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: center !important;
-    // height: 100% !important;
-    
-    .apexcharts-legend-marker {
-        border-radius: 2px !important;
-    }
-    
-    .apexcharts-legend-text {
-        font-weight: 500 !important;
-        color: #333 !important;
-    }
-}

package/di2mt/shared/components/chart-card/chart-card.component.ts

@@ -1,71 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { ApexChart, ApexPlotOptions, ApexLegend, ApexDataLabels, ApexNonAxisChartSeries } from "ng-apexcharts";
-
-export type ChartOptions = {
-    series: ApexNonAxisChartSeries;
-    chart: ApexChart;
-    labels: string[];
-    colors: string[];
-    legend: ApexLegend;
-    plotOptions: ApexPlotOptions;
-    dataLabels: ApexDataLabels;
-};
-
-@Component({
-    selector: 'tk-chart-card',
-    templateUrl: './chart-card.component.html',
-    styleUrls: ['./chart-card.component.scss']
-})
-export class ChartCardComponent implements OnInit {
-    @Input() title!: string;
-    @Input() totalUpgraded!: number;
-    @Input() totalNotUpgraded!: number;
-
-    public chartOptions!: ChartOptions;
-
-    ngOnInit() {
-        this.initChartOptions();
-    }
-
-    private initChartOptions(): void {
-        if (this.totalUpgraded === 0)
-            this.totalNotUpgraded = 100;
-
-        this.chartOptions = {
-            series: [this.totalUpgraded, this.totalNotUpgraded],
-            chart: {
-                type: "donut",
-                height: 250
-            },
-            labels: ["MT", "DI"],
-            colors: ["#808080", "#2E8B57"],
-            legend: {
-                position: "right",
-                offsetY: 0,
-                fontSize: "14px",
-                markers: {
-                    width: 16,
-                    height: 16,
-                    radius: 2
-                },
-                itemMargin: {
-                    horizontal: 20,
-                    vertical: 2
-                },
-                formatter: function (seriesName, opts) {
-                    return seriesName + " " + ((opts.w.globals.series[opts.seriesIndex] / (opts.w.globals.series[0] + opts.w.globals.series[1]) * 100) >> 0) + "%";
-                }
-            },
-            plotOptions: {
-                pie: {
-                    donut: {
-                        size: "75%"
-                    }
-                }
-            },
-            dataLabels: {
-                enabled: false
-            }
-        };
-    }
-}

package/di2mt/shared/components/index.ts

@@ -1,6 +0,0 @@
-export * from './card/card.component';
-export * from './chart-card/chart-card.component';
-export * from './stat-card/stat-card.component';
-export * from './status-list-card/status-list-card.component';
-export * from './summary-card/summary-card.component';
-export * from './table-filters/table-filters.component';

package/di2mt/shared/components/stat-card/stat-card.component.html

@@ -1,57 +0,0 @@
-<tk-card [title]="title">
-  <ng-container ngProjectAs="card-content">
-    <div class="card__content-info">
-      <div class="card__content-wrapper">
-        <img width="42" [src]="'assets/icons/' + type + '.png'" alt="" />
-        <div class="card__content-text">
-          <div class="card__content-label">
-            {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}
-            {{ type === 'user' ? 'Users' : 'Sites' }}</div>
-          <div class="card__content-description">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>
-        </div>
-      </div>
-      <div class="card__content-wrapper">
-        <img
-          *ngIf="upgradeStatus === 'ready'"
-          height="48"
-          src="assets/icons/ready_to_upgrade.png"
-          alt=""
-        />
-        <img
-          *ngIf="upgradeStatus === 'already'"
-          height="48"
-          src="assets/icons/already_upgraded.png"
-          alt=""
-        />
-      </div>
-    </div>
-    <div class="card__content-progress-wrapper">
-      <div class="card__content-progress">
-        <div class="card__content-progress-label">
-          <span>{{ readyPercentage }}%</span>
-          <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>
-        </div>
-        <div class="card__content-progress-bar">
-          <div
-            class="card__content-progress-bar-fill ready"
-            [class.already]="upgradeStatus === 'already'"
-            [style.width.%]="readyPercentage"
-          ></div>
-        </div>
-      </div>
-      <div *ngIf="upgradeStatus === 'already'" class="card__content-progress">
-        <div class="card__content-progress-label">
-          <span>{{ upgradedPercentage }}%</span>
-          <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>
-        </div>
-        <div class="card__content-progress-bar">
-          <div
-            class="card__content-progress-bar-fill ready"
-            [class.already]="upgradeStatus === 'already'"
-            [style.width.%]="upgradedPercentage"
-          ></div>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</tk-card>

package/di2mt/shared/components/stat-card/stat-card.component.scss

@@ -1,74 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.card__content-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.card__content-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-
-  .card__content-label {
-    font-size: 20px;
-  }
-
-  .card__content-description {
-    font-size: 12px;
-  }
-}
-
-.card__content-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-}
-
-.card__content-wrapper:first-child {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.card__content-progress-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.card__content-progress {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 14px;
-
-  .card__content-progress-label {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.05rem;
-  }
-
-  .card__content-progress-bar {
-    background-color: #ededed;
-    border-radius: 10rem;
-    .card__content-progress-bar-fill {
-      height: 10px;
-      border-radius: inherit;
-    }
-  }
-}
-
-.ready {
-  background-color: #1170cf;
-}
-
-.already {
-  background-color: #1d805f;
-}

package/di2mt/shared/components/stat-card/stat-card.component.ts

@@ -1,44 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { SitesUpgradeReadiness, SitesUpgradeSummary, UsersUpgradeReadiness, UsersUpgradeSummary } from "../../../widgets/upgrade-overview/types/upgrade-overview";
-
-@Component({
-    selector: 'tk-stat-card',
-    templateUrl: './stat-card.component.html',
-    styleUrls: ['./stat-card.component.scss']
-})
-export class StatCardComponent implements OnInit {
-    @Input() title!: string;
-    @Input() type!: 'site' | 'user';
-    @Input() readinessStats: any;
-    @Input() upgradeStatus!: 'ready' | 'already';
-
-    stats: any;
-
-    ngOnInit() {        
-        if (this.type === 'user') {
-            this.stats = {
-                id: this.readinessStats?.id,
-                customerId: this.readinessStats?.customerId,
-                total: this.readinessStats?.['totalUsers'],
-                totalReady: this.readinessStats?.['totalReadyUsers'],
-                totalUpgraded: this.readinessStats?.['totalUpgradedUsers'],
-            }
-        } else {
-            this.stats = {
-                id: this.readinessStats?.id,
-                customerId: this.readinessStats?.customerId,
-                total: this.readinessStats?.['totalSites'],
-                totalReady: this.readinessStats?.['totalReadySites'],
-                totalUpgraded: this.readinessStats?.['totalUpgradedSites'],
-            }
-        }
-    }
-
-    get readyPercentage() {
-        return (this.stats?.totalReady / this.stats?.total * 100) >> 0;
-    }
-
-    get upgradedPercentage() {
-        return (this.stats?.totalUpgraded / this.stats?.total * 100) >> 0;
-    }
-}

package/di2mt/shared/components/status-list-card/status-list-card.component.html

@@ -1,28 +0,0 @@
-<tk-card [title]="title">
-    <ng-container ngProjectAs="card-content">
-        <div class="card__list-wrapper">
-            <div class="card__list-item" *ngFor="let item of items">
-                <img *ngIf="item.status" src="{{ 'assets/icons/check_icon.png' }}" alt="">
-                <img *ngIf="!item.status" src="{{ 'assets/icons/warning_icon.png' }}" alt="">
-                <div class="card__item-info">
-                    <div class="card__item-text">
-                        <div class="card__item-label">
-                            {{ item.label }}
-                        </div>
-                        <div class="card__item-description">
-                            {{ item.description }}
-                        </div>
-                    </div>
-                    <div *ngIf="title.includes('Site')" class="card__item-stats">
-                        <div class="card__item-numbers">
-                            {{ item.value }}/{{ item.totalSites }}
-                        </div>
-                        <div class="card__item-numbers-description">
-                            Ready/All
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </ng-container>
-</tk-card>

package/di2mt/shared/components/status-list-card/status-list-card.component.scss

@@ -1,55 +0,0 @@
-:host {
-  color: #333;
-  display: block;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.card__list-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.card__list-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.card__item-info {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  width: 100%;
-}
-
-.card__item-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.05rem;
-  // font-weight: 400;
-
-  .card__item-label {
-    font-size: 18px;
-  }
-
-  .card__item-description {
-    font-size: 14px;
-  }
-}
-
-.card__item-stats {
-  right: 0;
-  position: absolute;
-  text-align: right;
-
-  .card__item-numbers {
-    font-size: 28px;
-  }
-  .card__item-numbers-description {
-    font-size: 14px;
-  }
-}

package/di2mt/shared/components/status-list-card/status-list-card.component.ts

@@ -1,11 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
-    selector: "tk-status-list-card",
-    templateUrl: "./status-list-card.component.html",
-    styleUrls: ["./status-list-card.component.scss"]
-})
-export class StatusListCardComponent {
-    @Input() title!: string;
-    @Input() items!: any;
-}

package/di2mt/shared/components/summary-card/summary-card.component.html

@@ -1,12 +0,0 @@
-<article class="summary-card">
-    <header class="summary-card__header">
-        <h2>{{ value }}</h2>
-    </header>
-    <div class="summary__card-description">
-        <span>{{ description }}</span>
-        <div class="summary__card-status-wrapper">
-            <span class="summary__card-status-indicator" [ngClass]="getStatusClass(status)"></span>
-            <span>{{ status }}</span>
-        </div>
-    </div>
-</article>

package/di2mt/shared/components/summary-card/summary-card.component.scss

@@ -1,76 +0,0 @@
-@import "../../../styles/variables.scss";
-
-:host {
-  display: block;
-  height: 100%;
-  box-sizing: border-box;
-  flex: 1;
-}
-
-.summary-card {
-  font-family: $main-font;
-  background-color: white;
-  border-radius: 1rem;
-  padding: 1rem;
-  border: 1px solid hsl(0, 0%, 50%);
-  max-width: 100%;
-  height: 100%;
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.summary-card__header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  h2 {
-    font-size: 28px;
-    font-weight: 500;
-    margin: 0;
-  }
-}
-
-.summary__card-status-wrapper {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  gap: 0.5rem;
-
-  .summary__card-status-indicator {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-
-    &.ready {
-      background-color: #1c3893;
-    }
-
-    &.partial-ready {
-      background-color: #f8cd00;
-    }
-
-    &.not-ready {
-      background-color: #9e9e9e;
-    }
-
-    &.completed {
-      background-color: #1d805f;
-    }
-
-    &.failed {
-      background-color: #f23933;
-    }
-  }
-}
-
-.summary__card-description {
-  font-size: 14px;
-  color: #333;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}