@unifylib/ui-lib 1.1.3 → 1.1.5

package/src/lib/components/snackbar-static/snackbar-static.component.scss

@@ -1,135 +0,0 @@
-.snackbar {
-  position: relative;
-  width: auto;
-  max-width: 100%;
-  box-sizing: border-box;
-  background: #fff;
-  border: 1.5px solid #1c8c7a;
-  border-radius: 10px;
-  padding: 12px 20px;
-  display: flex;
-  flex-direction: column;
-  color: #1c8c7a;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-  --snackbar-icon-size: clamp(16px, 2.4vw, 20px);
-  --snackbar-title-size: clamp(14px, 2.6vw, 16px);
-  --snackbar-subtitle-size: clamp(12px, 2.3vw, 14px);
-
-  .sub-snackbar {
-    display: flex;
-    gap: 10px;
-    align-items: start;
-
-    mat-icon {
-      font-size: var(--snackbar-icon-size);
-      line-height: 1;
-      width: 1em;
-      height: 1em;
-      flex: 0 0 auto;
-    }
-
-    .text-content {
-      display: flex;
-      flex-direction: column;
-      line-height: 24px;
-
-      .title {
-        font-weight: 400;
-        color: inherit;
-        font-family: 'lusail-regular', sans-serif;
-        font-size: var(--snackbar-title-size);
-      }
-
-      .subtitle {
-        font-weight: 400;
-        color: #888;
-        font-family: 'lusail-light', sans-serif;
-        font-size: var(--snackbar-subtitle-size);
-      }
-    }
-  }
-
-  .action {
-    display: flex;
-    justify-content: flex-end;
-
-    .action-btn {
-      font-size: var(--snackbar-title-size);
-      font-weight: 400;
-      border-radius: 8px;
-      min-height: 19px !important;
-      margin: 0 !important;
-      max-width: 100%;
-
-      mat-icon {
-        font-size: var(--snackbar-icon-size);
-      }
-    }
-  }
-}
-
-.snackbar-success {
-  border-color: #0D7D6A;
-  color: #0D7D6A;
-}
-
-.snackbar-error {
-  border-color: #a42b2b;
-  color: #a42b2b;
-}
-
-.snackbar-warning {
-  border-color: #B54708;
-  color: #B54708;
-}
-
-.snackbar-info {
-  border-color: #0d47a1;
-  color: #0d47a1;
-}
-.snackbar-help {
-  border-color: var(--primary-color-3nd);
-  color: var(--primary-color-3nd);
-}
-
-/* Responsive adjustments */
-@media (max-width: 600px) {
-  .snackbar {
-    padding: 10px 14px;
-    /* tighten fluid sizes a bit on small screens */
-    --snackbar-icon-size: clamp(16px, 3.6vw, 18px);
-    --snackbar-title-size: clamp(14px, 3.8vw, 15px);
-    --snackbar-subtitle-size: clamp(12px, 3.4vw, 13px);
-  }
-
-  .snackbar .sub-snackbar {
-    gap: 8px;
-  }
-
-  .snackbar .sub-snackbar .text-content {
-    line-height: 22px;
-  }
-
-  .snackbar .action {
-    margin-top: 8px;
-  }
-
-  .snackbar .action .action-btn {
-    width: 100%;
-    font-size: var(--snackbar-title-size);
-  }
-}
-
-@media (max-width: 360px) {
-  .snackbar {
-    padding: 8px 10px;
-    border-radius: 8px;
-    /* even tighter bounds for very small devices */
-    --snackbar-icon-size: clamp(14px, 4.5vw, 16px);
-    --snackbar-title-size: clamp(13px, 4.6vw, 14px);
-    --snackbar-subtitle-size: clamp(11px, 4.2vw, 12px);
-  }
-}

package/src/lib/components/snackbar-static/snackbar-static.component.ts

@@ -1,26 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatButton, MatIconButton} from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import {NgIf, NgStyle} from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'app-snackbar-static',
-  standalone: true,
-  imports: [MatIcon, NgIf, TranslateModule, MatIconButton, MatButton, NgStyle],
-  templateUrl: './snackbar-static.component.html',
-  styleUrls: ['./snackbar-static.component.scss']
-})
-export class SnackbarStaticComponent {
-  @Input() messageKey = '';
-  @Input() titleKey = '';
-  @Input() params: Record<string, any> = {};
-  @Input() paramsTitle: Record<string, any> = {};
-  @Input() type: 'error' | 'success' | 'warning' | 'info' | 'help'
-  @Output() actionBtn: EventEmitter<void> = new EventEmitter();
-  @Input() width: string = 'auto';
-  @Input() textBtn: string;
-  submit() {
-    this.actionBtn.emit()
-  }
-}

package/src/lib/components/title-bar/title-bar.component.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"title-bar.component.css"}

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

@@ -1,35 +0,0 @@
-<div class="row mainTitleBar gap-20 default-align">
-
-  <div class="column flex-auto textTitle" >
-    <h2 *ngIf="false">
-      <span class="textTitle__titleMode">{{ titleMode | translate }}</span>
-      {{ listTitle | translate }}
-      <span *ngIf="titleCorporateAdmin && isRoot">({{ titleCorporateAdmin }})</span>
-      {{ extraData }}
-    </h2>
-    <span  *ngIf="false" class="textTitle__subTitle">{{ subTitle | translate }}</span>
-  </div>
-
-  <div class="column end-items gap-20">
-    <button mat-flat-button color="primary" style="width: 100px" *ngIf="!hideBackButton" (click)="goBack()" id="title-bar-back-btn">
-      <mat-icon color="second">{{ backIcon }}</mat-icon>
-      <span style="font-weight: bold">{{ 'back' | translate }}</span>
-    </button>
-
-    <div class="row flex-auto gap-20 buttons-wrapper">
-      <button
-        mat-flat-button
-        *ngFor="let btn of buttons"
-        [color]="btn.color || 'primary'"
-        (click)="onButtonClick(btn)"
-        class="btn-background-primary action-btn"
-        [attr.id]="btn.id || ('title-bar-btn-' + (btn.action || btn.label || btn.key))"
-      >
-        <div class="button-text">
-          <mat-icon>{{ btn.icon }}</mat-icon>
-          <span>{{ btn.label | translate }}</span>
-        </div>
-      </button>
-    </div>
-  </div>
-</div>

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

@@ -1,126 +0,0 @@
-/* ===== 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 +0,0 @@
-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,126 +0,0 @@
-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);
-  }
-}