@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -1,23 +1,126 @@
-.mainTitleBar {
-  width: 100%;
-padding: 0 20px;
-  .textTitle {
-    width: 100%;
-    &__titleMode {
-      font-style: italic;
-      font-weight: 200;
-      color: grey;
-    }
-  }
-
-  .actionButton {
-    width: 100%;
-
-    &__expand {
-      font-size: 20px !important;
-      color: var(--accent-color);
-      margin-top: 5px
-    }
-  }
-
-}
+/* ===== Main Title Bar ===== */
+.mainTitleBar {
+  display: flex;
+  width: 100%;
+  gap: 20px;
+  align-items: center;
+  justify-content: flex-start;
+
+  &.row {
+    flex-direction: row;
+  }
+
+  &.column {
+    flex-direction: column;
+  }
+
+  .textTitle {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+
+    h2 {
+      margin: 0;
+      padding: 0;
+      line-height: 1.2;
+    }
+
+    &__titleMode {
+      font-weight: 200;
+      color: grey;
+    }
+
+    &__subTitle {
+      color: #222;
+      font-size: 14px;
+      font-weight: 300;
+      font-style: normal;
+    }
+  }
+
+  .end-items {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 20px;
+  }
+
+  .buttons-wrapper {
+    display: inline-block;
+    text-align-last: end;
+    .action-btn {
+      width: 210px !important;
+    }
+  }
+
+  .actionButton {
+    width: 100%;
+
+    &__expand {
+      font-size: 20px !important;
+      color: var(--accent-color);
+      margin-top: 5px;
+    }
+  }
+}
+
+/* ===== Flex Helpers ===== */
+.row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+}
+
+.fx-flex-fill {
+  width: 100%;
+  height: 100%;
+  flex: 1 1 auto;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.end-items {
+  align-items: flex-end;
+}
+
+.gap-20 {
+  gap: 20px;
+}
+
+/* ===== Responsive Adjustments ===== */
+@media (max-width: 960px) {
+  .mainTitleBar.row.default-align {
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 768px) {
+  .mainTitleBar.row,
+  .mainTitleBar.column {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+
+  .end-items {
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 600px) {
+  .gap-20 {
+    gap: 10px;
+  }
+}

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

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

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

@@ -1,119 +1,126 @@
-import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
-import {Location, NgForOf, NgIf} from "@angular/common";
-import {MatIconModule} from "@angular/material/icon";
-import {MatButton} from "@angular/material/button";
-import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {TranslateModule} from "@ngx-translate/core";
-import {Directionality} from "@angular/cdk/bidi";
-
-@Component({
-  selector: 'app-title-bar',
-  standalone: true,
-  imports: [
-    NgIf,
-    MatIconModule,
-    MatButton,
-    MatMenuItem,
-    MatMenu,
-    NgForOf,
-    MatMenuTrigger,
-    FlexLayoutModule,
-    TranslateModule,
-
-  ],
-  templateUrl: './title-bar.component.html',
-  styleUrls: ['./title-bar.component.css', 'title-bar.component.scss']
-})
-export class TitleBarComponent implements OnInit, OnChanges {
-  @Input()
-  pageTitle: string = "";
-
-  @Input()
-  showExtractButton: boolean = false;
-
-  @Input()
-  totalElements?: number;
-
-  @Input()
-  titleMode: string = '';
-
-  @Input()
-  statusDesc?: string;
-
-  @Input()
-  newAction: boolean = false;
-
-
-  @Input() // @ts-ignore
-  extraButton: string;
-
-
-  @Input()
-  showDetails: any = [];
-
-  @Input()
-  showImport = false;
-
-  @Input()
-  showButton = false;
-
-  @Output()
-  newActionClicked = new EventEmitter();
-
-  @Output()
-  extraButtonClicked = new EventEmitter();
-
-
-  @Output()
-  extractReport = new EventEmitter();
-
-  @Input()
-  extraData = '';
-
-  listTitle = '';
-  newButton = '';
-
-  @Input()
-  titleCorporateAdmin: string = '';
-
-  isRoot: boolean = false;
-  @Input()
-  hideBackButton: boolean = true;
-
-  constructor(private location:Location,
-              private dir: Directionality) {
-  }
-
-  ngOnInit(): void {
-    this.listTitle = this.pageTitle;
-    this.newButton = this.extraButton;
-    // this.isRoot = this.authService.isRootOrg();
-    this.isRoot = false;
-  }
-  get backIcon(): string {
-    return this.dir.value === 'rtl' ? 'arrow_back' : 'arrow_forward';
-  }
-
-  publishEvent() {
-    this.newActionClicked.emit(true);
-  }
-
-
-  doExtractReport(value: any) {
-    this.extractReport.emit(value);
-  }
-  publishExtraButtonEvent() {
-    this.extraButtonClicked.emit(true);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes["pageTitle"] && !changes["pageTitle"].isFirstChange() ) {
-      this.listTitle = this.pageTitle;
-    }
-  }
-
-  goBack() {
-    this.location.back()
-  }
-}
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+import {Location, NgForOf, NgIf} from "@angular/common";
+import {MatIconModule} from "@angular/material/icon";
+import {MatButton} from "@angular/material/button";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {TranslateModule} from "@ngx-translate/core";
+import {Directionality} from "@angular/cdk/bidi";
+import {ButtonActionSettings} from "../../base-model";
+
+@Component({
+  selector: 'app-title-bar',
+  standalone: true,
+  imports: [
+    NgIf,
+    MatIconModule,
+    MatButton,
+    MatMenuItem,
+    MatMenu,
+    NgForOf,
+    MatMenuTrigger,
+    TranslateModule,
+
+  ],
+  templateUrl: './title-bar.component.html',
+  styleUrls: ['./title-bar.component.css', 'title-bar.component.scss']
+})
+export class TitleBarComponent implements OnInit, OnChanges {
+  @Input()
+  pageTitle: string = "";
+
+  @Input()
+  showExtractButton: boolean = false;
+
+  @Input()
+  totalElements?: number;
+
+  @Input()
+  titleMode: string = '';
+  @Input()
+  subTitle: string = '';
+
+  @Input()
+  statusDesc?: string;
+
+  @Input()
+  newAction: boolean = false;
+
+
+  @Input() // @ts-ignore
+  extraButton: string;
+
+
+  @Input()
+  showDetails: any = [];
+
+  @Input()
+  showImport = false;
+
+  @Input()
+  showButton = false;
+
+  @Output()
+  newActionClicked = new EventEmitter();
+
+  @Output()
+  extraButtonClicked = new EventEmitter();
+
+
+  @Output()
+  extractReport = new EventEmitter();
+
+  @Input()
+  extraData = '';
+
+  listTitle = '';
+  newButton = '';
+
+  @Input()
+  titleCorporateAdmin: string = '';
+
+  isRoot: boolean = false;
+  @Input()
+  hideBackButton: boolean = true;
+
+  @Input() buttons: ButtonActionSettings[] = [];
+  @Output() buttonClicked = new EventEmitter<ButtonActionSettings>();
+  constructor(private location:Location,
+              private dir: Directionality) {
+  }
+
+  ngOnInit(): void {
+    this.listTitle = this.pageTitle;
+    this.newButton = this.extraButton;
+    // this.isRoot = this.authService.isRootOrg();
+    this.isRoot = false;
+  }
+  get backIcon(): string {
+    return this.dir.value === 'rtl' ? 'arrow_back' : 'arrow_forward';
+  }
+
+  publishEvent() {
+    this.newActionClicked.emit(true);
+  }
+
+
+  doExtractReport(value: any) {
+    this.extractReport.emit(value);
+  }
+  publishExtraButtonEvent() {
+    this.extraButtonClicked.emit(true);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["pageTitle"] && !changes["pageTitle"].isFirstChange() ) {
+      this.listTitle = this.pageTitle;
+    }
+  }
+
+  goBack() {
+    this.location.back()
+  }
+
+  onButtonClick(btn: ButtonActionSettings) {
+    this.buttonClicked.emit(btn);
+  }
+}