@softheon/armature 21.12.0 → 21.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10306,10 +10306,10 @@ class SofChartSkeletonLoaderComponent {
|
|
|
10306
10306
|
this.type = input('donut', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
10307
10307
|
/** Animation type: 'shimmer' for gradient effect, 'pulse' for opacity fade, or false for no animation. Default: 'shimmer' */
|
|
10308
10308
|
this.animation = input('shimmer', ...(ngDevMode ? [{ debugName: "animation" }] : []));
|
|
10309
|
-
/**
|
|
10310
|
-
this.direction = 'horizontal';
|
|
10311
|
-
/**
|
|
10312
|
-
|
|
10309
|
+
/** Direction for bar chart: 'horizontal' for horizontal bars, 'vertical' for vertical bars. Default: 'horizontal' */
|
|
10310
|
+
this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
10311
|
+
/** Whether vertical bar chart is grouped (2 bars per segment). Default: false */
|
|
10312
|
+
this.grouped = input(false, ...(ngDevMode ? [{ debugName: "grouped" }] : []));
|
|
10313
10313
|
/** Height of the host element. Accepts CSS units (px, %, etc). Default: '250px' */
|
|
10314
10314
|
this.height = input('250px', ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
10315
10315
|
/** Width of the host element. Accepts CSS units (px, %, etc). Default: '100%' */
|
|
@@ -10320,16 +10320,18 @@ class SofChartSkeletonLoaderComponent {
|
|
|
10320
10320
|
this.loadingText = input('Loading chart', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
|
|
10321
10321
|
/** ARIA label for the component. Used by screen readers to identify the loading region. Default: 'loading' */
|
|
10322
10322
|
this.ariaLabel = input('loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
10323
|
-
/** Computed array of segment indices based on segments input */
|
|
10324
|
-
this.segmentItems = computed(() => Array.from({ length: this.segments() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "segmentItems" }] : []));
|
|
10325
|
-
/** Dashed line positions for bar chart background */
|
|
10326
|
-
this.dashedLineItems = [53, 110, 163, 217, 274, 331];
|
|
10327
10323
|
/** Whether this is a bar chart type */
|
|
10328
10324
|
this.isBar = computed(() => this.type() === 'bar', ...(ngDevMode ? [{ debugName: "isBar" }] : []));
|
|
10329
|
-
/**
|
|
10330
|
-
|
|
10331
|
-
/**
|
|
10332
|
-
|
|
10325
|
+
/** Whether this is a vertical bar chart */
|
|
10326
|
+
this.isVertical = computed(() => this.isBar() && this.direction() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
|
|
10327
|
+
/** Whether this is a grouped vertical bar chart */
|
|
10328
|
+
this.isGrouped = computed(() => this.isVertical() && this.grouped(), ...(ngDevMode ? [{ debugName: "isGrouped" }] : []));
|
|
10329
|
+
/** Dashed line positions for bar chart background */
|
|
10330
|
+
this.dashedLineItems = [53, 110, 163, 217, 274, 331, 389];
|
|
10331
|
+
/** Computed array of segment indices based on segments input. Default 3 */
|
|
10332
|
+
this.segmentItems = computed(() => {
|
|
10333
|
+
return Array.from({ length: this.segments() }, (_, i) => i);
|
|
10334
|
+
}, ...(ngDevMode ? [{ debugName: "segmentItems" }] : []));
|
|
10333
10335
|
/** The .chart-skeleton-container dimensions */
|
|
10334
10336
|
this.containerDimensions = computed(() => {
|
|
10335
10337
|
return {
|
|
@@ -10339,7 +10341,7 @@ class SofChartSkeletonLoaderComponent {
|
|
|
10339
10341
|
}, ...(ngDevMode ? [{ debugName: "containerDimensions" }] : []));
|
|
10340
10342
|
}
|
|
10341
10343
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofChartSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10342
|
-
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 }); }
|
|
10344
|
+
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 }); }
|
|
10343
10345
|
}
|
|
10344
10346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofChartSkeletonLoaderComponent, decorators: [{
|
|
10345
10347
|
type: Component,
|
|
@@ -10348,8 +10350,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
10348
10350
|
'[attr.aria-label]': 'ariaLabel()',
|
|
10349
10351
|
'[attr.role]': '"status"',
|
|
10350
10352
|
'[class.bar]': 'type() === "bar"'
|
|
10351
|
-
}, 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"] }]
|
|
10352
|
-
}], 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 }] }] } });
|
|
10353
|
+
}, 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"] }]
|
|
10354
|
+
}], 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 }] }] } });
|
|
10353
10355
|
|
|
10354
10356
|
/** SSN Pipe */
|
|
10355
10357
|
class SofSsnPipe {
|