@lukfel/ng-scaffold 20.0.10

package/src/lib/services/seo.service.ts

@@ -0,0 +1,75 @@
+
+import { DOCUMENT, inject, Injectable } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { SeoConfig } from '../models';
+import { Logger } from './logger.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeoService {
+  private metaTitle = inject(Title);
+  private metaTags = inject(Meta);
+  private document = inject<Document>(DOCUMENT);
+  private logger = inject(Logger);
+
+
+  /**
+   * Pass a configuration to set meta tags such as title, description and image for search results and social media
+   * 
+   * @param seoConfig config that contains all the meta information
+   * 
+   */
+  public setMetaTags(seoConfig: SeoConfig): void {
+    const autoTrim: boolean = seoConfig.autoTrim || false;
+    const title: string = seoConfig.metaPageTitle || '';
+    const description: string = seoConfig.metaPageDescription || '';
+    const imagePath: string = seoConfig.metaImagePath || '';
+    const titleLimit: number = 60;
+    const descriptionLimit: number = 160;
+
+    // Set meta title
+    if (title) {
+      if (autoTrim && title.length > titleLimit) {
+        this.logger.error(`[SeoService] The set meta title is too long. Recommended length is ${titleLimit}. The title will be trimmed.`);
+      }
+      const titleTrim: string = (title.length > titleLimit) ? title.substring(0, titleLimit - 3) + '...' : title;
+      this._setMetaTitle(autoTrim ? titleTrim : title);
+    }
+
+    // Set meta description
+    if (description) {
+      if (autoTrim && description.length > descriptionLimit) {
+        this.logger.error(`[SeoService] The set meta description is too long. Recommended length is ${descriptionLimit}. The description will be trimmed.`);
+      }
+      const descriptionTrim: string = (description.length > descriptionLimit) ? description.substring(0, descriptionLimit - 3) + '...' : description;
+      this._setMetaDescription(autoTrim ? descriptionTrim : description);
+    }
+
+    // Set meta image
+    const host: string = this.document.location.origin;
+    if (imagePath) {
+      this._setMetaImage(`${host}/${imagePath}`);
+    }
+  }
+
+  // Set all meta titles
+  private _setMetaTitle(title: string): void {
+    this.metaTitle.setTitle(title);
+    this.metaTags.updateTag({ property: 'og:title', content: title });
+    this.metaTags.updateTag({ name: 'twitter:title', content: title });
+  }
+
+  // Set all meta descriptions
+  private _setMetaDescription(description: string): void {
+    this.metaTags.updateTag({ name: 'description', content: description });
+    this.metaTags.updateTag({ property: 'og:description', content: description });
+    this.metaTags.updateTag({ name: 'twitter:description', content: description });
+  }
+
+  // Set all meta images
+  private _setMetaImage(image: string): void {
+    this.metaTags.updateTag({ property: 'og:image', content: image });
+    this.metaTags.updateTag({ name: 'twitter:image', content: image });
+  }
+}

package/src/lib/services/snackbar.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { SharedModule } from '../shared/shared.module';
+import { SnackbarService } from './snackbar.service';
+
+describe('SnackbarService', () => {
+  let service: SnackbarService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SharedModule]
+    });
+    service = TestBed.inject(SnackbarService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/snackbar.service.ts

@@ -0,0 +1,38 @@
+import { Injectable, inject } from '@angular/core';
+import { MatSnackBar, MatSnackBarConfig, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
+import { firstValueFrom } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SnackbarService {
+  private snackbar = inject(MatSnackBar);
+
+
+  private readonly SNACKBAR_DURATION: number = 5000;
+  private readonly SNACKBAR_POSITION_HORIZONTAL: MatSnackBarHorizontalPosition = 'center';
+  private readonly SNACKBAR_POSITION_VERTICAL: MatSnackBarVerticalPosition = 'bottom';
+
+  private readonly actionConfig: MatSnackBarConfig = {
+    horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
+    verticalPosition: this.SNACKBAR_POSITION_VERTICAL
+  };
+
+  private readonly defaultConfig: MatSnackBarConfig = {
+    duration: this.SNACKBAR_DURATION,
+    horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
+    verticalPosition: this.SNACKBAR_POSITION_VERTICAL
+  };
+
+  // Opens a snackbar with an action to wait for
+  public openSnackbarWithAction(message: string, action: string, config?: MatSnackBarConfig): Promise<void> {
+    const snackbarRef = this.snackbar.open(message, action, config ? config : this.actionConfig);
+    return firstValueFrom(snackbarRef.onAction());
+  }
+
+  // Opens a generic snackbar with a message
+  public openSnackbar(message: string, config?: MatSnackBarConfig): void {
+    this.snackbar.open(message, '', config ? config : this.defaultConfig);
+  }
+
+}

package/src/lib/services/theme.service.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+  // let mockDocument: any;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      // providers: [
+      //   { provide: DOCUMENT, useValue: mockDocument }
+      // ]
+    });
+    service = TestBed.inject(ThemeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/theme.service.ts

@@ -0,0 +1,71 @@
+
+import { Injectable, DOCUMENT, inject } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { LocalStorageService } from './local-storage.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  private storageService = inject(LocalStorageService);
+  private document = inject<Document>(DOCUMENT);
+
+
+  private readonly THEME_KEY: string = 'THEME';
+
+  private _currentTheme$: BehaviorSubject<string> = new BehaviorSubject<string>('');
+
+  get currentTheme$(): Observable<string> {
+    return this._currentTheme$.asObservable();
+  }
+
+  constructor() {
+              this.loadTheme();
+  }
+
+  /**
+   * Set one of the defined themes by passing its class name
+   *
+   * @param newTheme class name of the theme (pass empty string for default theme)
+   * @param useLocalStorage persist the current theme in the LocalStorage
+   */
+  public setTheme(newTheme: string, useLocalStorage?: boolean): void {
+    const currentTheme: string = this._currentTheme$.value;
+
+    if (newTheme === currentTheme) {
+      return;
+    }
+
+    if (currentTheme) {
+      this.document.body.classList.remove(currentTheme);
+    }
+
+    this._currentTheme$.next(newTheme);
+
+    if (newTheme) {
+      this.document.body.classList.add(newTheme);
+
+      if (useLocalStorage) {
+        this.storageService.setItem(this.THEME_KEY, JSON.stringify(newTheme));
+      }
+    } else {
+      if (useLocalStorage) {
+        this.storageService.removeItem(this.THEME_KEY);
+      }
+    }
+  }
+
+  /**
+   * Loads the current theme stored in the local storage if available
+   *
+   */
+  private loadTheme(): void {
+    const theme: string | null = this.storageService.getItem(this.THEME_KEY);
+
+    if (!theme) {
+      return;
+    }
+
+    this.setTheme(theme.replace(/"/g, ''));
+  }
+}

package/src/lib/shared/components/dialogs/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,24 @@
+@if (config) {
+  @if (config.title) {
+    <h2 mat-dialog-title>{{ config.title }}</h2>
+  }
+
+  <mat-dialog-content>
+    @if (config.message) {
+      <p>{{ config.message }}</p>
+    }
+  </mat-dialog-content>
+
+  <mat-dialog-actions align="end">
+    @if (config.closeLabel) {
+      <button mat-button [mat-dialog-close]="false">
+        {{ config.closeLabel }}
+      </button>
+    }
+    @if (config.confirmLabel) {
+      <button mat-button color="primary" [mat-dialog-close]="true">
+        {{ config.confirmLabel }}
+      </button>
+    }
+  </mat-dialog-actions>
+}

package/src/lib/shared/components/dialogs/confirm-dialog/confirm-dialog.component.spec.ts

@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { By } from '@angular/platform-browser';
+import { SharedModule } from '../../../shared.module';
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ConfirmDialogComponent],
+      imports: [SharedModule],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} }
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the title if provided', () => {
+    component.config = { title: 'Test Title' };
+    fixture.detectChanges();
+    const titleEl = fixture.debugElement.query(By.css('h2'));
+    expect(titleEl.nativeElement.textContent.trim()).toEqual('Test Title');
+  });
+
+  it('should not display the title if not provided', () => {
+    component.config = {};
+    fixture.detectChanges();
+    const titleEl = fixture.debugElement.query(By.css('h2'));
+    expect(titleEl).toBeFalsy();
+  });
+
+  it('should display the message if provided', () => {
+    component.config = { message: 'Test Message' };
+    fixture.detectChanges();
+    const messageEl = fixture.debugElement.query(By.css('mat-dialog-content p'));
+    expect(messageEl.nativeElement.textContent.trim()).toEqual('Test Message');
+  });
+
+  it('should not display the message if not provided', () => {
+    component.config = {};
+    fixture.detectChanges();
+    const messageEl = fixture.debugElement.query(By.css('mat-dialog-content p'));
+    expect(messageEl).toBeFalsy();
+  });
+
+  it('should display the close button label if provided', () => {
+    component.config = { closeLabel: 'Close' };
+    fixture.detectChanges();
+    const closeButtonEl = fixture.debugElement.query(By.css('mat-dialog-actions button:first-child'));
+    expect(closeButtonEl.nativeElement.textContent.trim()).toEqual('Close');
+  });
+
+  it('should not display the close button if not provided', () => {
+    component.config = {};
+    fixture.detectChanges();
+    const closeButtonEl = fixture.debugElement.query(By.css('mat-dialog-actions button:first-child'));
+    expect(closeButtonEl).toBeFalsy();
+  });
+
+  it('should display the confirm button label if provided', () => {
+    component.config = { confirmLabel: 'Confirm' };
+    fixture.detectChanges();
+    const confirmButtonEl = fixture.debugElement.query(By.css('mat-dialog-actions button:last-child'));
+    expect(confirmButtonEl.nativeElement.textContent.trim()).toEqual('Confirm');
+  });
+
+  it('should not display the confirm button if not provided', () => {
+    component.config = {};
+    fixture.detectChanges();
+    const confirmButtonEl = fixture.debugElement.query(By.css('mat-dialog-actions button:last-child'));
+    expect(confirmButtonEl).toBeFalsy();
+  });
+});

package/src/lib/shared/components/dialogs/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ConfirmDialogConfig } from '../../../../models';
+
+@Component({
+    selector: 'lf-confirm-dialog',
+    templateUrl: './confirm-dialog.component.html',
+    styleUrls: ['./confirm-dialog.component.scss'],
+    standalone: false
+})
+export class ConfirmDialogComponent {
+  public config = inject<ConfirmDialogConfig>(MAT_DIALOG_DATA);
+
+}

package/src/lib/shared/components/file-upload/file-upload.component.html

@@ -0,0 +1,21 @@
+<input
+  hidden
+  #file
+  type="file"
+  [accept]="accept"
+  onclick="this.value=null"
+  (change)="selectFile($event)" />
+
+<button
+  mat-flat-button
+  class="lf-button"
+  type="button"
+  [color]="color"
+  [disabled]="disabled"
+  (click)="triggerInput()"
+  [matTooltip]="tooltip">
+  @if (matIcon) {
+    <mat-icon>{{ matIcon }}</mat-icon>
+  }
+  {{ label }}
+</button>

package/src/lib/shared/components/file-upload/file-upload.component.scss

@@ -0,0 +1,5 @@
+@use '../../../../../styles/variables' as *;
+
+.lf-button {
+  width: inherit;
+}

package/src/lib/shared/components/file-upload/file-upload.component.spec.ts

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

package/src/lib/shared/components/file-upload/file-upload.component.ts

@@ -0,0 +1,43 @@
+import { Component, ElementRef, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
+import { Logger } from '../../../services';
+import { SharedModule } from '../../shared.module';
+
+@Component({
+  selector: 'lf-file-upload',
+  templateUrl: './file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss'],
+  standalone: true,
+  imports: [SharedModule]
+})
+export class FileUploadComponent {
+
+  private logger: Logger = inject(Logger);
+
+  @ViewChild('file') public fileElement: ElementRef;
+
+  @Input() public color: 'primary' | 'accent' | 'warn' = 'primary';
+  @Input() public label: string;
+  @Input() public matIcon: string;
+  @Input() public disabled: boolean = false;
+  @Input() public accept: string;
+  @Input() public tooltip: string;
+
+  @Output() public fileChange: EventEmitter<File> = new EventEmitter<File>();
+
+  public selectFile(event: Event): void {
+    const input: HTMLInputElement = event.target as HTMLInputElement;
+
+    if (!input || !input.files) return;
+    const file: File = input.files[0];
+
+    if (!file) return;
+
+    this.logger.log('[FileUploadComponent]', file);
+    this.fileChange.emit(file);
+  }
+
+  public triggerInput(): void {
+    this.fileElement.nativeElement.click();
+  }
+
+}

package/src/lib/shared/components/icon/icon.component.html

@@ -0,0 +1,17 @@
+<!-- mat icon -->
+@if (matIcon) {
+  <mat-icon
+    class="lf-icon"
+    [class.material-icons-outlined]="outlineIcon"
+    [class.lf-icon-align-middle]="alignMiddle">
+    {{ matIcon }}
+  </mat-icon>
+} @else {
+  @if (svgIcon) {
+    <mat-icon
+      class="lf-icon"
+      [svgIcon]="svgIcon"
+      [class.lf-icon-align-middle]="alignMiddle"></mat-icon>
+  }
+}
+<!-- svg icon -->

package/src/lib/shared/components/icon/icon.component.scss

@@ -0,0 +1,9 @@
+@use '../../../../../styles/variables' as *;
+
+:host {
+  display: contents;
+}
+
+.lf-icon-align-middle {
+  vertical-align: bottom;
+}

package/src/lib/shared/components/icon/icon.component.spec.ts

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

package/src/lib/shared/components/icon/icon.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { SharedModule } from '../../shared.module';
+
+@Component({
+  selector: 'lf-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+  standalone: true,
+  imports: [SharedModule]
+})
+export class IconComponent {
+
+  @Input() public matIcon: string;
+  @Input() public svgIcon: string;
+  @Input() public outlineIcon: boolean = false;
+  @Input() public alignMiddle: boolean = false;
+}

package/src/lib/shared/components/input/input.component.html

@@ -0,0 +1,38 @@
+@if (inputConfig) {
+  <mat-form-field class="lf-input" appearance="fill" [class.lf-hide-hint]="!inputConfig.hint">
+    <mat-label>{{ inputConfig.label || "Search" }}</mat-label>
+    @if (inputConfig.hint) {
+      <mat-hint>{{ inputConfig.hint }}</mat-hint>
+    }
+    <input
+      matInput
+      type="text"
+      [(ngModel)]="inputValue"
+      [disabled]="inputConfig.disabled!"
+      (keyup.enter)="inputSubmitted(inputValue)"
+      (ngModelChange)="inputChanged($event)"
+      #input />
+    @if (isMobile) {
+      <button mat-icon-button matPrefix color="accent" (click)="inputPrefixAction()">
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+    }
+    @if (inputValue) {
+      <button class="lf-input-close-button" mat-icon-button matSuffix (click)="clearInput()">
+        <mat-icon>close</mat-icon>
+      </button>
+    }
+    @if (inputConfig.matIconSubmit) {
+      <button
+        mat-icon-button
+        matSuffix
+        color="accent"
+        type="submit"
+        (click)="inputSubmitted(inputValue)">
+        <mat-icon>
+          {{ inputConfig.matIconSubmit }}
+        </mat-icon>
+      </button>
+    }
+  </mat-form-field>
+}

package/src/lib/shared/components/input/input.component.scss

@@ -0,0 +1,31 @@
+@use '../../../../../styles/variables' as *;
+
+.lf-input {
+  width: 100%;
+
+  ::ng-deep .mdc-text-field {
+    border-radius: $border-radius !important;
+  }
+
+  ::ng-deep .mdc-line-ripple {
+    &::after {
+      border-bottom-width: 0 !important;
+    }
+
+    &::before {
+      border-bottom-width: 0 !important;
+    }
+  }
+
+  .lf-input-close-button {
+    color: $color-gray;
+  }
+
+  &.lf-hide-hint{
+    ::ng-deep {
+      .mat-mdc-form-field-subscript-wrapper {
+        display: none !important;
+      }
+    }
+  }
+}

package/src/lib/shared/components/input/input.component.spec.ts

@@ -0,0 +1,62 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SharedModule } from '../../shared.module';
+import { InputComponent } from './input.component';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SharedModule]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set the label to "Search" if no label is provided', () => {
+    const labelElement = fixture.debugElement.query(By.css('mat-label')).nativeElement;
+    expect(labelElement.textContent.trim()).toBe('Search');
+  });
+
+  it('should set the label to the provided value if a label is provided', () => {
+    component.inputConfig.label = 'Test';
+    fixture.detectChanges();
+    const labelElement = fixture.debugElement.query(By.css('mat-label')).nativeElement;
+    expect(labelElement.textContent.trim()).toBe('Test');
+  });
+
+  it('should display the hint if a hint is provided', () => {
+    component.inputConfig.hint = 'Test hint';
+    fixture.detectChanges();
+    const hintElement = fixture.debugElement.query(By.css('mat-hint')).nativeElement;
+    expect(hintElement.textContent.trim()).toBe('Test hint');
+  });
+
+  it('should hide the hint if no hint is provided', () => {
+    const hintElement = fixture.debugElement.query(By.css('mat-hint'));
+    expect(hintElement).toBeFalsy();
+  });
+
+  it('should enable the input if not disabled', () => {
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(inputElement.disabled).toBeFalsy();
+  });
+
+  it('should call inputChanged when input value is changed', () => {
+    spyOn(component, 'inputChanged');
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    inputElement.value = 'test';
+    inputElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    expect(component.inputChanged).toHaveBeenCalledWith('test');
+  });
+});