udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/collection/components/charts/udp-ag-bubble-chart/udp-ag-bubble-chart.js

@@ -0,0 +1,308 @@
+import { h, Host, Build } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+import { AgCharts, AllCommunityModule, ModuleRegistry, } from "ag-charts-community";
+import { buildUdpChartTheme, applySeriesColors, } from "../charts-theme";
+let agChartsModulesRegistered = false;
+const ensureAgChartsModules = () => {
+    if (agChartsModulesRegistered)
+        return;
+    ModuleRegistry.registerModules([AllCommunityModule]);
+    agChartsModulesRegistered = true;
+};
+const sizeStyle = (value, fallback) => value == null ? fallback : typeof value === 'number' ? `${value}px` : value;
+/**
+ * Bubble chart wrapped over `ag-charts-community`.
+ *
+ * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+ * carries the full ag-charts options object; the wrapper owns the brand
+ * theme, the transparent chart background, ag-charts module registration,
+ * and the host container. Anything the consumer passes wins over the
+ * wrapper's defaults; `container` is always wrapper-owned.
+ *
+ * Bubble series are cartesian and require `xKey`, `yKey`, and `sizeKey`
+ * on each series entry — `sizeKey` drives the marker radius. See
+ * https://www.ag-grid.com/charts/javascript/bubble-series/ for the full
+ * series option surface (labelKey, colorKey, size / maxSize / domain,
+ * etc.).
+ *
+ * Always memoize `chartOptions` at the call site — a new object every
+ * render triggers a `chart.update()` cycle.
+ */
+export class UdpAgBubbleChart {
+    constructor() {
+        /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+        this.chartId = `udp-ag-bubble-chart-${uuid()}`;
+        /**
+         * Colour + visual-weight variant applied via the brand theme:
+         * `default` (balanced categorical palette for multi-category charts,
+         * the exact brand colour for a single series), `soft` (same palette
+         * lightened, for dense low-emphasis surfaces), `bold` (same palette
+         * deepened, for a hero chart), `mono` (a single brand-hue ramp for
+         * sequential / magnitude data), and `colorful` (each label hashed to a
+         * stable Fluent avatar hue, so the same label keeps its colour across
+         * charts). Per-series colours on `chartOptions` always win.
+         */
+        this.appearance = 'default';
+        /**
+         * Geometry roundness, mirroring the button/input shape tokens: `square`
+         * or `rounded`. Bubble markers are unaffected; this only shapes any
+         * bar / line / area series sharing the chart. Per-series geometry on
+         * `chartOptions` still wins.
+         */
+        this.shape = 'square';
+        /**
+         * Chrome density. `full` keeps axes, gridlines, legend and padding;
+         * `flush` strips all chrome and zeroes padding so the plot bleeds to the
+         * container edges (the KPI-card "sparkline" look). Pair with a
+         * `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+         */
+        this.chrome = 'full';
+        // Re-theme on a live light/dark switch. `theme-manager` dispatches
+        // `theme-changed` on the window after updating the brand CSS variables;
+        // reuse the prop-watch rebuild path so buildOptions() re-reads them (and the
+        // current mode via getCurrentThemeMode()).
+        this.handleThemeChanged = () => {
+            this.handleOptionsChanged();
+        };
+    }
+    handleOptionsChanged() {
+        if (!this.chart)
+            return;
+        const options = this.buildOptions();
+        if (options)
+            this.chart.update(options);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        if (Build.isServer)
+            return;
+        ensureAgChartsModules();
+        const container = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!container)
+            return;
+        const options = this.buildOptions(container);
+        if (!options)
+            return;
+        this.chart = AgCharts.create(options);
+        window.addEventListener('theme-changed', this.handleThemeChanged);
+    }
+    disconnectedCallback() {
+        var _a;
+        window.removeEventListener('theme-changed', this.handleThemeChanged);
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.chart = undefined;
+    }
+    buildOptions(container) {
+        var _a, _b;
+        const target = container !== null && container !== void 0 ? container : (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!target)
+            return null;
+        const merged = Object.assign(Object.assign({ theme: buildUdpChartTheme(this.el, {
+                appearance: this.appearance,
+                shape: this.shape,
+                chrome: this.chrome,
+            }), background: { visible: false } }, this.chartOptions), { container: target });
+        return applySeriesColors(merged, this.el, this.appearance);
+    }
+    render() {
+        return (h(Host, { key: 'f4b1a81862e2be8ba602a6944249074c560d7b85', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, h("div", { key: '7aa3af01e3aec84794d4f7db4fe08c93cf527ed5', id: this.chartId, class: "chart-mount" })));
+    }
+    static get is() { return "udp-ag-bubble-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-ag-bubble-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-ag-bubble-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "chartOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AgCartesianChartOptions",
+                    "resolved": "AgCartesianChartOptions<any, unknown>",
+                    "references": {
+                        "AgCartesianChartOptions": {
+                            "location": "import",
+                            "path": "ag-charts-community",
+                            "id": "../../node_modules/.pnpm/ag-charts-community@13.3.1/node_modules/ag-charts-community/dist/types/src/main.d.ts::AgCartesianChartOptions",
+                            "referenceLocation": "AgCartesianChartOptions"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full ag-charts options. Required. Should include at least `data` and\n`series` (with a bubble series \u2014 `type: 'bubble'`, plus `xKey`,\n`yKey`, and `sizeKey`). The wrapper merges in defaults for `theme`\nand `background`; either can be overridden by passing them on\n`chartOptions`. `container` is wrapper-owned and any value passed\nhere is ignored."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "customWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-width"
+            },
+            "customHeight": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-height"
+            },
+            "chartId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chart-id",
+                "defaultValue": "`udp-ag-bubble-chart-${uuid()}`"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartAppearance",
+                    "resolved": "\"bold\" | \"colorful\" | \"default\" | \"mono\" | \"soft\"",
+                    "references": {
+                        "UdpChartAppearance": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartAppearance",
+                            "referenceLocation": "UdpChartAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour + visual-weight variant applied via the brand theme:\n`default` (balanced categorical palette for multi-category charts,\nthe exact brand colour for a single series), `soft` (same palette\nlightened, for dense low-emphasis surfaces), `bold` (same palette\ndeepened, for a hero chart), `mono` (a single brand-hue ramp for\nsequential / magnitude data), and `colorful` (each label hashed to a\nstable Fluent avatar hue, so the same label keeps its colour across\ncharts). Per-series colours on `chartOptions` always win."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'default'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartShape",
+                    "resolved": "\"rounded\" | \"square\"",
+                    "references": {
+                        "UdpChartShape": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartShape",
+                            "referenceLocation": "UdpChartShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Geometry roundness, mirroring the button/input shape tokens: `square`\nor `rounded`. Bubble markers are unaffected; this only shapes any\nbar / line / area series sharing the chart. Per-series geometry on\n`chartOptions` still wins."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'square'"
+            },
+            "chrome": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartChrome",
+                    "resolved": "\"flush\" | \"full\"",
+                    "references": {
+                        "UdpChartChrome": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartChrome",
+                            "referenceLocation": "UdpChartChrome"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chrome density. `full` keeps axes, gridlines, legend and padding;\n`flush` strips all chrome and zeroes padding so the plot bleeds to the\ncontainer edges (the KPI-card \"sparkline\" look). Pair with a\n`udp-fluent-card` `preview` slot or `bodyPadding={false}`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chrome",
+                "defaultValue": "'full'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "chartOptions",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "appearance",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "shape",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "chrome",
+                "methodName": "handleOptionsChanged"
+            }];
+    }
+}

package/dist/collection/components/charts/udp-ag-combo-chart/udp-ag-combo-chart.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.chart-mount {
+  position: absolute;
+  inset: 0;
+}

package/dist/collection/components/charts/udp-ag-combo-chart/udp-ag-combo-chart.js

@@ -0,0 +1,320 @@
+import { h, Host, Build } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+import { AgCharts, AllCommunityModule, ModuleRegistry, } from "ag-charts-community";
+import { buildUdpChartTheme, applySeriesColors, } from "../charts-theme";
+let agChartsModulesRegistered = false;
+const ensureAgChartsModules = () => {
+    if (agChartsModulesRegistered)
+        return;
+    ModuleRegistry.registerModules([AllCommunityModule]);
+    agChartsModulesRegistered = true;
+};
+const sizeStyle = (value, fallback) => value == null ? fallback : typeof value === 'number' ? `${value}px` : value;
+/**
+ * Combination (combo) chart wrapped over `ag-charts-community`.
+ *
+ * ag-charts has no dedicated "combo" series type — a combination chart is
+ * just an `AgCartesianChartOptions` whose `series` array carries multiple
+ * entries of different `type`s (e.g. one `{ type: 'bar' }` plus one
+ * `{ type: 'line' }`, optionally mixed with `'area'`, `'scatter'`, etc.).
+ * This wrapper exists for discoverability and parity with the rest of the
+ * `udp-ag-*-chart` family; it shares the line / bar wrapper plumbing
+ * verbatim.
+ *
+ * For dual-axis combos, declare a second y-axis in `axes` (an object
+ * keyed by axis id, NOT an array) and use the axis's `keys` array to bind
+ * it to specific series `yKey`s — e.g. `axes: { x: { type: 'category',
+ * position: 'bottom' }, y: { type: 'number', position: 'left', keys:
+ * ['revenue'] }, y2: { type: 'number', position: 'right', keys:
+ * ['conversion'] } }`. Series render in array order, so place bars before
+ * lines if you want lines on top.
+ *
+ * See https://www.ag-grid.com/charts/javascript/combination-series/.
+ *
+ * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+ * carries the full ag-charts options object; the wrapper owns the brand
+ * theme, the transparent chart background, ag-charts module registration,
+ * and the host container. Anything the consumer passes wins over the
+ * wrapper's defaults; `container` is always wrapper-owned.
+ *
+ * Always memoize `chartOptions` at the call site; a new object every
+ * render triggers a `chart.update()` cycle.
+ */
+export class UdpAgComboChart {
+    constructor() {
+        /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+        this.chartId = `udp-ag-combo-chart-${uuid()}`;
+        /**
+         * Colour + visual-weight variant applied via the brand theme:
+         * `default` (balanced categorical palette across the mixed series),
+         * `soft` (same palette lightened, for dense low-emphasis surfaces),
+         * `bold` (same palette deepened, for a hero chart), `mono` (a single
+         * brand-hue ramp for sequential / magnitude data), and `colorful` (each
+         * label hashed to a stable Fluent avatar hue, so the same label keeps
+         * its colour across charts). Per-series colours on `chartOptions` always
+         * win.
+         */
+        this.appearance = 'default';
+        /**
+         * Geometry roundness, mirroring the button/input shape tokens: `square`
+         * (sharp bar corners, straight line segments) or `rounded` (rounded bar
+         * corners, smoothed lines). Per-series geometry on `chartOptions` still
+         * wins.
+         */
+        this.shape = 'square';
+        /**
+         * Chrome density. `full` keeps axes, gridlines, legend and padding;
+         * `flush` strips all chrome and zeroes padding so the plot bleeds to the
+         * container edges (the KPI-card "sparkline" look). Pair with a
+         * `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+         */
+        this.chrome = 'full';
+        // Re-theme on a live light/dark switch. `theme-manager` dispatches
+        // `theme-changed` on the window after updating the brand CSS variables;
+        // reuse the prop-watch rebuild path so buildOptions() re-reads them (and the
+        // current mode via getCurrentThemeMode()).
+        this.handleThemeChanged = () => {
+            this.handleOptionsChanged();
+        };
+    }
+    handleOptionsChanged() {
+        if (!this.chart)
+            return;
+        const options = this.buildOptions();
+        if (options)
+            this.chart.update(options);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        if (Build.isServer)
+            return;
+        ensureAgChartsModules();
+        const container = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!container)
+            return;
+        const options = this.buildOptions(container);
+        if (!options)
+            return;
+        this.chart = AgCharts.create(options);
+        window.addEventListener('theme-changed', this.handleThemeChanged);
+    }
+    disconnectedCallback() {
+        var _a;
+        window.removeEventListener('theme-changed', this.handleThemeChanged);
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.chart = undefined;
+    }
+    buildOptions(container) {
+        var _a, _b;
+        const target = container !== null && container !== void 0 ? container : (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!target)
+            return null;
+        const merged = Object.assign(Object.assign({ theme: buildUdpChartTheme(this.el, {
+                appearance: this.appearance,
+                shape: this.shape,
+                chrome: this.chrome,
+            }), background: { visible: false } }, this.chartOptions), { container: target });
+        return applySeriesColors(merged, this.el, this.appearance);
+    }
+    render() {
+        return (h(Host, { key: '68e5a650718ff406afc4b0f8a24f03d33cd3294b', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, h("div", { key: 'd6f22c7d22d10fd5a1ae11f4be2fa9a12f0ba66f', id: this.chartId, class: "chart-mount" })));
+    }
+    static get is() { return "udp-ag-combo-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-ag-combo-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-ag-combo-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "chartOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AgCartesianChartOptions",
+                    "resolved": "AgCartesianChartOptions<any, unknown>",
+                    "references": {
+                        "AgCartesianChartOptions": {
+                            "location": "import",
+                            "path": "ag-charts-community",
+                            "id": "../../node_modules/.pnpm/ag-charts-community@13.3.1/node_modules/ag-charts-community/dist/types/src/main.d.ts::AgCartesianChartOptions",
+                            "referenceLocation": "AgCartesianChartOptions"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full ag-charts options. Required. Should include at least `data` and\n`series` (an array mixing multiple series types \u2014 e.g. `'bar'` plus\n`'line'`). For dual-axis combos, include an `axes` object (keyed by\naxis id) and link the extra y-axis to specific series via its `keys`\nproperty. The wrapper merges in defaults for `theme` and `background`;\neither can be overridden by passing them on `chartOptions`.\n`container` is wrapper-owned and any value passed here is ignored."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "customWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-width"
+            },
+            "customHeight": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-height"
+            },
+            "chartId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chart-id",
+                "defaultValue": "`udp-ag-combo-chart-${uuid()}`"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartAppearance",
+                    "resolved": "\"bold\" | \"colorful\" | \"default\" | \"mono\" | \"soft\"",
+                    "references": {
+                        "UdpChartAppearance": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartAppearance",
+                            "referenceLocation": "UdpChartAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour + visual-weight variant applied via the brand theme:\n`default` (balanced categorical palette across the mixed series),\n`soft` (same palette lightened, for dense low-emphasis surfaces),\n`bold` (same palette deepened, for a hero chart), `mono` (a single\nbrand-hue ramp for sequential / magnitude data), and `colorful` (each\nlabel hashed to a stable Fluent avatar hue, so the same label keeps\nits colour across charts). Per-series colours on `chartOptions` always\nwin."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'default'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartShape",
+                    "resolved": "\"rounded\" | \"square\"",
+                    "references": {
+                        "UdpChartShape": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartShape",
+                            "referenceLocation": "UdpChartShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Geometry roundness, mirroring the button/input shape tokens: `square`\n(sharp bar corners, straight line segments) or `rounded` (rounded bar\ncorners, smoothed lines). Per-series geometry on `chartOptions` still\nwins."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'square'"
+            },
+            "chrome": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartChrome",
+                    "resolved": "\"flush\" | \"full\"",
+                    "references": {
+                        "UdpChartChrome": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartChrome",
+                            "referenceLocation": "UdpChartChrome"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chrome density. `full` keeps axes, gridlines, legend and padding;\n`flush` strips all chrome and zeroes padding so the plot bleeds to the\ncontainer edges (the KPI-card \"sparkline\" look). Pair with a\n`udp-fluent-card` `preview` slot or `bodyPadding={false}`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chrome",
+                "defaultValue": "'full'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "chartOptions",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "appearance",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "shape",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "chrome",
+                "methodName": "handleOptionsChanged"
+            }];
+    }
+}

package/dist/collection/components/charts/udp-ag-donut-chart/udp-ag-donut-chart.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.chart-mount {
+  position: absolute;
+  inset: 0;
+}