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

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

@@ -0,0 +1,147 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { AccordionComponent } from './accordion.component';
+import { AccordionItem } from './accordion.type';
+
+@Component({
+  standalone: true,
+  imports: [AccordionComponent],
+  template: `
+    <frg-accordion
+      [items]="items"
+      [multi]="multi"
+      [expandedIds]="expandedIds"
+      [toggleOnHeaderClick]="toggleOnHeaderClick">
+    </frg-accordion>
+  `
+})
+class TestHostComponent {
+  items: AccordionItem[] = [];
+  multi = false;
+  expandedIds: string[] = [];
+  toggleOnHeaderClick = true;
+}
+
+describe('AccordionComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  const getAccordion = () =>
+    fixture.debugElement.query(By.directive(AccordionComponent)).componentInstance as AccordionComponent;
+
+  const getHeaderButtons = () =>
+    fixture.debugElement.queryAll(By.css('.frg-accordion__header'));
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+  });
+
+  it('renders titles and subtitles', () => {
+    fixture.componentInstance.items = [
+      { id: 'a1', title: 'First', subtitle: 'Alpha', content: 'Content A' },
+      { id: 'a2', title: 'Second', content: 'Content B' }
+    ];
+
+    fixture.detectChanges();
+
+    const titles = fixture.debugElement.queryAll(By.css('.frg-accordion__title'));
+    const subtitles = fixture.debugElement.queryAll(By.css('.frg-accordion__subtitle'));
+
+    expect(titles.length).toBe(2);
+    expect(titles[0].nativeElement.textContent).toContain('First');
+    expect(titles[1].nativeElement.textContent).toContain('Second');
+    expect(subtitles.length).toBe(1);
+    expect(subtitles[0].nativeElement.textContent).toContain('Alpha');
+  });
+
+  it('toggles an item on click and emits events', () => {
+    fixture.componentInstance.items = [
+      { id: 'a1', title: 'First', content: 'Content A' },
+      { id: 'a2', title: 'Second', content: 'Content B' }
+    ];
+
+    fixture.detectChanges();
+
+    const accordion = getAccordion();
+    const emitSpy = spyOn(accordion.expandedIdsChange, 'emit');
+    const toggledSpy = spyOn(accordion.toggled, 'emit');
+
+    getHeaderButtons()[0].nativeElement.click();
+    fixture.detectChanges();
+
+    expect(emitSpy).toHaveBeenCalledWith(['a1']);
+    expect(toggledSpy).toHaveBeenCalled();
+    expect(accordion.isExpanded('a1')).toBeTrue();
+  });
+
+  it('does not toggle when the item is disabled', () => {
+    fixture.componentInstance.items = [
+      { id: 'a1', title: 'First', content: 'Content A', disabled: true }
+    ];
+
+    fixture.detectChanges();
+
+    const accordion = getAccordion();
+    const emitSpy = spyOn(accordion.expandedIdsChange, 'emit');
+
+    getHeaderButtons()[0].nativeElement.click();
+    fixture.detectChanges();
+
+    expect(emitSpy).not.toHaveBeenCalled();
+    expect(accordion.isExpanded('a1')).toBeFalse();
+  });
+
+  it('supports multi-expand mode', () => {
+    fixture.componentInstance.items = [
+      { id: 'a1', title: 'First', content: 'Content A' },
+      { id: 'a2', title: 'Second', content: 'Content B' }
+    ];
+    fixture.componentInstance.multi = true;
+
+    fixture.detectChanges();
+
+    const accordion = getAccordion();
+    getHeaderButtons()[0].nativeElement.click();
+    getHeaderButtons()[1].nativeElement.click();
+    fixture.detectChanges();
+
+    expect(accordion.isExpanded('a1')).toBeTrue();
+    expect(accordion.isExpanded('a2')).toBeTrue();
+    expect(accordion.expandedIds.length).toBe(2);
+  });
+
+  it('ignores header clicks when toggleOnHeaderClick is false', () => {
+    fixture.componentInstance.items = [
+      { id: 'a1', title: 'First', content: 'Content A' }
+    ];
+    fixture.componentInstance.toggleOnHeaderClick = false;
+
+    fixture.detectChanges();
+
+    const accordion = getAccordion();
+    getHeaderButtons()[0].nativeElement.click();
+    fixture.detectChanges();
+
+    expect(accordion.isExpanded('a1')).toBeFalse();
+  });
+
+  it('toggles on Enter key press', () => {
+    fixture.componentInstance.items = [
+      { id: 'a1', title: 'First', content: 'Content A' }
+    ];
+
+    fixture.detectChanges();
+
+    const accordion = getAccordion();
+    const header = getHeaderButtons()[0].nativeElement as HTMLButtonElement;
+
+    header.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    fixture.detectChanges();
+
+    expect(accordion.isExpanded('a1')).toBeTrue();
+  });
+});

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

@@ -0,0 +1,211 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  QueryList,
+  SimpleChanges,
+  TemplateRef,
+  ViewChildren
+} from '@angular/core';
+import {
+  AccordionItem,
+  AccordionItemContext,
+  AccordionToggleEvent,
+  TAccordionSize,
+  TAccordionStyle
+} from './accordion.type';
+
+@Component({
+  selector: 'frg-accordion',
+  standalone: true,
+  imports: [NgTemplateOutlet],
+  templateUrl: './accordion.component.html',
+  styleUrl: './accordion.component.scss'
+})
+export class AccordionComponent implements OnChanges {
+  @Input() items: AccordionItem[] = [];
+  @Input() expandedIds: string[] = [];
+  @Input() multi: boolean = false;
+  @Input() styleType: TAccordionStyle = 'default';
+  @Input() size: TAccordionSize = 'large';
+  @Input() toggleOnHeaderClick: boolean = true;
+  @Input() animated: boolean = true;
+  @Input() focusPanelOnOpen: boolean = false;
+
+  @Output() expandedIdsChange = new EventEmitter<string[]>();
+  @Output() toggled = new EventEmitter<AccordionToggleEvent>();
+  @Output() opened = new EventEmitter<AccordionToggleEvent>();
+  @Output() closed = new EventEmitter<AccordionToggleEvent>();
+
+  @ContentChild('frgAccordionHeader', { read: TemplateRef }) headerTemplate?: TemplateRef<AccordionItemContext>;
+  @ContentChild('frgAccordionContent', { read: TemplateRef }) contentTemplate?: TemplateRef<AccordionItemContext>;
+  @ContentChild('frgAccordionIcon', { read: TemplateRef }) iconTemplate?: TemplateRef<AccordionItemContext>;
+  @ContentChild('frgAccordionToggle', { read: TemplateRef }) toggleIconTemplate?: TemplateRef<AccordionItemContext>;
+
+  @ViewChildren('headerBtn') headerButtons!: QueryList<ElementRef<HTMLButtonElement>>;
+  @ViewChildren('panelBody') panelBodies!: QueryList<ElementRef<HTMLElement>>;
+
+  public viewItems: AccordionItem[] = [];
+  private uidCounter = 0;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['items']) {
+      this.viewItems = this.normalizeItems(this.items);
+      const initialExpanded = this.expandedIds?.length
+        ? [...this.expandedIds]
+        : this.viewItems.filter(item => item.expanded).map(item => item.id!) || [];
+      this.setExpandedIds(initialExpanded, false);
+    }
+
+    if (changes['expandedIds'] && !changes['expandedIds'].firstChange) {
+      this.setExpandedIds(this.expandedIds || [], false);
+    }
+  }
+
+  isExpanded(id?: string): boolean {
+    return !!id && (this.expandedIds?.includes(id) ?? false);
+  }
+
+  headerId(id: string): string {
+    return `${id}-header`;
+  }
+
+  panelId(id: string): string {
+    return `${id}-panel`;
+  }
+
+  onHeaderClick(index: number, event: Event): void {
+    if (!this.toggleOnHeaderClick) {
+      return;
+    }
+    event.preventDefault();
+    this.toggleAt(index);
+  }
+
+  onHeaderKeydown(event: KeyboardEvent, index: number): void {
+    const key = event.key;
+    if (key === 'Enter' || key === ' ') {
+      event.preventDefault();
+      this.toggleAt(index);
+      return;
+    }
+
+    const headers = this.headerButtons?.toArray() || [];
+    if (!headers.length) {
+      return;
+    }
+
+    if (key === 'ArrowDown' || key === 'ArrowRight') {
+      event.preventDefault();
+      const next = (index + 1) % headers.length;
+      headers[next].nativeElement.focus();
+    } else if (key === 'ArrowUp' || key === 'ArrowLeft') {
+      event.preventDefault();
+      const prev = (index - 1 + headers.length) % headers.length;
+      headers[prev].nativeElement.focus();
+    } else if (key === 'Home') {
+      event.preventDefault();
+      headers[0].nativeElement.focus();
+    } else if (key === 'End') {
+      event.preventDefault();
+      headers.at(-1)?.nativeElement.focus();
+    }
+  }
+
+  toggleAt(index: number): void {
+    const item = this.viewItems[index];
+    if (!item || item.disabled) {
+      return;
+    }
+
+    const itemId = item.id!;
+    const currentlyExpanded = this.isExpanded(itemId);
+    let nextExpandedIds: string[];
+
+    if (this.multi) {
+      nextExpandedIds = currentlyExpanded ? this.collapseMulti(itemId) : this.expandMulti(itemId);
+    } else {
+      nextExpandedIds = currentlyExpanded ? this.collapseSingle() : this.expandSingle(itemId);
+    }
+
+    this.setExpandedIds(nextExpandedIds, true, item, index);
+  }
+
+  buildContext<T = unknown>(item: AccordionItem<T>, index: number): AccordionItemContext<T> {
+    return {
+      $implicit: item,
+      item,
+      index,
+      expanded: this.isExpanded(item.id),
+      toggle: () => this.toggleAt(index)
+    };
+  }
+
+  private normalizeItems(items: AccordionItem[]): AccordionItem[] {
+    return (items || []).map((item, index) => ({
+      ...item,
+      id: item.id ?? this.generateId(index)
+    }));
+  }
+
+  private generateId(index: number): string {
+    this.uidCounter += 1;
+    return `frg-accordion-item-${index}-${this.uidCounter}`;
+  }
+
+  private expandSingle(id: string): string[] {
+    return [id];
+  }
+
+  private collapseSingle(): string[] {
+    return [];
+  }
+
+  private expandMulti(id: string): string[] {
+    return Array.from(new Set([...(this.expandedIds || []), id]));
+  }
+
+  private collapseMulti(id: string): string[] {
+    return (this.expandedIds || []).filter(activeId => activeId !== id);
+  }
+
+  private setExpandedIds(nextIds: string[], emit: boolean, item?: AccordionItem, index?: number): void {
+    const normalized = this.multi ? nextIds : nextIds.slice(0, 1);
+    this.expandedIds = normalized;
+    this.viewItems = this.viewItems.map(viewItem => ({
+      ...viewItem,
+      expanded: normalized.includes(viewItem.id!)
+    }));
+
+    if (emit) {
+      this.expandedIdsChange.emit(this.expandedIds);
+      if (item && index !== undefined) {
+        const payload: AccordionToggleEvent = {
+          id: item.id!,
+          index,
+          expanded: this.isExpanded(item.id),
+          item,
+          expandedIds: this.expandedIds
+        };
+        this.toggled.emit(payload);
+        (payload.expanded ? this.opened : this.closed).emit(payload);
+      }
+    }
+
+    if (item && this.focusPanelOnOpen && this.isExpanded(item.id)) {
+      setTimeout(() => this.focusPanel(index!), 0);
+    }
+  }
+
+  private focusPanel(index: number): void {
+    const panel = this.panelBodies?.get(index);
+    if (panel?.nativeElement) {
+      panel.nativeElement.focus();
+    }
+  }
+}

package/src/lib/components/accordion/accordion.type.ts

@@ -0,0 +1,82 @@
+import { TemplateRef } from '@angular/core';
+import { TBaseSize, TBaseStyle } from '../../types/base.types';
+
+export type TAccordionStyle = TBaseStyle;
+export type TAccordionSize = TBaseSize;
+
+export interface AccordionItemContext<T = unknown> {
+  $implicit: AccordionItem<T>;
+  item: AccordionItem<T>;
+  index: number;
+  expanded: boolean;
+  toggle: () => void;
+}
+
+export interface AccordionItem<T = unknown> {
+  /**
+   * Unique identifier for the accordion item.
+   * If not provided, it will be generated automatically.
+   */
+  id?: string;
+  /**
+   * Visible title inside the header.
+   */
+  title: string;
+  /**
+   * Optional subtitle rendered below the title in the default header.
+   */
+  subtitle?: string;
+  /**
+   * Prevents interaction when true.
+   */
+  disabled?: boolean;
+  /**
+   * Allows setting initial expansion per item.
+   */
+  expanded?: boolean;
+  /**
+   * Optional style override using the shared palette.
+   */
+  style?: TAccordionStyle;
+  /**
+   * Optional size override for the item header.
+   */
+  size?: TAccordionSize;
+  /**
+   * Optional icon rendered on the left of the header when no custom template is provided.
+   * Typically a CSS class (e.g., for an icon font) or plain text.
+   */
+  icon?: string;
+  /**
+   * Custom icon template for this item only.
+   */
+  iconTemplate?: TemplateRef<AccordionItemContext<T>>;
+  /**
+   * Custom toggle icon template for this item only (replaces the default chevron).
+   */
+  toggleIconTemplate?: TemplateRef<AccordionItemContext<T>>;
+  /**
+   * Arbitrary data that can be passed to templates for custom rendering.
+   */
+  data?: T;
+  /**
+   * Optional plain content for quick rendering when no template is provided.
+   */
+  content?: string;
+  /**
+   * Custom header template for this item only.
+   */
+  headerTemplate?: TemplateRef<AccordionItemContext<T>>;
+  /**
+   * Custom body template for this item only.
+   */
+  contentTemplate?: TemplateRef<AccordionItemContext<T>>;
+}
+
+export interface AccordionToggleEvent<T = unknown> {
+  id: string;
+  index: number;
+  expanded: boolean;
+  item: AccordionItem<T>;
+  expandedIds: string[];
+}

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

@@ -0,0 +1,43 @@
+@if (breadcrumbItems.length) {
+  <nav
+    class="frg-breadcrumb"
+    aria-label="Breadcrumb"
+    [ngClass]="{
+      'frg-breadcrumb--primary': styleType === 'primary' || styleType === 'outline-primary',
+      'frg-breadcrumb--secondary': styleType === 'secondary' || styleType === 'outline-secondary',
+      'frg-breadcrumb--tertiary': styleType === 'tertiary' || styleType === 'outline-tertiary',
+      'frg-breadcrumb--info': styleType === 'info' || styleType === 'outline-info',
+      'frg-breadcrumb--success': styleType === 'success' || styleType === 'outline-success',
+      'frg-breadcrumb--warning': styleType === 'warning' || styleType === 'outline-warning',
+      'frg-breadcrumb--danger': styleType === 'danger' || styleType === 'outline-danger',
+      'frg-breadcrumb--dark': styleType === 'dark' || styleType === 'outline-dark',
+      'frg-breadcrumb--light': styleType === 'light' || styleType === 'outline-light'
+    }"
+  >
+    <ol class="frg-breadcrumb__list">
+      @for (item of breadcrumbItems; track item.label; let isLast = $last) {
+        <li class="frg-breadcrumb__item" [class.is-active]="item.isActive || isLast">
+          @if (item.url && !isLast) {
+            <a class="frg-breadcrumb__link" [routerLink]="item.url" [attr.aria-label]="item.ariaLabel || null">
+              @if (item.iconClass) {
+                <span class="frg-breadcrumb__icon" [ngClass]="item.iconClass" aria-hidden="true"></span>
+              }
+              <span class="frg-breadcrumb__label">{{ item.label }}</span>
+            </a>
+          } @else {
+            <span class="frg-breadcrumb__current" [attr.aria-label]="item.ariaLabel || null">
+              @if (item.iconClass) {
+                <span class="frg-breadcrumb__icon" [ngClass]="item.iconClass" aria-hidden="true"></span>
+              }
+              <span class="frg-breadcrumb__label">{{ item.label }}</span>
+            </span>
+          }
+
+          @if (!isLast) {
+            <span class="frg-breadcrumb__separator">{{ separator }}</span>
+          }
+        </li>
+      }
+    </ol>
+  </nav>
+}

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

@@ -0,0 +1,112 @@
+@use './../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+}
+
+.frg-breadcrumb {
+  font-family: $base-font;
+  color: var(--frg-breadcrumb-text, $color-dark-neutral);
+  --frg-breadcrumb-accent: #{$color-dark-neutral};
+  --frg-breadcrumb-text: #{$color-dark-soft};
+  --frg-breadcrumb-muted: #{$color-light-neutral};
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: $font-size-xs;
+    color: var(--frg-breadcrumb-text);
+
+    &.is-active {
+      color: var(--frg-breadcrumb-text);
+      font-weight: 600;
+    }
+  }
+
+  &__link,
+  &__current {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &__link:hover {
+    color: var(--frg-breadcrumb-accent);
+  }
+
+  &__link:hover .frg-breadcrumb__label {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  &__icon {
+    font-size: 0.9em;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__separator {
+    color: var(--frg-breadcrumb-muted);
+    font-size: $font-size-xs;
+  }
+
+  &--primary {
+    --frg-breadcrumb-text: #{$color-primary};
+    --frg-breadcrumb-accent: #{$color-primary-dark};
+    --frg-breadcrumb-muted: #{$color-primary-light};
+  }
+  &--secondary {
+    --frg-breadcrumb-text: #{$color-secondary};
+    --frg-breadcrumb-accent: #{$color-secondary-dark};
+    --frg-breadcrumb-muted: #{$color-secondary-light};
+  }
+  &--tertiary {
+    --frg-breadcrumb-text: #{$color-tertiary};
+    --frg-breadcrumb-accent: #{$color-tertiary-dark};
+    --frg-breadcrumb-muted: #{$color-tertiary-light};
+  }
+  &--info {
+    --frg-breadcrumb-text: #{$color-info};
+    --frg-breadcrumb-accent: #{$color-info-dark};
+    --frg-breadcrumb-muted: #{$color-info-light};
+  }
+  &--success {
+    --frg-breadcrumb-text: #{$color-success};
+    --frg-breadcrumb-accent: #{$color-success-dark};
+    --frg-breadcrumb-muted: #{$color-success-light};
+  }
+  &--warning {
+    --frg-breadcrumb-text: #{$color-warning};
+    --frg-breadcrumb-accent: #{$color-warning-dark};
+    --frg-breadcrumb-muted: #{$color-warning-light};
+  }
+  &--danger {
+    --frg-breadcrumb-text: #{$color-danger};
+    --frg-breadcrumb-accent: #{$color-danger-dark};
+    --frg-breadcrumb-muted: #{$color-danger-light};
+  }
+  &--dark {
+    --frg-breadcrumb-text: #{$color-dark-neutral};
+    --frg-breadcrumb-accent: #{$color-dark};
+    --frg-breadcrumb-muted: #{$color-dark-soft};
+  }
+  &--light {
+    --frg-breadcrumb-text: #{$color-light-neutral};
+    --frg-breadcrumb-accent: #{$color-light};
+    --frg-breadcrumb-muted: #{$color-light-soft};
+  }
+}

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

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+describe('BreadcrumbComponent', () => {
+  let fixture: ComponentFixture<BreadcrumbComponent>;
+  let component: BreadcrumbComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BreadcrumbComponent],
+      providers: [provideRouter([])]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BreadcrumbComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders items provided via input', () => {
+    component.items = [
+      { label: 'Home', url: '/' },
+      { label: 'Library', url: '/library' },
+      { label: 'Books' }
+    ];
+
+    fixture.detectChanges();
+
+    const items = fixture.debugElement.queryAll(By.css('.frg-breadcrumb__item'));
+    expect(items.length).toBe(3);
+    expect(items[2].nativeElement.classList).toContain('is-active');
+  });
+});