general-library-union 2.3.34 → 2.3.36

package/src/app/core/servicios/utils.service.ts

@@ -0,0 +1,331 @@
+import { Inject, Injectable } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
+import { StorageService } from './storage.service';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UtilsService {
+
+  private RESERVADAS_SQL_NOPUEDECONTENER: any[] = [';']
+  private reservadas: any[] = ['ALTER', 'DELETE', 'DROP', 'MODIFY', 'CREATE', 'DATABASE', 'TABLE', 'UPDATE', 'TRIGGER', 'GRANT', 'REVOKE', 'CALL', 'INSERT', 'TRUNCATE', 'USE', '--']
+
+  constructor(private cookieService: CookieService, @Inject(DOCUMENT) private document: Document){
+  }
+  
+  public generarLlave() {
+    let result = '';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = 32;
+    for (let i = 0; i < charactersLength; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+
+    return result.toLowerCase();
+  }
+
+
+
+  public generarPin(cantidad: number) {
+    let result = '';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < cantidad; i++) {
+      result += characters.charAt(Math.floor(Math.random() * cantidad));
+    }
+
+    return result.toLowerCase();
+  }
+
+  rightpad(str, length, char) {
+    if (str === undefined) {
+      return null;
+    }
+    if (typeof str !== 'string' || typeof length !== 'number') {
+      throw new TypeError('Los argumentos deben ser una cadena y un número.');
+    }
+
+    if (str.length >= length) {
+      return str;
+    }
+
+    char = char || ' '; // Utiliza un espacio como carácter de relleno si no se proporciona uno
+
+    var padLength = length - str.length;
+    var padding = char.repeat(padLength);
+
+    return str + padding;
+  }
+
+  validarCampoNumerico(event: any) {
+    const input = event.target;
+    const regex = /[^0-9]/gi;
+    input.value = input.value.replace(regex, '');
+  }
+
+  isNotBlank(str: string | String | null | undefined): boolean {
+    return str != null && str.trim().length > 0;
+  }
+
+  isBlank(str: string | String | null | undefined): boolean {
+    return str == null || str?.trim() === '';
+  }
+
+  validarCampoObligatorio(valor): boolean {
+    // Verificar si el valor no es null ni undefined
+    if (valor !== null && valor !== undefined) {
+      // Verificar si el valor no es una cadena vacía (en caso de ser una cadena)
+      if (typeof valor === 'string' && valor.trim() === '') {
+        return false;
+      }
+      // Verificar si el valor no es un arreglo vacío (en caso de ser un arreglo)
+      if (Array.isArray(valor) && valor.length === 0) {
+        return false;
+      }
+      /*if (typeof valor === 'object' && Object.keys(valor).length === 0) {
+        return false;
+      }*/
+      return true;
+    }
+    return false;
+  }
+
+  capitalizeFully(inputString: string): string {
+    if (!inputString) {
+      return '';
+    }
+    const words = inputString.split(' ');
+    const capitalizedWords = words.map(word => {
+      if (word.length > 0) {
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+      }
+      return '';
+    });
+    const result = capitalizedWords.join(' ');
+    return result;
+  }
+
+  ordenarSelectItemsAlfabeticamente(arrayDeObjetos: any[]): any[] {
+    arrayDeObjetos.sort((a, b) => {
+      const nombreA = a.label.toLowerCase();
+      const nombreB = b.label.toLowerCase();
+
+      if (nombreA < nombreB) {
+        return -1;
+      }
+      if (nombreA > nombreB) {
+        return 1;
+      }
+      return 0;
+    });
+    return arrayDeObjetos;
+  }
+
+  obtenerParametroDeURL(urlString: string, parametro: string): string | null {
+    const url = new URL(urlString);
+    const searchParams = new URLSearchParams(url.search);
+    return searchParams.get(parametro);
+  }
+
+  validarEmail(email: string): boolean {
+    const patronEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return patronEmail.test(email);
+  }
+
+  obtenerBase(): (string | null) {
+    var basePortal: string = null;
+    var paginaActual: any = window.location.href
+    var url = new URL(paginaActual);
+    var params = new URLSearchParams(url.search);
+    if (paginaActual.toString().includes('PortalSara')) {
+      for (var match of paginaActual.matchAll(/(?<inicio>.*)\/PortalSara\/(?<seguridad>.*)\/(?<sitio>.*)\/(?<pagina>.*)/g)) {
+        basePortal = match.groups?.seguridad;
+      }
+    } else if (params?.get('us_id')) {
+      paginaActual = window.parent.location.href;
+      for (var match of paginaActual.matchAll(/(?<inicio>.*)\/PortalSara\/(?<seguridad>.*)\/(?<sitio>.*)\/(?<pagina>.*)/g)) {
+        basePortal = match.groups?.seguridad;
+      }
+    } else {
+      const regex = /^.*?\/\/.*?\/(.*?)\//g; // Expresión regular para obtener la primera parte de la URL
+      const match = Array.from(paginaActual.matchAll(regex));
+
+      if (match && match[0] && match[0][1]) {
+        basePortal = match[0][1];
+      }
+    }
+    return basePortal;
+  }
+
+  private validarEspacio(caracter: string): boolean {
+    const regex = /\s/; // La expresión regular para espacios en blanco
+    return regex.test(caracter); // Devuelve true si el carácter es un espacio en blanco
+  }
+
+  public validarTextoSQL(valor: string, obligatorio: boolean, select: boolean, longitud: number, validarSentencia: boolean): (string | null) {
+    // Verifica obligatoriedad
+    if (obligatorio && (valor == null || valor.trim().length == 0 || valor == '--')) {
+      return 'Obligatorio';
+    }
+    // Verifica longitud máxima
+    if (longitud > 0) {
+      if (valor != null && valor != '--' && valor.length > longitud) {
+        return 'Longitud maxima de ' + longitud;
+      }
+    }
+    // Realiza las demás validacion solo en el caso de que la cadena SQL/valor no sea vacia
+    if (valor == null || valor.trim().length == 0 || valor == '--')
+      return null;
+
+    if (validarSentencia) {
+      if (select) {
+        if (!valor.toUpperCase().startsWith('SELECT')) {
+          return 'El texto debe iniciar con la palabra Select';
+        }
+      } else {
+        if (valor.toUpperCase().includes('SELECT')) {
+          return 'No puede contener la palabra Select';
+        }
+      }
+    }
+    var indice: number;
+    var mensaje: string;
+    this.RESERVADAS_SQL_NOPUEDECONTENER.forEach(item => {
+      if (valor.includes(item)) {
+        mensaje = 'No puede contener ' + item;
+      }
+    })
+    this.reservadas.forEach(item => {
+      if (valor.toUpperCase().includes(item.toUpperCase())) {
+        indice = (valor.toUpperCase().indexOf(item.toUpperCase()));
+        if (indice == 0 || (this.validarEspacio(valor.charAt(indice - 1)) && this.validarEspacio(valor.charAt(item.length + indice)))) {
+          mensaje = 'No puede contener ' + item;
+        }
+      }
+    })
+    return mensaje;
+  }
+
+  sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  validarTextoArchivoJasper(texto: string): (string | null) {
+    if (texto.trim() == '' || texto == null) {
+      return "El campo no puede estar vacio";
+    }
+    if (texto.match("^[^\\D].*")) {
+      return "El campo no puede iniciar con numeros";
+    }
+    if (texto.match("^[^\\S].*")) {
+      return "El campo no puede iniciar con caracteres en blanco";
+    }
+    if (!texto.match("^[^\\W].*")) {
+      return "El campo no puede iniciar con caracteres especiales";
+    }
+    return null;
+  }
+
+  resizeWindowIFrame() {
+		if ( window.frameElement != null) {
+			this.resizeIframeKeepPosition(window.frameElement);
+		}
+	}
+	
+	/**
+	 * Funcion para mantener la posición actual en el iframe.
+	 * @param obj es un "FrameElement"
+	 */
+	private resizeIframeKeepPosition(obj) {
+		
+		var ifrm = obj;
+		var doc = ifrm.contentDocument ? ifrm.contentDocument: ifrm.contentWindow.document;
+    var tamanio: number=  this.getDocHeight( doc )  + 40
+		ifrm.style.height = tamanio + "px";
+	}
+
+	private getDocHeight(doc){
+	
+		let navegador = this.obtenerNavegador().toLowerCase();
+		var height = 0;
+		doc = doc || document;
+		var body = doc.body, html = doc.documentElement;
+		height = Math.max( body.scrollHeight, body.offsetHeight, 
+		html.clientHeight, html.scrollHeight, html.offsetHeight );
+		
+		if (navegador.indexOf('firefox') !== -1){
+			if(doc.formDetalleConvocatoria){
+				let cantidadMiles = height / 1000;
+				height = height + 600 + (cantidadMiles*40)
+			}
+		}
+		
+	//	console.warn('FCO : llama a getDocHeight');
+	
+		return height;
+	}
+
+	obtenerNavegador(){
+		var ua= navigator.userAgent, tem, 
+		M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+		if(/trident/i.test(M[1])){
+			tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
+			return 'IE '+(tem[1] || '');
+		}
+		if(M[1]=== 'Chrome'){
+			tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
+			if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
+		}
+		M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
+		if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
+		return M.join(' ');
+	}
+
+  obtenerUrlApi(urlapi?: string ): string {
+    if (urlapi){
+      return urlapi;
+    }
+    switch (this.getTokenKey('aplicacion')) {
+      case '1':
+        return window['env']['urlapisara'] ? window['env']['urlapisara'] : this.cookieService.get('urlnucleo');
+      case '13':
+        return window['env']['urlapimana'] ? window['env']['urlapimana'] : this.cookieService.get('urlnucleo');
+      case '10':
+        return window['env']['urlapisara'] ? window['env']['urlapisara'] : this.cookieService.get('urlnucleo');
+        //return window['env']['urlapi'] ? window['env']['urlapi'] : this.cookieService.get('urlnucleo');
+      case '77':
+        return window['env']['urlapimanaaps'] ? window['env']['urlapimanaaps'] : this.cookieService.get('urlnucleo');
+      default:
+        return  this.cookieService.get('urlnucleo');
+    }
+  }
+
+  private getTokenKey(key: string): string {
+    try {
+      const data = this._decodeToken();
+      return data[key].toString();
+    } catch (error) {
+      return undefined;
+    }
+  }
+
+  private _decodeToken(): any {
+    try {
+      const token = this.getItem('token', '');
+      const data = token.split('.')[1];
+      return JSON.parse(atob(data));
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  getItem(key: string, defaultValue?: string): string | undefined {
+    return localStorage.getItem(this.obtenerBase() + '_' +  key) ?? defaultValue;
+  }
+
+  cambiarTema(tema : ('temaClaro' | 'temaOscuro')){
+    localStorage.setItem(this.obtenerBase() + '_' +'tema', tema);
+    let linkTema = this.document.getElementById('temaApp') as HTMLLinkElement;
+    linkTema.href = `${tema}.css`
+  }
+}

package/src/app/core/sharedlib.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  declarations: [
+  ],
+  imports: [
+    ],
+  exports: [
+  ]
+})
+export class SharedLibModule {}

package/src/app/core/utilidades/color.util.ts

@@ -0,0 +1,197 @@
+export class ColorUtil {
+  /**
+   * Define las variables CSS del tema y las agrega al documento.
+   * Se definene 9 colores alternativos más el color principal.
+   * Adicional se agregan las componentes HSL del color para hacer
+   * variaciones personalizadas y ajustar la opacidad.
+   * @param color Color principal del tema
+   */
+  static addPalleteToRoot(color: string): void {
+    const head = (document.head || document.getElementsByTagName('head')[0]) as HTMLHeadElement;
+    const style = document.createElement('style') as HTMLStyleElement;
+    const { hue, saturation, lightness } = this.RGB2HSL(color);
+    const contrast = this.contrastColor(color) === 1 ? '--color-50' : '--color-900';
+
+    const intermediateColors = [50, 75, 85]
+    let index = 0;
+    const css =
+      ':root { ' +
+      this._generatePalette(color)
+        .map((color, position) => {
+          if(index < 100){
+            index = intermediateColors[position] ? intermediateColors[position] : 100;
+          } else {
+            index += 100;
+          }
+          return `--color-${index}: ${color};`;
+        })
+        .join('') +
+      `--color-h: ${hue};` +
+      `--color-s: ${saturation}%;` +
+      `--color-l: ${lightness}%;` +
+      `--color-contrast: var(${contrast});` +
+      '}';
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(css));
+    head.appendChild(style);
+  }
+
+  /**
+   * Mezcla dos colores en proporción a un porcentaje para obtener un
+   * nuevo color.
+   * @param baseColor Color base para mezclar
+   * @param color Color que se quiere mezclar
+   * @param weight Porcentaje que se quiere mezclar. Entre 0 y 1
+   * @returns Color resultante en formato RGB (#AABBCC)
+   */
+  static mix(baseColor: string, color: string, weight: number): string {
+    const newColor = [];
+    baseColor = this._normalizeColor(baseColor);
+    color = this._normalizeColor(color);
+
+    const rgbColorBase = this._getRGBValues(baseColor);
+    const rgbColorAdjust = this._getRGBValues(color);
+
+    ['red', 'green', 'blue'].forEach((part) => {
+      newColor.push(
+        Math.round(rgbColorAdjust[part] + (rgbColorBase[part] - rgbColorAdjust[part]) * weight)
+          .toString(16)
+          .padStart(2, '0')
+      );
+    });
+
+    return '#' + newColor.join('');
+  }
+
+  /**
+   * Aclara un color proporcionalmente.
+   * @param color Color base para modificar
+   * @param percent Porcentaje de blanco que se agrega
+   * @returns Nuevo color más claro
+   */
+  static tint(color: string, percent: number): string {
+    return this.mix('#fff', color, percent);
+  }
+
+  /**
+   * Oscurece un color proporcionalmente.
+   * @param color Color base para modificar
+   * @param percent  Porcentaje de negro que se agrega
+   * @returns Nuevo color más oscuro
+   */
+  static shade(color: string, percent: number): string {
+    return this.mix('#000', color, percent);
+  }
+
+  /**
+   * Transforma un color en RGB a su equivalente en formato HSL
+   * @param color Color en formato RGB
+   * @returns Arreglo de componentes HSL
+   */
+  static RGB2HSL(color: string): { hue: number; saturation: number; lightness: number } {
+    color = this._normalizeColor(color);
+
+    let { red, green, blue } = this._getRGBValues(color);
+    red /= 255;
+    green /= 255;
+    blue /= 255;
+
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+
+    let hue = 0;
+    let saturation = 0;
+    let lightness = (max + min) / 2;
+
+    if (max != min) {
+      const delta = max - min;
+      saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+      switch (max) {
+        case red:
+          hue = (green - blue) / delta + (green < blue ? 6 : 0);
+          break;
+        case green:
+          hue = (blue - red) / delta + 2;
+          break;
+        case blue:
+          hue = (red - green) / delta + 4;
+          break;
+      }
+      hue /= 6;
+    }
+
+    hue = Math.round(hue * 360);
+    saturation = Math.round(saturation * 100);
+    lightness = Math.round(lightness * 100);
+
+    return { hue, saturation, lightness };
+  }
+
+  /**
+   * Retorna 1 (blanco) o 0 (negro) para contrastar el color enviado.
+   * @param color Color del cual se quiere buscar el contraste
+   * @returns Blanco o Negro en RGB
+   */
+  static contrastColor(color: string): number {
+    color = this._normalizeColor(color);
+    const { red, green, blue } = this._getRGBValues(color);
+    return red * 0.299 + green * 0.587 + blue * 0.114 > 186 ? 0 : 1;
+  }
+
+  /**
+   * Valida que la cadena de texto represente un color RGB válido y
+   * retorna las componentes del color en formato de seis caracteres.
+   * @param color Color en formato RGB. Ejemplo: (#000)
+   * @returns String del color sin el simbolo #
+   */
+  private static _normalizeColor(color: string): string {
+    const rgbColor = color.match(/^#([0-9A-F]{3}|[0-9A-F]{6})$/i);
+    if (!rgbColor) {
+      throw new Error(`${color} is not a RGB color.`);
+    }
+
+    const colorParts = rgbColor[1].toLowerCase();
+    if (colorParts.length === 3) {
+      return colorParts.replace(/(.)/g, '$1$1');
+    }
+
+    return colorParts;
+  }
+
+  /**
+   * Transforma un color Hexadecimal a Decimal en sus respectivas
+   * comopnenetes.
+   * @param color Color en Hecadecimal para descomponer
+   * @returns Un objeto {red, green, blue} en decimal
+   */
+  private static _getRGBValues(color: string): { red: number; green: number; blue: number } {
+    const red = parseInt(color.slice(0, 2), 16);
+    const green = parseInt(color.slice(2, 4), 16);
+    const blue = parseInt(color.slice(4, 6), 16);
+    return { red, green, blue };
+  }
+
+  /**
+   * Define una paleta de 10 colores, 5 más claros y 4 más oscuros basados
+   * en el color principal. El color principal será el color medio de la paleta
+   * @param color Color base para definir los demás colores
+   * @returns Arreglo de todos los colores de la paleta
+   */
+  private static _generatePalette(color: string): string[] {
+    const palette = [];
+    for (let i = 0; i < 5; i++) {
+      if(i === 0) {
+        palette.push(this.tint(color, (5 - i) * 0.19));
+        palette.push(this.tint(color, (4.8 - i) * 0.19));
+        palette.push(this.tint(color, (4.55 - i) * 0.19));
+      } else {
+        palette.push(this.tint(color, (5 - i) * 0.19));
+      }
+    }
+    palette.push(color);
+    for (let i = 1; i < 5; i++) {
+      palette.push(this.shade(color, i * 0.15));
+    }
+    return palette;
+  }
+}

package/src/app/layout/api/{menuchangeevent.d.ts → menuchangeevent.ts}

@@ -1,4 +1,4 @@
-export interface MenuChangeEvent {
-    key: string;
-    routeEvent?: boolean;
-}
+export interface MenuChangeEvent {
+    key: string;
+    routeEvent?: boolean;
+}

package/src/app/layout/app.breadcrumb.component.html

@@ -0,0 +1,20 @@
+<div class="layout-breadcrumb-container">
+  <nav class="layout-breadcrumb">
+      <ol>
+          <!-- <li><i class="pi pi-home"></i></li>
+          <ng-template ngFor let-item let-last="last" [ngForOf]="breadcrumbs$ | async">
+              <li><i class="pi pi-angle-right"></i></li>
+              <li><span>{{item.label}}</span></li>
+          </ng-template> -->
+          <p-breadcrumb [model]="items" [home]="home" styleClass="layout-breadcrumb pl-4 py-2"></p-breadcrumb>
+          <div class="layout-breadcrumb-buttons flex align-items-center pr-3">
+            <!-- <button pButton pRipple type="button" icon="pi pi-power-off" class="p-button-rounded p-button-text p-button-plain mr-1"></button> -->
+          </div>
+      </ol>
+  </nav>
+  <!-- <div class="layout-breadcrumb-buttons">
+      <button pButton pRipple type="button" icon="pi pi-cloud-upload" class="p-button-rounded p-button-text p-button-plain"></button>
+      <button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-text p-button-plain"></button>
+      <button pButton pRipple type="button" icon="pi pi-power-off" class="p-button-rounded p-button-text p-button-plain"></button>
+  </div> -->
+</div>

package/src/app/layout/app.breadcrumb.component.ts

@@ -0,0 +1,74 @@
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { MenuService } from '../core/servicios/menu.service';
+import { UtilsService } from '../core/servicios/utils.service';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+
+interface Breadcrumb {
+    label: string;
+    url?: string;
+}
+
+@Component({
+    selector: 'app-breadcrumb',
+    imports: [BreadcrumbModule],
+    standalone: true,
+    templateUrl: './app.breadcrumb.component.html'
+})
+export class AppBreadcrumbComponent implements OnInit, OnDestroy {
+  private subscription = new Subscription();
+  items: MenuItem[] = [];
+  home: MenuItem;
+
+  private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
+  readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
+
+  constructor(
+    private router: Router,
+    private menuService: MenuService,
+    private utilsService: UtilsService,
+    private cd: ChangeDetectorRef // Importando ChangeDetectorRef
+  ) {
+    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+      const root = this.router.routerState.snapshot.root;
+      const breadcrumbs: Breadcrumb[] = [];
+      this.addBreadcrumb(root, [], breadcrumbs);
+      this._breadcrumbs$.next(breadcrumbs);
+      this.cd.detectChanges(); // Marcando para detección de cambios
+    });
+  }
+
+  ngOnInit(): void {
+    this.subscription.add(
+      this.menuService.breadcrumb.subscribe(items => {
+        this.items = items;
+        this.cd.detectChanges(); // Marcando para detección de cambios
+      })
+    );
+    this.home = { icon: 'pi pi-home', routerLink: '/' + this.utilsService.obtenerBase() + '/inicio' };
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
+    const routeUrl = parentUrl.concat(route.url.map(url => url.path));
+    const breadcrumb = route.data['breadcrumb'];
+    const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+
+    if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+      breadcrumbs.push({
+        label: route.data['breadcrumb'],
+        url: '/' + routeUrl.join('/'),
+      });
+    }
+
+    if (route.firstChild) {
+      this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+    }
+  }
+}

package/src/app/layout/app.footer.component.html

@@ -0,0 +1,18 @@
+<div class="layout-footer">
+  <img id="footer-logo" [id]="'logoImg'" [src]=" 'data:image/png;base64,'+ generalPipe.LOGO_FOOTER_1" alt="ultima-footer-logo" />
+  <img id="footer-logo" [id]="'logoName'" [src]=" 'data:image/png;base64,'+ generalPipe.LOGO_FOOTER_2" alt="ultima-footer-logo" />
+  <button
+    pButton
+    pRipple
+    type="button"
+    icon="pi pi-facebook fs-large"
+    class="p-button-rounded p-button-text p-button-plain ml-auto mr-2"
+  ></button>
+  <button
+    pButton
+    pRipple
+    type="button"
+    icon="pi pi-twitter fs-large"
+    class="p-button-rounded p-button-text p-button-plain mr-2"
+  ></button>
+</div>

package/src/app/layout/app.footer.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import { GeneralPipe } from '../webcommon/pipes/general.pipe';
+import { LayoutService } from './service/app.layout.service';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+    selector: 'app-footer',
+    imports: [ButtonModule],
+    standalone: true,
+    templateUrl: './app.footer.component.html'
+})
+export class AppFooterComponent {
+
+    constructor(public layoutService: LayoutService, public generalPipe: GeneralPipe) {}
+}