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

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

@@ -1,140 +0,0 @@
-@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

@@ -1,47 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,83 +0,0 @@
-<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

@@ -1,196 +0,0 @@
-@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;
-}