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

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

@@ -1,274 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,234 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

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

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

@@ -1,16 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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);
-  }
-}