@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, Input, Output, inject, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { Subject, takeUntil, startWith } from 'rxjs';
+
+@Component({
+  selector: 'lib-action-button',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    TranslateModule
+  ],
+  templateUrl: './action-button.component.html',
+  styleUrl: './action-button.component.scss'
+})
+export class ActionButtonComponent implements OnInit, OnDestroy {
+  private readonly translateService = inject(TranslateService);
+  private readonly destroy$ = new Subject<void>();
+
+  @Input() buttonText: string = '';
+  @Input() buttonTextKey?: string;
+  @Input() buttonGradient: string = 'linear-gradient(90deg, #E4C9D0 0%, #8A1538 100%)';
+  @Input() id?: string;
+  @Output() buttonClick = new EventEmitter<void>();
+
+  get isArabic(): boolean {
+    const currentLang = this.translateService.currentLang
+      || this.translateService.defaultLang
+      || this.translateService.getBrowserLang()
+      || 'en';
+    return currentLang === 'ar';
+  }
+
+  ngOnInit(): void {
+    this.translateService.onLangChange
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  onButtonClick(): void {
+    this.buttonClick.emit();
+  }
+}

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

@@ -0,0 +1,78 @@
+<div class="action-card" 
+     [class.extended-variant]="variant === 'extended'"
+     [style.--top-border-gradient]="topBorderGradient || buttonGradient" 
+     [style.--top-border-height]="topBorderHeight + 'px'"
+     [style.border-right-color]="borderRightColor || borderColor" 
+     [style.border-bottom-color]="borderBottomColor || borderColor" 
+     [style.border-left-color]="borderLeftColor || borderColor">
+  <div class="card-content" [class.extended-content]="variant === 'extended'">
+    <div class="main-content" [class.extended-main]="variant === 'extended'">
+      <div class="header-section" [class.extended-header]="variant === 'extended'">
+        <div class="header-top-wrapper" *ngIf="variant === 'default'">
+          <div class="icon-wrapper" 
+               [style.color]="iconColor"
+               [style.width.px]="iconSize"
+               [style.height.px]="iconSize">
+            <img *ngIf="iconSvg" [src]="iconSvg" alt="" class="icon-svg" [style.width.px]="iconSize" [style.height.px]="iconSize" />
+            <mat-icon *ngIf="!iconSvg && icon" [style.font-size.px]="iconSize" [style.width.px]="iconSize" [style.height.px]="iconSize">{{ icon }}</mat-icon>
+          </div>
+          <div class="header-top">
+            <h2 class="card-title">
+              <span *ngIf="titleKey">{{ titleKey | translate }}</span>
+              <span *ngIf="!titleKey">{{ title }}</span>
+            </h2>
+          </div>
+        </div>
+        <div class="icon-wrapper" 
+             *ngIf="variant === 'extended'"
+             [style.color]="iconColor"
+             [style.width.px]="iconSize"
+             [style.height.px]="iconSize">
+          <img *ngIf="iconSvg" [src]="iconSvg" alt="" class="icon-svg" [style.width.px]="iconSize" [style.height.px]="iconSize" />
+          <mat-icon *ngIf="!iconSvg && icon" [style.font-size.px]="iconSize" [style.width.px]="iconSize" [style.height.px]="iconSize">{{ icon }}</mat-icon>
+        </div>
+        <div class="title-description-wrapper" *ngIf="variant === 'extended'">
+          <h2 class="card-title">
+            <span *ngIf="titleKey">{{ titleKey | translate }}</span>
+            <span *ngIf="!titleKey">{{ title }}</span>
+          </h2>
+          <p class="card-description">
+            <span *ngIf="descriptionKey">{{ descriptionKey | translate }}</span>
+            <span *ngIf="!descriptionKey">{{ description }}</span>
+          </p>
+        </div>
+        <p class="card-description" *ngIf="variant === 'default'">
+          <span *ngIf="descriptionKey">{{ descriptionKey | translate }}</span>
+          <span *ngIf="!descriptionKey">{{ description }}</span>
+        </p>
+      </div>
+      <lib-action-button
+        [buttonText]="buttonText"
+        [buttonTextKey]="buttonTextKey"
+        [buttonGradient]="buttonGradient"
+        (buttonClick)="onButtonClick()">
+      </lib-action-button>
+      <div class="features-divider" *ngIf="showDivider && features && features.length > 0"></div>
+      
+      <div class="features-section" *ngIf="features && features.length > 0">
+        <h3 class="features-heading" *ngIf="featuresHeading || featuresHeadingKey">
+          <span *ngIf="featuresHeadingKey">{{ featuresHeadingKey | translate }}</span>
+          <span *ngIf="!featuresHeadingKey">{{ featuresHeading }}</span>
+        </h3>
+        <div class="feature-item" *ngFor="let feature of features">
+          <mat-icon class="feature-check-icon" [style.color]="featureCheckIconColor || iconColor">check_circle</mat-icon>
+          <span class="feature-text">
+            <span *ngIf="feature.textKey">{{ feature.textKey | translate }}</span>
+            <span *ngIf="!feature.textKey">{{ feature.text }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="decorative-icon-wrapper" *ngIf="variant === 'default' && (icon || iconSvg)">
+      <div class="decorative-icon">
+        <img *ngIf="iconSvg" [src]="iconSvg" alt="" class="decorative-icon-svg" [style.filter]="'opacity(0.3)'" />
+        <mat-icon *ngIf="!iconSvg && icon" [style.color]="decorativeIconColor">{{ icon }}</mat-icon>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,238 @@
+.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

@@ -0,0 +1,56 @@
+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,54 +1,135 @@
-.attachment-uploader {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start; /* <== Ensures buttons align left*/
-gap: 10px;
-  flex-wrap: wrap;
-
-
-  .upload-button {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 18px;
-    border-radius: 8px;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    min-width: 200px;
-    text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    mat-icon {
-      font-size: 20px;
-    }
-  }
-
-  .clear-button {
-    background-color: transparent;
-    border: none;
-    color: #d32f2f;
-    transition: color 0.2s ease;
-    padding: 4px;
-
-    &:hover {
-      color: #b71c1c;
-    }
-
-    mat-icon {
-      font-size: 20px;
-    }
-  }
-
-  .hidden-input {
-    display: none;
-  }
-}
-
-.icon-design {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-}
+.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,22 +1,36 @@
-<div class="attachment-uploader">
-  <button mat-raised-button
-          [color]="selectedFile ? 'accent' : 'primary'"
-          class="upload-button"
-          (click)="triggerAttachmentUpload()">
-    <div class="icon-design">
-      <mat-icon>attach_file</mat-icon>
-      <span *ngIf="!selectedFile">{{ 'uploadAttachment' | translate }}</span>
-      <span *ngIf="selectedFile">{{ selectedFile.name }}</span>
-    </div>
-  </button>
-
-  <button *ngIf="selectedFile"
-          mat-icon-button
-          class="clear-button"
-          (click)="clearFile()"
-          matTooltip="Remove file">
-    <mat-icon>close</mat-icon>
-  </button>
-
-  <input #fileUpload type="file" class="hidden-input" (change)="uploadFileToServer()" />
-</div>
+<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>