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

package/assets/styles/scss/_all.scss

@@ -1,4 +1,5 @@
 @use './variables';
 @use './functions';
+@use './utilities';
 @use './directives/badge';
 @use './directives/tooltip';

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/assets/styles/scss/_utilities.scss

@@ -0,0 +1,12 @@
+.frg-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+}

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: [{
@@ -1580,8 +1580,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 
 class SparkleFieldComponent {
     constructor() {
-        this.width = 260;
-        this.height = 160;
+        this.width = null;
+        this.height = null;
         this.count = 12;
         this.minSize = 2;
         this.maxSize = 6;
@@ -1591,22 +1591,29 @@ class SparkleFieldComponent {
         this.loop = true;
         this.color = null;
         this.sparkles = [];
-        this.sparkleAnimations = [];
-        this.sparkleChangesSub = null;
+        this.animations = [];
+        this.changesSub = null;
         this.fallbackWidth = 260;
         this.fallbackHeight = 160;
     }
     get hostWidth() {
-        return this.widthStyle;
+        return this.width == null ? null : this.formatSize(this.width);
     }
     get hostHeight() {
-        return this.heightStyle;
+        return this.height === null ? null : this.formatSize(this.height);
     }
     get hostMinWidth() {
-        return this.needsMinSize(this.width) ? `${this.fallbackWidth}px` : null;
+        return this.needsMinSize(this.width)
+            ? `${this.fallbackWidth}px`
+            : null;
     }
     get hostMinHeight() {
-        return this.needsMinSize(this.height) ? `${this.fallbackHeight}px` : null;
+        return this.needsMinSize(this.height)
+            ? `${this.fallbackHeight}px`
+            : null;
+    }
+    get hostColor() {
+        return this.color;
     }
     ngOnInit() {
         this.buildSparkles();
@@ -1617,91 +1624,77 @@ 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;
+        if (value == null)
+            return '';
+        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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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", "style.color": "this.hostColor" } }, viewQueries: [{ propertyName: "sparkleRefs", predicate: ["sparkle"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"frg-sparkle-layer\">\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", styles: [":host{display:block;position:relative;overflow:hidden;pointer-events:none}.frg-sparkle-layer{position:absolute;inset:0}.frg-sparkle{position:absolute;border-radius:50%;background:radial-gradient(circle,currentColor 0%,rgba(255,255,255,.85) 35%,rgba(255,255,255,0) 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: [{
             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-field', standalone: true, template: "<div class=\"frg-sparkle-layer\">\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", styles: [":host{display:block;position:relative;overflow:hidden;pointer-events:none}.frg-sparkle-layer{position:absolute;inset:0}.frg-sparkle{position:absolute;border-radius:50%;background:radial-gradient(circle,currentColor 0%,rgba(255,255,255,.85) 35%,rgba(255,255,255,0) 70%);opacity:.6;will-change:transform,opacity;transform:translateZ(0)}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -1737,6 +1730,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
             }], hostMinHeight: [{
                 type: HostBinding,
                 args: ['style.minHeight']
+            }], hostColor: [{
+                type: HostBinding,
+                args: ['style.color']
             }] } });
 
 class SmallPaginationComponent {
@@ -1861,11 +1857,11 @@ class SmallPaginationComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SmallPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SmallPaginationComponent, isStandalone: true, selector: "frg-small-pagination", inputs: { totalItems: "totalItems", fullData: "fullData", page: "page", pageSize: "pageSize", hasElipsisPages: "hasElipsisPages", styleType: "styleType" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "@if (totalItems > pageSize) {\r\n  <nav\r\n    class=\"frg-pagination-small\"\r\n    aria-label=\"Paginazione nome lista\"\r\n    [ngClass]=\"{\r\n      'frg-pagination-small__primary': styleType === 'primary',\r\n      'frg-pagination-small__secondary': styleType === 'secondary',\r\n      'frg-pagination-small__tertiary': styleType === 'tertiary',\r\n      'frg-pagination-small__dark': styleType === 'dark',\r\n      'frg-pagination-small__light': styleType === 'light'\r\n    }\"\r\n  >\r\n    <ul class=\"frg-pagination-small__list\">\r\n      <li class=\"frg-pagination-small__paging frg-pagination-small__prev\">\r\n        <a\r\n          href=\"javascript:void(0);\"\r\n          [class.disabled]=\"page === 1\"\r\n          (click)=\"changePage(page - 1)\"\r\n        >\r\n          <span class=\"visually-hidden\">Pagina precedente</span>\r\n          <span class=\"fas fa-angle-left\" aria-hidden=\"true\"></span>\r\n        </a>\r\n      </li>\r\n      @for (pageNum of pagesArray; track pageNum; let i = $index) {\r\n        @if (showStartEllipsis && i === 1) {\r\n          <li class=\"frg-pagination-small__paging frg-pagination-small__ellipsis\">\r\n            <span class=\"ellipsis\">...</span>\r\n          </li>\r\n        }\r\n        <li\r\n          class=\"frg-pagination-small__paging frg-pagination-small__page-number\"\r\n        >\r\n          <a\r\n            href=\"javascript:void(0);\"\r\n            [attr.aria-current]=\"page === pageNum ? 'page' : null\"\r\n            (click)=\"changePage(pageNum)\"\r\n          >\r\n            <span class=\"visually-hidden\">Pagina</span>\r\n            {{ pageNum }}\r\n          </a>\r\n        </li>\r\n        @if (showEndEllipsis && i === pagesArray.length - 2) {\r\n          <li class=\"frg-pagination-small__paging frg-pagination-small__ellipsis\">\r\n            <span class=\"ellipsis\">...</span>\r\n          </li>\r\n        }\r\n      }\r\n\r\n      <li class=\"frg-pagination-small__paging frg-pagination-small__next\">\r\n        <a\r\n          href=\"javascript:void(0);\"\r\n          [class.disabled]=\"page === totalPages\"\r\n          (click)=\"changePage(page + 1)\"\r\n        >\r\n          <span class=\"visually-hidden\">Pagina successiva</span>\r\n          <span class=\"fas fa-angle-right\" aria-hidden=\"true\"></span>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n  </nav>\r\n}\r\n", styles: [".frg-pagination-small{display:flex;justify-content:center;align-items:center;margin:12px 0;gap:.2rem}.frg-pagination-small__list{list-style:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center}.frg-pagination-small__list li:first-child{margin-right:.5rem}.frg-pagination-small__list li:last-child{margin-left:.5rem}.frg-pagination-small a{display:flex;justify-content:center;align-items:center;border-radius:999px;min-width:1.9rem;height:1.9rem;font-weight:500;border:1px solid transparent;text-decoration:none;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease;cursor:pointer;background-color:transparent;color:#737579}.frg-pagination-small a.disabled{cursor:default;color:#bfbfbf;background-color:transparent}.frg-pagination-small a:focus-visible{outline:2px solid rgb(160.75,198.45,230.3);outline-offset:2px}.frg-pagination-small__primary a{margin:0 2px}.frg-pagination-small__primary a[aria-current=page]{background-color:#6ea8d9;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__primary a:hover:not([aria-current=page]){background-color:#a8cbe8;color:#fdfdfd}.frg-pagination-small__primary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__secondary a{margin:0 2px}.frg-pagination-small__secondary a[aria-current=page]{background-color:#e6c57a;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__secondary a:hover:not([aria-current=page]){background-color:#f0dcaf;color:#fdfdfd}.frg-pagination-small__secondary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__tertiary a{margin:0 2px}.frg-pagination-small__tertiary a[aria-current=page]{background-color:#d97ebd;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__tertiary a:hover:not([aria-current=page]){background-color:#e8b2d7;color:#fdfdfd}.frg-pagination-small__tertiary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__dark a{margin:0 2px;background-color:#fdfdfd;border:1px solid rgba(253,253,253,.12);color:#737579}.frg-pagination-small__dark a[aria-current=page]{background-color:#3d3d3de6;border-color:#3d3d3dd9;color:#e6e6e6;pointer-events:none}.frg-pagination-small__dark a:hover:not([aria-current=page]){background-color:#a6a7a9;color:#fdfdfd}.frg-pagination-small__dark a.disabled{border-color:#fdfdfd14;color:#bfbfbf}.frg-pagination-small__dark a.disabled:hover{background-color:#5e5f62}.frg-pagination-small__light a{margin:0 2px;color:#cfcece}.frg-pagination-small__light a[aria-current=page]{background-color:#fdfdfd;color:#5e5f62;pointer-events:none}.frg-pagination-small__light a:hover:not([aria-current=page]){background-color:#e6e6e6;color:#5e5f62}.frg-pagination-small__light a.disabled{color:#737579}.frg-pagination-small__light a.disabled:hover{background-color:transparent;color:#737579;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SmallPaginationComponent, isStandalone: true, selector: "frg-small-pagination", inputs: { totalItems: "totalItems", fullData: "fullData", page: "page", pageSize: "pageSize", hasElipsisPages: "hasElipsisPages", styleType: "styleType" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "@if (totalItems > pageSize) {\r\n  <nav\r\n    class=\"frg-pagination-small\"\r\n    aria-label=\"Paginazione nome lista\"\r\n    [ngClass]=\"{\r\n      'frg-pagination-small__primary': styleType === 'primary',\r\n      'frg-pagination-small__secondary': styleType === 'secondary',\r\n      'frg-pagination-small__tertiary': styleType === 'tertiary',\r\n      'frg-pagination-small__dark': styleType === 'dark',\r\n      'frg-pagination-small__light': styleType === 'light'\r\n    }\"\r\n  >\r\n    <ul class=\"frg-pagination-small__list\">\r\n      <li class=\"frg-pagination-small__paging frg-pagination-small__prev\">\r\n        <a\r\n          href=\"javascript:void(0);\"\r\n          [class.disabled]=\"page === 1\"\r\n          (click)=\"changePage(page - 1)\"\r\n        >\r\n          <span class=\"frg-visually-hidden\">Pagina precedente</span>\r\n          <span class=\"fas fa-angle-left\" aria-hidden=\"true\"></span>\r\n        </a>\r\n      </li>\r\n      @for (pageNum of pagesArray; track pageNum; let i = $index) {\r\n        @if (showStartEllipsis && i === 1) {\r\n          <li class=\"frg-pagination-small__paging frg-pagination-small__ellipsis\">\r\n            <span class=\"ellipsis\">...</span>\r\n          </li>\r\n        }\r\n        <li\r\n          class=\"frg-pagination-small__paging frg-pagination-small__page-number\"\r\n        >\r\n          <a\r\n            href=\"javascript:void(0);\"\r\n            [attr.aria-current]=\"page === pageNum ? 'page' : null\"\r\n            (click)=\"changePage(pageNum)\"\r\n          >\r\n            <span class=\"frg-visually-hidden\">Pagina</span>\r\n            {{ pageNum }}\r\n          </a>\r\n        </li>\r\n        @if (showEndEllipsis && i === pagesArray.length - 2) {\r\n          <li class=\"frg-pagination-small__paging frg-pagination-small__ellipsis\">\r\n            <span class=\"ellipsis\">...</span>\r\n          </li>\r\n        }\r\n      }\r\n\r\n      <li class=\"frg-pagination-small__paging frg-pagination-small__next\">\r\n        <a\r\n          href=\"javascript:void(0);\"\r\n          [class.disabled]=\"page === totalPages\"\r\n          (click)=\"changePage(page + 1)\"\r\n        >\r\n          <span class=\"frg-visually-hidden\">Pagina successiva</span>\r\n          <span class=\"fas fa-angle-right\" aria-hidden=\"true\"></span>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n  </nav>\r\n}\r\n", styles: [".frg-pagination-small{display:flex;justify-content:center;align-items:center;margin:12px 0;gap:.2rem}.frg-pagination-small__list{list-style:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center}.frg-pagination-small__list li:first-child{margin-right:.5rem}.frg-pagination-small__list li:last-child{margin-left:.5rem}.frg-pagination-small a{display:flex;justify-content:center;align-items:center;border-radius:999px;min-width:1.9rem;height:1.9rem;font-weight:500;border:1px solid transparent;text-decoration:none;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease;cursor:pointer;background-color:transparent;color:#737579}.frg-pagination-small a.disabled{cursor:default;color:#bfbfbf;background-color:transparent}.frg-pagination-small a:focus-visible{outline:2px solid rgb(160.75,198.45,230.3);outline-offset:2px}.frg-pagination-small__primary a{margin:0 2px}.frg-pagination-small__primary a[aria-current=page]{background-color:#6ea8d9;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__primary a:hover:not([aria-current=page]){background-color:#a8cbe8;color:#fdfdfd}.frg-pagination-small__primary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__secondary a{margin:0 2px}.frg-pagination-small__secondary a[aria-current=page]{background-color:#e6c57a;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__secondary a:hover:not([aria-current=page]){background-color:#f0dcaf;color:#fdfdfd}.frg-pagination-small__secondary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__tertiary a{margin:0 2px}.frg-pagination-small__tertiary a[aria-current=page]{background-color:#d97ebd;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__tertiary a:hover:not([aria-current=page]){background-color:#e8b2d7;color:#fdfdfd}.frg-pagination-small__tertiary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__dark a{margin:0 2px;background-color:#fdfdfd;border:1px solid rgba(253,253,253,.12);color:#737579}.frg-pagination-small__dark a[aria-current=page]{background-color:#3d3d3de6;border-color:#3d3d3dd9;color:#e6e6e6;pointer-events:none}.frg-pagination-small__dark a:hover:not([aria-current=page]){background-color:#a6a7a9;color:#fdfdfd}.frg-pagination-small__dark a.disabled{border-color:#fdfdfd14;color:#bfbfbf}.frg-pagination-small__dark a.disabled:hover{background-color:#5e5f62}.frg-pagination-small__light a{margin:0 2px;color:#cfcece}.frg-pagination-small__light a[aria-current=page]{background-color:#fdfdfd;color:#5e5f62;pointer-events:none}.frg-pagination-small__light a:hover:not([aria-current=page]){background-color:#e6e6e6;color:#5e5f62}.frg-pagination-small__light a.disabled{color:#737579}.frg-pagination-small__light a.disabled:hover{background-color:transparent;color:#737579;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SmallPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'frg-small-pagination', imports: [CommonModule], template: "@if (totalItems > pageSize) {\r\n  <nav\r\n    class=\"frg-pagination-small\"\r\n    aria-label=\"Paginazione nome lista\"\r\n    [ngClass]=\"{\r\n      'frg-pagination-small__primary': styleType === 'primary',\r\n      'frg-pagination-small__secondary': styleType === 'secondary',\r\n      'frg-pagination-small__tertiary': styleType === 'tertiary',\r\n      'frg-pagination-small__dark': styleType === 'dark',\r\n      'frg-pagination-small__light': styleType === 'light'\r\n    }\"\r\n  >\r\n    <ul class=\"frg-pagination-small__list\">\r\n      <li class=\"frg-pagination-small__paging frg-pagination-small__prev\">\r\n        <a\r\n          href=\"javascript:void(0);\"\r\n          [class.disabled]=\"page === 1\"\r\n          (click)=\"changePage(page - 1)\"\r\n        >\r\n          <span class=\"visually-hidden\">Pagina precedente</span>\r\n          <span class=\"fas fa-angle-left\" aria-hidden=\"true\"></span>\r\n        </a>\r\n      </li>\r\n      @for (pageNum of pagesArray; track pageNum; let i = $index) {\r\n        @if (showStartEllipsis && i === 1) {\r\n          <li class=\"frg-pagination-small__paging frg-pagination-small__ellipsis\">\r\n            <span class=\"ellipsis\">...</span>\r\n          </li>\r\n        }\r\n        <li\r\n          class=\"frg-pagination-small__paging frg-pagination-small__page-number\"\r\n        >\r\n          <a\r\n            href=\"javascript:void(0);\"\r\n            [attr.aria-current]=\"page === pageNum ? 'page' : null\"\r\n            (click)=\"changePage(pageNum)\"\r\n          >\r\n            <span class=\"visually-hidden\">Pagina</span>\r\n            {{ pageNum }}\r\n          </a>\r\n        </li>\r\n        @if (showEndEllipsis && i === pagesArray.length - 2) {\r\n          <li class=\"frg-pagination-small__paging frg-pagination-small__ellipsis\">\r\n            <span class=\"ellipsis\">...</span>\r\n          </li>\r\n        }\r\n      }\r\n\r\n      <li class=\"frg-pagination-small__paging frg-pagination-small__next\">\r\n        <a\r\n          href=\"javascript:void(0);\"\r\n          [class.disabled]=\"page === totalPages\"\r\n          (click)=\"changePage(page + 1)\"\r\n        >\r\n          <span class=\"visually-hidden\">Pagina successiva</span>\r\n          <span class=\"fas fa-angle-right\" aria-hidden=\"true\"></span>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n  </nav>\r\n}\r\n", styles: [".frg-pagination-small{display:flex;justify-content:center;align-items:center;margin:12px 0;gap:.2rem}.frg-pagination-small__list{list-style:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center}.frg-pagination-small__list li:first-child{margin-right:.5rem}.frg-pagination-small__list li:last-child{margin-left:.5rem}.frg-pagination-small a{display:flex;justify-content:center;align-items:center;border-radius:999px;min-width:1.9rem;height:1.9rem;font-weight:500;border:1px solid transparent;text-decoration:none;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease;cursor:pointer;background-color:transparent;color:#737579}.frg-pagination-small a.disabled{cursor:default;color:#bfbfbf;background-color:transparent}.frg-pagination-small a:focus-visible{outline:2px solid rgb(160.75,198.45,230.3);outline-offset:2px}.frg-pagination-small__primary a{margin:0 2px}.frg-pagination-small__primary a[aria-current=page]{background-color:#6ea8d9;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__primary a:hover:not([aria-current=page]){background-color:#a8cbe8;color:#fdfdfd}.frg-pagination-small__primary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__secondary a{margin:0 2px}.frg-pagination-small__secondary a[aria-current=page]{background-color:#e6c57a;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__secondary a:hover:not([aria-current=page]){background-color:#f0dcaf;color:#fdfdfd}.frg-pagination-small__secondary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__tertiary a{margin:0 2px}.frg-pagination-small__tertiary a[aria-current=page]{background-color:#d97ebd;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__tertiary a:hover:not([aria-current=page]){background-color:#e8b2d7;color:#fdfdfd}.frg-pagination-small__tertiary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__dark a{margin:0 2px;background-color:#fdfdfd;border:1px solid rgba(253,253,253,.12);color:#737579}.frg-pagination-small__dark a[aria-current=page]{background-color:#3d3d3de6;border-color:#3d3d3dd9;color:#e6e6e6;pointer-events:none}.frg-pagination-small__dark a:hover:not([aria-current=page]){background-color:#a6a7a9;color:#fdfdfd}.frg-pagination-small__dark a.disabled{border-color:#fdfdfd14;color:#bfbfbf}.frg-pagination-small__dark a.disabled:hover{background-color:#5e5f62}.frg-pagination-small__light a{margin:0 2px;color:#cfcece}.frg-pagination-small__light a[aria-current=page]{background-color:#fdfdfd;color:#5e5f62;pointer-events:none}.frg-pagination-small__light a:hover:not([aria-current=page]){background-color:#e6e6e6;color:#5e5f62}.frg-pagination-small__light a.disabled{color:#737579}.frg-pagination-small__light a.disabled:hover{background-color:transparent;color:#737579;pointer-events:none}\n"] }]
+            args: [{ selector: 'frg-small-pagination', imports: [CommonModule], template: "@if (totalItems > pageSize) {\r\n  <nav\r\n    class=\"frg-pagination-small\"\r\n    aria-label=\"Paginazione nome lista\"\r\n    [ngClass]=\"{\r\n      'frg-pagination-small__primary': styleType === 'primary',\r\n      'frg-pagination-small__secondary': styleType === 'secondary',\r\n      'frg-pagination-small__tertiary': styleType === 'tertiary',\r\n      'frg-pagination-small__dark': styleType === 'dark',\r\n      'frg-pagination-small__light': styleType === 'light'\r\n    }\"\r\n  >\r\n    <ul class=\"frg-pagination-small__list\">\r\n      <li class=\"frg-pagination-small__paging frg-pagination-small__prev\">\r\n        <a\r\n          href=\"javascript:void(0);\"\r\n          [class.disabled]=\"page === 1\"\r\n          (click)=\"changePage(page - 1)\"\r\n        >\r\n          <span class=\"frg-visually-hidden\">Pagina precedente</span>\r\n          <span class=\"fas fa-angle-left\" aria-hidden=\"true\"></span>\r\n        </a>\r\n      </li>\r\n      @for (pageNum of pagesArray; track pageNum; let i = $index) {\r\n        @if (showStartEllipsis && i === 1) {\r\n          <li class=\"frg-pagination-small__paging frg-pagination-small__ellipsis\">\r\n            <span class=\"ellipsis\">...</span>\r\n          </li>\r\n        }\r\n        <li\r\n          class=\"frg-pagination-small__paging frg-pagination-small__page-number\"\r\n        >\r\n          <a\r\n            href=\"javascript:void(0);\"\r\n            [attr.aria-current]=\"page === pageNum ? 'page' : null\"\r\n            (click)=\"changePage(pageNum)\"\r\n          >\r\n            <span class=\"frg-visually-hidden\">Pagina</span>\r\n            {{ pageNum }}\r\n          </a>\r\n        </li>\r\n        @if (showEndEllipsis && i === pagesArray.length - 2) {\r\n          <li class=\"frg-pagination-small__paging frg-pagination-small__ellipsis\">\r\n            <span class=\"ellipsis\">...</span>\r\n          </li>\r\n        }\r\n      }\r\n\r\n      <li class=\"frg-pagination-small__paging frg-pagination-small__next\">\r\n        <a\r\n          href=\"javascript:void(0);\"\r\n          [class.disabled]=\"page === totalPages\"\r\n          (click)=\"changePage(page + 1)\"\r\n        >\r\n          <span class=\"frg-visually-hidden\">Pagina successiva</span>\r\n          <span class=\"fas fa-angle-right\" aria-hidden=\"true\"></span>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n  </nav>\r\n}\r\n", styles: [".frg-pagination-small{display:flex;justify-content:center;align-items:center;margin:12px 0;gap:.2rem}.frg-pagination-small__list{list-style:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center}.frg-pagination-small__list li:first-child{margin-right:.5rem}.frg-pagination-small__list li:last-child{margin-left:.5rem}.frg-pagination-small a{display:flex;justify-content:center;align-items:center;border-radius:999px;min-width:1.9rem;height:1.9rem;font-weight:500;border:1px solid transparent;text-decoration:none;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease;cursor:pointer;background-color:transparent;color:#737579}.frg-pagination-small a.disabled{cursor:default;color:#bfbfbf;background-color:transparent}.frg-pagination-small a:focus-visible{outline:2px solid rgb(160.75,198.45,230.3);outline-offset:2px}.frg-pagination-small__primary a{margin:0 2px}.frg-pagination-small__primary a[aria-current=page]{background-color:#6ea8d9;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__primary a:hover:not([aria-current=page]){background-color:#a8cbe8;color:#fdfdfd}.frg-pagination-small__primary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__secondary a{margin:0 2px}.frg-pagination-small__secondary a[aria-current=page]{background-color:#e6c57a;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__secondary a:hover:not([aria-current=page]){background-color:#f0dcaf;color:#fdfdfd}.frg-pagination-small__secondary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__tertiary a{margin:0 2px}.frg-pagination-small__tertiary a[aria-current=page]{background-color:#d97ebd;color:#fdfdfd;border-color:transparent;pointer-events:none}.frg-pagination-small__tertiary a:hover:not([aria-current=page]){background-color:#e8b2d7;color:#fdfdfd}.frg-pagination-small__tertiary a.disabled:hover{background-color:#f1f2f5;color:#bfbfbf}.frg-pagination-small__dark a{margin:0 2px;background-color:#fdfdfd;border:1px solid rgba(253,253,253,.12);color:#737579}.frg-pagination-small__dark a[aria-current=page]{background-color:#3d3d3de6;border-color:#3d3d3dd9;color:#e6e6e6;pointer-events:none}.frg-pagination-small__dark a:hover:not([aria-current=page]){background-color:#a6a7a9;color:#fdfdfd}.frg-pagination-small__dark a.disabled{border-color:#fdfdfd14;color:#bfbfbf}.frg-pagination-small__dark a.disabled:hover{background-color:#5e5f62}.frg-pagination-small__light a{margin:0 2px;color:#cfcece}.frg-pagination-small__light a[aria-current=page]{background-color:#fdfdfd;color:#5e5f62;pointer-events:none}.frg-pagination-small__light a:hover:not([aria-current=page]){background-color:#e6e6e6;color:#5e5f62}.frg-pagination-small__light a.disabled{color:#737579}.frg-pagination-small__light a.disabled:hover{background-color:transparent;color:#737579;pointer-events:none}\n"] }]
         }], propDecorators: { totalItems: [{
                 type: Input
             }], fullData: [{
@@ -2351,7 +2347,7 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: TableComponent, isStandalone: true, selector: "frg-table", inputs: { configTable: "configTable", styleType: "styleType", rowSize: "rowSize" }, outputs: { reloadTableEvent: "reloadTableEvent" }, viewQueries: [{ propertyName: "tableHead", first: true, predicate: ["tableHead"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (configTable.tTitleBar?.title) {\r\n  <frg-title-bar\r\n    [title]=\"configTable.tTitleBar?.title ?? ''\"\r\n    [styleType]=\"styleType\"\r\n  ></frg-title-bar>\r\n}\r\n@if (configTable.tBody.data && configTable.tBody.data.length > 0) {\r\n  <div class=\"frg-table-responsive\">\r\n    <table\r\n      class=\"frg-table\"\r\n      id=\"table1\"\r\n      [ngClass]=\"{\r\n        'frg-table__primary': styleType === 'primary',\r\n        'frg-table__secondary': styleType === 'secondary',\r\n        'frg-table__tertiary': styleType === 'tertiary',\r\n        'frg-table__dark': styleType === 'dark',\r\n        'frg-table__light': styleType === 'light',\r\n        'frg-table--row-small': rowSize === 'small',\r\n        'frg-table--row-medium': rowSize === 'medium',\r\n        'frg-table--row-large': rowSize === 'large'\r\n      }\"\r\n    >\r\n      @if (configTable.tCaption && configTable.tCaption.srOnly) {\r\n        <caption class=\"visually-hidden\">\r\n          {{ configTable.tCaption.srOnly }}\r\n        </caption>\r\n      }\r\n      @if (configTable.tHead.columns.length > 0) {\r\n        <thead #tableHead>\r\n          <tr>\r\n            <!--Sort-->\r\n            @if (configTable.tHead) {\r\n              @for (hColumn of configTable.tHead.columns; track $index) {\r\n                @if (hColumn.fieldOrder) {\r\n                  <th\r\n                    scope=\"col\"\r\n                    [tabindex]=\"hColumn.fieldOrder ? 0 : null\"\r\n                    [attr.aria-sort]=\"\r\n                      !(hColumn.fieldOrder === configTable.tPagination.order)\r\n                        ? null\r\n                        : configTable.tPagination.direction ===\r\n                            EnumDirectionSortTable.asc\r\n                          ? 'ascending'\r\n                          : 'descending'\r\n                    \"\r\n                    [ngClass]=\"{\r\n                      'frg-sorting': hColumn.fieldOrder,\r\n                      'frg-sorting-asc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.asc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order,\r\n                      'frg-sorting-desc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.desc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order\r\n                    }\"\r\n                    (click)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                    (keydown.enter)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                  >\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                } @else {\r\n                  <th scope=\"col\">\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                }\r\n              }\r\n            }\r\n            <!--End Sort-->\r\n            @if (configTable.tHead.action) {\r\n              <th\r\n                scope=\"col\"\r\n                [ngClass]=\"configTable.tHead.action.customClass ?? ''\"\r\n              >\r\n                {{ configTable.tHead.action.label }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n      }\r\n      <tbody>\r\n        @for (item of configTable.tBody.data; let i = $index; track $index) {\r\n          <tr\r\n            [attr.id]=\"i === 0 ? idFirstTr : null\"\r\n            [ngClass]=\"\r\n              configTable.tBody.rowClick?.behaviourAction?.clickEvent\r\n                ? 'cursor-pointer'\r\n                : ''\r\n            \"\r\n            [routerLink]=\"\r\n              configTable.tBody.rowClick?.disabled &&\r\n              configTable.tBody.rowClick?.disabled(item)\r\n                ? null\r\n                : configTable.tBody.rowClick?.behaviourAction?.link\r\n                  ? [\r\n                      configTable.tBody.rowClick?.behaviourAction?.link\r\n                        ? configTable.tBody.rowClick?.behaviourAction?.link\r\n                        : './',\r\n                      configTable.tBody.rowClick?.behaviourAction\r\n                        ?.customParamsLink ||\r\n                        (item | fieldArrayPosition: configTable.tBody.uniqueField)\r\n                    ]\r\n                  : null\r\n            \"\r\n            (click)=\"handleRowClick($event, item)\"\r\n            (keyup.enter)=\"handleRowClick($event, item)\"\r\n            (keydown)=\"handleRowClick($event, item)\"\r\n          >\r\n            @for (column of configTable.tBody.columns; let i = $index; track $index) {\r\n              <td>\r\n                <div [ngClass]=\"column.customClass\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"\r\n                      (column.cells | typeOfArray) ? cellForTpl : cellTpl\r\n                    \"\r\n                    [ngTemplateOutletContext]=\"{\r\n                      cells: column.cells,\r\n                      item: item\r\n                    }\"\r\n                  ></ng-container>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (configTable.tBody.action ?? false) {\r\n              <td\r\n                class=\"table-action\"\r\n                [ngClass]=\"configTable.tBody.action?.customClasses ?? ''\"\r\n              >\r\n                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {\r\n                  @if (act.visible && act.visible(item) ? true : null) {\r\n                    <frg-button\r\n                      [ariaLabel]=\"act.ariaLabel || 'Azione'\"\r\n                      [text]=\"''\"\r\n                      [iconClass]=\"act.iconClass ? act.iconClass(item) : ''\"\r\n                      [styleType]=\"'icon'\"\r\n                      [size]=\"'small'\"\r\n                      frgTooltip\r\n                      [tooltipConfig]=\"{\r\n                        apply:\r\n                          act.tooltip &&\r\n                          act.tooltip.apply &&\r\n                          act.visible &&\r\n                          act.visible(item)\r\n                            ? act.tooltip.apply\r\n                            : true,\r\n                        text:\r\n                          act.tooltip && act.tooltip.text\r\n                            ? act.tooltip.text(item)\r\n                            : '',\r\n                        textContent:\r\n                          act.tooltip && act.tooltip.textContent\r\n                            ? act.tooltip.textContent(item)\r\n                            : '',\r\n                        position:\r\n                          act.tooltip && act.tooltip.position\r\n                            ? act.tooltip.position\r\n                            : 'top',\r\n                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0\r\n                      }\"\r\n                      [disabled]=\"act.disabled ? act.disabled(item) : null\"\r\n                      [buttonRouterLink]=\"\r\n                        act.disabled && act.disabled(item)\r\n                          ? null\r\n                          : act.behaviourAction.link\r\n                            ? [\r\n                                act.behaviourAction.link\r\n                                  ? act.behaviourAction.link\r\n                                  : './',\r\n                                act.behaviourAction.customParamsLink ||\r\n                                  (item\r\n                                    | fieldArrayPosition\r\n                                      : configTable.tBody.uniqueField)\r\n                              ]\r\n                            : null\r\n                      \"\r\n                      (clickEvent)=\"\r\n                        act.behaviourAction.clickEvent\r\n                          ? act.behaviourAction.clickEvent(item)\r\n                          : null\r\n                      \"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                      (keyup.enter)=\"$event.stopPropagation()\"\r\n                    >\r\n                    </frg-button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (configTable.tPagination) {\r\n    <frg-small-pagination\r\n      [hasElipsisPages]=\"configTable.tPagination.hasElipsisPages ?? false\"\r\n      [pageSize]=\"configTable.tPagination.pageSize ?? 10\"\r\n      [page]=\"configTable.tPagination.page ?? 0\"\r\n      [totalItems]=\"configTable.tPagination.fullData?.length ?? 0\"\r\n      [fullData]=\"configTable.tPagination.fullData ?? []\"\r\n      [styleType]=\"styleType\"\r\n      (pageChange)=\"updateCurrentPage($event)\"\r\n    ></frg-small-pagination>\r\n  }\r\n} @else {\r\n  <div class=\"d-flex justify-content-center my-4\">\r\n    <div class=\"text-center\">No Elements</div>\r\n  </div>\r\n}\r\n\r\n<ng-template #cellForTpl let-cells=\"cells\" let-item=\"item\">\r\n  @for (cell of $any(cells); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"cellTpl\"\r\n      [ngTemplateOutletContext]=\"{\r\n        cell: cell,\r\n        item: item\r\n      }\"\r\n    ></ng-container>\r\n    <br />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-cell=\"cells\" let-item=\"item\">\r\n  @if (!cell.fieldPipe) {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\">\r\n      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}\r\n    </span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  } @else {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span\r\n      [innerHtml]=\"\r\n        item\r\n          | fieldArrayPosition: cell.fieldArrayPosition\r\n          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args\r\n          | safeHtml\r\n      \"\r\n      [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\"\r\n    ></span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".frg-title-bar{color:#3d3d3d;font-weight:400;font-size:1.25rem;box-shadow:0 2px 4px #0000001a;font-family:Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.frg-title-bar__primary{background-color:#4c7aae;color:#fdfdfd}.frg-title-bar__primary .frg-title-bar-title button{color:#4c7aae}.frg-title-bar__primary .frg-title-bar-filter,.frg-title-bar__primary .frg-title-bar-search{background-color:#6ea8d9}.frg-title-bar__secondary{background-color:#c9a24e;color:#fdfdfd}.frg-title-bar__secondary .frg-title-bar-title button{color:#c9a24e}.frg-title-bar__secondary .frg-title-bar-filter,.frg-title-bar__secondary .frg-title-bar-search{background-color:#e6c57a}.frg-title-bar__tertiary{background-color:#b05a99;color:#fdfdfd}.frg-title-bar__tertiary .frg-title-bar-title button{color:#b05a99}.frg-title-bar__tertiary .frg-title-bar-filter,.frg-title-bar__tertiary .frg-title-bar-search{background-color:#d97ebd}.frg-title-bar__dark{background-color:#3d3d3d;color:#fff}.frg-title-bar__light{background-color:#fdfdfd}.frg-title-bar .frg-title-bar-title{padding:15px 25px}.frg-title-bar .frg-title-bar-title button{outline:none;border:none;border-radius:50%;width:25px;height:25px;padding:15px;font-size:1rem}.frg-title-bar .frg-title-bar-title button:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;outline:3px solid #6ea8d9;box-shadow:none}.frg-title-bar .frg-title-bar-title button:focus-visible{outline-offset:5px}.frg-title-bar .frg-title-bar-filter__container{padding:25px}.frg-title-bar .frg-title-bar-filter label{display:block;font-size:.8rem;font-weight:lighter}.frg-title-bar .frg-title-bar-search__container{padding:25px}.frg-title-bar .frg-title-bar-search label{display:block;font-size:.8rem;font-weight:lighter}.frg-filter label,.frg-search label{display:block;font-size:.875rem;font-weight:400;margin-bottom:.5rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";text-transform:uppercase;letter-spacing:.05rem}.frg-filter input,.frg-search input{display:block;width:100%;padding:10px;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";line-height:1.5;color:#3d3d3d;background-color:#fdfdfd;background-clip:padding-box;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.frg-filter input::placeholder,.frg-search input::placeholder{color:#737579;opacity:1}.frg-filter input:focus,.frg-search input:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;box-shadow:0 0 0 .2rem #2e6ea640}.frg-filter input.is-invalid,.frg-search input.is-invalid{border-color:#d66a6a;padding-right:calc(10px + 2rem);background-image:url(data:image/svg+xml,\\ ...);background-repeat:no-repeat;background-position:center right 5px;background-size:6.6666666667px 6.6666666667px}.frg-filter input.is-invalid:focus,.frg-search input.is-invalid:focus{border-color:#d66a6a;box-shadow:0 0 0 .2rem #da1e2840}.frg-filter input:disabled,.frg-search input:disabled{background-color:#bfbfbf;border-color:#737579}.frg-table-responsive{border:1px solid #e6e9ef;border-radius:.25rem;overflow:hidden;background-color:#fdfdfd}frg-title-bar+.frg-table-responsive{border-top:none;border-radius:0 0 .25rem .25rem}.frg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background-color:#fdfdfd}.frg-table-responsive{border-radius:0 0 .25rem .25rem;border:1px solid #e6e9ef;overflow:hidden;background-color:#fdfdfd}.frg-table td,.frg-table th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e6e9ef;vertical-align:middle}.frg-table--row-small td,.frg-table--row-small th{padding:.35rem .6rem}.frg-table--row-medium td,.frg-table--row-medium th{padding:.75rem .9rem}.frg-table--row-large td,.frg-table--row-large th{padding:1rem 1.2rem}.frg-table thead th{background-color:#edf0f6;font-weight:600;color:#1f252e;letter-spacing:.01em;border-bottom:1px solid #e6e9ef}.frg-table tbody tr{transition:background-color .18s ease}.frg-table tbody tr:hover{background-color:#f1f4f9}.frg-table .frg-sorting{position:relative;cursor:pointer;padding-right:1.4rem}.frg-table .frg-sorting:before,.frg-table .frg-sorting:after{content:\"\";position:absolute;right:.65rem;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.5}.frg-table .frg-sorting:before{top:calc(50% - 6px);border-bottom:5px solid currentColor}.frg-table .frg-sorting:after{top:calc(50% + 2px);border-top:5px solid currentColor}.frg-table .frg-sorting-asc:after{opacity:.5}.frg-table .frg-sorting-asc:before{opacity:1}.frg-table .frg-sorting-desc:before{opacity:.5}.frg-table .frg-sorting-desc:after{opacity:1}.frg-table__primary{overflow:hidden}.frg-table__primary thead th,.frg-table__primary.frg-table thead th{background-color:#83b5de;color:#fdfdfd;border-bottom-color:#a1c6e6}.frg-table__primary tbody tr:hover{background-color:#e8f0f8}.frg-table__secondary{overflow:hidden}.frg-table__secondary thead th,.frg-table__secondary.frg-table thead th{background-color:#e9cd8e;color:#fdfdfd;border-bottom-color:#efd9a9}.frg-table__secondary tbody tr:hover{background-color:#faf5e9}.frg-table__tertiary{overflow:hidden}.frg-table__tertiary thead th,.frg-table__tertiary.frg-table thead th{background-color:#de91c7;color:#fdfdfd;border-bottom-color:#e6abd4}.frg-table__tertiary tbody tr:hover{background-color:#f8eaf3}.frg-table__dark{background-color:#3d3d3d;color:#fdfdfd}.frg-table__dark td,.frg-table__dark th{border-bottom-color:#fdfdfd1f}.frg-table__dark thead th{background-color:#505050;color:#fdfdfd;border-bottom-color:#fdfdfd29}.frg-table__dark tbody tr:hover{background-color:#4d4d4d}.frg-table__light,.frg-table__light thead th{background-color:#fdfdfd;color:#3d3d3d}.frg-table__light tbody tr:hover{background-color:#f1f4f9}@media screen and (max-width: 768px){.frg-table-responsive{overflow:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TitleBarComponent, selector: "frg-title-bar", inputs: ["title", "styleType"] }, { kind: "component", type: SmallPaginationComponent, selector: "frg-small-pagination", inputs: ["totalItems", "fullData", "page", "pageSize", "hasElipsisPages", "styleType"], outputs: ["pageChange"] }, { kind: "directive", type: FragmentsTooltipDirective, selector: "[frgTooltip]", inputs: ["tooltipConfig"] }, { kind: "component", type: ButtonComponent, selector: "frg-button", inputs: ["id", "class", "textClass", "iconClass", "iconStyleType", "iconPosition", "type", "size", "buttonRouterLink", "buttonRouterLinkActive", "disabled", "styleType", "shape", "text", "ariaLabel"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FieldArrayPositionPipe, name: "fieldArrayPosition" }, { kind: "pipe", type: TypeOfArrayPipe, name: "typeOfArray" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: TableComponent, isStandalone: true, selector: "frg-table", inputs: { configTable: "configTable", styleType: "styleType", rowSize: "rowSize" }, outputs: { reloadTableEvent: "reloadTableEvent" }, viewQueries: [{ propertyName: "tableHead", first: true, predicate: ["tableHead"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (configTable.tTitleBar?.title) {\r\n  <frg-title-bar\r\n    [title]=\"configTable.tTitleBar?.title ?? ''\"\r\n    [styleType]=\"styleType\"\r\n  ></frg-title-bar>\r\n}\r\n@if (configTable.tBody.data && configTable.tBody.data.length > 0) {\r\n  <div class=\"frg-table-responsive\">\r\n    <table\r\n      class=\"frg-table\"\r\n      id=\"table1\"\r\n      [ngClass]=\"{\r\n        'frg-table__primary': styleType === 'primary',\r\n        'frg-table__secondary': styleType === 'secondary',\r\n        'frg-table__tertiary': styleType === 'tertiary',\r\n        'frg-table__dark': styleType === 'dark',\r\n        'frg-table__light': styleType === 'light',\r\n        'frg-table--row-small': rowSize === 'small',\r\n        'frg-table--row-medium': rowSize === 'medium',\r\n        'frg-table--row-large': rowSize === 'large'\r\n      }\"\r\n    >\r\n      @if (configTable.tCaption && configTable.tCaption.srOnly) {\r\n        <caption class=\"frg-visually-hidden\">\r\n          {{ configTable.tCaption.srOnly }}\r\n        </caption>\r\n      }\r\n      @if (configTable.tHead.columns.length > 0) {\r\n        <thead #tableHead>\r\n          <tr>\r\n            <!--Sort-->\r\n            @if (configTable.tHead) {\r\n              @for (hColumn of configTable.tHead.columns; track $index) {\r\n                @if (hColumn.fieldOrder) {\r\n                  <th\r\n                    scope=\"col\"\r\n                    [tabindex]=\"hColumn.fieldOrder ? 0 : null\"\r\n                    [attr.aria-sort]=\"\r\n                      !(hColumn.fieldOrder === configTable.tPagination.order)\r\n                        ? null\r\n                        : configTable.tPagination.direction ===\r\n                            EnumDirectionSortTable.asc\r\n                          ? 'ascending'\r\n                          : 'descending'\r\n                    \"\r\n                    [ngClass]=\"{\r\n                      'frg-sorting': hColumn.fieldOrder,\r\n                      'frg-sorting-asc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.asc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order,\r\n                      'frg-sorting-desc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.desc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order\r\n                    }\"\r\n                    (click)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                    (keydown.enter)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                  >\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                } @else {\r\n                  <th scope=\"col\">\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                }\r\n              }\r\n            }\r\n            <!--End Sort-->\r\n            @if (configTable.tHead.action) {\r\n              <th\r\n                scope=\"col\"\r\n                [ngClass]=\"configTable.tHead.action.customClass ?? ''\"\r\n              >\r\n                {{ configTable.tHead.action.label }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n      }\r\n      <tbody>\r\n        @for (item of configTable.tBody.data; let i = $index; track $index) {\r\n          <tr\r\n            [attr.id]=\"i === 0 ? idFirstTr : null\"\r\n            [ngClass]=\"\r\n              configTable.tBody.rowClick?.behaviourAction?.clickEvent\r\n                ? 'cursor-pointer'\r\n                : ''\r\n            \"\r\n            [routerLink]=\"\r\n              configTable.tBody.rowClick?.disabled &&\r\n              configTable.tBody.rowClick?.disabled(item)\r\n                ? null\r\n                : configTable.tBody.rowClick?.behaviourAction?.link\r\n                  ? [\r\n                      configTable.tBody.rowClick?.behaviourAction?.link\r\n                        ? configTable.tBody.rowClick?.behaviourAction?.link\r\n                        : './',\r\n                      configTable.tBody.rowClick?.behaviourAction\r\n                        ?.customParamsLink ||\r\n                        (item | fieldArrayPosition: configTable.tBody.uniqueField)\r\n                    ]\r\n                  : null\r\n            \"\r\n            (click)=\"handleRowClick($event, item)\"\r\n            (keyup.enter)=\"handleRowClick($event, item)\"\r\n            (keydown)=\"handleRowClick($event, item)\"\r\n          >\r\n            @for (column of configTable.tBody.columns; let i = $index; track $index) {\r\n              <td>\r\n                <div [ngClass]=\"column.customClass\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"\r\n                      (column.cells | typeOfArray) ? cellForTpl : cellTpl\r\n                    \"\r\n                    [ngTemplateOutletContext]=\"{\r\n                      cells: column.cells,\r\n                      item: item\r\n                    }\"\r\n                  ></ng-container>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (configTable.tBody.action ?? false) {\r\n              <td\r\n                class=\"table-action\"\r\n                [ngClass]=\"configTable.tBody.action?.customClasses ?? ''\"\r\n              >\r\n                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {\r\n                  @if (act.visible && act.visible(item) ? true : null) {\r\n                    <frg-button\r\n                      [ariaLabel]=\"act.ariaLabel || 'Azione'\"\r\n                      [text]=\"''\"\r\n                      [iconClass]=\"act.iconClass ? act.iconClass(item) : ''\"\r\n                      [styleType]=\"'icon'\"\r\n                      [size]=\"'small'\"\r\n                      frgTooltip\r\n                      [tooltipConfig]=\"{\r\n                        apply:\r\n                          act.tooltip &&\r\n                          act.tooltip.apply &&\r\n                          act.visible &&\r\n                          act.visible(item)\r\n                            ? act.tooltip.apply\r\n                            : true,\r\n                        text:\r\n                          act.tooltip && act.tooltip.text\r\n                            ? act.tooltip.text(item)\r\n                            : '',\r\n                        textContent:\r\n                          act.tooltip && act.tooltip.textContent\r\n                            ? act.tooltip.textContent(item)\r\n                            : '',\r\n                        position:\r\n                          act.tooltip && act.tooltip.position\r\n                            ? act.tooltip.position\r\n                            : 'top',\r\n                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0\r\n                      }\"\r\n                      [disabled]=\"act.disabled ? act.disabled(item) : null\"\r\n                      [buttonRouterLink]=\"\r\n                        act.disabled && act.disabled(item)\r\n                          ? null\r\n                          : act.behaviourAction.link\r\n                            ? [\r\n                                act.behaviourAction.link\r\n                                  ? act.behaviourAction.link\r\n                                  : './',\r\n                                act.behaviourAction.customParamsLink ||\r\n                                  (item\r\n                                    | fieldArrayPosition\r\n                                      : configTable.tBody.uniqueField)\r\n                              ]\r\n                            : null\r\n                      \"\r\n                      (clickEvent)=\"\r\n                        act.behaviourAction.clickEvent\r\n                          ? act.behaviourAction.clickEvent(item)\r\n                          : null\r\n                      \"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                      (keyup.enter)=\"$event.stopPropagation()\"\r\n                    >\r\n                    </frg-button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (configTable.tPagination) {\r\n    <frg-small-pagination\r\n      [hasElipsisPages]=\"configTable.tPagination.hasElipsisPages ?? false\"\r\n      [pageSize]=\"configTable.tPagination.pageSize ?? 10\"\r\n      [page]=\"configTable.tPagination.page ?? 0\"\r\n      [totalItems]=\"configTable.tPagination.fullData?.length ?? 0\"\r\n      [fullData]=\"configTable.tPagination.fullData ?? []\"\r\n      [styleType]=\"styleType\"\r\n      (pageChange)=\"updateCurrentPage($event)\"\r\n    ></frg-small-pagination>\r\n  }\r\n} @else {\r\n  <div class=\"d-flex justify-content-center my-4\">\r\n    <div class=\"text-center\">No Elements</div>\r\n  </div>\r\n}\r\n\r\n<ng-template #cellForTpl let-cells=\"cells\" let-item=\"item\">\r\n  @for (cell of $any(cells); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"cellTpl\"\r\n      [ngTemplateOutletContext]=\"{\r\n        cell: cell,\r\n        item: item\r\n      }\"\r\n    ></ng-container>\r\n    <br />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-cell=\"cells\" let-item=\"item\">\r\n  @if (!cell.fieldPipe) {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\">\r\n      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}\r\n    </span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  } @else {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span\r\n      [innerHtml]=\"\r\n        item\r\n          | fieldArrayPosition: cell.fieldArrayPosition\r\n          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args\r\n          | safeHtml\r\n      \"\r\n      [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\"\r\n    ></span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".frg-title-bar{color:#3d3d3d;font-weight:400;font-size:1.25rem;box-shadow:0 2px 4px #0000001a;font-family:Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.frg-title-bar__primary{background-color:#4c7aae;color:#fdfdfd}.frg-title-bar__primary .frg-title-bar-title button{color:#4c7aae}.frg-title-bar__primary .frg-title-bar-filter,.frg-title-bar__primary .frg-title-bar-search{background-color:#6ea8d9}.frg-title-bar__secondary{background-color:#c9a24e;color:#fdfdfd}.frg-title-bar__secondary .frg-title-bar-title button{color:#c9a24e}.frg-title-bar__secondary .frg-title-bar-filter,.frg-title-bar__secondary .frg-title-bar-search{background-color:#e6c57a}.frg-title-bar__tertiary{background-color:#b05a99;color:#fdfdfd}.frg-title-bar__tertiary .frg-title-bar-title button{color:#b05a99}.frg-title-bar__tertiary .frg-title-bar-filter,.frg-title-bar__tertiary .frg-title-bar-search{background-color:#d97ebd}.frg-title-bar__dark{background-color:#3d3d3d;color:#fff}.frg-title-bar__light{background-color:#fdfdfd}.frg-title-bar .frg-title-bar-title{padding:15px 25px}.frg-title-bar .frg-title-bar-title button{outline:none;border:none;border-radius:50%;width:25px;height:25px;padding:15px;font-size:1rem}.frg-title-bar .frg-title-bar-title button:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;outline:3px solid #6ea8d9;box-shadow:none}.frg-title-bar .frg-title-bar-title button:focus-visible{outline-offset:5px}.frg-title-bar .frg-title-bar-filter__container{padding:25px}.frg-title-bar .frg-title-bar-filter label{display:block;font-size:.8rem;font-weight:lighter}.frg-title-bar .frg-title-bar-search__container{padding:25px}.frg-title-bar .frg-title-bar-search label{display:block;font-size:.8rem;font-weight:lighter}.frg-filter label,.frg-search label{display:block;font-size:.875rem;font-weight:400;margin-bottom:.5rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";text-transform:uppercase;letter-spacing:.05rem}.frg-filter input,.frg-search input{display:block;width:100%;padding:10px;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";line-height:1.5;color:#3d3d3d;background-color:#fdfdfd;background-clip:padding-box;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.frg-filter input::placeholder,.frg-search input::placeholder{color:#737579;opacity:1}.frg-filter input:focus,.frg-search input:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;box-shadow:0 0 0 .2rem #2e6ea640}.frg-filter input.is-invalid,.frg-search input.is-invalid{border-color:#d66a6a;padding-right:calc(10px + 2rem);background-image:url(data:image/svg+xml,\\ ...);background-repeat:no-repeat;background-position:center right 5px;background-size:6.6666666667px 6.6666666667px}.frg-filter input.is-invalid:focus,.frg-search input.is-invalid:focus{border-color:#d66a6a;box-shadow:0 0 0 .2rem #da1e2840}.frg-filter input:disabled,.frg-search input:disabled{background-color:#bfbfbf;border-color:#737579}.frg-table-responsive{border:1px solid #e6e9ef;border-radius:.25rem;overflow:hidden;background-color:#fdfdfd}frg-title-bar+.frg-table-responsive{border-top:none;border-radius:0 0 .25rem .25rem}.frg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background-color:#fdfdfd}.frg-table-responsive{border-radius:0 0 .25rem .25rem;border:1px solid #e6e9ef;overflow:hidden;background-color:#fdfdfd}.frg-table td,.frg-table th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e6e9ef;vertical-align:middle}.frg-table--row-small td,.frg-table--row-small th{padding:.35rem .6rem}.frg-table--row-medium td,.frg-table--row-medium th{padding:.75rem .9rem}.frg-table--row-large td,.frg-table--row-large th{padding:1rem 1.2rem}.frg-table thead th{background-color:#edf0f6;font-weight:600;color:#1f252e;letter-spacing:.01em;border-bottom:1px solid #e6e9ef}.frg-table tbody tr{transition:background-color .18s ease}.frg-table tbody tr:hover{background-color:#f1f4f9}.frg-table .frg-sorting{position:relative;cursor:pointer;padding-right:1.4rem}.frg-table .frg-sorting:before,.frg-table .frg-sorting:after{content:\"\";position:absolute;right:.65rem;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.5}.frg-table .frg-sorting:before{top:calc(50% - 6px);border-bottom:5px solid currentColor}.frg-table .frg-sorting:after{top:calc(50% + 2px);border-top:5px solid currentColor}.frg-table .frg-sorting-asc:after{opacity:.5}.frg-table .frg-sorting-asc:before{opacity:1}.frg-table .frg-sorting-desc:before{opacity:.5}.frg-table .frg-sorting-desc:after{opacity:1}.frg-table__primary{overflow:hidden}.frg-table__primary thead th,.frg-table__primary.frg-table thead th{background-color:#83b5de;color:#fdfdfd;border-bottom-color:#a1c6e6}.frg-table__primary tbody tr:hover{background-color:#e8f0f8}.frg-table__secondary{overflow:hidden}.frg-table__secondary thead th,.frg-table__secondary.frg-table thead th{background-color:#e9cd8e;color:#fdfdfd;border-bottom-color:#efd9a9}.frg-table__secondary tbody tr:hover{background-color:#faf5e9}.frg-table__tertiary{overflow:hidden}.frg-table__tertiary thead th,.frg-table__tertiary.frg-table thead th{background-color:#de91c7;color:#fdfdfd;border-bottom-color:#e6abd4}.frg-table__tertiary tbody tr:hover{background-color:#f8eaf3}.frg-table__dark{background-color:#3d3d3d;color:#fdfdfd}.frg-table__dark td,.frg-table__dark th{border-bottom-color:#fdfdfd1f}.frg-table__dark thead th{background-color:#505050;color:#fdfdfd;border-bottom-color:#fdfdfd29}.frg-table__dark tbody tr:hover{background-color:#4d4d4d}.frg-table__light,.frg-table__light thead th{background-color:#fdfdfd;color:#3d3d3d}.frg-table__light tbody tr:hover{background-color:#f1f4f9}@media screen and (max-width: 768px){.frg-table-responsive{overflow:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TitleBarComponent, selector: "frg-title-bar", inputs: ["title", "styleType"] }, { kind: "component", type: SmallPaginationComponent, selector: "frg-small-pagination", inputs: ["totalItems", "fullData", "page", "pageSize", "hasElipsisPages", "styleType"], outputs: ["pageChange"] }, { kind: "directive", type: FragmentsTooltipDirective, selector: "[frgTooltip]", inputs: ["tooltipConfig"] }, { kind: "component", type: ButtonComponent, selector: "frg-button", inputs: ["id", "class", "textClass", "iconClass", "iconStyleType", "iconPosition", "type", "size", "buttonRouterLink", "buttonRouterLinkActive", "disabled", "styleType", "shape", "text", "ariaLabel"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FieldArrayPositionPipe, name: "fieldArrayPosition" }, { kind: "pipe", type: TypeOfArrayPipe, name: "typeOfArray" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2367,7 +2363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         FragmentsTooltipDirective,
                         ButtonComponent,
                         ReactiveFormsModule,
-                    ], template: "@if (configTable.tTitleBar?.title) {\r\n  <frg-title-bar\r\n    [title]=\"configTable.tTitleBar?.title ?? ''\"\r\n    [styleType]=\"styleType\"\r\n  ></frg-title-bar>\r\n}\r\n@if (configTable.tBody.data && configTable.tBody.data.length > 0) {\r\n  <div class=\"frg-table-responsive\">\r\n    <table\r\n      class=\"frg-table\"\r\n      id=\"table1\"\r\n      [ngClass]=\"{\r\n        'frg-table__primary': styleType === 'primary',\r\n        'frg-table__secondary': styleType === 'secondary',\r\n        'frg-table__tertiary': styleType === 'tertiary',\r\n        'frg-table__dark': styleType === 'dark',\r\n        'frg-table__light': styleType === 'light',\r\n        'frg-table--row-small': rowSize === 'small',\r\n        'frg-table--row-medium': rowSize === 'medium',\r\n        'frg-table--row-large': rowSize === 'large'\r\n      }\"\r\n    >\r\n      @if (configTable.tCaption && configTable.tCaption.srOnly) {\r\n        <caption class=\"visually-hidden\">\r\n          {{ configTable.tCaption.srOnly }}\r\n        </caption>\r\n      }\r\n      @if (configTable.tHead.columns.length > 0) {\r\n        <thead #tableHead>\r\n          <tr>\r\n            <!--Sort-->\r\n            @if (configTable.tHead) {\r\n              @for (hColumn of configTable.tHead.columns; track $index) {\r\n                @if (hColumn.fieldOrder) {\r\n                  <th\r\n                    scope=\"col\"\r\n                    [tabindex]=\"hColumn.fieldOrder ? 0 : null\"\r\n                    [attr.aria-sort]=\"\r\n                      !(hColumn.fieldOrder === configTable.tPagination.order)\r\n                        ? null\r\n                        : configTable.tPagination.direction ===\r\n                            EnumDirectionSortTable.asc\r\n                          ? 'ascending'\r\n                          : 'descending'\r\n                    \"\r\n                    [ngClass]=\"{\r\n                      'frg-sorting': hColumn.fieldOrder,\r\n                      'frg-sorting-asc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.asc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order,\r\n                      'frg-sorting-desc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.desc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order\r\n                    }\"\r\n                    (click)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                    (keydown.enter)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                  >\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                } @else {\r\n                  <th scope=\"col\">\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                }\r\n              }\r\n            }\r\n            <!--End Sort-->\r\n            @if (configTable.tHead.action) {\r\n              <th\r\n                scope=\"col\"\r\n                [ngClass]=\"configTable.tHead.action.customClass ?? ''\"\r\n              >\r\n                {{ configTable.tHead.action.label }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n      }\r\n      <tbody>\r\n        @for (item of configTable.tBody.data; let i = $index; track $index) {\r\n          <tr\r\n            [attr.id]=\"i === 0 ? idFirstTr : null\"\r\n            [ngClass]=\"\r\n              configTable.tBody.rowClick?.behaviourAction?.clickEvent\r\n                ? 'cursor-pointer'\r\n                : ''\r\n            \"\r\n            [routerLink]=\"\r\n              configTable.tBody.rowClick?.disabled &&\r\n              configTable.tBody.rowClick?.disabled(item)\r\n                ? null\r\n                : configTable.tBody.rowClick?.behaviourAction?.link\r\n                  ? [\r\n                      configTable.tBody.rowClick?.behaviourAction?.link\r\n                        ? configTable.tBody.rowClick?.behaviourAction?.link\r\n                        : './',\r\n                      configTable.tBody.rowClick?.behaviourAction\r\n                        ?.customParamsLink ||\r\n                        (item | fieldArrayPosition: configTable.tBody.uniqueField)\r\n                    ]\r\n                  : null\r\n            \"\r\n            (click)=\"handleRowClick($event, item)\"\r\n            (keyup.enter)=\"handleRowClick($event, item)\"\r\n            (keydown)=\"handleRowClick($event, item)\"\r\n          >\r\n            @for (column of configTable.tBody.columns; let i = $index; track $index) {\r\n              <td>\r\n                <div [ngClass]=\"column.customClass\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"\r\n                      (column.cells | typeOfArray) ? cellForTpl : cellTpl\r\n                    \"\r\n                    [ngTemplateOutletContext]=\"{\r\n                      cells: column.cells,\r\n                      item: item\r\n                    }\"\r\n                  ></ng-container>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (configTable.tBody.action ?? false) {\r\n              <td\r\n                class=\"table-action\"\r\n                [ngClass]=\"configTable.tBody.action?.customClasses ?? ''\"\r\n              >\r\n                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {\r\n                  @if (act.visible && act.visible(item) ? true : null) {\r\n                    <frg-button\r\n                      [ariaLabel]=\"act.ariaLabel || 'Azione'\"\r\n                      [text]=\"''\"\r\n                      [iconClass]=\"act.iconClass ? act.iconClass(item) : ''\"\r\n                      [styleType]=\"'icon'\"\r\n                      [size]=\"'small'\"\r\n                      frgTooltip\r\n                      [tooltipConfig]=\"{\r\n                        apply:\r\n                          act.tooltip &&\r\n                          act.tooltip.apply &&\r\n                          act.visible &&\r\n                          act.visible(item)\r\n                            ? act.tooltip.apply\r\n                            : true,\r\n                        text:\r\n                          act.tooltip && act.tooltip.text\r\n                            ? act.tooltip.text(item)\r\n                            : '',\r\n                        textContent:\r\n                          act.tooltip && act.tooltip.textContent\r\n                            ? act.tooltip.textContent(item)\r\n                            : '',\r\n                        position:\r\n                          act.tooltip && act.tooltip.position\r\n                            ? act.tooltip.position\r\n                            : 'top',\r\n                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0\r\n                      }\"\r\n                      [disabled]=\"act.disabled ? act.disabled(item) : null\"\r\n                      [buttonRouterLink]=\"\r\n                        act.disabled && act.disabled(item)\r\n                          ? null\r\n                          : act.behaviourAction.link\r\n                            ? [\r\n                                act.behaviourAction.link\r\n                                  ? act.behaviourAction.link\r\n                                  : './',\r\n                                act.behaviourAction.customParamsLink ||\r\n                                  (item\r\n                                    | fieldArrayPosition\r\n                                      : configTable.tBody.uniqueField)\r\n                              ]\r\n                            : null\r\n                      \"\r\n                      (clickEvent)=\"\r\n                        act.behaviourAction.clickEvent\r\n                          ? act.behaviourAction.clickEvent(item)\r\n                          : null\r\n                      \"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                      (keyup.enter)=\"$event.stopPropagation()\"\r\n                    >\r\n                    </frg-button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (configTable.tPagination) {\r\n    <frg-small-pagination\r\n      [hasElipsisPages]=\"configTable.tPagination.hasElipsisPages ?? false\"\r\n      [pageSize]=\"configTable.tPagination.pageSize ?? 10\"\r\n      [page]=\"configTable.tPagination.page ?? 0\"\r\n      [totalItems]=\"configTable.tPagination.fullData?.length ?? 0\"\r\n      [fullData]=\"configTable.tPagination.fullData ?? []\"\r\n      [styleType]=\"styleType\"\r\n      (pageChange)=\"updateCurrentPage($event)\"\r\n    ></frg-small-pagination>\r\n  }\r\n} @else {\r\n  <div class=\"d-flex justify-content-center my-4\">\r\n    <div class=\"text-center\">No Elements</div>\r\n  </div>\r\n}\r\n\r\n<ng-template #cellForTpl let-cells=\"cells\" let-item=\"item\">\r\n  @for (cell of $any(cells); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"cellTpl\"\r\n      [ngTemplateOutletContext]=\"{\r\n        cell: cell,\r\n        item: item\r\n      }\"\r\n    ></ng-container>\r\n    <br />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-cell=\"cells\" let-item=\"item\">\r\n  @if (!cell.fieldPipe) {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\">\r\n      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}\r\n    </span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  } @else {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span\r\n      [innerHtml]=\"\r\n        item\r\n          | fieldArrayPosition: cell.fieldArrayPosition\r\n          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args\r\n          | safeHtml\r\n      \"\r\n      [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\"\r\n    ></span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".frg-title-bar{color:#3d3d3d;font-weight:400;font-size:1.25rem;box-shadow:0 2px 4px #0000001a;font-family:Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.frg-title-bar__primary{background-color:#4c7aae;color:#fdfdfd}.frg-title-bar__primary .frg-title-bar-title button{color:#4c7aae}.frg-title-bar__primary .frg-title-bar-filter,.frg-title-bar__primary .frg-title-bar-search{background-color:#6ea8d9}.frg-title-bar__secondary{background-color:#c9a24e;color:#fdfdfd}.frg-title-bar__secondary .frg-title-bar-title button{color:#c9a24e}.frg-title-bar__secondary .frg-title-bar-filter,.frg-title-bar__secondary .frg-title-bar-search{background-color:#e6c57a}.frg-title-bar__tertiary{background-color:#b05a99;color:#fdfdfd}.frg-title-bar__tertiary .frg-title-bar-title button{color:#b05a99}.frg-title-bar__tertiary .frg-title-bar-filter,.frg-title-bar__tertiary .frg-title-bar-search{background-color:#d97ebd}.frg-title-bar__dark{background-color:#3d3d3d;color:#fff}.frg-title-bar__light{background-color:#fdfdfd}.frg-title-bar .frg-title-bar-title{padding:15px 25px}.frg-title-bar .frg-title-bar-title button{outline:none;border:none;border-radius:50%;width:25px;height:25px;padding:15px;font-size:1rem}.frg-title-bar .frg-title-bar-title button:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;outline:3px solid #6ea8d9;box-shadow:none}.frg-title-bar .frg-title-bar-title button:focus-visible{outline-offset:5px}.frg-title-bar .frg-title-bar-filter__container{padding:25px}.frg-title-bar .frg-title-bar-filter label{display:block;font-size:.8rem;font-weight:lighter}.frg-title-bar .frg-title-bar-search__container{padding:25px}.frg-title-bar .frg-title-bar-search label{display:block;font-size:.8rem;font-weight:lighter}.frg-filter label,.frg-search label{display:block;font-size:.875rem;font-weight:400;margin-bottom:.5rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";text-transform:uppercase;letter-spacing:.05rem}.frg-filter input,.frg-search input{display:block;width:100%;padding:10px;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";line-height:1.5;color:#3d3d3d;background-color:#fdfdfd;background-clip:padding-box;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.frg-filter input::placeholder,.frg-search input::placeholder{color:#737579;opacity:1}.frg-filter input:focus,.frg-search input:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;box-shadow:0 0 0 .2rem #2e6ea640}.frg-filter input.is-invalid,.frg-search input.is-invalid{border-color:#d66a6a;padding-right:calc(10px + 2rem);background-image:url(data:image/svg+xml,\\ ...);background-repeat:no-repeat;background-position:center right 5px;background-size:6.6666666667px 6.6666666667px}.frg-filter input.is-invalid:focus,.frg-search input.is-invalid:focus{border-color:#d66a6a;box-shadow:0 0 0 .2rem #da1e2840}.frg-filter input:disabled,.frg-search input:disabled{background-color:#bfbfbf;border-color:#737579}.frg-table-responsive{border:1px solid #e6e9ef;border-radius:.25rem;overflow:hidden;background-color:#fdfdfd}frg-title-bar+.frg-table-responsive{border-top:none;border-radius:0 0 .25rem .25rem}.frg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background-color:#fdfdfd}.frg-table-responsive{border-radius:0 0 .25rem .25rem;border:1px solid #e6e9ef;overflow:hidden;background-color:#fdfdfd}.frg-table td,.frg-table th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e6e9ef;vertical-align:middle}.frg-table--row-small td,.frg-table--row-small th{padding:.35rem .6rem}.frg-table--row-medium td,.frg-table--row-medium th{padding:.75rem .9rem}.frg-table--row-large td,.frg-table--row-large th{padding:1rem 1.2rem}.frg-table thead th{background-color:#edf0f6;font-weight:600;color:#1f252e;letter-spacing:.01em;border-bottom:1px solid #e6e9ef}.frg-table tbody tr{transition:background-color .18s ease}.frg-table tbody tr:hover{background-color:#f1f4f9}.frg-table .frg-sorting{position:relative;cursor:pointer;padding-right:1.4rem}.frg-table .frg-sorting:before,.frg-table .frg-sorting:after{content:\"\";position:absolute;right:.65rem;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.5}.frg-table .frg-sorting:before{top:calc(50% - 6px);border-bottom:5px solid currentColor}.frg-table .frg-sorting:after{top:calc(50% + 2px);border-top:5px solid currentColor}.frg-table .frg-sorting-asc:after{opacity:.5}.frg-table .frg-sorting-asc:before{opacity:1}.frg-table .frg-sorting-desc:before{opacity:.5}.frg-table .frg-sorting-desc:after{opacity:1}.frg-table__primary{overflow:hidden}.frg-table__primary thead th,.frg-table__primary.frg-table thead th{background-color:#83b5de;color:#fdfdfd;border-bottom-color:#a1c6e6}.frg-table__primary tbody tr:hover{background-color:#e8f0f8}.frg-table__secondary{overflow:hidden}.frg-table__secondary thead th,.frg-table__secondary.frg-table thead th{background-color:#e9cd8e;color:#fdfdfd;border-bottom-color:#efd9a9}.frg-table__secondary tbody tr:hover{background-color:#faf5e9}.frg-table__tertiary{overflow:hidden}.frg-table__tertiary thead th,.frg-table__tertiary.frg-table thead th{background-color:#de91c7;color:#fdfdfd;border-bottom-color:#e6abd4}.frg-table__tertiary tbody tr:hover{background-color:#f8eaf3}.frg-table__dark{background-color:#3d3d3d;color:#fdfdfd}.frg-table__dark td,.frg-table__dark th{border-bottom-color:#fdfdfd1f}.frg-table__dark thead th{background-color:#505050;color:#fdfdfd;border-bottom-color:#fdfdfd29}.frg-table__dark tbody tr:hover{background-color:#4d4d4d}.frg-table__light,.frg-table__light thead th{background-color:#fdfdfd;color:#3d3d3d}.frg-table__light tbody tr:hover{background-color:#f1f4f9}@media screen and (max-width: 768px){.frg-table-responsive{overflow:auto}}\n"] }]
+                    ], template: "@if (configTable.tTitleBar?.title) {\r\n  <frg-title-bar\r\n    [title]=\"configTable.tTitleBar?.title ?? ''\"\r\n    [styleType]=\"styleType\"\r\n  ></frg-title-bar>\r\n}\r\n@if (configTable.tBody.data && configTable.tBody.data.length > 0) {\r\n  <div class=\"frg-table-responsive\">\r\n    <table\r\n      class=\"frg-table\"\r\n      id=\"table1\"\r\n      [ngClass]=\"{\r\n        'frg-table__primary': styleType === 'primary',\r\n        'frg-table__secondary': styleType === 'secondary',\r\n        'frg-table__tertiary': styleType === 'tertiary',\r\n        'frg-table__dark': styleType === 'dark',\r\n        'frg-table__light': styleType === 'light',\r\n        'frg-table--row-small': rowSize === 'small',\r\n        'frg-table--row-medium': rowSize === 'medium',\r\n        'frg-table--row-large': rowSize === 'large'\r\n      }\"\r\n    >\r\n      @if (configTable.tCaption && configTable.tCaption.srOnly) {\r\n        <caption class=\"frg-visually-hidden\">\r\n          {{ configTable.tCaption.srOnly }}\r\n        </caption>\r\n      }\r\n      @if (configTable.tHead.columns.length > 0) {\r\n        <thead #tableHead>\r\n          <tr>\r\n            <!--Sort-->\r\n            @if (configTable.tHead) {\r\n              @for (hColumn of configTable.tHead.columns; track $index) {\r\n                @if (hColumn.fieldOrder) {\r\n                  <th\r\n                    scope=\"col\"\r\n                    [tabindex]=\"hColumn.fieldOrder ? 0 : null\"\r\n                    [attr.aria-sort]=\"\r\n                      !(hColumn.fieldOrder === configTable.tPagination.order)\r\n                        ? null\r\n                        : configTable.tPagination.direction ===\r\n                            EnumDirectionSortTable.asc\r\n                          ? 'ascending'\r\n                          : 'descending'\r\n                    \"\r\n                    [ngClass]=\"{\r\n                      'frg-sorting': hColumn.fieldOrder,\r\n                      'frg-sorting-asc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.asc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order,\r\n                      'frg-sorting-desc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.desc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order\r\n                    }\"\r\n                    (click)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                    (keydown.enter)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                  >\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                } @else {\r\n                  <th scope=\"col\">\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                }\r\n              }\r\n            }\r\n            <!--End Sort-->\r\n            @if (configTable.tHead.action) {\r\n              <th\r\n                scope=\"col\"\r\n                [ngClass]=\"configTable.tHead.action.customClass ?? ''\"\r\n              >\r\n                {{ configTable.tHead.action.label }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n      }\r\n      <tbody>\r\n        @for (item of configTable.tBody.data; let i = $index; track $index) {\r\n          <tr\r\n            [attr.id]=\"i === 0 ? idFirstTr : null\"\r\n            [ngClass]=\"\r\n              configTable.tBody.rowClick?.behaviourAction?.clickEvent\r\n                ? 'cursor-pointer'\r\n                : ''\r\n            \"\r\n            [routerLink]=\"\r\n              configTable.tBody.rowClick?.disabled &&\r\n              configTable.tBody.rowClick?.disabled(item)\r\n                ? null\r\n                : configTable.tBody.rowClick?.behaviourAction?.link\r\n                  ? [\r\n                      configTable.tBody.rowClick?.behaviourAction?.link\r\n                        ? configTable.tBody.rowClick?.behaviourAction?.link\r\n                        : './',\r\n                      configTable.tBody.rowClick?.behaviourAction\r\n                        ?.customParamsLink ||\r\n                        (item | fieldArrayPosition: configTable.tBody.uniqueField)\r\n                    ]\r\n                  : null\r\n            \"\r\n            (click)=\"handleRowClick($event, item)\"\r\n            (keyup.enter)=\"handleRowClick($event, item)\"\r\n            (keydown)=\"handleRowClick($event, item)\"\r\n          >\r\n            @for (column of configTable.tBody.columns; let i = $index; track $index) {\r\n              <td>\r\n                <div [ngClass]=\"column.customClass\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"\r\n                      (column.cells | typeOfArray) ? cellForTpl : cellTpl\r\n                    \"\r\n                    [ngTemplateOutletContext]=\"{\r\n                      cells: column.cells,\r\n                      item: item\r\n                    }\"\r\n                  ></ng-container>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (configTable.tBody.action ?? false) {\r\n              <td\r\n                class=\"table-action\"\r\n                [ngClass]=\"configTable.tBody.action?.customClasses ?? ''\"\r\n              >\r\n                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {\r\n                  @if (act.visible && act.visible(item) ? true : null) {\r\n                    <frg-button\r\n                      [ariaLabel]=\"act.ariaLabel || 'Azione'\"\r\n                      [text]=\"''\"\r\n                      [iconClass]=\"act.iconClass ? act.iconClass(item) : ''\"\r\n                      [styleType]=\"'icon'\"\r\n                      [size]=\"'small'\"\r\n                      frgTooltip\r\n                      [tooltipConfig]=\"{\r\n                        apply:\r\n                          act.tooltip &&\r\n                          act.tooltip.apply &&\r\n                          act.visible &&\r\n                          act.visible(item)\r\n                            ? act.tooltip.apply\r\n                            : true,\r\n                        text:\r\n                          act.tooltip && act.tooltip.text\r\n                            ? act.tooltip.text(item)\r\n                            : '',\r\n                        textContent:\r\n                          act.tooltip && act.tooltip.textContent\r\n                            ? act.tooltip.textContent(item)\r\n                            : '',\r\n                        position:\r\n                          act.tooltip && act.tooltip.position\r\n                            ? act.tooltip.position\r\n                            : 'top',\r\n                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0\r\n                      }\"\r\n                      [disabled]=\"act.disabled ? act.disabled(item) : null\"\r\n                      [buttonRouterLink]=\"\r\n                        act.disabled && act.disabled(item)\r\n                          ? null\r\n                          : act.behaviourAction.link\r\n                            ? [\r\n                                act.behaviourAction.link\r\n                                  ? act.behaviourAction.link\r\n                                  : './',\r\n                                act.behaviourAction.customParamsLink ||\r\n                                  (item\r\n                                    | fieldArrayPosition\r\n                                      : configTable.tBody.uniqueField)\r\n                              ]\r\n                            : null\r\n                      \"\r\n                      (clickEvent)=\"\r\n                        act.behaviourAction.clickEvent\r\n                          ? act.behaviourAction.clickEvent(item)\r\n                          : null\r\n                      \"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                      (keyup.enter)=\"$event.stopPropagation()\"\r\n                    >\r\n                    </frg-button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (configTable.tPagination) {\r\n    <frg-small-pagination\r\n      [hasElipsisPages]=\"configTable.tPagination.hasElipsisPages ?? false\"\r\n      [pageSize]=\"configTable.tPagination.pageSize ?? 10\"\r\n      [page]=\"configTable.tPagination.page ?? 0\"\r\n      [totalItems]=\"configTable.tPagination.fullData?.length ?? 0\"\r\n      [fullData]=\"configTable.tPagination.fullData ?? []\"\r\n      [styleType]=\"styleType\"\r\n      (pageChange)=\"updateCurrentPage($event)\"\r\n    ></frg-small-pagination>\r\n  }\r\n} @else {\r\n  <div class=\"d-flex justify-content-center my-4\">\r\n    <div class=\"text-center\">No Elements</div>\r\n  </div>\r\n}\r\n\r\n<ng-template #cellForTpl let-cells=\"cells\" let-item=\"item\">\r\n  @for (cell of $any(cells); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"cellTpl\"\r\n      [ngTemplateOutletContext]=\"{\r\n        cell: cell,\r\n        item: item\r\n      }\"\r\n    ></ng-container>\r\n    <br />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-cell=\"cells\" let-item=\"item\">\r\n  @if (!cell.fieldPipe) {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\">\r\n      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}\r\n    </span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  } @else {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span\r\n      [innerHtml]=\"\r\n        item\r\n          | fieldArrayPosition: cell.fieldArrayPosition\r\n          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args\r\n          | safeHtml\r\n      \"\r\n      [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\"\r\n    ></span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".frg-title-bar{color:#3d3d3d;font-weight:400;font-size:1.25rem;box-shadow:0 2px 4px #0000001a;font-family:Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.frg-title-bar__primary{background-color:#4c7aae;color:#fdfdfd}.frg-title-bar__primary .frg-title-bar-title button{color:#4c7aae}.frg-title-bar__primary .frg-title-bar-filter,.frg-title-bar__primary .frg-title-bar-search{background-color:#6ea8d9}.frg-title-bar__secondary{background-color:#c9a24e;color:#fdfdfd}.frg-title-bar__secondary .frg-title-bar-title button{color:#c9a24e}.frg-title-bar__secondary .frg-title-bar-filter,.frg-title-bar__secondary .frg-title-bar-search{background-color:#e6c57a}.frg-title-bar__tertiary{background-color:#b05a99;color:#fdfdfd}.frg-title-bar__tertiary .frg-title-bar-title button{color:#b05a99}.frg-title-bar__tertiary .frg-title-bar-filter,.frg-title-bar__tertiary .frg-title-bar-search{background-color:#d97ebd}.frg-title-bar__dark{background-color:#3d3d3d;color:#fff}.frg-title-bar__light{background-color:#fdfdfd}.frg-title-bar .frg-title-bar-title{padding:15px 25px}.frg-title-bar .frg-title-bar-title button{outline:none;border:none;border-radius:50%;width:25px;height:25px;padding:15px;font-size:1rem}.frg-title-bar .frg-title-bar-title button:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;outline:3px solid #6ea8d9;box-shadow:none}.frg-title-bar .frg-title-bar-title button:focus-visible{outline-offset:5px}.frg-title-bar .frg-title-bar-filter__container{padding:25px}.frg-title-bar .frg-title-bar-filter label{display:block;font-size:.8rem;font-weight:lighter}.frg-title-bar .frg-title-bar-search__container{padding:25px}.frg-title-bar .frg-title-bar-search label{display:block;font-size:.8rem;font-weight:lighter}.frg-filter label,.frg-search label{display:block;font-size:.875rem;font-weight:400;margin-bottom:.5rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";text-transform:uppercase;letter-spacing:.05rem}.frg-filter input,.frg-search input{display:block;width:100%;padding:10px;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";line-height:1.5;color:#3d3d3d;background-color:#fdfdfd;background-clip:padding-box;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.frg-filter input::placeholder,.frg-search input::placeholder{color:#737579;opacity:1}.frg-filter input:focus,.frg-search input:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;box-shadow:0 0 0 .2rem #2e6ea640}.frg-filter input.is-invalid,.frg-search input.is-invalid{border-color:#d66a6a;padding-right:calc(10px + 2rem);background-image:url(data:image/svg+xml,\\ ...);background-repeat:no-repeat;background-position:center right 5px;background-size:6.6666666667px 6.6666666667px}.frg-filter input.is-invalid:focus,.frg-search input.is-invalid:focus{border-color:#d66a6a;box-shadow:0 0 0 .2rem #da1e2840}.frg-filter input:disabled,.frg-search input:disabled{background-color:#bfbfbf;border-color:#737579}.frg-table-responsive{border:1px solid #e6e9ef;border-radius:.25rem;overflow:hidden;background-color:#fdfdfd}frg-title-bar+.frg-table-responsive{border-top:none;border-radius:0 0 .25rem .25rem}.frg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background-color:#fdfdfd}.frg-table-responsive{border-radius:0 0 .25rem .25rem;border:1px solid #e6e9ef;overflow:hidden;background-color:#fdfdfd}.frg-table td,.frg-table th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e6e9ef;vertical-align:middle}.frg-table--row-small td,.frg-table--row-small th{padding:.35rem .6rem}.frg-table--row-medium td,.frg-table--row-medium th{padding:.75rem .9rem}.frg-table--row-large td,.frg-table--row-large th{padding:1rem 1.2rem}.frg-table thead th{background-color:#edf0f6;font-weight:600;color:#1f252e;letter-spacing:.01em;border-bottom:1px solid #e6e9ef}.frg-table tbody tr{transition:background-color .18s ease}.frg-table tbody tr:hover{background-color:#f1f4f9}.frg-table .frg-sorting{position:relative;cursor:pointer;padding-right:1.4rem}.frg-table .frg-sorting:before,.frg-table .frg-sorting:after{content:\"\";position:absolute;right:.65rem;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.5}.frg-table .frg-sorting:before{top:calc(50% - 6px);border-bottom:5px solid currentColor}.frg-table .frg-sorting:after{top:calc(50% + 2px);border-top:5px solid currentColor}.frg-table .frg-sorting-asc:after{opacity:.5}.frg-table .frg-sorting-asc:before{opacity:1}.frg-table .frg-sorting-desc:before{opacity:.5}.frg-table .frg-sorting-desc:after{opacity:1}.frg-table__primary{overflow:hidden}.frg-table__primary thead th,.frg-table__primary.frg-table thead th{background-color:#83b5de;color:#fdfdfd;border-bottom-color:#a1c6e6}.frg-table__primary tbody tr:hover{background-color:#e8f0f8}.frg-table__secondary{overflow:hidden}.frg-table__secondary thead th,.frg-table__secondary.frg-table thead th{background-color:#e9cd8e;color:#fdfdfd;border-bottom-color:#efd9a9}.frg-table__secondary tbody tr:hover{background-color:#faf5e9}.frg-table__tertiary{overflow:hidden}.frg-table__tertiary thead th,.frg-table__tertiary.frg-table thead th{background-color:#de91c7;color:#fdfdfd;border-bottom-color:#e6abd4}.frg-table__tertiary tbody tr:hover{background-color:#f8eaf3}.frg-table__dark{background-color:#3d3d3d;color:#fdfdfd}.frg-table__dark td,.frg-table__dark th{border-bottom-color:#fdfdfd1f}.frg-table__dark thead th{background-color:#505050;color:#fdfdfd;border-bottom-color:#fdfdfd29}.frg-table__dark tbody tr:hover{background-color:#4d4d4d}.frg-table__light,.frg-table__light thead th{background-color:#fdfdfd;color:#3d3d3d}.frg-table__light tbody tr:hover{background-color:#f1f4f9}@media screen and (max-width: 768px){.frg-table-responsive{overflow:auto}}\n"] }]
         }], propDecorators: { configTable: [{
                 type: Input
             }], styleType: [{
@@ -4637,11 +4633,11 @@ class InputCalendarComponent {
         this.hasYearSelectionOpen$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputCalendarComponent, isStandalone: true, selector: "frg-input-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", selectedValue: "selectedValue" }, outputs: { selectDate: "selectDate", handleMaxDate: "handleMaxDate", handleMinDate: "handleMinDate" }, ngImport: i0, template: "<div class=\"frg-calendar\" tabindex=\"-1\">\r\n  <div class=\"frg-calendar__head\">\r\n    <button class=\"frg__\" href=\"javascript:void(0);\" (click)=\"changeMonth(currentMonth - 1)\">\r\n      <span class=\"visually-hidden\">Previous Page</span>\r\n      <span class=\"fas fa-angle-left\" aria-hidden=\"true\"></span>\r\n    </button>\r\n    <button class=\"frg-calendar__month\" (click)=\"openMonthSelection()\">\r\n      {{month}}\r\n    </button>\r\n    @if((hasMonthSelectionOpen$ | async)){\r\n      <div class=\"frg-date-selection\">\r\n        <div class=\"frg-date-selection__month\">\r\n          <ul class=\"frg-date-selection__month__list\">\r\n            @for(month of months; let i = $index; track $index){\r\n              <li class=\"frg-date-selection__month__item-list\"\r\n                [class.selected-month]=\"isSelectedYearOrMonth(i + 1, currentMonth)\"\r\n              >\r\n               <button (click)=\"selectMonth($event, i + 1)\">\r\n                  {{month}}  \r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    }\r\n   <button class=\"frg-calendar__year\" (click)=\"openYearSelection()\">\r\n    {{year}}\r\n  </button>\r\n  @if((hasYearSelectionOpen$ | async)){\r\n    <div class=\"frg-date-selection\">\r\n      <div class=\"frg-date-selection__year\">\r\n        <ul class=\"frg-date-selection__year__list\">\r\n          @for(year of years; track $index){\r\n          <li class=\"frg-date-selection__year__item-list\"\r\n           [class.selected-year]=\"isSelectedYearOrMonth(year, currentYear)\"\r\n          >\r\n            <button (click)=\"selectYear($event, year)\">\r\n              {{year}}\r\n            </button>\r\n          </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  }\r\n  <button href=\"javascript:void(0);\" (click)=\"changeMonth(currentMonth + 1)\">\r\n    <span class=\"visually-hidden\">Next Page</span>\r\n    <span class=\"fas fa-angle-right\" aria-hidden=\"true\"></span>\r\n  </button>\r\n  </div>\r\n  <div class=\"frg-calendar__body\">\r\n    <div class=\"frg-calendar__week-day\">\r\n      @for (dayName of weekDays; track $index) {\r\n        <span>{{dayName}}</span>\r\n      }\r\n    </div>\r\n    @for (week of calendarDays | chunk:7; track $index) {\r\n      <div class=\"frg-calendar__week\">\r\n        @for (day of week; track $index){\r\n          <span class=\"frg-calendar__day\"\r\n            [class.other-month]=\"day.getMonth() !== currentMonth - 1\"\r\n            [class.current-date]=\"isToday(day)\"\r\n            [class.selected-date]=\"isSelected(day, selectedValue)\"\r\n            [class.disabled-date]=\"isDisabled(day)\"\r\n          >\r\n            <button type=\"button\" class=\"frg-calendar__day-button\"\r\n              (click)=\"onSelectDate($event, day)\">\r\n                {{ day.getDate() }}\r\n            </button>\r\n          </span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [":host{display:block}:host .frg-calendar{display:grid;background-color:#fdfdfd;color:#5e5f62;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;border-radius:.2rem;padding:.5rem;margin-top:.3rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-calendar__head{display:inline-flex;position:relative;align-items:center;justify-content:space-between}:host .frg-calendar__head button{background:transparent;border:none;color:#5e5f62;padding:.25rem}:host .frg-calendar__head button:hover{background:#4c7aae;color:#fdfdfd}:host .frg-calendar__body{display:flex;flex-direction:column;gap:.25rem}:host .frg-calendar__week-day{padding:.25rem 0;font-size:.75rem;text-align:center}:host .frg-calendar__week,:host .frg-calendar__week-day{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}:host .frg-calendar__day{display:flex;justify-content:center;align-items:center;min-height:2rem}:host .frg-calendar__day:hover{background-color:#6ea8d9;color:#fdfdfd;cursor:pointer}:host .frg-calendar__day.current-date{background-color:#b3d1f0;color:#fdfdfd;text-decoration:underline}:host .frg-calendar__day.other-month{opacity:.5}:host .frg-calendar__day.selected-date{background-color:#6ea8d9;color:#fdfdfd}:host .frg-calendar__day.disabled-date,:host .frg-calendar__day.disabled-date button{text-decoration:line-through;pointer-events:none}:host .frg-calendar__day.disabled-date:hover,:host .frg-calendar__day.disabled-date button:hover,:host .frg-calendar__day.disabled-date button button:hover{cursor:not-allowed}:host .frg-calendar__day-button{background:inherit;color:inherit;border:none}:host .frg-date-selection{position:absolute;overflow-y:scroll;max-height:250px;right:1rem;top:2rem;border-radius:.1rem;background:#fdfdfd;box-shadow:0 1px 2px #00000014,0 1px 3px #0000001f;z-index:1;scrollbar-width:thin;scrollbar-color:#6ea8d9 transparent}:host .frg-date-selection__year__list{list-style:none;padding:0}:host .frg-date-selection__year__item-list button{padding:.5rem 1rem;width:100%}:host .frg-date-selection__year__item-list button:hover{background-color:#b3d1f0;color:#fdfdfd;cursor:pointer}:host .frg-date-selection__year__item-list.selected-year{background-color:#6ea8d9;color:#fdfdfd}:host .frg-date-selection__year__item-list.selected-year button{color:#fdfdfd}:host .frg-date-selection__month__list{list-style:none;padding:0}:host .frg-date-selection__month__item-list button{padding:.5rem 1rem;width:100%}:host .frg-date-selection__month__item-list button:hover{background-color:#6ea8d9;color:#fdfdfd;cursor:pointer}:host .frg-date-selection__month__item-list.selected-month{background-color:#6ea8d9;color:#fdfdfd}:host .frg-date-selection__month__item-list.selected-month button{color:#fdfdfd}\n"], dependencies: [{ kind: "pipe", type: ChunkPipe, name: "chunk" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputCalendarComponent, isStandalone: true, selector: "frg-input-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", selectedValue: "selectedValue" }, outputs: { selectDate: "selectDate", handleMaxDate: "handleMaxDate", handleMinDate: "handleMinDate" }, ngImport: i0, template: "<div class=\"frg-calendar\" tabindex=\"-1\">\r\n  <div class=\"frg-calendar__head\">\r\n    <button class=\"frg__\" href=\"javascript:void(0);\" (click)=\"changeMonth(currentMonth - 1)\">\r\n      <span class=\"frg-visually-hidden\">Previous Page</span>\r\n      <span class=\"fas fa-angle-left\" aria-hidden=\"true\"></span>\r\n    </button>\r\n    <button class=\"frg-calendar__month\" (click)=\"openMonthSelection()\">\r\n      {{month}}\r\n    </button>\r\n    @if((hasMonthSelectionOpen$ | async)){\r\n      <div class=\"frg-date-selection\">\r\n        <div class=\"frg-date-selection__month\">\r\n          <ul class=\"frg-date-selection__month__list\">\r\n            @for(month of months; let i = $index; track $index){\r\n              <li class=\"frg-date-selection__month__item-list\"\r\n                [class.selected-month]=\"isSelectedYearOrMonth(i + 1, currentMonth)\"\r\n              >\r\n               <button (click)=\"selectMonth($event, i + 1)\">\r\n                  {{month}}  \r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    }\r\n   <button class=\"frg-calendar__year\" (click)=\"openYearSelection()\">\r\n    {{year}}\r\n  </button>\r\n  @if((hasYearSelectionOpen$ | async)){\r\n    <div class=\"frg-date-selection\">\r\n      <div class=\"frg-date-selection__year\">\r\n        <ul class=\"frg-date-selection__year__list\">\r\n          @for(year of years; track $index){\r\n          <li class=\"frg-date-selection__year__item-list\"\r\n           [class.selected-year]=\"isSelectedYearOrMonth(year, currentYear)\"\r\n          >\r\n            <button (click)=\"selectYear($event, year)\">\r\n              {{year}}\r\n            </button>\r\n          </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  }\r\n  <button href=\"javascript:void(0);\" (click)=\"changeMonth(currentMonth + 1)\">\r\n    <span class=\"frg-visually-hidden\">Next Page</span>\r\n    <span class=\"fas fa-angle-right\" aria-hidden=\"true\"></span>\r\n  </button>\r\n  </div>\r\n  <div class=\"frg-calendar__body\">\r\n    <div class=\"frg-calendar__week-day\">\r\n      @for (dayName of weekDays; track $index) {\r\n        <span>{{dayName}}</span>\r\n      }\r\n    </div>\r\n    @for (week of calendarDays | chunk:7; track $index) {\r\n      <div class=\"frg-calendar__week\">\r\n        @for (day of week; track $index){\r\n          <span class=\"frg-calendar__day\"\r\n            [class.other-month]=\"day.getMonth() !== currentMonth - 1\"\r\n            [class.current-date]=\"isToday(day)\"\r\n            [class.selected-date]=\"isSelected(day, selectedValue)\"\r\n            [class.disabled-date]=\"isDisabled(day)\"\r\n          >\r\n            <button type=\"button\" class=\"frg-calendar__day-button\"\r\n              (click)=\"onSelectDate($event, day)\">\r\n                {{ day.getDate() }}\r\n            </button>\r\n          </span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [":host{display:block}:host .frg-calendar{display:grid;background-color:#fdfdfd;color:#5e5f62;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;border-radius:.2rem;padding:.5rem;margin-top:.3rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-calendar__head{display:inline-flex;position:relative;align-items:center;justify-content:space-between}:host .frg-calendar__head button{background:transparent;border:none;color:#5e5f62;padding:.25rem}:host .frg-calendar__head button:hover{background:#4c7aae;color:#fdfdfd}:host .frg-calendar__body{display:flex;flex-direction:column;gap:.25rem}:host .frg-calendar__week-day{padding:.25rem 0;font-size:.75rem;text-align:center}:host .frg-calendar__week,:host .frg-calendar__week-day{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}:host .frg-calendar__day{display:flex;justify-content:center;align-items:center;min-height:2rem}:host .frg-calendar__day:hover{background-color:#6ea8d9;color:#fdfdfd;cursor:pointer}:host .frg-calendar__day.current-date{background-color:#b3d1f0;color:#fdfdfd;text-decoration:underline}:host .frg-calendar__day.other-month{opacity:.5}:host .frg-calendar__day.selected-date{background-color:#6ea8d9;color:#fdfdfd}:host .frg-calendar__day.disabled-date,:host .frg-calendar__day.disabled-date button{text-decoration:line-through;pointer-events:none}:host .frg-calendar__day.disabled-date:hover,:host .frg-calendar__day.disabled-date button:hover,:host .frg-calendar__day.disabled-date button button:hover{cursor:not-allowed}:host .frg-calendar__day-button{background:inherit;color:inherit;border:none}:host .frg-date-selection{position:absolute;overflow-y:scroll;max-height:250px;right:1rem;top:2rem;border-radius:.1rem;background:#fdfdfd;box-shadow:0 1px 2px #00000014,0 1px 3px #0000001f;z-index:1;scrollbar-width:thin;scrollbar-color:#6ea8d9 transparent}:host .frg-date-selection__year__list{list-style:none;padding:0}:host .frg-date-selection__year__item-list button{padding:.5rem 1rem;width:100%}:host .frg-date-selection__year__item-list button:hover{background-color:#b3d1f0;color:#fdfdfd;cursor:pointer}:host .frg-date-selection__year__item-list.selected-year{background-color:#6ea8d9;color:#fdfdfd}:host .frg-date-selection__year__item-list.selected-year button{color:#fdfdfd}:host .frg-date-selection__month__list{list-style:none;padding:0}:host .frg-date-selection__month__item-list button{padding:.5rem 1rem;width:100%}:host .frg-date-selection__month__item-list button:hover{background-color:#6ea8d9;color:#fdfdfd;cursor:pointer}:host .frg-date-selection__month__item-list.selected-month{background-color:#6ea8d9;color:#fdfdfd}:host .frg-date-selection__month__item-list.selected-month button{color:#fdfdfd}\n"], dependencies: [{ kind: "pipe", type: ChunkPipe, name: "chunk" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'frg-input-calendar', imports: [ChunkPipe, AsyncPipe], template: "<div class=\"frg-calendar\" tabindex=\"-1\">\r\n  <div class=\"frg-calendar__head\">\r\n    <button class=\"frg__\" href=\"javascript:void(0);\" (click)=\"changeMonth(currentMonth - 1)\">\r\n      <span class=\"visually-hidden\">Previous Page</span>\r\n      <span class=\"fas fa-angle-left\" aria-hidden=\"true\"></span>\r\n    </button>\r\n    <button class=\"frg-calendar__month\" (click)=\"openMonthSelection()\">\r\n      {{month}}\r\n    </button>\r\n    @if((hasMonthSelectionOpen$ | async)){\r\n      <div class=\"frg-date-selection\">\r\n        <div class=\"frg-date-selection__month\">\r\n          <ul class=\"frg-date-selection__month__list\">\r\n            @for(month of months; let i = $index; track $index){\r\n              <li class=\"frg-date-selection__month__item-list\"\r\n                [class.selected-month]=\"isSelectedYearOrMonth(i + 1, currentMonth)\"\r\n              >\r\n               <button (click)=\"selectMonth($event, i + 1)\">\r\n                  {{month}}  \r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    }\r\n   <button class=\"frg-calendar__year\" (click)=\"openYearSelection()\">\r\n    {{year}}\r\n  </button>\r\n  @if((hasYearSelectionOpen$ | async)){\r\n    <div class=\"frg-date-selection\">\r\n      <div class=\"frg-date-selection__year\">\r\n        <ul class=\"frg-date-selection__year__list\">\r\n          @for(year of years; track $index){\r\n          <li class=\"frg-date-selection__year__item-list\"\r\n           [class.selected-year]=\"isSelectedYearOrMonth(year, currentYear)\"\r\n          >\r\n            <button (click)=\"selectYear($event, year)\">\r\n              {{year}}\r\n            </button>\r\n          </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  }\r\n  <button href=\"javascript:void(0);\" (click)=\"changeMonth(currentMonth + 1)\">\r\n    <span class=\"visually-hidden\">Next Page</span>\r\n    <span class=\"fas fa-angle-right\" aria-hidden=\"true\"></span>\r\n  </button>\r\n  </div>\r\n  <div class=\"frg-calendar__body\">\r\n    <div class=\"frg-calendar__week-day\">\r\n      @for (dayName of weekDays; track $index) {\r\n        <span>{{dayName}}</span>\r\n      }\r\n    </div>\r\n    @for (week of calendarDays | chunk:7; track $index) {\r\n      <div class=\"frg-calendar__week\">\r\n        @for (day of week; track $index){\r\n          <span class=\"frg-calendar__day\"\r\n            [class.other-month]=\"day.getMonth() !== currentMonth - 1\"\r\n            [class.current-date]=\"isToday(day)\"\r\n            [class.selected-date]=\"isSelected(day, selectedValue)\"\r\n            [class.disabled-date]=\"isDisabled(day)\"\r\n          >\r\n            <button type=\"button\" class=\"frg-calendar__day-button\"\r\n              (click)=\"onSelectDate($event, day)\">\r\n                {{ day.getDate() }}\r\n            </button>\r\n          </span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [":host{display:block}:host .frg-calendar{display:grid;background-color:#fdfdfd;color:#5e5f62;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;border-radius:.2rem;padding:.5rem;margin-top:.3rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-calendar__head{display:inline-flex;position:relative;align-items:center;justify-content:space-between}:host .frg-calendar__head button{background:transparent;border:none;color:#5e5f62;padding:.25rem}:host .frg-calendar__head button:hover{background:#4c7aae;color:#fdfdfd}:host .frg-calendar__body{display:flex;flex-direction:column;gap:.25rem}:host .frg-calendar__week-day{padding:.25rem 0;font-size:.75rem;text-align:center}:host .frg-calendar__week,:host .frg-calendar__week-day{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}:host .frg-calendar__day{display:flex;justify-content:center;align-items:center;min-height:2rem}:host .frg-calendar__day:hover{background-color:#6ea8d9;color:#fdfdfd;cursor:pointer}:host .frg-calendar__day.current-date{background-color:#b3d1f0;color:#fdfdfd;text-decoration:underline}:host .frg-calendar__day.other-month{opacity:.5}:host .frg-calendar__day.selected-date{background-color:#6ea8d9;color:#fdfdfd}:host .frg-calendar__day.disabled-date,:host .frg-calendar__day.disabled-date button{text-decoration:line-through;pointer-events:none}:host .frg-calendar__day.disabled-date:hover,:host .frg-calendar__day.disabled-date button:hover,:host .frg-calendar__day.disabled-date button button:hover{cursor:not-allowed}:host .frg-calendar__day-button{background:inherit;color:inherit;border:none}:host .frg-date-selection{position:absolute;overflow-y:scroll;max-height:250px;right:1rem;top:2rem;border-radius:.1rem;background:#fdfdfd;box-shadow:0 1px 2px #00000014,0 1px 3px #0000001f;z-index:1;scrollbar-width:thin;scrollbar-color:#6ea8d9 transparent}:host .frg-date-selection__year__list{list-style:none;padding:0}:host .frg-date-selection__year__item-list button{padding:.5rem 1rem;width:100%}:host .frg-date-selection__year__item-list button:hover{background-color:#b3d1f0;color:#fdfdfd;cursor:pointer}:host .frg-date-selection__year__item-list.selected-year{background-color:#6ea8d9;color:#fdfdfd}:host .frg-date-selection__year__item-list.selected-year button{color:#fdfdfd}:host .frg-date-selection__month__list{list-style:none;padding:0}:host .frg-date-selection__month__item-list button{padding:.5rem 1rem;width:100%}:host .frg-date-selection__month__item-list button:hover{background-color:#6ea8d9;color:#fdfdfd;cursor:pointer}:host .frg-date-selection__month__item-list.selected-month{background-color:#6ea8d9;color:#fdfdfd}:host .frg-date-selection__month__item-list.selected-month button{color:#fdfdfd}\n"] }]
+            args: [{ selector: 'frg-input-calendar', imports: [ChunkPipe, AsyncPipe], template: "<div class=\"frg-calendar\" tabindex=\"-1\">\r\n  <div class=\"frg-calendar__head\">\r\n    <button class=\"frg__\" href=\"javascript:void(0);\" (click)=\"changeMonth(currentMonth - 1)\">\r\n      <span class=\"frg-visually-hidden\">Previous Page</span>\r\n      <span class=\"fas fa-angle-left\" aria-hidden=\"true\"></span>\r\n    </button>\r\n    <button class=\"frg-calendar__month\" (click)=\"openMonthSelection()\">\r\n      {{month}}\r\n    </button>\r\n    @if((hasMonthSelectionOpen$ | async)){\r\n      <div class=\"frg-date-selection\">\r\n        <div class=\"frg-date-selection__month\">\r\n          <ul class=\"frg-date-selection__month__list\">\r\n            @for(month of months; let i = $index; track $index){\r\n              <li class=\"frg-date-selection__month__item-list\"\r\n                [class.selected-month]=\"isSelectedYearOrMonth(i + 1, currentMonth)\"\r\n              >\r\n               <button (click)=\"selectMonth($event, i + 1)\">\r\n                  {{month}}  \r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    }\r\n   <button class=\"frg-calendar__year\" (click)=\"openYearSelection()\">\r\n    {{year}}\r\n  </button>\r\n  @if((hasYearSelectionOpen$ | async)){\r\n    <div class=\"frg-date-selection\">\r\n      <div class=\"frg-date-selection__year\">\r\n        <ul class=\"frg-date-selection__year__list\">\r\n          @for(year of years; track $index){\r\n          <li class=\"frg-date-selection__year__item-list\"\r\n           [class.selected-year]=\"isSelectedYearOrMonth(year, currentYear)\"\r\n          >\r\n            <button (click)=\"selectYear($event, year)\">\r\n              {{year}}\r\n            </button>\r\n          </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  }\r\n  <button href=\"javascript:void(0);\" (click)=\"changeMonth(currentMonth + 1)\">\r\n    <span class=\"frg-visually-hidden\">Next Page</span>\r\n    <span class=\"fas fa-angle-right\" aria-hidden=\"true\"></span>\r\n  </button>\r\n  </div>\r\n  <div class=\"frg-calendar__body\">\r\n    <div class=\"frg-calendar__week-day\">\r\n      @for (dayName of weekDays; track $index) {\r\n        <span>{{dayName}}</span>\r\n      }\r\n    </div>\r\n    @for (week of calendarDays | chunk:7; track $index) {\r\n      <div class=\"frg-calendar__week\">\r\n        @for (day of week; track $index){\r\n          <span class=\"frg-calendar__day\"\r\n            [class.other-month]=\"day.getMonth() !== currentMonth - 1\"\r\n            [class.current-date]=\"isToday(day)\"\r\n            [class.selected-date]=\"isSelected(day, selectedValue)\"\r\n            [class.disabled-date]=\"isDisabled(day)\"\r\n          >\r\n            <button type=\"button\" class=\"frg-calendar__day-button\"\r\n              (click)=\"onSelectDate($event, day)\">\r\n                {{ day.getDate() }}\r\n            </button>\r\n          </span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [":host{display:block}:host .frg-calendar{display:grid;background-color:#fdfdfd;color:#5e5f62;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;border-radius:.2rem;padding:.5rem;margin-top:.3rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-calendar__head{display:inline-flex;position:relative;align-items:center;justify-content:space-between}:host .frg-calendar__head button{background:transparent;border:none;color:#5e5f62;padding:.25rem}:host .frg-calendar__head button:hover{background:#4c7aae;color:#fdfdfd}:host .frg-calendar__body{display:flex;flex-direction:column;gap:.25rem}:host .frg-calendar__week-day{padding:.25rem 0;font-size:.75rem;text-align:center}:host .frg-calendar__week,:host .frg-calendar__week-day{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}:host .frg-calendar__day{display:flex;justify-content:center;align-items:center;min-height:2rem}:host .frg-calendar__day:hover{background-color:#6ea8d9;color:#fdfdfd;cursor:pointer}:host .frg-calendar__day.current-date{background-color:#b3d1f0;color:#fdfdfd;text-decoration:underline}:host .frg-calendar__day.other-month{opacity:.5}:host .frg-calendar__day.selected-date{background-color:#6ea8d9;color:#fdfdfd}:host .frg-calendar__day.disabled-date,:host .frg-calendar__day.disabled-date button{text-decoration:line-through;pointer-events:none}:host .frg-calendar__day.disabled-date:hover,:host .frg-calendar__day.disabled-date button:hover,:host .frg-calendar__day.disabled-date button button:hover{cursor:not-allowed}:host .frg-calendar__day-button{background:inherit;color:inherit;border:none}:host .frg-date-selection{position:absolute;overflow-y:scroll;max-height:250px;right:1rem;top:2rem;border-radius:.1rem;background:#fdfdfd;box-shadow:0 1px 2px #00000014,0 1px 3px #0000001f;z-index:1;scrollbar-width:thin;scrollbar-color:#6ea8d9 transparent}:host .frg-date-selection__year__list{list-style:none;padding:0}:host .frg-date-selection__year__item-list button{padding:.5rem 1rem;width:100%}:host .frg-date-selection__year__item-list button:hover{background-color:#b3d1f0;color:#fdfdfd;cursor:pointer}:host .frg-date-selection__year__item-list.selected-year{background-color:#6ea8d9;color:#fdfdfd}:host .frg-date-selection__year__item-list.selected-year button{color:#fdfdfd}:host .frg-date-selection__month__list{list-style:none;padding:0}:host .frg-date-selection__month__item-list button{padding:.5rem 1rem;width:100%}:host .frg-date-selection__month__item-list button:hover{background-color:#6ea8d9;color:#fdfdfd;cursor:pointer}:host .frg-date-selection__month__item-list.selected-month{background-color:#6ea8d9;color:#fdfdfd}:host .frg-date-selection__month__item-list.selected-month button{color:#fdfdfd}\n"] }]
         }], propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{

package/index.d.ts

@@ -792,9 +792,10 @@ 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>;
 }
 
+type SizeValue = number | string | null;
 interface Sparkle {
     x: number;
     y: 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;
+    width: SizeValue;
+    height: SizeValue;
     count: number;
     minSize: number;
     maxSize: number;
@@ -817,23 +819,22 @@ declare class SparkleFieldComponent implements OnInit, OnChanges, AfterViewInit,
     color: string | null;
     sparkles: Sparkle[];
     sparkleRefs: QueryList<ElementRef<HTMLSpanElement>>;
-    private sparkleAnimations;
-    private sparkleChangesSub;
+    private animations;
+    private changesSub;
     private readonly fallbackWidth;
     private readonly fallbackHeight;
-    get hostWidth(): string;
-    get hostHeight(): string;
+    get hostWidth(): string | null;
+    get hostHeight(): string | null;
     get hostMinWidth(): string | null;
     get hostMinHeight(): 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>;

package/package.json

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