@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/esm/kup-manager-e7d7b353.js

@@ -1,4842 +0,0 @@
-import { d as createCommonjsModule, K as KupDates, c as KupObjects, e as KupDatesLocales } from './kup-objects-d38d2fa2.js';
-import { g as getAssetPath } from './index-bf2824a6.js';
-
-/**
- * Category of debug logs.
- */
-var KupDebugCategory;
-(function (KupDebugCategory) {
-  KupDebugCategory["INFO"] = "Informational";
-  KupDebugCategory["WARNING"] = "Warning";
-  KupDebugCategory["ERROR"] = "Error";
-})(KupDebugCategory || (KupDebugCategory = {}));
-/**
- * Colors associated with every type of log to be printed.
- */
-var KupDebugLogColor;
-(function (KupDebugLogColor) {
-  KupDebugLogColor["Load"] = "green";
-  KupDebugLogColor["Render"] = "green";
-  KupDebugLogColor["Resize"] = "green";
-  KupDebugLogColor["Misc"] = "blue";
-  KupDebugLogColor["Total"] = "teal";
-})(KupDebugLogColor || (KupDebugLogColor = {}));
-
-/**
- * HTML attribute attached to dynamically positioned elements.
- */
-const kupDynamicPositionAttribute = 'kup-dynamic-position';
-/**
- * HTML attribute attached to dynamically positioned elements' anchor point.
- */
-const kupDynamicPositionAnchorAttribute = 'kup-dynamic-position-anchor';
-/**
- * CSS class attached to dynamically positioned elements when the script is running.
- */
-const kupDynamicPositionActiveClass = 'kup-dynamic-position-active';
-/**
- * Available placements.
- */
-var KupDynamicPositionPlacement;
-(function (KupDynamicPositionPlacement) {
-  KupDynamicPositionPlacement["AUTO"] = "";
-  KupDynamicPositionPlacement["BOTTOM"] = "b";
-  KupDynamicPositionPlacement["BOTTOM_LEFT"] = "bl";
-  KupDynamicPositionPlacement["BOTTOM_RIGHT"] = "br";
-  KupDynamicPositionPlacement["LEFT"] = "l";
-  KupDynamicPositionPlacement["RIGHT"] = "r";
-  KupDynamicPositionPlacement["TOP"] = "t";
-  KupDynamicPositionPlacement["TOP_LEFT"] = "tl";
-  KupDynamicPositionPlacement["TOP_RIGHT"] = "tr";
-})(KupDynamicPositionPlacement || (KupDynamicPositionPlacement = {}));
-
-/**
- * Props of the kup-card component.
- * Used to export every prop in an object.
- */
-var KupCardProps;
-(function (KupCardProps) {
-  KupCardProps["customStyle"] = "Custom style of the component.";
-  KupCardProps["data"] = "The actual data of the card.";
-  KupCardProps["isMenu"] = "Defines whether the card is a menu or not. Works together with menuVisible.";
-  KupCardProps["layoutFamily"] = "Sets the type of the card.";
-  KupCardProps["layoutNumber"] = "Sets the number of the layout.";
-  KupCardProps["menuVisible"] = "Sets the status of the card as menu, when false it's hidden otherwise it's visible. Works together with isMenu.";
-  KupCardProps["sizeX"] = "The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).";
-  KupCardProps["sizeY"] = "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).";
-})(KupCardProps || (KupCardProps = {}));
-/**
- * Layout families of the kup-card component.
- * @enum {string}
- * @property {string} COLLAPSIBLE - Cards belonging to this family will display an area usable to expand the content of the card.
- * @property {string} SCALABLE - Content will fit its container, resizing itself automatically.
- * @property {string} STANDARD - Stndard layouts.
- */
-var KupCardFamily;
-(function (KupCardFamily) {
-  KupCardFamily["COLLAPSIBLE"] = "collapsible";
-  KupCardFamily["DIALOG"] = "dialog";
-  KupCardFamily["SCALABLE"] = "scalable";
-  KupCardFamily["STANDARD"] = "standard";
-})(KupCardFamily || (KupCardFamily = {}));
-/**
- * Recurring IDs.
- */
-var KupCardIds;
-(function (KupCardIds) {
-  KupCardIds["COLUMNS_LIST"] = "columns-list";
-  KupCardIds["DIALOG_CLOSE"] = "dialog-close";
-  KupCardIds["DRAG_HANDLE"] = "drag-handle";
-  KupCardIds["EXPAND_ACTION"] = "expand-action";
-  KupCardIds["EXTRA_COLUMNS"] = "extra-columns";
-  KupCardIds["NEXT_ROW"] = "next-row";
-  KupCardIds["OBJECT_CHANGE"] = "object-change";
-  KupCardIds["PREVIOUS_ROW"] = "previous-row";
-  KupCardIds["VIEW_SELECTOR"] = "view-selector";
-})(KupCardIds || (KupCardIds = {}));
-/**
- * Recurring CSS classes.
- */
-var KupCardCSSClasses;
-(function (KupCardCSSClasses) {
-  KupCardCSSClasses["CARD_VIEW"] = "card-view";
-  KupCardCSSClasses["CLICKABLE_LINK"] = "clickable-link";
-  KupCardCSSClasses["COLLAPSIBLE_ACTIVE"] = "collapsible-active";
-  KupCardCSSClasses["COLLAPSIBLE_CARD"] = "collapsible-card";
-  KupCardCSSClasses["COLLAPSIBLE_ELEMENT"] = "collapsible-element";
-  KupCardCSSClasses["COLLAPSIBLE_WRAPPER"] = "collapsible-wrapper";
-  KupCardCSSClasses["DIALOG_TITLE"] = "dialog-title";
-  KupCardCSSClasses["DIALOG_UNRESIZABLE"] = "dialog-unresizable";
-  KupCardCSSClasses["EXPANDED"] = "expanded";
-  KupCardCSSClasses["HAS_ACTIONS"] = "has-actions";
-  KupCardCSSClasses["HAS_CONTENT"] = "has-content";
-  KupCardCSSClasses["HEADER_BAR"] = "header-bar";
-  KupCardCSSClasses["VIEW_PREFIX"] = "view-";
-  KupCardCSSClasses["VISIBLE"] = "visible";
-})(KupCardCSSClasses || (KupCardCSSClasses = {}));
-/**
- * Internally-handled sub-component events.
- */
-var KupCardSubEvents;
-(function (KupCardSubEvents) {
-  KupCardSubEvents["AUTOCOMPLETE_BLUR"] = "kup-autocomplete-blur";
-  KupCardSubEvents["AUTOCOMPLETE_ITEMCLICK"] = "kup-autocomplete-itemclick";
-  KupCardSubEvents["BUTTON_CLICK"] = "kup-button-click";
-  KupCardSubEvents["CHIP_BLUR"] = "kup-chip-blur";
-  KupCardSubEvents["CHIP_ICONCLICK"] = "kup-chip-iconclick";
-  KupCardSubEvents["TABBAR_CLICK"] = "kup-tabbar-click";
-  KupCardSubEvents["TREE_NODESELECTED"] = "kup-tree-nodeselected";
-})(KupCardSubEvents || (KupCardSubEvents = {}));
-
-/**
- * Default languages available.
- */
-var KupLanguageDefaults;
-(function (KupLanguageDefaults) {
-  KupLanguageDefaults["cn"] = "chinese";
-  KupLanguageDefaults["en"] = "english";
-  KupLanguageDefaults["es"] = "spanish";
-  KupLanguageDefaults["it"] = "italian";
-  KupLanguageDefaults["fr"] = "french";
-  KupLanguageDefaults["pl"] = "polish";
-  KupLanguageDefaults["ru"] = "russian";
-})(KupLanguageDefaults || (KupLanguageDefaults = {}));
-/**
- * Checkbox statuses decodes.
- */
-var KupLanguageCheckbox;
-(function (KupLanguageCheckbox) {
-  KupLanguageCheckbox["ALL"] = "checkboxAll";
-  KupLanguageCheckbox["CHECKED"] = "checkboxChecked";
-  KupLanguageCheckbox["INDETERMINATE"] = "checkboxIndeterminate";
-  KupLanguageCheckbox["UNCHECKED"] = "checkboxUnchecked";
-})(KupLanguageCheckbox || (KupLanguageCheckbox = {}));
-/**
- * Column related decodes.
- */
-var KupLanguageColumn;
-(function (KupLanguageColumn) {
-  KupLanguageColumn["ADD"] = "columnAdd";
-  KupLanguageColumn["ADD_DESCRIPTION"] = "columnAddDescription";
-  KupLanguageColumn["COLUMNS"] = "columnColumns";
-  KupLanguageColumn["HIDE"] = "columnHide";
-})(KupLanguageColumn || (KupLanguageColumn = {}));
-/**
- * Debug widget decodes.
- */
-var KupLanguageDebug;
-(function (KupLanguageDebug) {
-  KupLanguageDebug["AUTOPRINT"] = "debugAutoprint";
-  KupLanguageDebug["CLEAR"] = "debugClear";
-  KupLanguageDebug["DUMP"] = "debugDump";
-  KupLanguageDebug["DL_ALL"] = "debugDLAll";
-  KupLanguageDebug["DL_PROPS"] = "debugDLProps";
-  KupLanguageDebug["DL_PROPS_COMP"] = "debugDLPropsComp";
-  KupLanguageDebug["LANGUAGE_CHANGER"] = "debugLanguageChanger";
-  KupLanguageDebug["LOG_LIMIT"] = "debugLogLimit";
-  KupLanguageDebug["MAGIC_BOX"] = "debugMagicBox";
-  KupLanguageDebug["OFF"] = "debugOff";
-  KupLanguageDebug["PRINT"] = "debugPrint";
-  KupLanguageDebug["THEME_CHANGER"] = "debugThemeChanger";
-})(KupLanguageDebug || (KupLanguageDebug = {}));
-/**
- * Density decodes (data table customization settings).
- */
-var KupLanguageDensity;
-(function (KupLanguageDensity) {
-  KupLanguageDensity["DENSE"] = "densityDense";
-  KupLanguageDensity["LABEL"] = "densityLabel";
-  KupLanguageDensity["MEDIUM"] = "densityMedium";
-  KupLanguageDensity["WIDE"] = "densityWide";
-})(KupLanguageDensity || (KupLanguageDensity = {}));
-/**
- * Font size decodes (data table customization settings).
- */
-var KupLanguageFontsize;
-(function (KupLanguageFontsize) {
-  KupLanguageFontsize["BIG"] = "fontsizeBig";
-  KupLanguageFontsize["LABEL"] = "fontsizeLabel";
-  KupLanguageFontsize["MEDIUM"] = "fontsizeMedium";
-  KupLanguageFontsize["SMALL"] = "fontsizeSmall";
-})(KupLanguageFontsize || (KupLanguageFontsize = {}));
-/**
- * Generic user interface action/messages.
- */
-var KupLanguageGeneric;
-(function (KupLanguageGeneric) {
-  KupLanguageGeneric["ADD_NEW"] = "genericAddNew";
-  KupLanguageGeneric["APPLY"] = "genericApply";
-  KupLanguageGeneric["COLLAPSE"] = "genericCollapse";
-  KupLanguageGeneric["DAY"] = "genericDay";
-  KupLanguageGeneric["DRAG_AND_DROP"] = "genericDragAndDrop";
-  KupLanguageGeneric["DROP_YOUR_DATA"] = "genericDropYourData";
-  KupLanguageGeneric["EDITABLE"] = "genericEditable";
-  KupLanguageGeneric["EDITABLE_FIELD"] = "genericEditableField";
-  KupLanguageGeneric["EMPTY_DATA"] = "genericEmptyData";
-  KupLanguageGeneric["EXPAND"] = "genericExpand";
-  KupLanguageGeneric["EXPERIMENTAL_FEAT"] = "genericExperimentalFeat";
-  KupLanguageGeneric["FILTERS"] = "genericFilters";
-  KupLanguageGeneric["INFO"] = "genericInfo";
-  KupLanguageGeneric["INVALID_COLOR"] = "genericInvalidColor";
-  KupLanguageGeneric["LAYOUT_NYI"] = "genericLayoutNotYetImplemented";
-  KupLanguageGeneric["LIST"] = "genericList";
-  KupLanguageGeneric["LOAD_MORE"] = "genericLoadMoreData";
-  KupLanguageGeneric["MENU"] = "genericMenu";
-  KupLanguageGeneric["MONTH"] = "genericMonth";
-  KupLanguageGeneric["NEXT"] = "genericNext";
-  KupLanguageGeneric["OPEN_NAVIGATION_MENU"] = "genericOpenNavigationMenu";
-  KupLanguageGeneric["OPEN_IN_NEW_TAB"] = "genericOpenInNewTab";
-  KupLanguageGeneric["OPEN_IN_NEW_WINDOW"] = "genericOpenInNewWindow";
-  KupLanguageGeneric["OPTIONS"] = "genericOptions";
-  KupLanguageGeneric["PREVIOUS"] = "genericPrevious";
-  KupLanguageGeneric["REMOVE_FILTERS"] = "genericRemoveFilters";
-  KupLanguageGeneric["SETTINGS"] = "genericSettings";
-  KupLanguageGeneric["SHOW_ROW_OPTIONS"] = "genericShowRowOptions";
-  KupLanguageGeneric["SHOW_TOOLTIP_INFO"] = "genericShowTooltipInfo";
-  KupLanguageGeneric["SORT_BY"] = "genericSortBy";
-  KupLanguageGeneric["TOGGLE"] = "genericToggle";
-  KupLanguageGeneric["TODAY"] = "genericToday";
-  KupLanguageGeneric["TOTALS_TABLE"] = "genericTotalsTable";
-  KupLanguageGeneric["TRANSPOSE_DATA"] = "genericTransposeData";
-  KupLanguageGeneric["VIEW_AS"] = "genericViewAs";
-  KupLanguageGeneric["WEEK"] = "genericWeek";
-})(KupLanguageGeneric || (KupLanguageGeneric = {}));
-/**
- * Grid decodes (data table customization settings).
- */
-var KupLanguageGrid;
-(function (KupLanguageGrid) {
-  KupLanguageGrid["COLUMN"] = "gridColumn";
-  KupLanguageGrid["COMPLETE"] = "gridComplete";
-  KupLanguageGrid["LABEL"] = "gridLabel";
-  KupLanguageGrid["NONE"] = "gridNone";
-  KupLanguageGrid["ROW"] = "gridRow";
-})(KupLanguageGrid || (KupLanguageGrid = {}));
-/**
- * Grouping decodes (data table groups).
- */
-var KupLanguageGrouping;
-(function (KupLanguageGrouping) {
-  KupLanguageGrouping["DISABLE"] = "groupingDisable";
-  KupLanguageGrouping["ENABLE"] = "groupingEnable";
-  KupLanguageGrouping["GROUPS"] = "groupingGroups";
-})(KupLanguageGrouping || (KupLanguageGrouping = {}));
-/**
- * Page related decodes.
- */
-var KupLanguagePage;
-(function (KupLanguagePage) {
-  KupLanguagePage["PAGE"] = "pagePage";
-  KupLanguagePage["TOTAL"] = "pageTotal";
-})(KupLanguagePage || (KupLanguagePage = {}));
-/**
- * Row related decodes.
- */
-var KupLanguageRow;
-(function (KupLanguageRow) {
-  KupLanguageRow["DETAIL"] = "rowDetail";
-  KupLanguageRow["EDITABLE_KEY"] = "rowEditableKey";
-  KupLanguageRow["KEY"] = "rowKey";
-  KupLanguageRow["NEXT"] = "rowNext";
-  KupLanguageRow["PREVIOUS"] = "rowPrevious";
-  KupLanguageRow["RENDERED"] = "rowRendered";
-  KupLanguageRow["ROWS"] = "rowRows";
-  KupLanguageRow["SELECTED"] = "rowSelected";
-  KupLanguageRow["TOTAL"] = "rowTotal";
-})(KupLanguageRow || (KupLanguageRow = {}));
-/**
- * Search decodes.
- */
-var KupLanguageSearch;
-(function (KupLanguageSearch) {
-  KupLanguageSearch["FROM"] = "searchFrom";
-  KupLanguageSearch["SEARCH"] = "searchSearch";
-  KupLanguageSearch["TO"] = "searchTo";
-})(KupLanguageSearch || (KupLanguageSearch = {}));
-/**
- * Footer totals decodes (tree and data table).
- */
-var KupLanguageTotals;
-(function (KupLanguageTotals) {
-  KupLanguageTotals["AVERAGE"] = "totalsAverage";
-  KupLanguageTotals["CALCULATE"] = "totalsCalculate";
-  KupLanguageTotals["CANCEL"] = "totalsCancel";
-  KupLanguageTotals["COUNT"] = "totalsCount";
-  KupLanguageTotals["DISTINCT"] = "totalsDistinct";
-  KupLanguageTotals["FORMULA"] = "totalsFormula";
-  KupLanguageTotals["MAXIMUM"] = "totalsMaximum";
-  KupLanguageTotals["MINIMUM"] = "totalsMinimum";
-  KupLanguageTotals["SUM"] = "totalsSum";
-})(KupLanguageTotals || (KupLanguageTotals = {}));
-
-var __classPrivateFieldSet$3 = (undefined && undefined.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
-};
-var __classPrivateFieldGet$3 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
-};
-var _debugWidget;
-const dom$7 = document.documentElement;
-/**
- * Debugging suite, used to log messages and statuses from the Ketch.UP components.
- * @module KupDebug
- */
-class KupDebug {
-  /**
-   * Initializes KupDebug.
-   * @param {boolean} active - When true, the debug is active on initialization.
-   * @param {boolean} autoprint - When true, logs will be automatically printed inside the debug widget.
-   * @param {number} logLimit - Maximum amount of logs stored, when they exceed the number specified in logLimit the cache will be automatically cleared.
-   */
-  constructor(active, autoprint, logLimit) {
-    _debugWidget.set(this, void 0);
-    this.active = active ? true : false;
-    this.autoPrint = autoprint ? true : false;
-    this.container = document.createElement('div');
-    this.container.setAttribute('kup-debug', '');
-    document.body.appendChild(this.container);
-    this.logLimit = logLimit ? logLimit : 250;
-    this.logs = [];
-    __classPrivateFieldSet$3(this, _debugWidget, null);
-    document.addEventListener('kup-language-change', () => {
-      if (this.active && __classPrivateFieldGet$3(this, _debugWidget)) {
-        this.hideWidget();
-        this.showWidget();
-      }
-    });
-  }
-  /**
-   * Allows the download of props by creating a temporary clickable anchor element.
-   */
-  downloadProps(res) {
-    const dataStr = 'data:text/json;charset=utf-8,' +
-      encodeURIComponent(JSON.stringify(res, null, 2));
-    const downloadAnchorNode = document.createElement('a');
-    downloadAnchorNode.setAttribute('href', dataStr);
-    downloadAnchorNode.setAttribute('download', 'kup_props.json');
-    this.container.appendChild(downloadAnchorNode);
-    downloadAnchorNode.click();
-    downloadAnchorNode.remove();
-  }
-  /**
-   * Creates the debug widget.
-   */
-  showWidget() {
-    const debugWidget = document.createElement('kup-card');
-    const languages = dom$7.ketchup.language.getLanguages();
-    const languagesListData = [];
-    for (let index = 0; index < languages.length; index++) {
-      languagesListData.push({
-        text: languages[index],
-        value: languages[index],
-        selected: languages[index] === dom$7.ketchup.language.name
-          ? true
-          : false,
-      });
-    }
-    const themes = dom$7.ketchup.theme.getThemes();
-    const themesListData = [];
-    for (let index = 0; index < themes.length; index++) {
-      themesListData.push({
-        text: themes[index],
-        value: themes[index],
-        selected: themes[index] === dom$7.ketchup.theme.name ? true : false,
-      });
-    }
-    debugWidget.data = {
-      button: [
-        {
-          icon: 'power_settings_new',
-          id: 'kup-debug-off',
-          customStyle: ':host {--kup-font-size: 0.875em; border-left: 1px solid var(--kup-border-color); border-right: 1px solid var(--kup-border-color);}',
-          title: dom$7.ketchup.language.translate(KupLanguageDebug.OFF),
-        },
-        {
-          customStyle: ':host {--kup-font-size: 0.875em;}',
-          icon: 'print',
-          id: 'kup-debug-print',
-          title: dom$7.ketchup.language.translate(KupLanguageDebug.PRINT),
-        },
-        {
-          checked: this.autoPrint,
-          customStyle: ':host {--kup-font-size: 0.875em; border-right: 1px solid var(--kup-border-color);}',
-          icon: 'speaker_notes',
-          iconOff: 'speaker_notes_off',
-          id: 'kup-debug-autoprint',
-          title: dom$7.ketchup.language.translate(KupLanguageDebug.AUTOPRINT),
-          toggable: true,
-        },
-        {
-          customStyle: ':host {--kup-font-size: 0.875em;}',
-          icon: 'broom',
-          id: 'kup-debug-clear',
-          title: dom$7.ketchup.language.translate(KupLanguageDebug.CLEAR),
-        },
-        {
-          customStyle: ':host {--kup-font-size: 0.875em;}',
-          icon: 'delete',
-          id: 'kup-debug-delete',
-          title: dom$7.ketchup.language.translate(KupLanguageDebug.DUMP),
-        },
-        {
-          className: 'kup-full-height',
-          customStyle: ':host {border-left: 1px solid var(--kup-border-color);}',
-          icon: 'download',
-          id: 'kup-debug-dl-props',
-          label: 'Props',
-          styling: 'flat',
-          title: dom$7.ketchup.language.translate(KupLanguageDebug.DL_PROPS),
-        },
-        {
-          className: 'kup-full-height',
-          customStyle: ':host {border-right: 1px solid var(--kup-border-color);}',
-          icon: 'download',
-          id: 'kup-debug-dl-all',
-          label: dom$7.ketchup.language.translate(KupLanguageDebug.DL_ALL),
-          styling: 'flat',
-          title: dom$7.ketchup.language.translate(KupLanguageDebug.DL_ALL),
-        },
-        {
-          customStyle: ':host {--kup-font-size: 0.875em;}',
-          icon: 'auto-fix',
-          id: 'kup-debug-magic-box',
-          title: dom$7.ketchup.language.translate(KupLanguageDebug.MAGIC_BOX),
-        },
-      ],
-      combobox: [
-        {
-          className: 'kup-full-height',
-          data: {
-            'kup-list': {
-              data: themesListData,
-              id: 'kup-debug-theme-changer-list',
-            },
-            'kup-text-field': {
-              className: 'kup-full-height',
-              emitSubmitEventOnEnter: false,
-              inputType: 'text',
-              label: dom$7.ketchup.language.translate(KupLanguageDebug.THEME_CHANGER),
-            },
-          },
-          id: 'kup-debug-theme-changer',
-          initialValue: dom$7.ketchup.theme.name,
-          isSelect: true,
-        },
-        {
-          className: 'kup-full-height',
-          data: {
-            'kup-list': {
-              data: languagesListData,
-              id: 'kup-debug-language-changer-list',
-            },
-            'kup-text-field': {
-              className: 'kup-full-height',
-              emitSubmitEventOnEnter: false,
-              inputType: 'text',
-              label: dom$7.ketchup.language.translate(KupLanguageDebug.LANGUAGE_CHANGER),
-            },
-          },
-          id: 'kup-debug-language-changer',
-          initialValue: dom$7.ketchup.language.name,
-          isSelect: true,
-        },
-      ],
-      textfield: [
-        {
-          className: 'kup-full-height',
-          id: 'kup-debug-log-limit',
-          label: dom$7.ketchup.language.translate(KupLanguageDebug.LOG_LIMIT),
-          initialValue: this.logLimit,
-          emitSubmitEventOnEnter: false,
-          inputType: 'number',
-        },
-      ],
-    };
-    debugWidget.customStyle =
-      '#kup-debug-log-limit {width: 120px;} #kup-debug-theme-changer {width: 190px;} #kup-debug-language-changer {width: 190px;}';
-    debugWidget.id = 'kup-debug-widget';
-    debugWidget.layoutFamily = KupCardFamily.DIALOG;
-    debugWidget.layoutNumber = 3;
-    debugWidget.sizeX = 'auto';
-    debugWidget.sizeY = 'auto';
-    debugWidget.addEventListener('kup-card-event', (e) => this.handleEvents(e));
-    this.container.append(debugWidget);
-    __classPrivateFieldSet$3(this, _debugWidget, debugWidget);
-  }
-  /**
-   * Closes the debug widget.
-   */
-  hideWidget() {
-    __classPrivateFieldGet$3(this, _debugWidget).remove();
-    __classPrivateFieldSet$3(this, _debugWidget, null);
-  }
-  /**
-   * Clears all the printed logs inside the debug widget.
-   */
-  widgetClear() {
-    const children = Array.prototype.slice.call(__classPrivateFieldGet$3(this, _debugWidget).children, 0);
-    for (let index = 0; index < children.length; index++) {
-      children[index].remove();
-    }
-  }
-  /**
-   * Prints the stored logs inside the debug widget.
-   */
-  widgetPrint() {
-    const slots = [];
-    for (let index = 0; index < this.logs.length; index++) {
-      // Wrapper div
-      const slot = document.createElement('div');
-      slot.classList.add('text');
-      switch (this.logs[index].category) {
-        case KupDebugCategory.ERROR:
-          slot.style.backgroundColor =
-            'rgba(var(--kup-danger-color-rgb), 0.15)';
-          slot.style.borderLeft = '5px solid var(--kup-danger-color)';
-          break;
-        case KupDebugCategory.WARNING:
-          slot.style.backgroundColor =
-            'rgba(var(--kup-warning-color-rgb), 0.15)';
-          slot.style.borderLeft =
-            '5px solid var(--kup-warning-color)';
-          break;
-        case KupDebugCategory.INFO:
-        default:
-          slot.style.borderLeft = '5px solid var(--kup-info-color)';
-          break;
-      }
-      // If the log is tied to a KupComponent, on click its props will be downloaded.
-      // Also, a different style will be applied to distinguish it between the others.
-      if (typeof this.logs[index].element == 'object') {
-        slot.title = dom$7.ketchup.language.translate(KupLanguageDebug.DL_PROPS_COMP);
-        slot.style.fontWeight = 'bold';
-        slot.style.cursor = 'pointer';
-        slot.onclick = () => {
-          try {
-            this.logs[index].element
-              .getProps()
-              .then((res) => {
-              this.downloadProps(res);
-            });
-          }
-          catch (err) {
-            this.logMessage('kup-debug', err, KupDebugCategory.WARNING);
-          }
-        };
-      }
-      // ID span
-      const id = document.createElement('span');
-      id.innerHTML = this.logs[index].id;
-      id.style.opacity = '0.75';
-      id.style.marginLeft = '5px';
-      // Message span
-      const message = document.createElement('span');
-      message.innerHTML = this.logs[index].message;
-      // Append elements
-      slot.append(id, message);
-      slots.push(slot);
-    }
-    slots.reverse();
-    for (let index = 0; index < slots.length; index++) {
-      __classPrivateFieldGet$3(this, _debugWidget).append(slots[index]);
-    }
-  }
-  /**
-   * Dumps the stored logs.
-   */
-  dump() {
-    this.logs = [];
-  }
-  /**
-   * Displays a table with debug information inside the browser's console.
-   */
-  print() {
-    let printLog = {};
-    for (let index = 0; index < this.logs.length; index++) {
-      const type = this.logs[index].message.indexOf('Render #') > -1
-        ? 'Render'
-        : this.logs[index].message.indexOf('Component ready') > -1
-          ? 'Load'
-          : this.logs[index].message.indexOf('Size changed') > -1
-            ? 'Resize'
-            : 'Misc';
-      const isComponent = !!this.logs[index]
-        .element;
-      if (!printLog[type]) {
-        printLog[type] = [];
-      }
-      printLog[type].push({
-        date: this.formatDate(this.logs[index].date),
-        element: isComponent
-          ? this.logs[index].element
-          : this.logs[index].id,
-        message: isComponent
-          ? this.logs[index].id + this.logs[index].message
-          : this.logs[index].message,
-      });
-    }
-    for (const key in printLog) {
-      if (Object.prototype.hasOwnProperty.call(printLog, key)) {
-        console.groupCollapsed('%c  %c' +
-          key +
-          ' logs ' +
-          '(' +
-          printLog[key].length +
-          ')', 'background-color: ' +
-          KupDebugLogColor[key] +
-          '; margin-right: 10px; border-radius: 50%', 'background-color: transparent');
-        for (let index = 0; index < printLog[key].length; index++) {
-          console.log(printLog[key][index].date, printLog[key][index].message, printLog[key][index].element);
-        }
-        console.groupEnd();
-      }
-    }
-    if (this.logs.length > 0) {
-      console.groupCollapsed('%c  %c' + 'All logs (' + this.logs.length + ')', 'background-color: ' +
-        KupDebugLogColor['Total'] +
-        '; margin-right: 10px; border-radius: 50%', 'background-color: transparent');
-      console.table(this.logs);
-      console.groupEnd();
-    }
-  }
-  /**
-   * Function used to set the status of the debug.
-   * If no argument is provided, this method will work as a toggler.
-   * @param {boolean} value - If this argument is provided, the debug status will be forced to its value.
-   */
-  toggle(value) {
-    if (typeof value !== 'boolean') {
-      this.active = !this.active;
-    }
-    else {
-      this.active = value;
-    }
-    if (this.active) {
-      document.dispatchEvent(new CustomEvent('kup-debug-active'));
-      if (!__classPrivateFieldGet$3(this, _debugWidget)) {
-        this.showWidget();
-      }
-    }
-    else {
-      document.dispatchEvent(new CustomEvent('kup-debug-inactive'));
-      if (__classPrivateFieldGet$3(this, _debugWidget)) {
-        this.hideWidget();
-      }
-    }
-  }
-  /**
-   * Listens the card events and handles the related actions.
-   * @param {CustomEvent} e - kup-card-event.
-   */
-  handleEvents(e) {
-    const compEvent = e.detail.event;
-    const compID = compEvent.detail.id;
-    switch (compEvent.type) {
-      case 'kup-button-click':
-        switch (compID) {
-          case 'kup-debug-autoprint':
-            this.autoPrint = !this.autoPrint;
-            break;
-          case 'kup-debug-clear':
-            this.widgetClear();
-            __classPrivateFieldGet$3(this, _debugWidget).refresh();
-            break;
-          case 'kup-debug-dl-props':
-            this.getProps().then((res) => {
-              this.downloadProps(res);
-            });
-            break;
-          case 'kup-debug-dl-all':
-            this.getProps(true).then((res) => {
-              this.downloadProps(res);
-            });
-            break;
-          case 'kup-debug-delete':
-            this.dump();
-            break;
-          case 'kup-debug-magic-box':
-            dom$7.ketchup.toggleMagicBox();
-            break;
-          case 'kup-debug-off':
-            this.toggle();
-            break;
-          case 'kup-debug-print':
-            this.widgetClear();
-            this.widgetPrint();
-            __classPrivateFieldGet$3(this, _debugWidget).refresh();
-            break;
-        }
-        break;
-      case 'kup-combobox-itemclick':
-        switch (compID) {
-          case 'kup-debug-language-changer':
-            dom$7.ketchup.language.set(compEvent.detail.value);
-            break;
-          case 'kup-debug-theme-changer':
-            dom$7.ketchup.theme.set(compEvent.detail.value);
-            break;
-        }
-      case 'kup-textfield-input':
-        switch (compID) {
-          case 'kup-debug-log-limit':
-            if (compEvent.detail.value === '' ||
-              compEvent.detail.value < 1) {
-              this.logLimit = 1;
-            }
-            else {
-              this.logLimit = compEvent.detail.value;
-            }
-            break;
-        }
-    }
-  }
-  /**
-   * Function used to check whether the debug is active or not.
-   * If kupDebug on documentElement's type is not a boolean, it will be set to false.
-   * @returns {boolean} Status of the debug.
-   */
-  isDebug() {
-    return this.active;
-  }
-  /**
-   * Retrieves the information for every component in this.logs by invoking the getProps public method of each component.
-   * 'tag' will contain the props of the component's html tag (i.e.: <kup-chip>).
-   * 'props' will contain the developer defined props of the component, making it handy for test purposes.
-   * @param {boolean} detail - If provided and true, the returned object will contain additional information (i.e.: className, id).
-   * @returns {GenericObject} Props of the components.
-   */
-  async getProps(detail) {
-    let comps = new Set();
-    let props = detail ? { descriptions: {} } : {};
-    // Storing unique components inside "comps"
-    for (let index = 0; index < this.logs.length; index++) {
-      if (typeof this.logs[index].element !== 'string') {
-        if (!comps.has(this.logs[index].element)) {
-          comps.add(this.logs[index].element);
-        }
-      }
-    }
-    // Object of two arrays, positionally matching each other.
-    // One contains components, the other the relative promise.
-    const matchingObject = {
-      comps: [],
-      promises: [],
-    };
-    comps.forEach((el) => {
-      try {
-        matchingObject.comps.push(el);
-        matchingObject.promises.push(el.getProps());
-      }
-      catch (error) {
-        this.logMessage('kup-debug', 'Exception when accessing "getProps" public method for component: ' +
-          el.rootElement.tagName, KupDebugCategory.WARNING);
-      }
-    });
-    // Returning "props", which is returned by the Promise.all
-    return Promise.all(matchingObject.promises).then((responses) => {
-      for (let index = 0; index < matchingObject.comps.length; index++) {
-        const el = matchingObject.comps[index];
-        const res = responses[index];
-        let cnt = 0;
-        let key = el.rootElement.id
-          ? el.rootElement.tagName + '#' + el.rootElement.id
-          : el.rootElement.tagName + '_' + ++cnt;
-        while (props[key]) {
-          key = el.rootElement.tagName + '_' + ++cnt;
-        }
-        if (detail) {
-          let tag = {};
-          for (const key in el.rootElement) {
-            tag[key] = el.rootElement[key];
-          }
-          props[key] = {
-            props: res,
-            tagInfo: tag,
-          };
-          if (!props.descriptions[el.rootElement.tagName]) {
-            try {
-              el.getProps(true).then((res) => {
-                props.descriptions[el.rootElement.tagName] =
-                  res;
-              });
-            }
-            catch (error) {
-              this.logMessage('kup-debug', 'Exception when accessing "getProps" public method for component: ' +
-                el.rootElement.tagName, KupDebugCategory.WARNING);
-            }
-          }
-        }
-        else {
-          props[key] = res;
-        }
-      }
-      return props;
-    });
-  }
-  /**
-   * Displays a timestamped message in the browser's console when the kupDebug property on document.documentElement is true.
-   * Warnings and errors will be displayed even when kupDebug !== true.
-   * @param {any} comp - The component calling this function or a string.
-   * @param {string} message - The actual message that will be printed.
-   * @param {KupDebugCategory} category - The type of console message, defaults to log but warning and error can be used as well.
-   */
-  logMessage(comp, message, category) {
-    if ((!category || category === KupDebugCategory.INFO) &&
-      !this.isDebug()) {
-      return;
-    }
-    const date = new Date();
-    if (!category) {
-      category = KupDebugCategory.INFO;
-    }
-    let obj = null;
-    let id = '';
-    if (comp.rootElement) {
-      id =
-        ' ' +
-          comp.rootElement.tagName +
-          '#' +
-          comp.rootElement.id +
-          ' => ';
-      obj = comp;
-    }
-    else {
-      id = ' ' + comp + ' => ';
-      obj = '';
-    }
-    if (this.isDebug() && id.indexOf('#kup-debug') < 0) {
-      const log = {
-        category: category,
-        date: date,
-        element: obj,
-        id: id,
-        message: message,
-      };
-      if (this.logs.length > this.logLimit) {
-        console.warn(this.formatDate(date) +
-          ' kup-debug => ' +
-          'Too many logs (> ' +
-          this.logLimit +
-          ')! Dumping (increase debug.logLimit to store more logs)... .');
-        this.dump();
-      }
-      this.logs.push(log);
-      if (this.autoPrint && __classPrivateFieldGet$3(this, _debugWidget)) {
-        this.widgetClear();
-        this.widgetPrint();
-        __classPrivateFieldGet$3(this, _debugWidget).refresh();
-      }
-    }
-    switch (category) {
-      case KupDebugCategory.ERROR:
-        console.error(this.formatDate(date) + id + message, obj);
-        window.dispatchEvent(new CustomEvent('kupError', {
-          bubbles: true,
-          detail: { comp, date, message },
-        }));
-        break;
-      case KupDebugCategory.WARNING:
-        console.warn(this.formatDate(date) + id + message, obj);
-        break;
-    }
-  }
-  /**
-   * Function used to format a date.
-   * Example: "Sun Mar 14 2021 13:50:56,329pm"
-   * @param {Date} date - Date to be formatted.
-   * @returns {string} Formatted
-   */
-  formatDate(date) {
-    let minutes = date.getMinutes().toString().length == 1
-      ? '0' + date.getMinutes()
-      : date.getMinutes(), hours = date.getHours().toString().length == 1
-      ? '0' + date.getHours()
-      : date.getHours(), seconds = date.getSeconds().toString().length == 1
-      ? '0' + date.getSeconds()
-      : date.getSeconds(), milliseconds = date.getMilliseconds().toString().length == 1
-      ? '0' + date.getMilliseconds()
-      : date.getMilliseconds(), ampm = date.getHours() >= 12 ? 'pm' : 'am', months = [
-      'Jan',
-      'Feb',
-      'Mar',
-      'Apr',
-      'May',
-      'Jun',
-      'Jul',
-      'Aug',
-      'Sep',
-      'Oct',
-      'Nov',
-      'Dec',
-    ], days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    return (days[date.getDay()] +
-      ' ' +
-      months[date.getMonth()] +
-      ' ' +
-      date.getDate() +
-      ' ' +
-      date.getFullYear() +
-      ' ' +
-      hours +
-      ':' +
-      minutes +
-      ':' +
-      seconds +
-      ',' +
-      milliseconds +
-      ampm);
-  }
-  /**
-   * Function used to time the loading times of a component.
-   * @param {any} comp - The component calling this function or a string.
-   * @param {boolean} didLoad - Must be set to false when called inside a componentWillLoad() lifecycle hook and true when called inside componentDidLoad().
-   */
-  logLoad(comp, didLoad) {
-    if (!didLoad) {
-      comp['debugInfo'] = {
-        startTime: window.performance.now(),
-        endTime: 0,
-        renderCount: 0,
-        renderStart: 0,
-        renderEnd: 0,
-      };
-    }
-    else {
-      comp.debugInfo.endTime = window.performance.now();
-      let timeDiff = comp.debugInfo.endTime - comp.debugInfo.startTime;
-      if (this.isDebug()) {
-        this.logMessage(comp, 'Component ready after ' + timeDiff + 'ms.');
-      }
-    }
-  }
-  /**
-   * Function used to time the render times of a component.
-   * @param {any} comp - The component calling this function or a string.
-   * @param {boolean} didRender - Must be set to false when called inside a componentWillRender() lifecycle hook and true when called inside componentDidRender().
-   * @param {string} breakpoint - When present, this log is supposedly between a willRender and didRender hook. Used to time single features of the render lifecycle.
-   */
-  logRender(comp, didRender, breakpoint) {
-    if (breakpoint) {
-      const timeDiff = window.performance.now() - comp.debugInfo.renderStart;
-      if (this.isDebug()) {
-        this.logMessage(comp, breakpoint + ' took ' + timeDiff + 'ms.');
-      }
-    }
-    else if (!didRender) {
-      comp.debugInfo.renderCount++;
-      comp.debugInfo.renderStart = window.performance.now();
-    }
-    else {
-      comp.debugInfo.renderEnd = window.performance.now();
-      const timeDiff = comp.debugInfo.renderEnd - comp.debugInfo.renderStart;
-      if (this.isDebug()) {
-        this.logMessage(comp, 'Render #' +
-          comp.debugInfo.renderCount +
-          ' took ' +
-          timeDiff +
-          'ms.');
-      }
-    }
-  }
-}
-_debugWidget = new WeakMap();
-
-/**
- * HTML Attribute attached to dialogs.
- * Referenced by kup-theme.css
- */
-const kupDialogAttribute = 'kup-dialog';
-/**
- * CSS class attached to resizable dialogs.
- * Referenced by kup-theme.css
- */
-const kupResizableDialogClass = 'kup-resizable';
-/**
- * Actions performed by KupDialog.
- * The value reflects the CSS "cursor" property.
- */
-var KupDialogActions;
-(function (KupDialogActions) {
-  KupDialogActions["MOVE"] = "move";
-  KupDialogActions["RESIZE"] = "resize";
-})(KupDialogActions || (KupDialogActions = {}));
-/**
- * Coordinates of the resize.
- * The value reflects the CSS "cursor" property.
- */
-var KupDialogCoordinates;
-(function (KupDialogCoordinates) {
-  KupDialogCoordinates["ALL"] = "move";
-  KupDialogCoordinates["UNSET"] = "auto";
-  KupDialogCoordinates["NORTHWEST"] = "nw-resize";
-  KupDialogCoordinates["NORTH"] = "n-resize";
-  KupDialogCoordinates["NORTHEAST"] = "ne-resize";
-  KupDialogCoordinates["EAST"] = "e-resize";
-  KupDialogCoordinates["SOUTHEAST"] = "se-resize";
-  KupDialogCoordinates["SOUTH"] = "s-resize";
-  KupDialogCoordinates["SOUTHWEST"] = "sw-resize";
-  KupDialogCoordinates["WEST"] = "w-resize";
-})(KupDialogCoordinates || (KupDialogCoordinates = {}));
-
-var __classPrivateFieldSet$2 = (undefined && undefined.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
-};
-var __classPrivateFieldGet$2 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
-};
-var _elementDrag, _mouseDown, _mouseUp;
-const dom$6 = document.documentElement;
-/**
- * This class handles elements as dialogs, making them resizable and movable.
- * @module KupDialog
- */
-class KupDialog {
-  /**
-   * Initializes KupDialog.
-   * @param {number} zIndex - The starting z-index assigned to dialogs.
-   */
-  constructor(zIndex) {
-    _elementDrag.set(this, void 0);
-    _mouseDown.set(this, void 0);
-    _mouseUp.set(this, void 0);
-    this.action = null;
-    this.activeElement = null;
-    this.activeX = 0;
-    this.activeY = 0;
-    this.coordinates = null;
-    this.managedElements = new Set();
-    this.startingHeight = 0;
-    this.startingWidth = 0;
-    this.startingX = 0;
-    this.startingY = 0;
-    this.threshold = 5;
-    this.zIndex = zIndex ? zIndex : 200;
-    __classPrivateFieldSet$2(this, _elementDrag, function (e) {
-      const kupDialog = dom$6.ketchup.dialog;
-      const paths = e.composedPath();
-      if (kupDialog.action === KupDialogActions.MOVE) {
-        const x = kupDialog.activeElement.offsetLeft -
-          (kupDialog.activeX - e.clientX);
-        const y = kupDialog.activeElement.offsetTop -
-          (kupDialog.activeY - e.clientY);
-        kupDialog.activeElement.style.left = x + 'px';
-        kupDialog.activeElement.style.top = y + 'px';
-        kupDialog.activeX = e.clientX;
-        kupDialog.activeY = e.clientY;
-      }
-      else if (kupDialog.action === KupDialogActions.RESIZE) {
-        const height = kupDialog.activeElement.offsetHeight;
-        const width = kupDialog.activeElement.offsetWidth;
-        let x = kupDialog.startingWidth;
-        let y = kupDialog.startingHeight;
-        //Y coordinates
-        switch (kupDialog.coordinates) {
-          case KupDialogCoordinates.NORTH:
-          case KupDialogCoordinates.NORTHEAST:
-          case KupDialogCoordinates.NORTHWEST: {
-            y += kupDialog.activeY - e.clientY;
-            if (y < 100) {
-              y = 100;
-            }
-            kupDialog.activeElement.style.height = y + 'px';
-            if (height !== kupDialog.activeElement.offsetHeight) {
-              kupDialog.activeElement.style.top =
-                kupDialog.activeElement.offsetTop -
-                  (kupDialog.startingY - e.clientY) +
-                  'px';
-              kupDialog.startingY = e.clientY;
-            }
-            break;
-          }
-          case KupDialogCoordinates.SOUTH:
-          case KupDialogCoordinates.SOUTHEAST:
-          case KupDialogCoordinates.SOUTHWEST: {
-            y -= kupDialog.activeY - e.clientY;
-            if (y < 100) {
-              y = 100;
-            }
-            kupDialog.activeElement.style.height = y + 'px';
-            break;
-          }
-        }
-        //X coordinates
-        switch (kupDialog.coordinates) {
-          case KupDialogCoordinates.EAST:
-          case KupDialogCoordinates.NORTHEAST:
-          case KupDialogCoordinates.SOUTHEAST: {
-            x -= kupDialog.activeX - e.clientX;
-            if (x < 100) {
-              x = 100;
-            }
-            kupDialog.activeElement.style.width = x + 'px';
-            break;
-          }
-          case KupDialogCoordinates.WEST:
-          case KupDialogCoordinates.NORTHWEST:
-          case KupDialogCoordinates.SOUTHWEST: {
-            x += kupDialog.activeX - e.clientX;
-            if (x < 100) {
-              x = 100;
-            }
-            kupDialog.activeElement.style.width = x + 'px';
-            if (width !== kupDialog.activeElement.offsetWidth) {
-              kupDialog.activeElement.style.left =
-                kupDialog.activeElement.offsetLeft -
-                  (kupDialog.startingX - e.clientX) +
-                  'px';
-              kupDialog.startingX = e.clientX;
-            }
-            break;
-          }
-        }
-      }
-      else {
-        kupDialog.managedElements.forEach((el) => {
-          if (paths.includes(el)) {
-            kupDialog.activeElement = el;
-          }
-        });
-        kupDialog.setCoords(e.clientX, e.clientY, paths);
-      }
-      // Check whether position is inside viewport's contraints
-      if (kupDialog.activeElement) {
-        const rect = kupDialog.activeElement.getBoundingClientRect();
-        if (rect.left < 0) {
-          kupDialog.activeElement.style.left = '0';
-        }
-        else if (rect.right > window.innerWidth) {
-          kupDialog.activeElement.style.left =
-            window.innerWidth - rect.width + 'px';
-        }
-        if (rect.top < 0) {
-          kupDialog.activeElement.style.top = '0';
-        }
-        else if (rect.bottom > window.innerHeight) {
-          kupDialog.activeElement.style.top =
-            window.innerHeight - rect.height + 'px';
-        }
-      }
-    });
-    __classPrivateFieldSet$2(this, _mouseDown, function (e) {
-      const kupDialog = dom$6.ketchup.dialog;
-      if (kupDialog.activeElement) {
-        switch (kupDialog.coordinates) {
-          case KupDialogCoordinates.ALL:
-            kupDialog.action = KupDialogActions.MOVE;
-            break;
-          case KupDialogCoordinates.UNSET:
-            return;
-          default:
-            kupDialog.action = KupDialogActions.RESIZE;
-            kupDialog.startingHeight =
-              kupDialog.activeElement.offsetHeight;
-            kupDialog.startingWidth =
-              kupDialog.activeElement.offsetWidth;
-            kupDialog.startingX =
-              kupDialog.activeElement.offsetLeft;
-            kupDialog.startingY = kupDialog.activeElement.offsetTop;
-            break;
-        }
-        e.preventDefault();
-        kupDialog.activeX = e.clientX;
-        kupDialog.activeY = e.clientY;
-        kupDialog.activeElement.style.zIndex = (this
-          .zIndex++).toString();
-      }
-    });
-    __classPrivateFieldSet$2(this, _mouseUp, function () {
-      const kupDialog = dom$6.ketchup.dialog;
-      kupDialog.action = null;
-      kupDialog.activeElement = null;
-    });
-    document.addEventListener('mousemove', __classPrivateFieldGet$2(this, _elementDrag));
-    document.addEventListener('mouseup', __classPrivateFieldGet$2(this, _mouseUp));
-  }
-  /**
-   * Checks whether the mouse overs on the edges of the element or not.
-   * @param {number} x - X coordinate.
-   * @param {number} y - Y coordinate.
-   * @param {EventTarget[]} paths - Paths returned from the event. Used to search for the drag handle and, if found, enables dragging.
-   */
-  setCoords(x, y, paths) {
-    this.coordinates = KupDialogCoordinates.UNSET;
-    if (this.activeElement) {
-      if (this.activeElement.kupDialog.resizable) {
-        // Left border
-        if (x === this.activeElement.offsetLeft ||
-          (x > this.activeElement.offsetLeft &&
-            x < this.activeElement.offsetLeft + this.threshold)) {
-          this.coordinates = KupDialogCoordinates.WEST;
-        }
-        else if (x ===
-          this.activeElement.offsetLeft +
-            this.activeElement.offsetWidth ||
-          (x <
-            this.activeElement.offsetLeft +
-              this.activeElement.offsetWidth &&
-            x >
-              this.activeElement.offsetLeft +
-                this.activeElement.offsetWidth -
-                this.threshold)) {
-          // Right border
-          this.coordinates = KupDialogCoordinates.EAST;
-        }
-        // Top border
-        if (y === this.activeElement.offsetTop ||
-          (y > this.activeElement.offsetTop &&
-            y < this.activeElement.offsetTop + this.threshold)) {
-          if (this.coordinates === KupDialogCoordinates.WEST) {
-            this.coordinates = KupDialogCoordinates.NORTHWEST;
-          }
-          else if (this.coordinates === KupDialogCoordinates.EAST) {
-            this.coordinates = KupDialogCoordinates.NORTHEAST;
-          }
-          else {
-            this.coordinates = KupDialogCoordinates.NORTH;
-          }
-        }
-        else if (
-        // Bottom border
-        y ===
-          this.activeElement.offsetTop +
-            this.activeElement.offsetHeight ||
-          (y <
-            this.activeElement.offsetTop +
-              this.activeElement.offsetHeight &&
-            y >
-              this.activeElement.offsetTop +
-                this.activeElement.offsetHeight -
-                this.threshold)) {
-          if (this.coordinates === KupDialogCoordinates.WEST) {
-            this.coordinates = KupDialogCoordinates.SOUTHWEST;
-          }
-          else if (this.coordinates === KupDialogCoordinates.EAST) {
-            this.coordinates = KupDialogCoordinates.SOUTHEAST;
-          }
-          else {
-            this.coordinates = KupDialogCoordinates.SOUTH;
-          }
-        }
-      }
-      if (this.coordinates === KupDialogCoordinates.UNSET) {
-        if (this.activeElement.kupDialog.dragHandle) {
-          if (paths.includes(this.activeElement.kupDialog.dragHandle)) {
-            this.coordinates = KupDialogCoordinates.ALL;
-          }
-        }
-        else {
-          this.coordinates = KupDialogCoordinates.ALL;
-        }
-      }
-      this.activeElement.style.cursor = this.coordinates;
-    }
-  }
-  /**
-   * Watches the element handled as dialog.
-   * @param {DialogElement} el - Dialog element.
-   * @param {HTMLElement} handleEl - Element that must be dragged in order to trigger movement. When not provided, dragging anywhere on "el" will move it.
-   * @param {boolean} unresizable - When true, the dialog can't be resized.
-   */
-  register(el, handleEl, unresizable) {
-    el.setAttribute(kupDialogAttribute, '');
-    el.style.zIndex = (this.zIndex++).toString();
-    if (!el.style.left) {
-      el.style.left = '0';
-    }
-    if (!el.style.top) {
-      el.style.top = '0';
-    }
-    el.addEventListener('mousedown', (e) => __classPrivateFieldGet$2(this, _mouseDown).call(this, e));
-    el.kupDialog = { dragHandle: null, resizable: true };
-    if (handleEl) {
-      el.kupDialog.dragHandle = handleEl;
-    }
-    if (unresizable) {
-      el.kupDialog.resizable = false;
-    }
-    else {
-      el.classList.add(kupResizableDialogClass);
-    }
-    this.managedElements.add(el);
-  }
-  /**
-   * Removes the elements from the MoveOnDrag class watchlist.
-   * @param {DialogElement[]} elements - Elements to remove.
-   */
-  unregister(elements) {
-    if (this.managedElements) {
-      for (let index = 0; index < elements.length; index++) {
-        this.managedElements.delete(elements[index]);
-      }
-    }
-  }
-  /**
-   * Returns whether an element was previously registered or not.
-   * @param {DialogElement} el - Element to test.
-   * @returns {boolean} True if the element was registered.
-   */
-  isRegistered(el) {
-    return !this.managedElements ? false : this.managedElements.has(el);
-  }
-}
-_elementDrag = new WeakMap(), _mouseDown = new WeakMap(), _mouseUp = new WeakMap();
-
-const dom$5 = document.documentElement;
-/**
- * This class is used to dynamically reposition HTML elements.
- * @module KupDynamicPosition
- */
-class KupDynamicPosition {
-  /**
-   * Initializes KupDynamicPosition.
-   */
-  constructor() {
-    this.container = document.createElement('div');
-    this.container.setAttribute('kup-dynamic-position', '');
-    document.body.appendChild(this.container);
-    this.managedElements = new Set();
-  }
-  /**
-   * Function used to check whether the anchor point is an HTMLElement or a set of coordinates.
-   * @param {KupDynamicPositionAnchor} anchor - Anchor point.
-   * @returns {anchor is HTMLElement} Returns true when the anchor point is an HTMLElement.
-   */
-  anchorIsHTMLElement(anchor) {
-    return anchor.tagName !== undefined;
-  }
-  /**
-   * Watches the element eligible to dynamic positioning.
-   * @param {KupDynamicPositionElement} el - Element to reposition.
-   * @param {KupDynamicPositionAnchor} anchorEl - "el" position will be anchored to this element or to these coordinates.
-   * @param {number} margin - "el" distance from its parent in pixels.
-   * @param {KupDynamicPositionPlacement} placement - "el" placement.
-   * @param {boolean} detach - When true, the function won't be recursive but it will be executed only once. "el" will be detached from its original parent and it will be appended to this.container.
-   */
-  register(el, anchorEl, margin, placement, detach) {
-    if (this.isRegistered(el)) {
-      if (this.anchorIsHTMLElement(anchorEl)) {
-        this.changeAnchor(el, anchorEl);
-      }
-      return;
-    }
-    el.setAttribute(kupDynamicPositionAttribute, '');
-    if (this.anchorIsHTMLElement(anchorEl)) {
-      anchorEl.setAttribute(kupDynamicPositionAnchorAttribute, '');
-    }
-    if (detach) {
-      el.style.position = 'absolute';
-      this.container.appendChild(el);
-    }
-    else {
-      el.style.position = 'fixed';
-    }
-    el.style.zIndex = '1000';
-    el.kupDynamicPosition = {
-      anchor: anchorEl,
-      detach: detach ? true : false,
-      margin: margin ? margin : 0,
-      placement: placement ? placement : KupDynamicPositionPlacement.AUTO,
-      rAF: null,
-    };
-    const mutObserver = new MutationObserver(function (mutations) {
-      const target = mutations[0].target;
-      if (target.classList.contains(kupDynamicPositionActiveClass)) {
-        requestAnimationFrame(function () {
-          dom$5.ketchup.dynamicPosition.run(el);
-        });
-      }
-    });
-    mutObserver.observe(el, {
-      attributes: true,
-      attributeFilter: ['class'],
-    });
-    this.managedElements.add(el);
-  }
-  /**
-   * Changes the anchor point of the given element.
-   * @param {KupDynamicPositionElement} elements - Dynamically positioned element previously registered.
-   * @param {HTMLElement} anchorEl - New anchor point.
-   */
-  changeAnchor(el, anchorEl) {
-    el.kupDynamicPosition.anchor = anchorEl;
-  }
-  /**
-   * Removes the element from dynamic position management.
-   * @param {KupDynamicPositionElement[]} elements - Elements to remove from the managed elements set.
-   */
-  unregister(elements) {
-    if (this.managedElements) {
-      for (let index = 0; index < elements.length; index++) {
-        this.managedElements.delete(elements[index]);
-      }
-    }
-  }
-  /**
-   * Returns whether an element was previously registered or not.
-   * @param {KupDynamicPositionElement} el - Element to test.
-   * @returns {boolean} True if the element was registered.
-   */
-  isRegistered(el) {
-    return !this.managedElements ? false : this.managedElements.has(el);
-  }
-  /**
-   * Starts the process of dynamically reposition the element (which must be firstly initialized through this.setup()).
-   * @param {KupDynamicPositionElement} el - Element to reposition.
-   */
-  start(el) {
-    el.classList.add(kupDynamicPositionActiveClass);
-  }
-  /**
-   * Ends the process of dynamically reposition the element.
-   * @param {KupDynamicPositionElement} el - Element to reposition.
-   */
-  stop(el) {
-    el.classList.remove(kupDynamicPositionActiveClass);
-  }
-  /**
-   * This function calculates where to place the element in order to correctly display it attached to its anchor point.
-   * @param {KupDynamicPositionElement} el - Element to reposition.
-   */
-  run(el) {
-    if (!el.isConnected) {
-      dom$5.ketchup.dynamicPosition.managedElements.delete(el);
-      cancelAnimationFrame(el.kupDynamicPosition.rAF);
-      return;
-    }
-    if (!el.classList.contains(kupDynamicPositionActiveClass)) {
-      cancelAnimationFrame(el.kupDynamicPosition.rAF);
-      return;
-    }
-    // Reset placement
-    el.style.top = '';
-    el.style.right = '';
-    el.style.bottom = '';
-    el.style.left = '';
-    // Fixed position (usually from mouse events).
-    // When anchor doesn't have the tagName property, anchor is considered as a set of coordinates.
-    if (!this.anchorIsHTMLElement(el.kupDynamicPosition.anchor)) {
-      const x = el.kupDynamicPosition.anchor.x;
-      const y = el.kupDynamicPosition.anchor.y;
-      if (el.offsetWidth >
-        window.innerWidth - el.kupDynamicPosition.anchor.x) {
-        el.style.left = x - el.offsetWidth + 'px';
-      }
-      else {
-        el.style.left = x + 'px';
-      }
-      if (el.offsetHeight >
-        window.innerHeight - el.kupDynamicPosition.anchor.y) {
-        el.style.top = y - el.offsetHeight + 'px';
-      }
-      else {
-        el.style.top = y + 'px';
-      }
-      return;
-    }
-    const detached = !!el.kupDynamicPosition.detach;
-    const offsetH = el.clientHeight;
-    const offsetW = el.clientWidth;
-    const rect = el.kupDynamicPosition.anchor.getBoundingClientRect();
-    const top = detached ? window.pageYOffset + rect.top : rect.top, left = detached
-      ? window.pageXOffset + rect.left
-      : rect.left, bottom = detached
-      ? window.pageYOffset + rect.bottom
-      : rect.bottom, right = detached
-      ? window.pageXOffset + rect.right
-      : rect.right;
-    // Vertical position
-    if (el.kupDynamicPosition.placement ===
-      KupDynamicPositionPlacement.TOP ||
-      el.kupDynamicPosition.placement ===
-        KupDynamicPositionPlacement.TOP_LEFT ||
-      el.kupDynamicPosition.placement ===
-        KupDynamicPositionPlacement.TOP_RIGHT) {
-      el.style.bottom = `${window.innerHeight - top + el.kupDynamicPosition.margin}px`;
-    }
-    else if (el.kupDynamicPosition.placement ===
-      KupDynamicPositionPlacement.BOTTOM ||
-      el.kupDynamicPosition.placement ===
-        KupDynamicPositionPlacement.BOTTOM_LEFT ||
-      el.kupDynamicPosition.placement ===
-        KupDynamicPositionPlacement.BOTTOM_RIGHT) {
-      el.style.top = `${bottom + el.kupDynamicPosition.margin}px`;
-    }
-    else {
-      if (window.innerHeight - bottom < offsetH) {
-        el.style.bottom = `${window.innerHeight - top + el.kupDynamicPosition.margin}px`;
-      }
-      else {
-        el.style.top = `${bottom + el.kupDynamicPosition.margin}px`;
-      }
-    }
-    // Horizontal position
-    if (el.kupDynamicPosition.placement ===
-      KupDynamicPositionPlacement.LEFT ||
-      el.kupDynamicPosition.placement ===
-        KupDynamicPositionPlacement.BOTTOM_LEFT ||
-      el.kupDynamicPosition.placement ===
-        KupDynamicPositionPlacement.TOP_LEFT) {
-      el.style.left = `${left}px`;
-    }
-    else if (el.kupDynamicPosition.placement ===
-      KupDynamicPositionPlacement.RIGHT ||
-      el.kupDynamicPosition.placement ===
-        KupDynamicPositionPlacement.BOTTOM_RIGHT ||
-      el.kupDynamicPosition.placement ===
-        KupDynamicPositionPlacement.TOP_RIGHT) {
-      let scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
-      if (scrollbarWidth > 30) {
-        scrollbarWidth = 0;
-      }
-      el.style.right = `${window.innerWidth - scrollbarWidth - right}px`;
-    }
-    else {
-      if (window.innerWidth - left < offsetW) {
-        let scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
-        if (scrollbarWidth > 30) {
-          scrollbarWidth = 0;
-        }
-        el.style.right = `${window.innerWidth - scrollbarWidth - right}px`;
-      }
-      else {
-        el.style.left = `${left}px`;
-      }
-    }
-    // Recursive
-    if (!el.kupDynamicPosition.detach) {
-      el.kupDynamicPosition.rAF = requestAnimationFrame(function () {
-        dom$5.ketchup.dynamicPosition.run(el);
-      });
-    }
-    else {
-      cancelAnimationFrame(el.kupDynamicPosition.rAF);
-      return;
-    }
-  }
-}
-
-const chinese = {
-	keys: {
-		checkboxAll: "全部",
-		checkboxChecked: "已检查",
-		checkboxIndeterminate: "不定",
-		checkboxUnchecked: "未检查",
-		columnAdd: "添加栏",
-		columnAddDescription: "添加代码/描述列",
-		columnColumns: "列",
-		columnHide: "隐藏栏",
-		debugAutoprint: "切换自动打印",
-		debugClear: "清除小部件",
-		debugDLAll: "全部",
-		debugDLProps: "下载组件道具",
-		debugDLPropsComp: "下载组件道具",
-		debugDump: "转储存储的日志",
-		debugLanguageChanger: "设置语言",
-		debugLogLimit: "设置日志限制",
-		debugMagicBox: "切换kup-magic-box",
-		debugOff: "关闭调试",
-		debugPrint: "打印已存储的日志",
-		debugThemeChanger: "设置主题",
-		densityDense: "稠密",
-		densityLabel: "行密度",
-		densityMedium: "中等的",
-		densityWide: "宽的",
-		fontsizeBig: "大的",
-		fontsizeLabel: "字体大小",
-		fontsizeMedium: "中等的",
-		fontsizeSmall: "小的",
-		genericAddNew: "添新",
-		genericApply: "申请",
-		genericCollapse: "坍塌",
-		genericDay: "日",
-		genericDragAndDrop: "拖放",
-		genericDropYourData: "将您的数据放在这里",
-		genericEditable: "可编辑的",
-		genericEditableField: "该字段可以编辑",
-		genericEmptyData: "空数据",
-		genericExpand: "扩张",
-		genericExperimentalFeat: "实验功能",
-		genericFilters: "筛选器",
-		genericInfo: "信息",
-		genericInvalidColor: "颜色无效",
-		genericLayoutNotYetImplemented: "布局尚未实施",
-		genericList: "列表",
-		genericLoadMoreData: "加载更多数据",
-		genericMenu: "画面",
-		genericMonth: "月",
-		genericNext: "下一个",
-		genericOpenInNewTab: "在新标签页中打开",
-		genericOpenInNewWindow: "在新窗口中打开",
-		genericOpenNavigationMenu: "打开导航菜单",
-		genericOptions: "选项",
-		genericPrevious: "以前的",
-		genericRemoveFilters: "删除过滤器",
-		genericSettings: "设置",
-		genericShowRowOptions: "显示行选项",
-		genericShowTooltipInfo: "显示工具提示信息",
-		genericSortBy: "排序方式",
-		genericToday: "今天",
-		genericToggle: "切换",
-		genericTotalsTable: "总计表",
-		genericTransposeData: "转置数据",
-		genericViewAs: "查看为",
-		genericWeek: "星期",
-		gridColumn: "柱子",
-		gridComplete: "完全的",
-		gridLabel: "网格类型",
-		gridNone: "没有任何",
-		gridRow: "排",
-		groupingDisable: "禁用分组",
-		groupingEnable: "启用分组",
-		groupingGroups: "团体",
-		pagePage: "页",
-		pageTotal: "总页数",
-		rowDetail: "行详细信息",
-		rowEditableKey: "可编辑的记录键",
-		rowKey: "记录键",
-		rowNext: "下一行",
-		rowPrevious: "上一行",
-		rowRendered: "渲染的行",
-		rowRows: "行数",
-		rowSelected: "选定的行",
-		rowTotal: "总行数",
-		searchFrom: "从",
-		searchSearch: "搜索",
-		searchTo: "至",
-		totalsAverage: "平均数",
-		totalsCalculate: "计算",
-		totalsCancel: "取消",
-		totalsCount: "数数",
-		totalsDistinct: "清楚的",
-		totalsFormula: "公式",
-		totalsMaximum: "最大",
-		totalsMinimum: "最低限度",
-		totalsSum: "和"
-	}
-};
-const english = {
-	keys: {
-		checkboxAll: "All",
-		checkboxChecked: "Checked",
-		checkboxIndeterminate: "Indeterminate",
-		checkboxUnchecked: "Unchecked",
-		columnAdd: "Add column",
-		columnAddDescription: "Add code/description column",
-		columnColumns: "Columns",
-		columnHide: "Hide column",
-		debugAutoprint: "Toggle automatic print",
-		debugClear: "Clear widget",
-		debugDLAll: "All",
-		debugDLProps: "Download components props",
-		debugDLPropsComp: "Download component props",
-		debugDump: "Dump stored logs",
-		debugLanguageChanger: "Set language",
-		debugLogLimit: "Set log limit",
-		debugMagicBox: "Toggle kup-magic-box",
-		debugOff: "Turn off debug",
-		debugPrint: "Print logs stored",
-		debugThemeChanger: "Set theme",
-		densityDense: "Dense",
-		densityLabel: "Row density",
-		densityMedium: "Medium",
-		densityWide: "Wide",
-		fontsizeBig: "Big",
-		fontsizeLabel: "Font size",
-		fontsizeMedium: "Medium",
-		fontsizeSmall: "Small",
-		genericAddNew: "Add new",
-		genericApply: "Apply",
-		genericCollapse: "Collapse",
-		genericDay: "Day",
-		genericDragAndDrop: "Drag and drop",
-		genericDropYourData: "Drop your data here",
-		genericEditable: "Editable",
-		genericEditableField: "This field can be edited",
-		genericEmptyData: "Empty data.",
-		genericExpand: "Expand",
-		genericExperimentalFeat: "Experimental feature",
-		genericFilters: "Filters",
-		genericInfo: "Info",
-		genericInvalidColor: "Invalid color",
-		genericLayoutNotYetImplemented: "Layout not yet implemented",
-		genericList: "List",
-		genericLoadMoreData: "Load more data",
-		genericMenu: "Menu",
-		genericMonth: "Month",
-		genericNext: "Next",
-		genericOpenInNewTab: "Open in new tab",
-		genericOpenInNewWindow: "Open in new window",
-		genericOpenNavigationMenu: "Open navigation menu",
-		genericOptions: "Options",
-		genericPrevious: "Previous",
-		genericRemoveFilters: "Remove filters",
-		genericSettings: "Settings",
-		genericShowRowOptions: "Show row options",
-		genericShowTooltipInfo: "Show tooltip info",
-		genericSortBy: "Sort by",
-		genericToday: "Today",
-		genericToggle: "Toggle",
-		genericTotalsTable: "Totals table",
-		genericTransposeData: "Transpose data",
-		genericViewAs: "View as",
-		genericWeek: "Week",
-		gridColumn: "Column",
-		gridComplete: "Complete",
-		gridLabel: "Grid type",
-		gridNone: "None",
-		gridRow: "Row",
-		groupingDisable: "Disable grouping",
-		groupingEnable: "Enable grouping",
-		groupingGroups: "Group",
-		pagePage: "Page",
-		pageTotal: "Total",
-		rowDetail: "Row detail",
-		rowEditableKey: "Editable record key",
-		rowKey: "Record key",
-		rowNext: "Next row",
-		rowPrevious: "Previous row",
-		rowRendered: "Rendered rows",
-		rowRows: "Rows",
-		rowSelected: "Selected rows",
-		rowTotal: "Total rows",
-		searchFrom: "From",
-		searchSearch: "Search",
-		searchTo: "To",
-		totalsAverage: "Average",
-		totalsCalculate: "Calculate",
-		totalsCancel: "Cancel",
-		totalsCount: "Count",
-		totalsDistinct: "Distinct",
-		totalsFormula: "Formula",
-		totalsMaximum: "Maximum",
-		totalsMinimum: "Minimum",
-		totalsSum: "Sum"
-	}
-};
-const french = {
-	keys: {
-		checkboxAll: "Tout",
-		checkboxChecked: "Vérifié",
-		checkboxIndeterminate: "Indéterminé",
-		checkboxUnchecked: "Non coché",
-		columnAdd: "Ajouter une colonne",
-		columnAddDescription: "Ajouter une colonne code / description",
-		columnColumns: "Colonnes",
-		columnHide: "Masquer la colonne",
-		debugAutoprint: "Activer l'impression automatique",
-		debugClear: "Effacer le widget",
-		debugDLAll: "Tout",
-		debugDLProps: "Télécharger les accessoires des composants",
-		debugDLPropsComp: "Télécharger les accessoires des composants",
-		debugDump: "Vider les journaux stockés",
-		debugLanguageChanger: "Définir la langue",
-		debugLogLimit: "Définir la limite du journal",
-		debugMagicBox: "Activer / désactiver kup-magic-box",
-		debugOff: "Désactiver le débogage",
-		debugPrint: "Imprimer les journaux stockés",
-		debugThemeChanger: "Définir le thème",
-		densityDense: "Dense",
-		densityLabel: "Densité des rangs",
-		densityMedium: "Moyen",
-		densityWide: "Large",
-		fontsizeBig: "Gros",
-		fontsizeLabel: "Taille de police",
-		fontsizeMedium: "Moyen",
-		fontsizeSmall: "Petit",
-		genericAddNew: "Ajouter un nouveau",
-		genericApply: "Appliquer",
-		genericCollapse: "Effondrer",
-		genericDay: "Jour",
-		genericDragAndDrop: "Glisser-déposer",
-		genericDropYourData: "Déposez vos données ici",
-		genericEditable: "Modifiable",
-		genericEditableField: "Ce champ peut être édité",
-		genericEmptyData: "Données vides",
-		genericExpand: "Étendre",
-		genericExperimentalFeat: "Fonctionnalité expérimentale",
-		genericFilters: "Filtres",
-		genericInfo: "Info",
-		genericInvalidColor: "Couleur invalide",
-		genericLayoutNotYetImplemented: "Mise en page pas encore implémentée",
-		genericList: "Lister",
-		genericLoadMoreData: "Charger plus de données",
-		genericMenu: "Menu",
-		genericMonth: "Mois",
-		genericNext: "Prochain",
-		genericOpenInNewTab: "Ouvrir dans un nouvel onglet",
-		genericOpenInNewWindow: "Ouvrir dans une nouvelle fenêtre",
-		genericOpenNavigationMenu: "Ouvrir le menu de navigation",
-		genericOptions: "Options",
-		genericPrevious: "Précédent",
-		genericRemoveFilters: "Supprimer les filtres",
-		genericSettings: "Paramètres",
-		genericShowRowOptions: "Afficher les options de ligne",
-		genericShowTooltipInfo: "Afficher les informations de l'info-bulle",
-		genericSortBy: "Trier par",
-		genericToday: "Aujourd'hui",
-		genericToggle: "Basculer",
-		genericTotalsTable: "Tableau des totaux",
-		genericTransposeData: "Transposer les données",
-		genericViewAs: "Voir comme",
-		genericWeek: "La semaine",
-		gridColumn: "Colonne",
-		gridComplete: "Compléte",
-		gridLabel: "Type de grille",
-		gridNone: "Rien",
-		gridRow: "Ligne",
-		groupingDisable: "Désactiver le regroupement",
-		groupingEnable: "Activer le regroupement",
-		groupingGroups: "Groupe",
-		pagePage: "Page",
-		pageTotal: "Pages totales",
-		rowDetail: "Détail de la ligne",
-		rowEditableKey: "Clé d'enregistrement modifiable",
-		rowKey: "Clé d'enregistrement",
-		rowNext: "Ligne suivante",
-		rowPrevious: "Ligne précédente",
-		rowRendered: "Lignes rendues",
-		rowRows: "Lignes",
-		rowSelected: "Lignes sélectionnées",
-		rowTotal: "Total des lignes",
-		searchFrom: "De",
-		searchSearch: "Rechercher",
-		searchTo: "À",
-		totalsAverage: "Moyenne",
-		totalsCalculate: "Calculer",
-		totalsCancel: "Annuler",
-		totalsCount: "Compter",
-		totalsDistinct: "Distinct",
-		totalsFormula: "Formule",
-		totalsMaximum: "Maximum",
-		totalsMinimum: "Minimum",
-		totalsSum: "Somme"
-	}
-};
-const italian = {
-	keys: {
-		checkboxAll: "Tutti",
-		checkboxChecked: "Selezionato",
-		checkboxIndeterminate: "Indeterminato",
-		checkboxUnchecked: "Non selezionato",
-		columnAdd: "Aggiungi colonna",
-		columnAddDescription: "Aggiungi colonna codice/descrizione",
-		columnColumns: "Colonne",
-		columnHide: "Nascondi colonna",
-		debugAutoprint: "Attiva stampa automatica logs",
-		debugClear: "Pulisci widget",
-		debugDLAll: "Tutto",
-		debugDLProps: "Scarica props componenti",
-		debugDLPropsComp: "Scarica props del componente",
-		debugDump: "Svuota cache dei logs",
-		debugLanguageChanger: "Cambia lingua",
-		debugLogLimit: "Imposta limite log",
-		debugMagicBox: "Attiva kup-magic-box",
-		debugOff: "Disattiva debug",
-		debugPrint: "Stampa logs immagazzinati",
-		debugThemeChanger: "Cambia tema",
-		densityDense: "Densa",
-		densityLabel: "Densità righe",
-		densityMedium: "Media",
-		densityWide: "Ampia",
-		fontsizeBig: "Grande",
-		fontsizeLabel: "Dimensione caratteri",
-		fontsizeMedium: "Media",
-		fontsizeSmall: "Piccola",
-		genericAddNew: "Aggiungi nuovo",
-		genericApply: "Applica",
-		genericCollapse: "Chiudi",
-		genericDay: "Giorno",
-		genericDragAndDrop: "Drag & drop",
-		genericDropYourData: "Trascina qui i tuoi dati",
-		genericEditable: "Editabile",
-		genericEditableField: "Questo campo è editabile",
-		genericEmptyData: "Nessun dato da visualizzare.",
-		genericExpand: "Espandi",
-		genericExperimentalFeat: "Funzionalità sperimentale",
-		genericFilters: "Filtri",
-		genericInfo: "Informazioni",
-		genericInvalidColor: "Colore invalido",
-		genericLayoutNotYetImplemented: "Layout non ancora implementato",
-		genericList: "Lista",
-		genericLoadMoreData: "Carica più dati",
-		genericMenu: "Menu",
-		genericMonth: "Mese",
-		genericNext: "Avanti",
-		genericOpenInNewTab: "Apri in nuovo tab",
-		genericOpenInNewWindow: "Apri in nuova finestra",
-		genericOpenNavigationMenu: "Apri menu di navigazione",
-		genericOptions: "Opzioni",
-		genericPrevious: "Indietro",
-		genericRemoveFilters: "Rimuovi filtri",
-		genericSettings: "Impostazioni",
-		genericShowRowOptions: "Mostra opzioni di riga",
-		genericShowTooltipInfo: "Mostra informazioni tooltip",
-		genericSortBy: "Ordina per",
-		genericToday: "Oggi",
-		genericToggle: "Attiva",
-		genericTotalsTable: "Tabella dei totali",
-		genericTransposeData: "Trasposizione dati",
-		genericViewAs: "Vedi come",
-		genericWeek: "Settimana",
-		gridColumn: "Colonna",
-		gridComplete: "Completa",
-		gridLabel: "Tipo di griglia",
-		gridNone: "Nessuna",
-		gridRow: "Riga",
-		groupingDisable: "Disabilita gruppo",
-		groupingEnable: "Abilita gruppo",
-		groupingGroups: "Gruppo",
-		pagePage: "Pagina",
-		pageTotal: "Totale",
-		rowDetail: "Dettaglio riga",
-		rowEditableKey: "Chiave record editabile",
-		rowKey: "Chiave record",
-		rowNext: "Riga successiva",
-		rowPrevious: "Riga precedente",
-		rowRendered: "Righe renderizzate",
-		rowRows: "Righe",
-		rowSelected: "Righe selezionate",
-		rowTotal: "Righe totali",
-		searchFrom: "Da...",
-		searchSearch: "Cerca...",
-		searchTo: "A...",
-		totalsAverage: "Media",
-		totalsCalculate: "Calcola",
-		totalsCancel: "Cancella",
-		totalsCount: "Conta",
-		totalsDistinct: "Distinct",
-		totalsFormula: "Formula",
-		totalsMinimum: "Minimo",
-		totalsMaximum: "Massimo",
-		totalsSum: "Somma"
-	},
-	variants: {
-		smeup: {
-			keys: {
-				genericEditableField: "Questo OAV è editabile",
-				genericTotalsTable: "Matrice dei totali",
-				groupingDisable: "Disabilita raggruppamento",
-				groupingEnable: "Abilita raggruppamento",
-				groupingGroups: "Raggruppamento",
-				rowEditableKey: "K01 (editabile)",
-				rowKey: "K01"
-			}
-		}
-	}
-};
-const polish = {
-	keys: {
-		checkboxAll: "Wszystko",
-		checkboxChecked: "Sprawdzone",
-		checkboxIndeterminate: "Nieokreślony",
-		checkboxUnchecked: "Niepowstrzymany",
-		columnAdd: "Dodaj kolumnę",
-		columnAddDescription: "Dodaj kolumnę z kodem / opisem",
-		columnColumns: "Kolumny",
-		columnHide: "Ukryj kolumnę",
-		debugAutoprint: "Przełącz automatyczne drukowanie",
-		debugClear: "Wyczyść widżet",
-		debugDLAll: "Wszystko",
-		debugDLProps: "Pobierz właściwości komponentów",
-		debugDLPropsComp: "Pobierz rekwizyty komponentów",
-		debugDump: "Zrzuć zapisane dzienniki",
-		debugLanguageChanger: "Ustaw język",
-		debugLogLimit: "Ustaw limit logów",
-		debugMagicBox: "Przełącz kup-magic-box",
-		debugOff: "Wyłącz debugowanie",
-		debugPrint: "Drukuj zapisane logi",
-		debugThemeChanger: "Ustaw motyw",
-		densityDense: "Gęsty",
-		densityLabel: "Gęstość rzędów",
-		densityMedium: "Średni",
-		densityWide: "Szeroki",
-		fontsizeBig: "Duży",
-		fontsizeLabel: "Rozmiar czcionki",
-		fontsizeMedium: "Średni",
-		fontsizeSmall: "Mały",
-		genericAddNew: "Dodaj nowe",
-		genericApply: "Zastosować",
-		genericCollapse: "Zawalić się",
-		genericDay: "Dzień",
-		genericDragAndDrop: "Przeciągnij i upuść",
-		genericDropYourData: "Upuść swoje dane tutaj",
-		genericEditable: "Edytowalne",
-		genericEditableField: "To pole można edytować",
-		genericEmptyData: "Puste dane",
-		genericExpand: "Rozszerzać",
-		genericExperimentalFeat: "Funkcja eksperymentalna",
-		genericFilters: "Filtry",
-		genericInfo: "Informacje",
-		genericInvalidColor: "Nieprawidłowy kolor",
-		genericLayoutNotYetImplemented: "Układ nie został jeszcze zaimplementowany",
-		genericList: "Lista",
-		genericLoadMoreData: "Załaduj więcej danych",
-		genericMenu: "Menu",
-		genericMonth: "Miesiąc",
-		genericNext: "Następny",
-		genericOpenInNewTab: "Otwórz w nowej karcie",
-		genericOpenInNewWindow: "Otworzyć w nowym oknie",
-		genericOpenNavigationMenu: "Otwórz menu nawigacyjne",
-		genericOptions: "Opcje",
-		genericPrevious: "Poprzedni",
-		genericRemoveFilters: "Usuń filtry",
-		genericSettings: "Ustawienia",
-		genericShowRowOptions: "Pokaż opcje wierszy",
-		genericShowTooltipInfo: "Pokaż informacje w podpowiedzi",
-		genericSortBy: "Sortuj według",
-		genericToday: "Dziś",
-		genericToggle: "Przełącznik",
-		genericTotalsTable: "Tabela sum",
-		genericTransposeData: "Transpozycja danych",
-		genericViewAs: "Wyświetl jako",
-		genericWeek: "Tydzień",
-		gridColumn: "Kolumna",
-		gridComplete: "Kompletny",
-		gridLabel: "Typ siatki",
-		gridNone: "Żaden",
-		gridRow: "Rząd",
-		groupingDisable: "Wyłącz grupowanie",
-		groupingEnable: "Włącz grupowanie",
-		groupingGroups: "Grupy",
-		pagePage: "Strona",
-		pageTotal: "Wszystkie strony",
-		rowDetail: "Szczegóły rzędu",
-		rowEditableKey: "Edytowalny klucz nagrywania",
-		rowKey: "Klucz nagrywania",
-		rowNext: "Następny rząd",
-		rowPrevious: "Poprzedni wiersz",
-		rowRendered: "Renderowane wiersze",
-		rowRows: "Wydziwianie",
-		rowSelected: "Wybrane wiersze",
-		rowTotal: "Łączna liczba wierszy",
-		searchFrom: "Z",
-		searchSearch: "Szukaj",
-		searchTo: "Do",
-		totalsAverage: "Średni",
-		totalsCalculate: "Oblicz",
-		totalsCancel: "Anuluj",
-		totalsCount: "Liczyć",
-		totalsDistinct: "Odrębny",
-		totalsFormula: "Formuła",
-		totalsMinimum: "Minimo",
-		totalsMaximum: "Maksymalny",
-		totalsSum: "Suma"
-	}
-};
-const russian = {
-	keys: {
-		checkboxAll: "Все",
-		checkboxChecked: "Проверено",
-		checkboxIndeterminate: "Неопределенный",
-		checkboxUnchecked: "Не отмечено",
-		columnAdd: "Добавить столбец",
-		columnAddDescription: "Добавить столбец кода / описания",
-		columnColumns: "Столбцы",
-		columnHide: "Скрыть столбец",
-		debugAutoprint: "Включить автоматическую печать",
-		debugClear: "Очистить виджет",
-		debugDLAll: "Все",
-		debugDLProps: "Загрузить свойства компонентов",
-		debugDLPropsComp: "Скачать реквизиты компонентов",
-		debugDump: "Дамп сохраненных журналов",
-		debugLanguageChanger: "Установить язык",
-		debugLogLimit: "Установить ограничение журнала",
-		debugMagicBox: "Переключить волшебный ящик купа",
-		debugOff: "Отключить отладку",
-		debugPrint: "Печать сохраненных журналов",
-		debugThemeChanger: "Установить тему",
-		densityDense: "Плотный",
-		densityLabel: "Плотность строк",
-		densityMedium: "Середина",
-		densityWide: "Широкий",
-		fontsizeBig: "Большой",
-		fontsizeLabel: "Размер шрифта",
-		fontsizeMedium: "Середина",
-		fontsizeSmall: "Небольшой",
-		genericAddNew: "Добавить новое",
-		genericApply: "Применять",
-		genericCollapse: "Крах",
-		genericDay: "День",
-		genericDragAndDrop: "Перетащить и отпустить",
-		genericDropYourData: "Перетащите сюда свои данные",
-		genericEditable: "Редактируемый",
-		genericEditableField: "Это поле можно редактировать",
-		genericEmptyData: "Пустые данные",
-		genericExpand: "Расширять",
-		genericExperimentalFeat: "Экспериментальная особенность",
-		genericFilters: "Фильтры",
-		genericInfo: "Информация",
-		genericInvalidColor: "Неверный цвет",
-		genericLayoutNotYetImplemented: "Макет еще не реализован",
-		genericList: "Список",
-		genericLoadMoreData: "Загрузить больше данных",
-		genericMenu: "Меню",
-		genericMonth: "Месяц",
-		genericNext: "Следующий",
-		genericOpenInNewTab: "Открыть в новой вкладке",
-		genericOpenInNewWindow: "Открыть в новом окне",
-		genericOpenNavigationMenu: "Открыть меню навигации",
-		genericOptions: "Параметры",
-		genericPrevious: "Предыдущий",
-		genericRemoveFilters: "Удалить фильтры",
-		genericSettings: "Настройки",
-		genericShowRowOptions: "Показать параметры строки",
-		genericShowTooltipInfo: "Показать информацию во всплывающей подсказке",
-		genericSortBy: "Сортировать по",
-		genericToday: "Сегодня",
-		genericToggle: "Переключать",
-		genericTotalsTable: "Итоговая таблица",
-		genericTransposeData: "Транспонировать данные",
-		genericViewAs: "Просмотреть как",
-		genericWeek: "Неделя",
-		gridColumn: "Столбец",
-		gridComplete: "Полный",
-		gridLabel: "Тип сетки",
-		gridNone: "Никто",
-		gridRow: "Строка",
-		groupingDisable: "Отключить группировку",
-		groupingEnable: "Включить группировку",
-		groupingGroups: "Группы",
-		pagePage: "Страница",
-		pageTotal: "Всего страниц",
-		rowDetail: "Детали строки",
-		rowEditableKey: "Редактируемый ключ записи",
-		rowKey: "Ключ записи",
-		rowNext: "Следующая строка",
-		rowPrevious: "Предыдущая строка",
-		rowRendered: "Отрисованные строки",
-		rowRows: "Рядов",
-		rowSelected: "Выбранные строки",
-		rowTotal: "Всего строк",
-		searchFrom: "Из",
-		searchSearch: "Поиск",
-		searchTo: "К",
-		totalsAverage: "В среднем",
-		totalsCalculate: "Рассчитать",
-		totalsCancel: "Отмена",
-		totalsCount: "Считать",
-		totalsDistinct: "Отчетливый",
-		totalsFormula: "Формула",
-		totalsMinimum: "Минимум",
-		totalsMaximum: "Максимум",
-		totalsSum: "Сумма"
-	}
-};
-const spanish = {
-	keys: {
-		checkboxAll: "Todas",
-		checkboxChecked: "Marcado",
-		checkboxIndeterminate: "Indeterminado",
-		checkboxUnchecked: "Sin marcar",
-		columnAdd: "Añadir columna",
-		columnAddDescription: "Agregar columna de código / descripción",
-		columnColumns: "Columnas",
-		columnHide: "Ocultar columna",
-		debugAutoprint: "Alternar impresión automática",
-		debugClear: "Borrar widget",
-		debugDLAll: "Todas",
-		debugDLProps: "Descargar accesorios de componentes",
-		debugDLPropsComp: "Descargar accesorios de componentes",
-		debugDump: "Volcar registros almacenados",
-		debugLanguageChanger: "Establecer idioma",
-		debugLogLimit: "Establecer límite de registro",
-		debugMagicBox: "Alternar kup-magic-box",
-		debugOff: "Desactivar depuración",
-		debugPrint: "Imprimir registros almacenados",
-		debugThemeChanger: "Establecer tema",
-		densityDense: "Densa",
-		densityLabel: "Densidad de hileras",
-		densityMedium: "Medio",
-		densityWide: "Amplia",
-		fontsizeBig: "Grande",
-		fontsizeLabel: "Tamaño de fuente",
-		fontsizeMedium: "Medio",
-		fontsizeSmall: "Pequeño",
-		genericAddNew: "Añadir nuevo",
-		genericApply: "Solicitar",
-		genericCollapse: "Colapso",
-		genericDay: "Día",
-		genericDragAndDrop: "Arrastrar y soltar",
-		genericDropYourData: "Deja tus datos aquí",
-		genericEditable: "Editable",
-		genericEditableField: "Este campo se puede editar",
-		genericEmptyData: "Datos vacíos",
-		genericExpand: "Expandir",
-		genericExperimentalFeat: "Característica experimental",
-		genericFilters: "Filtros",
-		genericInfo: "Información",
-		genericInvalidColor: "Color inválido",
-		genericLayoutNotYetImplemented: "Diseño aún no implementado",
-		genericList: "Lista",
-		genericLoadMoreData: "Cargar más datos",
-		genericMenu: "Menú",
-		genericMonth: "Mes",
-		genericNext: "Próximo",
-		genericOpenInNewTab: "Abrir en una pestaña nueva",
-		genericOpenInNewWindow: "Abrir en Nueva ventana",
-		genericOpenNavigationMenu: "Abrir menú de navegación",
-		genericOptions: "Opciones",
-		genericPrevious: "Previo",
-		genericRemoveFilters: "Quitar filtros",
-		genericSettings: "Ajustes",
-		genericShowRowOptions: "Mostrar opciones de fila",
-		genericShowTooltipInfo: "Mostrar información de información sobre herramientas",
-		genericSortBy: "Ordenar por",
-		genericToday: "Hoy dia",
-		genericToggle: "Palanca",
-		genericTotalsTable: "Tabla de totales",
-		genericTransposeData: "Transponer datos",
-		genericViewAs: "Visto como",
-		genericWeek: "Semana",
-		gridColumn: "Columna",
-		gridComplete: "Completa",
-		gridLabel: "Tipo de cuadrícula",
-		gridNone: "Ninguna",
-		gridRow: "Fila",
-		groupingDisable: "Desactivar agrupación",
-		groupingEnable: "Habilitar agrupación",
-		groupingGroups: "Grupo",
-		pagePage: "Página",
-		pageTotal: "Paginas totales",
-		rowDetail: "Detalle de fila",
-		rowEditableKey: "Clave de registro editable",
-		rowKey: "Grabar clave",
-		rowNext: "Siguiente fila",
-		rowPrevious: "Fila anterior",
-		rowRendered: "Filas renderizadas",
-		rowRows: "Filas",
-		rowSelected: "Filas seleccionadas",
-		rowTotal: "Filas totales",
-		searchFrom: "De",
-		searchSearch: "Buscar",
-		searchTo: "A",
-		totalsAverage: "Promedio",
-		totalsCalculate: "Calcular",
-		totalsCancel: "Cancelar",
-		totalsCount: "Contar",
-		totalsDistinct: "Distinct",
-		totalsFormula: "Fórmula",
-		totalsMaximum: "Máximo",
-		totalsMinimum: "Mínimo",
-		totalsSum: "Suma"
-	}
-};
-const languages = {
-	chinese: chinese,
-	english: english,
-	french: french,
-	italian: italian,
-	polish: polish,
-	russian: russian,
-	spanish: spanish
-};
-
-const dom$4 = document.documentElement;
-/**
- * Handles the translation to different languages.
- * @module KupLanguage
- */
-class KupLanguage {
-  /**
-   * Initializes KupLanguage.
-   * @param {KupLanguageJSON} list - Overrides the default languages.json.
-   * @param {string} name - Starting language. Can be a combination of language and variant (separated by "_").
-   */
-  constructor(list, name) {
-    this.list = list ? list : languages;
-    this.managedComponents = new Set();
-    this.name = name ? name : KupLanguageDefaults.en;
-  }
-  /**
-   * Translates the string to the given language.
-   * When translation fails, the key will be displayed in place of the string - this way it will be easier to correct missing string <-> key bounds.
-   * @param {KupLanguageKey} key - Key of a string to be translated.
-   * @param {string} language - Language to translate the string to. When not provided, KupLanguage current language will be used.
-   * @returns {string} Translated string or initial string (when translation failed).
-   */
-  translate(key, language) {
-    const decodedLanguage = this.decodeLanguage(language ? language : this.name);
-    const name = decodedLanguage.language;
-    const variantName = decodedLanguage.variant;
-    try {
-      let translatedString = null;
-      if (variantName) {
-        const variants = this.list[name].variants;
-        if (variants &&
-          variants[variantName] &&
-          variants[variantName].keys[key]) {
-          translatedString = variants[variantName].keys[key];
-        }
-        else {
-          translatedString = this.list[name].keys[key];
-        }
-      }
-      else {
-        translatedString = this.list[name].keys[key];
-      }
-      if (translatedString) {
-        return translatedString;
-      }
-      else {
-        return invalidKey(key);
-      }
-    }
-    catch (error) {
-      return invalidKey(key);
-    }
-    function invalidKey(key) {
-      dom$4.ketchup.debug.logMessage('kup-language', 'Invalid translation for key (' + key + ')!', KupDebugCategory.WARNING);
-      return key;
-    }
-  }
-  /**
-   * Changes the current Ketch.UP language to the one provided. If the language argument contains a "_", a combo of language and variant will be assumed.
-   * @param {string} language - The new language. If not present in this.list, this function will keep the previous language.
-   */
-  set(language) {
-    if (language && typeof language === 'string') {
-      language = language.toLowerCase();
-    }
-    else {
-      dom$4.ketchup.debug.logMessage('kup-language', "Couldn't set language, invalid string received (" +
-        language +
-        ')!', KupDebugCategory.WARNING);
-      return;
-    }
-    const decodedLanguage = this.decodeLanguage(language);
-    const dLanguage = decodedLanguage.language;
-    const dVariant = decodedLanguage.variant;
-    if (this.list[dLanguage]) {
-      if (dVariant && !this.list[dLanguage].variants[dVariant]) {
-        dom$4.ketchup.debug.logMessage('kup-language', 'Variant not found (' + dVariant + ')!', KupDebugCategory.WARNING);
-        return;
-      }
-    }
-    else {
-      dom$4.ketchup.debug.logMessage('kup-language', 'Language not found (' + dLanguage + ')!', KupDebugCategory.WARNING);
-      return;
-    }
-    this.name = language;
-    this.managedComponents.forEach(function (comp) {
-      if (comp.isConnected) {
-        comp.refresh();
-      }
-    });
-    document.dispatchEvent(new CustomEvent('kup-language-change'));
-  }
-  /**
-   * Checks whether the language is a combination of main language and variant (separated by "_"), returning them splitted in an object.
-   * @param {string} language - Language to check.
-   * @returns {KupLanguageDecode} Object containing language and variant.
-   */
-  decodeLanguage(language) {
-    const result = {
-      language: null,
-      variant: null,
-    };
-    const separator = language.indexOf('_');
-    if (separator > -1) {
-      result.variant = language.substr(separator + 1);
-      result.language = language.substr(0, separator);
-    }
-    else {
-      result.language = language;
-    }
-    return result;
-  }
-  /**
-   * Gets the name of available languages.
-   * @returns {Array<string>} Array of languages' names.
-   */
-  getLanguages() {
-    const languages = [];
-    for (var key in this.list) {
-      if (this.list.hasOwnProperty(key)) {
-        const language = this.list[key];
-        languages.push(key);
-        for (const variantKey in language.variants) {
-          languages.push(key + '_' + variantKey);
-        }
-      }
-    }
-    return languages;
-  }
-  /**
-   * Registers a KupComponent in KupLanguage, in order to be properly handled whenever the language changes.
-   * @param {any} component - The component calling this function.
-   */
-  register(component) {
-    this.managedComponents.add(component.rootElement);
-  }
-  /**
-   * Unregisters a KupComponent, so it won't be handled when the theme changes.
-   *
-   * @param {any} component - The component calling this function.
-   */
-  unregister(component) {
-    if (this.managedComponents) {
-      this.managedComponents.delete(component.rootElement);
-    }
-  }
-}
-
-/**
- * The direction to which ScollableElement can be scrolled.
- */
-var ScrollOnHoverDirection;
-(function (ScrollOnHoverDirection) {
-  ScrollOnHoverDirection["LEFT"] = "left";
-  ScrollOnHoverDirection["RIGHT"] = "right";
-})(ScrollOnHoverDirection || (ScrollOnHoverDirection = {}));
-
-var __classPrivateFieldSet$1 = (undefined && undefined.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
-};
-var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
-};
-var _arrowsContainer, _leftArrows, _rightArrows, _scrollEvent, _mousemoveEvent, _mouseleaveEvent, _rAF, _timeout;
-const dom$3 = document.documentElement;
-/**
- * Lets the user scroll an element's overflow by hovering with the mouse on its left/right edge.
- * @module KupScrollOnHover
- */
-class KupScrollOnHover {
-  /**
-   * Initializes KupScrollOnHover.
-   * @param {number} delay - Sets the time in milliseconds before the scrolling starts when mouse-hovering.
-   * @param {number} step - The amount in pixels for each scroll recursion.
-   */
-  constructor(delay, step) {
-    _arrowsContainer.set(this, void 0);
-    _leftArrows.set(this, void 0);
-    _rightArrows.set(this, void 0);
-    _scrollEvent.set(this, void 0);
-    _mousemoveEvent.set(this, void 0);
-    _mouseleaveEvent.set(this, void 0);
-    _rAF.set(this, void 0);
-    _timeout.set(this, void 0);
-    this.delay = delay ? delay : 500;
-    this.managedElements = new Set();
-    this.step = step ? step : 50;
-    __classPrivateFieldSet$1(this, _arrowsContainer, document.createElement('div'));
-    __classPrivateFieldSet$1(this, _leftArrows, []);
-    __classPrivateFieldSet$1(this, _mouseleaveEvent, (event) => this.stop(event.target));
-    __classPrivateFieldSet$1(this, _mousemoveEvent, (event) => this.start(event));
-    __classPrivateFieldSet$1(this, _rAF, null);
-    __classPrivateFieldSet$1(this, _rightArrows, []);
-    __classPrivateFieldSet$1(this, _scrollEvent, (event) => this.updateChildren(event.target));
-    __classPrivateFieldSet$1(this, _timeout, null);
-    __classPrivateFieldGet$1(this, _arrowsContainer).id = 'kup-scrolling-arrows';
-    for (let index = 1; index < 4; index++) {
-      const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet$1(this, _leftArrows).push(arrow);
-    }
-    for (let index = 1; index < 4; index++) {
-      const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet$1(this, _rightArrows).push(arrow);
-    }
-    __classPrivateFieldGet$1(this, _arrowsContainer).append(__classPrivateFieldGet$1(this, _leftArrows)[2], __classPrivateFieldGet$1(this, _leftArrows)[1], __classPrivateFieldGet$1(this, _leftArrows)[0], __classPrivateFieldGet$1(this, _rightArrows)[0], __classPrivateFieldGet$1(this, _rightArrows)[1], __classPrivateFieldGet$1(this, _rightArrows)[2]);
-    this.container = document.createElement('div');
-    this.container.setAttribute('kup-scroll-on-hover', '');
-    this.container.appendChild(__classPrivateFieldGet$1(this, _arrowsContainer));
-    document.body.appendChild(this.container);
-  }
-  /**
-   * Watches the given element in order to trigger the scroll on hover when conditions are met.
-   * Children nodes with the "hover-scrolling-child" will be watched and scrolled when el scrolls.
-   * @param {KupScrollOnHoverElement} el - Element to watch.
-   */
-  register(el) {
-    el.style.overflowX = 'auto';
-    el.scrollOnHover = {
-      active: false,
-      children: el.querySelectorAll('.hover-scrolling-child'),
-      rect: null,
-      x: 0,
-      y: 0,
-    };
-    if (el.scrollOnHover.children) {
-      el.addEventListener('scroll', __classPrivateFieldGet$1(this, _scrollEvent));
-    }
-    el.addEventListener('mousemove', __classPrivateFieldGet$1(this, _mousemoveEvent));
-    el.addEventListener('mouseleave', __classPrivateFieldGet$1(this, _mouseleaveEvent));
-    this.managedElements.add(el);
-  }
-  /**
-   * Removes the given element from ScrollOnHover watchlist.
-   * @param {KupScrollOnHoverElement} el - Element to unregister.
-   */
-  unregister(el) {
-    el.removeEventListener('scroll', __classPrivateFieldGet$1(this, _scrollEvent));
-    el.removeEventListener('mousemove', __classPrivateFieldGet$1(this, _mousemoveEvent));
-    el.removeEventListener('mouseleave', __classPrivateFieldGet$1(this, _mouseleaveEvent));
-    if (this.managedElements) {
-      this.managedElements.delete(el);
-    }
-  }
-  /**
-   * Returns whether an element was previously registered or not.
-   * @param {KupScrollOnHoverElement} el - Element to test.
-   * @returns {boolean} True if the element was registered.
-   */
-  isRegistered(el) {
-    return !this.managedElements ? false : this.managedElements.has(el);
-  }
-  /**
-   * When called, this function prepares the class for the scrolling process.
-   * @param {MouseEvent} event - The starter event, which should be a MouseMove event.
-   */
-  async start(event) {
-    const el = event.currentTarget;
-    el.scrollOnHover.rect = el.getBoundingClientRect();
-    el.scrollOnHover.x = event.clientX;
-    el.scrollOnHover.y = event.clientY;
-    __classPrivateFieldGet$1(this, _arrowsContainer).style.left = event.clientX + 'px';
-    __classPrivateFieldGet$1(this, _arrowsContainer).style.top = event.clientY + 'px';
-    if (el.scrollOnHover.active || __classPrivateFieldGet$1(this, _timeout)) {
-      return;
-    }
-    let trueWidth = el.clientWidth;
-    if (trueWidth === 0) {
-      trueWidth = el.offsetWidth;
-    }
-    if (el.scrollWidth > trueWidth + 10) {
-      if (trueWidth !== 0 && !el.scrollOnHover.active) {
-        const percRight = trueWidth - trueWidth * 0.1;
-        const percLeft = trueWidth - trueWidth * 0.9;
-        const elOffset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
-        const maxScrollLeft = el.scrollWidth - trueWidth;
-        const direction = elOffset < percLeft && el.scrollLeft !== 0
-          ? ScrollOnHoverDirection.LEFT
-          : elOffset > percRight &&
-            el.scrollLeft !== maxScrollLeft
-            ? ScrollOnHoverDirection.RIGHT
-            : null;
-        if (direction) {
-          for (let i = 0; i < 3; i++) {
-            if (direction === ScrollOnHoverDirection.LEFT) {
-              __classPrivateFieldGet$1(this, _leftArrows)[i].classList.add('kup-activated');
-            }
-            else {
-              __classPrivateFieldGet$1(this, _rightArrows)[i].classList.add('kup-activated');
-            }
-          }
-          __classPrivateFieldSet$1(this, _timeout, setTimeout(() => {
-            el.scrollOnHover.active = true;
-            __classPrivateFieldSet$1(this, _rAF, requestAnimationFrame(function () {
-              dom$3.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
-            }));
-          }, this.delay));
-        }
-      }
-    }
-  }
-  /**
-   * When called, this function stops the scrolling process.
-   * @param {KupScrollOnHoverElement} el - The scrolled element.
-   */
-  async stop(el) {
-    el.scrollOnHover.active = false;
-    cancelAnimationFrame(__classPrivateFieldGet$1(this, _rAF));
-    clearTimeout(__classPrivateFieldGet$1(this, _timeout));
-    __classPrivateFieldSet$1(this, _timeout, null);
-    for (let i = 0; i < __classPrivateFieldGet$1(this, _leftArrows).length; i++) {
-      __classPrivateFieldGet$1(this, _leftArrows)[i].classList.remove('kup-activated');
-      __classPrivateFieldGet$1(this, _leftArrows)[i].classList.remove('kup-animated');
-    }
-    for (let i = 0; i < __classPrivateFieldGet$1(this, _rightArrows).length; i++) {
-      __classPrivateFieldGet$1(this, _rightArrows)[i].classList.remove('kup-activated');
-      __classPrivateFieldGet$1(this, _rightArrows)[i].classList.remove('kup-animated');
-    }
-  }
-  /**
-   * The actual recursive scroll function.
-   * @param {KupScrollOnHoverElement} el - The scrolled element.
-   * @param {number} maxScrollLeft - Left coordinates to which the recursiveness must be stopped.
-   * @param {number} percRight - Range of the right scrollable area.
-   * @param {number} percLeft - Range of the left scrollable area.
-   * @param {ScrollOnHoverDirection} direction - Direction of the scroll.
-   */
-  run(el, maxScrollLeft, percRight, percLeft, direction) {
-    if (!el.scrollOnHover.active) {
-      this.stop(el);
-      return;
-    }
-    const offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
-    if (offset > percLeft && offset < percRight) {
-      this.stop(el);
-      return;
-    }
-    if (direction === ScrollOnHoverDirection.RIGHT && percRight > offset) {
-      this.stop(el);
-      return;
-    }
-    if (direction === ScrollOnHoverDirection.LEFT && percLeft < offset) {
-      this.stop(el);
-      return;
-    }
-    if (el.scrollOnHover.children) {
-      this.updateChildren(el);
-    }
-    let arrow;
-    if (direction === ScrollOnHoverDirection.LEFT) {
-      arrow = __classPrivateFieldGet$1(this, _leftArrows);
-      if (el.scrollLeft === 0) {
-        this.stop(el);
-        return;
-      }
-      el.scrollLeft -= this.step;
-    }
-    else {
-      arrow = __classPrivateFieldGet$1(this, _rightArrows);
-      if (el.scrollLeft === maxScrollLeft) {
-        this.stop(el);
-        return;
-      }
-      el.scrollLeft += this.step;
-    }
-    for (let i = 0; i < arrow.length; i++) {
-      arrow[i].classList.add('kup-animated');
-    }
-    __classPrivateFieldSet$1(this, _rAF, requestAnimationFrame(function () {
-      dom$3.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
-    }));
-  }
-  /**
-   * Scrolls children of the element having the "hover-scrolling-child" class
-   * @param {KupScrollOnHoverElement} el - The scrolled element.
-   */
-  updateChildren(el) {
-    for (let i = 0; i < el.scrollOnHover.children.length; i++) {
-      el.scrollOnHover.children[i].scrollLeft = el.scrollLeft;
-    }
-  }
-}
-_arrowsContainer = new WeakMap(), _leftArrows = new WeakMap(), _rightArrows = new WeakMap(), _scrollEvent = new WeakMap(), _mousemoveEvent = new WeakMap(), _mouseleaveEvent = new WeakMap(), _rAF = new WeakMap(), _timeout = new WeakMap();
-
-const bubbles = {
-	cssVariables: {
-		"--kup-primary-color": "#c18f00",
-		"--kup-secondary-color": "#1d1d1d",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#beb08d",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#ffffff",
-		"--kup-drawer-color": "#000000",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Lato, sans-serif",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "14px",
-		"--kup-text-color": "#2e2e2e",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#eaeaea",
-		"--kup-disabled-color": "#5c5c5c",
-		"--kup-hover-background-color": "#f0f0f0",
-		"--kup-hover-color": "#545454",
-		"--kup-title-background-color": "#f1f3f4",
-		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#505050",
-		"--kup-border-color": "#e0e0e0",
-		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#1D1D1B",
-		"--kup-chart-color-1": "#ff5959",
-		"--kup-chart-color-2": "#e0a0a0",
-		"--kup-chart-color-3": "#8e1010",
-		"--kup-chart-color-4": "#f5f5dc",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "sort-ascending",
-		"--kup-descending-icon": "sort-descending",
-		"--kup-expanded-icon": "chevron-down",
-		"--kup-collapsed-icon": "chevron_right",
-		"--kup-dropdown-icon": "chevron-down",
-		"--kup-clear-icon": "clear",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	customStyles: {
-	},
-	imports: [
-		"@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap')"
-	]
-};
-const cobalt = {
-	cssVariables: {
-		"--kup-primary-color": "#248aff",
-		"--kup-secondary-color": "#65cbe9",
-		"--kup-background-color": "#222222",
-		"--kup-navbar-background-color": "#131313",
-		"--kup-navbar-color": "#65cbe9",
-		"--kup-drawer-background-color": "#2e2e2e",
-		"--kup-drawer-color": "#65cbe9",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Blinker, sans-serif;",
-		"--kup-font-family-monospace": "Andalé Mono, monospace",
-		"--kup-font-size": "14px",
-		"--kup-text-color": "#65cbe9",
-		"--kup-text-on-primary-color": "#f1f7ff",
-		"--kup-text-on-secondary-color": "#000000",
-		"--kup-disabled-background-color": "#3c3c3c",
-		"--kup-disabled-color": "#7e7e7e",
-		"--kup-hover-background-color": "#383838",
-		"--kup-hover-color": "#96e7ff",
-		"--kup-title-background-color": "#2e2e2e",
-		"--kup-title-color": "#f5f5f5",
-		"--kup-icon-color": "#65cbe9",
-		"--kup-border-color": "#535353",
-		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#a4d9f7",
-		"--kup-chart-color-1": "#308aff",
-		"--kup-chart-color-2": "#5eb6d1",
-		"--kup-chart-color-3": "#b1eafb",
-		"--kup-chart-color-4": "#ffffff",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Blinker:wght@200;300;600&display=swap')"
-	]
-};
-const dark = {
-	cssVariables: {
-		"--kup-primary-color": "#82f0e2",
-		"--kup-secondary-color": "#f9ff00",
-		"--kup-background-color": "#2d2d2d",
-		"--kup-navbar-background-color": "#2d2d2d",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#1f1f1f",
-		"--kup-drawer-color": "#f5f5f5",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Lato, sans-serif",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "14px",
-		"--kup-text-color": "#f5f5f5",
-		"--kup-text-on-primary-color": "#555555",
-		"--kup-text-on-secondary-color": "#000000",
-		"--kup-disabled-background-color": "#3c3c3c",
-		"--kup-disabled-color": "#7e7e7e",
-		"--kup-hover-background-color": "#3c3c3c",
-		"--kup-hover-color": "#dddddd",
-		"--kup-title-background-color": "#111111",
-		"--kup-title-color": "#f5f5f5",
-		"--kup-icon-color": "#e0e0e0",
-		"--kup-border-color": "#535353",
-		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#f2e114",
-		"--kup-chart-color-1": "#60c3fc",
-		"--kup-chart-color-2": "#e268d8",
-		"--kup-chart-color-3": "#860bb5",
-		"--kup-chart-color-4": "#1a83e4",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap')"
-	]
-};
-const flamingo = {
-	cssVariables: {
-		"--kup-primary-color": "#e88aab",
-		"--kup-secondary-color": "#7f00e7",
-		"--kup-background-color": "#222222",
-		"--kup-navbar-background-color": "#2d2d2d",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#1f1f1f",
-		"--kup-drawer-color": "#f5f5f5",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Mali, cursive;",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "14px",
-		"--kup-text-color": "#f5f5f5",
-		"--kup-text-on-primary-color": "#000000",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#3c3c3c",
-		"--kup-disabled-color": "#7e7e7e",
-		"--kup-hover-background-color": "#3c3c3c",
-		"--kup-hover-color": "#dddddd",
-		"--kup-title-background-color": "#111111",
-		"--kup-title-color": "#f5f5f5",
-		"--kup-icon-color": "#e0e0e0",
-		"--kup-border-color": "#535353",
-		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#ffd0d8",
-		"--kup-chart-color-1": "#e88aab",
-		"--kup-chart-color-2": "#dc5584",
-		"--kup-chart-color-3": "#c21350",
-		"--kup-chart-color-4": "#c88da1",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Mali:wght@300&display=swap')"
-	]
-};
-const graphite = {
-	cssVariables: {
-		"--kup-primary-color": "#888888",
-		"--kup-secondary-color": "#d91e18",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#535353",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#ffffff",
-		"--kup-drawer-color": "#545454",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Roboto, sans-serif",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "13px",
-		"--kup-text-color": "#545454",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-color": "#5c5c5c",
-		"--kup-disabled-background-color": "#eaeaea",
-		"--kup-hover-background-color": "#f0f0f0",
-		"--kup-hover-color": "#545454",
-		"--kup-title-background-color": "#f0f0f0",
-		"--kup-title-color": "#545454",
-		"--kup-icon-color": "#808080",
-		"--kup-border-color": "#e0e0e0",
-		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#eaa710",
-		"--kup-chart-color-1": "red",
-		"--kup-chart-color-2": "blue",
-		"--kup-chart-color-3": "orange",
-		"--kup-chart-color-4": "green",
-		"--kup-chart-color-5": "yellow",
-		"--kup-chart-color-6": "cyan",
-		"--kup-chart-color-7": "brown",
-		"--kup-chart-color-8": "magenta",
-		"--kup-chart-color-9": "grey",
-		"--kup-chart-color-10": "indigo",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	customStyles: {
-		"KUP-BUTTON": "#kup-component button {\ntext-transform: unset;\n}\n\n"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	}
-};
-const ketchup = {
-	cssVariables: {
-		"--kup-primary-color": "#d64325",
-		"--kup-secondary-color": "#a6192e",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#2e2e2e",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#ffffff",
-		"--kup-drawer-color": "#595959",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Ubuntu, sans-serif",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "14px",
-		"--kup-text-color": "#595959",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#eaeaea",
-		"--kup-disabled-color": "#5c5c5c",
-		"--kup-hover-background-color": "#f0f0f0",
-		"--kup-hover-color": "#545454",
-		"--kup-title-background-color": "#f1f3f4",
-		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#505050",
-		"--kup-border-color": "#e0e0e0",
-		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#eaa710",
-		"--kup-chart-color-1": "#ff5959",
-		"--kup-chart-color-2": "#e0a0a0",
-		"--kup-chart-color-3": "#8e1010",
-		"--kup-chart-color-4": "#f5f5dc",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "sort-ascending",
-		"--kup-descending-icon": "sort-descending",
-		"--kup-expanded-icon": "chevron-down",
-		"--kup-collapsed-icon": "chevron_right",
-		"--kup-dropdown-icon": "chevron-down",
-		"--kup-clear-icon": "clear",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500&display=swap')"
-	]
-};
-const obsidian = {
-	cssVariables: {
-		"--kup-primary-color": "#a6192e",
-		"--kup-secondary-color": "#f5f4f4",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#000000",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#f5f4f4",
-		"--kup-drawer-color": "#4c4c4d",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Open Sans, arial, helvatica",
-		"--kup-font-family-monospace": "Courier New, Courier, monospace",
-		"--kup-font-size": "13px",
-		"--kup-text-color": "#4c4c4d",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#a6192e",
-		"--kup-disabled-background-color": "#ffffff",
-		"--kup-disabled-color": "#4c4c4d",
-		"--kup-hover-background-color": "#f5f4f4",
-		"--kup-hover-color": "#000000",
-		"--kup-title-background-color": "#068a9c",
-		"--kup-title-color": "#ffffff",
-		"--kup-icon-color": "#9d9d9d",
-		"--kup-border-color": "#ededed",
-		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#A6192E",
-		"--kup-spinner-color": "#a6192e",
-		"--kup-chart-color-1": "#735DED",
-		"--kup-chart-color-2": "#00B2CB",
-		"--kup-chart-color-3": "#EDC900",
-		"--kup-chart-color-4": "green",
-		"--kup-chart-color-5": "yellow",
-		"--kup-chart-color-6": "cyan",
-		"--kup-chart-color-7": "brown",
-		"--kup-chart-color-8": "magenta",
-		"--kup-chart-color-9": "grey",
-		"--kup-chart-color-10": "indigo",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap')"
-	]
-};
-const ocean = {
-	cssVariables: {
-		"--kup-primary-color": "#0081c5",
-		"--kup-secondary-color": "#3a8ede",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#001d3e",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#e6f1ff",
-		"--kup-drawer-color": "#1b1b1b",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Open Sans Condensed, sans-serif",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "16px",
-		"--kup-text-color": "#1b1b1b",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#eaeaea",
-		"--kup-disabled-color": "#5c5c5c",
-		"--kup-hover-background-color": "#cfe8ff",
-		"--kup-hover-color": "#545454",
-		"--kup-title-background-color": "#f1f3f4",
-		"--kup-title-color": "#1b1b1b",
-		"--kup-icon-color": "#505050",
-		"--kup-border-color": "#e0e0e0",
-		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#6edeff",
-		"--kup-chart-color-1": "#60c3fc",
-		"--kup-chart-color-2": "#e268d8",
-		"--kup-chart-color-3": "#e48b47",
-		"--kup-chart-color-4": "#81e447",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap')"
-	]
-};
-const print = {
-	cssVariables: {
-		"--kup-primary-color": "#000000",
-		"--kup-secondary-color": "#cccccc",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#000000",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#ffffff",
-		"--kup-drawer-color": "#000000",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Arial, Helvetica, sans-serif",
-		"--kup-font-family-monospace": "Courier New, Courier, monospace",
-		"--kup-font-size": "13px",
-		"--kup-text-color": "#000000",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#000000",
-		"--kup-disabled-background-color": "#ffffff",
-		"--kup-disabled-color": "#000000",
-		"--kup-hover-background-color": "#ffffff",
-		"--kup-hover-color": "#000000",
-		"--kup-title-background-color": "#f1f1f1",
-		"--kup-title-color": "#000000",
-		"--kup-icon-color": "#9d9d9d",
-		"--kup-border-color": "#ededed",
-		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#A6192E",
-		"--kup-spinner-color": "#eaa710",
-		"--kup-chart-color-1": "#735DED",
-		"--kup-chart-color-2": "#00B2CB",
-		"--kup-chart-color-3": "#EDC900",
-		"--kup-chart-color-4": "green",
-		"--kup-chart-color-5": "yellow",
-		"--kup-chart-color-6": "cyan",
-		"--kup-chart-color-7": "brown",
-		"--kup-chart-color-8": "magenta",
-		"--kup-chart-color-9": "grey",
-		"--kup-chart-color-10": "indigo",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	customStyles: {
-		MASTER: "#kup-component #global-filter {\ndisplay: none;\n}\n\n",
-		"KUP-BOX": "#kup-component #box-container .box-wrapper .box:hover {\nbox-shadow: none;\n}\n\n#kup-component #box-container .box-wrapper .box.selected {\nbackground-color: inherit;\n}",
-		"KUP-BUTTON": ":host(:not(.printable)) {\ndisplay: none;\n}\n\n",
-		"KUP-CARD": "",
-		"KUP-DATA-TABLE": "#kup-component sticky-header {\ndisplay: none;\n}\n\n#kup-component kup-paginator {\ndisplay: none;\n}\n\n:host(.cross-selection) #kup-component table tr.selected td.selected, \n#kup-component table td.selected, #kup-component tr.selected td {\nbackground-color: inherit;\nbackground-image: none;\n}\n\n#kup-component table,\n#kup-component .below-wrapper {\noverflow: hidden !important;\n}\n\n:host(.cross-selection) #kup-component tr.selected td:first-of-type,\n:host(.cross-selection) #kup-component th.selected { \nbox-shadow: none !important;\n}\n\n:host(.cross-selection) #kup-component table td.selected,\n:host(.cross-selection) #kup-component table tr.selected td {\nbackground-color: inherit;\n}\n\n:host(.cross-selection) #kup-component table tr.selected td.fixed-column.selected,\n:host(.cross-selection) #kup-component table td.selected.fixed-column, \n:host(.cross-selection) #kup-component table td.selected.fixed-row,\n:host(.cross-selection) #kup-component table tr.selected td.fixed-column, \n:host(.cross-selection) #kup-component table tr.selected td.fixed-row {\nbackground-color: inherit;\nbackground-image: none;\n}\n\n",
-		"KUP-PROGRESS-BAR": "#kup-component .progress-bar {\nbackground: #e7e7e7;\n}\n\n#kup-component .progress-bar-percentage span {\ntext-shadow: 0px 0px 0px hsl(0deg 0% 100%);\n}\n\n",
-		"KUP-TREE": "#kup-component .wrapper {\noverflow: hidden;\n}\n\n#kup-component tr.mdc-ripple-surface::before, \n#kup-component tr.mdc-ripple-surface::after,\n#kup-component td.mdc-ripple-surface::before, \n#kup-component td.mdc-ripple-surface::after,\n#kup-component .kup-tree__node--selected:not(.kup-tree__node--disabled) td {\nbackground-color: var(--kup-background-color);\n}"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	}
-};
-const raj = {
-	cssVariables: {
-		"--kup-primary-color": "rgb(187, 198, 5)",
-		"--kup-secondary-color": "#ffe600",
-		"--kup-background-color": "#000000",
-		"--kup-navbar-background-color": "#000000",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#000000",
-		"--kup-drawer-color": "#ffffff",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "'Rajdhani', sans-serif",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "15px",
-		"--kup-text-color": "#ffffff",
-		"--kup-text-on-primary-color": "#000000",
-		"--kup-text-on-secondary-color": "#000000",
-		"--kup-disabled-background-color": "#151515",
-		"--kup-disabled-color": "#7b7b7b",
-		"--kup-hover-background-color": "#404040",
-		"--kup-hover-color": "#ffffff",
-		"--kup-title-background-color": "#ffe600",
-		"--kup-title-color": "#000000",
-		"--kup-icon-color": "#9d9d9d",
-		"--kup-border-color": "#9d9d9d",
-		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#ffe600",
-		"--kup-chart-color-1": "#ffffff",
-		"--kup-chart-color-2": "rgb(187, 198, 5)",
-		"--kup-chart-color-3": "#ffe600",
-		"--kup-chart-color-4": "#effd02",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "sort-ascending",
-		"--kup-descending-icon": "sort-descending",
-		"--kup-expanded-icon": "chevron-down",
-		"--kup-collapsed-icon": "chevron_right",
-		"--kup-dropdown-icon": "chevron-down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap')"
-	]
-};
-const red = {
-	cssVariables: {
-		"--kup-primary-color": "#a6192e",
-		"--kup-secondary-color": "#ffc107",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#a6192e",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#f5f5f5",
-		"--kup-drawer-color": "#000000",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Open Sans, arial, helvatica",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "13px",
-		"--kup-text-color": "#000000",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#eaeaea",
-		"--kup-disabled-color": "#333333",
-		"--kup-hover-background-color": "#eeeeee",
-		"--kup-hover-color": "#000000",
-		"--kup-title-background-color": "#f1f3f4",
-		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#808080",
-		"--kup-border-color": "#ededed",
-		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#A6192E",
-		"--kup-spinner-color": "#1D1D1B",
-		"--kup-chart-color-1": "#735DED",
-		"--kup-chart-color-2": "#00B2CB",
-		"--kup-chart-color-3": "#EDC900",
-		"--kup-chart-color-4": "#a6192e",
-		"--kup-chart-color-5": "yellow",
-		"--kup-chart-color-6": "cyan",
-		"--kup-chart-color-7": "brown",
-		"--kup-chart-color-8": "magenta",
-		"--kup-chart-color-9": "grey",
-		"--kup-chart-color-10": "indigo",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	customStyles: {
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap')"
-	]
-};
-const sapphire = {
-	cssVariables: {
-		"--kup-primary-color": "#003b77",
-		"--kup-secondary-color": "#ff1414",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#003b77",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#002244",
-		"--kup-drawer-color": "#ffffff",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "20em",
-		"--kup-font-family": "Arial",
-		"--kup-font-family-monospace": "Arial",
-		"--kup-font-size": "13px",
-		"--kup-text-color": "#333333",
-		"--kup-text-on-primary-color": "#fafafa",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#ddecf8",
-		"--kup-disabled-color": "#333333",
-		"--kup-hover-background-color": "#d8ecf6",
-		"--kup-hover-color": "#333333",
-		"--kup-title-background-color": "#003b77",
-		"--kup-title-color": "#ffffff",
-		"--kup-icon-color": "#808080",
-		"--kup-border-color": "#93c4ec",
-		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#a94442",
-		"--kup-spinner-color": "#003b77",
-		"--kup-chart-color-1": "#0781fd",
-		"--kup-chart-color-2": "#002244",
-		"--kup-chart-color-3": "#c6cff8",
-		"--kup-chart-color-4": "#66bdda",
-		"--kup-chart-color-5": "yellow",
-		"--kup-chart-color-6": "cyan",
-		"--kup-chart-color-7": "brown",
-		"--kup-chart-color-8": "magenta",
-		"--kup-chart-color-9": "grey",
-		"--kup-chart-color-10": "indigo",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	customStyles: {
-		"KUP-DATA-TABLE": "#kup-component th { --kup_datatable_th_border: none; font-weight: normal; }"
-	}
-};
-const teal = {
-	cssVariables: {
-		"--kup-primary-color": "#068A9C",
-		"--kup-secondary-color": "#ffc107",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#068A9C",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#ffffff",
-		"--kup-drawer-color": "#000000",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Roboto, sans-serif",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "13px",
-		"--kup-text-color": "#000000",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#eaeaea",
-		"--kup-disabled-color": "#333333",
-		"--kup-hover-background-color": "#f0f0f0",
-		"--kup-hover-color": "#000000",
-		"--kup-title-background-color": "#f1f3f4",
-		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#808080",
-		"--kup-border-color": "#ededed",
-		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#A6192E",
-		"--kup-spinner-color": "#eaa710",
-		"--kup-chart-color-1": "#735DED",
-		"--kup-chart-color-2": "#00B2CB",
-		"--kup-chart-color-3": "#EDC900",
-		"--kup-chart-color-4": "green",
-		"--kup-chart-color-5": "yellow",
-		"--kup-chart-color-6": "cyan",
-		"--kup-chart-color-7": "brown",
-		"--kup-chart-color-8": "magenta",
-		"--kup-chart-color-9": "grey",
-		"--kup-chart-color-10": "indigo",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	}
-};
-const wildlife = {
-	cssVariables: {
-		"--kup-primary-color": "#0fa918",
-		"--kup-secondary-color": "#739f5a",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#095a1f",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#dbfbd5",
-		"--kup-drawer-color": "#000000",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Abel, sans-serif",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "16px",
-		"--kup-text-color": "#000000",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#eaeaea",
-		"--kup-disabled-color": "#5c5c5c",
-		"--kup-hover-background-color": "#63ab46",
-		"--kup-hover-color": "#ffffff",
-		"--kup-title-background-color": "#f1f3f4",
-		"--kup-title-color": "#000000",
-		"--kup-icon-color": "#333333",
-		"--kup-border-color": "#e0e0e0",
-		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#44b383",
-		"--kup-chart-color-1": "#60c3fc",
-		"--kup-chart-color-2": "#e268d8",
-		"--kup-chart-color-3": "#e48b47",
-		"--kup-chart-color-4": "#81e447",
-		"--kup-obj-cursor": "inherit",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	icons: {
-		"--kup-ascending-icon": "arrow_drop_up",
-		"--kup-descending-icon": "arrow_drop_down",
-		"--kup-expanded-icon": "arrow_drop_down",
-		"--kup-collapsed-icon": "menu-right",
-		"--kup-dropdown-icon": "arrow_drop_down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "filter-remove",
-		"--kup-key-icon": "key-variant",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Abel&display=swap')"
-	]
-};
-const test = {
-	cssVariables: {
-		"--kup-primary-color": "#d64325",
-		"--kup-secondary-color": "#ffc107",
-		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#f5f5f5",
-		"--kup-navbar-color": "pink",
-		"--kup-drawer-background-color": "#ffffff",
-		"--kup-drawer-color": "purple",
-		"--kup-navbar-height": "64px",
-		"--kup-drawer-width": "300px",
-		"--kup-font-family": "Architects Daughter, cursive",
-		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "14px",
-		"--kup-text-color": "#2e2e2e",
-		"--kup-text-on-primary-color": "#ffffff",
-		"--kup-text-on-secondary-color": "#ffffff",
-		"--kup-disabled-background-color": "#eaeaea",
-		"--kup-disabled-color": "#5c5c5c",
-		"--kup-hover-background-color": "#f0f0f0",
-		"--kup-hover-color": "#545454",
-		"--kup-title-background-color": "#f1f3f4",
-		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#505050",
-		"--kup-border-color": "#e0e0e0",
-		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#4d9f02",
-		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
-		"--kup-spinner-color": "#eaa710",
-		"--kup-chart-color-1": "#60c3fc",
-		"--kup-chart-color-2": "#e268d8",
-		"--kup-chart-color-3": "#e48b47",
-		"--kup-chart-color-4": "#81e447",
-		"--kup-obj-cursor": "alias",
-		"--kup-drawer-zindex": "90",
-		"--kup-navbar-zindex": "90"
-	},
-	customStyles: {
-		MASTER: "#kup-component { background-color: red; }",
-		"KUP-AUTOCOMPLETE": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-BADGE": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-BUTTON": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-BOX": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-CARD": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-CHECKBOX": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-CHIP": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-COLOR-PICKER": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-COMBOBOX": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-DATA-TABLE": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-DATE-PICKER": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-DRAWER": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-FIELD": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-GAUGE": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-GRID": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-IMAGE": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-LAZY": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-LIST": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-NAV-BAR": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-PROGRESS-BAR": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-RADIO": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-RATING": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-SPINNER": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-SWITCH": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-TAB-BAR": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-TEXT-FIELD": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-TIME-PICKER": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n",
-		"KUP-TREE": "#kup-component {\nborder: 1px solid var(--kup-border-color);\n}\n\n"
-	},
-	icons: {
-		"--kup-ascending-icon": "sort-ascending",
-		"--kup-descending-icon": "sort-descending",
-		"--kup-expanded-icon": "chevron-down",
-		"--kup-collapsed-icon": "chevron_right",
-		"--kup-dropdown-icon": "chevron-down",
-		"--kup-clear-icon": "cancel",
-		"--kup-filter-remove-icon": "broom",
-		"--kup-key-icon": "key",
-		"--kup-search-icon": "search"
-	},
-	imports: [
-		"url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap')"
-	]
-};
-const themes = {
-	bubbles: bubbles,
-	cobalt: cobalt,
-	dark: dark,
-	flamingo: flamingo,
-	graphite: graphite,
-	ketchup: ketchup,
-	obsidian: obsidian,
-	ocean: ocean,
-	print: print,
-	raj: raj,
-	red: red,
-	sapphire: sapphire,
-	teal: teal,
-	wildlife: wildlife,
-	test: test
-};
-
-const kupThemeCss = "#kup-debug-widget{position:fixed;top:0;left:0;z-index:200}[kup-dialog]{background-color:var(--kup-background-color);margin:0;position:fixed;transition:none;max-height:95vh;max-width:95vw}[kup-dialog].kup-resizable{border:3px outset var(--kup-title-background-color)}#kup-scrolling-arrows{position:fixed;top:50%;left:50%;pointer-events:none;z-index:9999}#kup-scrolling-arrows .kup-left-scrolling-arrow,#kup-scrolling-arrows .kup-right-scrolling-arrow{position:absolute;width:0;height:0;visibility:hidden}#kup-scrolling-arrows .kup-left-scrolling-arrow{border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid var(--kup-primary-color);transform:translate(30px, -10px) translateZ(0)}#kup-scrolling-arrows .kup-right-scrolling-arrow{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid var(--kup-primary-color);transform:translate(-30px, -10px) translateZ(0)}#kup-scrolling-arrows .kup-left-scrolling-arrow.kup-activated{visibility:visible}#kup-scrolling-arrows .kup-left-scrolling-arrow.kup-activated.kup-animated.kup-arrow-1{-webkit-animation:kup-pulseleft 1.2s infinite;animation:kup-pulseleft 1.2s infinite;animation-delay:0.4s}#kup-scrolling-arrows .kup-left-scrolling-arrow.kup-activated.kup-animated.kup-arrow-2{-webkit-animation:kup-pulseleft 1.2s infinite;animation:kup-pulseleft 1.2s infinite;animation-delay:0.2s}#kup-scrolling-arrows .kup-left-scrolling-arrow.kup-activated.kup-animated.kup-arrow-3{-webkit-animation:kup-pulseleft 1.2s infinite;animation:kup-pulseleft 1.2s infinite}#kup-scrolling-arrows .kup-right-scrolling-arrow.kup-activated{visibility:visible}#kup-scrolling-arrows .kup-right-scrolling-arrow.kup-activated.kup-animated.kup-arrow-1{-webkit-animation:kup-pulseright 1.2s infinite;animation:kup-pulseright 1.2s infinite;animation-delay:0.4s}#kup-scrolling-arrows .kup-right-scrolling-arrow.kup-activated.kup-animated.kup-arrow-2{-webkit-animation:kup-pulseright 1.2s infinite;animation:kup-pulseright 1.2s infinite;animation-delay:0.2s}#kup-scrolling-arrows .kup-right-scrolling-arrow.kup-activated.kup-animated.kup-arrow-3{-webkit-animation:kup-pulseright 1.2s infinite;animation:kup-pulseright 1.2s infinite}@-moz-keyframes kup-pulseleft{0%{opacity:0.2;transform:translate(30px, -10px)}100%{opacity:1;transform:translate(10px, -10px)}}@-webkit-keyframes kup-pulseleft{0%{opacity:0.2;transform:translate(30px, -10px)}100%{opacity:1;transform:translate(10px, -10px)}}@-o-keyframes kup-pulseleft{0%{opacity:0.2;transform:translate(30px, -10px)}100%{opacity:1;transform:translate(10px, -10px)}}@keyframes kup-pulseleft{0%{opacity:0.2;transform:translate(30px, -10px)}100%{opacity:1;transform:translate(10px, -10px)}}@-moz-keyframes kup-pulseright{0%{opacity:0.2;transform:translate(-30px, -10px)}100%{opacity:1;transform:translate(-10px, -10px)}}@-webkit-keyframes kup-pulseright{0%{opacity:0.2;transform:translate(-30px, -10px)}100%{opacity:1;transform:translate(-10px, -10px)}}@-o-keyframes kup-pulseright{0%{opacity:0.2;transform:translate(-30px, -10px)}100%{opacity:1;transform:translate(-10px, -10px)}}@keyframes kup-pulseright{0%{opacity:0.2;transform:translate(-30px, -10px)}100%{opacity:1;transform:translate(-10px, -10px)}}";
-
-/**
- * Variable used to fetch the MASTER customStyle (used in every component).
- */
-const masterCustomStyle = 'MASTER';
-/**
- * List of all colors.
- */
-var KupThemeColorValues;
-(function (KupThemeColorValues) {
-  KupThemeColorValues["PRIMARY"] = "--kup-primary-color";
-  KupThemeColorValues["SECONDARY"] = "--kup-secondary-color";
-  KupThemeColorValues["BACKGROUND"] = "--kup-background-color";
-  KupThemeColorValues["NAV_BAR"] = "--kup-navbar-color";
-  KupThemeColorValues["NAV_BAR_BACKGROUND"] = "--kup-navbar-background-color";
-  KupThemeColorValues["DRAWER_BACKGROUND"] = "--kup-drawer-background-color";
-  KupThemeColorValues["TEXT"] = "--kup-text-color";
-  KupThemeColorValues["TEXT_ON_PRIMARY"] = "--kup-text-on-primary-color";
-  KupThemeColorValues["TEXT_ON_SECONDARY"] = "--kup-text-on-secondary-color";
-  KupThemeColorValues["DISABLED_BACKGROUND"] = "--kup-disabled-background-color";
-  KupThemeColorValues["DISABLED"] = "--kup-disabled-color";
-  KupThemeColorValues["HOVER_BACKGROUND"] = "--kup-hover-background-color";
-  KupThemeColorValues["HOVER"] = "--kup-hover-color";
-  KupThemeColorValues["TITLE_BACKGROUND"] = "--kup-title-background-color";
-  KupThemeColorValues["TITLE"] = "--kup-title-color";
-  KupThemeColorValues["ICON"] = "--kup-icon-color";
-  KupThemeColorValues["BORDER"] = "--kup-border-color";
-  KupThemeColorValues["INFO"] = "--kup-info-color";
-  KupThemeColorValues["SUCCESS"] = "--kup-success-color";
-  KupThemeColorValues["WARNING"] = "--kup-warning-color";
-  KupThemeColorValues["DANGER"] = "--kup-danger-color";
-  KupThemeColorValues["SPINNER"] = "--kup-spinner-color";
-  KupThemeColorValues["CHART_1"] = "--kup-chart-color-1";
-  KupThemeColorValues["CHART_2"] = "--kup-chart-color-2";
-  KupThemeColorValues["CHART_3"] = "--kup-chart-color-3";
-  KupThemeColorValues["CHART_4"] = "--kup-chart-color-4";
-})(KupThemeColorValues || (KupThemeColorValues = {}));
-/**
- * List of all icons.
- */
-var KupThemeIconValues;
-(function (KupThemeIconValues) {
-  KupThemeIconValues["ASCENDING"] = "--kup-ascending-icon";
-  KupThemeIconValues["CLEAR"] = "--kup-clear-icon";
-  KupThemeIconValues["COLLAPSED"] = "--kup-collapsed-icon";
-  KupThemeIconValues["DESCENDING"] = "--kup-descending-icon";
-  KupThemeIconValues["DROPDOWN"] = "--kup-dropdown-icon";
-  KupThemeIconValues["EXPANDED"] = "--kup-expanded-icon";
-  KupThemeIconValues["FILTER_REMOVE"] = "--kup-filter-remove-icon";
-  KupThemeIconValues["KEY"] = "--kup-key-icon";
-  KupThemeIconValues["SEARCH"] = "--kup-search-icon";
-})(KupThemeIconValues || (KupThemeIconValues = {}));
-
-const dom$2 = document.documentElement;
-/**
- * Theme manager, handles everything about theming, customStyles and color utilities.
- * @module KupTheme
- */
-class KupTheme {
-  /**
-   * Initializes KupTheme.
-   */
-  constructor(list, name) {
-    this.cssVars = {};
-    this.list = list ? list : themes;
-    this.managedComponents = new Set();
-    this.name = name ? name : 'ketchup';
-    this.styleTag = dom$2
-      .querySelector('head')
-      .appendChild(document.createElement('style'));
-  }
-  /**
-   * Sets the theme using this.name or the function's argument.
-   * @param {string} name - When present, this theme will be set.
-   */
-  set(name, list) {
-    if (name) {
-      this.name = name;
-    }
-    if (list) {
-      this.list = list;
-    }
-    dom$2.ketchup.debug.logMessage('theme manager', 'Setting theme to: ' + this.name + '.');
-    if (!this.list[this.name]) {
-      dom$2.ketchup.debug.logMessage('theme manager', 'Invalid theme name, falling back to default ("ketchup").');
-      this.name = 'ketchup';
-    }
-    this.cssVars = {};
-    this.styleTag.innerText =
-      this.imports() +
-        ' :root[kup-theme="' +
-        this.name +
-        '"]{' +
-        this.cssVariables() +
-        this.icons() +
-        '}' +
-        kupThemeCss;
-    this.customStyle();
-    document.documentElement.setAttribute('kup-theme', this.name);
-    document.dispatchEvent(new CustomEvent('kup-theme-change'));
-  }
-  /**
-   * Gets the name of available themes (filters out themes named "test").
-   * @returns {Array<string>} Array of themes' names.
-   */
-  getThemes() {
-    const themes = [];
-    for (var key in this.list) {
-      if (this.list.hasOwnProperty(key)) {
-        if (key !== 'test') {
-          themes.push(key);
-        }
-      }
-    }
-    return themes;
-  }
-  /**
-   * Sets the CSS variables of the theme.
-   */
-  imports() {
-    const imports = this.list[this.name].imports
-      ? this.list[this.name].imports
-      : [];
-    let css = '';
-    for (let index = 0; index < imports.length; index++) {
-      css += '@import ' + imports[index] + ';';
-    }
-    return css;
-  }
-  /**
-   * Sets the CSS variables of the theme.
-   */
-  cssVariables() {
-    const variables = this.list[this.name].cssVariables;
-    let css = '';
-    for (let key in variables) {
-      if (variables.hasOwnProperty(key)) {
-        const val = variables[key];
-        this.cssVars[key] = val;
-        css += key + ': ' + val + ';';
-        if (key.indexOf('color') > -1) {
-          const computedColor = this.colorCheck(val);
-          const rgbKey = key + '-rgb';
-          const hKey = key + '-h';
-          const sKey = key + '-s';
-          const lKey = key + '-l';
-          const rgbVal = computedColor.rgbValues;
-          const hue = computedColor.hue;
-          const saturation = computedColor.saturation;
-          const lightness = computedColor.lightness;
-          this.cssVars[rgbKey] = rgbVal;
-          this.cssVars[hKey] = hue;
-          this.cssVars[lKey] = lightness;
-          this.cssVars[sKey] = saturation;
-          css += rgbKey + ': ' + rgbVal + ';';
-          css += hKey + ': ' + hue + ';';
-          css += lKey + ': ' + lightness + ';';
-          css += sKey + ': ' + saturation + ';';
-        }
-      }
-    }
-    return css;
-  }
-  /**
-   * Sets the icon variables of the theme.
-   */
-  icons() {
-    const icons = this.list[this.name].icons;
-    let css = '';
-    for (var key in icons) {
-      if (icons.hasOwnProperty(key)) {
-        const val = `url('${getAssetPath(`./assets/svg/${icons[key]}.svg`)}') no-repeat center`;
-        this.cssVars[key] = val;
-        css += key + ': ' + val + ';';
-      }
-    }
-    return css;
-  }
-  /**
-   * Refreshed managed components to apply theme customStyles.
-   */
-  customStyle() {
-    this.managedComponents.forEach(function (comp) {
-      if (comp.isConnected) {
-        comp.refresh();
-      }
-    });
-  }
-  /**
-   * This method will just refresh the current theme.
-   */
-  refresh() {
-    try {
-      this.styleTag.innerText =
-        ':root[kup-theme="' +
-          this.name +
-          '"]{' +
-          this.cssVariables() +
-          this.icons() +
-          '}';
-      this.customStyle();
-      dom$2.ketchup.debug.logMessage('kup-theme', 'Theme ' + dom$2.getAttribute('kup-theme') + ' refreshed.');
-      document.dispatchEvent(new CustomEvent('kup-theme-refresh'));
-    }
-    catch (error) {
-      dom$2.ketchup.debug.logMessage('kup-theme', 'Theme not refreshed.', KupDebugCategory.WARNING);
-    }
-  }
-  /**
-   * Registers a KupComponent in KupTheme, in order to be properly handled whenever the theme changes.
-   * @param {any} comp - The component calling this function.
-   */
-  register(comp) {
-    this.managedComponents.add(comp.rootElement);
-  }
-  /**
-   * Unregisters a KupComponent, so it won't be handled when the theme changes.
-   * @param {any} comp - The component calling this function.
-   */
-  unregister(comp) {
-    if (this.managedComponents) {
-      this.managedComponents.delete(comp.rootElement);
-    }
-  }
-  /**
-   * Combines theme's and component's customStyles, returning the result.
-   * @param comp - The component calling this function.
-   * @returns {string} Combined customStyle.
-   */
-  setCustomStyle(comp) {
-    const styles = this.list[this.name].customStyles;
-    let completeStyle = '';
-    if (styles && styles[masterCustomStyle]) {
-      completeStyle += styles[masterCustomStyle];
-    }
-    if (styles && styles[comp.tagName]) {
-      completeStyle += ' ' + styles[comp.tagName];
-    }
-    if (comp.customStyle) {
-      completeStyle += ' ' + comp.customStyle;
-    }
-    return completeStyle ? completeStyle : null;
-  }
-  /**
-   * Checks whether on a given color the text should be white or black.
-   * @param {string} color - Color used to check the contrast.
-   * @returns {string} "white" or "black".
-   */
-  colorContrast(color) {
-    color = this.colorCheck(color).rgbColor;
-    const colorValues = color.replace(/[^\d,.]/g, '').split(',');
-    const brightness = Math.round((parseInt(colorValues[0]) * 299 +
-      parseInt(colorValues[1]) * 587 +
-      parseInt(colorValues[2]) * 114) /
-      1000);
-    return brightness > 125 ? 'black' : 'white';
-  }
-  /**
-   * Generates a random HEX color.
-   * @param {number} brightness - Brightness of the color generated (0-255).
-   * @returns {string} Random HEX color.
-   */
-  randomColor(brightness) {
-    function randomChannel(brightness) {
-      var r = 255 - brightness;
-      var n = 0 | (Math.random() * r + brightness);
-      var s = n.toString(16);
-      return s.length == 1 ? '0' + s : s;
-    }
-    return ('#' +
-      randomChannel(brightness) +
-      randomChannel(brightness) +
-      randomChannel(brightness));
-  }
-  /**
-   * Sets a random theme between those specified in this.list (excludes "print" and "test").
-   */
-  randomTheme() {
-    let themes = [];
-    for (var key in this.list) {
-      if (this.list.hasOwnProperty(key)) {
-        if (key !== 'test' && key !== 'print') {
-          themes.push(key);
-        }
-      }
-    }
-    if (themes.length > 0) {
-      this.set(themes[Math.floor(Math.random() * Math.floor(themes.length))]);
-    }
-    else {
-      dom$2.ketchup.debug.logMessage('kup-theme', "Couldn't set a random theme: no themes available!", KupDebugCategory.WARNING);
-    }
-  }
-  /**
-   * Returns HEX, RGB and RGB values from a given color.
-   * @param {string} color - Color.
-   * @returns {KupThemeColor} Object of color values: hexColor ("#ffffff"), hslColor ("hsl(255,100%,100%)"), hslValues ("255,100%,100%"), rgbColor ("rgb(255,255,255)") and rgbValues ("255,255,255").
-   */
-  colorCheck(color) {
-    //Testing whether the color is transparent, if it is a fall back value will be returned matching the background-color
-    if (color === 'transparent') {
-      color = this.cssVars['--kup-background-color'];
-      dom$2.ketchup.debug.logMessage('theme manager', 'Received TRANSPARENT color, converted to ' +
-        color +
-        ' (theme background).');
-    }
-    let isHex = color.substr(0, 1) === '#';
-    const isHsl = color.substr(0, 3).toLowerCase() === 'hsl';
-    const isRgb = color.substr(0, 3).toLowerCase() === 'rgb';
-    //If true, supposedly it's a code word
-    if (!isHex && !isHsl && !isRgb) {
-      const oldColor = color;
-      color = this.codeToHex(color);
-      isHex = color.substr(0, 1) === '#' ? true : false;
-      dom$2.ketchup.debug.logMessage('theme manager', 'Received CODE NAME color ' +
-        oldColor +
-        ', converted to ' +
-        color +
-        '.');
-    }
-    //Testing whether the color is "hex" value or "hsl"
-    let hexColor = null;
-    let hslColor = null;
-    let hslValues = null;
-    let hue = null;
-    let lightness = null;
-    let saturation = null;
-    if (isHex || isHsl) {
-      const oldColor = color;
-      let rgbColor = null;
-      if (isHex) {
-        hexColor = color;
-        rgbColor = this.hexToRgb(color);
-      }
-      else {
-        hslColor = color;
-        const regexp = /hsl\(\s*(\d+)\s*,\s*(\d+(?:\.\d+)?%)\s*,\s*(\d+(?:\.\d+)?%)\)/g;
-        const hsl = regexp.exec(color).slice(1);
-        hslValues = hsl[0] + ',' + hsl[1] + ',' + hsl[2];
-        hue = hsl[0];
-        saturation = hsl[2];
-        lightness = hsl[1];
-        const h = parseInt(hue.replace('deg', ''));
-        const s = parseInt(saturation.replace('%', '')) / 100;
-        const l = parseInt(lightness.replace('%', '')) / 100;
-        rgbColor = this.hslToRgb(h, s, l);
-      }
-      try {
-        color =
-          'rgb(' +
-            rgbColor.r +
-            ',' +
-            rgbColor.g +
-            ',' +
-            rgbColor.b +
-            ')';
-        if (isHex) {
-          const hsl = this.rgbToHsl(rgbColor.r, rgbColor.g, rgbColor.b);
-          hue = hsl.h.toString();
-          saturation = hsl.s.toString() + '%';
-          lightness = hsl.l.toString() + '%';
-          hslValues = hue + ',' + saturation + ',' + lightness;
-          hslColor = 'hsl(' + hslValues + ')';
-        }
-        else {
-          hexColor = this.rgbToHex(rgbColor.r, rgbColor.g, rgbColor.b);
-        }
-        dom$2.ketchup.debug.logMessage('theme-manager', 'Received HEX color ' +
-          oldColor +
-          ', converted to ' +
-          color +
-          '.');
-      }
-      catch (error) {
-        dom$2.ketchup.debug.logMessage('theme-manager', 'Invalid color: ' + color + '.');
-      }
-    }
-    let rgbValues = null;
-    const values = color.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/);
-    try {
-      rgbValues = values[1] + ',' + values[2] + ',' + values[3];
-    }
-    catch (error) {
-      dom$2.ketchup.debug.logMessage('theme-manager', 'Color not converted to rgb values: ' + color + '.');
-    }
-    if (!hexColor) {
-      try {
-        hexColor = this.rgbToHex(parseInt(values[1]), parseInt(values[2]), parseInt(values[3]));
-      }
-      catch (error) {
-        dom$2.ketchup.debug.logMessage('theme-manager', 'Color not converted to hex value: ' + color + '.');
-      }
-    }
-    if (!hslColor || !hslValues) {
-      try {
-        const hsl = this.rgbToHsl(parseInt(values[1]), parseInt(values[2]), parseInt(values[3]));
-        hue = hsl.h.toString();
-        saturation = hsl.s.toString() + '%';
-        lightness = hsl.l.toString() + '%';
-        hslValues = hsl.h + ',' + hsl.s + '%,' + hsl.l + '%';
-        hslColor = 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
-      }
-      catch (error) {
-        dom$2.ketchup.debug.logMessage('theme-manager', 'Color not converted to hex value: ' + color + '.');
-      }
-    }
-    return {
-      hexColor: hexColor,
-      hslColor: hslColor,
-      hslValues: hslValues,
-      hue: hue,
-      lightness: lightness,
-      saturation: saturation,
-      rgbColor: color,
-      rgbValues: rgbValues,
-    };
-  }
-  /**
-   * Converts an HEX color to its RGB values.
-   * @param {string} hex - Hex code.
-   * @returns {KupThemeRGBValues} Object containing RGB values.
-   */
-  hexToRgb(hex) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-      ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-      : null;
-  }
-  /**
-   * Converts an HSL color to its RGB values.
-   * @param {number} h - Hue (range [0, 360)).
-   * @param {number} s - Saturation (range [0, 1)).
-   * @param {number} l - Lightness (range [0, 1)).
-   * @returns {Array} RGB values.
-   */
-  hslToRgb(h, s, l) {
-    if (h == undefined) {
-      return { r: 0, g: 0, b: 0 };
-    }
-    let huePrime = h / 60;
-    const chroma = (1 - Math.abs(2 * l - 1)) * s;
-    const secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
-    huePrime = Math.floor(huePrime);
-    let red, green, blue;
-    if (huePrime === 0) {
-      red = chroma;
-      green = secondComponent;
-      blue = 0;
-    }
-    else if (huePrime === 1) {
-      red = secondComponent;
-      green = chroma;
-      blue = 0;
-    }
-    else if (huePrime === 2) {
-      red = 0;
-      green = chroma;
-      blue = secondComponent;
-    }
-    else if (huePrime === 3) {
-      red = 0;
-      green = secondComponent;
-      blue = chroma;
-    }
-    else if (huePrime === 4) {
-      red = secondComponent;
-      green = 0;
-      blue = chroma;
-    }
-    else if (huePrime === 5) {
-      red = chroma;
-      green = 0;
-      blue = secondComponent;
-    }
-    const lightnessAdjustment = l - chroma / 2;
-    red += lightnessAdjustment;
-    green += lightnessAdjustment;
-    blue += lightnessAdjustment;
-    return {
-      r: Math.round(red * 255),
-      g: Math.round(green * 255),
-      b: Math.round(blue * 255),
-    };
-  }
-  /**
-   * Converts a color in RGB format to the corresponding HEX color.
-   * @param {number} r - Red channel value.
-   * @param {number} g - Green channel value.
-   * @param {number} b - Blue channel value.
-   * @returns {string} HEX color.
-   */
-  rgbToHex(r, g, b) {
-    return ('#' + this.valueToHex(r) + this.valueToHex(g) + this.valueToHex(b));
-  }
-  /**
-   * Converts a color in RGB format to the corresponding HSL color.
-   * @param {number} r - Red channel value.
-   * @param {number} g - Green channel value.
-   * @param {number} b - Blue channel value.
-   * @returns {KupThemeHSLValues} Object containing HSL values.
-   */
-  rgbToHsl(r, g, b) {
-    // Make r, g, and b fractions of 1
-    r /= 255;
-    g /= 255;
-    b /= 255;
-    // Find greatest and smallest channel values
-    const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
-    let h = 0, s = 0, l = 0;
-    // Calculate hue
-    // No difference
-    if (delta == 0)
-      h = 0;
-    // Red is max
-    else if (cmax == r)
-      h = ((g - b) / delta) % 6;
-    // Green is max
-    else if (cmax == g)
-      h = (b - r) / delta + 2;
-    // Blue is max
-    else
-      h = (r - g) / delta + 4;
-    h = Math.round(h * 60);
-    // Make negative hues positive behind 360°
-    if (h < 0)
-      h += 360;
-    // Calculate lightness
-    l = (cmax + cmin) / 2;
-    // Calculate saturation
-    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-    // Multiply l and s by 100
-    s = +(s * 100).toFixed(1);
-    l = +(l * 100).toFixed(1);
-    return { h: h, s: s, l: l };
-  }
-  /**
-   * Converts a single RGB value to the corresponding HEX value.
-   * @param {number} c - Color value.
-   * @returns {string} HEX value.
-   */
-  valueToHex(c) {
-    const hex = c.toString(16);
-    return hex.length == 1 ? '0' + hex : hex;
-  }
-  /**
-   * Converts a color code word to the corresponding HEX value.
-   * @param {string} color - Color code word.
-   * @returns {string} HEX value.
-   */
-  codeToHex(color) {
-    const colorCodes = {
-      aliceblue: '#f0f8ff',
-      antiquewhite: '#faebd7',
-      aqua: '#00ffff',
-      aquamarine: '#7fffd4',
-      azure: '#f0ffff',
-      beige: '#f5f5dc',
-      bisque: '#ffe4c4',
-      black: '#000000',
-      blanchedalmond: '#ffebcd',
-      blue: '#0000ff',
-      blueviolet: '#8a2be2',
-      brown: '#a52a2a',
-      burlywood: '#deb887',
-      cadetblue: '#5f9ea0',
-      chartreuse: '#7fff00',
-      chocolate: '#d2691e',
-      coral: '#ff7f50',
-      cornflowerblue: '#6495ed',
-      cornsilk: '#fff8dc',
-      crimson: '#dc143c',
-      cyan: '#00ffff',
-      darkblue: '#00008b',
-      darkcyan: '#008b8b',
-      darkgoldenrod: '#b8860b',
-      darkgray: '#a9a9a9',
-      darkgreen: '#006400',
-      darkgrey: '#a9a9a9',
-      darkkhaki: '#bdb76b',
-      darkmagenta: '#8b008b',
-      darkolivegreen: '#556b2f',
-      darkorange: '#ff8c00',
-      darkorchid: '#9932cc',
-      darkred: '#8b0000',
-      darksalmon: '#e9967a',
-      darkseagreen: '#8fbc8f',
-      darkslateblue: '#483d8b',
-      darkslategray: '#2f4f4f',
-      darkslategrey: '#2f4f4f',
-      darkturquoise: '#00ced1',
-      darkviolet: '#9400d3',
-      deeppink: '#ff1493',
-      deepskyblue: '#00bfff',
-      dimgray: '#696969',
-      dimgrey: '#696969',
-      dodgerblue: '#1e90ff',
-      firebrick: '#b22222',
-      floralwhite: '#fffaf0',
-      forestgreen: '#228b22',
-      fuchsia: '#ff00ff',
-      gainsboro: '#dcdcdc',
-      ghostwhite: '#f8f8ff',
-      goldenrod: '#daa520',
-      gold: '#ffd700',
-      gray: '#808080',
-      green: '#008000',
-      greenyellow: '#adff2f',
-      grey: '#808080',
-      honeydew: '#f0fff0',
-      hotpink: '#ff69b4',
-      indianred: '#cd5c5c',
-      indigo: '#4b0082',
-      ivory: '#fffff0',
-      khaki: '#f0e68c',
-      lavenderblush: '#fff0f5',
-      lavender: '#e6e6fa',
-      lawngreen: '#7cfc00',
-      lemonchiffon: '#fffacd',
-      lightblue: '#add8e6',
-      lightcoral: '#f08080',
-      lightcyan: '#e0ffff',
-      lightgoldenrodyellow: '#fafad2',
-      lightgray: '#d3d3d3',
-      lightgreen: '#90ee90',
-      lightgrey: '#d3d3d3',
-      lightpink: '#ffb6c1',
-      lightsalmon: '#ffa07a',
-      lightseagreen: '#20b2aa',
-      lightskyblue: '#87cefa',
-      lightslategray: '#778899',
-      lightslategrey: '#778899',
-      lightsteelblue: '#b0c4de',
-      lightyellow: '#ffffe0',
-      lime: '#00ff00',
-      limegreen: '#32cd32',
-      linen: '#faf0e6',
-      magenta: '#ff00ff',
-      maroon: '#800000',
-      mediumaquamarine: '#66cdaa',
-      mediumblue: '#0000cd',
-      mediumorchid: '#ba55d3',
-      mediumpurple: '#9370db',
-      mediumseagreen: '#3cb371',
-      mediumslateblue: '#7b68ee',
-      mediumspringgreen: '#00fa9a',
-      mediumturquoise: '#48d1cc',
-      mediumvioletred: '#c71585',
-      midnightblue: '#191970',
-      mintcream: '#f5fffa',
-      mistyrose: '#ffe4e1',
-      moccasin: '#ffe4b5',
-      navajowhite: '#ffdead',
-      navy: '#000080',
-      oldlace: '#fdf5e6',
-      olive: '#808000',
-      olivedrab: '#6b8e23',
-      orange: '#ffa500',
-      orangered: '#ff4500',
-      orchid: '#da70d6',
-      palegoldenrod: '#eee8aa',
-      palegreen: '#98fb98',
-      paleturquoise: '#afeeee',
-      palevioletred: '#db7093',
-      papayawhip: '#ffefd5',
-      peachpuff: '#ffdab9',
-      peru: '#cd853f',
-      pink: '#ffc0cb',
-      plum: '#dda0dd',
-      powderblue: '#b0e0e6',
-      purple: '#800080',
-      rebeccapurple: '#663399',
-      red: '#ff0000',
-      rosybrown: '#bc8f8f',
-      royalblue: '#4169e1',
-      saddlebrown: '#8b4513',
-      salmon: '#fa8072',
-      sandybrown: '#f4a460',
-      seagreen: '#2e8b57',
-      seashell: '#fff5ee',
-      sienna: '#a0522d',
-      silver: '#c0c0c0',
-      skyblue: '#87ceeb',
-      slateblue: '#6a5acd',
-      slategray: '#708090',
-      slategrey: '#708090',
-      snow: '#fffafa',
-      springgreen: '#00ff7f',
-      steelblue: '#4682b4',
-      tan: '#d2b48c',
-      teal: '#008080',
-      thistle: '#d8bfd8',
-      tomato: '#ff6347',
-      turquoise: '#40e0d0',
-      violet: '#ee82ee',
-      wheat: '#f5deb3',
-      white: '#ffffff',
-      whitesmoke: '#f5f5f5',
-      yellow: '#ffff00',
-      yellowgreen: '#9acd32',
-    };
-    if (colorCodes[color.toLowerCase()]) {
-      return colorCodes[color.toLowerCase()];
-    }
-    else {
-      dom$2.ketchup.debug.logMessage('theme manager', 'Could not decode color ' + color + '!');
-      return color;
-    }
-  }
-}
-
-/**
- * Modifiers to listen to in Keyboard Event in order to trigger the toolbars.
- */
-var KupToolbarModifierKeys;
-(function (KupToolbarModifierKeys) {
-  KupToolbarModifierKeys["ALT"] = "altKey";
-  KupToolbarModifierKeys["CTRL"] = "ctrlKey";
-  KupToolbarModifierKeys["SHIFT"] = "shiftKey";
-})(KupToolbarModifierKeys || (KupToolbarModifierKeys = {}));
-
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
-};
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
-};
-var _keyEvent;
-const dom$1 = document.documentElement;
-/**
- * Handles component's toolbar.
- * @module KupToolbar
- */
-class KupToolbar {
-  /**
-   * Initializes KupToolbar.
-   */
-  constructor() {
-    _keyEvent.set(this, void 0);
-    this.active = false;
-    this.managedElements = new Set();
-    this.modifiers = [
-      KupToolbarModifierKeys.ALT,
-      KupToolbarModifierKeys.CTRL,
-    ];
-    __classPrivateFieldSet(this, _keyEvent, function (e) {
-      const toolbar = dom$1.ketchup.toolbar;
-      if (toolbar.managedElements) {
-        for (let index = 0; index < toolbar.modifiers.length; index++) {
-          if (toolbar.modifiers[index] ===
-            KupToolbarModifierKeys.CTRL &&
-            e.metaKey) {
-            continue;
-          }
-          else {
-            if (!e[toolbar.modifiers[index]]) {
-              {
-                if (toolbar.active) {
-                  toolbar.hide();
-                }
-                return;
-              }
-            }
-          }
-        }
-        toolbar.show();
-      }
-    });
-    document.addEventListener('keydown', __classPrivateFieldGet(this, _keyEvent));
-    document.addEventListener('keyup', __classPrivateFieldGet(this, _keyEvent));
-  }
-  /**
-   * Shows components' toolbar.
-   */
-  show() {
-    this.managedElements.forEach(function (comp) {
-      if (comp.isConnected) {
-        comp.setAttribute('kup-toolbar', '');
-      }
-    });
-    this.active = true;
-  }
-  /**
-   * Hides components' toolbar.
-   */
-  hide() {
-    this.managedElements.forEach(function (comp) {
-      if (comp.isConnected) {
-        comp.removeAttribute('kup-toolbar');
-      }
-    });
-    this.active = false;
-  }
-  /**
-   * Watches the element eligible to move when dragging.
-   * @param {HTMLElement} el - Toolbar-supporting element.
-   */
-  register(el) {
-    this.managedElements.add(el);
-  }
-  /**
-   * Removes the elements from the KupToolbar class watchlist.
-   * @param {HTMLElement[]} elements - Elements to remove.
-   */
-  unregister(elements) {
-    if (this.managedElements) {
-      for (let index = 0; index < elements.length; index++) {
-        this.managedElements.delete(elements[index]);
-      }
-    }
-  }
-  /**
-   * Returns whether an element was previously registered or not.
-   * @param {HTMLElement} el - Element to test.
-   * @returns {boolean} True if the element was registered.
-   */
-  isRegistered(el) {
-    return !this.managedElements ? false : this.managedElements.has(el);
-  }
-}
-_keyEvent = new WeakMap();
-
-var ContentRect_1 = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports, "__esModule", { value: true });
-var ContentRect = function (target) {
-    if ('getBBox' in target) {
-        var box = target.getBBox();
-        return Object.freeze({
-            height: box.height,
-            left: 0,
-            top: 0,
-            width: box.width,
-        });
-    }
-    else { // if (target instanceof HTMLElement) { // also includes all other non-SVGGraphicsElements
-        var styles = window.getComputedStyle(target);
-        return Object.freeze({
-            height: parseFloat(styles.height || '0'),
-            left: parseFloat(styles.paddingLeft || '0'),
-            top: parseFloat(styles.paddingTop || '0'),
-            width: parseFloat(styles.width || '0'),
-        });
-    }
-};
-exports.ContentRect = ContentRect;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29udGVudFJlY3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvQ29udGVudFJlY3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFPQSxJQUFNLFdBQVcsR0FBRyxVQUFDLE1BQWU7SUFDaEMsSUFBSSxTQUFTLElBQUssTUFBNkIsRUFBRTtRQUM3QyxJQUFNLEdBQUcsR0FBSSxNQUE2QixDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQ3JELE9BQU8sTUFBTSxDQUFDLE1BQU0sQ0FBQztZQUNqQixNQUFNLEVBQUUsR0FBRyxDQUFDLE1BQU07WUFDbEIsSUFBSSxFQUFFLENBQUM7WUFDUCxHQUFHLEVBQUUsQ0FBQztZQUNOLEtBQUssRUFBRSxHQUFHLENBQUMsS0FBSztTQUNuQixDQUFDLENBQUM7S0FDTjtTQUFNLEVBQUUsMEZBQTBGO1FBQy9GLElBQU0sTUFBTSxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMvQyxPQUFPLE1BQU0sQ0FBQyxNQUFNLENBQUM7WUFDakIsTUFBTSxFQUFFLFVBQVUsQ0FBQyxNQUFNLENBQUMsTUFBTSxJQUFJLEdBQUcsQ0FBQztZQUN4QyxJQUFJLEVBQUUsVUFBVSxDQUFDLE1BQU0sQ0FBQyxXQUFXLElBQUksR0FBRyxDQUFDO1lBQzNDLEdBQUcsRUFBRSxVQUFVLENBQUMsTUFBTSxDQUFDLFVBQVUsSUFBSSxHQUFHLENBQUM7WUFDekMsS0FBSyxFQUFFLFVBQVUsQ0FBQyxNQUFNLENBQUMsS0FBSyxJQUFJLEdBQUcsQ0FBQztTQUN6QyxDQUFDLENBQUM7S0FDTjtBQUNMLENBQUMsQ0FBQztBQUVPLGtDQUFXIn0=
-});
-
-var ResizeObservation_1 = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports, "__esModule", { value: true });
-
-var ResizeObservation = /** @class */ (function () {
-    function ResizeObservation(target) {
-        this.target = target;
-        this.$$broadcastWidth = this.$$broadcastHeight = 0;
-    }
-    Object.defineProperty(ResizeObservation.prototype, "broadcastWidth", {
-        get: function () {
-            return this.$$broadcastWidth;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ResizeObservation.prototype, "broadcastHeight", {
-        get: function () {
-            return this.$$broadcastHeight;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ResizeObservation.prototype.isActive = function () {
-        var cr = ContentRect_1.ContentRect(this.target);
-        return !!cr
-            && (cr.width !== this.broadcastWidth
-                || cr.height !== this.broadcastHeight);
-    };
-    return ResizeObservation;
-}());
-exports.ResizeObservation = ResizeObservation;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVzaXplT2JzZXJ2YXRpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvUmVzaXplT2JzZXJ2YXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSw2Q0FBNEM7QUFFNUM7SUFlSSwyQkFBWSxNQUFlO1FBQ3ZCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxDQUFDO0lBQ3ZELENBQUM7SUFWRCxzQkFBVyw2Q0FBYzthQUF6QjtZQUNJLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDO1FBQ2pDLENBQUM7OztPQUFBO0lBQ0Qsc0JBQVcsOENBQWU7YUFBMUI7WUFDSSxPQUFPLElBQUksQ0FBQyxpQkFBaUIsQ0FBQztRQUNsQyxDQUFDOzs7T0FBQTtJQU9NLG9DQUFRLEdBQWY7UUFDSSxJQUFNLEVBQUUsR0FBRyx5QkFBVyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUVwQyxPQUFPLENBQUMsQ0FBQyxFQUFFO2VBQ0osQ0FDQyxFQUFFLENBQUMsS0FBSyxLQUFLLElBQUksQ0FBQyxjQUFjO21CQUM3QixFQUFFLENBQUMsTUFBTSxLQUFLLElBQUksQ0FBQyxlQUFlLENBQ3hDLENBQUM7SUFDVixDQUFDO0lBQ0wsd0JBQUM7QUFBRCxDQUFDLEFBN0JELElBNkJDO0FBRVEsOENBQWlCIn0=
-});
-
-var ResizeObserverEntry_1 = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports, "__esModule", { value: true });
-
-var ResizeObserverEntry = /** @class */ (function () {
-    function ResizeObserverEntry(target) {
-        this.target = target;
-        this.contentRect = ContentRect_1.ContentRect(target);
-    }
-    return ResizeObserverEntry;
-}());
-exports.ResizeObserverEntry = ResizeObserverEntry;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVzaXplT2JzZXJ2ZXJFbnRyeS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9SZXNpemVPYnNlcnZlckVudHJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsNkNBQTRDO0FBRTVDO0lBR0ksNkJBQVksTUFBZTtRQUN2QixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLHlCQUFXLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDM0MsQ0FBQztJQUNMLDBCQUFDO0FBQUQsQ0FBQyxBQVBELElBT0M7QUFFUSxrREFBbUIifQ==
-});
-
-var ResizeObserver_1 = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports, "__esModule", { value: true });
-
-
-var resizeObservers = [];
-var ResizeObserver = /** @class */ (function () {
-    function ResizeObserver(callback) {
-        /** @internal */
-        this.$$observationTargets = [];
-        /** @internal */
-        this.$$activeTargets = [];
-        /** @internal */
-        this.$$skippedTargets = [];
-        var message = callbackGuard(callback);
-        if (message) {
-            throw TypeError(message);
-        }
-        this.$$callback = callback;
-    }
-    ResizeObserver.prototype.observe = function (target) {
-        var message = targetGuard('observe', target);
-        if (message) {
-            throw TypeError(message);
-        }
-        var index = findTargetIndex(this.$$observationTargets, target);
-        if (index >= 0) {
-            return;
-        }
-        this.$$observationTargets.push(new ResizeObservation_1.ResizeObservation(target));
-        registerResizeObserver(this);
-    };
-    ResizeObserver.prototype.unobserve = function (target) {
-        var message = targetGuard('unobserve', target);
-        if (message) {
-            throw TypeError(message);
-        }
-        var index = findTargetIndex(this.$$observationTargets, target);
-        if (index < 0) {
-            return;
-        }
-        this.$$observationTargets.splice(index, 1);
-        if (this.$$observationTargets.length === 0) {
-            deregisterResizeObserver(this);
-        }
-    };
-    ResizeObserver.prototype.disconnect = function () {
-        this.$$observationTargets = [];
-        this.$$activeTargets = [];
-        deregisterResizeObserver(this);
-    };
-    return ResizeObserver;
-}());
-exports.ResizeObserver = ResizeObserver;
-function registerResizeObserver(resizeObserver) {
-    var index = resizeObservers.indexOf(resizeObserver);
-    if (index < 0) {
-        resizeObservers.push(resizeObserver);
-        startLoop();
-    }
-}
-function deregisterResizeObserver(resizeObserver) {
-    var index = resizeObservers.indexOf(resizeObserver);
-    if (index >= 0) {
-        resizeObservers.splice(index, 1);
-        checkStopLoop();
-    }
-}
-function callbackGuard(callback) {
-    if (typeof (callback) === 'undefined') {
-        return "Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.";
-    }
-    if (typeof (callback) !== 'function') {
-        return "Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.";
-    }
-}
-function targetGuard(functionName, target) {
-    if (typeof (target) === 'undefined') {
-        return "Failed to execute '" + functionName + "' on 'ResizeObserver': 1 argument required, but only 0 present.";
-    }
-    if (!(target instanceof window.Element)) {
-        return "Failed to execute '" + functionName + "' on 'ResizeObserver': parameter 1 is not of type 'Element'.";
-    }
-}
-function findTargetIndex(collection, target) {
-    for (var index = 0; index < collection.length; index += 1) {
-        if (collection[index].target === target) {
-            return index;
-        }
-    }
-    return -1;
-}
-var gatherActiveObservationsAtDepth = function (depth) {
-    resizeObservers.forEach(function (ro) {
-        ro.$$activeTargets = [];
-        ro.$$skippedTargets = [];
-        ro.$$observationTargets.forEach(function (ot) {
-            if (ot.isActive()) {
-                var targetDepth = calculateDepthForNode(ot.target);
-                if (targetDepth > depth) {
-                    ro.$$activeTargets.push(ot);
-                }
-                else {
-                    ro.$$skippedTargets.push(ot);
-                }
-            }
-        });
-    });
-};
-var hasActiveObservations = function () {
-    return resizeObservers.some(function (ro) { return !!ro.$$activeTargets.length; });
-};
-var hasSkippedObservations = function () {
-    return resizeObservers.some(function (ro) { return !!ro.$$skippedTargets.length; });
-};
-var broadcastActiveObservations = function () {
-    var shallowestTargetDepth = Infinity;
-    resizeObservers.forEach(function (ro) {
-        if (!ro.$$activeTargets.length) {
-            return;
-        }
-        var entries = [];
-        ro.$$activeTargets.forEach(function (obs) {
-            var entry = new ResizeObserverEntry_1.ResizeObserverEntry(obs.target);
-            entries.push(entry);
-            obs.$$broadcastWidth = entry.contentRect.width;
-            obs.$$broadcastHeight = entry.contentRect.height;
-            var targetDepth = calculateDepthForNode(obs.target);
-            if (targetDepth < shallowestTargetDepth) {
-                shallowestTargetDepth = targetDepth;
-            }
-        });
-        ro.$$callback(entries, ro);
-        ro.$$activeTargets = [];
-    });
-    return shallowestTargetDepth;
-};
-var deliverResizeLoopErrorNotification = function () {
-    var errorEvent = new window.ErrorEvent('ResizeLoopError', {
-        message: 'ResizeObserver loop completed with undelivered notifications.',
-    });
-    window.dispatchEvent(errorEvent);
-};
-var calculateDepthForNode = function (target) {
-    var depth = 0;
-    while (target.parentNode) {
-        target = target.parentNode;
-        depth += 1;
-    }
-    return depth;
-};
-var notificationIteration = function () {
-    var depth = 0;
-    gatherActiveObservationsAtDepth(depth);
-    while (hasActiveObservations()) {
-        depth = broadcastActiveObservations();
-        gatherActiveObservationsAtDepth(depth);
-    }
-    if (hasSkippedObservations()) {
-        deliverResizeLoopErrorNotification();
-    }
-};
-var animationFrameCancelToken;
-var startLoop = function () {
-    if (animationFrameCancelToken)
-        return;
-    runLoop();
-};
-var runLoop = function () {
-    animationFrameCancelToken = window.requestAnimationFrame(function () {
-        notificationIteration();
-        runLoop();
-    });
-};
-var checkStopLoop = function () {
-    if (animationFrameCancelToken && !resizeObservers.some(function (ro) { return !!ro.$$observationTargets.length; })) {
-        window.cancelAnimationFrame(animationFrameCancelToken);
-        animationFrameCancelToken = undefined;
-    }
-};
-var install = function () {
-    return window.ResizeObserver = ResizeObserver;
-};
-exports.install = install;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVzaXplT2JzZXJ2ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvUmVzaXplT2JzZXJ2ZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSx5REFBd0Q7QUFFeEQsNkRBQTREO0FBRTVELElBQU0sZUFBZSxHQUFHLEVBQXNCLENBQUM7QUFFL0M7SUFVSSx3QkFBWSxRQUFnQztRQVA1QyxnQkFBZ0I7UUFDVCx5QkFBb0IsR0FBRyxFQUF5QixDQUFDO1FBQ3hELGdCQUFnQjtRQUNULG9CQUFlLEdBQUcsRUFBeUIsQ0FBQztRQUNuRCxnQkFBZ0I7UUFDVCxxQkFBZ0IsR0FBRyxFQUF5QixDQUFDO1FBR2hELElBQU0sT0FBTyxHQUFHLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN4QyxJQUFJLE9BQU8sRUFBRTtZQUNULE1BQU0sU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQzVCO1FBQ0QsSUFBSSxDQUFDLFVBQVUsR0FBRyxRQUFRLENBQUM7SUFDL0IsQ0FBQztJQUVNLGdDQUFPLEdBQWQsVUFBZSxNQUFlO1FBQzFCLElBQU0sT0FBTyxHQUFHLFdBQVcsQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDL0MsSUFBSSxPQUFPLEVBQUU7WUFDVCxNQUFNLFNBQVMsQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUM1QjtRQUNELElBQU0sS0FBSyxHQUFHLGVBQWUsQ0FBQyxJQUFJLENBQUMsb0JBQW9CLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDakUsSUFBSSxLQUFLLElBQUksQ0FBQyxFQUFFO1lBQ1osT0FBTztTQUNWO1FBQ0QsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxJQUFJLHFDQUFpQixDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7UUFDOUQsc0JBQXNCLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVNLGtDQUFTLEdBQWhCLFVBQWlCLE1BQWU7UUFDNUIsSUFBTSxPQUFPLEdBQUcsV0FBVyxDQUFDLFdBQVcsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUNqRCxJQUFJLE9BQU8sRUFBRTtZQUNULE1BQU0sU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQzVCO1FBQ0QsSUFBTSxLQUFLLEdBQUcsZUFBZSxDQUFDLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUNqRSxJQUFJLEtBQUssR0FBRyxDQUFDLEVBQUU7WUFDWCxPQUFPO1NBQ1Y7UUFDRCxJQUFJLENBQUMsb0JBQW9CLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztRQUMzQyxJQUFJLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO1lBQ3hDLHdCQUF3QixDQUFDLElBQUksQ0FBQyxDQUFDO1NBQ2xDO0lBQ0wsQ0FBQztJQUVNLG1DQUFVLEdBQWpCO1FBQ0ksSUFBSSxDQUFDLG9CQUFvQixHQUFHLEVBQUUsQ0FBQztRQUMvQixJQUFJLENBQUMsZUFBZSxHQUFHLEVBQUUsQ0FBQztRQUMxQix3QkFBd0IsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBQ0wscUJBQUM7QUFBRCxDQUFDLEFBbkRELElBbURDO0FBdUpHLHdDQUFjO0FBckpsQixTQUFTLHNCQUFzQixDQUFDLGNBQThCO0lBQzFELElBQU0sS0FBSyxHQUFHLGVBQWUsQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDdEQsSUFBSSxLQUFLLEdBQUcsQ0FBQyxFQUFFO1FBQ1gsZUFBZSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUNyQyxTQUFTLEVBQUUsQ0FBQztLQUNmO0FBQ0wsQ0FBQztBQUVELFNBQVMsd0JBQXdCLENBQUMsY0FBOEI7SUFDNUQsSUFBTSxLQUFLLEdBQUcsZUFBZSxDQUFDLE9BQU8sQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUN0RCxJQUFJLEtBQUssSUFBSSxDQUFDLEVBQUU7UUFDWixlQUFlLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNqQyxhQUFhLEVBQUUsQ0FBQztLQUNuQjtBQUNMLENBQUM7QUFFRCxTQUFTLGFBQWEsQ0FBQyxRQUFnQztJQUNuRCxJQUFJLE9BQU0sQ0FBQyxRQUFRLENBQUMsS0FBSyxXQUFXLEVBQUU7UUFDbEMsT0FBTyxnRkFBZ0YsQ0FBQztLQUMzRjtJQUNELElBQUksT0FBTSxDQUFDLFFBQVEsQ0FBQyxLQUFLLFVBQVUsRUFBRTtRQUNqQyxPQUFPLCtGQUErRixDQUFDO0tBQzFHO0FBQ0wsQ0FBQztBQUVELFNBQVMsV0FBVyxDQUFDLFlBQW9CLEVBQUUsTUFBZTtJQUN0RCxJQUFJLE9BQU0sQ0FBQyxNQUFNLENBQUMsS0FBSyxXQUFXLEVBQUU7UUFDaEMsT0FBTyx3QkFBc0IsWUFBWSxvRUFBaUUsQ0FBQztLQUM5RztJQUNELElBQUksQ0FBQyxDQUFDLE1BQU0sWUFBYSxNQUFjLENBQUMsT0FBTyxDQUFDLEVBQUU7UUFDOUMsT0FBTyx3QkFBc0IsWUFBWSxpRUFBOEQsQ0FBQztLQUMzRztBQUNMLENBQUM7QUFFRCxTQUFTLGVBQWUsQ0FBQyxVQUErQixFQUFFLE1BQWU7SUFDckUsS0FBSyxJQUFJLEtBQUssR0FBRyxDQUFDLEVBQUUsS0FBSyxHQUFHLFVBQVUsQ0FBQyxNQUFNLEVBQUUsS0FBSyxJQUFJLENBQUMsRUFBRTtRQUN2RCxJQUFJLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLEtBQUssTUFBTSxFQUFFO1lBQ3JDLE9BQU8sS0FBSyxDQUFDO1NBQ2hCO0tBQ0o7SUFDRCxPQUFPLENBQUMsQ0FBQyxDQUFDO0FBQ2QsQ0FBQztBQUVELElBQU0sK0JBQStCLEdBQUcsVUFBQyxLQUFhO0lBQ2xELGVBQWUsQ0FBQyxPQUFPLENBQUMsVUFBQyxFQUFFO1FBQ3ZCLEVBQUUsQ0FBQyxlQUFlLEdBQUcsRUFBRSxDQUFDO1FBQ3hCLEVBQUUsQ0FBQyxnQkFBZ0IsR0FBRyxFQUFFLENBQUM7UUFDekIsRUFBRSxDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxVQUFDLEVBQUU7WUFDL0IsSUFBSSxFQUFFLENBQUMsUUFBUSxFQUFFLEVBQUU7Z0JBQ2YsSUFBTSxXQUFXLEdBQUcscUJBQXFCLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDO2dCQUNyRCxJQUFJLFdBQVcsR0FBRyxLQUFLLEVBQUU7b0JBQ3JCLEVBQUUsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO2lCQUMvQjtxQkFBTTtvQkFDSCxFQUFFLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO2lCQUNoQzthQUNKO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDLENBQUMsQ0FBQztBQUNQLENBQUMsQ0FBQztBQUVGLElBQU0scUJBQXFCLEdBQUc7SUFDMUIsT0FBQSxlQUFlLENBQUMsSUFBSSxDQUFDLFVBQUMsRUFBRSxJQUFLLE9BQUEsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUEzQixDQUEyQixDQUFDO0FBQXpELENBQXlELENBQUM7QUFFOUQsSUFBTSxzQkFBc0IsR0FBRztJQUMzQixPQUFBLGVBQWUsQ0FBQyxJQUFJLENBQUMsVUFBQyxFQUFFLElBQUssT0FBQSxDQUFDLENBQUMsRUFBRSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sRUFBNUIsQ0FBNEIsQ0FBQztBQUExRCxDQUEwRCxDQUFDO0FBRS9ELElBQU0sMkJBQTJCLEdBQUc7SUFDaEMsSUFBSSxxQkFBcUIsR0FBRyxRQUFRLENBQUM7SUFDckMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxVQUFDLEVBQUU7UUFDdkIsSUFBSSxDQUFDLEVBQUUsQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUFFO1lBQzVCLE9BQU87U0FDVjtRQUVELElBQU0sT0FBTyxHQUFHLEVBQTJCLENBQUM7UUFDNUMsRUFBRSxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsVUFBQyxHQUFHO1lBQzNCLElBQU0sS0FBSyxHQUFHLElBQUkseUNBQW1CLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQ2xELE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDcEIsR0FBRyxDQUFDLGdCQUFnQixHQUFHLEtBQUssQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDO1lBQy9DLEdBQUcsQ0FBQyxpQkFBaUIsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDLE1BQU0sQ0FBQztZQUNqRCxJQUFNLFdBQVcsR0FBRyxxQkFBcUIsQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUM7WUFDdEQsSUFBSSxXQUFXLEdBQUcscUJBQXFCLEVBQUU7Z0JBQ3JDLHFCQUFxQixHQUFHLFdBQVcsQ0FBQzthQUN2QztRQUNMLENBQUMsQ0FBQyxDQUFDO1FBRUgsRUFBRSxDQUFDLFVBQVUsQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDM0IsRUFBRSxDQUFDLGVBQWUsR0FBRyxFQUFFLENBQUM7SUFDNUIsQ0FBQyxDQUFDLENBQUM7SUFFSCxPQUFPLHFCQUFxQixDQUFDO0FBQ2pDLENBQUMsQ0FBQztBQUVGLElBQU0sa0NBQWtDLEdBQUc7SUFDdkMsSUFBTSxVQUFVLEdBQUcsSUFBSyxNQUFjLENBQUMsVUFBVSxDQUFDLGlCQUFpQixFQUFFO1FBQ2pFLE9BQU8sRUFBRSwrREFBK0Q7S0FDM0UsQ0FBQyxDQUFDO0lBRUgsTUFBTSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsQ0FBQztBQUNyQyxDQUFDLENBQUM7QUFFRixJQUFNLHFCQUFxQixHQUFHLFVBQUMsTUFBWTtJQUN2QyxJQUFJLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDZCxPQUFPLE1BQU0sQ0FBQyxVQUFVLEVBQUU7UUFDdEIsTUFBTSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUM7UUFDM0IsS0FBSyxJQUFJLENBQUMsQ0FBQztLQUNkO0lBQ0QsT0FBTyxLQUFLLENBQUM7QUFDakIsQ0FBQyxDQUFDO0FBRUYsSUFBTSxxQkFBcUIsR0FBRztJQUMxQixJQUFJLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDZCwrQkFBK0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QyxPQUFPLHFCQUFxQixFQUFFLEVBQUU7UUFDNUIsS0FBSyxHQUFHLDJCQUEyQixFQUFFLENBQUM7UUFDdEMsK0JBQStCLENBQUMsS0FBSyxDQUFDLENBQUM7S0FDMUM7SUFFRCxJQUFJLHNCQUFzQixFQUFFLEVBQUU7UUFDMUIsa0NBQWtDLEVBQUUsQ0FBQztLQUN4QztBQUNMLENBQUMsQ0FBQztBQUVGLElBQUkseUJBQTZDLENBQUM7QUFFbEQsSUFBTSxTQUFTLEdBQUc7SUFDZCxJQUFJLHlCQUF5QjtRQUFFLE9BQU87SUFFdEMsT0FBTyxFQUFFLENBQUM7QUFDZCxDQUFDLENBQUM7QUFFRixJQUFNLE9BQU8sR0FBRztJQUNaLHlCQUF5QixHQUFHLE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQztRQUNyRCxxQkFBcUIsRUFBRSxDQUFDO1FBQ3hCLE9BQU8sRUFBRSxDQUFDO0lBQ2QsQ0FBQyxDQUFDLENBQUM7QUFDUCxDQUFDLENBQUM7QUFFRixJQUFNLGFBQWEsR0FBRztJQUNsQixJQUFJLHlCQUF5QixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxVQUFDLEVBQUUsSUFBSyxPQUFBLENBQUMsQ0FBQyxFQUFFLENBQUMsb0JBQW9CLENBQUMsTUFBTSxFQUFoQyxDQUFnQyxDQUFDLEVBQUU7UUFDOUYsTUFBTSxDQUFDLG9CQUFvQixDQUFDLHlCQUF5QixDQUFDLENBQUM7UUFDdkQseUJBQXlCLEdBQUcsU0FBUyxDQUFDO0tBQ3pDO0FBQ0wsQ0FBQyxDQUFDO0FBRUYsSUFBTSxPQUFPLEdBQUc7SUFDWixPQUFDLE1BQWMsQ0FBQyxjQUFjLEdBQUcsY0FBYztBQUEvQyxDQUErQyxDQUFDO0FBR2hELDBCQUFPIn0=
-});
-
-const dom = document.documentElement;
-/**
- * This class controls every other Ketch.UP utility suite.
- * @module KupManager
- */
-class KupManager {
-  /**
-   * Initializes KupManager.
-   */
-  constructor(overrides) {
-    let datesLocale = null, debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogZIndex = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null;
-    if (overrides) {
-      const dates = overrides.dates;
-      const debug = overrides.debug;
-      const dialog = overrides.dialog;
-      const language = overrides.language;
-      const objects = overrides.objects;
-      const scrollOnHover = overrides.scrollOnHover;
-      const theme = overrides.theme;
-      if (dates) {
-        datesLocale = dates.locale ? dates.locale : null;
-      }
-      if (debug) {
-        debugActive = debug.active ? debug.active : null;
-        debugAutoprint = debug.autoPrint ? debug.autoPrint : null;
-        debugLogLimit = debug.logLimit ? debug.logLimit : null;
-      }
-      if (dialog) {
-        dialogZIndex = dialog.zIndex ? dialog.zIndex : null;
-      }
-      if (language) {
-        languageList = language.list ? language.list : null;
-        languageName = language.name ? language.name : null;
-      }
-      if (objects) {
-        objectsList = objects.list ? objects.list : null;
-      }
-      if (scrollOnHover) {
-        scrollOnHoverDelay = scrollOnHover.delay
-          ? scrollOnHover.delay
-          : null;
-        scrollOnHoverStep = scrollOnHover.step
-          ? scrollOnHover.step
-          : null;
-      }
-      if (theme) {
-        themeList = theme.list ? theme.list : null;
-        themeName = theme.name ? theme.name : null;
-      }
-    }
-    this.dates = new KupDates(datesLocale);
-    this.debug = new KupDebug(debugActive, debugAutoprint, debugLogLimit);
-    this.dialog = new KupDialog(dialogZIndex);
-    this.dynamicPosition = new KupDynamicPosition();
-    this.language = new KupLanguage(languageList, languageName);
-    this.magicBox = null;
-    this.overrides = overrides ? overrides : null;
-    this.objects = new KupObjects(objectsList);
-    this.resize = new ResizeObserver_1.ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.contentRect.height && entry.contentRect.width) {
-          entry.target.resizeCallback();
-          this.debug.logMessage('kup-manager (' +
-            entry.target.tagName +
-            '#' +
-            entry.target.id +
-            ')', 'Size changed to x: ' +
-            entry.contentRect.width +
-            ', y: ' +
-            entry.contentRect.height +
-            '.');
-        }
-      });
-    });
-    this.scrollOnHover = new KupScrollOnHover(scrollOnHoverDelay, scrollOnHoverStep);
-    this.utilities = {
-      lastPointerDownPath: null,
-      lastPointerDownString: null,
-    };
-    this.theme = new KupTheme(themeList, themeName);
-    this.toolbar = new KupToolbar();
-    document.addEventListener('pointerdown', (e) => {
-      const paths = e.composedPath();
-      const lastString = paths[0].innerText || paths[0].value;
-      this.utilities.lastPointerDownPath = paths;
-      this.utilities.lastPointerDownString = lastString;
-      if (lastString) {
-        document.dispatchEvent(new CustomEvent('kup-manager-stringfinder', {
-          bubbles: true,
-          detail: { string: lastString },
-        }));
-      }
-    });
-  }
-  /**
-   * Creates kup-magic-box component.
-   */
-  showMagicBox() {
-    if (this.magicBox) {
-      return;
-    }
-    this.magicBox = document.createElement('kup-magic-box');
-    this.magicBox.id = 'kup-magic-box';
-    this.magicBox.style.position = 'fixed';
-    this.magicBox.style.left = 'calc(50% - 350px)';
-    this.magicBox.style.top = 'calc(50% - 150px)';
-    document.body.append(this.magicBox);
-  }
-  /**
-   * Removes kup-magic-box component.
-   */
-  hideMagicBox() {
-    if (!this.magicBox) {
-      return;
-    }
-    this.magicBox.remove();
-    this.magicBox = null;
-  }
-  /**
-   * Creates or removes kup-magic-box component depending on its existence.
-   */
-  toggleMagicBox() {
-    if (!this.magicBox) {
-      this.showMagicBox();
-    }
-    else {
-      this.hideMagicBox();
-    }
-  }
-  /**
-   * Sets both locale and language library-wide.
-   * @param {KupDatesLocales} locale - The supported locale.
-   */
-  setLibraryLocalization(locale) {
-    if (!Object.values(KupDatesLocales).includes(locale)) {
-      this.debug.logMessage('kup-manager', 'Missing locale (' + locale + ')!', KupDebugCategory.ERROR);
-      return;
-    }
-    if (!KupLanguageDefaults[locale]) {
-      this.debug.logMessage('kup-manager', 'Missing language for locale (' + locale + ')!', KupDebugCategory.ERROR);
-      return;
-    }
-    this.dates.setLocale(locale);
-    this.language.set(KupLanguageDefaults[locale]);
-  }
-}
-/**
- * Called by the Ketch.UP components to retrieve the instance of KupManager (or creating a new one when missing).
- * @returns {KupManager} KupManager instance.
- */
-function kupManagerInstance() {
-  if (!dom.ketchup) {
-    const overrides = dom.ketchupInit
-      ? dom.ketchupInit
-      : null;
-    dom.ketchup = new KupManager(overrides);
-    dom.ketchup.theme.set();
-    if (dom.ketchup.debug.active) {
-      dom.ketchup.debug.toggle(dom.ketchup.debug.active);
-    }
-    globalThis.kupManager = dom.ketchup;
-    document.dispatchEvent(new CustomEvent('kup-manager-ready'));
-  }
-  return dom.ketchup;
-}
-
-export { KupThemeIconValues as K, KupDebugCategory as a, kupDynamicPositionAttribute as b, KupThemeColorValues as c, KupLanguageGeneric as d, KupLanguageSearch as e, KupCardSubEvents as f, KupCardIds as g, KupCardCSSClasses as h, KupLanguageRow as i, KupLanguageColumn as j, kupManagerInstance as k, KupCardFamily as l, KupCardProps as m, KupDynamicPositionPlacement as n, KupLanguageGrouping as o, KupLanguageCheckbox as p, KupLanguageTotals as q, KupLanguageFontsize as r, KupLanguageDensity as s, KupLanguageGrid as t, KupLanguagePage as u };