@unifylib/ui-lib 1.1.3 → 1.1.5

package/src/lib/components/button-actions/button-actions.component.scss

@@ -1,101 +0,0 @@
-.svgColor{
-  fill: transparent !important;
-  stroke: var(--accent-color) !important;
-}
-
-.action-buttons-container {
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
-  align-items: center;
-  padding: 0;
-}
-
-.action-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 28px;
-  min-width: 24px;
-  background: white;
-  border: 1px solid #a5c4d2;
-  border-radius: 9999px;
-  cursor: pointer;
-  padding: 0 16px;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-
-  &:hover:not(:disabled) {
-    border-color: #8ba8b8;
-    background: #f8fafb;
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.98);
-    background: #f0f4f6;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.action-icon {
-  width: 18px;
-  height: 18px;
-  font-size: 18px;
-  color: #1a365d;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  ::ng-deep svg {
-    fill: #1a365d;
-    stroke: #1a365d;
-    width: 18px;
-    height: 18px;
-  }
-}
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.align-start {
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-.align-center {
-  justify-content: center;
-  align-items: center;
-}
-
-.align-end {
-  justify-content: flex-end;
-  align-items: flex-end;
-}
-
-.gap-0 {
-  gap: 0;
-}
-
-.gap-5 {
-  gap: 5px;
-}
-
-.gap-10 {
-  gap: 10px;
-}
-
-.padding-horizontal-10 {
-  padding-left: 10px;
-  padding-right: 10px;
-}

package/src/lib/components/button-actions/button-actions.component.spec.ts

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

package/src/lib/components/button-actions/button-actions.component.ts

@@ -1,70 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {ButtonActionSettings} from "../../base-model/button-action-settings";
-import {MatDialog} from "@angular/material/dialog";
-import {ActionCommentComponent} from "../action-comment/action-comment.component";
-import {MatIcon} from "@angular/material/icon";
-import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
-import {MatIconButton} from "@angular/material/button";
-import {NgClass, NgForOf, NgIf} from "@angular/common";
-import {TranslateModule} from "@ngx-translate/core";
-
-@Component({
-  selector: 'app-button-actions',
-  standalone: true,
-  imports: [
-    MatIcon,
-    MatMenuTrigger,
-    MatIconButton,
-    MatMenu,
-    MatMenuItem,
-    NgIf,
-    NgClass,
-    NgForOf,
-    TranslateModule
-  ],
-  templateUrl: './button-actions.component.html',
-  styleUrl: './button-actions.component.scss'
-})
-export class ButtonActionsComponent {
-  constructor(public dialog: MatDialog) { }
-
-  @Input()
-  actions: ButtonActionSettings[] =[];
-  @Input()
-  disabled?: boolean = false;
-
-  @Output()
-  clickedButton: EventEmitter<any> = new EventEmitter();
-
-  @Input()
-  buttonsAction: boolean = false;
-
-  @Input()
-  listAction: ButtonActionSettings[] = [];
-  ngOnInit(): void {
-  }
-
-
-  getClickedAction(action: ButtonActionSettings) {
-    if (action.showCommentDialog === true) {
-      const dialogRef = this.dialog.open(ActionCommentComponent, {
-        data: {label: action.label, isTermination: action.commentRequired, external: false,
-          warningMsg: false},
-        width: '600px',
-        height: 'auto',
-        direction:  'ltr' // this.authService.dir === 'rtl' ? 'rtl': 'ltr'
-      });
-      dialogRef.afterClosed().subscribe(result => {
-        if (result) {
-          action.comment = result.comment;
-          action.shareExternal = result.shareExternal;
-          this.clickedButton.emit(action);
-        }
-      });
-
-    } else {
-      this.clickedButton.emit(action);
-    }
-  }
-
-}

package/src/lib/components/editable-base-table/editable-base-table.component.html

@@ -1,337 +0,0 @@
-<div class="baseTable flex-column">
-  <div class="left-align">
-    <app-attachment-uploader #uploader
-                             *ngIf="isBulkItemsSupported"
-                             (fileSelected)="handleFileUpload($event)">
-    </app-attachment-uploader>
-  </div>
-
-  <div class="flex-row full-width">
-    <div class="flex-half flex-column align-center-start">
-      <app-title-bar [pageTitle]="pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'"
-                     [titleMode]="''"
-                     [newAction]="false"
-                     [showExtractButton]="!pageInfo.hideExtractButton">
-      </app-title-bar>
-      <span class="font-small">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>
-    </div>
-    <div class="flex-half flex-column align-start-end">
-      <mat-chip-listbox aria-label="Color selection" [multiple]="false" *ngIf="pageInfo.draftSupported">
-        <mat-chip-option [selected]="!this.isPending" [color]="'accent'" [value]="'COMPLETED'"
-                         (click)="switchViewMode(false)">{{ 'finished' | translate }}
-        </mat-chip-option>
-        <mat-chip-option [selected]="this.isPending" [color]="'accent'" [value]="'PENDING'"
-                         (click)="switchViewMode(true)">{{ 'todo' | translate }}
-        </mat-chip-option>
-      </mat-chip-listbox>
-    </div>
-  </div>
-
-  <ng-container *ngIf="showSearch()">
-    <div class="flex-row full-width">
-      <div class="flex-80 flex-column align-start-end">
-        <app-base-form-canvas class="flex-fill"
-                              [pageInfo]="pageInfo"
-                              [fields]="searchFormFields"
-                              [editable]="true"
-                              (formUpdated)="updateSearchForm($event)">
-        </app-base-form-canvas>
-      </div>
-      <div class="flex-15 flex-column align-start-end">
-        <div class="flex-row align-center-center gap-8 full-width">
-          <button mat-button color="primary" type="button" (click)="doSearch()" id="editable-search-btn">
-            <mat-icon>search</mat-icon>
-            {{ 'search' | translate }}
-          </button>
-          <button mat-button color="primary" type="button" (click)="clearSearch()" id="editable-clear-search-btn">
-            <mat-icon>clear</mat-icon>
-            {{ 'clear' | translate }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-
-  <div class="flex-row full-width baseTable__detailsColumn">
-    <div class="flex-full">
-      <ng-container *ngIf="isLoaded">
-        <div class="flex-row mainTable gap-0 align-start-start">
-          <form [formGroup]="formParam" class="flex-fill">
-            <table [dataSource]="dataFormArray.controls" class="flex-fill" mat-table matSort>
-              <ng-container *ngFor="let column of this.fields; let i = index">
-                <ng-container matColumnDef="{{column.property}}">
-                  <ng-container [ngSwitch]="column.type">
-                    <ng-container *ngSwitchCase="'equation-builder'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td"
-                          [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                        <lib-equation-builder
-                          [form]="element"
-                          [field]="column"
-                          [readOnly]="column.readonly"
-                          [isPending]="isPending"
-                          (valueChanged)="handleEquationChange($event, element, column)">
-                        </lib-equation-builder>
-                      </td>
-                    </ng-container>
-
-                    <ng-container *ngSwitchCase="'lookup'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td"
-                          [ngClass]="['mainTable__td__text-secondary__td']"
-                          mat-cell>
-                        <app-auto-complete
-                          [form]="element"
-                          [field]="column"
-                          [defaultValue]="element.get(column.property)?.value"
-                          (selectedValue)="patchLookupValue($event, column.property)">
-                        </app-auto-complete>
-                      </td>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'list'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}</th>
-                      <td  *matCellDef="let element" class="mainTable__td"
-                           [ngClass]="['mainTable__td__text-secondary__td']"
-                           mat-cell>
-                        <mat-label>{{element}}</mat-label>
-                        <mat-select
-                          formControlName="{{column.property}}"
-                          [attr.aria-label]="column.label! | translate"
-                          [multiple]="false"
-                          [(value)]="element[column.property]">
-                          <ng-container>
-                            <mat-option
-                              *ngFor="let item of column.listOptions"
-                              [value]="item">
-                              {{ getOptionValue(item) }}
-                            </mat-option>
-                          </ng-container>
-                        </mat-select>
-                      </td>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'stateType'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
-                        {{ 'action' | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
-                        <div class="flex-column">
-                          <div class="flex-row full-width">
-                            <div class="flex-third flex-column align-center-center">
-                              <button mat-button class="btn-none-background-primary"
-                                      color="primary"
-                                      [disabled]="disabledSaveButton(element)"
-                                      (click)="fieldButtonEvent(column,element,SAVE)"
-                                      [attr.id]="'editable-save-' + (element.value?.id || '')">
-                                {{ getPositiveWfActionKey(element.value.stateType) | translate }}
-                              </button>
-                            </div>
-                            <div class="flex-third flex-column align-center-center">
-                              <button *ngIf="isPending" mat-button class="btn-none-background-primary"
-                                      color="accent"
-                                      (click)="fieldButtonEvent(column,element,REJECT)"
-                                      [attr.id]="'editable-reject-' + (element.value?.id || '')">
-                                {{ getNegativeWfActionKey(element.value.stateType) | translate }}
-                              </button>
-                            </div>
-                            <div class="flex-third flex-column align-center-center"></div>
-                          </div>
-                        </div>
-                      </td>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'year'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td"
-                          [ngClass]="['mainTable__td__text-secondary__td']"
-                          mat-cell>
-                        <mat-form-field class="flex-auto fx-flex-fill" appearance="outline">
-                          <mat-label>{{ labelKey(column) | translate }}</mat-label>
-                          <input matInput
-                                 [disabled]="column.readonly"
-                                 [readonly]="column.readonly"
-                                 [matDatepicker]="picker"
-                                 [formControl]="getField(element, column)"
-                                 [required]="column.required"
-                                 [attr.aria-required]="column.required"
-                                 [attr.aria-labelledby]="'label-' + column.property"
-                                 [attr.aria-describedby]="'error-' + column.property">
-                          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-                          <mat-datepicker #picker startView="multi-year"
-                                          (yearSelected)="setMonthAndYear($event, picker, element,column)"
-                                          panelClass="example-month-picker"></mat-datepicker>
-
-                        </mat-form-field>
-                        <!--                      <mat-form-field class="flex-auto" appearance="outline" fxFlexFill>-->
-                        <!--                        <input matInput [formControl]="getField(element, column)">-->
-                        <!--                      </mat-form-field>-->
-                      </td>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'number'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
-                        {{ labelKey(column) | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td"
-                          [ngClass]="['mainTable__td__text-secondary__td']"
-                          mat-cell>
-                        <mat-form-field class="flex-auto fx-flex-fill" appearance="outline">
-                          <!-- Visually hidden label just to trigger the floating label and asterisk -->
-                          <mat-label>
-                          </mat-label>
-
-                          <input matInput
-                                 type="number"
-                                 [formControl]="getField(element, column)"
-                                 [required]="column.required"
-                                 [readonly]="column.readonly"
-                                 [attr.aria-required]="column.required"
-                                 [attr.aria-labelledby]="'label-' + column.property"
-                                 [attr.aria-describedby]="'error-' + column.property">
-                        </mat-form-field>
-                      </td>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'status'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
-                        {{ labelKey(column) | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td"
-                          [ngClass]="['mainTable__td__text-secondary__td']"
-                          mat-cell>
-                        <mat-checkbox
-                          style="padding-bottom: 14px; padding-top: 14px;"
-                          [formControl]="getField(element, column)"
-                          [required]="column.required"
-                          [attr.aria-required]="column.required"
-                          [attr.aria-labelledby]="'label-' + column.property"
-                          [attr.aria-describedby]="'error-' + column.property"
-                          [style.pointer-events]="column.readonly ? 'none' : 'auto'"
-                          [style.opacity]="column.readonly ? 0.7 : 1"
-                          (click)="column.readonly ? $event.preventDefault() : null">
-                        </mat-checkbox>
-                      </td>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'text'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
-                        {{ labelKey(column) | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td"
-                          [ngClass]="['mainTable__td__text-secondary__td']"
-                          mat-cell>
-                        <mat-form-field class="flex-auto fx-flex-fill" appearance="outline">
-                          <mat-label>
-                            {{ labelKey(column) | translate }}
-                          </mat-label>
-                          <input matInput
-                                 type="text"
-                                 [formControl]="getField(element, column)"
-                                 [required]="column.required"
-                                 [readonly]="column.readonly"
-                                 [attr.aria-required]="column.required"
-                                 [attr.aria-labelledby]="'label-' + column.property"
-                                 [attr.aria-describedby]="'error-' + column.property">
-                        </mat-form-field>
-                      </td>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'date'">
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
-                        {{ labelKey(column) | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td"
-                          [ngClass]="['mainTable__td__text-secondary__td']"
-                          mat-cell>
-                        <mat-form-field class="flex-auto fx-flex-fill" appearance="outline">
-                          <input matInput
-                                 [matDatepicker]="xpicker"
-                                 [formControl]="getField(element, column)"
-                                 [required]="column.required"
-                                 [readonly]="column.readonly"
-                                 [disabled]="column.readonly"
-                                 [attr.aria-required]="column.required"
-                                 [attr.aria-labelledby]="'label-' + column.property"
-                                 [attr.aria-describedby]="'error-' + column.property">
-                          <mat-datepicker-toggle
-                            matSuffix
-                            [for]="xpicker"
-                            [disabled]="column.readonly">
-                          </mat-datepicker-toggle>
-                          <mat-datepicker #xpicker></mat-datepicker>
-                        </mat-form-field>
-                      </td>
-                    </ng-container>
-
-                    <ng-container *ngSwitchDefault>
-                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}
-                      </th>
-                      <td *matCellDef="let element" class="mainTable__td"
-                          [ngClass]="['mainTable__td__text-secondary__td']"
-                          mat-cell>
-                        <mat-form-field class="flex-auto fx-flex-fill" appearance="outline">
-                          <input matInput
-                                 [readonly]="column.readonly"
-                                 [attr.aria-required]="column.required"
-                                 [formControl]="getField(element, column)">
-                        </mat-form-field>
-                      </td>
-                    </ng-container>
-                  </ng-container>
-                </ng-container>
-              </ng-container>
-              <tr *matHeaderRowDef="visibleColumns" mat-header-row></tr>
-              <tr (click)="onSelectItem(row)" (auxclick)="openNewTab(row)"
-                  *matRowDef="let row; columns: visibleColumns  | paginate:config"
-                  [attr.id]="'editable-row-' + (row?.value?.id || row?.value?.key || '')"
-                  mat-row></tr>
-            </table>
-          </form>
-        </div>
-
-        <div *ngIf="noDataFound && !pageInfo.lazyLoadData" class="flex-row dataNotFound">
-          <div class="flex-column flex-full">
-            <span class="dataNotFound__details">
-              <mat-icon class="dataNotFound__details__icon">info</mat-icon>
-              <span>{{ 'dataNotFound' | translate }}</span>
-            </span>
-          </div>
-        </div>
-
-        <div class="flex-row mainTable" *ngIf="!selectedFileFromUploader">
-          <div>
-            <button *ngIf="!isPending && pageInfo.hasAddButton" mat-button color="primary" type="button"
-                    (click)="addNewItem()" id="editable-add-item-btn">
-              <mat-icon>add_box</mat-icon>
-              {{ translationKey | translate }}
-            </button>
-          </div>
-        </div>
-
-        <div class="flex-row flex-wrap align-center-center main-pagination" *ngIf="totalElements > 0">
-          <div class="flex-column flex-full">
-            <app-paginator [currentPage]="pageIndex" [totalItems]="totalElements" [pageSize]="pageSize"
-                           [pageSizeOptions]="[5, 10, 25, 50]" (pageChange)="onPageChange($event)"
-                           (pageSizeChange)="onPageSizeChange($event)"></app-paginator>
-          </div>
-          <div class="flex-column flex-full countItem hide-gt-xs">
-            <span class="countItem__totalElement">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>
-          </div>
-          <div class="flex-column flex-2"></div>
-        </div>
-      </ng-container>
-    </div>
-  </div>
-
-  <div *ngIf="isBulkItemsSupported" class="flex-row gap-10 align-start-start mainTable">
-    <div>
-      <button mat-flat-button color="primary" type="button" (click)="addBulkItems()" [disabled]="shouldDisableBulkAdd()" id="editable-bulk-add-btn">
-        <mat-icon>add_box</mat-icon>
-        {{ 'addAll' | translate }}
-      </button>
-    </div>
-    <div>
-      <button mat-flat-button color="warn" type="button" [disabled]="!hasDataToClear()" (click)="clearBulkItems()" id="editable-bulk-clear-btn">
-        <mat-icon>delete</mat-icon>
-        {{ 'clearAll' | translate }}
-      </button>
-    </div>
-  </div>
-</div>

package/src/lib/components/editable-base-table/editable-base-table.component.scss

@@ -1,126 +0,0 @@
-.baseTable {
-  padding: 20px;
-  //margin-inline: 8px;
-  //width: max-content;
-}
-.example-month-picker .mat-calendar-period-button {
-  pointer-events: none;
-}
-
-.example-month-picker .mat-calendar-arrow {
-  display: none;
-}
-
-.responsive-top-gap {
-  margin-top: 20px;
-}
-
-@media (max-width: 959px) {
-  .responsive-top-gap {
-    margin-top: 1px;
-  }
-  .baseTable {
-    padding: 20px;
-    margin-inline: 8px;
-    width: max-content;
-  }
-
-}
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-half {
-  flex: 0 0 50%;
-}
-
-.flex-80 {
-  flex: 0 0 80%;
-}
-
-.flex-15 {
-  flex: 0 0 15%;
-}
-
-.flex-2 {
-  flex: 0 0 2%;
-}
-
-.flex-full {
-  flex: 0 0 100%;
-}
-
-.align-start-start {
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-.align-start-end {
-  justify-content: flex-end;
-  align-items: flex-start;
-}
-
-.align-center-start {
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.align-center-center {
-  justify-content: center;
-  align-items: center;
-}
-
-.align-end-start {
-  justify-content: flex-start;
-  align-items: flex-end;
-}
-
-.align-end-end {
-  justify-content: flex-end;
-  align-items: flex-end;
-}
-
-.gap-8 {
-  gap: 8px;
-}
-
-.gap-10 {
-  gap: 10px;
-}
-
-.gap-0 {
-  gap: 0px;
-}
-
-@media (max-width: 959px) {
-  .flex-column.lt-md {
-    flex-direction: column;
-  }
-
-  .flex-row.lt-md {
-    flex-direction: row;
-  }
-
-  .flex-full.lt-md {
-    flex: 0 0 100%;
-  }
-
-  .align-center-center.lt-md {
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-@media (max-width: 599px) {
-  .flex-hide.gt-xs {
-    display: none !important;
-  }
-}
-

package/src/lib/components/editable-base-table/editable-base-table.component.spec.ts

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