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

package/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,103 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router';
+import { filter, Subject, takeUntil } from 'rxjs';
+import { BreadcrumbItem } from './breadcrumb.interface';
+import { TBaseStyle } from '../../types/base.types';
+
+@Component({
+  selector: 'frg-breadcrumb',
+  imports: [CommonModule, RouterLink],
+  templateUrl: './breadcrumb.component.html',
+  styleUrl: './breadcrumb.component.scss',
+})
+export class BreadcrumbComponent implements OnInit, OnDestroy {
+  private readonly router: Router = inject(Router);
+  private readonly activatedRoute: ActivatedRoute = inject(ActivatedRoute);
+  /**
+   * Breadcrumb items to render.
+   */
+  @Input() items: BreadcrumbItem[] = [];
+  /**
+   * Build breadcrumbs automatically from the current route tree.
+   */
+  @Input() auto: boolean = false;
+  /**
+   * Separator displayed between breadcrumb items.
+   */
+  @Input() separator: string = '/';
+  /**
+   * Color theme for breadcrumb text.
+   */
+  @Input() styleType: TBaseStyle = 'default';
+
+  protected autoItems: BreadcrumbItem[] = [];
+  private readonly destroy$ = new Subject<void>();
+
+  public ngOnInit(): void {
+    if (this.auto) {
+      this.buildAutoItems();
+      this.router.events
+        .pipe(filter(event => event instanceof NavigationEnd), takeUntil(this.destroy$))
+        .subscribe(() => this.buildAutoItems());
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public get breadcrumbItems(): BreadcrumbItem[] {
+    const items = this.auto ? this.autoItems : this.items;
+    if (!items.length) return [];
+
+    return items.map((item, index) => ({
+      ...item,
+      isActive: item.isActive ?? index === items.length - 1
+    }));
+  }
+
+  private buildAutoItems(): void {
+    const items: BreadcrumbItem[] = [];
+    let url = '';
+    let route: ActivatedRoute | null = this.activatedRoute.root;
+
+    while (route?.firstChild) {
+      route = route.firstChild;
+      const config = route.routeConfig;
+      if (!config?.path || config.path === '**') {
+        continue;
+      }
+
+      const segments = route.snapshot.url.map(segment => segment.path).filter(Boolean);
+      if (!segments.length) {
+        continue;
+      }
+
+      const label = this.resolveLabel(route, segments);
+      url += `/${segments.join('/')}`;
+
+      items.push({
+        label,
+        url,
+        iconClass: route.snapshot.data?.['breadcrumbIcon']
+      });
+    }
+
+    this.autoItems = items;
+  }
+
+  private resolveLabel(route: ActivatedRoute, segments: string[]): string {
+    const dataLabel = route.snapshot.data?.['breadcrumb'];
+    if (typeof dataLabel === 'string' && dataLabel.trim().length) {
+      return dataLabel;
+    }
+
+    const fallback = segments.join(' ');
+    return fallback
+      .split('-')
+      .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+      .join(' ');
+  }
+}

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

@@ -0,0 +1,7 @@
+export interface BreadcrumbItem {
+  label: string;
+  url?: string | (string | number)[];
+  iconClass?: string;
+  ariaLabel?: string;
+  isActive?: boolean;
+}

package/src/lib/components/button/button.component.html

@@ -0,0 +1,57 @@
+<button
+  class="frg-btn"
+  [id]="id"
+  [class]="class"
+  [attr.aria-label]="ariaLabel || null"
+  [attr.disabled]="disabled ? true : null"
+  [attr.type]="type"
+  [routerLink]="buttonRouterLink"
+  [routerLinkActive]="buttonRouterLinkActive"
+  [ngClass]="{
+    'frg-btn__ghost': styleType === 'ghost',
+    'frg-btn__icon': styleType === 'icon',
+    'frg-btn__primary': styleType === 'primary',
+    'frg-btn__secondary': styleType === 'secondary',
+    'frg-btn__tertiary': styleType === 'tertiary',
+    'frg-btn__neutral': styleType === 'neutral',
+    'frg-btn__dark': styleType === 'dark',
+    'frg-btn__light': styleType === 'light',
+    'frg-btn__info': styleType === 'info',
+    'frg-btn__success': styleType === 'success',
+    'frg-btn__warning': styleType === 'warning',
+    'frg-btn__danger': styleType === 'danger',
+    'frg-btn__outline-primary': styleType === 'outline-primary',
+    'frg-btn__outline-secondary': styleType === 'outline-secondary',
+    'frg-btn__outline-tertiary': styleType === 'outline-tertiary',
+    'frg-btn__outline-dark': styleType === 'outline-dark',
+    'frg-btn__outline-light': styleType === 'outline-light',
+    'frg-btn__outline-info': styleType === 'outline-info',
+    'frg-btn__outline-success': styleType === 'outline-success',
+    'frg-btn__outline-warning': styleType === 'outline-warning',
+    'frg-btn__outline-danger': styleType === 'outline-danger',
+    'frg-btn--pill': shape === 'pill',
+    'frg-btn--small': size === 'small',
+    'frg-btn--medium': size === 'medium',
+    'frg-btn--large': size === 'large'
+  }"
+  (click)="onClick()"
+>
+  <div
+    class="d-flex justify-content-center align-items-center"
+    [ngClass]="containerNgClass"
+  >
+    @if(text){
+      <span
+        [class]="textClass"
+      >
+        {{text}}
+      </span>
+    }
+    @if(iconClass){
+      <span
+        [class]="iconClass"
+        [ngClass]="iconClassMap"
+      ></span>
+    }
+  </div>
+</button>

package/src/lib/components/button/button.component.scss

@@ -0,0 +1,445 @@
+@use "sass:color";
+@use './../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: inline-block;
+
+  button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .frg-btn {
+    padding: .25rem 1rem;
+    min-height: 2.5rem;
+    line-height: 1;
+    margin: .5rem;
+    font-family: $base-font;
+    font-size: 1rem;
+    font-weight: 500;
+    border: 2px solid transparent;
+    box-shadow: 2px 2px 5px rgba($color-dark-soft, 0.4);
+    border-radius: 5px;
+    transition: all 0.15s ease-in-out;
+
+    &--small {
+      font-size: 0.875rem;
+      padding: 0 .75rem;
+      min-height: 2rem;
+      .frg-btn__icon-pill {
+        width: 1rem;
+        height: 1rem;
+        font-size: 0.5rem;
+      }
+    }
+
+    &--large {
+      font-size: 1.125rem;
+      padding: 0 1.25rem;
+      min-height: 3rem;
+      .frg-btn__icon-pill {
+        width: 1.8rem;
+        height: 1.8rem;
+        font-size: 1rem;
+      }
+    }
+
+    &--pill {
+      border-radius: 999px;
+      padding-left: 1.1rem;
+      padding-right: 1.1rem;
+    }
+
+    &:hover {
+      box-shadow: 0 1px 2px rgba($color-dark, 0.2);
+      transform: translateY(1px);
+      cursor: pointer;
+    }
+
+    &:focus-visible {
+      outline-offset: 5px;
+    }
+
+    &[disabled='true'] {
+      border-color: $color-disabled;
+      background-color: $color-disabled !important;
+      color: $color-dark-soft !important;
+      opacity: 0.6;
+      pointer-events: none;
+    }
+    
+    &__ghost {
+      box-shadow: none;
+      color: $color-dark;
+      background-color: transparent;
+    }
+
+    &__ghost:hover {
+      text-decoration: underline;
+      box-shadow: none;
+      cursor: pointer;
+    }
+
+    &__icon {
+      margin: 0;
+      padding: 0;
+      min-height: auto;
+      border: none;
+      box-shadow: none;
+      background-color: transparent;
+      color: $color-dark-neutral;
+
+      span {
+        transition: color 0.15s ease, transform 0.15s ease;
+        transform: scale(1);
+        display: inline-block;
+      }
+    }
+
+    &__icon:hover {
+      text-decoration: none;
+      box-shadow: none;
+      cursor: pointer;
+
+      span {
+        transform: scale(1.06);
+      }
+    }
+
+    &__icon-primary { color: $color-primary; }
+    &__icon-secondary { color: $color-secondary; }
+    &__icon-tertiary { color: $color-tertiary; }
+    &__icon-info { color: $color-info; }
+    &__icon-success { color: $color-success; }
+    &__icon-warning { color: $color-warning; }
+    &__icon-danger { color: $color-danger; }
+    &__icon-dark { color: $color-dark-neutral; }
+    &__icon-light { color: $color-light; }
+
+    &__icon-primary:hover { color: color.scale($color-primary, $lightness: -15%); }
+    &__icon-secondary:hover { color: color.scale($color-secondary, $lightness: -15%); }
+    &__icon-tertiary:hover { color: color.scale($color-tertiary, $lightness: -15%); }
+    &__icon-info:hover { color: color.scale($color-info, $lightness: -15%); }
+    &__icon-success:hover { color: color.scale($color-success, $lightness: -15%); }
+    &__icon-warning:hover { color: color.scale($color-warning, $lightness: -15%); }
+    &__icon-danger:hover { color: color.scale($color-danger, $lightness: -15%); }
+    &__icon-dark:hover { color: color.scale($color-dark-neutral, $lightness: 20%); }
+    &__icon-light:hover { color: color.scale($color-light, $lightness: -10%); }
+
+    &__icon-pill {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.5rem;
+      height: 1.5rem;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
+      font-size: 0.75rem;
+      line-height: 1;
+      box-shadow: $box-shadow-sm;
+    }
+
+    &__icon-pill::before {
+      display: block;
+      line-height: 1;
+    }
+
+    &__primary {
+      color: $color-light;
+      background-color: $color-primary;
+    }
+
+    &__primary:hover {
+      color: $color-light;
+      background-color: $color-primary-dark;
+    }
+
+    &__primary:focus-visible,
+    &__outline-primary:focus-visible {
+      outline: 3px solid $color-primary;
+      box-shadow: none;
+    }
+
+    &__secondary {
+      color: $color-light;
+      background-color: $color-secondary;
+    }
+
+    &__secondary:hover {
+      color: $color-light;
+      background-color: $color-secondary-dark;
+    }
+
+    &__secondary:focus-visible,
+    &__outline-secondary:focus-visible {
+      outline: 3px solid $color-secondary;
+      box-shadow: none;
+    }
+
+    &__tertiary {
+      color: $color-light;
+      background-color: $color-tertiary;
+    }
+
+    &__tertiary:hover {
+      color: $color-light;
+      background-color: $color-tertiary-dark;
+    }
+
+    &__tertiary:focus-visible,
+    &__outline-tertiary:focus-visible {
+      outline: 3px solid $color-tertiary;
+      box-shadow: none;
+    }
+
+    &__neutral {
+      color: $color-neutral-text;
+      background-color: $color-neutral;
+    }
+
+    &__neutral:hover {
+      color: $color-neutral-text;
+      background-color: color.scale($color-neutral, $lightness: -4%);
+    }
+
+    &__neutral:focus-visible {
+      outline: 3px solid color.scale($color-neutral, $lightness: -10%);
+      box-shadow: none;
+    }
+
+    &__light {
+      color: $color-dark-soft;
+      background-color: $color-light;
+    }
+
+    &__light:hover {
+      color: $color-light;
+      background-color: $color-dark;
+    }
+
+    &__light:focus-visible,
+    &__outline-light:focus-visible {
+      outline: 3px solid $color-light;
+      box-shadow: none;
+    }
+
+    &__dark {
+      color: $color-light;
+      background-color: $color-dark;
+    }
+
+    &__dark:hover {
+      color: $color-dark;
+      background-color: $color-light;
+    }
+
+    &__dark:focus-visible,
+    &__outline-dark:focus-visible {
+      outline: 3px solid $color-dark;
+      box-shadow: none;
+    }
+
+    &__info {
+      color: $color-light;
+      background-color: $color-info;
+    }
+
+    &__info:hover {
+      color: $color-light;
+      background-color: color.scale($color-info, $lightness: -15%);
+    }
+
+    &__info:focus-visible,
+    &__outline-info:focus-visible {
+      outline: 3px solid $color-info;
+      box-shadow: none;
+    }
+
+
+    &__success {
+      color: $color-light;
+      background-color: $color-success;
+    }
+
+    &__success:hover {
+      color: $color-light;
+      background-color: color.scale($color-success, $lightness: -15%);
+    }
+
+    &__success:focus-visible,
+    &__outline-success:focus-visible {
+      outline: 3px solid $color-success;
+      box-shadow: none;
+    }
+
+    &__warning {
+      color: $color-light;
+      background-color: $color-warning;
+    }
+
+    &__warning:hover {
+      color: $color-light;
+      background-color: color.scale($color-warning, $lightness: -15%);
+    }
+
+    &__warning:focus-visible,
+    &__outline-warning:focus-visible {
+      outline: 3px solid $color-warning;
+      box-shadow: none;
+    }
+
+    &__danger {
+      color: $color-light;
+      background-color: $color-danger;
+    }
+
+    &__danger:hover {
+      color: $color-light;
+      background-color: color.scale($color-danger, $lightness: -15%);
+    }
+
+    &__danger:focus-visible,
+    &__outline-danger:focus-visible {
+      outline: 3px solid $color-danger;
+      box-shadow: none;
+    }
+
+    &__outline-primary {
+      color: $color-dark;
+      border: 2px solid $color-primary;
+      background-color: transparent;
+    }
+
+    &__outline-primary:hover {
+      color: $color-light;
+      background-color: $color-primary;
+    }
+
+    &__outline-secondary {
+      color: $color-dark;
+      border: 2px solid $color-secondary;
+      background-color: transparent;
+    }
+
+    &__outline-secondary:hover {
+      color: $color-light;
+      background-color: $color-secondary;
+    }
+
+    &__outline-tertiary {
+      color: $color-dark;
+      border: 2px solid $color-tertiary;
+      background-color: transparent;
+    }
+
+    &__outline-tertiary:hover {
+      color: $color-light;
+      background-color: $color-tertiary;
+    }
+
+     &__outline-light {
+      color: $color-light;
+      border: 2px solid $color-light;
+      background-color: transparent;
+    }
+
+    &__outline-light:hover {
+      color: $color-dark;
+      background-color: $color-light;
+    }
+
+    &__outline-dark {
+      color: $color-dark;
+      border: 2px solid $color-dark;
+      background-color: transparent;
+    }
+
+    &__outline-dark:hover {
+      color: $color-light;
+      background-color: $color-dark;
+    }
+
+     &__outline-info {
+      color: $color-dark;
+      border: 2px solid $color-info;
+      background-color: transparent;
+    }
+
+    &__outline-info:hover {
+      color: $color-light;
+      background-color: $color-info;
+    }
+
+    &__outline-success {
+      color: $color-dark;
+      border: 2px solid $color-success;
+      background-color: transparent;
+    }
+
+    &__outline-success:hover {
+      color: $color-light;
+      background-color: $color-success;
+    }
+
+    &__outline-warning {
+      color: $color-dark;
+      border: 2px solid $color-warning;
+      background-color: transparent;
+    }
+
+    &__outline-warning:hover {
+      color: $color-light;
+      background-color: $color-warning;
+    }
+
+    &__outline-danger {
+      color: $color-dark;
+      border: 2px solid $color-danger;
+      background-color: transparent;
+    }
+
+    &__outline-danger:hover {
+      color: $color-light;
+      background-color: $color-danger;
+    }
+
+    &__primary:active,
+    &__outline-primary:active {
+      background-color: color.scale($color-primary, $lightness: -20%);
+    }
+
+    &__secondary:active,
+    &__outline-secondary:active {
+      background-color: color.scale($color-secondary, $lightness: -20%);
+    }
+
+    &__tertiary:active,
+    &__outline-tertiary:active {
+      background-color: color.scale($color-tertiary, $lightness: -20%);
+    }
+
+    &__success:active,
+    &__outline-success:active {
+      background-color: color.scale($color-success, $lightness: -20%);
+    }
+
+    &__warning:active,
+    &__outline-warning:active {
+      background-color: color.scale($color-warning, $lightness: -20%);
+    }
+
+    &__danger:active,
+    &__outline-danger:active {
+      background-color: color.scale($color-danger, $lightness: -20%);
+    }
+  }
+}

package/src/lib/components/button/button.component.spec.ts

@@ -0,0 +1,99 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let fixture: ComponentFixture<ButtonComponent>;
+  let component: ButtonComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent, RouterTestingModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders text when provided', () => {
+    component.text = 'Click me';
+
+    fixture.detectChanges();
+
+    const textEl = fixture.debugElement.query(By.css('span'));
+    expect(textEl.nativeElement.textContent).toContain('Click me');
+  });
+
+  it('renders icon span when iconClass is provided', () => {
+    component.iconClass = 'fa fa-star';
+
+    fixture.detectChanges();
+
+    const iconEl = fixture.debugElement.query(By.css('span.fa'));
+    expect(iconEl).toBeTruthy();
+  });
+
+  it('applies aria-label when provided', () => {
+    component.ariaLabel = 'Icon action';
+    component.iconClass = 'fa fa-star';
+
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('aria-label')).toBe('Icon action');
+  });
+
+  it('applies iconStyleType classes', () => {
+    component.iconClass = 'fa fa-star';
+    component.iconStyleType = 'primary';
+
+    fixture.detectChanges();
+
+    const iconEl = fixture.debugElement.query(By.css('span.fa'));
+    expect(iconEl.nativeElement.classList).toContain('frg-btn__icon-primary');
+  });
+
+  it('applies container classes based on icon position', () => {
+    component.iconPosition = 'top';
+
+    fixture.detectChanges();
+
+    const container = fixture.debugElement.query(By.css('button > div'));
+    expect(container.nativeElement.classList).toContain('flex-column-reverse');
+  });
+
+  it('emits clickEvent when clicked and not disabled', () => {
+    const emitSpy = spyOn(component.clickEvent, 'emit');
+
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button'));
+    button.nativeElement.click();
+
+    expect(emitSpy).toHaveBeenCalled();
+  });
+
+  it('does not emit clickEvent when disabled', () => {
+    const emitSpy = spyOn(component.clickEvent, 'emit');
+    component.disabled = true;
+
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button'));
+    button.nativeElement.click();
+
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it('sets type and disabled attributes', () => {
+    component.type = 'submit';
+    component.disabled = true;
+
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('type')).toBe('submit');
+    expect(button.getAttribute('disabled')).toBe('true');
+  });
+});