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

package/src/lib/components/morph/blob-moph/blob-moprh.component.ts

@@ -0,0 +1,96 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { animate, svg } from 'animejs';
+import { MorphBase } from '../morph.abstract';
+import { SpinnerComponent } from '../../loader/spinner/spinner.component';
+
+@Component({
+  selector: 'app-blob-morph',
+  templateUrl: './blob-morph.component.html',
+  imports: [SpinnerComponent],
+  styleUrls: ['./blob-morph.component.scss'],
+})
+export class BlobMorphComponent extends MorphBase implements AfterViewInit {
+  @Input() override imageUrl: string | null = null;
+  @Input() override fillColor: string | null = null;
+  @Input() override pathStart: string = this.generateRandomPath();
+  @Input() override pathEnd: string = this.generateRandomPath();
+  @Input() override duration: number = 4000;
+
+  @Output() loadEvent: EventEmitter<void> = new EventEmitter<void>();
+
+  @ViewChild('morphPath', { static: false })
+    morphPathRef!: ElementRef<SVGPathElement>;
+  clipId = `clip-${Math.random().toString(36).substring(2, 10)}`;
+
+  protected isLoaded: boolean = false;
+
+  ngAfterViewInit(): void {
+    const startPath = this.morphPathRef.nativeElement;
+    const endPath = document.getElementById(
+      `morph-path-end-${this.clipId}`
+    ) as SVGPathElement | null;
+
+    if (startPath && endPath) {
+      animate(startPath, {
+        d: svg.morphTo(endPath),
+        direction: 'alternate-reverse',
+        duration: this.duration,
+        ease: 'inOut',
+        loop: true,
+        alternate: true,
+      });
+    } else {
+      console.error('Path elements not found');
+    }
+  }
+
+  protected override generateRandomPath(
+    points = 8,
+    radius = 60,
+    variability = 20
+  ): string {
+    const angleStep = (Math.PI * 2) / points;
+    const coords: { x: number; y: number }[] = [];
+
+    for (let i = 0; i < points; i++) {
+      const angle = i * angleStep;
+      const randRadius = radius + (Math.random() - 0.5) * 2 * variability;
+      const x = Math.cos(angle) * randRadius;
+      const y = Math.sin(angle) * randRadius;
+      coords.push({ x, y });
+    }
+
+    let path = `M${coords[0].x.toFixed(1)},${coords[0].y.toFixed(1)}`;
+
+    for (let i = 0; i < coords.length; i++) {
+      const p0 = coords[i];
+      const p1 = coords[(i + 1) % coords.length];
+      const pPrev = coords[(i - 1 + coords.length) % coords.length];
+      const pNext = coords[(i + 2) % coords.length];
+
+      const control1X = p0.x + (p1.x - pPrev.x) * 0.2;
+      const control1Y = p0.y + (p1.y - pPrev.y) * 0.2;
+
+      const control2X = p1.x - (pNext.x - p0.x) * 0.2;
+      const control2Y = p1.y - (pNext.y - p0.y) * 0.2;
+
+      path += ` C${control1X.toFixed(1)},${control1Y.toFixed(1)} ${control2X.toFixed(1)},${control2Y.toFixed(1)} ${p1.x.toFixed(1)},${p1.y.toFixed(1)}`;
+    }
+
+    path += ' Z';
+    return path;
+  }
+
+  onLoadEvent(): void {
+    this.isLoaded = true;
+    this.loadEvent.emit();
+  }
+}

package/src/lib/components/morph/blob-moph/blob-morph.component.html

@@ -0,0 +1,34 @@
+<div class="blob-container">
+  <svg
+    viewBox="0 0 200 200"
+    xmlns="http://www.w3.org/2000/svg"
+    class="blob-svg"
+    [class.hidden]="!isLoaded"
+  >
+    <defs>
+      <clipPath [attr.id]="clipId" transform="translate(100 100)">
+        <path #morphPath [attr.d]="pathStart" />
+      </clipPath>
+      <path [attr.id]="'morph-path-end-' + clipId" [attr.d]="pathEnd" />
+    </defs>
+
+    @if (imageUrl) {
+      <image
+        [attr.href]="imageUrl"
+        width="100%"
+        height="100%"
+        preserveAspectRatio="xMidYMid slice"
+        [attr.clip-path]="'url(#' + clipId + ')'"
+        (load)="onLoadEvent()"
+      />
+    } @else {
+      <g [attr.clip-path]="'url(#' + clipId + ')'">
+        <rect width="100%" height="100%" [attr.fill]="fillColor || '#ccc'" />
+      </g>
+    }
+  </svg>
+
+  @if (!isLoaded) {
+    <frg-spinner [isOverlayItem]="true"></frg-spinner>
+  }
+</div>

package/src/lib/components/morph/blob-moph/blob-morph.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  .blob-container {
+    position: relative;
+  }
+}

package/src/lib/components/morph/morph.abstract.ts

@@ -0,0 +1,13 @@
+export abstract class MorphBase {
+  protected imageUrl: string | null = null;
+  protected fillColor: string | null = null;
+  protected pathStart: string = '';
+  protected pathEnd: string = '';
+  protected duration: number = 4000;
+
+  protected abstract generateRandomPath(
+    points: number,
+    radius: number,
+    variability: number
+  ): string;
+}

package/src/lib/components/pagination/pagination.interface.ts

@@ -0,0 +1,4 @@
+export interface IPaginationOutput<T> {
+  page: number;
+  pagedData: T[];
+}

package/src/lib/components/pagination/small-pagination/small-pagination.component.html

@@ -0,0 +1,61 @@
+@if (totalItems > pageSize) {
+  <nav
+    class="frg-pagination-small"
+    aria-label="Paginazione nome lista"
+    [ngClass]="{
+      'frg-pagination-small__primary': styleType === 'primary',
+      'frg-pagination-small__secondary': styleType === 'secondary',
+      'frg-pagination-small__tertiary': styleType === 'tertiary',
+      'frg-pagination-small__dark': styleType === 'dark',
+      'frg-pagination-small__light': styleType === 'light'
+    }"
+  >
+    <ul class="frg-pagination-small__list">
+      <li class="frg-pagination-small__paging frg-pagination-small__prev">
+        <a
+          href="javascript:void(0);"
+          [class.disabled]="page === 1"
+          (click)="changePage(page - 1)"
+        >
+          <span class="visually-hidden">Pagina precedente</span>
+          <span class="fas fa-angle-left" aria-hidden="true"></span>
+        </a>
+      </li>
+      @for (pageNum of pagesArray; track pageNum; let i = $index) {
+        @if (showStartEllipsis && i === 1) {
+          <li class="frg-pagination-small__paging frg-pagination-small__ellipsis">
+            <span class="ellipsis">...</span>
+          </li>
+        }
+        <li
+          class="frg-pagination-small__paging frg-pagination-small__page-number"
+        >
+          <a
+            href="javascript:void(0);"
+            [attr.aria-current]="page === pageNum ? 'page' : null"
+            (click)="changePage(pageNum)"
+          >
+            <span class="visually-hidden">Pagina</span>
+            {{ pageNum }}
+          </a>
+        </li>
+        @if (showEndEllipsis && i === pagesArray.length - 2) {
+          <li class="frg-pagination-small__paging frg-pagination-small__ellipsis">
+            <span class="ellipsis">...</span>
+          </li>
+        }
+      }
+
+      <li class="frg-pagination-small__paging frg-pagination-small__next">
+        <a
+          href="javascript:void(0);"
+          [class.disabled]="page === totalPages"
+          (click)="changePage(page + 1)"
+        >
+          <span class="visually-hidden">Pagina successiva</span>
+          <span class="fas fa-angle-right" aria-hidden="true"></span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+}

package/src/lib/components/pagination/small-pagination/small-pagination.component.scss

@@ -0,0 +1,187 @@
+@use "sass:color";
+@use './../../../../../assets/styles/scss/variables' as *;
+
+.frg-pagination-small {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 12px 0;
+  gap: 0.2rem;
+
+  &__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    li:first-child {
+      margin-right: 0.5rem;
+    }
+
+    li:last-child {
+      margin-left: 0.5rem;
+    }
+  }
+
+  & a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 999px;
+    min-width: 1.9rem;
+    height: 1.9rem;
+    font-weight: 500;
+    border: 1px solid transparent;
+    text-decoration: none;
+    text-align: center;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+    cursor: pointer;
+    background-color: transparent;
+    color: $color-dark-soft;
+
+    &.disabled {
+      cursor: default;
+      color: $color-disabled;
+      background-color: transparent;
+    }
+
+    &:focus-visible {
+      outline: 2px solid color.scale($color-primary, $lightness: 35%);
+      outline-offset: 2px;
+    }
+  }
+
+  &__primary {
+    a {
+      margin: 0 2px;
+
+      &[aria-current='page'] {
+        background-color: $color-primary;
+        color: $color-light;
+        border-color: transparent;
+        pointer-events: none;
+      }
+
+      &:hover:not([aria-current='page']) {
+        background-color: color.scale($color-primary, $lightness: 40%);
+        color: $color-light;
+      }
+
+      &.disabled {
+        &:hover {
+          background-color: #f1f2f5;
+          color: $color-disabled;
+        }
+      }
+    }
+  }
+
+  &__secondary {
+    a {
+      margin: 0 2px;
+
+      &[aria-current='page'] {
+        background-color: $color-secondary;
+        color: $color-light;
+        border-color: transparent;
+        pointer-events: none;
+      }
+
+      &:hover:not([aria-current='page']) {
+        background-color: color.scale($color-secondary, $lightness: 40%);
+        color: $color-light;
+      }
+
+      &.disabled {
+        &:hover {
+          background-color: #f1f2f5;
+          color: $color-disabled;
+        }
+      }
+    }
+  }
+
+  &__tertiary {
+    a {
+      margin: 0 2px;
+
+      &[aria-current='page'] {
+        background-color: $color-tertiary;
+        color: $color-light;
+        border-color: transparent;
+        pointer-events: none;
+      }
+
+      &:hover:not([aria-current='page']) {
+        background-color: color.scale($color-tertiary, $lightness: 40%);
+        color: $color-light;
+      }
+
+      &.disabled {
+        &:hover {
+          background-color: #f1f2f5;
+          color: $color-disabled;
+        }
+      }
+    }
+  }
+
+  &__dark {
+    a {
+      margin: 0 2px;
+      background-color: $color-light;
+      border: 1px solid rgba($color-light, 0.12);
+      color: $color-dark-soft;
+
+      &[aria-current='page'] {
+        background-color: rgba($color-dark, 0.9);
+        border-color: rgba($color-dark, 0.85);
+        color: $color-light-soft;
+        pointer-events: none;
+      }
+
+      &:hover:not([aria-current='page']) {
+        background-color: color.scale($color-dark-neutral, $lightness: 45%);
+        color: $color-light;
+      }
+
+      &.disabled {
+        border-color: rgba($color-light, 0.08);
+        color: $color-disabled;
+
+        &:hover {
+          background-color: $color-dark-neutral;
+        }
+      }
+    }
+  }
+
+  &__light {
+    a {
+      margin: 0 2px;
+      color: $color-light-neutral;
+
+      &[aria-current='page'] {
+        background-color: $color-light;
+        color: $color-dark-neutral;
+        pointer-events: none;
+      }
+
+      &:hover:not([aria-current='page']) {
+        background-color: $color-light-soft;
+        color: $color-dark-neutral;
+      }
+
+      &.disabled {
+        color: $color-dark-soft;
+        &:hover {
+          background-color: transparent;
+          color: $color-dark-soft;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}

package/src/lib/components/pagination/small-pagination/small-pagination.component.spec.ts

@@ -0,0 +1,88 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SmallPaginationComponent } from './small-pagination.component';
+import { IPaginationOutput } from '../pagination.interface';
+
+type DemoItem = { id: number };
+
+describe('SmallPaginationComponent', () => {
+  let fixture: ComponentFixture<SmallPaginationComponent<DemoItem>>;
+  let component: SmallPaginationComponent<DemoItem>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SmallPaginationComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SmallPaginationComponent<DemoItem>);
+    component = fixture.componentInstance;
+  });
+
+  it('builds simple pages when ellipsis disabled', () => {
+    component.totalItems = 20;
+    component.pageSize = 5;
+    component.fullData = Array.from({ length: 20 }, (_, i) => ({ id: i + 1 }));
+    component.hasElipsisPages = false;
+
+    fixture.detectChanges();
+
+    expect(component.pagesArray).toEqual([1, 2, 3, 4]);
+    expect(component.showStartEllipsis).toBeFalse();
+    expect(component.showEndEllipsis).toBeFalse();
+  });
+
+  it('builds ellipsis pages for large datasets', () => {
+    component.totalItems = 48;
+    component.pageSize = 4;
+    component.fullData = Array.from({ length: 48 }, (_, i) => ({ id: i + 1 }));
+    component.page = 3;
+    component.hasElipsisPages = true;
+
+    fixture.detectChanges();
+
+    expect(component.pagesArray).toEqual([1, 2, 3, 4, 12]);
+    expect(component.showStartEllipsis).toBeFalse();
+    expect(component.showEndEllipsis).toBeTrue();
+  });
+
+  it('emits pageChange with paged data', () => {
+    const emitSpy = spyOn(component.pageChange, 'emit');
+
+    component.totalItems = 10;
+    component.pageSize = 2;
+    component.fullData = Array.from({ length: 10 }, (_, i) => ({ id: i + 1 }));
+
+    fixture.detectChanges();
+
+    component.changePage(2);
+
+    const expected: IPaginationOutput<DemoItem> = {
+      page: 2,
+      pagedData: [{ id: 3 }, { id: 4 }]
+    };
+
+    expect(emitSpy).toHaveBeenCalledWith(expected);
+  });
+
+  it('clamps page to 1 on init', () => {
+    component.totalItems = 5;
+    component.pageSize = 5;
+    component.fullData = [{ id: 1 }];
+    component.page = 0;
+
+    fixture.detectChanges();
+
+    expect(component.page).toBe(1);
+  });
+
+  it('does not render pagination when only one page', () => {
+    component.totalItems = 4;
+    component.pageSize = 4;
+    component.fullData = Array.from({ length: 4 }, (_, i) => ({ id: i + 1 }));
+
+    fixture.detectChanges();
+
+    const nav = fixture.debugElement.query(By.css('nav'));
+    expect(nav).toBeNull();
+  });
+});

package/src/lib/components/pagination/small-pagination/small-pagination.component.ts

@@ -0,0 +1,177 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { TBaseStyle } from '../../../types/base.types';
+import { IPaginationOutput } from '../pagination.interface';
+
+@Component({
+  selector: 'frg-small-pagination',
+  imports: [CommonModule],
+  templateUrl: './small-pagination.component.html',
+  styleUrls: ['./small-pagination.component.scss']
+})
+export class SmallPaginationComponent<T> implements OnInit, OnChanges {
+  @Input() totalItems = 0;
+  @Input() fullData = [] as T[];
+  @Input() page = 0;
+  @Input() pageSize = 0;
+  @Input() hasElipsisPages = false;
+  @Input() styleType: TBaseStyle = 'primary';
+
+  @Output() pageChange = new EventEmitter<IPaginationOutput<T>>();
+
+  pagesArray: number[] = [];
+  pagedData: T[] = [];
+  totalPages = 0;
+  showStartEllipsis = false;
+  showEndEllipsis = false;
+  maxVisiblePages = 4;
+
+  ngOnInit() {
+    this.calculateTotalPages();
+    this.setCurrentPage();
+    this.generatePagesArray();
+    this.changePage(this.page);
+  }
+
+  ngOnChanges() {
+    this.calculateTotalPages();
+    this.setCurrentPage();
+    this.generatePagesArray();
+    this.changePage(this.page);
+  }
+
+  private calculateTotalPages() {
+    this.totalPages = Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  private generatePagesArray() {
+    this.pagesArray = [];
+
+    if (this.totalPages <= 0) {
+      this.resetEllipsis();
+      return;
+    }
+
+    const currentPage = this.clampPage(this.page);
+
+    if (!this.hasElipsisPages || this.isSimplePagination()) {
+      this.buildSimplePages();
+      return;
+    }
+
+    this.buildEllipsisPages(currentPage);
+  }
+
+  private buildSimplePages() {
+    this.pagesArray = this.range(1, this.totalPages);
+    this.resetEllipsis();
+  }
+
+  private buildEllipsisPages(currentPage: number) {
+    const startPage = 1;
+    const endPage = this.totalPages;
+    const visibleMiddle = this.getVisibleMiddleCount();
+
+    if (visibleMiddle === 0) {
+      this.pagesArray = endPage === 1 ? [startPage] : [startPage, endPage];
+      this.showStartEllipsis = currentPage > startPage + 1;
+      this.showEndEllipsis = currentPage < endPage - 1;
+      return;
+    }
+
+    const { middleStart, middleEnd } = this.getMiddleRange(
+      currentPage,
+      visibleMiddle,
+      startPage,
+      endPage
+    );
+
+    const pagesToAdd = [
+      startPage,
+      ...this.range(middleStart, middleEnd),
+      endPage,
+    ];
+
+    this.pagesArray = this.uniquePages(pagesToAdd);
+    this.showStartEllipsis = middleStart > startPage + 1;
+    this.showEndEllipsis = middleEnd < endPage - 1;
+  }
+
+  private getVisibleMiddleCount(): number {
+    return Math.max(this.maxVisiblePages - 1, 0);
+  }
+
+  private getMiddleRange(
+    currentPage: number,
+    visibleMiddle: number,
+    startPage: number,
+    endPage: number
+  ): { middleStart: number; middleEnd: number } {
+    let middleStart = currentPage - Math.floor(visibleMiddle / 2);
+    let middleEnd = middleStart + visibleMiddle - 1;
+
+    if (middleStart < startPage + 1) {
+      middleStart = startPage + 1;
+      middleEnd = middleStart + visibleMiddle - 1;
+    }
+
+    if (middleEnd > endPage - 1) {
+      middleEnd = endPage - 1;
+      middleStart = Math.max(startPage + 1, middleEnd - visibleMiddle + 1);
+    }
+
+    return { middleStart, middleEnd };
+  }
+
+  private uniquePages(pages: number[]): number[] {
+    return pages.filter((value, index, array) => array.indexOf(value) === index);
+  }
+
+  private resetEllipsis() {
+    this.showStartEllipsis = false;
+    this.showEndEllipsis = false;
+  }
+
+  private clampPage(page: number): number {
+    return Math.min(Math.max(page, 1), this.totalPages);
+  }
+
+  changePage(newPage: number) {
+    if (newPage >= 1 && newPage <= this.totalPages) {
+      this.page = newPage;
+      const startIndex = (this.page - 1) * this.pageSize;
+      const endIndex = startIndex + this.pageSize;
+      const pagedData = this.fullData.slice(startIndex, endIndex);
+      this.pagedData = pagedData;
+      this.pageChange.emit({
+        page: this.page,
+        pagedData: this.pagedData,
+      });
+      this.generatePagesArray();
+    }
+  }
+
+  setCurrentPage() {
+    this.page = Math.max(this.page, 1);
+  }
+
+  private isSimplePagination(): boolean {
+    return (
+      !!this.maxVisiblePages &&
+      (this.totalPages <= this.maxVisiblePages || this.maxVisiblePages <= 2)
+    );
+  }
+
+  private range(start: number, end: number): number[] {
+    const result = [];
+    for (let i = start; i <= end; i++) result.push(i);
+    return result;
+  }
+}