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

package/dist/esm/udp-ag-bubble-chart.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cgpvu-iV.js';
+import { v4 } from 'uuid';
+import { AgCharts, ModuleRegistry, AllCommunityModule } from 'ag-charts-community';
+import { b as buildUdpChartTheme, a as applySeriesColors } from './charts-theme-B2HoYVMf.js';
+import './theme-manager-DeVqiL0i.js';
+import '@fluentui/web-components';
+import '@fluentui/tokens';
+
+const udpAgBubbleChartCss = () => `:host{display:block;position:relative;width:100%;min-width:0;min-height:0;box-sizing:border-box}.chart-mount{position:absolute;inset:0}`;
+
+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;
+const UdpAgBubbleChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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-${v4()}`;
+        /**
+         * 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;
+        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" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "chartOptions": [{
+                "handleOptionsChanged": 0
+            }],
+        "appearance": [{
+                "handleOptionsChanged": 0
+            }],
+        "shape": [{
+                "handleOptionsChanged": 0
+            }],
+        "chrome": [{
+                "handleOptionsChanged": 0
+            }]
+    }; }
+};
+UdpAgBubbleChart.style = udpAgBubbleChartCss();
+
+export { UdpAgBubbleChart as udp_ag_bubble_chart };

package/dist/esm/udp-ag-combo-chart.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cgpvu-iV.js';
+import { v4 } from 'uuid';
+import { AgCharts, ModuleRegistry, AllCommunityModule } from 'ag-charts-community';
+import { b as buildUdpChartTheme, a as applySeriesColors } from './charts-theme-B2HoYVMf.js';
+import './theme-manager-DeVqiL0i.js';
+import '@fluentui/web-components';
+import '@fluentui/tokens';
+
+const udpAgComboChartCss = () => `:host{display:block;position:relative;width:100%;min-width:0;min-height:0;box-sizing:border-box}.chart-mount{position:absolute;inset:0}`;
+
+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;
+const UdpAgComboChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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-${v4()}`;
+        /**
+         * 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;
+        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" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "chartOptions": [{
+                "handleOptionsChanged": 0
+            }],
+        "appearance": [{
+                "handleOptionsChanged": 0
+            }],
+        "shape": [{
+                "handleOptionsChanged": 0
+            }],
+        "chrome": [{
+                "handleOptionsChanged": 0
+            }]
+    }; }
+};
+UdpAgComboChart.style = udpAgComboChartCss();
+
+export { UdpAgComboChart as udp_ag_combo_chart };

package/dist/esm/udp-ag-donut-chart.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cgpvu-iV.js';
+import { v4 } from 'uuid';
+import { AgCharts, ModuleRegistry, AllCommunityModule } from 'ag-charts-community';
+import { b as buildUdpChartTheme, a as applySeriesColors } from './charts-theme-B2HoYVMf.js';
+import './theme-manager-DeVqiL0i.js';
+import '@fluentui/web-components';
+import '@fluentui/tokens';
+
+const udpAgDonutChartCss = () => `:host{display:block;position:relative;width:100%;min-width:0;min-height:0;box-sizing:border-box}.chart-mount{position:absolute;inset:0}`;
+
+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;
+const UdpAgDonutChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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-donut-chart-${v4()}`;
+        /**
+         * Colour + visual-weight variant applied via the brand theme:
+         * `default` (balanced categorical palette across sectors), `soft` (same
+         * palette lightened, for dense low-emphasis surfaces), `bold` (same
+         * palette deepened, for a hero chart), `mono` (a single brand-hue ramp,
+         * light→dark across sectors), and `colorful` (each sector's 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 sector corners) or `rounded` (rounded sector corners).
+         * Per-series `cornerRadius` on `chartOptions` still wins.
+         */
+        this.shape = 'square';
+        /**
+         * Chrome density. `full` keeps the legend and padding; `flush` hides the
+         * legend and zeroes padding so the donut fills the container edge to edge
+         * (the KPI-card 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;
+        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: 'baffcc67c4f1b06e9e0734be01f9922e7f189b92', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, h("div", { key: 'bb6e4776dcac74f9afb1836a6e9e97c1d46b142d', id: this.chartId, class: "chart-mount" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "chartOptions": [{
+                "handleOptionsChanged": 0
+            }],
+        "appearance": [{
+                "handleOptionsChanged": 0
+            }],
+        "shape": [{
+                "handleOptionsChanged": 0
+            }],
+        "chrome": [{
+                "handleOptionsChanged": 0
+            }]
+    }; }
+};
+UdpAgDonutChart.style = udpAgDonutChartCss();
+
+export { UdpAgDonutChart as udp_ag_donut_chart };

package/dist/esm/udp-ag-line-chart.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cgpvu-iV.js';
+import { v4 } from 'uuid';
+import { AgCharts, ModuleRegistry, AllCommunityModule } from 'ag-charts-community';
+import { b as buildUdpChartTheme, a as applySeriesColors } from './charts-theme-B2HoYVMf.js';
+import './theme-manager-DeVqiL0i.js';
+import '@fluentui/web-components';
+import '@fluentui/tokens';
+
+const udpAgLineChartCss = () => `:host{display:block;position:relative;width:100%;min-width:0;min-height:0;box-sizing:border-box}.chart-mount{position:absolute;inset:0}`;
+
+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;
+const UdpAgLineChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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-line-chart-${v4()}`;
+        /**
+         * 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`
+         * (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;
+        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: '890df53a7cfa3d7cff52f8fb8feba11773d0b2fe', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, h("div", { key: '6dfe11ed2bd90c00f7c6ec3cea74df6bd1c6234c', id: this.chartId, class: "chart-mount" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "chartOptions": [{
+                "handleOptionsChanged": 0
+            }],
+        "appearance": [{
+                "handleOptionsChanged": 0
+            }],
+        "shape": [{
+                "handleOptionsChanged": 0
+            }],
+        "chrome": [{
+                "handleOptionsChanged": 0
+            }]
+    }; }
+};
+UdpAgLineChart.style = udpAgLineChartCss();
+
+export { UdpAgLineChart as udp_ag_line_chart };

package/dist/esm/udp-ag-pie-chart.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cgpvu-iV.js';
+import { v4 } from 'uuid';
+import { AgCharts, ModuleRegistry, AllCommunityModule } from 'ag-charts-community';
+import { b as buildUdpChartTheme, a as applySeriesColors } from './charts-theme-B2HoYVMf.js';
+import './theme-manager-DeVqiL0i.js';
+import '@fluentui/web-components';
+import '@fluentui/tokens';
+
+const udpAgPieChartCss = () => `:host{display:block;position:relative;width:100%;min-width:0;min-height:0;box-sizing:border-box}.chart-mount{position:absolute;inset:0}`;
+
+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;
+const UdpAgPieChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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-pie-chart-${v4()}`;
+        /**
+         * Colour + visual-weight variant applied via the brand theme:
+         * `default` (balanced categorical palette across slices), `soft` (same
+         * palette lightened, for dense low-emphasis surfaces), `bold` (same
+         * palette deepened, for a hero chart), `mono` (a single brand-hue ramp,
+         * light→dark across slices), and `colorful` (each slice's 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 sector corners) or `rounded` (rounded sector corners).
+         * Per-series `cornerRadius` on `chartOptions` still wins.
+         */
+        this.shape = 'square';
+        /**
+         * Chrome density. `full` keeps the legend and padding; `flush` hides the
+         * legend and zeroes padding so the pie fills the container edge to edge
+         * (the KPI-card 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;
+        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: 'dac03b25cb892ad28ae4a5e80f2c733dc7b5a1b2', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, h("div", { key: '8ccb6cc2b35d71320487634c05a9709c9199adf3', id: this.chartId, class: "chart-mount" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "chartOptions": [{
+                "handleOptionsChanged": 0
+            }],
+        "appearance": [{
+                "handleOptionsChanged": 0
+            }],
+        "shape": [{
+                "handleOptionsChanged": 0
+            }],
+        "chrome": [{
+                "handleOptionsChanged": 0
+            }]
+    }; }
+};
+UdpAgPieChart.style = udpAgPieChartCss();
+
+export { UdpAgPieChart as udp_ag_pie_chart };