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

package/README.md

@@ -13,7 +13,7 @@ A reusable Angular library for UI fragments, code highlighting, and more.
 Install the library in your Angular project:
 
 ```sh
-npm install fragments
+npm install @tacdaed/fragments
 ```
 
 ## Setup

package/ng-package.json

@@ -0,0 +1,25 @@
+{
+  "$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/package.json

@@ -1,29 +1,22 @@
-{
-  "name": "@tacdaed/fragments",
-  "version": "1.0.0-beta.0",
-  "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"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/fragments.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/fragments.mjs"
-    }
-  }
-}
+{
+  "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
+}

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

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

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