@unifylib/ui-lib 1.1.3 → 1.1.5

package/src/lib/components/shared/action-card/action-card.component.scss

@@ -1,238 +0,0 @@
-.action-card {
-  background-color: var(--grayscale-surface-default, #ffffff);
-  border-right: 1px solid;
-  border-bottom: 1px solid;
-  border-left: 1px solid;
-  border-radius: 16px;
-  width: 100%;
-  height: 100%;
-  min-height: 247px;
-  position: relative;
-  overflow: hidden;
-
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--top-border-height, 12px);
-    background: var(--top-border-gradient, var(--button-gradient, linear-gradient(90deg, #E4C9D0 0%, #8A1538 100%)));
-    border-radius: 16px 16px 0 0;
-    z-index: 1;
-  }
-
-  &.extended-variant {
-    min-height: 572px;
-  }
-}
-
-.card-content {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-  padding: 16px 20px;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  &.extended-content {
-    padding: 20px;
-    gap: 0;
-  }
-}
-
-.main-content {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  gap: 64px;
-  min-width: 0;
-  min-height: 0;
-
-  &.extended-main {
-    gap: 24px;
-  }
-}
-
-.header-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-  height: 83px;
-
-  &.extended-header {
-    height: auto;
-    gap: 20px;
-  }
-}
-
-.header-top-wrapper {
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.header-top {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-  flex: 1;
-}
-
-.title-description-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-}
-
-.icon-wrapper {
-  flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-
-  mat-icon {
-    font-size: 40px;
-    width: 40px;
-    height: 40px;
-  }
-
-  .icon-svg {
-    width: 40px;
-    height: 40px;
-    object-fit: contain;
-  }
-}
-
-.card-title {
-  font-family: 'lusail-bold', sans-serif;
-  font-weight: 700;
-  font-size: 24px !important;
-  line-height: 1.2;
-  color: #222222;
-  margin: 0;
-  height: 40px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-start;
-  flex: 1;
-}
-
-.extended-variant .card-title {
-  color: #000000;
-  height: auto;
-}
-
-.card-description {
-  font-family: 'lusail-regular', sans-serif;
-  font-weight: 400;
-  font-size: 20px !important;
-  line-height: 1.2;
-  color: #888888;
-  margin: 0;
-  height: 40px;
-  display: flex;
-  align-items: center;
-}
-
-.extended-variant .card-description {
-  font-family: 'lusail-light', sans-serif;
-  font-weight: 300;
-  height: auto;
-}
-
-.decorative-icon-wrapper {
-  position: relative;
-  width: 153px;
-  height: 211px;
-  flex-shrink: 0;
-}
-
-.decorative-icon {
-  position: absolute;
-  left: 0;
-  top: 43px;
-  width: 144px;
-  height: 152px;
-  opacity: 0.3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  overflow: hidden;
-
-  mat-icon {
-    font-size: 152px;
-    width: 144px;
-    height: 152px;
-  }
-
-  .decorative-icon-svg {
-    width: 144px;
-    height: 152px;
-    object-fit: contain;
-  }
-}
-
-.features-divider {
-  width: 100%;
-  height: 1px;
-  background-color: #e9e9e9;
-  margin: 0;
-}
-
-.features-section {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  width: 100%;
-
-  .feature-item:not(:last-child) {
-    margin-bottom: 0;
-  }
-}
-
-.features-heading {
-  font-family: 'lusail-bold', sans-serif;
-  font-weight: 700;
-  font-size: 20px !important;
-  line-height: 1.2;
-  color: #2e2e2e;
-  margin: 0 0 0 0;
-  padding: 0;
-}
-
-.feature-item {
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-}
-
-.feature-check-icon {
-  font-size: 24px !important;
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-}
-
-.feature-text {
-  font-family: 'lusail-light', sans-serif;
-  font-weight: 300;
-  font-size: 20px !important;
-  line-height: 1.2;
-  color: #2e2e2e;
-  flex: 1;
-}

package/src/lib/components/shared/action-card/action-card.component.ts

@@ -1,56 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { ActionButtonComponent } from '../action-button/action-button.component';
-
-export interface FeatureItem {
-  text?: string;
-  textKey?: string;
-}
-
-@Component({
-  selector: 'lib-action-card',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatIconModule,
-    TranslateModule,
-    ActionButtonComponent
-  ],
-  templateUrl: './action-card.component.html',
-  styleUrl: './action-card.component.scss'
-})
-export class ActionCardComponent {
-
-  @Input() icon: string = '';
-  @Input() iconSvg?: string;
-  @Input() title: string = '';
-  @Input() description: string = '';
-  @Input() buttonText: string = '';
-  @Input() buttonTextKey?: string;
-  @Input() titleKey?: string;
-  @Input() descriptionKey?: string;
-  @Input() iconColor: string = '#8A1538';
-  @Input() borderColor: string = '#d1d1d1';
-  @Input() borderLeftColor?: string;
-  @Input() borderRightColor?: string;
-  @Input() borderBottomColor?: string;
-  @Input() topBorderColor?: string;
-  @Input() topBorderGradient?: string;
-  @Input() buttonGradient: string = 'linear-gradient(90deg, #E4C9D0 0%, #8A1538 100%)';
-  @Input() decorativeIconColor: string = 'rgba(209, 203, 216, 1)';
-  @Input() featureCheckIconColor?: string;
-  @Input() variant: 'default' | 'extended' = 'default';
-  @Input() iconSize: number = 40;
-  @Input() features?: FeatureItem[];
-  @Input() featuresHeading?: string;
-  @Input() featuresHeadingKey?: string;
-  @Input() showDivider: boolean = false;
-  @Input() topBorderHeight: number = 12;
-  @Output() buttonClick = new EventEmitter<void>();
-
-  onButtonClick(): void {
-    this.buttonClick.emit();
-  }
-}

package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.css

@@ -1,135 +0,0 @@
-.attachment-uploader {
-  background-color: var(--background-color);
-  border: 1px dashed #b7b7b7;
-  border-radius: 8px;
-  position: relative;
-  width: 100%;
-  transition: all 0.3s ease;
-  cursor: pointer;
-
-  &.drag-over {
-    border-color: var(--primary-color-3nd);
-    background-color: var(--selected-hover);
-  }
-}
-
-.upload-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 24px;
-  min-height: 200px;
-}
-
-.upload-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 8px;
-
-  mat-icon {
-    font-size: 48px;
-    width: 48px;
-    height: 48px;
-    color: #888888;
-  }
-}
-
-.main-text {
-  font-family: 'Lusail', sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1.2;
-  color: #000000;
-  margin: 0;
-  text-align: center;
-}
-
-.info-text {
-  font-family: 'Lusail', sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  line-height: 1.2;
-  color: #888888;
-  margin: 0;
-  text-align: center;
-}
-
-.browse-button {
-  margin-top: 8px;
-  border: 1px solid var(--primary-color-3nd);
-  border-radius: 8px;
-  background-color: var(--background-color);
-  color: var(--primary-color-3nd);
-  font-family: 'Lusail', sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  padding: 8px 16px;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: var(--selected-hover);
-  }
-}
-
-.selected-file {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background-color: var(--background-color);
-  border-top: 1px solid #e0e0e0;
-  border-radius: 0 0 8px 8px;
-}
-
-.file-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
-.file-icon {
-  color: #888888;
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-}
-
-.file-name {
-  font-family: 'Lusail', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  color: #000000;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.clear-button {
-  background-color: transparent;
-  border: none;
-  color: #d32f2f;
-  transition: color 0.2s ease;
-  padding: 4px;
-  flex-shrink: 0;
-
-  &:hover {
-    color: #b71c1c;
-    background-color: transparent;
-  }
-
-  mat-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-  }
-}
-
-.hidden-input {
-  display: none;
-}

package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.html

@@ -1,36 +0,0 @@
-<div class="attachment-uploader"
-     [class.drag-over]="isDragOver"
-     (dragover)="onDragOver($event)"
-     (dragleave)="onDragLeave($event)"
-     (drop)="onDrop($event)">
-  <div class="upload-content">
-    <div class="upload-icon">
-      <mat-icon>upload_file</mat-icon>
-    </div>
-
-    <p class="main-text">{{ 'attachmentUploader.dragAndDrop' | translate }}</p>
-
-    <p class="info-text">{{ 'attachmentUploader.fileInfo' | translate }}</p>
-
-    <button mat-stroked-button
-            class="browse-button"
-            (click)="triggerAttachmentUpload()">
-      {{ 'attachmentUploader.browseFiles' | translate }}
-    </button>
-  </div>
-
-  <div *ngIf="selectedFile" class="selected-file">
-    <div class="file-info">
-      <mat-icon class="file-icon">description</mat-icon>
-      <span class="file-name">{{ selectedFile.name }}</span>
-    </div>
-    <button mat-icon-button
-            class="clear-button"
-            (click)="clearFile()"
-            matTooltip="{{ 'attachmentUploader.removeFile' | translate }}">
-      <mat-icon>close</mat-icon>
-    </button>
-  </div>
-
-  <input #fileUpload type="file" class="hidden-input" (change)="uploadFileToServer()" />
-</div>

package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AttachmentUploaderComponent } from './attachment-uploader.component';
-
-describe('AttachmentUploaderComponent', () => {
-  let component: AttachmentUploaderComponent;
-  let fixture: ComponentFixture<AttachmentUploaderComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AttachmentUploaderComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(AttachmentUploaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.ts

@@ -1,71 +0,0 @@
-import {Component, ElementRef, EventEmitter, Output, ViewChild} from '@angular/core';
-import {MatIcon} from "@angular/material/icon";
-import {TranslateModule} from "@ngx-translate/core";
-import {MatButton, MatIconButton} from "@angular/material/button";
-import {NgIf} from "@angular/common";
-import {MatTooltip} from "@angular/material/tooltip";
-
-@Component({
-  selector: 'app-attachment-uploader',
-  standalone: true,
-  imports: [
-    MatIcon,
-    TranslateModule,
-    MatButton,
-    NgIf,
-    MatTooltip,
-    MatIconButton,
-  ],
-  templateUrl: './attachment-uploader.component.html',
-  styleUrl: './attachment-uploader.component.css'
-})
-export class AttachmentUploaderComponent {
-  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLInputElement>;
-  @Output() fileSelected = new EventEmitter<File | null>();
-
-  selectedFile: File | null = null;
-  isDragOver = false;
-
-  triggerAttachmentUpload(): void {
-    this.fileUpload.nativeElement.click();
-  }
-
-  uploadFileToServer(): void {
-    const file = this.fileUpload.nativeElement.files?.[0];
-    if (file) {
-      this.selectedFile = file;
-      this.fileSelected.emit(file);
-    }
-  }
-
-  clearFile(): void {
-    this.selectedFile = null;
-    this.fileUpload.nativeElement.value = '';
-    this.fileSelected.emit(null);
-  }
-
-  onDragOver(event: DragEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = true;
-  }
-
-  onDragLeave(event: DragEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = false;
-  }
-
-  onDrop(event: DragEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = false;
-
-    const files = event.dataTransfer?.files;
-    if (files && files.length > 0) {
-      const file = files[0];
-      this.selectedFile = file;
-      this.fileSelected.emit(file);
-    }
-  }
-}

package/src/lib/components/shared-list/shared-list.component.html

@@ -1,17 +0,0 @@
-<ng-container *ngIf="readyToLoad">
-  @if (editableTable) {
-    <app-editable-base-table [filterRequest]="filterRequest" [pageInfo]="pageInfo"
-                    [fields]="fields"
-                    [isPending]="isPending"
-    ></app-editable-base-table>
-
-  } @else {
-
-    <app-base-table [filters]="filters" [pageInfo]="pageInfo"
-                    [columns]="columnsDefinition"
-                    [listAction]="listAction"
-                    [isPending]="isPending"
-    ></app-base-table>
-
-  }
-</ng-container>

package/src/lib/components/shared-list/shared-list.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SharedListComponent } from './shared-list.component';
-
-describe('SharedListComponent', () => {
-  let component: SharedListComponent;
-  let fixture: ComponentFixture<SharedListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SharedListComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(SharedListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/shared-list/shared-list.component.ts

@@ -1,53 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from "@angular/router";
-import {NgIf} from "@angular/common";
-import {BaseTableComponent} from "../base-table/base-table.component";
-import {ButtonActionSettings, EMPTY_PAGE_INFO, FieldInfo, FilterRequest, PageInfo, TableColumn} from "../../base-model";
-import {Filter} from "../../base-model";
-import {EditableBaseTableComponent} from "../editable-base-table/editable-base-table.component";
-
-@Component({
-  selector: 'app-shared-list',
-  standalone: true,
-  imports: [
-    BaseTableComponent,
-    NgIf,
-    EditableBaseTableComponent
-  ],
-  templateUrl: './shared-list.component.html',
-  styleUrls:[ './shared-list.component.css']
-})
-export class SharedListComponent implements OnInit {
-  pageInfo: PageInfo = EMPTY_PAGE_INFO;
-  columnsDefinition: TableColumn<any>[] = [];
-  fields: FieldInfo[] = [];
-  filters: Filter[] = [];
-  readyToLoad: boolean = false;
-  isPending: boolean = false;
-  listAction: ButtonActionSettings[] = [];
-  editableTable : boolean = false;
-  filterRequest: FilterRequest = new FilterRequest();
-  constructor(private activatedRoute: ActivatedRoute) { }
-
-  ngOnInit(): void {
-    this.activatedRoute.data.subscribe(data => {
-      this.pageInfo = data['pageInfo'];
-      this.columnsDefinition = data["columnsDefinition"];
-      this.filters = data["filters"] || [];
-
-      this.isPending = 'pending' === data["mode"];
-      this.listAction = data['actions'];
-      this.editableTable = data['editableTable'] || false;
-      this.fields = data['fields'];
-
-      this.filterRequest = new FilterRequest();
-      this.filterRequest.columns = this.fields?.filter(c => c.type !== 'button').map(c => c.property) || [];
-      this.filterRequest.filters = this.filters;
-
-      this.readyToLoad = true;
-
-    });
-  }
-
-
-}

package/src/lib/components/snackbar-static/snackbar-static.component.html

@@ -1,20 +0,0 @@
-<div class="snackbar snackbar-{{type}}" [ngStyle]="{'width': width == 'auto' ? 'auto' : width}">
-  <div class="sub-snackbar">
-    <mat-icon *ngIf="type === 'error'">error</mat-icon>
-    <mat-icon *ngIf="type === 'success'">check_box</mat-icon>
-    <mat-icon *ngIf="type === 'warning'">warning</mat-icon>
-    <mat-icon *ngIf="type === 'info'">info</mat-icon>
-    <mat-icon *ngIf="type === 'help'">help</mat-icon>
-
-    <div class="text-content">
-      <div class="title">{{ titleKey | translate : paramsTitle }}</div>
-      <div class="subtitle">{{ messageKey | translate: params }}</div>
-    </div>
-
-  </div>
-  <div class="action" *ngIf="textBtn">
-    <button mat-stroked-button class="btn-none-background-primary action-btn" (click)="submit()" id="snackbar-action-btn">
-        {{ textBtn | translate}}
-    </button>
-  </div>
-</div>