@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/cjs/kup-manager-59ad8bdc.js

@@ -1,4845 +0,0 @@
-'use strict';
-
-const kupObjects = require('./kup-objects-59ea949c.js');
-const index = require('./index-3c471303.js');
-
-/**
- * Category of debug logs.
- */
-exports.KupDebugCategory = void 0;
-(function (KupDebugCategory) {
-  KupDebugCategory["INFO"] = "Informational";
-  KupDebugCategory["WARNING"] = "Warning";
-  KupDebugCategory["ERROR"] = "Error";
-})(exports.KupDebugCategory || (exports.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.
- */
-exports.KupDynamicPositionPlacement = void 0;
-(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";
-})(exports.KupDynamicPositionPlacement || (exports.KupDynamicPositionPlacement = {}));
-
-/**
- * Props of the kup-card component.
- * Used to export every prop in an object.
- */
-exports.KupCardProps = void 0;
-(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.).";
-})(exports.KupCardProps || (exports.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.
- */
-exports.KupCardFamily = void 0;
-(function (KupCardFamily) {
-  KupCardFamily["COLLAPSIBLE"] = "collapsible";
-  KupCardFamily["DIALOG"] = "dialog";
-  KupCardFamily["SCALABLE"] = "scalable";
-  KupCardFamily["STANDARD"] = "standard";
-})(exports.KupCardFamily || (exports.KupCardFamily = {}));
-/**
- * Recurring IDs.
- */
-exports.KupCardIds = void 0;
-(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";
-})(exports.KupCardIds || (exports.KupCardIds = {}));
-/**
- * Recurring CSS classes.
- */
-exports.KupCardCSSClasses = void 0;
-(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";
-})(exports.KupCardCSSClasses || (exports.KupCardCSSClasses = {}));
-/**
- * Internally-handled sub-component events.
- */
-exports.KupCardSubEvents = void 0;
-(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";
-})(exports.KupCardSubEvents || (exports.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.
- */
-exports.KupLanguageCheckbox = void 0;
-(function (KupLanguageCheckbox) {
-  KupLanguageCheckbox["ALL"] = "checkboxAll";
-  KupLanguageCheckbox["CHECKED"] = "checkboxChecked";
-  KupLanguageCheckbox["INDETERMINATE"] = "checkboxIndeterminate";
-  KupLanguageCheckbox["UNCHECKED"] = "checkboxUnchecked";
-})(exports.KupLanguageCheckbox || (exports.KupLanguageCheckbox = {}));
-/**
- * Column related decodes.
- */
-exports.KupLanguageColumn = void 0;
-(function (KupLanguageColumn) {
-  KupLanguageColumn["ADD"] = "columnAdd";
-  KupLanguageColumn["ADD_DESCRIPTION"] = "columnAddDescription";
-  KupLanguageColumn["COLUMNS"] = "columnColumns";
-  KupLanguageColumn["HIDE"] = "columnHide";
-})(exports.KupLanguageColumn || (exports.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).
- */
-exports.KupLanguageDensity = void 0;
-(function (KupLanguageDensity) {
-  KupLanguageDensity["DENSE"] = "densityDense";
-  KupLanguageDensity["LABEL"] = "densityLabel";
-  KupLanguageDensity["MEDIUM"] = "densityMedium";
-  KupLanguageDensity["WIDE"] = "densityWide";
-})(exports.KupLanguageDensity || (exports.KupLanguageDensity = {}));
-/**
- * Font size decodes (data table customization settings).
- */
-exports.KupLanguageFontsize = void 0;
-(function (KupLanguageFontsize) {
-  KupLanguageFontsize["BIG"] = "fontsizeBig";
-  KupLanguageFontsize["LABEL"] = "fontsizeLabel";
-  KupLanguageFontsize["MEDIUM"] = "fontsizeMedium";
-  KupLanguageFontsize["SMALL"] = "fontsizeSmall";
-})(exports.KupLanguageFontsize || (exports.KupLanguageFontsize = {}));
-/**
- * Generic user interface action/messages.
- */
-exports.KupLanguageGeneric = void 0;
-(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";
-})(exports.KupLanguageGeneric || (exports.KupLanguageGeneric = {}));
-/**
- * Grid decodes (data table customization settings).
- */
-exports.KupLanguageGrid = void 0;
-(function (KupLanguageGrid) {
-  KupLanguageGrid["COLUMN"] = "gridColumn";
-  KupLanguageGrid["COMPLETE"] = "gridComplete";
-  KupLanguageGrid["LABEL"] = "gridLabel";
-  KupLanguageGrid["NONE"] = "gridNone";
-  KupLanguageGrid["ROW"] = "gridRow";
-})(exports.KupLanguageGrid || (exports.KupLanguageGrid = {}));
-/**
- * Grouping decodes (data table groups).
- */
-exports.KupLanguageGrouping = void 0;
-(function (KupLanguageGrouping) {
-  KupLanguageGrouping["DISABLE"] = "groupingDisable";
-  KupLanguageGrouping["ENABLE"] = "groupingEnable";
-  KupLanguageGrouping["GROUPS"] = "groupingGroups";
-})(exports.KupLanguageGrouping || (exports.KupLanguageGrouping = {}));
-/**
- * Page related decodes.
- */
-exports.KupLanguagePage = void 0;
-(function (KupLanguagePage) {
-  KupLanguagePage["PAGE"] = "pagePage";
-  KupLanguagePage["TOTAL"] = "pageTotal";
-})(exports.KupLanguagePage || (exports.KupLanguagePage = {}));
-/**
- * Row related decodes.
- */
-exports.KupLanguageRow = void 0;
-(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";
-})(exports.KupLanguageRow || (exports.KupLanguageRow = {}));
-/**
- * Search decodes.
- */
-exports.KupLanguageSearch = void 0;
-(function (KupLanguageSearch) {
-  KupLanguageSearch["FROM"] = "searchFrom";
-  KupLanguageSearch["SEARCH"] = "searchSearch";
-  KupLanguageSearch["TO"] = "searchTo";
-})(exports.KupLanguageSearch || (exports.KupLanguageSearch = {}));
-/**
- * Footer totals decodes (tree and data table).
- */
-exports.KupLanguageTotals = void 0;
-(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";
-})(exports.KupLanguageTotals || (exports.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 = exports.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 exports.KupDebugCategory.ERROR:
-          slot.style.backgroundColor =
-            'rgba(var(--kup-danger-color-rgb), 0.15)';
-          slot.style.borderLeft = '5px solid var(--kup-danger-color)';
-          break;
-        case exports.KupDebugCategory.WARNING:
-          slot.style.backgroundColor =
-            'rgba(var(--kup-warning-color-rgb), 0.15)';
-          slot.style.borderLeft =
-            '5px solid var(--kup-warning-color)';
-          break;
-        case exports.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, exports.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, exports.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, exports.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 === exports.KupDebugCategory.INFO) &&
-      !this.isDebug()) {
-      return;
-    }
-    const date = new Date();
-    if (!category) {
-      category = exports.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 exports.KupDebugCategory.ERROR:
-        console.error(this.formatDate(date) + id + message, obj);
-        window.dispatchEvent(new CustomEvent('kupError', {
-          bubbles: true,
-          detail: { comp, date, message },
-        }));
-        break;
-      case exports.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 : exports.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 ===
-      exports.KupDynamicPositionPlacement.TOP ||
-      el.kupDynamicPosition.placement ===
-        exports.KupDynamicPositionPlacement.TOP_LEFT ||
-      el.kupDynamicPosition.placement ===
-        exports.KupDynamicPositionPlacement.TOP_RIGHT) {
-      el.style.bottom = `${window.innerHeight - top + el.kupDynamicPosition.margin}px`;
-    }
-    else if (el.kupDynamicPosition.placement ===
-      exports.KupDynamicPositionPlacement.BOTTOM ||
-      el.kupDynamicPosition.placement ===
-        exports.KupDynamicPositionPlacement.BOTTOM_LEFT ||
-      el.kupDynamicPosition.placement ===
-        exports.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 ===
-      exports.KupDynamicPositionPlacement.LEFT ||
-      el.kupDynamicPosition.placement ===
-        exports.KupDynamicPositionPlacement.BOTTOM_LEFT ||
-      el.kupDynamicPosition.placement ===
-        exports.KupDynamicPositionPlacement.TOP_LEFT) {
-      el.style.left = `${left}px`;
-    }
-    else if (el.kupDynamicPosition.placement ===
-      exports.KupDynamicPositionPlacement.RIGHT ||
-      el.kupDynamicPosition.placement ===
-        exports.KupDynamicPositionPlacement.BOTTOM_RIGHT ||
-      el.kupDynamicPosition.placement ===
-        exports.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 + ')!', exports.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 +
-        ')!', exports.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 + ')!', exports.KupDebugCategory.WARNING);
-        return;
-      }
-    }
-    else {
-      dom$4.ketchup.debug.logMessage('kup-language', 'Language not found (' + dLanguage + ')!', exports.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.
- */
-exports.KupThemeColorValues = void 0;
-(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";
-})(exports.KupThemeColorValues || (exports.KupThemeColorValues = {}));
-/**
- * List of all icons.
- */
-exports.KupThemeIconValues = void 0;
-(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";
-})(exports.KupThemeIconValues || (exports.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('${index.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.', exports.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!", exports.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 = kupObjects.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 = kupObjects.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 = kupObjects.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 = kupObjects.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 kupObjects.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.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(kupObjects.KupDatesLocales).includes(locale)) {
-      this.debug.logMessage('kup-manager', 'Missing locale (' + locale + ')!', exports.KupDebugCategory.ERROR);
-      return;
-    }
-    if (!KupLanguageDefaults[locale]) {
-      this.debug.logMessage('kup-manager', 'Missing language for locale (' + locale + ')!', exports.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;
-}
-
-exports.kupDynamicPositionAttribute = kupDynamicPositionAttribute;
-exports.kupManagerInstance = kupManagerInstance;