@tuki-io/tuki-widgets 0.0.134 → 0.0.136

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

@@ -1,187 +0,0 @@
-:host {
-  color: #333;
-  display: block;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.card__list-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: .5rem;
-}
-
-.card__list-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  transition: background-color 0.3s ease-in-out;
-  padding: 0.75rem;
-  border-radius: 1rem;
-
-  &:hover {
-    background-color: #f9f9f9;
-  }
-}
-
-.card__item-info {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  width: 100%;
-}
-
-.card__item-text-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  cursor: help;
-}
-
-.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;
-  }
-}
-
-/* styles.css or styles.scss */
-::ng-deep {
-  .mat-tooltip {
-    // background: rgb(0, 102, 198) !important;
-    background: linear-gradient(
-      90deg,
-      rgb(0, 0, 0) 0%,
-      rgb(73, 73, 73) 100%
-    ) !important;
-    color: #fff !important;
-    // background: rgb(0, 0, 0) !important;
-    // color: #fff !important;
-    font-size: 14px !important;
-    border-radius: 1rem !important;
-    padding: 0.75rem !important;
-    line-height: 1.25rem;
-  }
-}
-
-.card__item-link-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.4rem;
-  border-radius: 0.45rem;
-  background-color: #eefaff;
-  // color: #41a5cc;
-  // background-color: #fff5ea;
-  // color: #e77400;
-  background: linear-gradient(90deg, #41a5cc, #95ea8b);
-
-  /* Clip background to text */
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  /* For some browsers */
-  background-clip: text;
-  color: transparent;
-
-  cursor: pointer;
-  transition: all 0.3s ease-in-out;
-
-  &:hover {
-    background: linear-gradient(90deg, #41a5cc, #95ea8b);
-    color: white;
-    -webkit-background-clip: unset;
-    -webkit-text-fill-color: unset;
-    background-clip: unset;
-    transform: scale(0.95);
-  }
-}
-
-.card__item-stats {
-  right: 0;
-  position: absolute;
-  text-align: right;
-  cursor: pointer;
-
-  .card__item-numbers {
-    font-size: 28px;
-  }
-  .card__item-numbers-description {
-    font-size: 14px;
-  }
-}
-
-.card__item-stats-dialog {
-  pointer-events: none;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: .5rem;
-  position: absolute;
-  top: 50%;
-  background-color: rgb(255, 255, 255);
-  padding: 1rem;
-  border-radius: .5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  // display: none;
-  min-width: 200px;
-  max-width: 300px;
-  border: 1px solid #ddd;
-  opacity: 0;
-  transform: translateX(-100%) translateY(-50%) scale(0.95);
-  transition: opacity 0.3s ease-in-out;
-}
-
-.card__item-stats-dialog-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 2.5rem;
-
-  span {
-    font-size: 18px;
-    color: #555;
-  }
-
-  .status {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .status-text {
-    font-weight: 600;
-    color: #777;
-    font-size: 14px;
-  }
-
-  .indicator {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: #1170cf; /* Default color */
-  }
-}
-
-.fade-in {
-  animation: fadeIn 0.3s forwards;
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-    transform: translateX(calc(-100% - 1.5rem)) translateY(-50%) scale(1);
-  }
-}

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

@@ -1,41 +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;
-
-    displayLink: boolean = false;
-    hoveredItemLabel!: string;
-    
-    displayStatsDialog: boolean = false;
-
-    onMouseOverItemText(event: Event, label: string): void {
-        this.hoveredItemLabel = label;
-        this.displayLink = true;
-    }
-
-    onMouseLeaveItemText(event: Event, label: string): void {
-        this.hoveredItemLabel = label;
-        this.displayLink = false;
-    }
-
-    onMouseOverItemStats(event: Event, label: string): void {
-        event.stopPropagation();
-        this.hoveredItemLabel = label;
-        this.displayStatsDialog = true;
-    }
-
-    onMouseLeaveItemStats(event: Event, label: string): void {
-        this.hoveredItemLabel = label;
-        this.displayStatsDialog = false;
-    }
-
-    trackByFn(index: number): number {
-        return index;
-    }
-}

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,78 +0,0 @@
-@import "../../../styles/variables.scss";
-
-:host {
-  display: block;
-  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;
-    }
-  }
-}
-.indicator-status-ready {
-  color: #1170CF !important;
-}
-
-.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>

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

@@ -1,245 +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;
-      }
-    }*/
-  }
-}
-:host ::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: 24px;
-    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;
-    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: 24px;
-    line-height: 24px;
-    margin: 3px 0 0 0;
-  }
-
-  /* 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: -6px 4px 0 0;
-    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: -6px 4px 0 0;
-    background: none;
-  }
-
-  //-----------
-  /* Label positioning */
-  .custom-mat-form-field .mat-form-field-label-wrapper {
-    top: 2px;
-    padding-top: 0;
-    height: 28px;
-    display: flex;
-    overflow: visible !important;
-    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: -5px;
-    width: fit-content;
-    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

@@ -1,28 +0,0 @@
-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);
-    }
-}