@tacdaed/fragments 1.0.0-beta.7 → 1.0.0-beta.9

package/assets/styles/scss/_fonts.scss

@@ -0,0 +1,122 @@
+/* ==========================================================================
+   FONT DEFINITIONS
+   Path: assets/resources/fonts/
+   ========================================================================== */
+
+/* =======================
+   OPEN SANS
+   ======================= */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/assets/resources/fonts/OpenSans/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/assets/resources/fonts/OpenSans/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
+}
+
+/* =======================
+   ROBOTO
+   ======================= */
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}

package/fesm2022/tacdaed-fragments.mjs

@@ -1,5 +1,5 @@
 import * as i1 from '@angular/common';
-import { NgTemplateOutlet, NgClass, CommonModule, NgFor, formatDate, AsyncPipe } from '@angular/common';
+import { NgTemplateOutlet, NgClass, CommonModule, formatDate, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, TemplateRef, ViewChildren, ContentChild, Output, Input, Component, HostListener, inject, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, HostBinding, ElementRef, Renderer2, Directive, Pipe, Injector, LOCALE_ID } from '@angular/core';
 import { RouterLink, RouterLinkActive, Router, ActivatedRoute, NavigationEnd } from '@angular/router';
@@ -1556,11 +1556,11 @@ class BlobMorphComponent extends MorphBase {
         this.loadEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BlobMorphComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BlobMorphComponent, isStandalone: true, selector: "app-blob-morph", inputs: { imageUrl: "imageUrl", fillColor: "fillColor", pathStart: "pathStart", pathEnd: "pathEnd", duration: "duration" }, outputs: { loadEvent: "loadEvent" }, viewQueries: [{ propertyName: "morphPathRef", first: true, predicate: ["morphPath"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"blob-container\">\r\n  <svg\r\n    viewBox=\"0 0 200 200\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    class=\"blob-svg\"\r\n    [class.hidden]=\"!isLoaded\"\r\n  >\r\n    <defs>\r\n      <clipPath [attr.id]=\"clipId\" transform=\"translate(100 100)\">\r\n        <path #morphPath [attr.d]=\"pathStart\" />\r\n      </clipPath>\r\n      <path [attr.id]=\"'morph-path-end-' + clipId\" [attr.d]=\"pathEnd\" />\r\n    </defs>\r\n\r\n    @if (imageUrl) {\r\n      <image\r\n        [attr.href]=\"imageUrl\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        preserveAspectRatio=\"xMidYMid slice\"\r\n        [attr.clip-path]=\"'url(#' + clipId + ')'\"\r\n        (load)=\"onLoadEvent()\"\r\n      />\r\n    } @else {\r\n      <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n        <rect width=\"100%\" height=\"100%\" [attr.fill]=\"fillColor || '#ccc'\" />\r\n      </g>\r\n    }\r\n  </svg>\r\n\r\n  @if (!isLoaded) {\r\n    <frg-spinner [isOverlayItem]=\"true\"></frg-spinner>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}:host .blob-container{position:relative}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "frg-spinner", inputs: ["size", "isCentered", "isOverlay", "isOverlayItem", "label", "styleType"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BlobMorphComponent, isStandalone: true, selector: "frg-blob-morph", inputs: { imageUrl: "imageUrl", fillColor: "fillColor", pathStart: "pathStart", pathEnd: "pathEnd", duration: "duration" }, outputs: { loadEvent: "loadEvent" }, viewQueries: [{ propertyName: "morphPathRef", first: true, predicate: ["morphPath"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"blob-container\">\r\n  <svg\r\n    viewBox=\"0 0 200 200\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    class=\"blob-svg\"\r\n    [class.hidden]=\"!isLoaded\"\r\n  >\r\n    <defs>\r\n      <clipPath [attr.id]=\"clipId\" transform=\"translate(100 100)\">\r\n        <path #morphPath [attr.d]=\"pathStart\" />\r\n      </clipPath>\r\n      <path [attr.id]=\"'morph-path-end-' + clipId\" [attr.d]=\"pathEnd\" />\r\n    </defs>\r\n\r\n    @if (imageUrl) {\r\n      <image\r\n        [attr.href]=\"imageUrl\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        preserveAspectRatio=\"xMidYMid slice\"\r\n        [attr.clip-path]=\"'url(#' + clipId + ')'\"\r\n        (load)=\"onLoadEvent()\"\r\n      />\r\n    } @else {\r\n      <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n        <rect width=\"100%\" height=\"100%\" [attr.fill]=\"fillColor || '#ccc'\" />\r\n      </g>\r\n    }\r\n  </svg>\r\n\r\n  @if (!isLoaded) {\r\n    <frg-spinner [isOverlayItem]=\"true\"></frg-spinner>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}:host .blob-container{position:relative}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "frg-spinner", inputs: ["size", "isCentered", "isOverlay", "isOverlayItem", "label", "styleType"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BlobMorphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-blob-morph', imports: [SpinnerComponent], template: "<div class=\"blob-container\">\r\n  <svg\r\n    viewBox=\"0 0 200 200\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    class=\"blob-svg\"\r\n    [class.hidden]=\"!isLoaded\"\r\n  >\r\n    <defs>\r\n      <clipPath [attr.id]=\"clipId\" transform=\"translate(100 100)\">\r\n        <path #morphPath [attr.d]=\"pathStart\" />\r\n      </clipPath>\r\n      <path [attr.id]=\"'morph-path-end-' + clipId\" [attr.d]=\"pathEnd\" />\r\n    </defs>\r\n\r\n    @if (imageUrl) {\r\n      <image\r\n        [attr.href]=\"imageUrl\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        preserveAspectRatio=\"xMidYMid slice\"\r\n        [attr.clip-path]=\"'url(#' + clipId + ')'\"\r\n        (load)=\"onLoadEvent()\"\r\n      />\r\n    } @else {\r\n      <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n        <rect width=\"100%\" height=\"100%\" [attr.fill]=\"fillColor || '#ccc'\" />\r\n      </g>\r\n    }\r\n  </svg>\r\n\r\n  @if (!isLoaded) {\r\n    <frg-spinner [isOverlayItem]=\"true\"></frg-spinner>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}:host .blob-container{position:relative}\n"] }]
+            args: [{ selector: 'frg-blob-morph', imports: [SpinnerComponent], template: "<div class=\"blob-container\">\r\n  <svg\r\n    viewBox=\"0 0 200 200\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    class=\"blob-svg\"\r\n    [class.hidden]=\"!isLoaded\"\r\n  >\r\n    <defs>\r\n      <clipPath [attr.id]=\"clipId\" transform=\"translate(100 100)\">\r\n        <path #morphPath [attr.d]=\"pathStart\" />\r\n      </clipPath>\r\n      <path [attr.id]=\"'morph-path-end-' + clipId\" [attr.d]=\"pathEnd\" />\r\n    </defs>\r\n\r\n    @if (imageUrl) {\r\n      <image\r\n        [attr.href]=\"imageUrl\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        preserveAspectRatio=\"xMidYMid slice\"\r\n        [attr.clip-path]=\"'url(#' + clipId + ')'\"\r\n        (load)=\"onLoadEvent()\"\r\n      />\r\n    } @else {\r\n      <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n        <rect width=\"100%\" height=\"100%\" [attr.fill]=\"fillColor || '#ccc'\" />\r\n      </g>\r\n    }\r\n  </svg>\r\n\r\n  @if (!isLoaded) {\r\n    <frg-spinner [isOverlayItem]=\"true\"></frg-spinner>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}:host .blob-container{position:relative}\n"] }]
         }], propDecorators: { imageUrl: [{
                 type: Input
             }], fillColor: [{
@@ -1578,10 +1578,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 args: ['morphPath', { static: false }]
             }] } });
 
-class SparkleFieldComponent {
+class SparkleSectionComponent {
     constructor() {
-        this.width = 260;
-        this.height = 160;
+        /* Layout */
+        this.width = null;
+        this.height = null;
+        /* Sparkles */
         this.count = 12;
         this.minSize = 2;
         this.maxSize = 6;
@@ -1591,22 +1593,18 @@ class SparkleFieldComponent {
         this.loop = true;
         this.color = null;
         this.sparkles = [];
-        this.sparkleAnimations = [];
-        this.sparkleChangesSub = null;
-        this.fallbackWidth = 260;
-        this.fallbackHeight = 160;
+        this.animations = [];
+        this.changesSub = null;
     }
+    /* Host sizing (ONLY when provided) */
     get hostWidth() {
-        return this.widthStyle;
+        return this.width ? this.formatSize(this.width) : null;
     }
     get hostHeight() {
-        return this.heightStyle;
+        return this.height ? this.formatSize(this.height) : null;
     }
-    get hostMinWidth() {
-        return this.needsMinSize(this.width) ? `${this.fallbackWidth}px` : null;
-    }
-    get hostMinHeight() {
-        return this.needsMinSize(this.height) ? `${this.fallbackHeight}px` : null;
+    get hostColor() {
+        return this.color;
     }
     ngOnInit() {
         this.buildSparkles();
@@ -1617,91 +1615,72 @@ class SparkleFieldComponent {
             changes['maxSize'] ||
             changes['drift'] ||
             changes['minDuration'] ||
-            changes['maxDuration'] ||
-            changes['loop']) {
+            changes['maxDuration']) {
             this.buildSparkles();
             this.restartAnimation();
         }
     }
     ngAfterViewInit() {
-        this.sparkleChangesSub = this.sparkleRefs.changes.subscribe(() => this.restartAnimation());
+        this.changesSub = this.sparkleRefs.changes.subscribe(() => this.restartAnimation());
         this.restartAnimation();
     }
     ngOnDestroy() {
-        this.sparkleAnimations.forEach((animation) => animation.pause());
-        this.sparkleChangesSub?.unsubscribe();
+        this.animations.forEach(a => a.pause());
+        this.changesSub?.unsubscribe();
     }
     buildSparkles() {
         const count = Math.max(0, Math.floor(this.count));
         const minSize = Math.min(this.minSize, this.maxSize);
         const maxSize = Math.max(this.minSize, this.maxSize);
-        const minDuration = Math.min(this.minDuration, this.maxDuration);
-        const maxDuration = Math.max(this.minDuration, this.maxDuration);
+        const minDur = Math.min(this.minDuration, this.maxDuration);
+        const maxDur = Math.max(this.minDuration, this.maxDuration);
         this.sparkles = Array.from({ length: count }, () => ({
-            x: this.randomInRange(0, 100),
-            y: this.randomInRange(0, 100),
-            size: this.randomInRange(minSize, maxSize),
-            delay: this.randomInRange(0, 900),
-            duration: this.randomInRange(minDuration, maxDuration),
-            driftX: this.randomInRange(-this.drift, this.drift),
-            driftY: this.randomInRange(-this.drift, this.drift),
+            x: this.rand(0, 100),
+            y: this.rand(0, 100),
+            size: this.rand(minSize, maxSize),
+            delay: this.rand(0, 900),
+            duration: this.rand(minDur, maxDur),
+            driftX: this.rand(-this.drift, this.drift),
+            driftY: this.rand(-this.drift, this.drift),
         }));
     }
     restartAnimation() {
-        if (!this.sparkleRefs || this.sparkleRefs.length === 0) {
+        if (!this.sparkleRefs?.length)
             return;
-        }
-        this.sparkleAnimations.forEach((animation) => animation.pause());
-        this.sparkleAnimations = [];
-        const targets = this.sparkleRefs.toArray();
-        targets.forEach((ref, i) => {
+        this.animations.forEach(a => a.pause());
+        this.animations = [];
+        this.sparkleRefs.forEach((ref, i) => {
             const sparkle = this.sparkles[i];
-            if (!sparkle) {
+            if (!sparkle)
                 return;
-            }
-            const animation = animate(ref.nativeElement, {
+            const anim = animate(ref.nativeElement, {
                 translateX: [-sparkle.driftX, sparkle.driftX],
                 translateY: [-sparkle.driftY, sparkle.driftY],
                 scale: [0.7, 1.2],
                 opacity: [0.35, 1],
-                duration: sparkle.duration ?? 3000,
+                duration: sparkle.duration,
                 alternate: true,
                 loop: this.loop,
-                ease: 'inOut',
+                easing: 'easeInOutSine',
             });
             if (sparkle.delay > 0) {
-                animation.seek(sparkle.delay % (sparkle.duration || 3000));
+                anim.seek(sparkle.delay % sparkle.duration);
             }
-            this.sparkleAnimations.push(animation);
+            this.animations.push(anim);
         });
     }
-    randomInRange(min, max) {
-        if (min === max) {
-            return min;
-        }
+    rand(min, max) {
         return min + Math.random() * (max - min);
     }
-    get widthStyle() {
-        return this.formatSize(this.width);
-    }
-    get heightStyle() {
-        return this.formatSize(this.height);
-    }
     formatSize(value) {
-        if (typeof value === 'number') {
-            return `${value}px`;
-        }
-        return value;
+        return typeof value === 'number' ? `${value}px` : (value || '');
     }
-    needsMinSize(value) {
-        return typeof value === 'string' && value.trim().endsWith('%');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SparkleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: SparkleFieldComponent, isStandalone: true, selector: "frg-sparkle-field", inputs: { width: "width", height: "height", count: "count", minSize: "minSize", maxSize: "maxSize", drift: "drift", minDuration: "minDuration", maxDuration: "maxDuration", loop: "loop", color: "color" }, host: { properties: { "style.width": "this.hostWidth", "style.height": "this.hostHeight", "style.minWidth": "this.hostMinWidth", "style.minHeight": "this.hostMinHeight" } }, viewQueries: [{ propertyName: "sparkleRefs", predicate: ["sparkle"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"frg-sparkle-field\"\r\n  [style.--frg-sparkle-color]=\"color || null\"\r\n>\r\n  <span\r\n    #sparkle\r\n    *ngFor=\"let sparkle of sparkles\"\r\n    class=\"frg-sparkle\"\r\n    [style.left.%]=\"sparkle.x\"\r\n    [style.top.%]=\"sparkle.y\"\r\n    [style.width.px]=\"sparkle.size\"\r\n    [style.height.px]=\"sparkle.size\"\r\n  ></span>\r\n</div>\r\n", styles: [":host{display:inline-block}.frg-sparkle-field{position:relative;overflow:hidden;width:100%;height:100%}.frg-sparkle{position:absolute;border-radius:999px;background:var(--frg-sparkle-color, currentColor);opacity:.6;filter:blur(.2px);transform:translateZ(0);will-change:transform,opacity}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SparkleSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SparkleSectionComponent, isStandalone: true, selector: "frg-sparkle-section", inputs: { width: "width", height: "height", count: "count", minSize: "minSize", maxSize: "maxSize", drift: "drift", minDuration: "minDuration", maxDuration: "maxDuration", loop: "loop", color: "color" }, host: { properties: { "style.width": "this.hostWidth", "style.height": "this.hostHeight", "style.color": "this.hostColor" } }, viewQueries: [{ propertyName: "sparkleRefs", predicate: ["sparkle"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"frg-sparkle-layer\" aria-hidden=\"true\">\r\n  @for (sparkle of sparkles; track $index) {\r\n    <span\r\n      #sparkle\r\n      class=\"frg-sparkle\"\r\n      [style.left.%]=\"sparkle.x\"\r\n      [style.top.%]=\"sparkle.y\"\r\n      [style.width.px]=\"sparkle.size\"\r\n      [style.height.px]=\"sparkle.size\">\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<div class=\"frg-sparkle-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block;position:relative;overflow:hidden}.frg-sparkle-layer{position:absolute;inset:0;pointer-events:none;z-index:0}.frg-sparkle-content{position:relative;z-index:1}.frg-sparkle{position:absolute;border-radius:50%;background:radial-gradient(circle,currentColor 0%,#fdfdfd 35%,#3d3d3d 70%);opacity:.6;will-change:transform,opacity;transform:translateZ(0)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SparkleFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SparkleSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'frg-sparkle-field', imports: [NgFor], template: "<div\r\n  class=\"frg-sparkle-field\"\r\n  [style.--frg-sparkle-color]=\"color || null\"\r\n>\r\n  <span\r\n    #sparkle\r\n    *ngFor=\"let sparkle of sparkles\"\r\n    class=\"frg-sparkle\"\r\n    [style.left.%]=\"sparkle.x\"\r\n    [style.top.%]=\"sparkle.y\"\r\n    [style.width.px]=\"sparkle.size\"\r\n    [style.height.px]=\"sparkle.size\"\r\n  ></span>\r\n</div>\r\n", styles: [":host{display:inline-block}.frg-sparkle-field{position:relative;overflow:hidden;width:100%;height:100%}.frg-sparkle{position:absolute;border-radius:999px;background:var(--frg-sparkle-color, currentColor);opacity:.6;filter:blur(.2px);transform:translateZ(0);will-change:transform,opacity}\n"] }]
+            args: [{ selector: 'frg-sparkle-section', standalone: true, template: "<div class=\"frg-sparkle-layer\" aria-hidden=\"true\">\r\n  @for (sparkle of sparkles; track $index) {\r\n    <span\r\n      #sparkle\r\n      class=\"frg-sparkle\"\r\n      [style.left.%]=\"sparkle.x\"\r\n      [style.top.%]=\"sparkle.y\"\r\n      [style.width.px]=\"sparkle.size\"\r\n      [style.height.px]=\"sparkle.size\">\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<div class=\"frg-sparkle-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block;position:relative;overflow:hidden}.frg-sparkle-layer{position:absolute;inset:0;pointer-events:none;z-index:0}.frg-sparkle-content{position:relative;z-index:1}.frg-sparkle{position:absolute;border-radius:50%;background:radial-gradient(circle,currentColor 0%,#fdfdfd 35%,#3d3d3d 70%);opacity:.6;will-change:transform,opacity;transform:translateZ(0)}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -1731,12 +1710,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
             }], hostHeight: [{
                 type: HostBinding,
                 args: ['style.height']
-            }], hostMinWidth: [{
-                type: HostBinding,
-                args: ['style.minWidth']
-            }], hostMinHeight: [{
+            }], hostColor: [{
                 type: HostBinding,
-                args: ['style.minHeight']
+                args: ['style.color']
             }] } });
 
 class SmallPaginationComponent {
@@ -8924,5 +8900,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, BlobMorphComponent, BreadcrumbComponent, ButtonComponent, CardComponent, ChipComponent, ChunkPipe, CodeBlockComponent, ContainerComponent, ContentBlurComponent, DividerComponent, DynamicPipe, EnumDirectionSortTable, FieldArrayPositionPipe, FragmentsPopoverDirective, FragmentsTooltipDirective, FrgBadgeDirective, InputCalendarComponent, InputCheckboxComponent, InputCheckboxGroupComponent, InputClockPickerComponent, InputDateComponent, InputDateTimeComponent, InputFileUploadComponent, InputNumberComponent, InputRadioGroupComponent, InputSliderComponent, InputTextComponent, InputTimeComponent, InputToggleSwitchComponent, InputValidationComponent, ModalComponent, MultiSelectComponent, PillComponent, ProgressBarComponent, PulseLoaderComponent, SafeHtmlPipe, SanitizeHtmlPipe, SectionComponent, SelectionListComponent, SeparatorComponent, SideNavComponent, SkeletonLoaderComponent, SmallPaginationComponent, SnackbarComponent, SparkleFieldComponent, SpinnerComponent, StepperComponent, TableComponent, TabsComponent, TagComponent, TitleBarComponent, ToastComponent, ToastStackComponent, TypeOfArrayPipe, generateId, generateNumberId, generateUUID, generateUniqueId, getActivatedRouteChild, getTimestampISO, getTimestampMillis, isObjectEmpty, normalizeNumber, orderList, paginationList, sortTable };
+export { AccordionComponent, BlobMorphComponent, BreadcrumbComponent, ButtonComponent, CardComponent, ChipComponent, ChunkPipe, CodeBlockComponent, ContainerComponent, ContentBlurComponent, DividerComponent, DynamicPipe, EnumDirectionSortTable, FieldArrayPositionPipe, FragmentsPopoverDirective, FragmentsTooltipDirective, FrgBadgeDirective, InputCalendarComponent, InputCheckboxComponent, InputCheckboxGroupComponent, InputClockPickerComponent, InputDateComponent, InputDateTimeComponent, InputFileUploadComponent, InputNumberComponent, InputRadioGroupComponent, InputSliderComponent, InputTextComponent, InputTimeComponent, InputToggleSwitchComponent, InputValidationComponent, ModalComponent, MultiSelectComponent, PillComponent, ProgressBarComponent, PulseLoaderComponent, SafeHtmlPipe, SanitizeHtmlPipe, SectionComponent, SelectionListComponent, SeparatorComponent, SideNavComponent, SkeletonLoaderComponent, SmallPaginationComponent, SnackbarComponent, SparkleSectionComponent, SpinnerComponent, StepperComponent, TableComponent, TabsComponent, TagComponent, TitleBarComponent, ToastComponent, ToastStackComponent, TypeOfArrayPipe, generateId, generateNumberId, generateUUID, generateUniqueId, getActivatedRouteChild, getTimestampISO, getTimestampMillis, isObjectEmpty, normalizeNumber, orderList, paginationList, sortTable };
 //# sourceMappingURL=tacdaed-fragments.mjs.map

package/index.d.ts

@@ -792,10 +792,11 @@ declare class BlobMorphComponent extends MorphBase implements AfterViewInit {
     protected generateRandomPath(points?: number, radius?: number, variability?: number): string;
     onLoadEvent(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BlobMorphComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BlobMorphComponent, "app-blob-morph", never, { "imageUrl": { "alias": "imageUrl"; "required": false; }; "fillColor": { "alias": "fillColor"; "required": false; }; "pathStart": { "alias": "pathStart"; "required": false; }; "pathEnd": { "alias": "pathEnd"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; }, { "loadEvent": "loadEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BlobMorphComponent, "frg-blob-morph", never, { "imageUrl": { "alias": "imageUrl"; "required": false; }; "fillColor": { "alias": "fillColor"; "required": false; }; "pathStart": { "alias": "pathStart"; "required": false; }; "pathEnd": { "alias": "pathEnd"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; }, { "loadEvent": "loadEvent"; }, never, never, true, never>;
 }
 
-interface Sparkle {
+type SizeValue = number | string | null;
+interface ISparkleConfiguration {
     x: number;
     y: number;
     size: number;
@@ -804,9 +805,10 @@ interface Sparkle {
     driftX: number;
     driftY: number;
 }
-declare class SparkleFieldComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
-    width: number | string;
-    height: number | string;
+
+declare class SparkleSectionComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+    width: SizeValue;
+    height: SizeValue;
     count: number;
     minSize: number;
     maxSize: number;
@@ -815,29 +817,23 @@ declare class SparkleFieldComponent implements OnInit, OnChanges, AfterViewInit,
     maxDuration: number;
     loop: boolean;
     color: string | null;
-    sparkles: Sparkle[];
+    sparkles: ISparkleConfiguration[];
     sparkleRefs: QueryList<ElementRef<HTMLSpanElement>>;
-    private sparkleAnimations;
-    private sparkleChangesSub;
-    private readonly fallbackWidth;
-    private readonly fallbackHeight;
-    get hostWidth(): string;
-    get hostHeight(): string;
-    get hostMinWidth(): string | null;
-    get hostMinHeight(): string | null;
+    private animations;
+    private changesSub;
+    get hostWidth(): string | null;
+    get hostHeight(): string | null;
+    get hostColor(): string | null;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private buildSparkles;
     private restartAnimation;
-    private randomInRange;
-    get widthStyle(): string;
-    get heightStyle(): string;
+    private rand;
     private formatSize;
-    private needsMinSize;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SparkleFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SparkleFieldComponent, "frg-sparkle-field", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "count": { "alias": "count"; "required": false; }; "minSize": { "alias": "minSize"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "drift": { "alias": "drift"; "required": false; }; "minDuration": { "alias": "minDuration"; "required": false; }; "maxDuration": { "alias": "maxDuration"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SparkleSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SparkleSectionComponent, "frg-sparkle-section", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "count": { "alias": "count"; "required": false; }; "minSize": { "alias": "minSize"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "drift": { "alias": "drift"; "required": false; }; "minDuration": { "alias": "minDuration"; "required": false; }; "maxDuration": { "alias": "maxDuration"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
 interface IPaginationOutput<T> {
@@ -3925,5 +3921,5 @@ declare function getTimestampMillis(): number;
  */
 declare function generateUniqueId(prefix?: string): string;
 
-export { AccordionComponent, BlobMorphComponent, BreadcrumbComponent, ButtonComponent, CardComponent, ChipComponent, ChunkPipe, CodeBlockComponent, ContainerComponent, ContentBlurComponent, DividerComponent, DynamicPipe, EnumDirectionSortTable, FieldArrayPositionPipe, FragmentsPopoverDirective, FragmentsTooltipDirective, FrgBadgeDirective, InputCalendarComponent, InputCheckboxComponent, InputCheckboxGroupComponent, InputClockPickerComponent, InputDateComponent, InputDateTimeComponent, InputFileUploadComponent, InputNumberComponent, InputRadioGroupComponent, InputSliderComponent, InputTextComponent, InputTimeComponent, InputToggleSwitchComponent, InputValidationComponent, ModalComponent, MultiSelectComponent, PillComponent, ProgressBarComponent, PulseLoaderComponent, SafeHtmlPipe, SanitizeHtmlPipe, SectionComponent, SelectionListComponent, SeparatorComponent, SideNavComponent, SkeletonLoaderComponent, SmallPaginationComponent, SnackbarComponent, SparkleFieldComponent, SpinnerComponent, StepperComponent, TableComponent, TabsComponent, TagComponent, TitleBarComponent, ToastComponent, ToastStackComponent, TypeOfArrayPipe, generateId, generateNumberId, generateUUID, generateUniqueId, getActivatedRouteChild, getTimestampISO, getTimestampMillis, isObjectEmpty, normalizeNumber, orderList, paginationList, sortTable };
+export { AccordionComponent, BlobMorphComponent, BreadcrumbComponent, ButtonComponent, CardComponent, ChipComponent, ChunkPipe, CodeBlockComponent, ContainerComponent, ContentBlurComponent, DividerComponent, DynamicPipe, EnumDirectionSortTable, FieldArrayPositionPipe, FragmentsPopoverDirective, FragmentsTooltipDirective, FrgBadgeDirective, InputCalendarComponent, InputCheckboxComponent, InputCheckboxGroupComponent, InputClockPickerComponent, InputDateComponent, InputDateTimeComponent, InputFileUploadComponent, InputNumberComponent, InputRadioGroupComponent, InputSliderComponent, InputTextComponent, InputTimeComponent, InputToggleSwitchComponent, InputValidationComponent, ModalComponent, MultiSelectComponent, PillComponent, ProgressBarComponent, PulseLoaderComponent, SafeHtmlPipe, SanitizeHtmlPipe, SectionComponent, SelectionListComponent, SeparatorComponent, SideNavComponent, SkeletonLoaderComponent, SmallPaginationComponent, SnackbarComponent, SparkleSectionComponent, SpinnerComponent, StepperComponent, TableComponent, TabsComponent, TagComponent, TitleBarComponent, ToastComponent, ToastStackComponent, TypeOfArrayPipe, generateId, generateNumberId, generateUUID, generateUniqueId, getActivatedRouteChild, getTimestampISO, getTimestampMillis, isObjectEmpty, normalizeNumber, orderList, paginationList, sortTable };
 export type { AccordionItem, AccordionItemContext, AccordionToggleEvent, ArrayOneOrMore, Badge, BreadcrumbItem, Chip, CodeBlockBody, CodeBlockConfig, CodeBlockFooter, CodeBlockHeader, DateFormat, DateTimeFormat, GenericFunction, IActionElement, IBaseAction, IConfigTable, IEventAction, IFieldPipe, ILinkAction, IPaginationOutput, ISideNavConfig, ISideNavItem, ISideNavSection, ITBody, ITBodyAction, ITBodyCell, ITBodyCellIcon, ITBodyColumn, ITCaption, ITHead, ITHeadAction, ITHeadColumn, ITPagination, ITSort, ITTitleBar, ITTitleBarFilter, ITTitleBarSearch, ITooltipElement, InputCheckboxGroupItem, InputRadioGroupItem, ModalCloseEvent, NgClassValue, Pill, SelectionListItem, SnackbarCloseEvent, StatusIndicator, StepChangeEvent, StepItem, StepItemContext, StepValidationContext, StepValidationEvent, StepValidator, TAccordionSize, TAccordionStyle, TBasePosition, TBaseSideNavSize, TBaseSideNavStyle, TBaseSize, TBaseStatusIconPosition, TBaseStatusSize, TBaseStatusStyle, TBaseStyle, TBehaviourAction, TButtonIconPosition, TButtonShape, TButtonSize, TButtonStyle, TButtonType, TCardStyle, TChipIconPosition, TChipSize, TChipType, TContainerSize, TCustomNgClass, TDividerOrientation, TDividerSpacing, THLJSLanguage, TIconPosition, TInputType, TModalCloseReason, TModalSize, TPillIconPosition, TPillSize, TPillType, TProgressBarAnimation, TProgressBarSize, TProgressBarType, TPulseLoaderSize, TPulseLoaderType, TSectionHeading, TSectionSpacing, TSeparatorSize, TSideNavLink, TSkeletonLoaderSize, TSkeletonLoaderType, TSnackbarCloseReason, TSnackbarPosition, TSnackbarSize, TSnackbarStyle, TSpinnerSize, TSpinnerType, TStepNavigationSource, TStepperMotion, TStepperOrientation, TTabSize, TTabStyle, TTagIconPosition, TTagSize, TTagType, TToastCloseReason, TToastPosition, TToastSize, TToastStyle, TabChangeEvent, TabItem, TabItemContext, Tag, TimeFormat, ToastCloseEvent, ToastStackCloseEvent, ToastStackItem, TooltipPosition, TypeForm, Without, XOR };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacdaed/fragments",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.9",
   "peerDependencies": {
     "@angular/common": "^20.2.0",
     "@angular/core": "^20.2.0",