@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/collection/managers/kup-debug/kup-debug.js

@@ -1,18 +1,18 @@
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m")
-    throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _KupDebug_debugWidget;
 import { KupCardFamily, } from "../../components/kup-card/kup-card-declarations";
@@ -24,647 +24,647 @@ const dom = document.documentElement;
  * @module KupDebug
  */
 export 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) {
-    _KupDebug_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(this, _KupDebug_debugWidget, null, "f");
-    document.addEventListener('kup-language-change', () => {
-      if (this.active && __classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
-        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.ketchup.language.getLanguages();
-    const languagesListData = [];
-    for (let index = 0; index < languages.length; index++) {
-      languagesListData.push({
-        id: languages[index],
-        selected: languages[index] === dom.ketchup.language.name
-          ? true
-          : false,
-        value: languages[index],
-      });
-    }
-    const themes = dom.ketchup.theme.getThemes();
-    const themesListData = [];
-    for (let index = 0; index < themes.length; index++) {
-      themesListData.push({
-        id: themes[index],
-        selected: themes[index] === dom.ketchup.theme.name ? true : false,
-        value: themes[index],
-      });
+    /**
+     * 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) {
+        _KupDebug_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(this, _KupDebug_debugWidget, null, "f");
+        document.addEventListener('kup-language-change', () => {
+            if (this.active && __classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
+                this.hideWidget();
+                this.showWidget();
+            }
+        });
     }
-    const locales = dom.ketchup.dates.getLocales();
-    const localesListData = [];
-    for (let index = 0; index < locales.length; index++) {
-      localesListData.push({
-        id: locales[index],
-        selected: locales[index] === dom.ketchup.dates.locale ? true : false,
-        value: locales[index],
-      });
+    /**
+     * 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();
     }
-    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.ketchup.language.translate(KupLanguageDebug.OFF),
-        },
-        {
-          customStyle: ':host {--kup-font-size: 0.875em;}',
-          icon: 'print',
-          id: 'kup-debug-print',
-          title: dom.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.ketchup.language.translate(KupLanguageDebug.AUTOPRINT),
-          toggable: true,
-        },
-        {
-          customStyle: ':host {--kup-font-size: 0.875em;}',
-          icon: 'broom',
-          id: 'kup-debug-clear',
-          title: dom.ketchup.language.translate(KupLanguageDebug.CLEAR),
-        },
-        {
-          customStyle: ':host {--kup-font-size: 0.875em;}',
-          icon: 'delete',
-          id: 'kup-debug-delete',
-          title: dom.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.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.ketchup.language.translate(KupLanguageDebug.DL_ALL),
-          styling: 'flat',
-          title: dom.ketchup.language.translate(KupLanguageDebug.DL_ALL),
-        },
-        {
-          customStyle: ':host {--kup-font-size: 0.875em;}',
-          icon: 'auto-fix',
-          id: 'kup-debug-magic-box',
-          title: dom.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.ketchup.language.translate(KupLanguageDebug.THEME_CHANGER),
-            },
-          },
-          id: 'kup-debug-theme-changer',
-          initialValue: dom.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.ketchup.language.translate(KupLanguageDebug.LANGUAGE_CHANGER),
-            },
-          },
-          id: 'kup-debug-language-changer',
-          initialValue: dom.ketchup.language.name,
-          isSelect: true,
-        },
-        {
-          className: 'kup-full-height',
-          data: {
-            'kup-list': {
-              data: localesListData,
-              id: 'kup-debug-locale-changer-list',
-            },
-            'kup-text-field': {
-              className: 'kup-full-height',
-              emitSubmitEventOnEnter: false,
-              inputType: 'text',
-              label: dom.ketchup.language.translate(KupLanguageDebug.LOCALE_CHANGER),
-            },
-          },
-          id: 'kup-debug-locale-changer',
-          initialValue: dom.ketchup.dates.locale,
-          isSelect: true,
-        },
-      ],
-      textfield: [
-        {
-          className: 'kup-full-height',
-          id: 'kup-debug-log-limit',
-          label: dom.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;} #kup-debug-locale-changer {width: 190px;}';
-    debugWidget.id = 'kup-debug-widget';
-    debugWidget.layoutFamily = KupCardFamily.DIALOG;
-    debugWidget.layoutNumber = 3;
-    debugWidget.sizeX = 'max-content';
-    debugWidget.sizeY = 'auto';
-    const handler = this.handleEvents;
-    debugWidget.addEventListener('kup-card-event', (e) => handler(e, this));
-    this.container.append(debugWidget);
-    __classPrivateFieldSet(this, _KupDebug_debugWidget, debugWidget, "f");
-  }
-  /**
-   * Listens the card events and handles the related actions.
-   * @param {CustomEvent<KupCardEventPayload>} e - kup-card-event.
-   * @param {KupDebug} kupDebug - Instance of the KupDebug class.
-   */
-  handleEvents(e, kupDebug) {
-    const compEvent = e.detail.event;
-    const compID = compEvent.detail.id;
-    switch (compEvent.type) {
-      case 'kup-button-click':
-        switch (compID) {
-          case 'kup-debug-autoprint':
-            kupDebug.autoPrint = !kupDebug.autoPrint;
-            break;
-          case 'kup-debug-clear':
-            kupDebug.widgetClear();
-            __classPrivateFieldGet(kupDebug, _KupDebug_debugWidget, "f").refresh();
-            break;
-          case 'kup-debug-dl-props':
-            kupDebug.getProps().then((res) => {
-              kupDebug.downloadProps(res);
+    /**
+     * Creates the debug widget.
+     */
+    showWidget() {
+        const debugWidget = document.createElement('kup-card');
+        const languages = dom.ketchup.language.getLanguages();
+        const languagesListData = [];
+        for (let index = 0; index < languages.length; index++) {
+            languagesListData.push({
+                id: languages[index],
+                selected: languages[index] === dom.ketchup.language.name
+                    ? true
+                    : false,
+                value: languages[index],
             });
-            break;
-          case 'kup-debug-dl-all':
-            kupDebug.getProps(true).then((res) => {
-              kupDebug.downloadProps(res);
-            });
-            break;
-          case 'kup-debug-delete':
-            kupDebug.dump();
-            break;
-          case 'kup-debug-magic-box':
-            dom.ketchup.toggleMagicBox();
-            break;
-          case 'kup-debug-off':
-            kupDebug.toggle();
-            break;
-          case 'kup-debug-print':
-            kupDebug.widgetClear();
-            kupDebug.widgetPrint();
-            __classPrivateFieldGet(kupDebug, _KupDebug_debugWidget, "f").refresh();
-            break;
-        }
-        break;
-      case 'kup-combobox-itemclick':
-        switch (compID) {
-          case 'kup-debug-language-changer':
-            dom.ketchup.language.set(compEvent.detail.value);
-            break;
-          case 'kup-debug-locale-changer':
-            dom.ketchup.dates.setLocale(compEvent.detail.value);
-            dom.ketchup.math.setLocale(compEvent.detail.value);
-            break;
-          case 'kup-debug-theme-changer':
-            dom.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) {
-              kupDebug.logLimit = 1;
-            }
-            else {
-              kupDebug.logLimit = compEvent.detail.value;
-            }
-            break;
+        const themes = dom.ketchup.theme.getThemes();
+        const themesListData = [];
+        for (let index = 0; index < themes.length; index++) {
+            themesListData.push({
+                id: themes[index],
+                selected: themes[index] === dom.ketchup.theme.name ? true : false,
+                value: themes[index],
+            });
         }
-    }
-  }
-  /**
-   * Closes the debug widget.
-   */
-  hideWidget() {
-    __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").remove();
-    __classPrivateFieldSet(this, _KupDebug_debugWidget, null, "f");
-  }
-  /**
-   * Clears all the printed logs inside the debug widget.
-   */
-  widgetClear() {
-    const children = Array.prototype.slice.call(__classPrivateFieldGet(this, _KupDebug_debugWidget, "f").children, 0);
-    for (let index = 0; index < children.length; index++) {
-      children[index].remove();
-    }
-  }
-  /**
-   * Prints the stored logs inside the debug widget.
-   */
-  widgetPrint() {
-    const slots = [];
-    for (let index = 0; index < this.logs.length; index++) {
-      // Wrapper div
-      const slot = document.createElement('div');
-      slot.classList.add('text');
-      switch (this.logs[index].category) {
-        case KupDebugCategory.ERROR:
-          slot.style.backgroundColor =
-            'rgba(var(--kup-danger-color-rgb), 0.15)';
-          slot.style.borderLeft = '5px solid var(--kup-danger-color)';
-          break;
-        case KupDebugCategory.WARNING:
-          slot.style.backgroundColor =
-            'rgba(var(--kup-warning-color-rgb), 0.15)';
-          slot.style.borderLeft =
-            '5px solid var(--kup-warning-color)';
-          break;
-        case KupDebugCategory.INFO:
-        default:
-          slot.style.borderLeft = '5px solid var(--kup-info-color)';
-          break;
-      }
-      // If the log is tied to a KupComponent, on click its props will be downloaded.
-      // Also, a different style will be applied to distinguish it between the others.
-      if (typeof this.logs[index].element == 'object') {
-        slot.title = dom.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);
+        const locales = dom.ketchup.dates.getLocales();
+        const localesListData = [];
+        for (let index = 0; index < locales.length; index++) {
+            localesListData.push({
+                id: locales[index],
+                selected: locales[index] === dom.ketchup.dates.locale ? true : false,
+                value: locales[index],
             });
-          }
-          catch (err) {
-            this.logMessage('kup-debug', err, KupDebugCategory.WARNING);
-          }
+        }
+        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.ketchup.language.translate(KupLanguageDebug.OFF),
+                },
+                {
+                    customStyle: ':host {--kup-font-size: 0.875em;}',
+                    icon: 'print',
+                    id: 'kup-debug-print',
+                    title: dom.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.ketchup.language.translate(KupLanguageDebug.AUTOPRINT),
+                    toggable: true,
+                },
+                {
+                    customStyle: ':host {--kup-font-size: 0.875em;}',
+                    icon: 'broom',
+                    id: 'kup-debug-clear',
+                    title: dom.ketchup.language.translate(KupLanguageDebug.CLEAR),
+                },
+                {
+                    customStyle: ':host {--kup-font-size: 0.875em;}',
+                    icon: 'delete',
+                    id: 'kup-debug-delete',
+                    title: dom.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.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.ketchup.language.translate(KupLanguageDebug.DL_ALL),
+                    styling: 'flat',
+                    title: dom.ketchup.language.translate(KupLanguageDebug.DL_ALL),
+                },
+                {
+                    customStyle: ':host {--kup-font-size: 0.875em;}',
+                    icon: 'auto-fix',
+                    id: 'kup-debug-magic-box',
+                    title: dom.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.ketchup.language.translate(KupLanguageDebug.THEME_CHANGER),
+                        },
+                    },
+                    id: 'kup-debug-theme-changer',
+                    initialValue: dom.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.ketchup.language.translate(KupLanguageDebug.LANGUAGE_CHANGER),
+                        },
+                    },
+                    id: 'kup-debug-language-changer',
+                    initialValue: dom.ketchup.language.name,
+                    isSelect: true,
+                },
+                {
+                    className: 'kup-full-height',
+                    data: {
+                        'kup-list': {
+                            data: localesListData,
+                            id: 'kup-debug-locale-changer-list',
+                        },
+                        'kup-text-field': {
+                            className: 'kup-full-height',
+                            emitSubmitEventOnEnter: false,
+                            inputType: 'text',
+                            label: dom.ketchup.language.translate(KupLanguageDebug.LOCALE_CHANGER),
+                        },
+                    },
+                    id: 'kup-debug-locale-changer',
+                    initialValue: dom.ketchup.dates.locale,
+                    isSelect: true,
+                },
+            ],
+            textfield: [
+                {
+                    className: 'kup-full-height',
+                    id: 'kup-debug-log-limit',
+                    label: dom.ketchup.language.translate(KupLanguageDebug.LOG_LIMIT),
+                    initialValue: this.logLimit,
+                    emitSubmitEventOnEnter: false,
+                    inputType: 'number',
+                },
+            ],
         };
-      }
-      // 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(this, _KupDebug_debugWidget, "f").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: dom.ketchup.dates.format(this.logs[index].date, 'LLL:ms'),
-        element: isComponent
-          ? this.logs[index].element
-          : this.logs[index].id,
-        message: isComponent
-          ? this.logs[index].id + this.logs[index].message
-          : this.logs[index].message,
-      });
+        debugWidget.customStyle =
+            '#kup-debug-log-limit {width: 120px;} #kup-debug-theme-changer {width: 190px;} #kup-debug-language-changer {width: 190px;} #kup-debug-locale-changer {width: 190px;}';
+        debugWidget.id = 'kup-debug-widget';
+        debugWidget.layoutFamily = KupCardFamily.DIALOG;
+        debugWidget.layoutNumber = 3;
+        debugWidget.sizeX = 'max-content';
+        debugWidget.sizeY = 'auto';
+        const handler = this.handleEvents;
+        debugWidget.addEventListener('kup-card-event', (e) => handler(e, this));
+        this.container.append(debugWidget);
+        __classPrivateFieldSet(this, _KupDebug_debugWidget, debugWidget, "f");
     }
-    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);
+    /**
+     * Listens the card events and handles the related actions.
+     * @param {CustomEvent<KupCardEventPayload>} e - kup-card-event.
+     * @param {KupDebug} kupDebug - Instance of the KupDebug class.
+     */
+    handleEvents(e, kupDebug) {
+        const compEvent = e.detail.event;
+        const compID = compEvent.detail.id;
+        switch (compEvent.type) {
+            case 'kup-button-click':
+                switch (compID) {
+                    case 'kup-debug-autoprint':
+                        kupDebug.autoPrint = !kupDebug.autoPrint;
+                        break;
+                    case 'kup-debug-clear':
+                        kupDebug.widgetClear();
+                        __classPrivateFieldGet(kupDebug, _KupDebug_debugWidget, "f").refresh();
+                        break;
+                    case 'kup-debug-dl-props':
+                        kupDebug.getProps().then((res) => {
+                            kupDebug.downloadProps(res);
+                        });
+                        break;
+                    case 'kup-debug-dl-all':
+                        kupDebug.getProps(true).then((res) => {
+                            kupDebug.downloadProps(res);
+                        });
+                        break;
+                    case 'kup-debug-delete':
+                        kupDebug.dump();
+                        break;
+                    case 'kup-debug-magic-box':
+                        dom.ketchup.toggleMagicBox();
+                        break;
+                    case 'kup-debug-off':
+                        kupDebug.toggle();
+                        break;
+                    case 'kup-debug-print':
+                        kupDebug.widgetClear();
+                        kupDebug.widgetPrint();
+                        __classPrivateFieldGet(kupDebug, _KupDebug_debugWidget, "f").refresh();
+                        break;
+                }
+                break;
+            case 'kup-combobox-itemclick':
+                switch (compID) {
+                    case 'kup-debug-language-changer':
+                        dom.ketchup.language.set(compEvent.detail.value);
+                        break;
+                    case 'kup-debug-locale-changer':
+                        dom.ketchup.dates.setLocale(compEvent.detail.value);
+                        dom.ketchup.math.setLocale(compEvent.detail.value);
+                        break;
+                    case 'kup-debug-theme-changer':
+                        dom.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) {
+                            kupDebug.logLimit = 1;
+                        }
+                        else {
+                            kupDebug.logLimit = compEvent.detail.value;
+                        }
+                        break;
+                }
         }
-        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();
+    /**
+     * Closes the debug widget.
+     */
+    hideWidget() {
+        __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").remove();
+        __classPrivateFieldSet(this, _KupDebug_debugWidget, null, "f");
     }
-  }
-  /**
-   * 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;
+    /**
+     * Clears all the printed logs inside the debug widget.
+     */
+    widgetClear() {
+        const children = Array.prototype.slice.call(__classPrivateFieldGet(this, _KupDebug_debugWidget, "f").children, 0);
+        for (let index = 0; index < children.length; index++) {
+            children[index].remove();
+        }
     }
-    else {
-      this.active = value;
+    /**
+     * Prints the stored logs inside the debug widget.
+     */
+    widgetPrint() {
+        const slots = [];
+        for (let index = 0; index < this.logs.length; index++) {
+            // Wrapper div
+            const slot = document.createElement('div');
+            slot.classList.add('text');
+            switch (this.logs[index].category) {
+                case KupDebugCategory.ERROR:
+                    slot.style.backgroundColor =
+                        'rgba(var(--kup-danger-color-rgb), 0.15)';
+                    slot.style.borderLeft = '5px solid var(--kup-danger-color)';
+                    break;
+                case KupDebugCategory.WARNING:
+                    slot.style.backgroundColor =
+                        'rgba(var(--kup-warning-color-rgb), 0.15)';
+                    slot.style.borderLeft =
+                        '5px solid var(--kup-warning-color)';
+                    break;
+                case KupDebugCategory.INFO:
+                default:
+                    slot.style.borderLeft = '5px solid var(--kup-info-color)';
+                    break;
+            }
+            // If the log is tied to a KupComponent, on click its props will be downloaded.
+            // Also, a different style will be applied to distinguish it between the others.
+            if (typeof this.logs[index].element == 'object') {
+                slot.title = dom.ketchup.language.translate(KupLanguageDebug.DL_PROPS_COMP);
+                slot.style.fontWeight = 'bold';
+                slot.style.cursor = 'pointer';
+                slot.onclick = () => {
+                    try {
+                        this.logs[index].element
+                            .getProps()
+                            .then((res) => {
+                            this.downloadProps(res);
+                        });
+                    }
+                    catch (err) {
+                        this.logMessage('kup-debug', err, KupDebugCategory.WARNING);
+                    }
+                };
+            }
+            // ID span
+            const id = document.createElement('span');
+            id.innerHTML = this.logs[index].id;
+            id.style.opacity = '0.75';
+            id.style.marginLeft = '5px';
+            // Message span
+            const message = document.createElement('span');
+            message.innerHTML = this.logs[index].message;
+            // Append elements
+            slot.append(id, message);
+            slots.push(slot);
+        }
+        slots.reverse();
+        for (let index = 0; index < slots.length; index++) {
+            __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").append(slots[index]);
+        }
     }
-    if (this.active) {
-      document.dispatchEvent(new CustomEvent('kup-debug-active'));
-      if (!__classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
-        this.showWidget();
-      }
+    /**
+     * Dumps the stored logs.
+     */
+    dump() {
+        this.logs = [];
     }
-    else {
-      document.dispatchEvent(new CustomEvent('kup-debug-inactive'));
-      if (__classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
-        this.hideWidget();
-      }
+    /**
+     * 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: dom.ketchup.dates.format(this.logs[index].date, 'LLL:ms'),
+                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 check whether the debug is active or not.
-   * @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);
+    /**
+     * 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(this, _KupDebug_debugWidget, "f")) {
+                this.showWidget();
+            }
+        }
+        else {
+            document.dispatchEvent(new CustomEvent('kup-debug-inactive'));
+            if (__classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
+                this.hideWidget();
+            }
         }
-      }
     }
-    // Object of two arrays, positionally matching each other.
-    // One contains components, the other the relative promise.
-    const matchingObject = {
-      comps: [],
-      promises: [],
-    };
-    comps.forEach((el) => {
-      try {
-        matchingObject.comps.push(el);
-        matchingObject.promises.push(el.getProps());
-      }
-      catch (error) {
-        this.logMessage('kup-debug', 'Exception when accessing "getProps" public method for component: ' +
-          el.rootElement.tagName, KupDebugCategory.WARNING);
-      }
-    });
-    // Returning "props", which is returned by the Promise.all
-    return Promise.all(matchingObject.promises).then((responses) => {
-      for (let index = 0; index < matchingObject.comps.length; index++) {
-        const el = matchingObject.comps[index];
-        const res = responses[index];
-        let cnt = 0;
-        let key = el.rootElement.id
-          ? el.rootElement.tagName + '#' + el.rootElement.id
-          : el.rootElement.tagName + '_' + ++cnt;
-        while (props[key]) {
-          key = el.rootElement.tagName + '_' + ++cnt;
+    /**
+     * Function used to check whether the debug is active or not.
+     * @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);
+                }
+            }
         }
-        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]) {
+        // Object of two arrays, positionally matching each other.
+        // One contains components, the other the relative promise.
+        const matchingObject = {
+            comps: [],
+            promises: [],
+        };
+        comps.forEach((el) => {
             try {
-              el.getProps(true).then((res) => {
-                props.descriptions[el.rootElement.tagName] =
-                  res;
-              });
+                matchingObject.comps.push(el);
+                matchingObject.promises.push(el.getProps());
             }
             catch (error) {
-              this.logMessage('kup-debug', 'Exception when accessing "getProps" public method for component: ' +
-                el.rootElement.tagName, KupDebugCategory.WARNING);
+                this.logMessage('kup-debug', 'Exception when accessing "getProps" public method for component: ' +
+                    el.rootElement.tagName, KupDebugCategory.WARNING);
+            }
+        });
+        // Returning "props", which is returned by the Promise.all
+        return Promise.all(matchingObject.promises).then((responses) => {
+            for (let index = 0; index < matchingObject.comps.length; index++) {
+                const el = matchingObject.comps[index];
+                const res = responses[index];
+                let cnt = 0;
+                let key = el.rootElement.id
+                    ? el.rootElement.tagName + '#' + el.rootElement.id
+                    : el.rootElement.tagName + '_' + ++cnt;
+                while (props[key]) {
+                    key = el.rootElement.tagName + '_' + ++cnt;
+                }
+                if (detail) {
+                    let tag = {};
+                    for (const key in el.rootElement) {
+                        tag[key] = el.rootElement[key];
+                    }
+                    props[key] = {
+                        props: res,
+                        tagInfo: tag,
+                    };
+                    if (!props.descriptions[el.rootElement.tagName]) {
+                        try {
+                            el.getProps(true).then((res) => {
+                                props.descriptions[el.rootElement.tagName] =
+                                    res;
+                            });
+                        }
+                        catch (error) {
+                            this.logMessage('kup-debug', 'Exception when accessing "getProps" public method for component: ' +
+                                el.rootElement.tagName, KupDebugCategory.WARNING);
+                        }
+                    }
+                }
+                else {
+                    props[key] = res;
+                }
             }
-          }
+            return props;
+        });
+    }
+    /**
+     * Displays a timestamped message in the browser's console when the kupDebug property on document.documentElement is true.
+     * Warnings and errors will be displayed even when kupDebug !== true.
+     * @param {any} comp - The component calling this function or a string.
+     * @param {string} message - The actual message that will be printed.
+     * @param {KupDebugCategory} category - The type of console message, defaults to log but warning and error can be used as well.
+     */
+    logMessage(comp, message, category) {
+        if ((!category || category === KupDebugCategory.INFO) &&
+            !this.isDebug()) {
+            return;
+        }
+        const date = new Date();
+        if (!category) {
+            category = KupDebugCategory.INFO;
+        }
+        let obj = null;
+        let id = '';
+        if (comp.rootElement) {
+            id =
+                ' ' +
+                    comp.rootElement.tagName +
+                    '#' +
+                    comp.rootElement.id +
+                    ' => ';
+            obj = comp;
         }
         else {
-          props[key] = res;
+            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(dom.ketchup.dates.format(date, 'LLL:ms') +
+                    ' 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(this, _KupDebug_debugWidget, "f")) {
+                this.widgetClear();
+                this.widgetPrint();
+                __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").refresh();
+            }
+        }
+        switch (category) {
+            case KupDebugCategory.ERROR:
+                console.error(dom.ketchup.dates.format(date, 'LLL:ms') + id + message, obj);
+                window.dispatchEvent(new CustomEvent('kup-debug-error', {
+                    bubbles: true,
+                    detail: { comp, date, message },
+                }));
+                break;
+            case KupDebugCategory.WARNING:
+                console.warn(dom.ketchup.dates.format(date, 'LLL:ms') + id + message, obj);
+                break;
         }
-      }
-      return props;
-    });
-  }
-  /**
-   * Displays a timestamped message in the browser's console when the kupDebug property on document.documentElement is true.
-   * Warnings and errors will be displayed even when kupDebug !== true.
-   * @param {any} comp - The component calling this function or a string.
-   * @param {string} message - The actual message that will be printed.
-   * @param {KupDebugCategory} category - The type of console message, defaults to log but warning and error can be used as well.
-   */
-  logMessage(comp, message, category) {
-    if ((!category || category === KupDebugCategory.INFO) &&
-      !this.isDebug()) {
-      return;
-    }
-    const date = new Date();
-    if (!category) {
-      category = KupDebugCategory.INFO;
-    }
-    let obj = null;
-    let id = '';
-    if (comp.rootElement) {
-      id =
-        ' ' +
-          comp.rootElement.tagName +
-          '#' +
-          comp.rootElement.id +
-          ' => ';
-      obj = comp;
-    }
-    else {
-      id = ' ' + comp + ' => ';
-      obj = '';
-    }
-    if (this.isDebug() && id.indexOf('#kup-debug') < 0) {
-      const log = {
-        category: category,
-        date: date,
-        element: obj,
-        id: id,
-        message: message,
-      };
-      if (this.logs.length > this.logLimit) {
-        console.warn(dom.ketchup.dates.format(date, 'LLL:ms') +
-          ' 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(this, _KupDebug_debugWidget, "f")) {
-        this.widgetClear();
-        this.widgetPrint();
-        __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").refresh();
-      }
-    }
-    switch (category) {
-      case KupDebugCategory.ERROR:
-        console.error(dom.ketchup.dates.format(date, 'LLL:ms') + id + message, obj);
-        window.dispatchEvent(new CustomEvent('kup-debug-error', {
-          bubbles: true,
-          detail: { comp, date, message },
-        }));
-        break;
-      case KupDebugCategory.WARNING:
-        console.warn(dom.ketchup.dates.format(date, 'LLL:ms') + id + message, obj);
-        break;
-    }
-  }
-  /**
-   * 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();
+    /**
+     * 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.');
+            }
+        }
     }
-    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.');
-      }
+    /**
+     * 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.');
+            }
+        }
     }
-  }
 }
 _KupDebug_debugWidget = new WeakMap();