@skyux/code-examples 15.0.0-alpha.2 → 15.0.0-alpha.3

package/fesm2022/skyux-code-examples.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, inject, Input, viewChild, signal, effect, Injectable, ChangeDetectorRef, input, computed, model, resource, afterNextRender, linkedSignal, untracked, ViewChild, InjectionToken } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Input, viewChild, signal, effect, Injectable, ChangeDetectorRef, input, computed, resource, model, afterNextRender, linkedSignal, untracked, ViewChild, InjectionToken } from '@angular/core';
 import * as i2 from '@skyux/action-bars';
 import { SkySummaryActionBarModule } from '@skyux/action-bars';
 import * as i1 from '@skyux/indicators';
@@ -43,6 +43,7 @@ import * as i2$6 from '@skyux/autonumeric';
 import { SkyAutonumericModule, SkyAutonumericOptionsProvider } from '@skyux/autonumeric';
 import * as i1$8 from '@skyux/avatar';
 import { SkyAvatarModule } from '@skyux/avatar';
+import { SkyChart, SkyChartAxisCategory, SkyChartAxisValue, SkyChartBar, SkyChartBarSeries } from '@skyux/charts';
 import * as i2$7 from '@skyux/colorpicker';
 import { SkyColorpickerModule, SkyColorpickerMessageType } from '@skyux/colorpicker';
 import * as i3$1 from '@skyux/core';
@@ -4950,6 +4951,375 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{ selector: 'app-avatar-example', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyAvatarModule], template: "<sky-avatar\n  data-sky-id=\"user-profile-avatar\"\n  [canChange]=\"true\"\n  [maxFileSize]=\"1000\"\n  [name]=\"name()\"\n  [src]=\"avatar()\"\n  (avatarChanged)=\"onAvatarChanged($event)\"\n/>\n" }]
         }] });
 
+/**
+ * @title Bar chart with asynchronously loaded data
+ */
+class ChartsChartBarAsyncExample {
+    constructor() {
+        // Simulate network latency.
+        this.delay = input(1200, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
+        // A real SPA might use `httpResource` to load remote data. While reloading,
+        // the resource keeps its previous value, so the chart stays rendered
+        // beneath the wait overlay.
+        this.donations = resource({ ...(ngDevMode ? { debugName: "donations" } : /* istanbul ignore next */ {}), params: () => ({ delay: this.delay() }),
+            loader: ({ params }) => fetchDonationsFromServer(params.delay) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarAsyncExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChartsChartBarAsyncExample, isStandalone: true, selector: "app-chart-bar-async-example", inputs: { delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-bottom-s\"\n  type=\"button\"\n  [disabled]=\"donations.isLoading()\"\n  (click)=\"donations.reload()\"\n>\n  Reload data\n</button>\n<sky-chart\n  data-sky-id=\"donations-by-quarter\"\n  headingText=\"Donations by quarter\"\n  [loading]=\"donations.isLoading()\"\n>\n  @if (donations.value(); as data) {\n    <sky-chart-bar>\n      <sky-chart-axis-category\n        labelText=\"Quarter\"\n        [categories]=\"data.categories\"\n      />\n      <sky-chart-axis-value format=\"currency\" labelText=\"Donations\" />\n      <sky-chart-bar-series labelText=\"Donations\" [values]=\"data.values\" />\n    </sky-chart-bar>\n  }\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarAsyncExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-async-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-bottom-s\"\n  type=\"button\"\n  [disabled]=\"donations.isLoading()\"\n  (click)=\"donations.reload()\"\n>\n  Reload data\n</button>\n<sky-chart\n  data-sky-id=\"donations-by-quarter\"\n  headingText=\"Donations by quarter\"\n  [loading]=\"donations.isLoading()\"\n>\n  @if (donations.value(); as data) {\n    <sky-chart-bar>\n      <sky-chart-axis-category\n        labelText=\"Quarter\"\n        [categories]=\"data.categories\"\n      />\n      <sky-chart-axis-value format=\"currency\" labelText=\"Donations\" />\n      <sky-chart-bar-series labelText=\"Donations\" [values]=\"data.values\" />\n    </sky-chart-bar>\n  }\n</sky-chart>\n" }]
+        }], propDecorators: { delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }] } });
+/**
+ * Simulates a server-side call that returns the chart's data after a delay.
+ */
+async function fetchDonationsFromServer(delay) {
+    await new Promise((resolve) => setTimeout(resolve, delay));
+    return {
+        categories: ['Q1', 'Q2', 'Q3', 'Q4'],
+        values: [45, 72, 38, 90],
+    };
+}
+
+/**
+ * @title Basic bar chart
+ */
+class ChartsChartBarBasicExample {
+    constructor() {
+        this.years = [2010, 2011, 2012, 2013, 2014, 2015, 2016];
+        this.acquisitions = [10, 20, 15, 25, 22, 30, 28];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarBasicExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarBasicExample, isStandalone: true, selector: "app-chart-bar-basic-example", ngImport: i0, template: "<sky-chart\n  data-sky-id=\"acquisitions-by-year\"\n  headingText=\"Acquisitions by year\"\n>\n  <sky-chart-bar data-sky-id=\"acquisitions-bar\">\n    <sky-chart-axis-category labelText=\"Year\" [categories]=\"years\" />\n    <sky-chart-axis-value labelText=\"Acquisitions\" />\n    <sky-chart-bar-series\n      labelText=\"Acquisitions by year\"\n      [values]=\"acquisitions\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarBasicExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-basic-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart\n  data-sky-id=\"acquisitions-by-year\"\n  headingText=\"Acquisitions by year\"\n>\n  <sky-chart-bar data-sky-id=\"acquisitions-bar\">\n    <sky-chart-axis-category labelText=\"Year\" [categories]=\"years\" />\n    <sky-chart-axis-value labelText=\"Acquisitions\" />\n    <sky-chart-bar-series\n      labelText=\"Acquisitions by year\"\n      [values]=\"acquisitions\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Floating bar chart with multiple series
+ */
+class ChartsChartBarFloatingMultipleSeriesExample {
+    constructor() {
+        this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+        this.anchorage = [
+            [-13, -6],
+            [-11, -3],
+            [-7, 1],
+            [0, 8],
+            [6, 14],
+            [11, 18],
+        ];
+        this.asheville = [
+            [-3, 8],
+            [-1, 11],
+            [3, 15],
+            [7, 20],
+            [12, 24],
+            [16, 28],
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarFloatingMultipleSeriesExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarFloatingMultipleSeriesExample, isStandalone: true, selector: "app-chart-bar-floating-multiple-series-example", ngImport: i0, template: "<sky-chart\n  data-sky-id=\"temperature-range-by-city\"\n  headingText=\"Temperature range by month and city\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value labelText=\"Temperature (\u00B0C)\" />\n    <sky-chart-bar-series labelText=\"Anchorage\" [values]=\"anchorage\" />\n    <sky-chart-bar-series labelText=\"Asheville\" [values]=\"asheville\" />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarFloatingMultipleSeriesExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-floating-multiple-series-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart\n  data-sky-id=\"temperature-range-by-city\"\n  headingText=\"Temperature range by month and city\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value labelText=\"Temperature (\u00B0C)\" />\n    <sky-chart-bar-series labelText=\"Anchorage\" [values]=\"anchorage\" />\n    <sky-chart-bar-series labelText=\"Asheville\" [values]=\"asheville\" />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Floating bar chart (value ranges)
+ */
+class ChartsChartBarFloatingExample {
+    constructor() {
+        this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+        this.temperatureRanges = [
+            [-2, 5],
+            [0, 8],
+            [4, 14],
+            [9, 19],
+            [14, 24],
+            [18, 28],
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarFloatingExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarFloatingExample, isStandalone: true, selector: "app-chart-bar-floating-example", ngImport: i0, template: "<sky-chart\n  data-sky-id=\"temperature-range\"\n  headingText=\"Temperature range by month\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value labelText=\"Temperature (\u00B0C)\" />\n    <sky-chart-bar-series\n      labelText=\"Temperature range\"\n      [values]=\"temperatureRanges\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarFloatingExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-floating-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart\n  data-sky-id=\"temperature-range\"\n  headingText=\"Temperature range by month\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value labelText=\"Temperature (\u00B0C)\" />\n    <sky-chart-bar-series\n      labelText=\"Temperature range\"\n      [values]=\"temperatureRanges\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Bar chart with grouped, stacked series
+ */
+class ChartsChartBarGroupedStackedExample {
+    constructor() {
+        this.months = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+        ];
+        this.westInStore = [38, 6, 54, 69, 88, 13, 87];
+        this.westOnline = [37, 84, 28, 84, 97, 22, 63];
+        this.eastInStore = [24, 51, 40, 33, 62, 45, 51];
+        this.eastOnline = [55, 30, 47, 58, 41, 66, 39];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarGroupedStackedExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarGroupedStackedExample, isStandalone: true, selector: "app-chart-bar-grouped-stacked-example", ngImport: i0, template: "<sky-chart\n  data-sky-id=\"monthly-sales-by-region\"\n  headingText=\"Monthly sales by region\"\n>\n  <sky-chart-bar seriesLayout=\"stacked\">\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value labelText=\"Sales\" />\n    <sky-chart-bar-series\n      labelText=\"West in store\"\n      stackId=\"West\"\n      [values]=\"westInStore\"\n    />\n    <sky-chart-bar-series\n      labelText=\"West online\"\n      stackId=\"West\"\n      [values]=\"westOnline\"\n    />\n    <sky-chart-bar-series\n      labelText=\"East in store\"\n      stackId=\"East\"\n      [values]=\"eastInStore\"\n    />\n    <sky-chart-bar-series\n      labelText=\"East online\"\n      stackId=\"East\"\n      [values]=\"eastOnline\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarGroupedStackedExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-grouped-stacked-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart\n  data-sky-id=\"monthly-sales-by-region\"\n  headingText=\"Monthly sales by region\"\n>\n  <sky-chart-bar seriesLayout=\"stacked\">\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value labelText=\"Sales\" />\n    <sky-chart-bar-series\n      labelText=\"West in store\"\n      stackId=\"West\"\n      [values]=\"westInStore\"\n    />\n    <sky-chart-bar-series\n      labelText=\"West online\"\n      stackId=\"West\"\n      [values]=\"westOnline\"\n    />\n    <sky-chart-bar-series\n      labelText=\"East in store\"\n      stackId=\"East\"\n      [values]=\"eastInStore\"\n    />\n    <sky-chart-bar-series\n      labelText=\"East online\"\n      stackId=\"East\"\n      [values]=\"eastOnline\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Bar chart with hidden axis labels
+ */
+class ChartsChartBarHiddenLabelsExample {
+    constructor() {
+        this.years = [2010, 2011, 2012, 2013, 2014, 2015, 2016];
+        this.acquisitions = [10, 20, 15, 25, 22, 30, 28];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarHiddenLabelsExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarHiddenLabelsExample, isStandalone: true, selector: "app-chart-bar-hidden-labels-example", ngImport: i0, template: "<sky-chart\n  data-sky-id=\"acquisitions-by-year-minimal\"\n  headingText=\"Acquisitions by year\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category\n      labelHidden\n      labelText=\"Year\"\n      [categories]=\"years\"\n    />\n    <sky-chart-axis-value labelHidden labelText=\"Acquisitions\" />\n    <sky-chart-bar-series\n      labelText=\"Acquisitions by year\"\n      [values]=\"acquisitions\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarHiddenLabelsExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-hidden-labels-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart\n  data-sky-id=\"acquisitions-by-year-minimal\"\n  headingText=\"Acquisitions by year\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category\n      labelHidden\n      labelText=\"Year\"\n      [categories]=\"years\"\n    />\n    <sky-chart-axis-value labelHidden labelText=\"Acquisitions\" />\n    <sky-chart-bar-series\n      labelText=\"Acquisitions by year\"\n      [values]=\"acquisitions\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Horizontal bar chart
+ */
+class ChartsChartBarHorizontalExample {
+    constructor() {
+        this.regions = [
+            'Northeast',
+            'Southeast',
+            'Midwest',
+            'Southwest',
+            'West',
+        ];
+        this.sales = [42, 58, 35, 47, 63];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarHorizontalExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarHorizontalExample, isStandalone: true, selector: "app-chart-bar-horizontal-example", ngImport: i0, template: "<sky-chart data-sky-id=\"sales-by-region\" headingText=\"Sales by region\">\n  <sky-chart-bar orientation=\"horizontal\">\n    <sky-chart-axis-category labelText=\"Region\" [categories]=\"regions\" />\n    <sky-chart-axis-value labelText=\"Sales\" />\n    <sky-chart-bar-series labelText=\"Sales\" [values]=\"sales\" />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarHorizontalExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-horizontal-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart data-sky-id=\"sales-by-region\" headingText=\"Sales by region\">\n  <sky-chart-bar orientation=\"horizontal\">\n    <sky-chart-axis-category labelText=\"Region\" [categories]=\"regions\" />\n    <sky-chart-axis-value labelText=\"Sales\" />\n    <sky-chart-bar-series labelText=\"Sales\" [values]=\"sales\" />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Bar chart with a logarithmic value scale
+ */
+class ChartsChartBarLogarithmicExample {
+    constructor() {
+        this.categories = [
+            'Cat-1',
+            'Cat-2',
+            'Cat-3',
+            'Cat-4',
+            'Cat-5',
+            'Cat-6',
+            'Cat-7',
+            'Cat-8',
+            'Cat-9',
+            'Cat-10',
+            'Cat-11',
+            'Cat-12',
+            'Cat-13',
+        ];
+        this.values = [
+            1, 1.1, 1.9, 2.1, 4.9, 5.1, 9, 11, 90, 110, 900, 1100, 9000,
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarLogarithmicExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarLogarithmicExample, isStandalone: true, selector: "app-chart-bar-logarithmic-example", ngImport: i0, template: "<sky-chart\n  data-sky-id=\"spending-by-category\"\n  headingText=\"Spending by category\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Category\" [categories]=\"categories\" />\n    <sky-chart-axis-value labelText=\"Spending\" scaleType=\"logarithmic\" />\n    <sky-chart-bar-series labelText=\"Spending\" [values]=\"values\" />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarLogarithmicExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-logarithmic-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart\n  data-sky-id=\"spending-by-category\"\n  headingText=\"Spending by category\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Category\" [categories]=\"categories\" />\n    <sky-chart-axis-value labelText=\"Spending\" scaleType=\"logarithmic\" />\n    <sky-chart-bar-series labelText=\"Spending\" [values]=\"values\" />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Bar chart with multiple series (grouped bars)
+ */
+class ChartsChartBarMultipleSeriesExample {
+    constructor() {
+        this.years = [2010, 2011, 2012, 2013, 2014, 2015, 2016];
+        this.actual = [10, 20, 15, 25, 22, 30, 28];
+        this.target = [12, 18, 20, 22, 26, 28, 32];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarMultipleSeriesExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarMultipleSeriesExample, isStandalone: true, selector: "app-chart-bar-multiple-series-example", ngImport: i0, template: "<sky-chart data-sky-id=\"actual-vs-target\" headingText=\"Actual vs. target\">\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Year\" [categories]=\"years\" />\n    <sky-chart-axis-value labelText=\"Acquisitions\" />\n    <sky-chart-bar-series labelText=\"Actual\" [values]=\"actual\" />\n    <sky-chart-bar-series labelText=\"Target\" [values]=\"target\" />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarMultipleSeriesExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-multiple-series-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart data-sky-id=\"actual-vs-target\" headingText=\"Actual vs. target\">\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Year\" [categories]=\"years\" />\n    <sky-chart-axis-value labelText=\"Acquisitions\" />\n    <sky-chart-bar-series labelText=\"Actual\" [values]=\"actual\" />\n    <sky-chart-bar-series labelText=\"Target\" [values]=\"target\" />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Stacked bar chart
+ */
+class ChartsChartBarStackedExample {
+    constructor() {
+        this.months = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+        ];
+        this.online = [38, 6, 54, 69, 88, 13, 87];
+        this.inStore = [37, 84, 28, 84, 97, 22, 63];
+        this.phone = [86, 4, 7, 85, 8, 51, 30];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarStackedExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarStackedExample, isStandalone: true, selector: "app-chart-bar-stacked-example", ngImport: i0, template: "<sky-chart data-sky-id=\"monthly-sales\" headingText=\"Monthly sales\">\n  <sky-chart-bar seriesLayout=\"stacked\">\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value labelText=\"Sales\" />\n    <sky-chart-bar-series labelText=\"In store\" [values]=\"inStore\" />\n    <sky-chart-bar-series labelText=\"Online\" [values]=\"online\" />\n    <sky-chart-bar-series labelText=\"Phone\" [values]=\"phone\" />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarStackedExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-stacked-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart data-sky-id=\"monthly-sales\" headingText=\"Monthly sales\">\n  <sky-chart-bar seriesLayout=\"stacked\">\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value labelText=\"Sales\" />\n    <sky-chart-bar-series labelText=\"In store\" [values]=\"inStore\" />\n    <sky-chart-bar-series labelText=\"Online\" [values]=\"online\" />\n    <sky-chart-bar-series labelText=\"Phone\" [values]=\"phone\" />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Bar chart with fixed value bounds
+ */
+class ChartsChartBarValueBoundsExample {
+    constructor() {
+        this.months = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+        ];
+        // Percent values are fractional, so 0.85 displays as 85%. Pinning the axis
+        // to [0, 1] keeps the scale at 0–100% regardless of the plotted values.
+        this.goalCompletion = [
+            0.62, 0.71, 0.68, 0.79, 0.85, 0.91, 0.88,
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarValueBoundsExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarValueBoundsExample, isStandalone: true, selector: "app-chart-bar-value-bounds-example", ngImport: i0, template: "<sky-chart\n  data-sky-id=\"goal-completion\"\n  headingText=\"Goal completion by month\"\n  subheadingText=\"The percent value axis is pinned to 0\u2013100% with min and max, so the scale stays fixed regardless of the plotted values.\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category\n      labelHidden\n      labelText=\"Month\"\n      [categories]=\"months\"\n    />\n    <sky-chart-axis-value\n      format=\"percent\"\n      labelText=\"Goal completion\"\n      max=\"1\"\n      min=\"0\"\n    />\n    <sky-chart-bar-series\n      labelText=\"Goal completion\"\n      [values]=\"goalCompletion\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarValueBoundsExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-value-bounds-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart\n  data-sky-id=\"goal-completion\"\n  headingText=\"Goal completion by month\"\n  subheadingText=\"The percent value axis is pinned to 0\u2013100% with min and max, so the scale stays fixed regardless of the plotted values.\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category\n      labelHidden\n      labelText=\"Month\"\n      [categories]=\"months\"\n    />\n    <sky-chart-axis-value\n      format=\"percent\"\n      labelText=\"Goal completion\"\n      max=\"1\"\n      min=\"0\"\n    />\n    <sky-chart-bar-series\n      labelText=\"Goal completion\"\n      [values]=\"goalCompletion\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
+/**
+ * @title Bar chart value formats (number, currency, and percent)
+ */
+class ChartsChartBarValueFormatExample {
+    constructor() {
+        this.months = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+        ];
+        this.acquisitions = [10, 20, 15, 25, 22, 30, 28];
+        this.revenue = [1000, 2200, 1800, 2600, 2400, 3100, 2900];
+        // Percent values are fractional, so 0.25 displays as 25%.
+        this.conversionRate = [0.1, 0.14, 0.12, 0.18, 0.16, 0.22, 0.2];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarValueFormatExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ChartsChartBarValueFormatExample, isStandalone: true, selector: "app-chart-bar-value-format-example", ngImport: i0, template: "<sky-chart\n  class=\"sky-theme-margin-bottom-l\"\n  data-sky-id=\"acquisitions-by-month\"\n  headingText=\"Acquisitions by month\"\n  subheadingText=\"Number format: values display as plain, locale-aware numbers.\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category\n      labelHidden\n      labelText=\"Month\"\n      [categories]=\"months\"\n    />\n    <sky-chart-axis-value labelText=\"Acquisitions\" />\n    <sky-chart-bar-series labelText=\"Acquisitions\" [values]=\"acquisitions\" />\n  </sky-chart-bar>\n</sky-chart>\n\n<sky-chart\n  class=\"sky-theme-margin-bottom-l\"\n  data-sky-id=\"revenue-by-month\"\n  headingText=\"Revenue by month\"\n  subheadingText=\"Currency format: values display with the specified currency code (EUR).\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category\n      labelHidden\n      labelText=\"Month\"\n      [categories]=\"months\"\n    />\n    <sky-chart-axis-value\n      currencyCode=\"EUR\"\n      digits=\"0\"\n      format=\"currency\"\n      labelText=\"Revenue\"\n    />\n    <sky-chart-bar-series labelText=\"Revenue\" [values]=\"revenue\" />\n  </sky-chart-bar>\n</sky-chart>\n\n<sky-chart\n  data-sky-id=\"conversion-rate-by-month\"\n  headingText=\"Conversion rate by month\"\n  subheadingText=\"Percent format: fractional values display as percentages, so 0.25 shows as 25%.\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value format=\"percent\" labelText=\"Conversion\" />\n    <sky-chart-bar-series\n      labelText=\"Conversion rate\"\n      [values]=\"conversionRate\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n", dependencies: [{ kind: "component", type: SkyChart, selector: "sky-chart", inputs: ["headingHidden", "headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "loading", "subheadingText"] }, { kind: "component", type: SkyChartAxisCategory, selector: "sky-chart-axis-category", inputs: ["categories", "labelHidden", "labelText"] }, { kind: "component", type: SkyChartAxisValue, selector: "sky-chart-axis-value", inputs: ["currencyCode", "digits", "format", "labelHidden", "labelText", "max", "min", "scaleType"] }, { kind: "component", type: SkyChartBar, selector: "sky-chart-bar", inputs: ["orientation", "seriesLayout"] }, { kind: "component", type: SkyChartBarSeries, selector: "sky-chart-bar-series", inputs: ["labelText", "stackId", "values"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartsChartBarValueFormatExample, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-chart-bar-value-format-example', imports: [
+                        SkyChart,
+                        SkyChartAxisCategory,
+                        SkyChartAxisValue,
+                        SkyChartBar,
+                        SkyChartBarSeries,
+                    ], template: "<sky-chart\n  class=\"sky-theme-margin-bottom-l\"\n  data-sky-id=\"acquisitions-by-month\"\n  headingText=\"Acquisitions by month\"\n  subheadingText=\"Number format: values display as plain, locale-aware numbers.\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category\n      labelHidden\n      labelText=\"Month\"\n      [categories]=\"months\"\n    />\n    <sky-chart-axis-value labelText=\"Acquisitions\" />\n    <sky-chart-bar-series labelText=\"Acquisitions\" [values]=\"acquisitions\" />\n  </sky-chart-bar>\n</sky-chart>\n\n<sky-chart\n  class=\"sky-theme-margin-bottom-l\"\n  data-sky-id=\"revenue-by-month\"\n  headingText=\"Revenue by month\"\n  subheadingText=\"Currency format: values display with the specified currency code (EUR).\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category\n      labelHidden\n      labelText=\"Month\"\n      [categories]=\"months\"\n    />\n    <sky-chart-axis-value\n      currencyCode=\"EUR\"\n      digits=\"0\"\n      format=\"currency\"\n      labelText=\"Revenue\"\n    />\n    <sky-chart-bar-series labelText=\"Revenue\" [values]=\"revenue\" />\n  </sky-chart-bar>\n</sky-chart>\n\n<sky-chart\n  data-sky-id=\"conversion-rate-by-month\"\n  headingText=\"Conversion rate by month\"\n  subheadingText=\"Percent format: fractional values display as percentages, so 0.25 shows as 25%.\"\n>\n  <sky-chart-bar>\n    <sky-chart-axis-category labelText=\"Month\" [categories]=\"months\" />\n    <sky-chart-axis-value format=\"percent\" labelText=\"Conversion\" />\n    <sky-chart-bar-series\n      labelText=\"Conversion rate\"\n      [values]=\"conversionRate\"\n    />\n  </sky-chart-bar>\n</sky-chart>\n" }]
+        }] });
+
 function isColorpickerOutput$2(value) {
     return !!(value && typeof value === 'object' && 'rgba' in value);
 }
@@ -13023,7 +13393,7 @@ let RecordPageContentComponent$1 = class RecordPageContentComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RecordPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-theme-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-theme-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.activity) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-theme-margin-bottom-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-theme-font-body-deemphasized-m\">\n                    {{ activity.date }}\n                  </div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-theme-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-theme-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.date) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-theme-margin-bottom-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-theme-font-body-deemphasized-m\">\n                    {{ activity.date }}\n                  </div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RecordPageContentComponent$1, decorators: [{
             type: Component,
@@ -13035,7 +13405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         SkyIconModule,
                         SkyKeyInfoModule,
                         SkyRepeaterModule,
-                    ], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-theme-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-theme-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.activity) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-theme-margin-bottom-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-theme-font-body-deemphasized-m\">\n                    {{ activity.date }}\n                  </div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"] }]
+                    ], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-theme-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-theme-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.date) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-theme-margin-bottom-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-theme-font-body-deemphasized-m\">\n                    {{ activity.date }}\n                  </div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"] }]
         }] });
 
 /**
@@ -14917,5 +15287,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AngularTreeComponentAngularTreePreselectedNodesExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataGridBasicExampleComponent, DataGridLoadingExampleComponent, DataGridPagingExampleComponent, DataGridSortingExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsListSummaryBasicExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithBannerExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
+export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AngularTreeComponentAngularTreePreselectedNodesExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ChartsChartBarAsyncExample, ChartsChartBarBasicExample, ChartsChartBarFloatingExample, ChartsChartBarFloatingMultipleSeriesExample, ChartsChartBarGroupedStackedExample, ChartsChartBarHiddenLabelsExample, ChartsChartBarHorizontalExample, ChartsChartBarLogarithmicExample, ChartsChartBarMultipleSeriesExample, ChartsChartBarStackedExample, ChartsChartBarValueBoundsExample, ChartsChartBarValueFormatExample, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataGridBasicExampleComponent, DataGridLoadingExampleComponent, DataGridPagingExampleComponent, DataGridSortingExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsListSummaryBasicExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithBannerExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
 //# sourceMappingURL=skyux-code-examples.mjs.map