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

package/dist/cjs/stencil-toggle.cjs.entry.js

@@ -124,16 +124,16 @@ const StencilToggle = class {
         const buttonId = `${baseId}-button`;
         const labelId = `${baseId}-label`;
         const isError = !!this.errorMessage;
-        const labelElement = this.label && (index.h("label", { key: '30e3a22099123364cddfc05fbf50ced696dbe51b', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, index.h("unity-typography", { key: 'df3bcf509425e827865ab57bb24c2d3b27f00027', variant: "caption-text" }, this.label)));
-        const toggleElement = (index.h("div", { key: '275096148fe4f343dde3a23019ccbaedf1993def', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, index.h("button", { key: 'c6ad650a65fa70044d3198462af7b18b2a6664fe', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, index.h("span", { key: '650685e10897514efdb25527c356c838b4dae0d2', class: "toggle-knob" }))));
-        return (index.h(index.Host, { key: 'f097d18da8c7301e3902b53af97a7dbe5c3740cd', class: {
+        const labelElement = this.label && (index.h("label", { key: '02e8a2f438bcde8abda9ab9a2197fd24c12b1938', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, index.h("unity-typography", { key: 'bf7a09ffd0d50d19eedaa48dfe08e5a4889d06d8', variant: "caption-text" }, this.label)));
+        const toggleElement = (index.h("div", { key: '4b8a4bbf623c8dc20fcb0506135cfb5a0d47b6c8', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, index.h("button", { key: 'cd4b73375bd2c1633547949e7332cc71befec60b', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, index.h("span", { key: 'bf753b2dc021bc46c249628f1711643817cc9f6a', class: "toggle-knob" }))));
+        return (index.h(index.Host, { key: '1ef782b55c03ed48c4ea7c4df964bded0aa2ef85', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--checked': this.toggled,
                 [`udp-input--margin-${this.margin}`]: true,
                 [`udp-input--size-${this.size}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false' }, index.h("div", { key: '14edc1c2e9ea69742f9ba84ceee5d73f58cd4bf2', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && index.h("div", { key: '2cc48a745cb77b9a85493ff0692241635b312f87', class: "error-message" }, this.errorMessage))));
+            }, "aria-invalid": isError ? 'true' : 'false' }, index.h("div", { key: '09fea39022259fcb9362400e7acb94cd2eb83522', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && index.h("div", { key: '72e5c6b9e0f082a6b73c95653a3b3de04da716f7', class: "error-message" }, this.errorMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/text-field_2.cjs.entry.js

@@ -172,7 +172,7 @@ const TextField = class {
             'bx--text-input:user-invalid': isError,
             'text-field--disabled': this.disabled,
         };
-        return (index.h(index.Host, { key: '40b53f61f7ca060a9965523f8d6d57c8071901e5', class: {
+        return (index.h(index.Host, { key: '0e61648a88f05d9b76e62872299f16383dc17b1d', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -180,9 +180,9 @@ const TextField = class {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: 'b5500e1963e74718c800d3c72162c4b42d535206', class: "bx--form-item" }, index.h("unity-typography", { key: 'd4a5957b13848ebe5e979f52e80b51c3dd1e2283', variant: "caption-text" }, index.h("label", { key: '2dfb94ff0bfce4aa9bbb4558673809371060a989', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (index.h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (index.h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: '8f092d4d310615a0be06e685249ddb2504d37350', class: "bx--form-item" }, index.h("unity-typography", { key: 'ddbe63461c2203e6aa76e0ed10b4eb46f821b37e', variant: "caption-text" }, index.h("label", { key: '0f4e4a09000f02befa7ae258230bd2c8bb017bfa', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (index.h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (index.h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
             //@ts-ignore
-            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (index.h("div", { key: '2b00003bec0479cdda47c324f1f1aed2c96fdc83', class: "error-message" }, index.h("unity-typography", { key: '4c7e5da72941816ffbdd199ce22aaecbae5d67c3', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (index.h("div", { key: 'b98567069ca160eb16a178e2a06ff7220218d377', class: "error-message" }, index.h("unity-typography", { key: 'de7b6ee79c664786ebe7f0da985510b981abb0ef', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -521,7 +521,7 @@ const UdpSelector = class {
             'focused': this.isOpen,
         };
         const hasSelection = this.multiSelect ? this.selectedOptions.length > 0 : !!this.selectedOption;
-        return (index.h(index.Host, { key: '1eac7856b172c9b25abaf8855e5cc8740517e55d', class: {
+        return (index.h(index.Host, { key: '061c9a3761823370b5a3c91e8fd6e63847794768', class: {
                 'udp-input': true,
                 'udp-selector': true,
                 'udp-input--error': isError,
@@ -531,9 +531,9 @@ const UdpSelector = class {
                 'udp-input--large': this.large,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: '28efff4a65f344dafb8f2139e7fe2f065f3e016a', class: "bx--form-item" }, this.label && (index.h("unity-typography", { key: '97ac603bfd7541410e20cd92ca710f44f894c68f', variant: "caption-text" }, index.h("label", { key: '3514a3760a0986dace0baca293c7b80e4c3b7601', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), index.h("div", { key: '6fbca882446da9d8ccb2987b693e0daed42bd8de', class: "udp-selector__container" }, index.h("div", { key: '2215b94a1a14f86eafd28cf4be9416b934d14a78', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: '44d577fcc9f217bc21a75e3941bd8173b74bc851', class: "bx--form-item" }, this.label && (index.h("unity-typography", { key: 'f850be572774ea991ed573a29fa19ad8a36d9132', variant: "caption-text" }, index.h("label", { key: '9812ff1ecbe6bbbd46c2180e04c63242fd7512f1', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), index.h("div", { key: 'fb12741fffdcf3c695a8512af53c01d9df3ccf5f', class: "udp-selector__container" }, index.h("div", { key: '83b6720b65d92ee3625c229843ed4d9e0b427941', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
             // @ts-ignore
-            udprecordid: 'udpRecord-udp-selector-' + this.id }, index.h("div", { key: '6448b11e0f2665f9881cb6d9337829eef76f771b', class: {
+            udprecordid: 'udpRecord-udp-selector-' + this.id }, index.h("div", { key: 'b6d0b13c9257886266b324e066d83026b61a9dc7', class: {
                 'selected-option-label': true,
                 'placeholder': !hasSelection,
             } }, this.multiSelect
@@ -542,7 +542,7 @@ const UdpSelector = class {
                 : 'Select option(s)'
             : this.selectedOption
                 ? this.selectedOption.label
-                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && index.h("span", { key: '76d80fd3477f38b573a244525c73f1d6c3ecf79a', class: "checkmark" }), index.h("div", { key: '5cb32afeacb64b6db60fce687c8bf7fdfdbb9d8f', class: "arrow" })), this.isOpen && (index.h("ul", { key: 'bce792f0008f1758a78ad2602a9fbd5f88d971b2', class: "options-list" }, this.options.map(option => (index.h("unity-typography", { variant: "button" }, index.h("li", { class: this.isOptionSelected(option) ? 'selected' : '', onClick: () => this.selectOption(option), onMouseDown: this.handleOptionMouseDown }, option.label, this.isOptionSelected(option) && index.h("span", { class: "checkmark" })))))))), this.errorMessage && (index.h("div", { key: '2663cbb5488cab8d20bf37e76163c52c3ca3105b', class: "error-message" }, index.h("unity-typography", { key: '31e839f1235e91c1db7168a010037040803b3901', variant: "caption-text", color: "error" }, this.errorMessage))))));
+                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && index.h("span", { key: '92e05198d2f911965eeca9b6d5ae90cdf53b10cf', class: "checkmark" }), index.h("div", { key: 'd573809f8b99ea9e3cd9bf8a7e72e168909a3f62', class: "arrow" })), this.isOpen && (index.h("ul", { key: 'd390d560b3ab1e617dbaecb9191ac8fc59fd4a2d', class: "options-list" }, this.options.map(option => (index.h("unity-typography", { variant: "button" }, index.h("li", { class: this.isOptionSelected(option) ? 'selected' : '', onClick: () => this.selectOption(option), onMouseDown: this.handleOptionMouseDown }, option.label, this.isOptionSelected(option) && index.h("span", { class: "checkmark" })))))))), this.errorMessage && (index.h("div", { key: 'af9e7002e4ac9eea11add7ca8cdf1b970b6c70dc', class: "error-message" }, index.h("unity-typography", { key: '998a8ed897a867167a2c063a259e30ff5f1c7896', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     /**
      * Checks if a given option is currently selected.

package/dist/cjs/theme-manager-vLJfQYn8.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var webComponents = require('@fluentui/web-components');
+var tokens = require('@fluentui/tokens');
+
+/**
+ * Helper: Fast Hex to RGB parsing (No DOM access required)
+ */
+function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    const fullHex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : { r: 0, g: 0, b: 0 }; // Fallback
+}
+/**
+ * Helper: RGB to Hex
+ */
+function rgbToHex(r, g, b) {
+    const toHex = (c) => {
+        const hex = Math.max(0, Math.min(255, Math.round(c))).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Generate a Fluent-compatible palette
+ * Fixes: Pins the base color to index 80 so it appears exactly as intended.
+ */
+function generatePaletteFromBase(baseColor) {
+    const { r, g, b } = hexToRgb(baseColor);
+    const palette = {};
+    // Fluent typically uses 16 steps (10 to 160)
+    // We pin the input 'baseColor' to step 80 (standard brand token)
+    const brandSlot = 80;
+    for (let i = 1; i <= 16; i++) {
+        const key = i * 10;
+        // If this is our brand slot, use the exact color
+        if (key === brandSlot) {
+            palette[key] = baseColor;
+            continue;
+        }
+        let rNew, gNew, bNew;
+        if (key < brandSlot) {
+            // Darker shades (Mix with Black)
+            // Logic: 10 is darkest, 70 is closer to brand
+            const factor = key / brandSlot; // 0.125 to 0.875
+            // Simple darkening usually creates cleaner results than linear interpolation
+            rNew = r * factor;
+            gNew = g * factor;
+            bNew = b * factor;
+        }
+        else {
+            // Lighter shades (Mix with White)
+            // Logic: 90 is close to brand, 160 is close to white
+            const stepsAbove = 160 - brandSlot; // 80
+            const currentStep = key - brandSlot; // 10 to 80
+            const factor = currentStep / stepsAbove; // 0.125 to 1.0
+            // tinting algorithm
+            rNew = r + (255 - r) * factor;
+            gNew = g + (255 - g) * factor;
+            bNew = b + (255 - b) * factor;
+        }
+        palette[key] = rgbToHex(rNew, gNew, bNew);
+    }
+    return palette;
+}
+/**
+ * Apply the requested theme to the document and Fluent UI
+ */
+function applyFluentTheme(config) {
+    const { primaryColor, mode } = config;
+    // 1. Generate Palette
+    const brandPalette = generatePaletteFromBase(primaryColor);
+    // 2. Generate Fluent Theme Object
+    const fluentTheme = mode === 'dark' ? tokens.createDarkTheme(brandPalette) : tokens.createLightTheme(brandPalette);
+    // 3. Set Internal Fluent State (Keeps Fluent Components happy and injects standard tokens to body)
+    webComponents.setTheme(fluentTheme);
+    // 4. Apply root-level color and background so currentColor inheritance works across themes, replaces need for CssBaseline MUI component
+    document.documentElement.style.color = 'var(--colorNeutralForeground1)';
+    document.documentElement.style.backgroundColor = 'var(--colorNeutralBackground1)';
+}
+
+/**
+ * Theme preset colors
+ */
+const THEME_PRESETS = {
+    unity: '#0c2f50',
+    sap: '#344861',
+};
+/**
+ * Current theme state
+ */
+let currentPrimaryColor = THEME_PRESETS.unity;
+let currentMode = 'light';
+/**
+ * Apply theme across all integrated libraries
+ */
+function applyThemeToAllLibraries() {
+    // Apply to Fluent UI (This also injects CSS variables into :root)
+    applyFluentTheme({
+        primaryColor: currentPrimaryColor,
+        mode: currentMode,
+    });
+}
+/**
+ * Initialize the unified theme system
+ */
+function initializeTheme(themeOrConfig) {
+    if (!themeOrConfig) {
+        currentPrimaryColor = THEME_PRESETS.unity;
+        currentMode = 'light';
+    }
+    else if (typeof themeOrConfig === 'string') {
+        currentPrimaryColor = THEME_PRESETS[themeOrConfig];
+        currentMode = 'light';
+    }
+    else {
+        currentPrimaryColor = themeOrConfig.primaryColor || THEME_PRESETS.unity;
+        currentMode = themeOrConfig.mode || 'light';
+    }
+    applyThemeToAllLibraries();
+}
+/**
+ * Switch between light and dark mode at runtime
+ */
+function setThemeMode(mode) {
+    currentMode = mode;
+    // Update all libraries
+    applyThemeToAllLibraries();
+    // Dispatch event for other components (like React wrappers or Charts)
+    if (typeof window !== 'undefined') {
+        const event = new CustomEvent('theme-changed', {
+            detail: {
+                mode: currentMode,
+                primaryColor: currentPrimaryColor,
+            },
+        });
+        window.dispatchEvent(event);
+    }
+}
+/**
+ * Get the current theme mode
+ */
+function getCurrentThemeMode() {
+    return currentMode;
+}
+
+exports.getCurrentThemeMode = getCurrentThemeMode;
+exports.initializeTheme = initializeTheme;
+exports.setThemeMode = setThemeMode;

package/dist/cjs/udp-adornment.cjs.entry.js

@@ -27,7 +27,7 @@ const UdpAdornment = class {
     }
     render() {
         const style = { width: '4px', height: '100%', backgroundColor: this.getColor() };
-        return index.h(index.Host, { key: 'aca718dca2daada5ceb616b8e27fee8f0889bc10', style: style });
+        return index.h(index.Host, { key: 'a55659a9e7c8613b2e75946ef6111490bab0e322', style: style });
     }
 };
 UdpAdornment.style = udpAdornmentCss();

package/dist/cjs/udp-advanced-search-builder.cjs.entry.js

@@ -803,10 +803,13 @@ const UdpAdvancedSearchBuilder = class {
     verifyFilterState(data) {
         const errors = [];
         const guidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
-        // Validate groups: every group must have at least one direct filter
+        // Validate groups: a group must contribute something — either its own direct
+        // filter or a child group. A container group (children only, no direct filters)
+        // is valid; only a truly empty group (no filters and no children) is an error.
         for (const group of data.filterGroups) {
             const hasDirectFilters = data.filterElements.some(f => f.groupId === group.groupId);
-            if (!hasDirectFilters) {
+            const hasChildGroups = data.filterGroups.some(g => g.parentGroupId === group.groupId);
+            if (!hasDirectFilters && !hasChildGroups) {
                 const label = group.parentGroupId === null ? 'Root group' : 'A group';
                 errors.push(`${label} has no filters. Add a filter or remove the group.`);
             }
@@ -960,11 +963,11 @@ const UdpAdvancedSearchBuilder = class {
         if (this.isExpanded && this.config.height) {
             hostStyles['height'] = this.config.height;
         }
-        return (index.h(index.Host, { key: 'e08370213e684a3ebed9605b0167010964b03c2a', style: hostStyles, class: {
+        return (index.h(index.Host, { key: 'ab3132a409df0b83da567793d635d13ee9b49d65', style: hostStyles, class: {
                 'is-resizable': isResizable,
                 'host-expanded': this.isExpanded,
                 'host-collapsed': !this.isExpanded,
-            } }, index.h("div", { key: 'cec9d9109278df5211e3da4c98aa34f354c7a26a', class: containerClasses }, isCollapsible && (index.h("div", { key: '381f3c02bcbf40aae3db6e7a99803dfe5a0759db', class: "collapsed-view" }, index.h("udp-fluent-text-input", { key: '94c6f902eba20017d3de1c269acb64c7c70d00bf', value: this.filterString, readonly: true, appearance: "filled-darker", includeErrorPadding: false, class: "string-display-input" }), index.h("udp-fluent-button", { key: '94292e13802f60bf7568a3dce0ea28875bacc7df', class: "toggle-button", size: "small", appearance: "transparent", onClick: this.toggleExpanded }, index.h("span", { key: 'd1192c982762cb18aad810d435b60271b9486cbb' }, this.isExpanded ? 'Collapse' : 'Expand'), index.h("svg", { key: 'dd08e210edb45c356190cbd9bb10e8ccaaa6fc36', class: "toggle-icon", viewBox: "0 0 16 16", slot: "end" }, index.h("path", { key: 'd946c26d8719e03cd7e21123b471545564df7f76', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "2" }))))), index.h("div", { key: '6d6771073bed1c5cc5325da92f9eb736d54d2425', class: "anim-container", ref: el => (this.animContainerEl = el) }, index.h("div", { key: 'b8335dfd2f4a6c6a00f989a00b69af1b93ba1907', class: "content-wrapper" }, (this.isExpanded || !isCollapsible) && rootGroup && (index.h("udp-advanced-search-filter-group", { key: rootGroup.groupId, groupId: rootGroup.groupId, filterData: this.currentFilterData, fields: this.fieldsArray, isRoot: true, isFilterValid: this.isFilterValid, errorMessages: this.errorMessages, maxDepth: this.currentMaxDepth, onAddFilter: e => this.handleAddFilter(e.detail), onAddGroup: e => this.handleAddGroup(e.detail), onRemoveFilter: e => this.handleRemoveFilter(e.detail), onRemoveGroup: e => this.handleRemoveGroup(e.detail), onFilterChange: this.handleFilterChange, onGroupChange: this.handleGroupChange, onDepthChange: this.handleDepthChange, openAddMenuForGroupId: this.openAddMenuForGroupId, onToggleAddMenu: this.handleToggleAddMenu })))), showFooter && (index.h("div", { key: 'be5d0210862e2a6ef50c4c34e92baac3d7342719', class: "advanced-filter-footer" }, index.h("validation-chip", { key: 'd25fd6065f9c7cf9b9879b280738aab85d175344', isValid: this.isFilterValid, errorMessages: this.errorMessages }), index.h("udp-fluent-button", { key: 'bcfb6f8f90c3167aac8ebfdd990a2c145012fb50', disabled: !this.isFilterValid, onClick: this.handleSearch, appearance: "primary" }, "Search"))))));
+            } }, index.h("div", { key: 'b1afe1b4d06b93bf2f2ff5be3cf86ba1b8aa28d8', class: containerClasses }, isCollapsible && (index.h("div", { key: '208924a3e7652fb3cece053e28049ca33d956af5', class: "collapsed-view" }, index.h("udp-fluent-text-input", { key: 'b4752482a768ee8cb202e2b22c3243a66597b8ae', value: this.filterString, readonly: true, appearance: "filled-darker", includeErrorPadding: false, class: "string-display-input" }), index.h("udp-fluent-button", { key: '728968a44a5c47e21e0e229522c23e4b7c5d24b3', class: "toggle-button", size: "small", appearance: "transparent", onClick: this.toggleExpanded }, index.h("span", { key: '480b0e5695de7662d52da5f93747e9e5640794cb' }, this.isExpanded ? 'Collapse' : 'Expand'), index.h("svg", { key: '56693d725e73fa795a209a06a8edaccf1d2b6fb4', class: "toggle-icon", viewBox: "0 0 16 16", slot: "end" }, index.h("path", { key: '98699d880181e345bc91f70644c0f9c981d40c3b', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "2" }))))), index.h("div", { key: '1b389df7790880e47e946888e7fe501a2ad5f07d', class: "anim-container", ref: el => (this.animContainerEl = el) }, index.h("div", { key: '80e0830959f3513ed6ba0fb2fe866038e636bb2e', class: "content-wrapper" }, (this.isExpanded || !isCollapsible) && rootGroup && (index.h("udp-advanced-search-filter-group", { key: rootGroup.groupId, groupId: rootGroup.groupId, filterData: this.currentFilterData, fields: this.fieldsArray, isRoot: true, isFilterValid: this.isFilterValid, errorMessages: this.errorMessages, maxDepth: this.currentMaxDepth, onAddFilter: e => this.handleAddFilter(e.detail), onAddGroup: e => this.handleAddGroup(e.detail), onRemoveFilter: e => this.handleRemoveFilter(e.detail), onRemoveGroup: e => this.handleRemoveGroup(e.detail), onFilterChange: this.handleFilterChange, onGroupChange: this.handleGroupChange, onDepthChange: this.handleDepthChange, openAddMenuForGroupId: this.openAddMenuForGroupId, onToggleAddMenu: this.handleToggleAddMenu })))), showFooter && (index.h("div", { key: 'fc72bbb8d13c9d07de966b480e91a082587122a1', class: "advanced-filter-footer" }, index.h("validation-chip", { key: 'c2e5d0fa78b7ab310fd43963350214f78ca762be', isValid: this.isFilterValid, errorMessages: this.errorMessages }), index.h("udp-fluent-button", { key: '6ec8b756b23463bdfdc54cf766d11fd9d40af309', disabled: !this.isFilterValid, onClick: this.handleSearch, appearance: "primary" }, "Search"))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/udp-ag-area-chart.cjs.entry.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var index = require('./index-G1ccGqOs.js');
+var uuid = require('uuid');
+var agChartsCommunity = require('ag-charts-community');
+var chartsTheme = require('./charts-theme-DmrbXz3l.js');
+require('./theme-manager-vLJfQYn8.js');
+require('@fluentui/web-components');
+require('@fluentui/tokens');
+
+const udpAgAreaChartCss = () => `: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;
+    agChartsCommunity.ModuleRegistry.registerModules([agChartsCommunity.AllCommunityModule]);
+    agChartsModulesRegistered = true;
+};
+const sizeStyle = (value, fallback) => value == null ? fallback : typeof value === 'number' ? `${value}px` : value;
+const UdpAgAreaChart = class {
+    constructor(hostRef) {
+        index.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-area-chart-${uuid.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 = agChartsCommunity.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: chartsTheme.buildUdpChartTheme(this.el, {
+                appearance: this.appearance,
+                shape: this.shape,
+                chrome: this.chrome,
+            }), background: { visible: false } }, this.chartOptions), { container: target });
+        return chartsTheme.applySeriesColors(merged, this.el, this.appearance);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c18b653ee0d3ae4dadc99940572af523d4604b5e', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, index.h("div", { key: '47547e36534525951cf14668f4032b8ac14d9315', id: this.chartId, class: "chart-mount" })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "chartOptions": [{
+                "handleOptionsChanged": 0
+            }],
+        "appearance": [{
+                "handleOptionsChanged": 0
+            }],
+        "shape": [{
+                "handleOptionsChanged": 0
+            }],
+        "chrome": [{
+                "handleOptionsChanged": 0
+            }]
+    }; }
+};
+UdpAgAreaChart.style = udpAgAreaChartCss();
+
+exports.udp_ag_area_chart = UdpAgAreaChart;

package/dist/cjs/{udp-bar-chart_4.cjs.entry.js → udp-ag-bar-chart_4.cjs.entry.js}

@@ -2,65 +2,144 @@
 
 var index = require('./index-G1ccGqOs.js');
 var uuid = require('uuid');
+var agChartsCommunity = require('ag-charts-community');
+var chartsTheme = require('./charts-theme-DmrbXz3l.js');
 var chartUtils = require('./chartUtils-Gg3D2Moc.js');
 var am4charts = require('@amcharts/amcharts4/charts');
 var am4core = require('@amcharts/amcharts4/core');
+require('./theme-manager-vLJfQYn8.js');
+require('@fluentui/web-components');
+require('@fluentui/tokens');
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n.default = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
 
 var am4charts__namespace = /*#__PURE__*/_interopNamespace(am4charts);
 var am4core__namespace = /*#__PURE__*/_interopNamespace(am4core);
 
-const udpBarChartCss = () => ``;
+const udpAgBarChartCss = () => `:host{display:block;position:relative;width:100%;min-width:0;min-height:0;box-sizing:border-box}.chart-mount{position:absolute;inset:0}`;
 
-const UdpBarChart = class {
+let agChartsModulesRegistered = false;
+const ensureAgChartsModules = () => {
+    if (agChartsModulesRegistered)
+        return;
+    agChartsCommunity.ModuleRegistry.registerModules([agChartsCommunity.AllCommunityModule]);
+    agChartsModulesRegistered = true;
+};
+const sizeStyle = (value, fallback) => value == null ? fallback : typeof value === 'number' ? `${value}px` : value;
+const UdpAgBarChart = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.data = undefined;
-        this.valueField = undefined;
-        this.labelField = undefined;
-        this.title = undefined;
-        this.subheader = undefined;
-        this.customCardStyle = {};
-        this.kpisPosition = 'left';
-        this.kpis = undefined;
-        this.xAxisLabel = undefined;
-        this.yAxisLabel = undefined;
-        this.hideAdornment = false;
-        this.valueFields = undefined;
-        this.stacked = false;
-        this.showBullets = false;
-        this.barWidth = undefined;
-        this.xDataType = undefined;
-        this.yDataType = undefined;
-        this.distBetweenGridLines = undefined;
-        this.hideLegend = true;
-        this.hideBorder = false;
-        this.removePadding = false;
-        this.chartId = uuid.v4();
+        /** 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-bar-chart-${uuid.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 = agChartsCommunity.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: chartsTheme.buildUdpChartTheme(this.el, {
+                appearance: this.appearance,
+                shape: this.shape,
+                chrome: this.chrome,
+            }), background: { visible: false } }, this.chartOptions), { container: target });
+        return chartsTheme.applySeriesColors(merged, this.el, this.appearance);
     }
     render() {
-        return (index.h("udp-xy-chart", { key: '0838b05374cdd75629753494de132f8c6db0bfad', title: this.title, subheader: this.subheader, data: this.data, chartId: this.chartId, kpis: this.kpis, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, customCardStyle: this.customCardStyle, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment, labelField: this.labelField, valueField: this.valueField, showBullets: this.showBullets, xDataType: this.xDataType, yDataType: this.yDataType, hideLegend: this.hideLegend, hideBorder: this.hideBorder, removePadding: this.removePadding, chartType: 'Column', xAxisLabel: this.xAxisLabel, yAxisLabel: this.yAxisLabel }));
+        return (index.h(index.Host, { key: '06ee9bc67d16255fb84a68d2a1d4de7ac8a30c85', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, index.h("div", { key: 'c49dd7058f02b638ff0935d52c5c4380a01c1b36', id: this.chartId, class: "chart-mount" })));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "chartOptions": [{
+                "handleOptionsChanged": 0
+            }],
+        "appearance": [{
+                "handleOptionsChanged": 0
+            }],
+        "shape": [{
+                "handleOptionsChanged": 0
+            }],
+        "chrome": [{
+                "handleOptionsChanged": 0
+            }]
+    }; }
 };
-UdpBarChart.style = udpBarChartCss();
+UdpAgBarChart.style = udpAgBarChartCss();
 
 const udpDistributionChartCss = () => ``;
 
@@ -133,7 +212,7 @@ const UdpDistributionChart = class {
         this.transformData();
     }
     render() {
-        return (index.h("udp-xy-chart", { key: 'c19c33019b36b6758fb2ceebf472322485bc51eb', chartId: this.chartId, title: this.title, subheader: this.subheader, data: this.transformedData, kpis: this.kpis, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, customCardStyle: this.customCardStyle, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment, labelField: "from", valueField: "count", showBullets: false, xDataType: "string", yDataType: "number", hideLegend: this.hideLegend, chartType: 'Column', xAxisLabel: this.xAxisLabel, yAxisLabel: this.yAxisLabel, distBetweenGridLines: 30, hideBorder: this.hideBorder, removePadding: this.removePadding }));
+        return (index.h("udp-xy-chart", { key: 'fc82b035e6f15cd0f5e6f6d72eba4a40d6b491d5', chartId: this.chartId, title: this.title, subheader: this.subheader, data: this.transformedData, kpis: this.kpis, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, customCardStyle: this.customCardStyle, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment, labelField: "from", valueField: "count", showBullets: false, xDataType: "string", yDataType: "number", hideLegend: this.hideLegend, chartType: 'Column', xAxisLabel: this.xAxisLabel, yAxisLabel: this.yAxisLabel, distBetweenGridLines: 30, hideBorder: this.hideBorder, removePadding: this.removePadding }));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -212,7 +291,7 @@ const UdpDonutChart = class {
         }
     }
     render() {
-        return (index.h("chart-container", { key: '87c18aca3bb2da056d41209b0c6826afb71e7bf0', kpis: this.kpis, chartId: this.chartId, title: this.title, subheader: this.subheader, chartHeight: this.customHeight, chartWidth: this.customWidth, cardWidth: this.customCardWidth, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment, hideBorder: this.hideBorder, removePadding: this.removePadding }));
+        return (index.h("chart-container", { key: '5cb2a2caf6b79614f5dbf45d8fe6b4c46f5f2637', kpis: this.kpis, chartId: this.chartId, title: this.title, subheader: this.subheader, chartHeight: this.customHeight, chartWidth: this.customWidth, cardWidth: this.customCardWidth, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment, hideBorder: this.hideBorder, removePadding: this.removePadding }));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -270,13 +349,13 @@ const UdpLineChart = class {
         this.removePadding = false;
     }
     render() {
-        return (index.h("udp-xy-chart", { key: '2f30a577ec811b43fa25764fcd5591f9fbe4a6eb', title: this.title, subheader: this.subheader, data: this.data, chartId: this.chartId, kpis: this.kpis, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment, labelField: this.xAxisField, valueField: this.yAxisField, showBullets: this.showBullets, xDataType: this.xDataType, yDataType: this.yDataType, hideLegend: this.hideLegend, xAxisLabel: this.xAxisLabel, yAxisLabel: this.yAxisLabel, chartType: "Line", hideBorder: this.hideBorder, removePadding: this.removePadding }));
+        return (index.h("udp-xy-chart", { key: '3b68faf8959da6668cee0a22c1a2241ae878f095', title: this.title, subheader: this.subheader, data: this.data, chartId: this.chartId, kpis: this.kpis, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment, labelField: this.xAxisField, valueField: this.yAxisField, showBullets: this.showBullets, xDataType: this.xDataType, yDataType: this.yDataType, hideLegend: this.hideLegend, xAxisLabel: this.xAxisLabel, yAxisLabel: this.yAxisLabel, chartType: "Line", hideBorder: this.hideBorder, removePadding: this.removePadding }));
     }
     get el() { return index.getElement(this); }
 };
 UdpLineChart.style = udpLineChartCss();
 
-exports.udp_bar_chart = UdpBarChart;
+exports.udp_ag_bar_chart = UdpAgBarChart;
 exports.udp_distribution_chart = UdpDistributionChart;
 exports.udp_donut_chart = UdpDonutChart;
 exports.udp_line_chart = UdpLineChart;