@tuki-io/tuki-widgets 0.0.76 → 0.0.77

package/projects/tuki/widgets/di2mt/assets/icons/details_d_icon.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.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" fill="#2C355D"/>
-</svg>

package/projects/tuki/widgets/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/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 [ngClass]="{'status-ready': status === 'ready'}">{{ status }}</span>
-        </div>
-    </div>
-</article>

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

@@ -1,79 +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%, 20%);
-  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;
-    }
-  }
-}
-.status-ready {
-  color: #1170CF;
-}
-
-.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 custom-mat-form-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 custom-mat-form-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>