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

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

@@ -0,0 +1,305 @@
+@use "sass:color";
+@use "sass:list";
+@use './../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+  font-family: $base-font;
+}
+
+.frg-tabs {
+  display: flex;
+  flex-direction: column;
+
+  &[data-align='center'] .frg-tabs__list {
+    justify-content: center;
+  }
+
+  &[data-align='end'] .frg-tabs__list {
+    justify-content: flex-end;
+  }
+
+  &[data-align='stretch'] .frg-tabs__list {
+    justify-content: stretch;
+
+    .frg-tabs__tab {
+      flex: 1 1 auto;
+      text-align: center;
+    }
+  }
+}
+
+.frg-tabs__list {
+  display: flex;
+  align-items: flex-end;
+  border-bottom: 1px solid $color-light-soft;
+  flex-wrap: wrap;
+  overflow: visible;
+}
+
+.frg-tabs__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  color: $color-dark-soft;
+  padding: 0.65rem 0.9rem;
+  border-radius: 0.2rem 0.2rem 0 0;
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    color 0.16s ease,
+    background-color 0.22s ease,
+    box-shadow 0.22s ease,
+    transform 0.18s ease;
+
+  &.is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(.is-disabled) {
+    color: $color-dark-neutral;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px color.scale($color-primary, $lightness: 35%);
+  }
+
+  &.is-active {
+    color: $color-dark;
+  }
+
+  .frg-tabs__tab-inner {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .frg-tabs__icon {
+    min-width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 0.35rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: color.scale($color-light, $lightness: -3%);
+    color: $color-dark;
+    flex-shrink: 0;
+    margin: 0 0.5rem;
+    font-weight: 600;
+    font-size: $font-size-xs;
+  }
+
+  .frg-tabs__icon-shape {
+    font-size: $font-size-sm;
+    line-height: 1;
+  }
+
+  .frg-tabs__label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.05rem;
+    text-align: left;
+  }
+
+  .frg-tabs__label-text {
+    font-size: $font-size-sm;
+    font-weight: 600;
+    line-height: 1.35;
+  }
+
+  .frg-tabs__label-desc {
+    color: $color-dark-soft;
+    font-size: $font-size-2xs;
+    line-height: 1.3;
+  }
+
+  .frg-tabs__underline {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    height: 2px;
+    border-radius: 2px;
+    background-color: $color-primary;
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition:
+      transform 0.250s cubic-bezier(0.25, 0.8, 0.4, 1),
+      opacity 0.18s ease;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: transparent;
+    z-index: -1;
+    display: none;
+  }
+}
+
+.frg-tabs__tab[data-style^='outline-'] {
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.frg-tabs__tab[data-style^='outline-'] .frg-tabs__underline {
+  display: none;
+}
+
+.frg-tabs.is-animated {
+  .frg-tabs__panel {
+    transition: opacity 0.18s ease, transform 0.18s ease;
+  }
+}
+
+.frg-tabs__panels {
+  position: relative;
+  padding-top: 0.85rem;
+}
+
+.frg-tabs__panel {
+  padding: 0.75rem 0;
+  color: $color-dark-neutral;
+  outline: none;
+  line-height: 1.5;
+  opacity: 0;
+  transform: translateY(2px);
+
+  &.is-active {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: 2px solid $color-primary;
+    outline-offset: 2px;
+  }
+}
+
+.frg-tabs__tab[data-size='small'] {
+  padding: 0.5rem 0.7rem;
+
+  .frg-tabs__icon {
+    min-width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.3rem;
+  }
+
+  .frg-tabs__label-text {
+    font-size: $font-size-xs;
+  }
+
+  .frg-tabs__label-desc {
+    font-size: $font-size-2xs;
+  }
+}
+
+.frg-tabs__tab[data-size='large'] {
+  padding: 0.85rem 1.05rem;
+
+  .frg-tabs__icon {
+    min-width: 2rem;
+    height: 2rem;
+  }
+
+  .frg-tabs__label-text {
+    font-size: $font-size-md;
+  }
+}
+
+$tab-colors: (
+  'primary': $color-primary,
+  'secondary': $color-secondary,
+  'tertiary': $color-tertiary,
+  'info': $color-info,
+  'success': $color-success,
+  'warning': $color-warning,
+  'danger': $color-danger,
+  'dark': $color-dark,
+  'light': $color-light,
+  'outline-primary': $color-primary,
+  'outline-secondary': $color-secondary,
+  'outline-tertiary': $color-tertiary,
+  'outline-info': $color-info,
+  'outline-success': $color-success,
+  'outline-warning': $color-warning,
+  'outline-danger': $color-danger,
+  'outline-dark': $color-dark,
+  'outline-light': $color-light-soft,
+  'default': $color-dark-neutral
+);
+
+$solid-variants: ('primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'danger', 'dark', 'light', 'default');
+$outline-variants: (
+  'outline-primary',
+  'outline-secondary',
+  'outline-tertiary',
+  'outline-info',
+  'outline-success',
+  'outline-warning',
+  'outline-danger',
+  'outline-dark',
+  'outline-light'
+);
+
+@each $variant, $tone in $tab-colors {
+  .frg-tabs__tab[data-style="#{$variant}"] {
+    border: none;
+
+    .frg-tabs__underline {
+      background-color: $tone;
+    }
+
+      &.is-active {
+      @if list.index($solid-variants, $variant) {
+        $fill: if($variant == 'light', color.scale($tone, $lightness: -8%), $tone);
+        background-color: $fill;
+        color: if($variant == 'light', $color-dark, $color-light);
+        border-color: transparent;
+          box-shadow: inset 0 -2px 0 rgba($tone, 0.28);
+          .frg-tabs__underline {
+            opacity: 0;
+            height: 2px;
+            transform: scaleX(0);
+          }
+        } @else if list.index($outline-variants, $variant) {
+          background-color: transparent;
+          border-color: transparent;
+          border-width: 2px;
+          color: if($variant == 'outline-light', $color-dark, $tone);
+          border-bottom: 2px solid $tone;
+          margin-bottom: -1px;
+          .frg-tabs__underline {
+            display: none;
+          }
+          .frg-tabs__label-desc {
+            color: $color-dark-neutral;
+          }
+        }
+
+      .frg-tabs__label-desc {
+        color: if(
+          list.index($outline-variants, $variant),
+          $color-dark-neutral,
+          if($variant == 'light', $color-dark-soft, color.scale($color-light, $lightness: -5%))
+        );
+      }
+
+      .frg-tabs__icon {
+        @if list.index($solid-variants, $variant) {
+          background-color: color.scale($tone, $lightness: 12%);
+          color: if($variant == 'light', $color-dark, $color-light);
+        } @else {
+          background-color: transparent;
+          color: if($variant == 'outline-light', $color-dark, $tone);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TabsComponent } from './tabs.component';
+import { TabItem } from './tabs.type';
+
+const items: TabItem[] = [
+  { id: 'tab-a', label: 'Alpha', content: 'A' },
+  { id: 'tab-b', label: 'Beta', content: 'B' },
+  { id: 'tab-c', label: 'Gamma', content: 'C', disabled: true }
+];
+
+@Component({
+  standalone: true,
+  imports: [TabsComponent],
+  template: `
+    <frg-tabs
+      [items]="items"
+      [activeId]="activeId"
+      (activeIdChange)="activeId = $event">
+    </frg-tabs>
+  `
+})
+class TestHostComponent {
+  items = [...items];
+  activeId: string | null = null;
+}
+
+describe('TabsComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  const getTabs = (): TabsComponent =>
+    fixture.debugElement.query(By.directive(TabsComponent)).componentInstance as TabsComponent;
+
+  const getTabButtons = () =>
+    fixture.debugElement.queryAll(By.css('.frg-tabs__tab'));
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+  });
+
+  it('renders the tab labels', () => {
+    fixture.detectChanges();
+
+    const labels = fixture.debugElement.queryAll(By.css('.frg-tabs__label-text'));
+    expect(labels.length).toBe(3);
+    expect(labels[0].nativeElement.textContent).toContain('Alpha');
+    expect(labels[1].nativeElement.textContent).toContain('Beta');
+  });
+
+  it('defaults to the first enabled tab when activeId is null', () => {
+    fixture.detectChanges();
+
+    const tabs = getTabs();
+    expect(tabs.activeId as unknown as string).toBe('tab-a');
+  });
+
+  it('emits changes when a tab is clicked', () => {
+    const tabs = getTabs();
+    const changeSpy = spyOn(tabs.changed, 'emit');
+    fixture.detectChanges();
+
+    const buttons = getTabButtons();
+    buttons[1].nativeElement.click();
+
+    expect(tabs.activeId).toBe('tab-b');
+    expect(fixture.componentInstance.activeId).toBe('tab-b');
+    expect(changeSpy).toHaveBeenCalled();
+  });
+
+  it('does not activate disabled tabs', () => {
+    fixture.detectChanges();
+
+    const tabs = getTabs();
+    const buttons = getTabButtons();
+    buttons[2].nativeElement.click();
+
+    expect(tabs.activeId).toBe('tab-a');
+  });
+
+  it('activates tab on Enter keydown', () => {
+    fixture.detectChanges();
+
+    const tabs = getTabs();
+    const buttons = getTabButtons();
+    buttons[1].nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+
+    expect(tabs.activeId).toBe('tab-b');
+  });
+});

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

@@ -0,0 +1,282 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  QueryList,
+  SimpleChanges,
+  TemplateRef,
+  ViewChildren
+} from '@angular/core';
+import { TabChangeEvent, TabItem, TabItemContext, TTabSize, TTabStyle } from './tabs.type';
+
+/**
+ * TabsComponent
+ *
+ * Accessible tabset that supports keyboard navigation, style variants,
+ * projected templates, and two-way active state management.
+ */
+@Component({
+  selector: 'frg-tabs',
+  standalone: true,
+  imports: [NgTemplateOutlet],
+  templateUrl: './tabs.component.html',
+  styleUrl: './tabs.component.scss'
+})
+export class TabsComponent implements OnChanges {
+  /**
+   * Tab definitions rendered by the component.
+   */
+  @Input() items: TabItem[] = [];
+  /**
+   * Identifier of the currently active tab. Auto-resolved when null.
+   */
+  @Input() activeId: string | null = null;
+  /**
+   * Visual style applied to tabs when no per-item style is provided.
+   */
+  @Input() styleType: TTabStyle = 'default';
+  /**
+   * Size variant applied to tabs when no per-item size is provided.
+   */
+  @Input() size: TTabSize = 'medium';
+  /**
+   * Horizontal alignment of the tab list.
+   */
+  @Input() align: 'start' | 'center' | 'end' | 'stretch' = 'start';
+  /**
+   * Enables panel fade/slide animations.
+   */
+  @Input() animated: boolean = true;
+  /**
+   * When true, moves focus to the active panel after selection.
+   */
+  @Input() focusPanelOnSelect: boolean = false;
+
+  /**
+   * Emits whenever the active tab changes (for two-way binding).
+   */
+  @Output() activeIdChange = new EventEmitter<string | null>();
+  /**
+   * Detailed change event emitted on active tab updates.
+   */
+  @Output() changed = new EventEmitter<TabChangeEvent>();
+
+  /**
+   * Optional projected template for tab labels.
+   */
+  @ContentChild('frgTabLabel', { read: TemplateRef }) labelTemplate?: TemplateRef<TabItemContext>;
+  /**
+   * Optional projected template for tab panels.
+   */
+  @ContentChild('frgTabContent', { read: TemplateRef }) contentTemplate?: TemplateRef<TabItemContext>;
+  /**
+   * Optional projected template for tab icons.
+   */
+  @ContentChild('frgTabIcon', { read: TemplateRef }) iconTemplate?: TemplateRef<TabItemContext>;
+
+  /**
+   * References to rendered tab buttons for keyboard focus.
+   */
+  @ViewChildren('tabBtn') tabButtons!: QueryList<ElementRef<HTMLButtonElement>>;
+  /**
+   * References to rendered panel elements for focus management.
+   */
+  @ViewChildren('panelBody') panelBodies!: QueryList<ElementRef<HTMLElement>>;
+
+  /**
+   * Normalized copy of `items` with generated ids and active flags.
+   */
+  viewItems: TabItem[] = [];
+  /**
+   * Internal counter used for deterministic id generation.
+   */
+  private uidCounter = 0;
+
+  /**
+   * Syncs inputs into internal view state and resolves active tab.
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['items']) {
+      this.viewItems = this.normalizeItems(this.items);
+      const initialActive = this.resolveActiveId(this.activeId);
+      this.setActiveId(initialActive, false);
+    }
+
+    if (changes['activeId'] && !changes['activeId'].firstChange) {
+      this.setActiveId(this.activeId, false);
+    }
+  }
+
+  /**
+   * Determines whether a given tab id matches the current active id.
+   */
+  isActive(id?: string | null): boolean {
+    return !!id && this.activeId === id;
+  }
+
+  /**
+   * Builds the DOM id for a tab element.
+   */
+  tabId(id: string): string {
+    return `${id}-tab`;
+  }
+
+  /**
+   * Builds the DOM id for a panel element.
+   */
+  panelId(id: string): string {
+    return `${id}-panel`;
+  }
+
+  /**
+   * Handles click selection for a tab at the given index.
+   */
+  onTabClick(index: number, event: Event): void {
+    event.preventDefault();
+    this.selectAt(index);
+  }
+
+  /**
+   * Keyboard interaction handler to navigate and activate tabs.
+   */
+  onTabKeydown(event: KeyboardEvent, index: number): void {
+    const key = event.key;
+    const tabs = this.tabButtons?.toArray() || [];
+    if (!tabs.length) {
+      return;
+    }
+
+    if (key === 'Enter' || key === ' ') {
+      event.preventDefault();
+      this.selectAt(index);
+      return;
+    }
+
+    if (key === 'ArrowRight' || key === 'ArrowDown') {
+      event.preventDefault();
+      this.focusTab((index + 1) % tabs.length);
+    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+      event.preventDefault();
+      this.focusTab((index - 1 + tabs.length) % tabs.length);
+    } else if (key === 'Home') {
+      event.preventDefault();
+      this.focusTab(0);
+    } else if (key === 'End') {
+      event.preventDefault();
+      this.focusTab(tabs.length - 1);
+    }
+  }
+
+  /**
+   * Builds a template context for projected templates.
+   */
+  buildContext<T = unknown>(item: TabItem<T>, index: number): TabItemContext<T> {
+    return {
+      $implicit: item,
+      item,
+      index,
+      active: this.isActive(item.id),
+      select: () => this.selectAt(index)
+    };
+  }
+
+  /**
+   * Selects the tab at the given index if enabled and different.
+   */
+  private selectAt(index: number): void {
+    const item = this.viewItems[index];
+    if (!item || item.disabled || !item.id || this.isActive(item.id)) {
+      return;
+    }
+    this.setActiveId(item.id, true, item, index);
+  }
+
+  /**
+   * Ensures every tab has an id and returns a new items array.
+   */
+  private normalizeItems(items: TabItem[]): TabItem[] {
+    return (items || []).map((item, index) => ({
+      ...item,
+      id: item.id ?? this.generateId(index)
+    }));
+  }
+
+  /**
+   * Generates a deterministic id for tabs lacking one.
+   */
+  private generateId(index: number): string {
+    this.uidCounter += 1;
+    return `frg-tab-${index}-${this.uidCounter}`;
+  }
+
+  /**
+   * Resolves the next active id based on provided preference and availability.
+   */
+  private resolveActiveId(candidate: string | null): string | null {
+    const available = (this.viewItems || []).filter(item => !item.disabled);
+    if (!available.length) {
+      return null;
+    }
+    if (candidate && available.some(item => item.id === candidate)) {
+      return candidate;
+    }
+    const preselected = available.find(item => item.active && item.id);
+    if (preselected?.id) {
+      return preselected.id;
+    }
+    return available[0].id ?? null;
+  }
+
+  /**
+   * Applies the active id, updates view state, emits events, and manages focus.
+   */
+  private setActiveId(nextId: string | null, emit: boolean, item?: TabItem, index?: number): void {
+    const resolved = this.resolveActiveId(nextId);
+    this.activeId = resolved;
+    this.viewItems = this.viewItems.map(viewItem => ({
+      ...viewItem,
+      active: resolved ? viewItem.id === resolved : false
+    }));
+
+    if (emit) {
+      this.activeIdChange.emit(this.activeId);
+      this.changed.emit({
+        id: this.activeId,
+        index: index ?? this.viewItems.findIndex(viewItem => viewItem.id === this.activeId),
+        item
+      });
+    }
+
+    if (this.focusPanelOnSelect && resolved) {
+      const targetIndex = index ?? this.viewItems.findIndex(viewItem => viewItem.id === resolved);
+      if (targetIndex >= 0) {
+        setTimeout(() => this.focusPanel(targetIndex), 0);
+      }
+    }
+  }
+
+  /**
+   * Moves focus to the tab at the given index.
+   */
+  private focusTab(index: number): void {
+    const tab = this.tabButtons?.get(index);
+    if (tab?.nativeElement) {
+      tab.nativeElement.focus();
+    }
+  }
+
+  /**
+   * Moves focus to the panel at the given index.
+   */
+  private focusPanel(index: number): void {
+    const panel = this.panelBodies?.get(index);
+    if (panel?.nativeElement) {
+      panel.nativeElement.focus();
+    }
+  }
+}