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

package/package.json

@@ -1,22 +1,35 @@
-{
-  "name": "@tacdaed/fragments",
-  "version": "1.0.0-beta.2",
-  "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"
-  },
-  "devDependencies": {
-    "@types/uuid": "9.0.8",
-    "typescript": "~5.5.4"
-  },
-  "sideEffects": false
-}
+{
+  "name": "@tacdaed/fragments",
+  "version": "1.0.0-beta.20",
+  "peerDependencies": {
+    "@angular/common": "^20.2.0",
+    "@angular/core": "^20.2.0",
+    "@angular/forms": "^20.2.0",
+    "rxjs": "^7.8.0",
+    "@fortawesome/fontawesome-free": "^7.0.0",
+    "animejs": "^4.3.5",
+    "bootstrap": "^5.3.0",
+    "highlight.js": "^11.11.0"
+  },
+  "dependencies": {
+    "tslib": "2.3.0",
+    "uuid": "11.1.0"
+  },
+  "files": [
+    "fesm2022",
+    "index.d.ts",
+    "assets"
+  ],
+  "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;
-      }
-    }
-  }
-}