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

package/package.json

@@ -1,22 +1,29 @@
-{
-  "name": "@tacdaed/fragments",
-  "version": "1.0.0-beta.1",
-  "peerDependencies": {
-    "@angular/common": "20.2.3",
-    "@angular/core": "20.2.3",
-    "@fortawesome/fontawesome-free": "6.5.1",
-    "animejs": "4.1.3",
-    "bootstrap": "5.3.2",
-    "highlight.js": "11.11.1",
-    "rxjs": "7.8.0"
-  },
-  "dependencies": {
-    "tslib": "2.3.0",
-    "uuid": "11.1.0"
-  },
-  "devDependencies": {
-    "@types/uuid": "9.0.8",
-    "typescript": "~5.5.4"
-  },
-  "sideEffects": false
-}
+{
+  "name": "@tacdaed/fragments",
+  "version": "1.0.0-beta.3",
+  "peerDependencies": {
+    "@angular/common": "^20.2.0",
+    "@angular/core": "^20.2.0",
+    "rxjs": "^7.8.0",
+    "@fortawesome/fontawesome-free": "^6.5.0",
+    "animejs": "^4.1.0",
+    "bootstrap": "^5.3.0",
+    "highlight.js": "^11.11.0"
+  },
+  "dependencies": {
+    "tslib": "2.3.0",
+    "uuid": "11.1.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/tacdaed-fragments.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/tacdaed-fragments.mjs"
+    }
+  }
+}

package/ng-package.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/fragments",
-  "allowedNonPeerDependencies": [
-    "uuid"
-  ],
-  "lib": {
-    "entryFile": "src/public-api.ts",
-    "styleIncludePaths": [
-      "projects/fragments/assets/styles/scss"
-    ]
-  },
-  "assets": [
-    {
-      "glob": "**/*.*",
-      "input": "./assets/resources",
-      "output": "/assets/resources"
-    },
-    {
-      "glob": "**/*.scss",
-      "input": "./assets/styles/scss",
-      "output": "/assets/styles/scss"
-    }
-  ]
-}

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

@@ -1,103 +0,0 @@
-<div
-  class="frg-accordion"
-  [class.frg-accordion--multi]="multi"
-  [class.is-animated]="animated"
-  [attr.data-style]="styleType"
-  [attr.data-size]="size">
-  @for (item of viewItems; track item?.id; let i = $index) {
-    <div
-      class="frg-accordion__item"
-      [attr.data-style]="item?.style || styleType"
-      [attr.data-size]="item?.size || size"
-      [class.is-expanded]="isExpanded(item?.id)"
-      [class.is-disabled]="item?.disabled">
-      <button
-        type="button"
-        #headerBtn
-        class="frg-accordion__header"
-        [attr.data-size]="item?.size || size"
-        [attr.id]="headerId(item!.id!)"
-        [attr.aria-controls]="panelId(item!.id!)"
-        [attr.aria-expanded]="isExpanded(item?.id)"
-        [attr.aria-disabled]="item?.disabled || null"
-        [disabled]="item?.disabled"
-        (click)="onHeaderClick(i, $event)"
-        (keydown)="onHeaderKeydown($event, i)">
-        <span class="frg-accordion__header-content">
-          @if (item?.iconTemplate || iconTemplate || item?.icon) {
-            <span class="frg-accordion__icon" aria-hidden="true">
-              @if (item?.iconTemplate) {
-                <ng-container
-                  [ngTemplateOutlet]="item?.iconTemplate"
-                  [ngTemplateOutletContext]="buildContext(item!, i)">
-                </ng-container>
-              } @else if (iconTemplate) {
-                <ng-container
-              [ngTemplateOutlet]="iconTemplate"
-              [ngTemplateOutletContext]="buildContext(item!, i)">
-            </ng-container>
-          } @else if (item?.icon) {
-            <span class="frg-accordion__icon-shape">{{ item?.icon }}</span>
-          }
-        </span>
-      }
-
-          <span class="frg-accordion__heading">
-            @if (item?.headerTemplate || headerTemplate) {
-              <ng-container
-                [ngTemplateOutlet]="item?.headerTemplate || headerTemplate"
-                [ngTemplateOutletContext]="buildContext(item!, i)">
-              </ng-container>
-            } @else {
-              <span class="frg-accordion__title">{{ item?.title }}</span>
-              @if (item?.subtitle) {
-                <span class="frg-accordion__subtitle">{{ item?.subtitle }}</span>
-              }
-            }
-          </span>
-        </span>
-
-        <span
-          class="frg-accordion__chevron"
-          aria-hidden="true"
-          [class.is-custom]="item?.toggleIconTemplate || toggleIconTemplate"
-          [class.is-open]="isExpanded(item?.id)">
-          @if (item?.toggleIconTemplate || toggleIconTemplate) {
-            <ng-container
-              [ngTemplateOutlet]="item?.toggleIconTemplate || toggleIconTemplate"
-              [ngTemplateOutletContext]="buildContext(item!, i)">
-            </ng-container>
-          } @else {
-            <span class="frg-accordion__chevron-icon"></span>
-          }
-        </span>
-      </button>
-
-      <section
-        class="frg-accordion__panel-wrapper"
-        [class.is-open]="isExpanded(item?.id)"
-        [attr.id]="panelId(item!.id!)"
-        [attr.aria-labelledby]="headerId(item!.id!)"
-        [attr.aria-hidden]="!isExpanded(item?.id)">
-        <div
-          class="frg-accordion__panel"
-          #panelBody
-          tabindex="-1"
-          [class.is-open]="isExpanded(item?.id)">
-          @if (item?.contentTemplate || contentTemplate) {
-            <ng-container
-              [ngTemplateOutlet]="item?.contentTemplate || contentTemplate"
-              [ngTemplateOutletContext]="buildContext(item!, i)">
-            </ng-container>
-          } @else {
-            @if (item?.content) {
-              {{ item?.content }}
-            } @else if (item?.data; as payload) {
-              {{ payload }}
-            }
-          }
-        </div>
-      </section>
-    </div>
-  }
-</div>

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

@@ -1,382 +0,0 @@
-@use "sass:color";
-@use "sass:list";
-@use './../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-  font-family: $base-font;
-}
-
-.frg-accordion {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  background: transparent;
-
-  &.is-animated {
-    .frg-accordion__panel-wrapper {
-      transition: grid-template-rows 0.22s ease, opacity 0.22s ease;
-    }
-
-    .frg-accordion__panel {
-      transition: padding 0.22s ease, opacity 0.22s ease;
-    }
-  }
-
-  &__item {
-    position: relative;
-    background: transparent;
-    overflow: hidden;
-    border-bottom: 1px solid $frg-accordion-border-color;
-    transition:
-      background-color 0.2s ease,
-      box-shadow 0.2s ease;
-
-    &.is-expanded {
-      background: $frg-accordion-header-background-color;
-    }
-
-    &.is-disabled {
-      opacity: 0.65;
-      cursor: not-allowed;
-      background: color.scale($color-light, $lightness: -1%);
-      border-bottom-color: $frg-accordion-border-color;
-
-      & .frg-accordion__header {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &__header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border: none;
-    gap: 1rem;
-    padding: 0.9rem 1rem;
-    background: transparent;
-    color: $color-dark;
-    cursor: pointer;
-    text-align: left;
-    transition: color 0.2s ease, background-color 0.2s ease;
-
-    &:hover {
-      color: $color-dark-neutral;
-      background-color: color.scale($color-light, $lightness: -25%);
-    }
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: inset 0 -2px 0 $color-primary;
-    }
-
-    .frg-accordion__header-content {
-      display: flex;
-      align-items: center;
-      gap: 0.85rem;
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-
-    .frg-accordion__icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 2.5rem;
-      height: 2.5rem;
-      border-radius: 0.65rem;
-      background-color: color.scale($color-light, $lightness: -4%);
-      color: $color-dark;
-      flex-shrink: 0;
-    }
-
-    .frg-accordion__icon-shape {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: $font-size-lg;
-      line-height: 1;
-      width: 100%;
-      height: 100%;
-    }
-
-    .frg-accordion__heading {
-      display: flex;
-      flex-direction: column;
-      gap: 0.15rem;
-      min-width: 0;
-    }
-
-    .frg-accordion__title {
-      font-size: $font-size-md;
-      font-weight: 600;
-      line-height: 1.3;
-    }
-
-    .frg-accordion__subtitle {
-      font-size: $font-size-sm;
-      color: $color-dark-soft;
-      line-height: 1.2;
-    }
-
-    .frg-accordion__chevron {
-      width: 1.5rem;
-      height: 1.5rem;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      transition: transform 0.16s ease;
-
-      &.is-custom {
-        width: auto;
-        height: auto;
-      }
-    }
-
-    .frg-accordion__chevron-icon {
-      display: inline-block;
-      width: 0.5rem;
-      height: 0.5rem;
-      border-right: 2px solid $color-dark-neutral;
-      border-bottom: 2px solid $color-dark-neutral;
-      transform: rotate(45deg);
-      transition: transform 0.16s ease, color 0.2s ease, border-color 0.2s ease;
-    }
-
-    .frg-accordion__chevron.is-custom .frg-accordion__chevron-icon {
-      display: none;
-    }
-  }
-
-  &__item.is-expanded {
-    .frg-accordion__chevron-icon {
-      transform: rotate(225deg);
-    }
-
-    .frg-accordion__chevron.is-custom {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__panel-wrapper {
-    display: grid;
-    grid-template-rows: 0fr;
-    opacity: 0;
-    overflow: hidden;
-    background-color: $color-light;
-
-    &.is-open {
-      grid-template-rows: 1fr;
-      opacity: 1;
-    }
-  }
-
-  &__panel {
-    padding: 0 1rem;
-    color: $color-dark-neutral;
-    outline: none;
-    line-height: 1.5;
-    overflow: hidden;
-    opacity: 0;
-
-    &.is-open {
-      padding: 0.9rem 1rem 1rem;
-      opacity: 1;
-    }
-
-    &:focus-visible {
-      outline: 2px solid $color-primary;
-      outline-offset: 2px;
-    }
-  }
-}
-
-.frg-accordion__item[data-size='medium'] {
-  .frg-accordion__header {
-    padding: 0.75rem 0.9rem;
-    gap: 0.85rem;
-  }
-
-  .frg-accordion__icon {
-    width: 2.25rem;
-    height: 2.25rem;
-  }
-
-  .frg-accordion__title {
-    font-size: $font-size-sm;
-  }
-
-  .frg-accordion__subtitle {
-    font-size: $font-size-xs;
-  }
-
-  .frg-accordion__chevron {
-    width: 1.35rem;
-    height: 1.35rem;
-  }
-
-  .frg-accordion__panel {
-    padding: 0 0.9rem;
-
-    &.is-open {
-      padding: 0.75rem 0.9rem 0.9rem;
-    }
-  }
-}
-
-.frg-accordion__item[data-size='small'] {
-  .frg-accordion__header {
-    padding: 0.6rem 0.75rem;
-    gap: 0.65rem;
-  }
-
-  .frg-accordion__icon {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 0.5rem;
-  }
-
-  .frg-accordion__title {
-    font-size: $font-size-xs;
-  }
-
-  .frg-accordion__subtitle {
-    font-size: $font-size-2xs;
-  }
-
-  .frg-accordion__chevron {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  .frg-accordion__chevron-icon {
-    width: 0.45rem;
-    height: 0.45rem;
-  }
-
-  .frg-accordion__panel {
-    padding: 0 0.75rem;
-
-    &.is-open {
-      padding: 0.6rem 0.75rem 0.75rem;
-    }
-  }
-}
-
-$accordion-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
-);
-
-@each $variant, $tone in $accordion-colors {
-  .frg-accordion__item[data-style="#{$variant}"] {
-    $solid-variants: ('primary', 'secondary', 'tertiary', 'dark', 'light');
-    $outline-variants: (
-      'outline-primary',
-      'outline-secondary',
-      'outline-tertiary',
-      'outline-info',
-      'outline-success',
-      'outline-warning',
-      'outline-danger',
-      'outline-dark',
-      'outline-light'
-    );
-
-    @if list.index($outline-variants, $variant) {
-      border-bottom-color: color.scale($tone, $lightness: -5%);
-
-      .frg-accordion__panel-wrapper {
-        border-top-color: color.scale($tone, $lightness: -5%);
-      }
-    }
-
-    .frg-accordion__header {
-      @if list.index($solid-variants, $variant) {
-        $header-tone: if($variant == 'dark', color.scale($tone, $lightness: 10%), $tone);
-        background-color: $header-tone;
-        color: if($variant == 'light', $color-dark, $color-light);
-
-        &:hover {
-          background-color: color.scale($header-tone, $lightness: if($variant == 'light', -6%, -4%));
-        }
-
-        .frg-accordion__subtitle {
-          color: if(
-            $variant == 'light',
-            color.scale($color-dark-soft, $lightness: -10%),
-            color.scale($color-light, $lightness: -8%)
-          );
-        }
-
-        .frg-accordion__icon {
-          background-color: color.scale($header-tone, $lightness: if($variant == 'light', 8%, -8%));
-          color: if($variant == 'light', $color-dark, $color-light);
-        }
-      } @else {
-        color: if($variant == 'light', $color-dark, color.scale($tone, $lightness: -5%));
-        &:hover {
-          background-color: color.scale($tone, $lightness: 90%);
-        }
-      }
-    }
-
-    .frg-accordion__chevron-icon {
-      @if list.index($solid-variants, $variant) {
-        border-color: if($variant == 'light', $color-dark, $color-light);
-      } @else {
-        border-color: if($variant == 'light', $color-dark-soft, color.scale($tone, $lightness: -5%));
-      }
-    }
-
-    &.is-expanded {
-      box-shadow: none;
-    }
-
-    &.is-disabled {
-      border-bottom-color: $frg-accordion-border-color;
-
-      .frg-accordion__panel-wrapper {
-        border-top-color: $frg-accordion-border-color;
-      }
-
-      .frg-accordion__header {
-        background-color: $color-light;
-        color: $color-dark;
-
-        .frg-accordion__subtitle {
-          color: $color-dark-soft;
-        }
-
-        .frg-accordion__icon {
-          background-color: color.scale($color-light, $lightness: -6%);
-          color: $color-dark-soft;
-        }
-      }
-
-      .frg-accordion__chevron-icon {
-        border-color: $color-dark-soft;
-      }
-    }
-  }
-}

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

@@ -1,147 +0,0 @@
-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();
-  });
-});