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

package/src/lib/components/status/tag/tag.component.scss

@@ -0,0 +1,140 @@
+@use './../../../../../assets/styles/scss/variables' as *;
+@use 'sass:color';
+
+:host {
+  .frg-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border-radius: 0.25rem;
+    white-space: nowrap;
+    transition: all 0.2s ease-in-out;
+
+    color: $color-dark-soft;
+    cursor: default;
+
+    &--primary {
+      background: color.scale($color-primary, $lightness: 90%);
+      border: 1px solid color.scale($color-primary, $lightness: 70%);
+      color: $color-primary-dark;
+    }
+
+    &--secondary {
+      background: color.scale($color-secondary, $lightness: 90%);
+      border: 1px solid color.scale($color-secondary, $lightness: 70%);
+      color: $color-secondary-dark;
+    }
+
+    &--tertiary {
+      background: color.scale($color-tertiary, $lightness: 90%);
+      border: 1px solid color.scale($color-tertiary, $lightness: 70%);
+      color: $color-tertiary-dark;
+    }
+
+    &--info {
+      background: color.scale($color-info, $lightness: 90%);
+      border: 1px solid color.scale($color-info, $lightness: 70%);
+      color: $color-info-dark;
+    }
+
+    &--warning {
+      background: color.scale($color-warning, $lightness: 90%);
+      border: 1px solid color.scale($color-warning, $lightness: 70%);
+      color: $color-warning-dark;
+    }
+
+    &--danger {
+      background: color.scale($color-danger, $lightness: 90%);
+      border: 1px solid color.scale($color-danger, $lightness: 70%);
+      color: $color-danger-dark;
+    }
+
+    &--success {
+      background: color.scale($color-success, $lightness: 90%);
+      border: 1px solid color.scale($color-success, $lightness: 70%);
+      color: $color-success-dark;
+    }
+
+    &--dark {
+      background: $color-dark;
+      border: 1px solid color.scale($color-dark, $lightness: -10%);
+      color: $color-light;
+    }
+
+    &--light {
+      background: $color-light;
+      border: 1px solid color.scale($color-dark, $lightness: 85%);
+      color: $color-dark;
+    }
+
+    &--sm {
+      font-size: 0.875rem;
+      padding: 0.1rem 0.5rem;
+    }
+
+    &--md {
+      font-size: 1rem;
+      padding: 0.15rem 0.75rem;
+    }
+
+    &--lg {
+      font-size: 1.125rem;
+      padding: 0.2rem 1rem;
+    }
+
+    &__icon {
+      display: flex;
+      align-items: center;
+      font-size: 0.9em;
+    }
+
+    &__label {
+      display: inline-block;
+    }
+
+    &__remove {
+      color: inherit;
+      background: transparent;
+      border: none;
+      padding: 0;
+      margin-left: 0.25rem;
+      cursor: pointer;
+      font-size: 1.2rem;
+      line-height: 1;
+      transition: opacity 0.2s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgba($color-primary, 0.5);
+        outline-offset: 2px;
+      }
+
+      &:focus:not(:focus-visible) {
+        outline: none;
+      }
+    }
+
+    &--disabled {
+      background: color.scale($color-dark, $lightness: 92%);
+      border: 1px solid color.scale($color-dark, $lightness: 80%);
+      color: $color-dark-soft;
+      opacity: 0.6;
+      cursor: not-allowed;
+      pointer-events: none;
+
+      &:focus {
+        outline: none;
+      }
+      
+      &__icon,
+      &__remove {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+    }
+
+  }
+}

package/src/lib/components/status/tag/tag.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TagComponent } from './tag.component';
+
+describe('TagComponent', () => {
+  let fixture: ComponentFixture<TagComponent>;
+  let component: TagComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TagComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TagComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders the label', () => {
+    component.label = 'Draft';
+
+    fixture.detectChanges();
+
+    const label = fixture.debugElement.query(By.css('.frg-tag__label'));
+    expect(label.nativeElement.textContent).toContain('Draft');
+  });
+
+  it('applies disabled class when disabled', () => {
+    component.disabled = true;
+
+    fixture.detectChanges();
+
+    const host = fixture.debugElement.query(By.css('.frg-tag'));
+    expect(host.nativeElement.classList).toContain('frg-tag--disabled');
+  });
+
+  it('emits removed when removable and not disabled', () => {
+    const emitSpy = spyOn(component.removed, 'emit');
+    component.removable = true;
+
+    fixture.detectChanges();
+
+    const removeButton = fixture.debugElement.query(By.css('.frg-tag__remove'));
+    removeButton.nativeElement.click();
+
+    expect(emitSpy).toHaveBeenCalledWith(component.id);
+  });
+});

package/src/lib/components/status/tag/tag.component.ts

@@ -0,0 +1,83 @@
+import { NgClass } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { generateUUID } from '../../../utils/uuid.utils';
+import { Tag, TTagIconPosition, TTagSize, TTagType } from './tag.type';
+
+/**
+ * TagComponent
+ *
+ * A small UI element used to display labeled statuses, metadata, or categories.
+ * Supports icons, removable behavior, disabled state, and standardized design-
+ * system styles and sizes. Implements the shared `Tag` interface to ensure
+ * consistency across all status-driven UI components (Tag, Badge, Chip, etc.).
+ */
+@Component({
+  selector: 'frg-tag',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+  imports: [NgClass]
+})
+export class TagComponent implements Tag {
+
+  /**
+   * Unique identifier for the tag.
+   * Automatically generated if not provided by the parent.
+   * Used primarily for tracking and removal events.
+   */
+  @Input() id: string = generateUUID();
+
+  /**
+   * Text content displayed inside the tag.
+   */
+  @Input() label?: string = '';
+
+  /**
+   * Visual style of the tag.
+   * Corresponds to design-system status color tokens.
+   * Example: 'primary', 'secondary', 'success', 'warning', etc.
+   */
+  @Input() style: TTagType = 'primary';
+
+  /**
+   * Size variant of the tag.
+   * Options follow the standardized sizing tokens: 'sm', 'md', or 'lg'.
+   */
+  @Input() size: TTagSize = 'md';
+
+  /**
+   * Optional icon class displayed before the label.
+   * Example: 'frg-icon-info', 'frg-icon-alert'.
+   */
+  @Input() icon: string | undefined = undefined;
+
+  /**
+   *  Position of the icon
+   */
+  @Input() iconPosition: TTagIconPosition = 'end';
+
+  /**
+   * Whether the tag is disabled.
+   * Disables interactions and applies the disabled visual style.
+   */
+  @Input() disabled = false;
+
+  /**
+   * If true, displays a remove button allowing the tag to be dismissed.
+   */
+  @Input() removable = false;
+
+  /**
+   * Emits the ID of the tag when it is removed.
+   */
+  @Output() removed = new EventEmitter<string>();
+
+  /**
+   * Emits the `removed` event when the remove button is clicked,
+   * provided the tag is not disabled and removal is allowed.
+   */
+  onRemove(): void {
+    if (!this.disabled && this.removable) {
+      this.removed.emit(this.id);
+    }
+  }
+}

package/src/lib/components/status/tag/tag.type.ts

@@ -0,0 +1,42 @@
+import { StatusIndicator } from "../status.interface";
+import { TBaseStatusIconPosition, TBaseStatusSize, TBaseStatusStyle } from "../status.type";
+
+/**
+ * TagType
+ *
+ * Alias for `TBaseStatusStyle`.
+ * Represents the visual style of a tag according to the design system.
+ * Example: 'primary', 'secondary', 'success', etc.
+ */
+export type TTagType = TBaseStatusStyle;
+
+/**
+ * TagSize
+ *
+ * Alias for `TBaseStatusSize`.
+ * Defines the size of the tag. Options: 'sm', 'md', 'lg'.
+ */
+export type TTagSize = TBaseStatusSize;
+
+/**
+ * TagIconPosition
+ *
+ * Alias for `TBaseStatusIconPosition`.
+ * Defines the icon position of the icon in the tag. Options: 'start' or 'end'.
+ */
+export type TTagIconPosition = TBaseStatusIconPosition;
+/**
+ * Tag
+ *
+ * A UI element that extends the shared `StatusIndicator` interface.
+ * Represents a labeled status, optionally removable.
+ *
+ * @extends StatusIndicator
+ */
+export interface Tag extends StatusIndicator {
+  /**
+   * If true, the tag can be removed by the user.
+   * Triggers the `removed` event in the component.
+   */
+  removable?: boolean;
+}

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

@@ -0,0 +1,83 @@
+<div
+  class="frg-stepper"
+  [class.is-animated]="animated"
+  [attr.data-orientation]="orientation"
+  [attr.data-motion]="motion">
+  <div class="frg-stepper__header" role="tablist" [attr.aria-orientation]="orientation">
+    @for (step of viewSteps; track step.id; let i = $index) {
+      <button
+        type="button"
+        #stepBtn
+        class="frg-stepper__step"
+        role="tab"
+        [class.is-active]="isActive(step.id)"
+        [class.is-disabled]="isStepDisabled(step, i)"
+        [attr.id]="stepId(step.id)"
+        [attr.aria-controls]="panelId(step.id)"
+        [attr.aria-selected]="isActive(step.id)"
+        [attr.aria-current]="isActive(step.id) ? 'step' : null"
+        [attr.aria-disabled]="isStepDisabled(step, i) || null"
+        [attr.aria-invalid]="isStepError(step) || null"
+        [attr.tabindex]="tabIndexFor(i)"
+        [disabled]="isStepDisabled(step, i)"
+        (click)="onStepClick(i, $event)"
+        (keydown)="onStepKeydown($event, i)">
+        <span class="frg-stepper__indicator" [attr.data-status]="stepStatus(step, i)">
+          @if (step.indicatorTemplate || indicatorTemplate) {
+            <ng-container
+              [ngTemplateOutlet]="step.indicatorTemplate || indicatorTemplate"
+              [ngTemplateOutletContext]="buildContext(step, i)">
+            </ng-container>
+          } @else {
+            <span class="frg-stepper__indicator-text">{{ indicatorText(step, i) }}</span>
+          }
+          <span class="frg-stepper__sr">{{ indicatorLabel(step, i) }}</span>
+        </span>
+        <span class="frg-stepper__label">
+          @if (step.labelTemplate || labelTemplate) {
+            <ng-container
+              [ngTemplateOutlet]="step.labelTemplate || labelTemplate"
+              [ngTemplateOutletContext]="buildContext(step, i)">
+            </ng-container>
+          } @else {
+            <span class="frg-stepper__label-text">{{ step.label }}</span>
+            @if (step.description) {
+              <small class="frg-stepper__label-desc">{{ step.description }}</small>
+            }
+            @if (step.optional) {
+              <span class="frg-stepper__label-optional">Optional</span>
+            }
+          }
+        </span>
+      </button>
+      @if (i < viewSteps.length - 1) {
+        <span class="frg-stepper__connector" [class.is-complete]="isStepComplete(step)" aria-hidden="true"></span>
+      }
+    }
+  </div>
+
+  <div class="frg-stepper__panels">
+    @for (step of viewSteps; track step.id; let i = $index) {
+      <section
+        class="frg-stepper__panel"
+        #panelBody
+        role="tabpanel"
+        [class.is-active]="isActive(step.id)"
+        [attr.id]="panelId(step.id)"
+        [attr.aria-labelledby]="stepId(step.id)"
+        [hidden]="!isActive(step.id)"
+        [attr.tabindex]="isActive(step.id) ? 0 : -1">
+        @if (step.contentTemplate || contentTemplate) {
+          <ng-container
+            [ngTemplateOutlet]="step.contentTemplate || contentTemplate"
+            [ngTemplateOutletContext]="buildContext(step, i)">
+          </ng-container>
+        } @else if (step.content) {
+          {{ step.content }}
+        } @else if (step.data; as payload) {
+          {{ payload }}
+        }
+      </section>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,196 @@
+@use "sass:color";
+@use './../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+  font-family: $base-font;
+}
+
+.frg-stepper {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  --frg-stepper-offset: 10px;
+
+  &[data-orientation='vertical'] {
+    .frg-stepper__header {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.65rem;
+    }
+
+    .frg-stepper__step {
+      align-items: flex-start;
+    }
+
+    .frg-stepper__connector {
+      width: 2px;
+      height: 1.5rem;
+      margin-left: 1.05rem;
+    }
+  }
+}
+
+.frg-stepper[data-motion='previous'] {
+  --frg-stepper-offset: -10px;
+}
+
+.frg-stepper__header {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  flex-wrap: wrap;
+}
+
+.frg-stepper__step {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0.45rem 0.6rem;
+  border-radius: 0.65rem;
+  color: $color-dark-neutral;
+  text-align: left;
+  transition:
+    color 0.16s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &.is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(.is-disabled) {
+    background-color: color.scale($color-light, $lightness: -2%);
+    color: $color-dark;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px color.scale($color-primary, $lightness: 32%);
+  }
+
+  &.is-active {
+    color: $color-dark;
+  }
+}
+
+.frg-stepper__indicator {
+  position: relative;
+  width: 2.1rem;
+  height: 2.1rem;
+  border-radius: 999px;
+  border: 1px solid $color-light-soft;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $color-light;
+  color: $color-dark;
+  font-size: $font-size-xs;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+
+  &[data-status='active'] {
+    background-color: $color-primary;
+    border-color: $color-primary;
+    color: $color-light;
+    box-shadow: $box-shadow-primary-sm;
+  }
+
+  &[data-status='completed'] {
+    background-color: $color-success;
+    border-color: $color-success;
+    color: $color-light;
+  }
+
+  &[data-status='error'] {
+    background-color: $color-danger;
+    border-color: $color-danger;
+    color: $color-light;
+  }
+}
+
+.frg-stepper__indicator-text {
+  font-size: $font-size-xs;
+  text-transform: uppercase;
+}
+
+.frg-stepper__label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.frg-stepper__label-text {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.frg-stepper__label-desc {
+  font-size: $font-size-2xs;
+  color: $color-dark-soft;
+}
+
+.frg-stepper__label-optional {
+  font-size: $font-size-2xs;
+  color: $color-dark-soft;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.frg-stepper__connector {
+  flex: 1 1 auto;
+  height: 2px;
+  background-color: $color-light-soft;
+  border-radius: 999px;
+
+  &.is-complete {
+    background-color: $color-success;
+  }
+}
+
+.frg-stepper__panels {
+  position: relative;
+}
+
+.frg-stepper__panel {
+  padding: 0.75rem 0;
+  color: $color-dark-neutral;
+  outline: none;
+  line-height: 1.5;
+  opacity: 0;
+  transform: translateX(var(--frg-stepper-offset));
+
+  &.is-active {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  &:focus-visible {
+    outline: 2px solid $color-primary;
+    outline-offset: 2px;
+  }
+}
+
+.frg-stepper.is-animated {
+  .frg-stepper__panel {
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+}
+
+.frg-stepper__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}