@softheon/armature 21.11.0 → 21.13.0

package/fesm2022/softheon-armature.mjs

@@ -1,9 +1,9 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
-import { HttpHeaders, provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpHeaders, provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, ViewChild, Input, Optional, Inject, Component, NgModule, EventEmitter, Output, ViewChildren, signal, inject, ChangeDetectionStrategy, DOCUMENT, isDevMode, HostListener, Directive, Renderer2, ElementRef, Pipe, ViewEncapsulation, Self, Host, APP_INITIALIZER, Injector, computed, DestroyRef, effect, ChangeDetectorRef, ErrorHandler, input, NgZone } from '@angular/core';
+import { InjectionToken, Injectable, ViewChild, Input, Optional, Inject, Component, NgModule, EventEmitter, Output, ViewChildren, signal, inject, ChangeDetectionStrategy, DOCUMENT, isDevMode, HostListener, Directive, Renderer2, ElementRef, Pipe, ViewEncapsulation, Self, Host, APP_INITIALIZER, Injector, computed, DestroyRef, effect, ChangeDetectorRef, ErrorHandler, input, output, NgZone } from '@angular/core';
 import * as i1$4 from '@angular/router';
 import { NavigationEnd, Router, RouterModule, NavigationStart, NavigationError } from '@angular/router';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
@@ -10192,6 +10192,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: ['window:resize']
             }] } });
 
+/**
+ * SVG Loader component that fetches and displays SVG images from a URL.
+ * Injects the svg as innerHTML allowing theme variables to take effect.
+*/
+class SofSvgLoaderComponent {
+    /** Initializes the component and watches for URL changes */
+    constructor() {
+        /** The URL of the SVG to load. *required */
+        this.url = input.required(...(ngDevMode ? [{ debugName: "url" }] : []));
+        /** Accessibility label for the SVG image. When provided, adds role="img" and aria-label. When empty, adds aria-hidden="true" */
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        /** Whether an ariaLabel has been provided */
+        this.hasAriaLabel = computed(() => {
+            const label = this.ariaLabel();
+            return label !== undefined && label !== null && label.trim() !== '';
+        }, ...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : []));
+        /** Emitted when the SVG has been successfully fetched and injected */
+        this.loadComplete = output();
+        /** Emitted when the SVG fetch fails */
+        this.loadError = output();
+        this.http = inject(HttpClient);
+        this.hostElement = inject((ElementRef));
+        effect(() => {
+            const currentUrl = this.url();
+            if (currentUrl) {
+                this.fetchAndInjectSvg(currentUrl);
+            }
+        });
+    }
+    /**
+     * Fetches SVG content from URL and injects into the host element
+     * @param url url string to fetch the svg by
+    */
+    fetchAndInjectSvg(url) {
+        this.http.get(url, { responseType: 'text' }).subscribe({
+            next: (svgContent) => {
+                this.hostElement.nativeElement.innerHTML = svgContent;
+                this.loadComplete.emit();
+            },
+            error: (error) => {
+                this.loadError.emit(error);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofSvgLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: SofSvgLoaderComponent, isStandalone: true, selector: "sof-svg-loader", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadComplete: "loadComplete", loadError: "loadError" }, host: { properties: { "style.display": "\"block\"", "attr.role": "hasAriaLabel() ? \"img\" : null", "attr.aria-label": "hasAriaLabel() ? ariaLabel() : null", "attr.aria-hidden": "hasAriaLabel() ? null : \"true\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofSvgLoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sof-svg-loader',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[style.display]': '"block"',
+                        '[attr.role]': 'hasAriaLabel() ? "img" : null',
+                        '[attr.aria-label]': 'hasAriaLabel() ? ariaLabel() : null',
+                        '[attr.aria-hidden]': 'hasAriaLabel() ? null : "true"',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], loadComplete: [{ type: i0.Output, args: ["loadComplete"] }], loadError: [{ type: i0.Output, args: ["loadError"] }] } });
+
 /** sof-skeleton-loader component */
 class SofSkeletonLoaderComponent {
     constructor() {
@@ -10244,10 +10306,10 @@ class SofChartSkeletonLoaderComponent {
         this.type = input('donut', ...(ngDevMode ? [{ debugName: "type" }] : []));
         /** Animation type: 'shimmer' for gradient effect, 'pulse' for opacity fade, or false for no animation. Default: 'shimmer' */
         this.animation = input('shimmer', ...(ngDevMode ? [{ debugName: "animation" }] : []));
-        /** TODO: vertical bar chart */
-        this.direction = 'horizontal';
-        /** TODO: Direction for bar chart: 'horizontal' for horizontal bars, 'vertical' for vertical bars. Default: 'horizontal' */
-        // readonly direction = input<SkeletonBarChartDirection>('horizontal');
+        /** Direction for bar chart: 'horizontal' for horizontal bars, 'vertical' for vertical bars. Default: 'horizontal' */
+        this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+        /** Whether vertical bar chart is grouped (2 bars per segment). Default: false */
+        this.grouped = input(false, ...(ngDevMode ? [{ debugName: "grouped" }] : []));
         /** Height of the host element. Accepts CSS units (px, %, etc). Default: '250px' */
         this.height = input('250px', ...(ngDevMode ? [{ debugName: "height" }] : []));
         /** Width of the host element. Accepts CSS units (px, %, etc). Default: '100%' */
@@ -10258,16 +10320,18 @@ class SofChartSkeletonLoaderComponent {
         this.loadingText = input('Loading chart', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
         /** ARIA label for the component. Used by screen readers to identify the loading region. Default: 'loading' */
         this.ariaLabel = input('loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-        /** Computed array of segment indices based on segments input */
-        this.segmentItems = computed(() => Array.from({ length: this.segments() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "segmentItems" }] : []));
-        /** Dashed line positions for bar chart background */
-        this.dashedLineItems = [53, 110, 163, 217, 274, 331];
         /** Whether this is a bar chart type */
         this.isBar = computed(() => this.type() === 'bar', ...(ngDevMode ? [{ debugName: "isBar" }] : []));
-        /** TODO: Dashed line positions for vertical bar chart background */
-        // readonly dashedLineItemsVertical = [53, 110, 163, 217];
-        /** TODO: Whether this is a vertical bar chart */
-        // readonly isVertical = computed(() => this.isBar() && this.direction() === 'vertical');
+        /** Whether this is a vertical bar chart */
+        this.isVertical = computed(() => this.isBar() && this.direction() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
+        /** Whether this is a grouped vertical bar chart */
+        this.isGrouped = computed(() => this.isVertical() && this.grouped(), ...(ngDevMode ? [{ debugName: "isGrouped" }] : []));
+        /** Dashed line positions for bar chart background */
+        this.dashedLineItems = [53, 110, 163, 217, 274, 331, 389];
+        /** Computed array of segment indices based on segments input. Default 3 */
+        this.segmentItems = computed(() => {
+            return Array.from({ length: this.segments() }, (_, i) => i);
+        }, ...(ngDevMode ? [{ debugName: "segmentItems" }] : []));
         /** The .chart-skeleton-container dimensions */
         this.containerDimensions = computed(() => {
             return {
@@ -10277,7 +10341,7 @@ class SofChartSkeletonLoaderComponent {
         }, ...(ngDevMode ? [{ debugName: "containerDimensions" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofChartSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SofChartSkeletonLoaderComponent, isStandalone: true, selector: "sof-chart-skeleton-loader", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "true", "attr.aria-label": "ariaLabel()", "attr.role": "\"status\"", "class.bar": "type() === \"bar\"" } }, ngImport: i0, template: "<div \r\n  class=\"chart-skeleton-container\" \r\n  [ngStyle]=\"containerDimensions()\">\r\n  @if (isBar()) {\r\n    <div class=\"bar-chart\">\r\n      <div class=\"yaxis-labels\">\r\n        @for (segment of segmentItems(); track segment) {\r\n          <div \r\n            class=\"skeleton-item yaxis-label\"\r\n            [class.shimmer]=\"animation() === 'shimmer'\"\r\n            [class.pulse]=\"animation() === 'pulse'\"\r\n          ></div>\r\n        }\r\n      </div>\r\n      <div class=\"graph-container\">\r\n        <div class=\"graph-area\">\r\n          <div class=\"dashed-lines\"></div>\r\n          <div class=\"bars\">\r\n            @for (segment of segmentItems(); track segment) {\r\n              <div \r\n                class=\"skeleton-item bar\"\r\n                [class.shimmer]=\"animation() === 'shimmer'\"\r\n                [class.pulse]=\"animation() === 'pulse'\"\r\n              ></div>\r\n            }\r\n          </div>\r\n        </div>\r\n        <div class=\"numbers\">\r\n          @for (line of dashedLineItems; track line) {\r\n            <div \r\n              class=\"skeleton-item number\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  } @else {\r\n    <div class=\"donut-chart\">\r\n      <div class=\"donut-main\">\r\n        <div \r\n          class=\"skeleton-item donut\"\r\n          [class.shimmer]=\"animation() === 'shimmer'\"\r\n          [class.pulse]=\"animation() === 'pulse'\"\r\n        ></div>\r\n        <div class=\"donut-center\"></div>\r\n      </div>\r\n      <div class=\"donut-legend\">\r\n        @for (segment of segmentItems(); track segment) {\r\n          <div class=\"legend-item\">\r\n            <div \r\n              class=\"skeleton-item legend-circle\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n            <div \r\n              class=\"skeleton-item legend-line\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n            <div \r\n              class=\"skeleton-item legend-circle-end\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skeleton-item{position:relative;overflow:hidden;background-color:#f5f5f5}.skeleton-item.line{border-radius:8px}.skeleton-item.circle{border-radius:50%;flex-shrink:0}.skeleton-item.bar{border-radius:8px;flex-shrink:0}.skeleton-item.donut{border-radius:50%;flex-shrink:0}.skeleton-item.legend-line{border-radius:8px;flex-shrink:0}.skeleton-item.legend-circle{border-radius:50%;flex-shrink:0}.skeleton-item:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(270deg,#f5f5f5,#fff 40%,#f5f5f5)}.skeleton-item.shimmer:after{animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-item.pulse{animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-item.pulse:after{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes skeleton-pulse{0%,to{background-color:#f5f5f5}50%{background-color:#e9e9e9}}@media(prefers-reduced-motion:reduce){.skeleton-item:after{animation:none}.skeleton-item.pulse{animation:none}}\n", "@charset \"UTF-8\";:host{display:block}:host.bar{flex:1}.chart-skeleton-container{position:relative;overflow:hidden}.donut-chart{display:flex;flex-direction:row;align-items:center;gap:24px;width:100%;height:100%}.donut-chart .donut-main{position:relative;flex-shrink:0;height:100%;width:auto;aspect-ratio:1}.donut-chart .skeleton-item.donut{width:100%;height:100%;border-radius:50%}.donut-chart .donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;background-color:#fff;border-radius:50%;z-index:1}.donut-chart .donut-legend{display:grid;grid-template-columns:repeat(1,auto);gap:16px;align-content:start}.donut-chart .donut-legend .legend-item{display:flex;flex-direction:row;align-items:center;gap:8px}.donut-chart .donut-legend .skeleton-item.legend-circle{width:8px;height:8px;border-radius:50%;flex-shrink:0}.donut-chart .donut-legend .skeleton-item.legend-circle-end{width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-left:8px}.donut-chart .donut-legend .skeleton-item.legend-line{width:72px;height:18px;flex-shrink:0}.bar-chart{display:flex;flex-direction:row;align-items:center;gap:8px;width:100%;height:100%}.bar-chart .yaxis-labels{display:flex;flex-direction:column;justify-content:center;gap:40px;height:100%;padding-bottom:12px}.bar-chart .skeleton-item.yaxis-label{width:56px;height:24px;border-radius:8px;flex-shrink:0;margin-top:8px;margin-bottom:8px}.bar-chart .graph-container{display:flex;flex-direction:column;flex:1;height:100%}.bar-chart .graph-area{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;height:100%}.bar-chart .graph-area:before{content:\"\";display:flex;position:absolute;z-index:1;width:2px;height:100%;background-color:#e9e9e9}.bar-chart .dashed-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background:linear-gradient(to bottom,#f5f5f5);-webkit-mask-image:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 53px),repeating-linear-gradient(to bottom,#000 0px,#000 4px,transparent 4px,transparent 6px);mask-image:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 53px),repeating-linear-gradient(to bottom,#000 0px,#000 4px,transparent 4px,transparent 6px);-webkit-mask-composite:source-in;mask-composite:intersect}.bar-chart .bars{position:relative;display:flex;flex-direction:column;justify-content:center;gap:40px;z-index:1}.bar-chart .numbers{display:flex;justify-content:space-between;margin-top:4px;margin-right:16px;flex:0 1}.bar-chart .skeleton-item.number{width:20px;height:8px;border-radius:8px;flex-shrink:0}.bar-chart .skeleton-item.bar{height:40px;border-radius:8px}.bar-chart .skeleton-item.bar:nth-child(n){width:62%}.bar-chart .skeleton-item.bar:nth-child(2n){width:92%}.bar-chart .skeleton-item.bar:nth-child(3n){width:32%}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SofChartSkeletonLoaderComponent, isStandalone: true, selector: "sof-chart-skeleton-loader", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "true", "attr.aria-label": "ariaLabel()", "attr.role": "\"status\"", "class.bar": "type() === \"bar\"" } }, ngImport: i0, template: "<div \r\n  class=\"chart-skeleton-container\" \r\n  [ngStyle]=\"containerDimensions()\">\r\n  @if (isBar()) {\r\n    <div class=\"bar-chart\" [class.vertical]=\"isVertical()\">\r\n      @if (!isVertical()) {\r\n        <div class=\"yaxis-labels\">\r\n          @for (segment of segmentItems(); track segment) {\r\n            <div \r\n              class=\"skeleton-item yaxis-label\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (isVertical()) {\r\n        <div class=\"numbers-y\">\r\n          @for (line of dashedLineItems; track line) {\r\n            <div \r\n              class=\"skeleton-item number\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n      <div class=\"graph\">\r\n        <div class=\"graph-container\">\r\n          <div class=\"graph-area\">\r\n            <div class=\"dashed-lines\" [class.vertical]=\"isVertical()\"></div>\r\n            <div class=\"bars\" [class.grouped]=\"isGrouped()\">\r\n              @for (segment of segmentItems(); track segment) {\r\n                @if (isGrouped()) {\r\n                  <div class=\"bar-group\">\r\n                    <div \r\n                      class=\"skeleton-item bar\"\r\n                      [class.shimmer]=\"animation() === 'shimmer'\"\r\n                      [class.pulse]=\"animation() === 'pulse'\"\r\n                    ></div>\r\n                    <div \r\n                      class=\"skeleton-item bar\"\r\n                      [class.shimmer]=\"animation() === 'shimmer'\"\r\n                      [class.pulse]=\"animation() === 'pulse'\"\r\n                    ></div>\r\n                  </div>\r\n                } @else {\r\n                  <div \r\n                    class=\"skeleton-item bar\"\r\n                    [class.shimmer]=\"animation() === 'shimmer'\"\r\n                    [class.pulse]=\"animation() === 'pulse'\"\r\n                  ></div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n          @if (!isVertical()) {\r\n            <div class=\"numbers\">\r\n              @for (line of dashedLineItems; track line) {\r\n                <div \r\n                  class=\"skeleton-item number\"\r\n                  [class.shimmer]=\"animation() === 'shimmer'\"\r\n                  [class.pulse]=\"animation() === 'pulse'\"\r\n                ></div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (isVertical()) {\r\n          <div class=\"xaxis-labels\" [class.grouped]=\"isGrouped()\">\r\n            @for (segment of segmentItems(); track segment) {\r\n              <div \r\n                class=\"skeleton-item xaxis-label\"\r\n                [class.shimmer]=\"animation() === 'shimmer'\"\r\n                [class.pulse]=\"animation() === 'pulse'\"\r\n              ></div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  } @else {\r\n    <div class=\"donut-chart\">\r\n      <div class=\"donut-main\">\r\n        <div \r\n          class=\"skeleton-item donut\"\r\n          [class.shimmer]=\"animation() === 'shimmer'\"\r\n          [class.pulse]=\"animation() === 'pulse'\"\r\n        ></div>\r\n        <div class=\"donut-center\"></div>\r\n      </div>\r\n      <div class=\"donut-legend\">\r\n        @for (segment of segmentItems(); track segment) {\r\n          <div class=\"legend-item\">\r\n            <div \r\n              class=\"skeleton-item legend-circle\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n            <div \r\n              class=\"skeleton-item legend-line\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n            <div \r\n              class=\"skeleton-item legend-circle-end\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skeleton-item{position:relative;overflow:hidden;background-color:#f5f5f5}.skeleton-item.line{border-radius:8px}.skeleton-item.circle{border-radius:50%;flex-shrink:0}.skeleton-item.bar{border-radius:8px;flex-shrink:0}.skeleton-item.donut{border-radius:50%;flex-shrink:0}.skeleton-item.legend-line{border-radius:8px;flex-shrink:0}.skeleton-item.legend-circle{border-radius:50%;flex-shrink:0}.skeleton-item:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(270deg,#f5f5f5,#fff 40%,#f5f5f5)}.skeleton-item.shimmer:after{animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-item.pulse{animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-item.pulse:after{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes skeleton-pulse{0%,to{background-color:#f5f5f5}50%{background-color:#e9e9e9}}@media(prefers-reduced-motion:reduce){.skeleton-item:after{animation:none}.skeleton-item.pulse{animation:none}}\n", "@charset \"UTF-8\";:host{display:block}:host.bar{flex:1}.chart-skeleton-container{position:relative;overflow:hidden}.donut-chart{display:flex;flex-direction:row;align-items:center;gap:24px;width:100%;height:100%}.donut-chart .donut-main{position:relative;flex-shrink:0;height:100%;width:auto;aspect-ratio:1}.donut-chart .skeleton-item.donut{width:100%;height:100%;border-radius:50%}.donut-chart .donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;background-color:#fff;border-radius:50%;z-index:1}.donut-chart .donut-legend{display:grid;grid-template-columns:repeat(1,auto);gap:16px;align-content:start}.donut-chart .donut-legend .legend-item{display:flex;flex-direction:row;align-items:center;gap:8px}.donut-chart .donut-legend .skeleton-item.legend-circle{width:8px;height:8px;border-radius:50%;flex-shrink:0}.donut-chart .donut-legend .skeleton-item.legend-circle-end{width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-left:8px}.donut-chart .donut-legend .skeleton-item.legend-line{width:72px;height:18px;flex-shrink:0}.bar-chart{display:flex;flex-direction:row;align-items:center;gap:8px;width:100%;height:100%}.bar-chart .yaxis-labels{display:flex;flex-direction:column;justify-content:center;gap:40px;height:100%;padding-bottom:12px}.bar-chart .skeleton-item.yaxis-label{width:56px;height:24px;border-radius:8px;flex-shrink:0;margin-top:8px;margin-bottom:8px}.bar-chart .graph{flex:1;height:100%}.bar-chart .graph-container{display:flex;flex-direction:column;flex:1;height:100%}.bar-chart .graph-area{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;height:100%}.bar-chart .graph-area:before{content:\"\";display:flex;position:absolute;z-index:1;width:2px;height:100%;background-color:#e9e9e9}.bar-chart .dashed-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background:linear-gradient(to bottom,#f5f5f5);-webkit-mask-image:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 53px),repeating-linear-gradient(to bottom,#000 0px,#000 4px,transparent 4px,transparent 6px);mask-image:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 53px),repeating-linear-gradient(to bottom,#000 0px,#000 4px,transparent 4px,transparent 6px);-webkit-mask-composite:source-in;mask-composite:intersect}.bar-chart .bars{position:relative;display:flex;flex-direction:column;justify-content:center;gap:40px;z-index:1;padding-left:2px}.bar-chart .numbers{display:flex;justify-content:space-between;margin-top:4px;margin-right:16px;flex:0 1}.bar-chart .skeleton-item.number{width:20px;height:8px;border-radius:8px;flex-shrink:0}.bar-chart .skeleton-item.bar{height:40px;border-radius:8px}.bar-chart .skeleton-item.bar:nth-child(n){width:62%}.bar-chart .skeleton-item.bar:nth-child(2n){width:92%}.bar-chart .skeleton-item.bar:nth-child(3n){width:32%}.bar-chart.vertical{flex-direction:row;align-items:unset}.bar-chart.vertical .graph{display:flex;flex-direction:column;gap:4px}.bar-chart.vertical .graph-area:before{width:100%;height:2px;top:auto;bottom:0}.bar-chart.vertical .bars{flex-direction:row;padding-bottom:2px;padding-left:0;height:100%;gap:72px}.bar-chart.vertical .numbers-y{display:flex;flex-direction:column;justify-content:space-between;flex:0 1;padding-bottom:18px}.bar-chart.vertical .numbers-y .skeleton-item.number{width:20px;height:12px}.bar-chart.vertical .skeleton-item.bar{width:64px;flex-shrink:0;border-radius:8px;align-self:flex-end}.bar-chart.vertical .skeleton-item.bar:nth-child(n){height:62%}.bar-chart.vertical .skeleton-item.bar:nth-child(2n){height:92%}.bar-chart.vertical .skeleton-item.bar:nth-child(3n){height:32%}.bar-chart.vertical .dashed-lines.vertical{background:linear-gradient(to right,#f5f5f5);-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0px,#000 2px,transparent 2px,transparent 47px),repeating-linear-gradient(to right,#000 0px,#000 4px,transparent 4px,transparent 6px);mask-image:repeating-linear-gradient(to bottom,#000 0px,#000 2px,transparent 2px,transparent 47px),repeating-linear-gradient(to right,#000 0px,#000 4px,transparent 4px,transparent 6px)}.bar-chart.vertical .xaxis-labels{display:flex;justify-content:center;width:100%;gap:72px}.bar-chart.vertical .skeleton-item.xaxis-label{border-radius:8px;flex-shrink:0;width:64px;height:16px;margin-top:4px;margin-bottom:0}.bar-chart.vertical .bar-group{display:flex;flex-direction:row;gap:4px;flex-shrink:0}.bar-chart.vertical .bars.grouped{gap:72px}.bar-chart.vertical .bar-group .skeleton-item.bar{width:40px;align-self:flex-end}.bar-chart.vertical .bar-group:nth-child(n) .skeleton-item.bar:nth-child(n){height:98%}.bar-chart.vertical .bar-group:nth-child(n) .skeleton-item.bar:nth-child(2n){height:38%}.bar-chart.vertical .bar-group:nth-child(2n) .skeleton-item.bar:nth-child(n){height:88%}.bar-chart.vertical .bar-group:nth-child(2n) .skeleton-item.bar:nth-child(2n){height:52%}.bar-chart.vertical .xaxis-labels.grouped .skeleton-item.xaxis-label{width:84px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofChartSkeletonLoaderComponent, decorators: [{
             type: Component,
@@ -10286,8 +10350,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.role]': '"status"',
                         '[class.bar]': 'type() === "bar"'
-                    }, template: "<div \r\n  class=\"chart-skeleton-container\" \r\n  [ngStyle]=\"containerDimensions()\">\r\n  @if (isBar()) {\r\n    <div class=\"bar-chart\">\r\n      <div class=\"yaxis-labels\">\r\n        @for (segment of segmentItems(); track segment) {\r\n          <div \r\n            class=\"skeleton-item yaxis-label\"\r\n            [class.shimmer]=\"animation() === 'shimmer'\"\r\n            [class.pulse]=\"animation() === 'pulse'\"\r\n          ></div>\r\n        }\r\n      </div>\r\n      <div class=\"graph-container\">\r\n        <div class=\"graph-area\">\r\n          <div class=\"dashed-lines\"></div>\r\n          <div class=\"bars\">\r\n            @for (segment of segmentItems(); track segment) {\r\n              <div \r\n                class=\"skeleton-item bar\"\r\n                [class.shimmer]=\"animation() === 'shimmer'\"\r\n                [class.pulse]=\"animation() === 'pulse'\"\r\n              ></div>\r\n            }\r\n          </div>\r\n        </div>\r\n        <div class=\"numbers\">\r\n          @for (line of dashedLineItems; track line) {\r\n            <div \r\n              class=\"skeleton-item number\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  } @else {\r\n    <div class=\"donut-chart\">\r\n      <div class=\"donut-main\">\r\n        <div \r\n          class=\"skeleton-item donut\"\r\n          [class.shimmer]=\"animation() === 'shimmer'\"\r\n          [class.pulse]=\"animation() === 'pulse'\"\r\n        ></div>\r\n        <div class=\"donut-center\"></div>\r\n      </div>\r\n      <div class=\"donut-legend\">\r\n        @for (segment of segmentItems(); track segment) {\r\n          <div class=\"legend-item\">\r\n            <div \r\n              class=\"skeleton-item legend-circle\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n            <div \r\n              class=\"skeleton-item legend-line\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n            <div \r\n              class=\"skeleton-item legend-circle-end\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skeleton-item{position:relative;overflow:hidden;background-color:#f5f5f5}.skeleton-item.line{border-radius:8px}.skeleton-item.circle{border-radius:50%;flex-shrink:0}.skeleton-item.bar{border-radius:8px;flex-shrink:0}.skeleton-item.donut{border-radius:50%;flex-shrink:0}.skeleton-item.legend-line{border-radius:8px;flex-shrink:0}.skeleton-item.legend-circle{border-radius:50%;flex-shrink:0}.skeleton-item:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(270deg,#f5f5f5,#fff 40%,#f5f5f5)}.skeleton-item.shimmer:after{animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-item.pulse{animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-item.pulse:after{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes skeleton-pulse{0%,to{background-color:#f5f5f5}50%{background-color:#e9e9e9}}@media(prefers-reduced-motion:reduce){.skeleton-item:after{animation:none}.skeleton-item.pulse{animation:none}}\n", "@charset \"UTF-8\";:host{display:block}:host.bar{flex:1}.chart-skeleton-container{position:relative;overflow:hidden}.donut-chart{display:flex;flex-direction:row;align-items:center;gap:24px;width:100%;height:100%}.donut-chart .donut-main{position:relative;flex-shrink:0;height:100%;width:auto;aspect-ratio:1}.donut-chart .skeleton-item.donut{width:100%;height:100%;border-radius:50%}.donut-chart .donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;background-color:#fff;border-radius:50%;z-index:1}.donut-chart .donut-legend{display:grid;grid-template-columns:repeat(1,auto);gap:16px;align-content:start}.donut-chart .donut-legend .legend-item{display:flex;flex-direction:row;align-items:center;gap:8px}.donut-chart .donut-legend .skeleton-item.legend-circle{width:8px;height:8px;border-radius:50%;flex-shrink:0}.donut-chart .donut-legend .skeleton-item.legend-circle-end{width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-left:8px}.donut-chart .donut-legend .skeleton-item.legend-line{width:72px;height:18px;flex-shrink:0}.bar-chart{display:flex;flex-direction:row;align-items:center;gap:8px;width:100%;height:100%}.bar-chart .yaxis-labels{display:flex;flex-direction:column;justify-content:center;gap:40px;height:100%;padding-bottom:12px}.bar-chart .skeleton-item.yaxis-label{width:56px;height:24px;border-radius:8px;flex-shrink:0;margin-top:8px;margin-bottom:8px}.bar-chart .graph-container{display:flex;flex-direction:column;flex:1;height:100%}.bar-chart .graph-area{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;height:100%}.bar-chart .graph-area:before{content:\"\";display:flex;position:absolute;z-index:1;width:2px;height:100%;background-color:#e9e9e9}.bar-chart .dashed-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background:linear-gradient(to bottom,#f5f5f5);-webkit-mask-image:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 53px),repeating-linear-gradient(to bottom,#000 0px,#000 4px,transparent 4px,transparent 6px);mask-image:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 53px),repeating-linear-gradient(to bottom,#000 0px,#000 4px,transparent 4px,transparent 6px);-webkit-mask-composite:source-in;mask-composite:intersect}.bar-chart .bars{position:relative;display:flex;flex-direction:column;justify-content:center;gap:40px;z-index:1}.bar-chart .numbers{display:flex;justify-content:space-between;margin-top:4px;margin-right:16px;flex:0 1}.bar-chart .skeleton-item.number{width:20px;height:8px;border-radius:8px;flex-shrink:0}.bar-chart .skeleton-item.bar{height:40px;border-radius:8px}.bar-chart .skeleton-item.bar:nth-child(n){width:62%}.bar-chart .skeleton-item.bar:nth-child(2n){width:92%}.bar-chart .skeleton-item.bar:nth-child(3n){width:32%}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+                    }, template: "<div \r\n  class=\"chart-skeleton-container\" \r\n  [ngStyle]=\"containerDimensions()\">\r\n  @if (isBar()) {\r\n    <div class=\"bar-chart\" [class.vertical]=\"isVertical()\">\r\n      @if (!isVertical()) {\r\n        <div class=\"yaxis-labels\">\r\n          @for (segment of segmentItems(); track segment) {\r\n            <div \r\n              class=\"skeleton-item yaxis-label\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (isVertical()) {\r\n        <div class=\"numbers-y\">\r\n          @for (line of dashedLineItems; track line) {\r\n            <div \r\n              class=\"skeleton-item number\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n      <div class=\"graph\">\r\n        <div class=\"graph-container\">\r\n          <div class=\"graph-area\">\r\n            <div class=\"dashed-lines\" [class.vertical]=\"isVertical()\"></div>\r\n            <div class=\"bars\" [class.grouped]=\"isGrouped()\">\r\n              @for (segment of segmentItems(); track segment) {\r\n                @if (isGrouped()) {\r\n                  <div class=\"bar-group\">\r\n                    <div \r\n                      class=\"skeleton-item bar\"\r\n                      [class.shimmer]=\"animation() === 'shimmer'\"\r\n                      [class.pulse]=\"animation() === 'pulse'\"\r\n                    ></div>\r\n                    <div \r\n                      class=\"skeleton-item bar\"\r\n                      [class.shimmer]=\"animation() === 'shimmer'\"\r\n                      [class.pulse]=\"animation() === 'pulse'\"\r\n                    ></div>\r\n                  </div>\r\n                } @else {\r\n                  <div \r\n                    class=\"skeleton-item bar\"\r\n                    [class.shimmer]=\"animation() === 'shimmer'\"\r\n                    [class.pulse]=\"animation() === 'pulse'\"\r\n                  ></div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n          @if (!isVertical()) {\r\n            <div class=\"numbers\">\r\n              @for (line of dashedLineItems; track line) {\r\n                <div \r\n                  class=\"skeleton-item number\"\r\n                  [class.shimmer]=\"animation() === 'shimmer'\"\r\n                  [class.pulse]=\"animation() === 'pulse'\"\r\n                ></div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (isVertical()) {\r\n          <div class=\"xaxis-labels\" [class.grouped]=\"isGrouped()\">\r\n            @for (segment of segmentItems(); track segment) {\r\n              <div \r\n                class=\"skeleton-item xaxis-label\"\r\n                [class.shimmer]=\"animation() === 'shimmer'\"\r\n                [class.pulse]=\"animation() === 'pulse'\"\r\n              ></div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  } @else {\r\n    <div class=\"donut-chart\">\r\n      <div class=\"donut-main\">\r\n        <div \r\n          class=\"skeleton-item donut\"\r\n          [class.shimmer]=\"animation() === 'shimmer'\"\r\n          [class.pulse]=\"animation() === 'pulse'\"\r\n        ></div>\r\n        <div class=\"donut-center\"></div>\r\n      </div>\r\n      <div class=\"donut-legend\">\r\n        @for (segment of segmentItems(); track segment) {\r\n          <div class=\"legend-item\">\r\n            <div \r\n              class=\"skeleton-item legend-circle\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n            <div \r\n              class=\"skeleton-item legend-line\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n            <div \r\n              class=\"skeleton-item legend-circle-end\"\r\n              [class.shimmer]=\"animation() === 'shimmer'\"\r\n              [class.pulse]=\"animation() === 'pulse'\"\r\n            ></div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skeleton-item{position:relative;overflow:hidden;background-color:#f5f5f5}.skeleton-item.line{border-radius:8px}.skeleton-item.circle{border-radius:50%;flex-shrink:0}.skeleton-item.bar{border-radius:8px;flex-shrink:0}.skeleton-item.donut{border-radius:50%;flex-shrink:0}.skeleton-item.legend-line{border-radius:8px;flex-shrink:0}.skeleton-item.legend-circle{border-radius:50%;flex-shrink:0}.skeleton-item:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(270deg,#f5f5f5,#fff 40%,#f5f5f5)}.skeleton-item.shimmer:after{animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-item.pulse{animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-item.pulse:after{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes skeleton-pulse{0%,to{background-color:#f5f5f5}50%{background-color:#e9e9e9}}@media(prefers-reduced-motion:reduce){.skeleton-item:after{animation:none}.skeleton-item.pulse{animation:none}}\n", "@charset \"UTF-8\";:host{display:block}:host.bar{flex:1}.chart-skeleton-container{position:relative;overflow:hidden}.donut-chart{display:flex;flex-direction:row;align-items:center;gap:24px;width:100%;height:100%}.donut-chart .donut-main{position:relative;flex-shrink:0;height:100%;width:auto;aspect-ratio:1}.donut-chart .skeleton-item.donut{width:100%;height:100%;border-radius:50%}.donut-chart .donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;background-color:#fff;border-radius:50%;z-index:1}.donut-chart .donut-legend{display:grid;grid-template-columns:repeat(1,auto);gap:16px;align-content:start}.donut-chart .donut-legend .legend-item{display:flex;flex-direction:row;align-items:center;gap:8px}.donut-chart .donut-legend .skeleton-item.legend-circle{width:8px;height:8px;border-radius:50%;flex-shrink:0}.donut-chart .donut-legend .skeleton-item.legend-circle-end{width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-left:8px}.donut-chart .donut-legend .skeleton-item.legend-line{width:72px;height:18px;flex-shrink:0}.bar-chart{display:flex;flex-direction:row;align-items:center;gap:8px;width:100%;height:100%}.bar-chart .yaxis-labels{display:flex;flex-direction:column;justify-content:center;gap:40px;height:100%;padding-bottom:12px}.bar-chart .skeleton-item.yaxis-label{width:56px;height:24px;border-radius:8px;flex-shrink:0;margin-top:8px;margin-bottom:8px}.bar-chart .graph{flex:1;height:100%}.bar-chart .graph-container{display:flex;flex-direction:column;flex:1;height:100%}.bar-chart .graph-area{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;height:100%}.bar-chart .graph-area:before{content:\"\";display:flex;position:absolute;z-index:1;width:2px;height:100%;background-color:#e9e9e9}.bar-chart .dashed-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background:linear-gradient(to bottom,#f5f5f5);-webkit-mask-image:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 53px),repeating-linear-gradient(to bottom,#000 0px,#000 4px,transparent 4px,transparent 6px);mask-image:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 53px),repeating-linear-gradient(to bottom,#000 0px,#000 4px,transparent 4px,transparent 6px);-webkit-mask-composite:source-in;mask-composite:intersect}.bar-chart .bars{position:relative;display:flex;flex-direction:column;justify-content:center;gap:40px;z-index:1;padding-left:2px}.bar-chart .numbers{display:flex;justify-content:space-between;margin-top:4px;margin-right:16px;flex:0 1}.bar-chart .skeleton-item.number{width:20px;height:8px;border-radius:8px;flex-shrink:0}.bar-chart .skeleton-item.bar{height:40px;border-radius:8px}.bar-chart .skeleton-item.bar:nth-child(n){width:62%}.bar-chart .skeleton-item.bar:nth-child(2n){width:92%}.bar-chart .skeleton-item.bar:nth-child(3n){width:32%}.bar-chart.vertical{flex-direction:row;align-items:unset}.bar-chart.vertical .graph{display:flex;flex-direction:column;gap:4px}.bar-chart.vertical .graph-area:before{width:100%;height:2px;top:auto;bottom:0}.bar-chart.vertical .bars{flex-direction:row;padding-bottom:2px;padding-left:0;height:100%;gap:72px}.bar-chart.vertical .numbers-y{display:flex;flex-direction:column;justify-content:space-between;flex:0 1;padding-bottom:18px}.bar-chart.vertical .numbers-y .skeleton-item.number{width:20px;height:12px}.bar-chart.vertical .skeleton-item.bar{width:64px;flex-shrink:0;border-radius:8px;align-self:flex-end}.bar-chart.vertical .skeleton-item.bar:nth-child(n){height:62%}.bar-chart.vertical .skeleton-item.bar:nth-child(2n){height:92%}.bar-chart.vertical .skeleton-item.bar:nth-child(3n){height:32%}.bar-chart.vertical .dashed-lines.vertical{background:linear-gradient(to right,#f5f5f5);-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0px,#000 2px,transparent 2px,transparent 47px),repeating-linear-gradient(to right,#000 0px,#000 4px,transparent 4px,transparent 6px);mask-image:repeating-linear-gradient(to bottom,#000 0px,#000 2px,transparent 2px,transparent 47px),repeating-linear-gradient(to right,#000 0px,#000 4px,transparent 4px,transparent 6px)}.bar-chart.vertical .xaxis-labels{display:flex;justify-content:center;width:100%;gap:72px}.bar-chart.vertical .skeleton-item.xaxis-label{border-radius:8px;flex-shrink:0;width:64px;height:16px;margin-top:4px;margin-bottom:0}.bar-chart.vertical .bar-group{display:flex;flex-direction:row;gap:4px;flex-shrink:0}.bar-chart.vertical .bars.grouped{gap:72px}.bar-chart.vertical .bar-group .skeleton-item.bar{width:40px;align-self:flex-end}.bar-chart.vertical .bar-group:nth-child(n) .skeleton-item.bar:nth-child(n){height:98%}.bar-chart.vertical .bar-group:nth-child(n) .skeleton-item.bar:nth-child(2n){height:38%}.bar-chart.vertical .bar-group:nth-child(2n) .skeleton-item.bar:nth-child(n){height:88%}.bar-chart.vertical .bar-group:nth-child(2n) .skeleton-item.bar:nth-child(2n){height:52%}.bar-chart.vertical .xaxis-labels.grouped .skeleton-item.xaxis-label{width:84px}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /** SSN Pipe */
 class SofSsnPipe {
@@ -11664,5 +11728,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALERT_BANNER_CONFIG, AbstractSamlEntryService, AbstractSamlService, AbstractStartupService, AccessTokenClaims, AlertBannerComponent, AlertBannerModule, AlertBannerService, AlertService, AlphaNumericDirective, AppTemplateComponent, ApplicationUserModel, ArRoleNavService, ArmError, ArmatureFooterComponent, ArmatureFooterModule, ArmatureHeaderComponent, ArmatureHeaderModule, ArmatureModule, ArmatureNavigationComponent, ArmatureResizePanelsModule, Attribute, AuthorizationService, B2bNavComponent, BannerService, BannerType, BaseComponentModule, BaseConfigService, CacheExpirationType, ComponentSavePrintComponent, ComponentSavePrintService, Configuration, ConfirmAddressData, CoverageDetail, CssOverride, CssOverrideDirective, CustomAuthConfigService, DISABLE_ACCESS_FOR_NO_PAGES_ROLE, DISTRIBUTED_CACHE_BASE_PATH, DataStoreConfig, DateInputFilterDirective, DecodedAccessToken, DefaultConfigService, DialogResult, DistributedCacheModule, ENTITY_SESSION_STORAGE_PREFIX, ENTITY_SS_CONFIG_PREFIX, EntityBaseComponent, EntityHelperService, EntityInjectWrapperComponent, FAQ, FAQConfig, FEDERATED_MODULE_ID, FaqComponent, FaqModule, FeedbackToolComponent, FeedbackToolModule, FooterConfig, FormsModule, HYBRID_SAML_OAUTH_CONFIG, HeaderAuthSettings, HybridSamlOAuthConfig, HybridSamlOauthService, InputTrimDirective, LINE_OF_COVERAGE, LettersCharactersDirective, LettersOnlyDirective, MarketSelectionConfig, MarketSelectionService, MfeModule, MobileHeaderMenuComponent, ModalData, NavigationModule, NumbersOnlyDirective, Oauth2RoleService, OauthModule, PhoneFormatPipe, PolicyPerson, RBAC_CONFIG, RbacActionDirective, RbacConfig, RbacModule, RedirectSamlComponent, RedirectSamlRequest, RedirectSessionConfigs, ResizePanelsComponent, RoleAccess, RoleNavService, RoutePath, RumConfig, RumModule, RumService, SESSION_CONFIG, SOF_BLANK_LANGUAGE_OVERRIDE, SOF_DATE_PIPE_FORMATS, STATUS, SamlModule, SamlService, SelectedMarketContext, ServerCacheService, SessionConfig, SessionService, SharedErrorService, SiteMapComponent, SiteMapDirection, SnackbarService, SofAddressComponent, SofAlertComponent, SofArComponentSavePrintModule, SofBadgeComponent, SofBannerComponent, SofBlankPipe, SofBottomSheetComponent, SofBreadcrumbsHierarchyComponent, SofBreadcrumbsHistoryComponent, SofButtonToggleGroupComponent, SofCalloutComponent, SofChartSkeletonLoaderComponent, SofChipComponent, SofCompareAddressPipe, SofConfirmAddressComponent, SofConfirmAddressCountyChangeComponent, SofContextComponent, SofDatePipe, SofDropdownButtonComponent, SofErrorCommonComponent, SofHandleComponent, SofHeaderComponent, SofImageCheckboxComponent, SofInputStepperComponent, SofModalComponent, SofNavPanelComponent, SofPipeModule, SofProgressBarComponent, SofRadioCardComponent, SofSegmentedControlComponent, SofSelectComponent, SofSimpleAlertComponent, SofSkeletonLoaderComponent, SofSnackbarComponent, SofSsnPipe, SofStarRatingComponent, SofSubNavigationComponent, SofTabsComponent, SofToastComponent, SofUtilityButtonComponent, SoftheonErrorHandlerService, SsoGatewayEntryService, SsoGatewayModel, States, TextOverflowEllipsisTooltipDirective, ThemeModule, ThemeService, ToastService, TypedSession, USER_ENTITY_SERVICE_CONFIG, UserEntityService, UserEntityServiceConfig, ValidationKeys, WINDOW, httpVerb, initializerFactory, keyPathPrefix, languageStorageKey, newGuid, pascalToCamel, preSignInRouteStorageKey, removeMenuRole, routeToPreLoginRoute, sessionBasePathFactory, userInitialsPipe };
+export { ALERT_BANNER_CONFIG, AbstractSamlEntryService, AbstractSamlService, AbstractStartupService, AccessTokenClaims, AlertBannerComponent, AlertBannerModule, AlertBannerService, AlertService, AlphaNumericDirective, AppTemplateComponent, ApplicationUserModel, ArRoleNavService, ArmError, ArmatureFooterComponent, ArmatureFooterModule, ArmatureHeaderComponent, ArmatureHeaderModule, ArmatureModule, ArmatureNavigationComponent, ArmatureResizePanelsModule, Attribute, AuthorizationService, B2bNavComponent, BannerService, BannerType, BaseComponentModule, BaseConfigService, CacheExpirationType, ComponentSavePrintComponent, ComponentSavePrintService, Configuration, ConfirmAddressData, CoverageDetail, CssOverride, CssOverrideDirective, CustomAuthConfigService, DISABLE_ACCESS_FOR_NO_PAGES_ROLE, DISTRIBUTED_CACHE_BASE_PATH, DataStoreConfig, DateInputFilterDirective, DecodedAccessToken, DefaultConfigService, DialogResult, DistributedCacheModule, ENTITY_SESSION_STORAGE_PREFIX, ENTITY_SS_CONFIG_PREFIX, EntityBaseComponent, EntityHelperService, EntityInjectWrapperComponent, FAQ, FAQConfig, FEDERATED_MODULE_ID, FaqComponent, FaqModule, FeedbackToolComponent, FeedbackToolModule, FooterConfig, FormsModule, HYBRID_SAML_OAUTH_CONFIG, HeaderAuthSettings, HybridSamlOAuthConfig, HybridSamlOauthService, InputTrimDirective, LINE_OF_COVERAGE, LettersCharactersDirective, LettersOnlyDirective, MarketSelectionConfig, MarketSelectionService, MfeModule, MobileHeaderMenuComponent, ModalData, NavigationModule, NumbersOnlyDirective, Oauth2RoleService, OauthModule, PhoneFormatPipe, PolicyPerson, RBAC_CONFIG, RbacActionDirective, RbacConfig, RbacModule, RedirectSamlComponent, RedirectSamlRequest, RedirectSessionConfigs, ResizePanelsComponent, RoleAccess, RoleNavService, RoutePath, RumConfig, RumModule, RumService, SESSION_CONFIG, SOF_BLANK_LANGUAGE_OVERRIDE, SOF_DATE_PIPE_FORMATS, STATUS, SamlModule, SamlService, SelectedMarketContext, ServerCacheService, SessionConfig, SessionService, SharedErrorService, SiteMapComponent, SiteMapDirection, SnackbarService, SofAddressComponent, SofAlertComponent, SofArComponentSavePrintModule, SofBadgeComponent, SofBannerComponent, SofBlankPipe, SofBottomSheetComponent, SofBreadcrumbsHierarchyComponent, SofBreadcrumbsHistoryComponent, SofButtonToggleGroupComponent, SofCalloutComponent, SofChartSkeletonLoaderComponent, SofChipComponent, SofCompareAddressPipe, SofConfirmAddressComponent, SofConfirmAddressCountyChangeComponent, SofContextComponent, SofDatePipe, SofDropdownButtonComponent, SofErrorCommonComponent, SofHandleComponent, SofHeaderComponent, SofImageCheckboxComponent, SofInputStepperComponent, SofModalComponent, SofNavPanelComponent, SofPipeModule, SofProgressBarComponent, SofRadioCardComponent, SofSegmentedControlComponent, SofSelectComponent, SofSimpleAlertComponent, SofSkeletonLoaderComponent, SofSnackbarComponent, SofSsnPipe, SofStarRatingComponent, SofSubNavigationComponent, SofSvgLoaderComponent, SofTabsComponent, SofToastComponent, SofUtilityButtonComponent, SoftheonErrorHandlerService, SsoGatewayEntryService, SsoGatewayModel, States, TextOverflowEllipsisTooltipDirective, ThemeModule, ThemeService, ToastService, TypedSession, USER_ENTITY_SERVICE_CONFIG, UserEntityService, UserEntityServiceConfig, ValidationKeys, WINDOW, httpVerb, initializerFactory, keyPathPrefix, languageStorageKey, newGuid, pascalToCamel, preSignInRouteStorageKey, removeMenuRole, routeToPreLoginRoute, sessionBasePathFactory, userInitialsPipe };
 //# sourceMappingURL=softheon-armature.mjs.map