@unifylib/ui-lib 1.1.3 → 1.1.4

package/src/lib/components/search-bar/search-bar.component.scss

@@ -1,63 +0,0 @@
-::ng-deep .search__button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 56px;
-  margin-top: -6px;
-
-}
-.row {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-
-.column {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.align-start-center {
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.align-center-center {
-  align-items: center;
-  justify-content: center;
-}
-
-.gap-16 > * + * {
-  margin-left: 16px;
-}
-
-.flex-50 {
-  flex: 0 0 50%;
-}
-
-.flex-15 {
-  flex: 0 0 15%;
-}
-
-.flex-10 {
-  flex: 0 0 10%;
-}
-
-.search {
-  width: 100%;
-  padding: 0 16px;
-  margin-bottom: 16px;
-}
-
-.search__button {
-  margin-bottom: 6px;
-}
-
-.icon-search {
-  height: 30px;
-  width: 30px;
-  font-size: 30px;
-  margin-bottom: 15px;
-  cursor: pointer;
-}

package/src/lib/components/search-bar/search-bar.component.spec.ts

@@ -1,25 +0,0 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {SearchBarComponent} from './search-bar.component';
-
-describe('SearchBarComponent', () => {
-  let component: SearchBarComponent;
-  let fixture: ComponentFixture<SearchBarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SearchBarComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SearchBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/search-bar/search-bar.component.ts

@@ -1,68 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {MatFormField, MatLabel} from "@angular/material/form-field";
-import {MatOption, MatSelect} from "@angular/material/select";
-import {FormsModule} from "@angular/forms";
-import {MatIcon} from "@angular/material/icon";
-import {MatInput} from "@angular/material/input";
-import {MatIconButton} from "@angular/material/button";
-import {NgForOf} from "@angular/common";
-import {TableColumn} from "../../base-model";
-import {TranslateModule} from "@ngx-translate/core";
-type SearchType = 'exact' | 'like';
-type SortType = 'ASC' | 'DESC';
-@Component({
-  selector: 'ag-search-bar',
-  templateUrl: './search-bar.component.html',
-  standalone: true,
-  imports: [
-    MatFormField,
-    MatSelect,
-    MatOption,
-    FormsModule,
-    MatIcon,
-    MatInput,
-    MatIconButton,
-    NgForOf,
-    TranslateModule
-  ],
-  styleUrls: ['./search-bar.component.scss']
-})
-export class SearchBarComponent implements OnInit {
-  @Input() columns: TableColumn<any>[];
-  @Input() defaultSortKey: string = '';
-
-  searchValue: string = '';
-  searchType: SearchType = 'like';
-  selectedSortKey: string = '';
-  selectedSortType: SortType = 'ASC';
-  @Output() searchTriggered = new EventEmitter<{
-    searchValue: string;
-    searchType: SearchType;
-    sortKey: string;
-    sortType: string;
-  }>();
-
-  onSearch() {
-    this.selectedSortKey ||= this.defaultSortKey || this.columns[0]?.property;
-
-    this.searchTriggered.emit({
-      searchValue: this.searchValue,
-      searchType: this.searchType,
-      sortKey: this.selectedSortKey,
-      sortType: this.selectedSortType
-    });
-  }
-
-  labelKey(column: { label?: string; property: string }): string {
-    return column.label || column.property;
-  }
-
-  ngOnInit(): void {
-  }
-
-  getColumns() {
-    return this.columns.filter(
-      (column) => ['text', 'date', 'localDateTime'].includes(column.type)
-    );
-  }
-}

package/src/lib/components/section-form-canvas/section-form-canvas.component.html

@@ -1,43 +0,0 @@
-<mat-expansion-panel class="location-card"
-                     #panel="matExpansionPanel"
-                     [expanded]="isExpanded"
-                     [hideToggle]="hideToggle"
-                     (opened)="alwaysOpen ? panel.open() : null"
-                     (closed)="alwaysOpen ? panel.open() : null">
-  <mat-expansion-panel-header class="card-header" (click)="toggleExpand()">
-    <mat-panel-title>
-      <h3 class="card-title" *ngIf="isTranslateTitle">
-        {{ pageInfo.labelsSection + '.' + title | translate }}
-      </h3>
-      <h3 class="card-title" *ngIf="!isTranslateTitle">{{ title }}</h3>
-    </mat-panel-title>
-
-    <mat-panel-description class="panel-description">
-      <div class="row flex-auto buttons-wrapper">
-        <button
-          mat-flat-button
-          *ngFor="let btn of buttons"
-          [color]="btn.color || 'primary'"
-          (click)="onButtonClick(btn , key); $event.stopPropagation()"
-          class="btn-none-background-primary action"
-          [attr.id]="btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))"
-        >
-          <div class="button-text">
-            <mat-icon *ngIf="btn.icon">{{ btn.icon }}</mat-icon>
-            <span>{{ btn.label | translate }}</span>
-          </div>
-        </button>
-      </div>
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-  <div class="panel-body">
-    <hr class="divider"/>
-    <app-base-form-canvas
-      [pageInfo]="pageInfo"
-      [fields]="fields"
-      [editable]="editable"
-      [item]="item"
-      (formUpdated)="formUpdated($event)"
-    ></app-base-form-canvas>
-  </div>
-</mat-expansion-panel>

package/src/lib/components/section-form-canvas/section-form-canvas.component.scss

@@ -1,81 +0,0 @@
-.location-card {
-  border: 1px solid #dcdcdc;
-  border-radius: 8px;
-  background: #fff;
-  margin: 18px auto;
-  overflow: hidden;
-
-  .mat-expansion-panel-header {
-    padding: 0 15px;
-  }
-  .panel-body {
-    padding: 0 15px;
-  }
-.panel-description {
-  justify-content: end !important;
-  margin: 0 !important;
-}
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .card-title {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: #222;
-    }
-
-    .btn-edit {
-      width: 120px;
-      min-height: 32px !important;
-      border-radius: 9999px !important;
-      font-size: 16px !important;
-    }
-
-    .expand-icon {
-      color: #339dff;
-      font-size: 16px;
-    }
-  }
-
-  .divider {
-    border: none;
-    border-top: 2px solid var(--primary-color-3nd);
-    margin: 0 ;
-  }
-}
-.flex-auto {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-.row {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-.gap-20 {
-  gap: 20px;
-}
-.buttons-wrapper {
-  display: inline-block;
-  text-align-last: end;
-  margin: 0 !important;
-
-}
-.buttons-wrapper .action {
-  min-height: 44px !important;
-  min-width: 135px !important;
-  width: auto !important;
-}
-.button-text {
-  span{
-    font-size: 18px;
-  }
-  mat-icon {
-    font-size: 18px !important;
-  }
-}

package/src/lib/components/section-form-canvas/section-form-canvas.component.spec.ts

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

package/src/lib/components/section-form-canvas/section-form-canvas.component.ts

@@ -1,67 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatIcon} from "@angular/material/icon";
-import {MatButton} from "@angular/material/button";
-import {ButtonActionSettings, FieldInfo, PageInfo} from "../../base-model";
-import {BaseFormComponent} from "../base-form/base-form.component";
-import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
-import {NgForOf, NgIf} from "@angular/common";
-import {TranslateModule} from "@ngx-translate/core";
-import {FormGroup} from "@angular/forms";
-import {
-  MatExpansionPanel,
-  MatExpansionPanelHeader,
-  MatExpansionPanelDescription,
-  MatExpansionPanelTitle
-} from "@angular/material/expansion";
-
-@Component({
-  selector: 'lib-section-form-canvas',
-  standalone: true,
-  imports: [
-    MatIcon,
-    MatButton,
-    BaseFormComponent,
-    BaseFormCanvasComponent,
-    NgIf,
-    TranslateModule,
-    MatExpansionPanel,
-    MatExpansionPanelTitle,
-    MatExpansionPanelDescription,
-    MatExpansionPanelHeader,
-    NgForOf
-  ],
-  templateUrl: './section-form-canvas.component.html',
-  styleUrl: './section-form-canvas.component.scss'
-})
-export class SectionFormCanvasComponent {
-
-  @Input() pageInfo: PageInfo;
-  @Input() fields: FieldInfo[];
-  @Input() itemId: number;
-  @Input() editable: boolean;
-  @Input() hideBackButton: boolean;
-  @Input() item: any;
-  @Input() title: string;
-  @Input() isTranslateTitle: boolean;
-  @Input() key: number;
-  @Input() hideToggle: boolean = true;
-  @Input() isExpanded: boolean = true;
-  @Input() alwaysOpen: boolean = true;
-  @Output() actionEdit: EventEmitter<any> = new EventEmitter();
-  @Output() formEdit: EventEmitter<FormGroup> = new EventEmitter();
-  @Input() buttons: ButtonActionSettings[] = [];
-  @Output() buttonClicked = new EventEmitter<any>();
-
-  formUpdated($event) {
-    this.formEdit.emit($event);
-
-  }
-
-  toggleExpand() {
-    this.isExpanded = !this.isExpanded;
-  }
-
-  onButtonClick(btn: ButtonActionSettings, sectionKey: number): void {
-    this.buttonClicked.emit({...btn , sectionKey: sectionKey});
-  }
-}

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

@@ -1,12 +0,0 @@
-<button
-  class="action-button"
-  (click)="onButtonClick()"
-  [style.background]="buttonGradient"
-  [attr.id]="id || (buttonTextKey ? ('action-button-' + buttonTextKey) : 'action-button')"
-  type="button">
-  <span class="button-texts">
-    <span *ngIf="buttonTextKey">{{ buttonTextKey | translate }}</span>
-    <span *ngIf="!buttonTextKey">{{ buttonText }}</span>
-  </span>
-  <mat-icon class="arrow-icon" [class.arrow-rtl]="isArabic">arrow_forward</mat-icon>
-</button>

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

@@ -1,45 +0,0 @@
-.action-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  height: 62px;
-  border-radius: 16px;
-  border: none;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  width: 100%;
-  padding: 0;
-  background-size: cover;
-  background-position: center;
-  margin-top: 15px;
-
-  .button-texts {
-    font-family: 'lusail-medium', sans-serif !important;
-    font-weight: 500 !important;
-    font-size: 24px !important;
-    line-height: 1.2 !important;
-    color: #2e2e2e !important;
-    white-space: nowrap;
-    position: relative;
-    z-index: 1;
-  }
-
-  .arrow-icon {
-    font-size: 24px !important;
-    width: 24px;
-    height: 30px;
-    color: #2e2e2e;
-    position: relative;
-    z-index: 1;
-
-    &.arrow-rtl {
-      transform: rotate(180deg);
-    }
-  }
-
-  &:hover {
-    opacity: 0.9;
-  }
-}

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

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

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