@sme.up/ketchup 10.1.0 → 10.2.0

package/dist/collection/utils/filters/filters-tree-items.js

@@ -13,19 +13,19 @@ export class FiltersTreeItems extends FiltersRows {
         if (!items || items == null) {
             return [];
         }
-        const isUsingGlobalFilter = !!(globalFilter && columns);
-        if (!isUsingGlobalFilter &&
+        const isGlobalFilter = !!(globalFilter && columns);
+        if (!isGlobalFilter &&
             !this.hasFilters(filters, columns, columnFilters)) {
             this.setAllVisible(items);
             return items;
         }
         for (let i = 0; i < items.length; i++) {
-            if (this.setNodeVisibility(items[i], filters, globalFilter, isUsingGlobalFilter, columns, columnFilters)) {
+            if (this.setNodeVisibility(items[i], filters, globalFilter, isGlobalFilter, columns, columnFilters)) {
             }
         }
         return items;
     }
-    isNodeCompliant(node, filters = {}, globalFilter = '', isUsingGlobalFilter = false, columns = [], columnFilters) {
+    isNodeCompliant(node, filters = {}, globalFilter = '', isGlobalFilter = false, columns = [], columnFilters) {
         let retValue = false;
         if (node.cells != null) {
             let cellsHolder = node.cells;
@@ -33,27 +33,27 @@ export class FiltersTreeItems extends FiltersRows {
                 obj: node.obj,
                 value: node.value,
             };
-            retValue = this.areCellsCompliant(cellsHolder, filters, globalFilter, isUsingGlobalFilter, columns, columnFilters);
+            retValue = this.areCellsCompliant(cellsHolder, filters, globalFilter, isGlobalFilter, columns, columnFilters);
         }
-        if (isUsingGlobalFilter == true) {
-            retValue = this.isFilterCompliantForValue(node.value, globalFilter);
+        if (isGlobalFilter == true) {
+            retValue = this.isFilterCompliantForValue(node.value, globalFilter, isGlobalFilter);
         }
         return retValue;
     }
-    setNodeVisibility(node, filters = {}, globalFilter, isUsingGlobalFilter = false, columns = [], columnFilters) {
+    setNodeVisibility(node, filters = {}, globalFilter, isGlobalFilter = false, columns = [], columnFilters) {
         if (columnFilters == null) {
             columnFilters = new FiltersColumnMenu();
         }
-        let visibility = this.isNodeCompliant(node, filters, globalFilter, isUsingGlobalFilter, columns, columnFilters);
+        let visibility = this.isNodeCompliant(node, filters, globalFilter, isGlobalFilter, columns, columnFilters);
         if (node.disabled != true && node.expandable == true) {
             /** se il ramo è compatibile con il filtro, mostro tutto l'albero sottostante */
-            if (visibility == true && isUsingGlobalFilter) {
+            if (visibility == true && isGlobalFilter) {
                 this.setAllVisible(node.children);
             }
             else {
                 if (node.children) {
                     for (let i = 0; i < node.children.length; i++) {
-                        if (this.setNodeVisibility(node.children[i], filters, globalFilter, isUsingGlobalFilter, columns, columnFilters)) {
+                        if (this.setNodeVisibility(node.children[i], filters, globalFilter, isGlobalFilter, columns, columnFilters)) {
                             this.expandCollapseNode(node, true);
                             visibility = true;
                         }

package/dist/collection/utils/filters/filters.js

@@ -47,9 +47,9 @@ export class Filters {
         else if (dom.ketchup.objects.isTime(smeupObj)) {
             let manageSeconds = dom.ketchup.objects.isTimeWithSeconds(smeupObj);
             if (dom.ketchup.dates.isValidFormattedStringTime(value, manageSeconds)) {
-                return dom.ketchup.dates.formattedStringToCustomDateTime(value, manageSeconds
+                return dom.ketchup.dates.timeStringToFormattedString(value, manageSeconds, manageSeconds
                     ? KupDatesFormats.ISO_TIME
-                    : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS, manageSeconds);
+                    : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
             }
         }
         else if (dom.ketchup.objects.isTimestamp(smeupObj)) {
@@ -83,6 +83,7 @@ export class Filters {
      * Determines if a value matches a given filter.
      *
      * Filter expressions follow the format `[operator]'filter'` with these rules:
+     * - filter = includes match
      * - 'filter' = exact phrase match
      * - '' = matches empty value
      * - 'filter%' = starts with "filter"
@@ -98,15 +99,22 @@ export class Filters {
      * @param filterValue - Filter to apply
      * @returns Whether the value matches the filter
      */
-    isFilterCompliantForValue(value, filterValue) {
+    isFilterCompliantForValue(value, filterValue, isGlobalFilter) {
         if (value == null || filterValue == null) {
             return false;
         }
         // Split multiple filters and trim each one
         const filters = filterValue.split(';').map((f) => f.trim());
         // All filters must match (AND condition)
-        return filters.every((filter) => value.toLowerCase().includes(filter.toLowerCase()) ||
-            this.matchSpecialFilter(value.toLowerCase(), filter.toLowerCase().match(FILTER_ANALYZER)));
+        return filters.every((filter) => {
+            // if filter is '' it should be excluded since it is always included in every possible string and thus always leading to a match!
+            const valueIncludesFilter = isGlobalFilter
+                ? value.toLowerCase().includes(filter.toLowerCase()) &&
+                    filter !== ''
+                : value.toLowerCase() == filter.toLowerCase();
+            const valueMatchesSpecialFilter = this.matchSpecialFilter(value.toLowerCase(), filter.toLowerCase().match(FILTER_ANALYZER));
+            return valueIncludesFilter || valueMatchesSpecialFilter;
+        });
     }
     /**
      * Matches a value against a special filter parsed from a regex.
@@ -124,6 +132,7 @@ export class Filters {
      * - `%` at both: contains
      *
      * Examples:
+     * - `text`: includes match
      * - `'text'`: exact match
      * - `''`: matches empty
      * - `!''`: matches non-empty
@@ -195,7 +204,7 @@ export class Filters {
         }
         return result;
     }
-    isFilterCompliantForSimpleValue(valueToCheck, obj, filterValue) {
+    isFilterCompliantForSimpleValue(valueToCheck, obj, filterValue, isGlobalFilter) {
         if (valueToCheck == null) {
             return false;
         }
@@ -260,7 +269,7 @@ export class Filters {
                 const normValue = this.normalizeValue(value, obj);
                 let valueDate = null;
                 if (normValue != null) {
-                    valueDate = dom.ketchup.dates.toDate(value);
+                    valueDate = dom.ketchup.dates.toDate(value, defaultFormat);
                 }
                 if (filterMatch && valueDate) {
                     const [_, operator, _startWildcard, dateStr, _endWildcard] = filterMatch;
@@ -287,12 +296,13 @@ export class Filters {
                 // If we got here, we either don't have a valid filter pattern or date
                 // Format the value for string comparison
                 if (!dom.ketchup.dates.isValidFormattedStringDate(normalizedFilter, defaultFormat) &&
-                    !dom.ketchup.dates.isValidFormattedStringDate(normalizedFilter)) {
+                    !dom.ketchup.dates.isValidFormattedStringDate(normalizedFilter) &&
+                    !dom.ketchup.dates.isValidFormattedStringTime(value, dom.ketchup.objects.isTimeWithSeconds(obj))) {
                     value = dom.ketchup.dates.format(value);
                 }
             }
             if (checkByRegularExpression) {
-                return this.isFilterCompliantForValue(value, normalizedFilter);
+                return this.isFilterCompliantForValue(value, normalizedFilter, isGlobalFilter);
             }
             return true;
         });

package/dist/collection/utils/g-cell-style-generator.js

@@ -0,0 +1,188 @@
+const fixedStyle = {
+    '*BOLD': 'font-weight: bold; !important;',
+    '*ERROR': 'color: white !important; background: red !important;',
+    '*UNDERLINE': 'text-decoration: underline !important;',
+    '*ITALIC': 'font-style: italic !important;',
+};
+export function getGCellStyle(gCellId) {
+    const style = getGCellStyleAsString(gCellId);
+    const styleObj = style
+        .split(';')
+        .filter((s) => s.trim())
+        .reduce((acc, rule) => {
+        const [key, value] = rule.split(':').map((s) => s.trim());
+        if (key && value) {
+            const cleanValue = value.replace(/!important/g, '').trim();
+            const camelCaseKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+            acc[camelCaseKey] = cleanValue;
+        }
+        return acc;
+    }, {});
+    return styleObj;
+}
+export function getGCellStyleAsString(gCellId) {
+    const regexp = /\d{2}[A-Z0-9]\d{2}|\*(BOLD|ERROR|ITALIC|UNDERLINE)/;
+    let result = '';
+    if (gCellId === null || gCellId === void 0 ? void 0 : gCellId.match(regexp)) {
+        result = fixedStyle[gCellId];
+        if (!result) {
+            result = '';
+            for (let i = 0; i < gCellId.length; i++) {
+                switch (i) {
+                    case 0:
+                        // font color
+                        result += getFontColorCss(gCellId.charAt(i));
+                        break;
+                    case 1:
+                        // font decoration
+                        result += getFontDecorationCss(gCellId.charAt(i));
+                        break;
+                    case 2:
+                        // background color
+                        result += getBackgroundColorCss(gCellId.charAt(i));
+                        break;
+                    case 3:
+                        // font family
+                        result += getFontCss(gCellId.charAt(i));
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+    }
+    return result;
+}
+function getFontColorCss(c) {
+    let result;
+    switch (c) {
+        case '0':
+            result = 'color: #000000 !important;'; // black
+            break;
+        case '1':
+            result = 'color: #6C7A89 !important;'; // gray
+            break;
+        case '2':
+            result = 'color: #3A539B !important;'; // blue
+            break;
+        case '3':
+            result = 'color: var(--kup-danger-color-60) !important;'; // red
+            break;
+        case '4':
+            result = 'color: #C0C0C0 !important;'; // dark grey
+            break;
+        case '5':
+            result = 'color: #FFFFFF !important;'; // white
+            break;
+        case '6':
+            result = 'color: var(--kup-success-color-60) !important;'; // green
+            break;
+        case '7':
+            result = 'color: #9B59B6 !important;'; // purple
+            break;
+        default:
+            result = '';
+            break;
+    }
+    return result;
+}
+function getFontDecorationCss(c) {
+    let ris;
+    switch (c) {
+        case '1':
+            ris = 'font-weight: bold !important;';
+            break;
+        case '2':
+            ris = 'font-style: italic !important;';
+            break;
+        case '3':
+            ris = 'text-decoration: underline !important;';
+            break;
+        default:
+            ris = '';
+            break;
+    }
+    return ris;
+}
+function getBackgroundColorCss(c) {
+    let ris;
+    switch (c) {
+        case '0':
+            ris = `background: transparent;`;
+            break;
+        case '1':
+            ris = `background: #D5ECF7;`;
+            break;
+        case '2':
+            ris = `background: #59ABE3;`;
+            break;
+        case '3':
+            ris = `background: #446CB3;`;
+            break;
+        case '4':
+            ris = `background: #9B59B6;`;
+            break;
+        case '5':
+            ris = `background: #F1A9A0;`;
+            break;
+        case '6':
+            ris = `background: #E74C3C;`;
+            break;
+        case '7':
+            ris = `background: #CF000F;`;
+            break;
+        case '8':
+            ris = `background: #C0392B;`;
+            break;
+        case '9':
+            ris = `background: #95A5A6;`;
+            break;
+        case 'A':
+            ris = `background: #F5D76E;`;
+            break;
+        case 'B':
+            ris = `background: #F7CA18;`;
+            break;
+        case 'C':
+            ris = `background: #F7CA18;`;
+            break;
+        case 'D':
+            ris = `background: #F39C12;`;
+            break;
+        case 'E':
+            ris = `background: #90C695;`;
+            break;
+        case 'F':
+            ris = `background: #26A65B;`;
+            break;
+        case 'G':
+            ris = `background: #019875;`;
+            break;
+        case 'H':
+            ris = `background: #36D7B7;`;
+            break;
+        default:
+            ris = '';
+            break;
+    }
+    return ris;
+}
+function getFontCss(c) {
+    let ris;
+    switch (c) {
+        case '1':
+            ris = 'font-family: "Courier New", Courier, monospace !important;';
+            break;
+        case '2':
+            ris =
+                'font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;';
+            break;
+        case '3':
+            ris = 'font-family: Arial, Helvetica, sans-serif !important;';
+            break;
+        default:
+            ris = '';
+            break;
+    }
+    return ris;
+}

package/dist/collection/utils/kup-column-menu/kup-column-menu-declarations.js

@@ -15,6 +15,4 @@ export var KupColumnMenuIds;
     KupColumnMenuIds["SWITCH_KEY"] = "key";
     KupColumnMenuIds["TEXTFIELD_FILTER"] = "filter";
     KupColumnMenuIds["TEXTFIELD_FORMULA"] = "formula";
-    KupColumnMenuIds["TEXTFIELD_FROM"] = "filter-from";
-    KupColumnMenuIds["TEXTFIELD_TO"] = "filter-to";
 })(KupColumnMenuIds || (KupColumnMenuIds = {}));

package/dist/collection/utils/kup-column-menu/kup-column-menu.js

@@ -333,12 +333,13 @@ export class KupColumnMenu {
                     'data-storage': {
                         column: column,
                     },
-                    fullWidth: true,
+                    isClearable: true,
+                    size: 30,
+                    maxLength: 100,
+                    label: dom.ketchup.language.translate(KupLanguageSearch.SEARCH),
                     id: KupColumnMenuIds.TEXTFIELD_FILTER,
                     initialValue: filterInitialValue,
-                    isClearable: true,
                     key: KupColumnMenuIds.TEXTFIELD_FILTER + column.name,
-                    label: dom.ketchup.language.translate(KupLanguageSearch.SEARCH),
                     trailingIcon: true,
                 });
             }
@@ -378,13 +379,14 @@ export class KupColumnMenu {
             'data-storage': {
                 column: column,
             },
-            fullWidth: true,
             helperWhenFocused: true,
+            isClearable: true,
+            size: 30,
+            maxLength: 100,
+            label: dom.ketchup.language.translate(KupLanguageSearch.SEARCH),
             id: KupColumnMenuIds.TEXTFIELD_FILTER,
             key: KupColumnMenuIds.TEXTFIELD_FILTER + column.name,
             initialValue: filterInitialValue,
-            isClearable: true,
-            label: dom.ketchup.language.translate(KupLanguageSearch.SEARCH),
             trailingIcon: true,
         });
         return props;
@@ -415,7 +417,7 @@ export class KupColumnMenu {
                     helperWhenFocused: true,
                     isClearable: true,
                     size: 30,
-                    maxLength: 30,
+                    maxLength: 100,
                     label: dom.ketchup.language.translate(KupLanguageSearch.SEARCH),
                 },
             },
@@ -453,7 +455,7 @@ export class KupColumnMenu {
                     helperWhenFocused: true,
                     isClearable: true,
                     size: 30,
-                    maxLength: 30,
+                    maxLength: 100,
                     label: dom.ketchup.language.translate(KupLanguageSearch.SEARCH),
                 },
             },
@@ -515,8 +517,6 @@ export class KupColumnMenu {
             //#endregion
             //#region Filters handlers
             case KupColumnMenuIds.TEXTFIELD_FILTER:
-            case KupColumnMenuIds.TEXTFIELD_FROM:
-            case KupColumnMenuIds.TEXTFIELD_TO:
                 switch (compEvent.type) {
                     case 'kup-textfield-submit':
                     case 'kup-datepicker-textfieldsubmit':

package/dist/collection/utils/label-utils.js

@@ -0,0 +1,58 @@
+function parse(input, listener) {
+    const regex = /((_G\d{2}[A-Z0-9]\d{2}_|_G\*(BOLD|ERROR|ITALIC|UNDERLINE)_)|_n_)/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = regex.exec(input)) !== null) {
+        // Capture text before the match
+        if (match.index > lastIndex) {
+            listener.onContent(input.slice(lastIndex, match.index));
+        }
+        if (match[1] === '_n_') {
+            listener.onEndTag(match[1]);
+        }
+        else {
+            listener.onStartTag(match[2]);
+        }
+        lastIndex = regex.lastIndex;
+    }
+    // Capture remaining content
+    if (lastIndex < input.length) {
+        listener.onContent(input.slice(lastIndex));
+    }
+}
+export function getParsedElements(input) {
+    const elements = [];
+    let lastElement = null;
+    parse(input, {
+        onStartTag(tag) {
+            if (lastElement === null || lastElement === void 0 ? void 0 : lastElement.tag) {
+                lastElement.closed = true;
+            }
+            elements.push((lastElement = { tag: tag, content: '' }));
+        },
+        onEndTag(tag) {
+            if (!lastElement) {
+                elements.push((lastElement = { content: tag }));
+            }
+            else if (lastElement.tag) {
+                lastElement.closed = true;
+                lastElement = null;
+            }
+            else {
+                this.onContent(tag);
+            }
+        },
+        onContent(content) {
+            if (!lastElement) {
+                elements.push((lastElement = { content: content }));
+            }
+            else {
+                lastElement.content += content;
+            }
+        },
+    });
+    if (lastElement && lastElement.tag) {
+        lastElement.closed = true;
+    }
+    return elements;
+}

package/dist/collection/utils/utils.js

@@ -83,5 +83,5 @@ function escapeRegExp(s) {
  * @returns a promise which resolves after the given number of milliseconds
  */
 export function jestDelay(ms) {
-    return new Promise(res => setTimeout(res, ms));
+    return new Promise((res) => setTimeout(res, ms));
 }

package/dist/components/index.js

@@ -1,5 +1,5 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-2e5f2e07.js';
-import { K as KupManager } from './p-a3f73a90.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-ef8cbd35.js';
+import { K as KupManager } from './p-b304b91c.js';
 
 /** used for obtain a KupManager instance without a dom document (for UT)  */
 function newKupManager(init) {

package/dist/components/kup-accordion.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-2e5f2e07.js';
-import { k as kupManagerInstance, a as KupComponentSizing, g as getProps, s as setProps, b as KupThemeColorValues, c as KupThemeIconValues } from './p-a3f73a90.js';
-import { M as MDCRipple, F as FImage, c as componentWrapperId, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t } from './p-ef8026e9.js';
+import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-ef8cbd35.js';
+import { k as kupManagerInstance, a as KupComponentSizing, g as getProps, s as setProps, b as KupThemeColorValues, c as KupThemeIconValues } from './p-b304b91c.js';
+import { M as MDCRipple, F as FImage, c as componentWrapperId, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u } from './p-7d0f1f90.js';
 
 /**
  * Props of the kup-accordion component.
@@ -13,7 +13,7 @@ var KupAccordionProps;
     KupAccordionProps["ripple"] = "When enabled displays Material's ripple effect on item headers.";
 })(KupAccordionProps || (KupAccordionProps = {}));
 
-const kupAccordionCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_accordion_border_top_color:var(\n    --kup-accordion-border-top-color,\n    var(--kup-border-subtle)\n  );--kup_accordion_item_small_height:var(\n    --kup-accordion-item-small-height,\n    32px\n  );--kup_accordion_item_medium_height:var(\n    --kup-accordion-item-medium-height,\n    40px\n  );--kup_accordion_item_outline_color_active:var(\n    --kup-accordion-item-outline-color-focus,\n    var(--kup-border-interactive)\n  );--kup_accordion_item_large_height:var(\n    --kup-accordion-item-medium-height,\n    48px\n  );--kup_accordion_header_background_color:var(\n    --kup-accordion-header-background-color,\n    var(--kup-layer-0)\n  );--kup_accordion_header_background_color_hover:var(\n    --kup-accordion-header-background-color-hover,\n    var(--kup-layer-0-hover)\n  );--kup_accordion_header_padding:var(\n    --kup-accordion-header-padding,\n    var(--kup-space-05)\n  );--kup_accordion_dropdown_icon_color:var(\n    --kup-accordio-dropdown-icon-color,\n    var(--kup-text-primary)\n  );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{border-radius:var(--kup_accordion_border_radius);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-top:1px solid var(--kup_accordion_border_top_color);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:is(:last-of-type){border-bottom:1px solid var(--kup_accordion_border_top_color)}.accordion-item__header{height:var(--kup_accordion_item_medium_height);align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%;outline:2px solid transparent;outline-offset:-2px;padding-left:16px;padding-right:16px}.accordion-item__header:focus{outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header.accordion-item--small{height:var(--kup_accordion_item_small_height)}.accordion-item__header.accordion-item--large{height:var(--kup_accordion_item_large_height)}.accordion-item__header:hover:not(.accordion-item__header--selected){background-color:var(--kup_accordion_header_background_color_hover)}.accordion-item__header:focus(.accordion-item__header--selected){outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header--expanded{background-color:var(--kup_accordion_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup_accordion_dropdown_icon_color);height:1.5em;margin-left:auto;margin-right:0;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{padding-left:16px;padding-top:8px;padding-bottom:24px;padding-right:80px;animation:fade-in 0.25s ease-out;display:none;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color-60);--kup-accordion-primary-color-rgb:var(--kup-danger-color-60-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-50-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-50-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color-40);--kup-accordion-primary-color-rgb:var(--kup-success-color-40-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color-50);--kup-accordion-primary-color-rgb:var(--kup-warning-color-50-rgb);--kup-accordion-text-on-primary-color:white}";
+const kupAccordionCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_accordion_border_top_color:var(\n    --kup-accordion-border-top-color,\n    var(--kup-border-subtle)\n  );--kup_accordion_item_small_height:var(\n    --kup-accordion-item-small-height,\n    32px\n  );--kup_accordion_item_medium_height:var(\n    --kup-accordion-item-medium-height,\n    40px\n  );--kup_accordion_item_outline_color_active:var(\n    --kup-accordion-item-outline-color-focus,\n    var(--kup-border-interactive)\n  );--kup_accordion_item_large_height:var(\n    --kup-accordion-item-medium-height,\n    48px\n  );--kup_accordion_header_background_color:var(\n    --kup-accordion-header-background-color,\n    var(--kup-layer-0)\n  );--kup_accordion_header_background_color_hover:var(\n    --kup-accordion-header-background-color-hover,\n    var(--kup-layer-0-hover)\n  );--kup_accordion_header_padding:var(\n    --kup-accordion-header-padding,\n    var(--kup-space-05)\n  );--kup_accordion_dropdown_icon_color:var(\n    --kup-accordio-dropdown-icon-color,\n    var(--kup-text-primary)\n  );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{border-radius:var(--kup_accordion_border_radius);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-top:1px solid var(--kup_accordion_border_top_color);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:is(:last-of-type){border-bottom:1px solid var(--kup_accordion_border_top_color)}.accordion-item__header{height:var(--kup_accordion_item_medium_height);align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%;outline:2px solid transparent;outline-offset:-2px;padding-left:16px;padding-right:16px}.accordion-item__header:focus{outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header.accordion-item--small{height:var(--kup_accordion_item_small_height)}.accordion-item__header.accordion-item--large{height:var(--kup_accordion_item_large_height)}.accordion-item__header:hover:not(.accordion-item__header--selected){background-color:var(--kup_accordion_header_background_color_hover)}.accordion-item__header:focus(.accordion-item__header--selected){outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header--expanded{background-color:var(--kup_accordion_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup_accordion_dropdown_icon_color);height:1.5em;margin-left:auto;margin-right:0;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{padding-left:16px;padding-top:8px;padding-bottom:24px;padding-right:80px;animation:fade-in 0.25s ease-out;display:none;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color-60);--kup-accordion-primary-color-rgb:var(--kup-danger-color-60-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-50-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-50-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color-40);--kup-accordion-primary-color-rgb:var(--kup-success-color-40-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color-50);--kup-accordion-primary-color-rgb:var(--kup-warning-color-50-rgb);--kup-accordion-text-on-primary-color:white}";
 const KupAccordionStyle0 = kupAccordionCss;
 
 const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion extends H {
@@ -224,7 +224,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["kup-accordion", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-toolbar", "kup-tree"];
+    const components = ["kup-accordion", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-file-upload", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-toolbar", "kup-tree"];
     components.forEach(tagName => { switch (tagName) {
         case "kup-accordion":
             if (!customElements.get(tagName)) {
@@ -233,70 +233,75 @@ function defineCustomElement$1() {
             break;
         case "kup-autocomplete":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "kup-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "kup-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "kup-button-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "kup-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "kup-chart":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "kup-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "kup-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "kup-color-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "kup-combobox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "kup-data-table":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "kup-date-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "kup-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "kup-dropdown-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "kup-file-upload":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }