@tacdaed/fragments 1.0.0-beta.3 → 1.0.0-beta.4

package/src/lib/directives/tooltip/popover.directive.ts

@@ -0,0 +1,274 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  inject,
+  Input,
+  OnDestroy,
+  Renderer2,
+} from '@angular/core';
+import { IConfigTooltipPopover, ITooltipEventAction, ITooltipLinkAction } from './tooltip.interface';
+
+@Directive({
+  selector: '[frgPopover]',
+  standalone: true,
+})
+export class FragmentsPopoverDirective implements OnDestroy {
+  private readonly elemRef: ElementRef = inject(ElementRef);
+  private readonly renderer: Renderer2 = inject(Renderer2);
+  @Input() popoverConfig: IConfigTooltipPopover = {} as IConfigTooltipPopover;
+  popover: HTMLElement | undefined;
+
+  @HostListener('click', ['$event']) onClick(event: MouseEvent) {
+    event.stopPropagation();
+    if (!this.popover) {
+      this.show();
+      return;
+    }
+    this.hide();
+  }
+
+  @HostListener('document:click') onDocumentClick() {
+    this.close();
+  }
+
+  @HostListener('keydown.escape') onEscape() {
+    this.close();
+  }
+
+  ngOnDestroy(): void {
+    this.close();
+  }
+
+  private close() {
+    if (this.popover) {
+      this.hide();
+    }
+  }
+
+  private show() {
+    if (!this.popoverConfig.apply) {
+      return;
+    }
+
+    this.initPopover();
+
+    if (this.popoverConfig?.text) {
+      this.popover = this.renderer.createElement('div');
+      this.renderer.addClass(this.popover, 'frg-popover');
+      this.renderer.setStyle(this.popover, 'text-align', 'left');
+      this.renderer.setAttribute(this.popover, 'role', 'dialog');
+      this.renderer.setAttribute(this.popover, 'tabindex', '-1');
+      this.renderer.setStyle(this.popover, 'position', 'absolute');
+      this.renderer.setStyle(this.popover, 'will-change', 'transform');
+      this.renderer.setStyle(this.popover, 'left', '0');
+      this.renderer.setStyle(this.popover, 'top', '0');
+      this.renderer.setStyle(this.popover, 'z-index', '9999');
+
+      const innerPopover: HTMLElement = this.renderer.createElement('div');
+      this.renderer.addClass(innerPopover, 'frg-popover-inner');
+
+      const textParagraph: HTMLElement = this.renderer.createElement('p');
+      const strongTextParagraph: HTMLElement = this.renderer.createElement('strong');
+
+      this.renderer.appendChild(
+        strongTextParagraph,
+        this.renderer.createText(this.popoverConfig.text)
+      );
+
+      this.renderer.appendChild(textParagraph, strongTextParagraph);
+      this.renderer.appendChild(innerPopover, textParagraph);
+
+      if (this.popoverConfig.textContent) {
+        const contentParagraph: HTMLElement = this.renderer.createElement('p');
+        this.renderer.appendChild(
+          contentParagraph,
+          this.renderer.createText(this.popoverConfig.textContent)
+        );
+        this.renderer.appendChild(innerPopover, contentParagraph);
+      }
+
+      if (this.popoverConfig.buttonConfig?.text) {
+        const actions: HTMLElement = this.renderer.createElement('div');
+        this.renderer.addClass(actions, 'frg-popover-actions');
+
+        const actionButton: HTMLElement = this.renderer.createElement('button');
+        this.renderer.addClass(actionButton, 'frg-popover-button');
+        this.renderer.setAttribute(actionButton, 'type', 'button');
+        this.renderer.appendChild(
+          actionButton,
+          this.renderer.createText(this.popoverConfig.buttonConfig.text)
+        );
+
+        this.renderer.listen(actionButton, 'click', (event: Event) => {
+          event.stopPropagation();
+          this.handleAction();
+        });
+
+        this.renderer.appendChild(actions, actionButton);
+        this.renderer.appendChild(innerPopover, actions);
+      }
+
+      this.renderer.appendChild(this.popover, innerPopover);
+
+      if (!this.popoverConfig.hideIndicator) {
+        const indicator: HTMLElement = this.renderer.createElement('span');
+        this.renderer.addClass(indicator, 'frg-popover-indicator');
+        this.renderer.appendChild(this.popover, indicator);
+      }
+
+      this.renderer.appendChild(document.body, this.popover);
+      this.setPosition();
+    }
+  }
+
+  private hide() {
+    this.renderer.removeChild(document.body, this.popover);
+    this.popover = undefined;
+  }
+
+  private initPopover() {
+    this.popoverConfig.text = this.popoverConfig.text
+      ? this.popoverConfig.text
+      : 'No popover text';
+    this.popoverConfig.position = this.popoverConfig.position
+      ? this.popoverConfig.position
+      : 'top';
+    this.popoverConfig.gap = this.popoverConfig.gap ?? 0;
+    this.popoverConfig.hideIndicator = this.popoverConfig.hideIndicator ?? false;
+    this.popoverConfig.apply = this.popoverConfig.apply ?? true;
+  }
+
+  private handleAction(): void {
+    const action = this.popoverConfig.buttonConfig?.action;
+    if (!action) {
+      return;
+    }
+
+    if ((action as ITooltipLinkAction).link) {
+      const linkAction = action as ITooltipLinkAction;
+      window.open(linkAction.link, linkAction.target || '_self');
+      return;
+    }
+
+    if ((action as ITooltipEventAction).clickEvent) {
+      const eventAction = action as ITooltipEventAction;
+      eventAction.clickEvent(undefined);
+    }
+  }
+
+  private setPosition() {
+    const element = this.elemRef.nativeElement;
+    const rect = element.getBoundingClientRect();
+    const bodyRect = document.body.getBoundingClientRect();
+    const viewportWidth =
+      document.documentElement?.clientWidth || window.innerWidth;
+    const viewportPadding = 8;
+
+    const xOffset = rect.left - bodyRect.left;
+    const yOffset = rect.top - bodyRect.top;
+    const widthOffset = rect.width;
+    const heightOffset = rect.height;
+
+    const p_widthOffset: number = this.popover?.offsetWidth ?? 0;
+    const p_heightOffset: number = this.popover?.offsetHeight ?? 0;
+
+    const clampX = (x: number) =>
+      Math.min(
+        Math.max(x, viewportPadding),
+        viewportWidth - p_widthOffset - viewportPadding
+      );
+
+    const position = (this.popoverConfig.position || 'top')
+      .toLowerCase()
+      .trim()
+      .replaceAll(' ', '-');
+
+    this.renderer.setAttribute(this.popover, 'data-position', position);
+
+    switch (position) {
+      case 'top':
+        this.renderer.setStyle(
+          this.popover,
+          'transform',
+          `translate(${clampX(xOffset + widthOffset / 2 - p_widthOffset / 2)}px, ${
+            yOffset - p_heightOffset - (this.popoverConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'top-left':
+        this.renderer.setStyle(
+          this.popover,
+          'transform',
+          `translate(${clampX(xOffset + (widthOffset - p_widthOffset))}px, ${
+            yOffset - p_heightOffset - (this.popoverConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'top-right':
+        this.renderer.setStyle(
+          this.popover,
+          'transform',
+          `translate(${clampX(xOffset)}px, ${
+            yOffset - p_heightOffset - (this.popoverConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'left':
+        this.renderer.setStyle(
+          this.popover,
+          'transform',
+          `translate(${clampX(
+            xOffset - p_widthOffset - (this.popoverConfig?.gap ?? 0)
+          )}px, ${yOffset + heightOffset / 2 - p_heightOffset / 2}px)`
+        );
+        break;
+
+      case 'right':
+        this.renderer.setStyle(
+          this.popover,
+          'transform',
+          `translate(${clampX(
+            xOffset + widthOffset + (this.popoverConfig?.gap ?? 0)
+          )}px, ${yOffset + heightOffset / 2 - p_heightOffset / 2}px)`
+        );
+        break;
+
+      case 'bottom':
+        this.renderer.setStyle(
+          this.popover,
+          'transform',
+          `translate(${clampX(xOffset + widthOffset / 2 - p_widthOffset / 2)}px, ${
+            yOffset + heightOffset + (this.popoverConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'bottom-left':
+        this.renderer.setStyle(
+          this.popover,
+          'transform',
+          `translate(${clampX(xOffset + (widthOffset - p_widthOffset))}px, ${
+            yOffset + heightOffset + (this.popoverConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'bottom-right':
+        this.renderer.setStyle(
+          this.popover,
+          'transform',
+          `translate(${clampX(xOffset)}px, ${
+            yOffset + heightOffset + (this.popoverConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      default:
+        break;
+    }
+  }
+}

package/src/lib/directives/tooltip/tooltip.directive.spec.ts

@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { FragmentsTooltipDirective } from './tooltip.directive';
+import { IConfigTooltip } from './tooltip.interface';
+
+@Component({
+  standalone: true,
+  imports: [FragmentsTooltipDirective],
+  template: `
+    <span frgTooltip [tooltipConfig]="tooltipConfig">Hover me</span>
+  `
+})
+class TooltipHostComponent {
+  tooltipConfig: IConfigTooltip = {
+    apply: true,
+    text: 'Tooltip text',
+    position: 'top',
+    gap: 8
+  };
+}
+
+describe('FragmentsTooltipDirective', () => {
+  let fixture: ComponentFixture<TooltipHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TooltipHostComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TooltipHostComponent);
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    const tooltip = document.body.querySelector('.frg-tooltip');
+    if (tooltip?.parentElement) {
+      tooltip.parentElement.removeChild(tooltip);
+    }
+    fixture.destroy();
+  });
+
+  it('renders tooltip on mouseenter with indicator by default', () => {
+    const target = fixture.debugElement.query(By.css('span')).nativeElement as HTMLElement;
+    target.dispatchEvent(new Event('mouseenter'));
+    fixture.detectChanges();
+
+    const tooltip = document.body.querySelector('.frg-tooltip') as HTMLElement;
+    expect(tooltip).toBeTruthy();
+    expect(tooltip.querySelector('.frg-tooltip-indicator')).toBeTruthy();
+  });
+
+  it('hides indicator when hideIndicator is true', () => {
+    fixture.componentInstance.tooltipConfig = {
+      apply: true,
+      text: 'Tooltip text',
+      position: 'bottom-right',
+      hideIndicator: true
+    };
+    fixture.detectChanges();
+
+    const target = fixture.debugElement.query(By.css('span')).nativeElement as HTMLElement;
+    target.dispatchEvent(new Event('mouseenter'));
+    fixture.detectChanges();
+
+    const tooltip = document.body.querySelector('.frg-tooltip') as HTMLElement;
+    expect(tooltip).toBeTruthy();
+    expect(tooltip.querySelector('.frg-tooltip-indicator')).toBeFalsy();
+  });
+
+  it('sets data-position based on config', () => {
+    fixture.componentInstance.tooltipConfig = {
+      apply: true,
+      text: 'Tooltip text',
+      position: 'bottom-right'
+    };
+    fixture.detectChanges();
+
+    const target = fixture.debugElement.query(By.css('span')).nativeElement as HTMLElement;
+    target.dispatchEvent(new Event('mouseenter'));
+    fixture.detectChanges();
+
+    const tooltip = document.body.querySelector('.frg-tooltip') as HTMLElement;
+    expect(tooltip.getAttribute('data-position')).toBe('bottom-right');
+  });
+});

package/src/lib/directives/tooltip/tooltip.directive.ts

@@ -0,0 +1,234 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  inject,
+  Input,
+  OnDestroy,
+  Renderer2,
+} from '@angular/core';
+import { IConfigTooltip } from './tooltip.interface';
+
+@Directive({
+  selector: '[frgTooltip]',
+  standalone: true,
+})
+export class FragmentsTooltipDirective implements OnDestroy {
+  private readonly elemRef: ElementRef = inject(ElementRef);
+  private readonly renderer: Renderer2 = inject(Renderer2);
+  @Input() tooltipConfig: IConfigTooltip = {} as IConfigTooltip;
+  tooltip: HTMLElement | undefined;
+
+  @HostListener('mouseenter') onMouseEnter() {
+    if (!this.tooltip && this.tooltipConfig.text) this.show();
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.ngOnDestroy();
+  }
+
+  ngOnDestroy(): void {
+    if (this.tooltip) {
+      this.hide();
+    }
+  }
+
+  private show() {
+    if (this.tooltipConfig.apply === false)
+      return;
+
+    this.initTooltip();
+
+    if (this.tooltipConfig?.text) {
+      this.tooltip = this.renderer.createElement('div');
+      this.renderer.addClass(this.tooltip, 'frg-tooltip');
+      this.renderer.setStyle(this.tooltip, 'text-align', 'left');
+      this.renderer.setAttribute(this.tooltip, 'role', 'tooltip');
+      this.renderer.setAttribute(this.tooltip, 'tabindex', '-1');
+      this.renderer.setStyle(this.tooltip, 'position', 'absolute');
+      this.renderer.setStyle(this.tooltip, 'will-change', 'transform');
+      this.renderer.setStyle(this.tooltip, 'left', '0');
+      this.renderer.setStyle(this.tooltip, 'top', '0');
+      this.renderer.setStyle(this.tooltip, 'z-index', '9999');
+
+      if (this.tooltipConfig.textContent) {
+        const innerTooltip: HTMLElement = this.renderer.createElement('div');
+        this.renderer.addClass(innerTooltip, 'frg-tooltip-inner');
+
+        const textParagraph: HTMLElement = this.renderer.createElement('p');
+        const contentParagraph: HTMLElement = this.renderer.createElement('p');
+        const strongTextParagraph: HTMLElement =
+          this.renderer.createElement('strong');
+
+        this.renderer.appendChild(
+          strongTextParagraph,
+          this.renderer.createText(this.tooltipConfig.text)
+        );
+
+        this.renderer.appendChild(textParagraph, strongTextParagraph);
+
+        this.renderer.appendChild(
+          contentParagraph,
+          this.renderer.createText(this.tooltipConfig.textContent)
+        );
+
+        this.renderer.appendChild(innerTooltip, textParagraph);
+
+        this.renderer.appendChild(innerTooltip, contentParagraph);
+
+        this.renderer.appendChild(this.tooltip, innerTooltip);
+      } else {
+        const innerTooltip: HTMLElement = this.renderer.createElement('strong');
+
+        this.renderer.appendChild(
+          innerTooltip,
+          this.renderer.createText(this.tooltipConfig.text)
+        );
+
+        this.renderer.appendChild(this.tooltip, innerTooltip);
+      }
+
+      if (!this.tooltipConfig.hideIndicator) {
+        const indicator: HTMLElement = this.renderer.createElement('span');
+        this.renderer.addClass(indicator, 'frg-tooltip-indicator');
+        this.renderer.appendChild(this.tooltip, indicator);
+      }
+
+      this.renderer.appendChild(document.body, this.tooltip);
+      this.setPosition();
+    }
+  }
+
+  private hide() {
+    this.renderer.removeChild(this.elemRef, this.tooltip);
+    this.tooltip = undefined;
+  }
+
+  private initTooltip() {
+    this.tooltipConfig.text = this.tooltipConfig.text
+      ? this.tooltipConfig.text
+      : 'No tooltip text';
+    this.tooltipConfig.position = this.tooltipConfig.position
+      ? this.tooltipConfig.position
+      : 'top';
+    this.tooltipConfig.gap = this.tooltipConfig.gap ?? 0;
+    this.tooltipConfig.hideIndicator = this.tooltipConfig.hideIndicator ?? false;
+    this.tooltipConfig.apply = this.tooltipConfig.apply ?? true;
+  }
+
+  private setPosition() {
+    const element = this.elemRef.nativeElement;
+    const rect = element.getBoundingClientRect();
+    const bodyRect = document.body.getBoundingClientRect();
+    const viewportWidth =
+      document.documentElement?.clientWidth || window.innerWidth;
+    const viewportPadding = 8;
+
+    const xOffset = rect.left - bodyRect.left;
+    const yOffset = rect.top - bodyRect.top;
+    const widthOffset = rect.width;
+    const heightOffset = rect.height;
+
+    const t_widthOffset: number = this.tooltip?.offsetWidth ?? 0;
+    const t_heightOffset: number = this.tooltip?.offsetHeight ?? 0;
+
+    const clampX = (x: number) =>
+      Math.min(
+        Math.max(x, viewportPadding),
+        viewportWidth - t_widthOffset - viewportPadding
+      );
+
+    const position = (this.tooltipConfig.position || 'top')
+      .toLowerCase()
+      .trim()
+      .replaceAll(' ', '-');
+
+    this.renderer.setAttribute(this.tooltip, 'data-position', position);
+
+    switch (position) {
+      case 'top':
+        this.renderer.setStyle(
+          this.tooltip,
+          'transform',
+          `translate(${clampX(xOffset + widthOffset / 2 - t_widthOffset / 2)}px, ${
+            yOffset - t_heightOffset - (this.tooltipConfig?.gap ?? 0)
+          }px)`
+        );
+
+        break;
+
+      case 'top-left':
+        this.renderer.setStyle(
+          this.tooltip,
+          'transform',
+          `translate(${clampX(xOffset + (widthOffset - t_widthOffset))}px, ${
+            yOffset - t_heightOffset - (this.tooltipConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'top-right':
+        this.renderer.setStyle(
+          this.tooltip,
+          'transform',
+          `translate(${clampX(xOffset)}px, ${
+            yOffset - t_heightOffset - (this.tooltipConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'left':
+        this.renderer.setStyle(
+          this.tooltip,
+          'transform',
+          `translate(${clampX(
+            xOffset - t_widthOffset - (this.tooltipConfig?.gap ?? 0)
+          )}px, ${yOffset + heightOffset / 2 - t_heightOffset / 2}px)`
+        );
+        break;
+
+      case 'right':
+        this.renderer.setStyle(
+          this.tooltip,
+          'transform',
+          `translate(${clampX(
+            xOffset + widthOffset + (this.tooltipConfig?.gap ?? 0)
+          )}px, ${yOffset + heightOffset / 2 - t_heightOffset / 2}px)`
+        );
+        break;
+
+      case 'bottom':
+        this.renderer.setStyle(
+          this.tooltip,
+          'transform',
+          `translate(${clampX(xOffset + widthOffset / 2 - t_widthOffset / 2)}px, ${
+            yOffset + heightOffset + (this.tooltipConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'bottom-left':
+        this.renderer.setStyle(
+          this.tooltip,
+          'transform',
+          `translate(${clampX(xOffset + (widthOffset - t_widthOffset))}px, ${
+            yOffset + heightOffset + (this.tooltipConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      case 'bottom-right':
+        this.renderer.setStyle(
+          this.tooltip,
+          'transform',
+          `translate(${clampX(xOffset)}px, ${
+            yOffset + heightOffset + (this.tooltipConfig?.gap ?? 0)
+          }px)`
+        );
+        break;
+
+      default:
+        break;
+    }
+  }
+}

package/src/lib/directives/tooltip/tooltip.interface.ts

@@ -0,0 +1,29 @@
+import { GenericFunction, TBehaviourAction } from '../../types/common.types';
+import { TooltipPosition } from './tooltip.type';
+
+export interface ITooltipLinkAction {
+  link: string;
+  target: '_self' | '_blank' | '_parent' | '_top';
+}
+
+export interface ITooltipEventAction<T = any> {
+  clickEvent: GenericFunction<T>;
+}
+
+export interface IConfigTooltip {
+  text: string;
+  textContent?: string;
+  apply?: boolean;
+  hideIndicator?: boolean;
+  position?: TooltipPosition;
+  gap?: number;
+}
+
+export interface IConfigTooltipPopover extends IConfigTooltip {
+  buttonConfig: IConfigTooltipButtton;
+}
+
+export interface IConfigTooltipButtton {
+  text: string;
+  action: TBehaviourAction<ITooltipLinkAction, ITooltipEventAction>;
+}

package/src/lib/directives/tooltip/tooltip.type.ts

@@ -0,0 +1,9 @@
+export type TooltipPosition =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right';

package/src/lib/interfaces/common.interfaces.ts

@@ -0,0 +1,4 @@
+export interface FormatRegex {
+  regex: RegExp;
+  tokens: string[];
+}

package/src/lib/pipes/chunk.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'chunk',
+  pure: true
+})
+export class ChunkPipe implements PipeTransform {
+  transform<T>(array: T[], size: number): T[][] {
+    if (!array || size <= 0) return [];
+    const chunks: T[][] = [];
+    for (let i = 0; i < array.length; i += size) {
+      chunks.push(array.slice(i, i + size));
+    }
+    return chunks;
+  }
+}

package/src/lib/pipes/safe-html.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, inject, type PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHtml',
+  standalone: true,
+})
+export class SafeHtmlPipe implements PipeTransform {
+  private readonly sanitizer = inject(DomSanitizer);
+
+  transform(value: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(value);
+  }
+}

package/src/lib/pipes/sanitize-html.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'sanitizeHtml',
+  standalone: true,
+})
+export class SanitizeHtmlPipe implements PipeTransform {
+  _sanitizer = inject(DomSanitizer);
+
+  transform(v: string | number | null | undefined): SafeHtml {
+    let text: string = '';
+    if (typeof v === 'number') {
+      text = String(v);
+    } else if (v === null || v === undefined) {
+      text = '';
+    } else {
+      text = v.replace(/(?:\r\n|\r|\\n)/g, '<br>');
+    }
+
+    return this._sanitizer.bypassSecurityTrustHtml(text);
+  }
+}