@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -1,28 +1,27 @@
-<ng-container *ngIf="buttonsAction; else list_Action">
-    <div fxLayout="row" fxLayoutAlign="start start" style="padding: 0 10px">
-        <div fxLayout="column" *ngFor="let action of actions; let i = index" style="padding: 0 10px">
-            <button  [ngClass]="action.isPrimary ? 'btn-background-primary' : 'btn-none-background-primary'"
-                     (click)="getClickedAction(action)"
-                     [style]="'width: auto;border: var(--primary-color-2nd) solid 1px;cursor: pointer'"
-                     class="icon-design"
-                     [disabled]="disabled"
-            >
-                {{ action.label | translate}}
-                <mat-icon *ngIf="action.icon?.length" svgIcon={{action.icon}} class="svgColor"></mat-icon>
-            </button>
-        </div>
-    </div>
-</ng-container>
-
-<ng-template #list_Action>
-    <div *ngIf="listAction?.length > 0">
-        <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()" style="justify-content: center; color: grey">
-            <mat-icon>more_vert</mat-icon>
-        </button>
-        <mat-menu #menu="matMenu">
-            <button mat-menu-item *ngFor="let list_Action of listAction"  (click)="getClickedAction(list_Action)">
-                <span>{{list_Action.label}}</span>
-            </button>
-        </mat-menu>
-    </div>
-</ng-template>
+<ng-container *ngIf="buttonsAction; else list_Action">
+  <div class="action-buttons-container" *ngIf="(actions?.length ? actions : listAction)?.length > 0">
+    <button
+      *ngFor="let action of (actions?.length ? actions : listAction); let i = index"
+      class="action-button"
+      (click)="getClickedAction(action)"
+      [disabled]="disabled"
+      [attr.id]="action.id || ('actions-btn-' + action.label)"
+      [title]="action.label | translate"
+    >
+      <mat-icon *ngIf="action.icon?.length" class="action-icon">{{ action.icon }}</mat-icon>
+    </button>
+  </div>
+</ng-container>
+
+<ng-template #list_Action>
+  <div *ngIf="listAction?.length > 0">
+    <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()" style="justify-content: center; color: grey" id="actions-menu-trigger">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item *ngFor="let list_Action of listAction" (click)="getClickedAction(list_Action)" [attr.id]="list_Action.id || ('actions-menu-item-' + list_Action.label)">
+        <span>{{ list_Action.label | translate }}</span>
+      </button>
+    </mat-menu>
+  </div>
+</ng-template>

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

@@ -1,6 +1,101 @@
-
-.svgColor{
-  fill: transparent !important;
-  stroke: var(--accent-color) !important;
-
-}
+.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 +1,23 @@
-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();
-  });
-});
+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,72 +1,70 @@
-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 "../rejection-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";
-import {FlexModule} from "@angular/flex-layout";
-
-@Component({
-  selector: 'app-button-actions',
-  standalone: true,
-  imports: [
-    MatIcon,
-    MatMenuTrigger,
-    MatIconButton,
-    MatMenu,
-    MatMenuItem,
-    NgIf,
-    NgClass,
-    FlexModule,
-    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);
-    }
-  }
-
-}
+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);
+    }
+  }
+
+}