@tuki-io/tuki-widgets 0.0.70 → 0.0.71

package/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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/projects/tuki/widgets/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;
-}

package/projects/tuki/widgets/di2mt/shared/components/summary-card/summary-card.component.ts

@@ -1,27 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
-    selector: 'tk-summary-card',
-    templateUrl: './summary-card.component.html',
-    styleUrls: ['./summary-card.component.scss']
-})
-export class SummaryCardComponent {
-    @Input() value: number = 41;
-    @Input() status: string = 'Ready';
-    @Input() description!: string;
-
-    getStatusClass(status: string): string {
-        switch (status?.toLowerCase()) {
-            case 'ready':
-                return 'ready';
-            case 'not ready':
-                return 'not-ready';
-            case 'failed':
-                return 'failed';
-            case 'completed':
-                return 'completed';
-            default:
-                return 'not-ready';
-        }
-    }
-}

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

@@ -1,28 +0,0 @@
-<div class="filters-wrapper">
-    <ng-container *ngFor="let filter of filters">
-        <div class="filter">
-            <ng-container [ngSwitch]="filter.type">
-                <!-- Search Input with Material Design -->
-                <mat-form-field *ngSwitchCase="'search'" appearance="outline" class="search-field">
-                    <mat-label>{{ filter.placeholder }}</mat-label>
-                    <input matInput
-                           [placeholder]="filter.placeholder"
-                           (input)="onFilter(filter.columnKey, $event)">
-                    <mat-icon matPrefix class="search-icon">
-                        <img src="assets/icons/search_icon.png" alt="Search" />
-                    </mat-icon>
-                </mat-form-field>
-
-                <!-- Select Dropdown with Material Design -->
-                <mat-form-field *ngSwitchCase="'select'" appearance="outline" class="select-field">
-                    <mat-label>{{ filter.placeholder }}</mat-label>
-                    <mat-select (selectionChange)="onFilter(filter.columnKey, $event)">
-                        <mat-option *ngFor="let option of filter.options" [value]="option.value">
-                            {{ option.label }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </ng-container>
-        </div>
-    </ng-container>
-</div>

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

@@ -1,52 +0,0 @@
-: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;
-      }
-    }
-  }
-}