@sme.up/ketchup 4.2.0-SNAPSHOT → 4.3.0-SNAPSHOT

package/dist/cjs/kup-autocomplete_28.cjs.entry.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0416afab.js');
-const kupManager = require('./kup-manager-75f1a2cd.js');
-const fCell = require('./f-cell-eba6f39e.js');
+const kupManager = require('./kup-manager-1a2688ca.js');
+const fCell = require('./f-cell-fe60a08d.js');
 const tslib_es6 = require('./tslib.es6-4360c099.js');
 const component = require('./component-8fbc31a2.js');
-const utils = require('./utils-b3ec89fe.js');
+const utils = require('./utils-0cc466b9.js');
 const GenericVariables = require('./GenericVariables-9cd88034.js');
-const fImage = require('./f-image-e03842eb.js');
-const cellUtils = require('./cell-utils-1d44a3f0.js');
-const fChip = require('./f-chip-ce69b7d2.js');
-const fButton = require('./f-button-a5788453.js');
+const fImage = require('./f-image-d3bd4e08.js');
+const cellUtils = require('./cell-utils-dc0884a3.js');
+const fChip = require('./f-chip-90d95d22.js');
+const fButton = require('./f-button-2ba74fb5.js');
 const fButtonDeclarations = require('./f-button-declarations-76b4fb4c.js');
 
 /**
@@ -3306,7 +3306,7 @@ var KupGlobalFilterMode;
   KupGlobalFilterMode["HIGHLIGHT"] = "highlight";
 })(KupGlobalFilterMode || (KupGlobalFilterMode = {}));
 
-const dom$4 = document.documentElement;
+const dom$6 = document.documentElement;
 /**
  * Filtering algorithms.
  * @module Filters
@@ -3322,16 +3322,16 @@ class Filters {
     return comp.rootElement.tagName === 'KUP-TREE';
   }
   isObjFiltrableByInterval(obj) {
-    if (dom$4.ketchup.objects.isDate(obj)) {
+    if (dom$6.ketchup.objects.isDate(obj)) {
       return true;
     }
-    if (dom$4.ketchup.objects.isTime(obj)) {
+    if (dom$6.ketchup.objects.isTime(obj)) {
       return true;
     }
-    if (dom$4.ketchup.objects.isTimestamp(obj)) {
+    if (dom$6.ketchup.objects.isTimestamp(obj)) {
       return true;
     }
-    if (dom$4.ketchup.objects.isNumber(obj)) {
+    if (dom$6.ketchup.objects.isNumber(obj)) {
       return true;
     }
     return false;
@@ -3341,17 +3341,17 @@ class Filters {
     if (newValue == null || newValue == '' || smeupObj == null) {
       return newValue;
     }
-    if (dom$4.ketchup.objects.isDate(smeupObj)) {
-      if (dom$4.ketchup.dates.isValid(value, kupManager.KupDatesFormats.ISO_DATE)) {
+    if (dom$6.ketchup.objects.isDate(smeupObj)) {
+      if (dom$6.ketchup.dates.isValid(value, kupManager.KupDatesFormats.ISO_DATE)) {
         return newValue;
       }
-      if (dom$4.ketchup.dates.isValid(value)) {
-        return dom$4.ketchup.dates.format(dom$4.ketchup.dates.normalize(value, kupManager.KupDatesNormalize.DATE), kupManager.KupDatesFormats.ISO_DATE);
+      if (dom$6.ketchup.dates.isValid(value)) {
+        return dom$6.ketchup.dates.format(dom$6.ketchup.dates.normalize(value, kupManager.KupDatesNormalize.DATE), kupManager.KupDatesFormats.ISO_DATE);
       }
     }
-    else if (dom$4.ketchup.objects.isTime(smeupObj)) {
-      let manageSeconds = dom$4.ketchup.objects.isTimeWithSeconds(smeupObj);
-      if (dom$4.ketchup.dates.isValid(value, manageSeconds
+    else if (dom$6.ketchup.objects.isTime(smeupObj)) {
+      let manageSeconds = dom$6.ketchup.objects.isTimeWithSeconds(smeupObj);
+      if (dom$6.ketchup.dates.isValid(value, manageSeconds
         ? kupManager.KupDatesFormats.ISO_TIME
         : kupManager.KupDatesFormats.ISO_TIME_WITHOUT_SECONDS)) {
         return newValue;
@@ -3362,15 +3362,15 @@ class Filters {
           : kupManager.KupDatesFormats.ISO_TIME_WITHOUT_SECONDS, manageSeconds);
       }
     }
-    else if (dom$4.ketchup.objects.isTimestamp(smeupObj)) {
-      if (dom$4.ketchup.dates.isValid(value, kupManager.KupDatesFormats.ISO_DATE_TIME)) {
+    else if (dom$6.ketchup.objects.isTimestamp(smeupObj)) {
+      if (dom$6.ketchup.dates.isValid(value, kupManager.KupDatesFormats.ISO_DATE_TIME)) {
         return newValue;
       }
       if (utils.isValidFormattedStringTime(value, true)) {
         return utils.formattedStringToDefaultUnformattedStringTimestamp(value);
       }
     }
-    else if (dom$4.ketchup.objects.isNumber(smeupObj)) {
+    else if (dom$6.ketchup.objects.isNumber(smeupObj)) {
       if (utils.isValidFormattedStringNumber(value, smeupObj ? smeupObj.p : '')) {
         return utils.formattedStringToUnformattedStringNumber(value, smeupObj ? smeupObj.p : '');
       }
@@ -3493,7 +3493,7 @@ class Filters {
       to = interval[FilterInterval.TO];
     }
     let checkByRegularExpression = true;
-    if (dom$4.ketchup.objects.isNumber(obj)) {
+    if (dom$6.ketchup.objects.isNumber(obj)) {
       value = utils.unformattedStringNumberToNumber(value, obj ? obj.p : '');
       let valueNumber = utils.stringToNumber(value);
       if (from != '') {
@@ -3521,30 +3521,30 @@ class Filters {
         }
       }
     }
-    if (dom$4.ketchup.objects.isDate(obj) ||
-      dom$4.ketchup.objects.isTime(obj) ||
-      dom$4.ketchup.objects.isTimestamp(obj)) {
+    if (dom$6.ketchup.objects.isDate(obj) ||
+      dom$6.ketchup.objects.isTime(obj) ||
+      dom$6.ketchup.objects.isTimestamp(obj)) {
       let valueDate = null;
       let defaultFormat = kupManager.KupDatesFormats.ISO_DATE;
-      if (dom$4.ketchup.objects.isDate(obj)) {
+      if (dom$6.ketchup.objects.isDate(obj)) {
         defaultFormat = kupManager.KupDatesFormats.ISO_DATE;
       }
-      else if (dom$4.ketchup.objects.isTime(obj)) {
-        defaultFormat = dom$4.ketchup.objects.isTimeWithSeconds(obj)
+      else if (dom$6.ketchup.objects.isTime(obj)) {
+        defaultFormat = dom$6.ketchup.objects.isTimeWithSeconds(obj)
           ? kupManager.KupDatesFormats.ISO_TIME
           : kupManager.KupDatesFormats.ISO_TIME_WITHOUT_SECONDS;
       }
-      else if (dom$4.ketchup.objects.isTimestamp(obj)) {
+      else if (dom$6.ketchup.objects.isTimestamp(obj)) {
         defaultFormat = kupManager.KupDatesFormats.ISO_DATE_TIME;
       }
-      if (dom$4.ketchup.dates.isValid(value, defaultFormat, true)) {
-        valueDate = dom$4.ketchup.dates.toDate(value, defaultFormat);
+      if (dom$6.ketchup.dates.isValid(value, defaultFormat, true)) {
+        valueDate = dom$6.ketchup.dates.toDate(value, defaultFormat);
       }
       if (from != '') {
         if (valueDate != null &&
-          dom$4.ketchup.dates.isValid(from, defaultFormat, true)) {
+          dom$6.ketchup.dates.isValid(from, defaultFormat, true)) {
           checkByRegularExpression = false;
-          let fromDate = dom$4.ketchup.dates.toDate(from, defaultFormat);
+          let fromDate = dom$6.ketchup.dates.toDate(from, defaultFormat);
           if (valueDate < fromDate) {
             return false;
           }
@@ -3555,9 +3555,9 @@ class Filters {
       }
       if (to != '') {
         if (valueDate != null &&
-          dom$4.ketchup.dates.isValid(to, defaultFormat, true)) {
+          dom$6.ketchup.dates.isValid(to, defaultFormat, true)) {
           checkByRegularExpression = false;
-          let toDate = dom$4.ketchup.dates.toDate(to, defaultFormat);
+          let toDate = dom$6.ketchup.dates.toDate(to, defaultFormat);
           if (valueDate > toDate) {
             return false;
           }
@@ -3566,9 +3566,9 @@ class Filters {
           filterValue = to;
         }
       }
-      if (!dom$4.ketchup.dates.isValid(filterValue, defaultFormat) &&
-        !dom$4.ketchup.dates.isValid(filterValue)) {
-        value = dom$4.ketchup.dates.format(value);
+      if (!dom$6.ketchup.dates.isValid(filterValue, defaultFormat) &&
+        !dom$6.ketchup.dates.isValid(filterValue)) {
+        value = dom$6.ketchup.dates.format(value);
       }
     }
     if (checkByRegularExpression) {
@@ -4005,9 +4005,9 @@ var KupTreeExpansionMode;
   KupTreeExpansionMode["NODE"] = "node";
 })(KupTreeExpansionMode || (KupTreeExpansionMode = {}));
 
-const dom$3 = document.documentElement;
-const kupObjects = dom$3.ketchup
-  ? dom$3.ketchup.objects
+const dom$5 = document.documentElement;
+const kupObjects = dom$5.ketchup
+  ? dom$5.ketchup.objects
   : new kupManager.KupObjects();
 /**
  * Filtering algorithms related to data-table rows.
@@ -4256,7 +4256,7 @@ class FiltersRows extends Filters {
   }
 }
 
-const dom$2 = document.documentElement;
+const dom$4 = document.documentElement;
 function sortRows(rows = [], sort = []) {
   if (!rows || rows.length === 0) {
     return [];
@@ -4490,7 +4490,7 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
     const currentTotalValue = groupRow.group.totals[key] || 0;
     const cell = addedRow.cells[key];
     if (cell) {
-      let _isNumber = dom$2.ketchup.objects.isNumber(cell.obj);
+      let _isNumber = dom$4.ketchup.objects.isNumber(cell.obj);
       const totalMode = totals[key];
       switch (totalMode) {
         case TotalMode.COUNT:
@@ -4599,19 +4599,19 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
               parent = parent.group.parent;
             }
           }
-          else if (dom$2.ketchup.objects.isDate(cell.obj)) {
+          else if (dom$4.ketchup.objects.isDate(cell.obj)) {
             const momentValue = cell.obj
-              ? dom$2.ketchup.objects.parseDate(cell.obj)
-              : dom$2.ketchup.dates.toDayjs(cell.value);
-            if (dom$2.ketchup.dates.isValid(momentValue)) {
-              const cellValue = dom$2.ketchup.dates.toDate(momentValue);
+              ? dom$4.ketchup.objects.parseDate(cell.obj)
+              : dom$4.ketchup.dates.toDayjs(cell.value);
+            if (dom$4.ketchup.dates.isValid(momentValue)) {
+              const cellValue = dom$4.ketchup.dates.toDate(momentValue);
               const currentTotalValue = groupRow.group.totals[key];
               if (currentTotalValue) {
                 let moments = [];
                 moments.push(cellValue);
-                moments.push(dom$2.ketchup.dates.format(currentTotalValue));
+                moments.push(dom$4.ketchup.dates.format(currentTotalValue));
                 groupRow.group.totals[key] =
-                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments));
+                  dom$4.ketchup.dates.format(dom$4.ketchup.dates.min(moments));
               }
               else {
                 groupRow.group.totals[key] = cellValue;
@@ -4623,9 +4623,9 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
                 if (currentParentMin) {
                   let moments = [];
                   moments.push(cellValue);
-                  moments.push(dom$2.ketchup.dates.format(currentParentMin));
+                  moments.push(dom$4.ketchup.dates.format(currentParentMin));
                   parent.group.totals[key] =
-                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments));
+                    dom$4.ketchup.dates.format(dom$4.ketchup.dates.min(moments));
                 }
                 else {
                   // first round
@@ -4662,19 +4662,19 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
               parent = parent.group.parent;
             }
           }
-          else if (dom$2.ketchup.objects.isDate(cell.obj)) {
+          else if (dom$4.ketchup.objects.isDate(cell.obj)) {
             const momentValue = cell.obj
-              ? dom$2.ketchup.objects.parseDate(cell.obj)
-              : dom$2.ketchup.dates.toDayjs(cell.value);
-            if (dom$2.ketchup.dates.isValid(momentValue)) {
-              const cellValue = dom$2.ketchup.dates.toDate(momentValue);
+              ? dom$4.ketchup.objects.parseDate(cell.obj)
+              : dom$4.ketchup.dates.toDayjs(cell.value);
+            if (dom$4.ketchup.dates.isValid(momentValue)) {
+              const cellValue = dom$4.ketchup.dates.toDate(momentValue);
               const currentTotalValue = groupRow.group.totals[key];
               if (currentTotalValue) {
                 let moments = [];
                 moments.push(cellValue);
-                moments.push(dom$2.ketchup.dates.format(currentTotalValue));
+                moments.push(dom$4.ketchup.dates.format(currentTotalValue));
                 groupRow.group.totals[key] =
-                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments));
+                  dom$4.ketchup.dates.format(dom$4.ketchup.dates.max(moments));
               }
               else {
                 groupRow.group.totals[key] = cellValue;
@@ -4686,9 +4686,9 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
                 if (currentParentMin) {
                   let moments = [];
                   moments.push(cellValue);
-                  moments.push(dom$2.ketchup.dates.format(currentParentMin));
+                  moments.push(dom$4.ketchup.dates.format(currentParentMin));
                   parent.group.totals[key] =
-                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments));
+                    dom$4.ketchup.dates.format(dom$4.ketchup.dates.max(moments));
                 }
                 else {
                   // first round
@@ -4861,7 +4861,7 @@ function calcTotals(rows = [], totals = {}) {
         if (cell) {
           if (totals[key] === TotalMode.DISTINCT) {
             let cellValue;
-            if (dom$2.ketchup.objects.isNumber(cell.obj)) {
+            if (dom$4.ketchup.objects.isNumber(cell.obj)) {
               cellValue = utils.numeral(utils.stringToNumber(cell.value)).value();
             }
             else {
@@ -4878,7 +4878,7 @@ function calcTotals(rows = [], totals = {}) {
               distinctList.push(cellValue);
             }
           }
-          else if (dom$2.ketchup.objects.isNumber(cell.obj)) {
+          else if (dom$4.ketchup.objects.isNumber(cell.obj)) {
             const cellValue = utils.numeral(utils.stringToNumber(cell.value));
             let currentFooterValue = footerRow[key];
             switch (true) {
@@ -4908,21 +4908,21 @@ function calcTotals(rows = [], totals = {}) {
             }
             // TODO DRY the MIN and MAX functions
           }
-          else if (dom$2.ketchup.objects.isDate(cell.obj)) {
+          else if (dom$4.ketchup.objects.isDate(cell.obj)) {
             const momentValue = cell.obj
-              ? dom$2.ketchup.objects.parseDate(cell.obj)
-              : dom$2.ketchup.dates.toDayjs(cell.value);
-            if (dom$2.ketchup.dates.isValid(momentValue)) {
-              const cellValue = dom$2.ketchup.dates.toDate(momentValue);
+              ? dom$4.ketchup.objects.parseDate(cell.obj)
+              : dom$4.ketchup.dates.toDayjs(cell.value);
+            if (dom$4.ketchup.dates.isValid(momentValue)) {
+              const cellValue = dom$4.ketchup.dates.toDate(momentValue);
               const currentFooterValue = footerRow[key];
               switch (true) {
                 case totals[key] === TotalMode.MIN:
                   if (currentFooterValue) {
                     let moments = [];
                     moments.push(cellValue);
-                    moments.push(dom$2.ketchup.dates.format(currentFooterValue));
+                    moments.push(dom$4.ketchup.dates.format(currentFooterValue));
                     footerRow[key] =
-                      dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments));
+                      dom$4.ketchup.dates.format(dom$4.ketchup.dates.min(moments));
                   }
                   else {
                     footerRow[key] = cellValue;
@@ -4932,9 +4932,9 @@ function calcTotals(rows = [], totals = {}) {
                   if (currentFooterValue) {
                     let moments = [];
                     moments.push(cellValue);
-                    moments.push(dom$2.ketchup.dates.format(currentFooterValue));
+                    moments.push(dom$4.ketchup.dates.format(currentFooterValue));
                     footerRow[key] =
-                      dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments));
+                      dom$4.ketchup.dates.format(dom$4.ketchup.dates.max(moments));
                   }
                   else {
                     footerRow[key] = cellValue;
@@ -6897,6 +6897,818 @@ let KupButtonList = class {
 };
 KupButtonList.style = kupButtonListCss;
 
+/**
+ * Props of the kup-date-picker component.
+ * Used to export every prop in an object.
+ */
+var KupDatePickerProps;
+(function (KupDatePickerProps) {
+  KupDatePickerProps["customStyle"] = "Custom style of the component.";
+  KupDatePickerProps["data"] = "Props of the sub-components.";
+  KupDatePickerProps["disabled"] = "Defaults at false. When set to true, the component is disabled.";
+  KupDatePickerProps["firstDayIndex"] = "First day number (0 - sunday, 1 - monday, ...)";
+  KupDatePickerProps["initialValue"] = "Sets the initial value of the component";
+})(KupDatePickerProps || (KupDatePickerProps = {}));
+var SourceEvent;
+(function (SourceEvent) {
+  SourceEvent["DATE"] = "date";
+  SourceEvent["MONTH"] = "month";
+  SourceEvent["YEAR"] = "year";
+})(SourceEvent || (SourceEvent = {}));
+
+const dom$3 = document.documentElement;
+function prepareCalendar(component) {
+  const el = component.rootElement;
+  if (!el.kupData)
+    el.kupData = {};
+  if (component.data && component.data.options) {
+    const opts = component.data.options;
+    if (opts.resetStatus) {
+      el.kupData = {};
+      const obj = opts.initialValue;
+      if (opts.initialValue) {
+        if (obj && obj.k)
+          setValue$1(component, new Date(obj.k));
+        else
+          setValue$1(component, new Date(opts.initialValue));
+      }
+      if (opts.firstDayIndex)
+        el.kupData.firstDayIndex = opts.firstDayIndex;
+      opts.resetStatus = false;
+    }
+  }
+  if (!el.kupData.value)
+    setValue$1(component, new Date());
+  const months = utils.getMonthsAsStringByLocale();
+  const curYear = getYear(component);
+  const curMonth = getMonth(component);
+  const yearRange = getInitEndYear(curYear);
+  const initYear = yearRange.initYear;
+  const endYear = yearRange.endYear;
+  let changeViewButtonLabel = 'not-set';
+  switch (getView(component)) {
+    case SourceEvent.DATE: {
+      changeViewButtonLabel =
+        months[curMonth] + ', ' + curYear.toString();
+      break;
+    }
+    case SourceEvent.MONTH: {
+      changeViewButtonLabel = curYear.toString();
+      break;
+    }
+    case SourceEvent.YEAR: {
+      changeViewButtonLabel =
+        initYear.toString() + ' - ' + endYear.toString();
+      break;
+    }
+  }
+  const prevButtonProp = {
+    icon: 'chevron_left',
+    wrapperClass: 'prev-page',
+    onClick: () => prevPage(component),
+  };
+  const prevButtonComp = index.h(fButton.FButton, Object.assign({}, prevButtonProp));
+  const nextButtonProp = {
+    icon: 'chevron_right',
+    wrapperClass: 'next-page',
+    onClick: () => nextPage(component),
+  };
+  const nextButtonComp = index.h(fButton.FButton, Object.assign({}, nextButtonProp));
+  const changeViewButtonProp = {
+    wrapperClass: 'change-view-button',
+    styling: fButtonDeclarations.FButtonStyling.FLAT,
+    label: changeViewButtonLabel,
+    onClick: () => changeView(component),
+    id: 'change-view-button',
+  };
+  //text-transform:capitalize
+  return (index.h("div", { id: component.rootElement.id + '_calendar' },
+    index.h("div", { class: "section-1" },
+      index.h("div", { class: "sub-1 nav" },
+        prevButtonComp,
+        index.h(fButton.FButton, Object.assign({}, changeViewButtonProp)),
+        nextButtonComp)),
+    index.h("div", { class: "section-2" }, createCalendar(component))));
+}
+function setValue$1(component, value) {
+  const el = component.rootElement;
+  el.kupData.value = value;
+  el.kupData.day = el.kupData.value.getDate();
+  el.kupData.month = el.kupData.value.getMonth();
+  el.kupData.year = el.kupData.value.getFullYear();
+}
+function getValue$1(component) {
+  const el = component.rootElement;
+  if (el.kupData.value == null)
+    setValue$1(component, new Date());
+  return el.kupData.value;
+}
+function getDay(component) {
+  const el = component.rootElement;
+  if (el.kupData.day != null)
+    return el.kupData.day;
+  return null;
+}
+function getMonth(component) {
+  const el = component.rootElement;
+  if (el.kupData.month != null)
+    return el.kupData.month;
+  return null;
+}
+function getYear(component) {
+  const el = component.rootElement;
+  if (el.kupData.year != null)
+    return el.kupData.year;
+  return null;
+}
+function setDay(component, value) {
+  const el = component.rootElement;
+  el.kupData.day = value;
+}
+function setMonth(component, value) {
+  const el = component.rootElement;
+  el.kupData.month = value;
+}
+function setYear(component, value) {
+  const el = component.rootElement;
+  el.kupData.year = value;
+}
+function getFirstDayIndex(component) {
+  const el = component.rootElement;
+  if (el.kupData.firstDayIndex)
+    return el.kupData.firstDayIndex;
+  return 1;
+}
+function getView(component) {
+  const el = component.rootElement;
+  if (el.kupData.calendarView)
+    return el.kupData.calendarView;
+  return SourceEvent.DATE;
+}
+function setView(component, value) {
+  const el = component.rootElement;
+  el.kupData.calendarView = value;
+}
+function createCalendar(component) {
+  switch (getView(component)) {
+    case SourceEvent.DATE: {
+      return createDaysCalendar(component);
+    }
+    case SourceEvent.MONTH: {
+      return createMonthsCalendar(component);
+    }
+    case SourceEvent.YEAR: {
+      return createYearsCalendar(component);
+    }
+  }
+}
+function createDaysCalendar(component) {
+  const days = getDaysOfWeekAsStringByLocale(getFirstDayIndex(component));
+  const selectedDate = getValue$1(component);
+  const selectedDay = getDay(component);
+  const selectedMonth = getMonth(component);
+  const selectedYear = getYear(component);
+  const thead = [];
+  const tbody = [];
+  for (let index$1 = 0; index$1 < days.length; index$1++) {
+    thead.push(index.h("th", null,
+      index.h("span", { class: "item-text" }, days[index$1])));
+  }
+  const firstMonthDay = new Date(selectedYear, selectedMonth, 1);
+  const lastMonthDay = new Date(selectedYear, selectedMonth + 1, 0);
+  const finish = false;
+  let currentDayIndex = getFirstDayIndex(component);
+  const firstMonthDayIndex = firstMonthDay.getDay();
+  let row = [];
+  let daysForRowAdded = 0;
+  while (!finish) {
+    if (currentDayIndex == firstMonthDayIndex) {
+      break;
+    }
+    row.push(index.h("td", { class: "item empty" }));
+    currentDayIndex++;
+    daysForRowAdded++;
+    if (currentDayIndex > 6) {
+      currentDayIndex = 0;
+    }
+  }
+  let dayCount = 1;
+  while (dayCount <= lastMonthDay.getDate()) {
+    for (let i = daysForRowAdded; i < 7; i++) {
+      let dayClass = 'item';
+      let dataIndex = {
+        'data-index': selectedYear.toString() +
+          '-' +
+          fillString((selectedMonth + 1).toString(), '0', 2, true) +
+          '-' +
+          fillString(dayCount.toString(), '0', 2, true),
+      };
+      if ((selectedDay != null && dayCount === selectedDay) ||
+        (dayCount === selectedDate.getDate() &&
+          selectedMonth === selectedDate.getMonth() &&
+          selectedYear === selectedDate.getFullYear())) {
+        dayClass += ' selected';
+      }
+      row.push(index.h("td", { class: dayClass },
+        index.h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+            onCalendarItemClick(component, dataIndex['data-index']);
+          } }), dayCount)));
+      dayCount++;
+      if (dayCount > lastMonthDay.getDate()) {
+        break;
+      }
+    }
+    if (row.length > 0) {
+      tbody.push(index.h("tr", null, row));
+      row = [];
+    }
+    daysForRowAdded = 0;
+  }
+  return (index.h("table", { class: "calendar" },
+    index.h("thead", null, thead),
+    index.h("tbody", null, tbody)));
+}
+function createMonthsCalendar(component) {
+  const months = utils.getMonthsAsStringByLocale(utils.DateTimeFormatOptionsMonth.SHORT);
+  let selectedDay = getDay(component);
+  const selectedMonth = getMonth(component);
+  const selectedYear = getYear(component);
+  if (selectedDay == null)
+    selectedDay = 1;
+  const tbody = [];
+  let row = [];
+  let monthCount = 0;
+  while (monthCount < 12) {
+    for (let i = 0; i < 4; i++) {
+      let monthClass = 'item';
+      const dataIndex = {
+        'data-index': selectedYear.toString() +
+          '-' +
+          fillString((monthCount + 1).toString(), '0', 2, true) +
+          '-' +
+          fillString(selectedDay.toString(), '0', 2, true),
+      };
+      if (monthCount === selectedMonth) {
+        monthClass += ' selected';
+      }
+      row.push(index.h("td", { class: monthClass },
+        index.h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+            onCalendarMonthYearItemClick(component, dataIndex['data-index']);
+          } }), months[monthCount])));
+      monthCount++;
+    }
+    if (row.length > 0) {
+      tbody.push(index.h("tr", null, row));
+      row = [];
+    }
+  }
+  return (index.h("table", { class: "calendar" },
+    index.h("tbody", null, tbody)));
+}
+function createYearsCalendar(component) {
+  let selectedDay = getDay(component);
+  const selectedMonth = getMonth(component);
+  const selectedYear = getYear(component);
+  if (selectedDay == null)
+    selectedDay = 1;
+  const yearRange = getInitEndYear(selectedYear);
+  const initYear = yearRange.initYear;
+  const endYear = yearRange.endYear;
+  const tbody = [];
+  let row = [];
+  let yearCount = initYear;
+  while (yearCount <= endYear) {
+    for (let i = 0; i < 4; i++) {
+      let yearClass = 'item';
+      let dataIndex = {
+        'data-index': yearCount.toString() +
+          '-' +
+          fillString((selectedMonth + 1).toString(), '0', 2, true) +
+          '-' +
+          fillString(selectedDay.toString(), '0', 2, true),
+      };
+      if (yearCount === selectedYear) {
+        yearClass += ' selected';
+      }
+      row.push(index.h("td", { class: yearClass },
+        index.h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+            onCalendarMonthYearItemClick(component, dataIndex['data-index']);
+          } }), yearCount)));
+      yearCount++;
+    }
+    if (row.length > 0) {
+      tbody.push(index.h("tr", null, row));
+      row = [];
+    }
+  }
+  return (index.h("table", { class: "calendar" },
+    index.h("tbody", null, tbody)));
+}
+function getDaysOfWeekAsStringByLocale(firstDayIndex) {
+  const thisWeekDays = thisWeek(firstDayIndex);
+  const monday = thisWeekDays.startDate;
+  const days = [];
+  for (var i = 0; i < 7; i++) {
+    var date = new Date(monday.toISOString());
+    date.setDate(date.getDate() + i);
+    days[i] = getDayAsStringByLocale(date);
+  }
+  return days;
+}
+function thisWeek(firstDayIndex) {
+  const firstDay = firstDayThisWeek(firstDayIndex);
+  return {
+    startDate: firstDay,
+    endDate: offsetDate(firstDay, 6),
+  };
+}
+function firstDayThisWeek(firstDayIndex) {
+  const d = new Date();
+  const day = d.getDay();
+  // dayIndex0
+  d.setDate(d.getDate() - day);
+  // dayIndexX
+  d.setDate(d.getDate() + firstDayIndex);
+  return d;
+}
+const offsetDate = (base, count) => {
+  const date = new Date(base);
+  date.setDate(base.getDate() + count);
+  return date;
+};
+function getDayAsStringByLocale(date) {
+  if (date == null) {
+    return '';
+  }
+  const options = {
+    weekday: 'narrow',
+    /** weekday: 'narrow' 'short' 'long' */
+  };
+  const dateTimeFormat = new Intl.DateTimeFormat(dom$3.ketchup.dates.getLocale(), options);
+  return dateTimeFormat.format(date);
+}
+function fillString(stringIn, stringForFill, finalLen, addBefore) {
+  const initSize = stringIn.length;
+  let stringOut = '';
+  for (let i = initSize; i < finalLen; i += stringForFill.length) {
+    stringOut += stringForFill;
+  }
+  if (addBefore) {
+    return stringOut + stringIn;
+  }
+  else {
+    return stringIn + stringOut;
+  }
+}
+function prevPage(component) {
+  let mm = getMonth(component);
+  let yy = getYear(component);
+  if (getView(component) == SourceEvent.DATE) {
+    if (mm < 1) {
+      mm = 11;
+      yy--;
+    }
+    else {
+      mm--;
+    }
+  }
+  if (getView(component) == SourceEvent.MONTH) {
+    yy--;
+  }
+  if (getView(component) == SourceEvent.YEAR) {
+    let yearRange = getInitEndYear(yy);
+    yy = yearRange.initYear - 1;
+  }
+  setDay(component, null);
+  setMonth(component, mm);
+  setYear(component, yy);
+  refresh(component);
+}
+function nextPage(component) {
+  let mm = getMonth(component);
+  let yy = getYear(component);
+  if (getView(component) == SourceEvent.DATE) {
+    if (mm > 10) {
+      mm = 0;
+      yy++;
+    }
+    else {
+      mm++;
+    }
+  }
+  if (getView(component) == SourceEvent.MONTH) {
+    yy++;
+  }
+  if (getView(component) == SourceEvent.YEAR) {
+    const yearRange = getInitEndYear(yy);
+    yy = yearRange.endYear + 1;
+  }
+  setDay(component, null);
+  setMonth(component, mm);
+  setYear(component, yy);
+  refresh(component);
+}
+function getInitEndYear(curYear) {
+  const initYear = curYear - (curYear % 10);
+  const endYear = initYear + 16 - 1;
+  return { initYear: initYear, endYear: endYear };
+}
+function changeView(component) {
+  setDay(component, null);
+  switch (getView(component)) {
+    case SourceEvent.DATE: {
+      setView(component, SourceEvent.MONTH);
+      break;
+    }
+    case SourceEvent.MONTH: {
+      setView(component, SourceEvent.YEAR);
+      break;
+    }
+    case SourceEvent.YEAR: {
+      setView(component, SourceEvent.DATE);
+      break;
+    }
+  }
+  refresh(component);
+}
+function refresh(component) {
+  component.refresh();
+}
+function onCalendarMonthYearItemClick(component, value) {
+  let d;
+  if (dom$3.ketchup.dates.isValid(value, kupManager.KupDatesFormats.ISO_DATE)) {
+    d = new Date(value);
+  }
+  else {
+    d = new Date();
+  }
+  setMonth(component, d.getMonth());
+  setYear(component, d.getFullYear());
+  switch (getView(component)) {
+    case SourceEvent.MONTH: {
+      setView(component, SourceEvent.DATE);
+      break;
+    }
+    case SourceEvent.YEAR: {
+      setView(component, SourceEvent.MONTH);
+      break;
+    }
+  }
+  refresh(component);
+}
+function onCalendarItemClick(component, value) {
+  let d;
+  if (dom$3.ketchup.dates.isValid(value, kupManager.KupDatesFormats.ISO_DATE)) {
+    d = new Date(value);
+  }
+  else {
+    d = new Date();
+  }
+  setValue$1(component, d);
+  component.onKupClick(component.rootElement.id, value);
+  refresh(component);
+}
+
+const dom$2 = document.documentElement;
+function prepareClock(component) {
+  const el = component.rootElement;
+  el.kupData = {};
+  if (component.data && component.data.options) {
+    const opts = component.data.options;
+    const obj = opts.initialValue;
+    if (opts.initialValue) {
+      if (obj && obj.k)
+        el.kupData.value = obj.k;
+      else
+        el.kupData.value = opts.initialValue;
+    }
+    if (opts.manageSeconds != null)
+      el.kupData.manageSeconds = opts.manageSeconds;
+    if (opts.hoursActive != null)
+      el.kupData.hoursActive = opts.hoursActive;
+    if (opts.minutesActive != null)
+      el.kupData.minutesActive = opts.minutesActive;
+    if (opts.secondsActive != null)
+      el.kupData.secondsActive = opts.secondsActive;
+  }
+  else {
+    el.kupData.hoursActive = true;
+  }
+  return prepTimeArea(component);
+}
+function isManageSeconds(component) {
+  const el = component.rootElement;
+  if (el.kupData.manageSeconds != null)
+    return el.kupData.manageSeconds;
+  return false;
+}
+function getValue(component) {
+  const el = component.rootElement;
+  if (el.kupData.value)
+    return el.kupData.value;
+  return '';
+}
+function setValue(component, value) {
+  const el = component.rootElement;
+  el.kupData.value = value;
+}
+function getHoursActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.hoursActive != null)
+    return el.kupData.hoursActive;
+  return false;
+}
+function getMinutesActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.minutesActive != null)
+    return el.kupData.minutesActive;
+  return false;
+}
+function getSecondsActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.secondsActive != null)
+    return el.kupData.secondsActive;
+  return false;
+}
+function setElement(component, elem) {
+  if (elem) {
+    const el = component.rootElement;
+    el.kupData[elem.id] = elem;
+  }
+}
+function getElement(component, elemId) {
+  return component.rootElement.shadowRoot.getElementById(elemId);
+}
+function prepTimeArea(component) {
+  return (index.h("div", { id: "clock-div", onBlur: (e) => {
+      if (!isRelatedTargetInThisComponent(e, component)) {
+        onKupBlur(component);
+      }
+    } }, createClock(component)));
+}
+function onKupClockItemClick(e, component, value) {
+  if (e != null) {
+    if (value == null) {
+      value = e.detail.selected.value;
+    }
+  }
+  setClockValueSelected(component, value);
+  component.onKupClick(component.rootElement.id, value);
+}
+function setClockValueSelected(component, newValue) {
+  if (newValue == null) {
+    newValue = getValue(component);
+  }
+  if (newValue == null) {
+    return;
+  }
+  setValue(component, newValue);
+}
+function isRelatedTargetInThisComponent(e, component) {
+  if (!e.relatedTarget) {
+    return false;
+  }
+  let id = e.relatedTarget.id;
+  if (id == null || id.trim() == '') {
+    return false;
+  }
+  if (id == getElement(component, kupManager.KupCardBuiltinClockElements.CLOCK).id) {
+    return true;
+  }
+  let idConc = '#clock-div#confirm#';
+  return idConc.indexOf('#' + id + '#') >= 0;
+}
+function onKupBlur(component) {
+  component.onKupClick(component.rootElement.id, getValue(component));
+}
+function createClock(component) {
+  let selectedTime;
+  if (getValue(component)) {
+    selectedTime = dom$2.ketchup.dates.toDate(getValue(component), isManageSeconds(component)
+      ? kupManager.KupDatesFormats.ISO_TIME
+      : kupManager.KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
+  }
+  else {
+    selectedTime = new Date();
+  }
+  let hh = selectedTime.getHours().toString();
+  let mm = selectedTime.getMinutes().toString();
+  if (hh.length === 1) {
+    hh = '0' + hh;
+  }
+  if (mm.length === 1) {
+    mm = '0' + mm;
+  }
+  let ss = '';
+  if (isManageSeconds(component)) {
+    ss = selectedTime.getSeconds().toString();
+    if (ss.length === 1) {
+      ss = '0' + ss;
+    }
+  }
+  let seconds;
+  let time = [
+    index.h("span", { id: kupManager.KupCardBuiltinClockElements.HOURS, class: `h ${getHoursActive(component) ? kupManager.KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      }, onClick: () => {
+        setClockViewActive(component, true, false, false);
+        switchView(component, kupManager.KupCardBuiltinClockElements.HOURS, kupManager.KupCardBuiltinClockElements.HOURSCIRCLE);
+      }, innerHTML: hh }),
+    ':',
+    index.h("span", { id: kupManager.KupCardBuiltinClockElements.MINUTES, class: `m ${getMinutesActive(component) ? kupManager.KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      }, onClick: () => {
+        setClockViewActive(component, false, true, false);
+        switchView(component, kupManager.KupCardBuiltinClockElements.MINUTES, kupManager.KupCardBuiltinClockElements.MINUTESCIRCLE);
+      }, innerHTML: mm }),
+  ];
+  if (isManageSeconds(component)) {
+    seconds = (index.h("div", { id: kupManager.KupCardBuiltinClockElements.SECONDSCIRCLE, class: `circle seconds ${getSecondsActive(component) ? kupManager.KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      } },
+      buildClock(60, 101, 115, 115, 'sec unit', 0, 5, ss, component),
+      index.h("div", { class: "mid" })));
+    time.push(':', index.h("span", { id: kupManager.KupCardBuiltinClockElements.SECONDS, class: `s ${getSecondsActive(component) ? kupManager.KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      }, onClick: () => {
+        setClockViewActive(component, false, false, true);
+        switchView(component, kupManager.KupCardBuiltinClockElements.SECONDS, kupManager.KupCardBuiltinClockElements.SECONDSCIRCLE);
+      }, innerHTML: ss }));
+  }
+  const confirmButtonProp = {
+    label: 'Ok',
+    styling: fButtonDeclarations.FButtonStyling.FLAT,
+    onClick: (e) => {
+      setTimeFromClock(e, component);
+    },
+  };
+  return (index.h("div", { class: "clock", id: kupManager.KupCardBuiltinClockElements.CLOCK, ref: (el) => {
+      setElement(component, el);
+    } },
+    index.h("div", { class: "top" }, time),
+    index.h("div", { id: kupManager.KupCardBuiltinClockElements.HOURSCIRCLE, class: `circle hours ${getHoursActive(component) ? kupManager.KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      } },
+      buildClock(12, 101, 105, 105, 'hour', 0, 1, hh, component),
+      buildClock(12, 64, 110, 110, 'hour2', 12, 1, hh, component),
+      index.h("div", { class: "mid" })),
+    index.h("div", { id: kupManager.KupCardBuiltinClockElements.MINUTESCIRCLE, class: `circle minutes ${getMinutesActive(component) ? kupManager.KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      } },
+      buildClock(60, 101, 115, 115, 'min unit', 0, 5, mm, component),
+      index.h("div", { class: "mid" })),
+    seconds,
+    index.h("div", { class: "actions" },
+      index.h(fButton.FButton, Object.assign({}, confirmButtonProp)))));
+}
+function setClockViewActive(component, hoursAct, minutesAct, secondsAct) {
+  const el = component.rootElement;
+  el.kupData.hoursActive = hoursAct;
+  el.kupData.minutesActive = minutesAct;
+  el.kupData.secondsActive = secondsAct;
+}
+function switchView(component, elId, elCircleId) {
+  getElement(component, kupManager.KupCardBuiltinClockElements.HOURS).classList.remove(kupManager.KupCardCSSClasses.VISIBLE);
+  getElement(component, kupManager.KupCardBuiltinClockElements.HOURSCIRCLE).classList.remove(kupManager.KupCardCSSClasses.VISIBLE);
+  getElement(component, kupManager.KupCardBuiltinClockElements.MINUTES).classList.remove(kupManager.KupCardCSSClasses.VISIBLE);
+  getElement(component, kupManager.KupCardBuiltinClockElements.MINUTESCIRCLE).classList.remove(kupManager.KupCardCSSClasses.VISIBLE);
+  if (isManageSeconds(component)) {
+    getElement(component, kupManager.KupCardBuiltinClockElements.SECONDS).classList.remove(kupManager.KupCardCSSClasses.VISIBLE);
+    getElement(component, kupManager.KupCardBuiltinClockElements.SECONDSCIRCLE).classList.remove(kupManager.KupCardCSSClasses.VISIBLE);
+  }
+  getElement(component, elId).classList.add(kupManager.KupCardCSSClasses.VISIBLE);
+  getElement(component, elCircleId).classList.add(kupManager.KupCardCSSClasses.VISIBLE);
+}
+function buildClock(num, radius, offsetX, offsetY, className, add, separator, selectedValue, component) {
+  let x, y;
+  const divsArray = [];
+  for (let n = 0; n < num; n++) {
+    x = radius * Math.cos((n / num) * 2 * Math.PI);
+    y = radius * Math.sin((n / num) * 2 * Math.PI);
+    let text;
+    let dataValue = {};
+    let style = {};
+    if (separator == 1) {
+      if (n + 3 > 12) {
+        text = n + 3 - 12 + add + '';
+      }
+      else {
+        let calc = n + 3 + add;
+        if (calc !== 24) {
+          text = n + 3 + add + '';
+        }
+        else {
+          text = '00';
+        }
+      }
+      dataValue['data-value'] = text;
+    }
+    else {
+      if (n % separator == 0) {
+        if (n + 15 >= 60) {
+          dataValue['data-value'] = n + 15 - 60 + '';
+          text = n + 15 - 60 + add + '';
+        }
+        else {
+          dataValue['data-value'] = n + 15 + '';
+          text = n + 15 + add + '';
+        }
+      }
+      else {
+        if (n + 15 >= 60) {
+          dataValue['data-value'] = n + 15 - 60 + '';
+          text = '⋅';
+        }
+        else {
+          dataValue['data-value'] = n + 15 + '';
+          text = '\u00B7';
+        }
+      }
+    }
+    style['left'] = x + offsetX + 'px';
+    style['top'] = y + offsetY + 'px';
+    if (dataValue['data-value'].length === 1) {
+      dataValue['data-value'] = '0' + dataValue['data-value'];
+    }
+    let elClass = className;
+    if (dataValue['data-value'] === selectedValue) {
+      elClass += ' selected';
+    }
+    let div = (index.h("div", Object.assign({ class: elClass, style: style }, dataValue, { onClick: (e) => setClockTime(e, component) }), text));
+    divsArray.push(div);
+  }
+  return divsArray;
+}
+function setTimeFromClock(e, component) {
+  const hoursEl = getElement(component, kupManager.KupCardBuiltinClockElements.HOURS);
+  const minutesEl = getElement(component, kupManager.KupCardBuiltinClockElements.MINUTES);
+  const secondsEl = getElement(component, kupManager.KupCardBuiltinClockElements.SECONDS);
+  let text = hoursEl.innerText + ':' + minutesEl.innerText;
+  if (isManageSeconds(component)) {
+    text += ':' + secondsEl.innerText;
+  }
+  onKupClockItemClick(e, component, text);
+}
+function setClockTime(e, component) {
+  const hoursEl = getElement(component, kupManager.KupCardBuiltinClockElements.HOURS);
+  const minutesEl = getElement(component, kupManager.KupCardBuiltinClockElements.MINUTES);
+  const hoursCircleEl = getElement(component, kupManager.KupCardBuiltinClockElements.HOURSCIRCLE);
+  const minutesCircleEl = getElement(component, kupManager.KupCardBuiltinClockElements.MINUTESCIRCLE);
+  const secondsEl = getElement(component, kupManager.KupCardBuiltinClockElements.SECONDS);
+  const secondsCircleEl = getElement(component, kupManager.KupCardBuiltinClockElements.SECONDSCIRCLE);
+  let time = e.target.getAttribute('data-value');
+  if (getHoursActive(component)) {
+    hoursEl.innerText = time;
+    hoursCircleEl.querySelector('.selected').classList.remove('selected');
+    setClockViewActive(component, false, true, false);
+    switchView(component, kupManager.KupCardBuiltinClockElements.MINUTES, kupManager.KupCardBuiltinClockElements.MINUTESCIRCLE);
+  }
+  else if (getMinutesActive(component)) {
+    minutesEl.innerText = time;
+    minutesCircleEl.querySelector('.selected').classList.remove('selected');
+    if (isManageSeconds(component)) {
+      setClockViewActive(component, false, false, true);
+      switchView(component, kupManager.KupCardBuiltinClockElements.SECONDS, kupManager.KupCardBuiltinClockElements.SECONDSCIRCLE);
+    }
+    else {
+      setTimeFromClock(e, component);
+      setClockViewActive(component, true, false, false);
+      switchView(component, kupManager.KupCardBuiltinClockElements.HOURS, kupManager.KupCardBuiltinClockElements.HOURSCIRCLE);
+    }
+  }
+  else {
+    secondsEl.innerText = time;
+    secondsCircleEl.querySelector('.selected').classList.remove('selected');
+    setTimeFromClock(e, component);
+    setClockViewActive(component, true, false, false);
+    switchView(component, kupManager.KupCardBuiltinClockElements.HOURS, kupManager.KupCardBuiltinClockElements.HOURSCIRCLE);
+  }
+  e.target.classList.add('selected');
+}
+
+/**
+ * 1st builtin card layout, calendar view.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st builtin layout virtual node.
+ */
+function create1$5(component) {
+  return (index.h("div", { class: `builtin-layout-${component.layoutNumber} ${kupManager.KupCardCSSClasses.BUILTIN_CARD}` }, prepareCalendar(component)));
+}
+/**
+ * 2st builtin card layout, time view.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 2st builtin layout virtual node.
+ */
+function create2$4(component) {
+  return (index.h("div", { class: `builtin-layout-${component.layoutNumber} ${kupManager.KupCardCSSClasses.BUILTIN_CARD}` }, prepareClock(component)));
+}
+
+const builtinLayouts = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    create1: create1$5,
+    create2: create2$4
+});
+
 /**
  * Component IDs.
  */
@@ -7119,7 +7931,7 @@ function layoutSpecificEvents(component, e) {
  * @param {KupCard} component - Card component.
  * @returns {VNode} 1st collapsible layout virtual node.
  */
-function create1$3(component) {
+function create1$4(component) {
   //Chips
   const chipArray = component.data['chip']
     ? component.data['chip']
@@ -7194,7 +8006,7 @@ function create2$3(component) {
 
 const collapsibleLayouts = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    create1: create1$3,
+    create1: create1$4,
     create2: create2$3
 });
 
@@ -7204,7 +8016,7 @@ const dom$1 = document.documentElement;
  * @param {KupCard} component - Card component.
  * @returns {VNode} 1st standard layout virtual node.
  */
-function create1$2(component) {
+function create1$3(component) {
   //Title, subtitle and description
   const textArray = component.data['text']
     ? component.data['text']
@@ -7428,7 +8240,7 @@ function getVisibleColumn(data) {
 
 const dialogLayouts = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    create1: create1$2,
+    create1: create1$3,
     create2: create2$2,
     create3: create3$2,
     create4: create4$2,
@@ -7436,6 +8248,22 @@ const dialogLayouts = /*#__PURE__*/Object.freeze({
     create6: create6$2
 });
 
+/**
+ * 1st free card layout, only slots.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+function create1$2(component) {
+  //Slot list
+  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
+  return (index.h("div", { class: `free-layout-${component.layoutNumber}` }, slots.length > 0 ? compList(slots, 'slot') : null));
+}
+
+const freeLayouts = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    create1: create1$2
+});
+
 /**
  * 1st scalable card layout, column of 2 texts.
  * @param {KupCard} component - Card component.
@@ -8473,7 +9301,7 @@ const standardLayouts = /*#__PURE__*/Object.freeze({
     create15: create15
 });
 
-const kupCardCss = ".collapsible-layout-1{color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.collapsible-layout-1 .section-1{background-color:var(--color-0);display:flex;flex:0 0 10%;max-width:10%}.collapsible-layout-1 .section-2{box-sizing:border-box;height:100%;display:flex;flex:0 0 90%;flex-direction:column;max-width:90%}.collapsible-layout-1 .section-2 .sub-1{min-height:1.5em;display:flex;padding:0.6rem 0.8em 0;font-weight:bold;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.collapsible-layout-1 .section-2 .sub-1 div{font-size:1em}.collapsible-layout-1 .section-2 .sub-1 .left{text-align:left;width:80%}.collapsible-layout-1 .section-2 .sub-1 .right{text-align:right;width:20%}.collapsible-layout-1 .section-2 .sub-2{text-align:left;padding:0.6em 0.8em;font-size:0.875em}.collapsible-layout-2{color:var(--kup-text-color);box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;border-radius:4px;display:flex;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.collapsible-layout-2 .section-1{box-sizing:border-box;height:100%;display:flex;flex-direction:column;max-width:100%;width:100%}.collapsible-layout-2 .section-1 .sub-1{text-align:left;padding:0.6em 0.8em 0;font-size:1em;font-weight:bold;max-width:75%}.collapsible-layout-2 .section-1 .sub-2{text-align:left;padding:0.6em 0.8em;max-width:75%}.collapsible-layout-2 .section-1 .sub-2 div{font-size:0.875em}.collapsible-layout-2 .section-1 .sub-3{color:var(--color-0);text-align:center;position:absolute;top:1em;right:1em;max-width:25%;text-overflow:ellipsis;overflow:hidden;max-height:calc(24px + 2.25em);padding:0 1em}.collapsible-layout-2 .section-1 .sub-3 kup-image{margin:auto}.collapsible-layout-2 .section-1 .sub-3 div{font-size:1.25em}.collapsible-card .collapsible-trigger{display:none;position:absolute;bottom:0;left:0;height:50px;width:100%}.collapsible-card .collapsible-trigger kup-button{margin:auto;width:48px}.collapsible-card .collapsible-wrapper{overflow:auto}.collapsible-card.collapsible-active{padding-bottom:50px}.collapsible-card.collapsible-active .collapsible-trigger{display:block}.dialog-layout-1{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);color:var(--kup-text-color);display:flex;flex-direction:column;height:100%;width:100%;overflow:auto}.dialog-layout-1 .section-1{display:grid;grid-gap:0.5em;grid-template-columns:repeat(2, auto);grid-template-rows:repeat(auto-fill, 1.25em);height:100%;padding:0.5em;overflow:auto;touch-action:none}.dialog-layout-1 .section-1 .text{min-width:max-content}.dialog-layout-1 .section-1 .text:not(.label){font-weight:bold}.dialog-layout-2{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-2 .section-1{text-align:center;touch-action:none;padding-bottom:1em}.dialog-layout-2 .section-1 .text{padding-top:0.75em}.dialog-layout-2 .section-1 .text:not(.label){font-weight:bold}.dialog-layout-2 .section-2{border-top:1px solid var(--kup-border-color);display:grid;grid-gap:0.5em;grid-template-columns:repeat(2, auto);grid-template-rows:repeat(auto-fill, 1.25em);height:100%;padding:0.5em;overflow:auto;touch-action:none}.dialog-layout-2 .section-2 .text{min-width:max-content}.dialog-layout-2 .section-2 .text:not(.label){font-weight:bold}.dialog-layout-3{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;overflow:visible;flex-direction:column;height:100%;position:relative;width:100%}.dialog-layout-3 kup-button{margin-left:0}.dialog-layout-3 .section-1{background-color:var(--kup-background-color);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;box-shadow:0px 1px 3px 0px var(--kup-text-color);height:52px;width:100%;text-align:right;touch-action:none}.dialog-layout-3 .section-1 kup-button{margin-right:0.25em}.dialog-layout-3 .section-2{height:100%;width:100%;overflow:auto;max-height:50vh}.dialog-layout-3 ::slotted(.text){color:var(--kup-text-color);font-family:var(--kup-font-family-monospace);white-space:nowrap;border-bottom:1px solid var(--kup-border-color);line-height:1.75em}.dialog-layout-4{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-4 .section-1{display:flex;justify-content:space-evenly}.dialog-layout-4 .section-2{height:100%;overflow:auto;padding:0.25em;touch-action:none}.dialog-layout-5{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-5 .section-1{display:flex;justify-content:space-evenly}.dialog-layout-5 .section-2{height:100%;overflow:auto}.dialog-layout-6{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;max-height:95vh;max-width:95vw;width:100%}.dialog-layout-6 .section-1{display:flex;height:100%;justify-content:space-evenly;overflow:auto}.dialog-layout-6 kup-data-table{width:100%}#drag-handle{-ms-touch-action:none;touch-action:none}#drag-handle:not(.header-bar){display:flex;height:100%}#drag-handle:not(.header-bar) .f-image{margin:auto}#drag-handle.header-bar{background-color:var(--kup-title-background-color);color:var(--kup-title-color);display:flex;flex-direction:row;height:2em;position:relative;width:100%}#drag-handle.header-bar .dialog-title{font-weight:bold;line-height:2em;padding-left:0.5em;padding-right:2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#drag-handle.header-bar #dialog-close{cursor:pointer;margin-right:0;transition:opacity 0.25s;position:absolute;right:0;background:var(--kup-title-background-color)}#drag-handle.header-bar #dialog-close:hover{opacity:0.5}.scalable-layout-1 .descr{font-size:70%;width:100%}.scalable-layout-1 .value{font-size:220%}.scalable-layout-2 #image1 img{object-fit:contain}.scalable-layout-2 .scalable-element{display:grid;grid-template-columns:1fr 1fr 0.5fr 0.5fr}.scalable-layout-2 .icon{margin:auto;font-size:150%;margin-right:5%}.scalable-layout-2 .value-int{font-size:250%}.scalable-layout-2 .value-dec,.scalable-layout-2 .unit{font-size:130%;margin-top:auto;margin-bottom:10%}.scalable-layout-2 .value-dec{margin-left:2%}.scalable-layout-2 .unit{margin-left:4%}.scalable-layout-3 .descr{font-size:70%;width:100%}.scalable-layout-3 .value{font-size:220%}.scalable-layout-4 #image1 img{object-fit:contain}.scalable-layout-4 .scalable-element{display:grid;grid-template-columns:1fr 5fr}.scalable-layout-4 .icon{font-size:150%;margin:auto 5% auto auto}.scalable-layout-4 .value-and-unit{display:flex;color:var(--color-0)}.scalable-layout-4 .value-and-unit .value-int{font-size:250%}.scalable-layout-4 .value-and-unit .value-dec,.scalable-layout-4 .value-and-unit .unit{font-size:130%;margin-top:auto;margin-bottom:10%}.scalable-layout-4 .value-and-unit .value-dec{margin-left:2%}.scalable-layout-4 .value-and-unit .unit{margin-left:4%}.scalable-layout-4 .descr{margin-left:4%;text-align:left;font-size:80%;width:100%;min-width:max-content}.scalable-layout-5 #image1 img{object-fit:contain}.scalable-layout-5 .scalable-element{display:flex}.scalable-layout-5 .text-wrapper{margin-right:10px}.scalable-layout-5 .icon{font-size:150%;margin:auto;margin-bottom:0.35em}.scalable-layout-5 .value{font-size:200%}.scalable-layout-5 .descr{text-align:right;font-size:65%;width:100%;min-width:max-content;position:relative;bottom:-10%}.scalable-layout-6 #image1 img{object-fit:contain}.scalable-layout-6 .scalable-element{display:flex;justify-content:space-between}.scalable-layout-6 .text-wrapper{margin-left:1em}.scalable-layout-6 .icon{font-size:150%;margin:auto}.scalable-layout-6 .value{font-size:220%;text-align:right}.scalable-layout-6 .descr{font-size:80%;text-align:right;width:100%;min-width:max-content}.scalable-layout-7 #image1 img{object-fit:contain}.scalable-layout-7 .scalable-element{display:flex}.scalable-layout-7 .text-wrapper{margin-right:0.5em}.scalable-layout-7 .icon{font-size:150%;margin:auto;margin-top:0.35em}.scalable-layout-7 .value{font-size:200%}.scalable-layout-7 .descr{text-align:right;font-size:65%;width:100%;min-width:max-content;position:relative;bottom:10%}.scalable-layout-8 #image1 img{object-fit:contain}.scalable-layout-8 .scalable-element{align-items:center;display:grid;grid-template-columns:0.25fr 1.25fr 0.25fr}.scalable-layout-8 .icon{margin-right:4%;font-size:75%}.scalable-layout-8 .value{margin:0 10%;font-size:250%}.scalable-layout-8 .descr{font-size:60%;text-align:left}.scalable-card{align-items:center;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);border-radius:4px;display:flex;font-size:calc(var(--kup-font-size) * var(--kup_card_multiplier));height:100%;justify-content:center;position:relative;text-align:center;word-break:normal;width:100%}.standard-layout-1{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-1 kup-button{margin-right:0}.standard-layout-1 #image1 img{object-fit:cover}.standard-layout-1.has-actions{padding-bottom:52px}.standard-layout-1.has-actions .section-2 .sub-2.description{padding-bottom:0}.standard-layout-1 .section-1{height:60%;width:100%}.standard-layout-1 .section-2{height:40%;width:100%;overflow:auto}.standard-layout-1 .section-2 .sub-2.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-1 .section-2 .sub-2.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-1 .section-2 .sub-2.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-1 .section-3{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-1 .section-3 kup-button{margin-left:0.25em}.standard-layout-2{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-2 kup-button{margin-right:0}.standard-layout-2 #image1 img{object-fit:cover}.standard-layout-2.has-actions{padding-bottom:52px}.standard-layout-2.has-actions .section-3 .sub-3.description{padding-bottom:0}.standard-layout-2 .section-1{width:100%}.standard-layout-2 .section-1 .sub-1.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-2 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-2 .section-1 .sub-1.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-2 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-2 .section-2{height:75%;width:100%}.standard-layout-2 .section-3{width:100%;overflow:auto}.standard-layout-2 .section-3 .sub-3.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em 8px;padding-top:1em;text-align:left}.standard-layout-2 .section-3 .sub-3.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-2 .section-4{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-2 .section-4 kup-button{margin-left:0.25em}.standard-layout-3{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-3 kup-button{margin-right:0}.standard-layout-3 #image1 img{object-fit:cover}.standard-layout-3.has-actions{padding-bottom:52px}.standard-layout-3.has-actions .section-2 .sub-2.description{padding-bottom:0}.standard-layout-3 .section-1{height:75%;width:100%}.standard-layout-3 .section-1 .media{position:relative;height:100%;width:100%}.standard-layout-3 .section-1 .text-on-media{position:absolute;bottom:0;left:0}.standard-layout-3 .section-1 .sub-1.title{color:white;padding:0 1em;padding-top:1em;text-align:left}.standard-layout-3 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-3 .section-1 .sub-1.subtitle{color:white;opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-3 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-3 .section-2{width:100%;overflow:auto}.standard-layout-3 .section-2 .sub-2.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em 8px;padding-top:1em;text-align:left}.standard-layout-3 .section-2 .sub-2.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-3 .section-3{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-3 .section-3 kup-button{margin-left:0.25em}.standard-layout-4{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-4 kup-button{margin-right:0}.standard-layout-4 #image1 img{object-fit:cover}.standard-layout-4.has-actions{padding-bottom:52px}.standard-layout-4.has-actions .section-3 .sub-3.description{padding-bottom:0}.standard-layout-4 .section-1{display:flex;height:100%;width:100%}.standard-layout-4 .section-1 .sub-1.image{width:33%}.standard-layout-4 .section-1 .sub-1.text{width:77%}.standard-layout-4 .section-1 .sub-1.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-4 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-4 .section-1 .sub-1.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-4 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-4 .section-2{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-4 .section-2 kup-button{margin-left:0.25em}.standard-layout-5{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);height:100%;overflow:hidden;width:100%}.standard-layout-5 .section-1{background-color:var(--color-0);height:3%}.standard-layout-5 .section-2{display:flex;height:53%}.standard-layout-5 .section-3{display:flex;height:24%}.standard-layout-5 .section-4{display:flex;height:20%;background-color:var(--color-1)}.standard-layout-5 .sub-2{box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.standard-layout-5 .sub-2.icon{min-height:20px;flex:0 0 10%;max-width:10%}.standard-layout-5 .sub-2.icon #image1{box-sizing:border-box;margin:auto;padding:0 20%}.standard-layout-5 .sub-2.icon #image1 img{object-fit:contain}.standard-layout-5 .sub-2.text{flex:0 0 70%;max-width:70%;margin:auto;height:100%;flex-wrap:nowrap;padding:1em;text-align:left}.standard-layout-5 .sub-2.image{box-sizing:border-box;flex:0 0 20%;padding:1.5vh 0;max-width:20%}.standard-layout-5 .sub-2.image #image2{box-sizing:border-box;margin:auto;padding:0 10%}.standard-layout-5 .sub-2.image #image2 img{object-fit:contain}.standard-layout-5 .sub-2 .desc-text{overflow:auto}.standard-layout-5 .sub-2 .alt-text{color:var(--kup-primary-color)}.standard-layout-5 .sub-3{box-sizing:border-box}.standard-layout-5 .sub-3.progress-bar{margin:auto;padding:0 5%;vertical-align:2px;width:80%}.standard-layout-5 .sub-3.button{margin:auto;text-align:center;width:20%}.standard-layout-5 .sub-3 kup-button{margin:auto}.standard-layout-5 .sub-4{box-sizing:border-box;margin:auto}.standard-layout-5 .sub-4.text{width:50%;font-size:0.875em}.standard-layout-5 .sub-4 div{padding:0 5%}.standard-layout-5 .sub-4 .alt-text{color:var(--color-0);font-size:1em}.standard-layout-5 .alt-text{font-weight:bold}@media screen and (max-width: 767px){.standard-layout-5 .sub-2.image{display:none}.standard-layout-5 .sub-2.icon{flex-basis:30%;max-width:30%}}.standard-layout-6{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;height:100%;overflow:hidden;width:100%}.standard-layout-6 .section-1{background-color:var(--color-0);display:flex;flex:0 0 10%;max-width:10%}.standard-layout-6 .section-1 .alt-text{color:var(--kup_card_dynamic_color_0);height:100%;text-align:center;writing-mode:vertical-lr;margin:auto;font-size:1.25em}.standard-layout-6 .section-2{box-sizing:border-box;height:100%;display:flex;flex:0 0 90%;flex-direction:column;max-width:90%}.standard-layout-6 .section-2 .sub-2{margin:auto;text-align:center}.standard-layout-6 .section-2 .sub-2 kup-progress-bar{margin-bottom:1em}.standard-layout-6 kup-button{position:absolute;bottom:2%;right:2%}.standard-layout-7{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.standard-layout-7 #image1 img{margin:auto;object-fit:contain}.standard-layout-7 .section-1{background-color:var(--color-0);height:5%;width:100%}.standard-layout-7 .section-2{height:80%;width:100%;text-align:center;padding:25px 25%;box-sizing:border-box}.standard-layout-7 .section-2 .sub-2{margin:auto}.standard-layout-7 .section-2 .sub-2.image{box-sizing:border-box;height:65%}.standard-layout-7 .section-2 .sub-2.text{font-size:1.4em;letter-spacing:1.2px;padding-top:1em;height:35%}.standard-layout-7 .section-3{display:flex;height:15%;width:100%}.standard-layout-7 .section-3 .alt-text{margin:auto;opacity:0.75;width:50%}.standard-layout-7 .section-3 .alt-text:nth-child(1){margin-left:1em;text-align:left}.standard-layout-7 .section-3 .alt-text:nth-child(2){margin-right:1em;text-align:right}.standard-layout-8{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-8 .background{background-color:var(--color-0);content:\"\";height:100%;width:100%;opacity:0.1;pointer-events:none;position:absolute;top:0;left:0;z-index:1}.standard-layout-8 .section-1{box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;overflow:auto;height:auto}.standard-layout-8 .section-1 .sub-1{text-align:left;padding:0.6em 0.8em 0;font-size:1em;font-weight:bold;max-width:75%}.standard-layout-8 .section-1 .sub-2{text-align:left;padding:0.6em 0.8em;font-size:0.875em;max-width:75%}.standard-layout-8 .section-1 .sub-3{color:var(--color-0);font-weight:bold;text-align:center;font-size:1.2em;position:absolute;top:1em;right:1em;max-width:25%;text-overflow:ellipsis;max-height:calc(24px + 2.25em);padding:0 1em;overflow:hidden}.standard-layout-8 .section-1 .sub-3 kup-image{margin:auto}.standard-layout-8 .section-2{display:flex;height:auto;overflow:auto}.standard-layout-9{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-9 #image1 img{object-fit:contain}.standard-layout-9 .section-1{margin-top:auto;margin-right:18px;margin-bottom:auto;white-space:nowrap}.standard-layout-9 .section-2{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-9 .sub-2{display:flex;flex-direction:row}.standard-layout-9 .text{text-align:left}.standard-layout-9 .text-wrapper{display:flex;flex-direction:column}.standard-layout-9 .icon{margin:auto;padding:0 1.25em}.standard-layout-9 .description{font-size:1.5em;letter-spacing:1px;padding-left:1.25em;padding-top:0.25em}.standard-layout-9 .title{font-size:2.75em;font-weight:bold}.standard-layout-9 .subtitle{font-size:1.5em;opacity:0.75}.standard-layout-10{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-10 #image1 img{object-fit:contain}.standard-layout-10 .section-1{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-10 .section-2{margin-top:auto;margin-left:18px;margin-bottom:auto;white-space:nowrap}.standard-layout-10 .sub-2{display:flex;flex-direction:row-reverse}.standard-layout-10 .text{text-align:right}.standard-layout-10 .text-wrapper{display:flex;flex-direction:column}.standard-layout-10 .icon{margin:auto;padding:0 1.25em}.standard-layout-10 .description{font-size:1.5em;letter-spacing:1px;padding-right:1.25em;padding-top:0.25em}.standard-layout-10 .title{font-size:2.75em;font-weight:bold}.standard-layout-10 .subtitle{font-size:1.5em;opacity:0.75}.standard-layout-11{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-11 #image1 img{object-fit:contain}.standard-layout-11 .section-1{display:flex;height:100%;margin-top:auto;margin-bottom:auto;min-width:6em;max-width:6em;overflow:hidden;transition:0.25s ease-in}.standard-layout-11 .section-2{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-11 .sub-1{background-color:var(--color-0);height:100%;text-align:center;writing-mode:vertical-lr;min-width:6em;display:flex;transition:width 0.25s ease-in}.standard-layout-11 .sub-1 div{font-size:1.25em}.standard-layout-11 .sub-2{display:flex;flex-direction:row}.standard-layout-11 .text:not(.description){text-align:left}.standard-layout-11 .text-wrapper{display:flex;flex-direction:column}.standard-layout-11 .icon{margin:auto;padding:0 1.25em}.standard-layout-11 .description{font-size:1.5em;letter-spacing:1px;margin:auto;color:var(--kup_card_dynamic_color_0)}.standard-layout-11 .title{font-size:2.75em;font-weight:bold;margin-top:auto}.standard-layout-11 .subtitle{font-size:1.5em;opacity:0.75;margin-bottom:auto}.standard-layout-12{background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);min-width:200px;min-width:-moz-max-content;min-width:-webkit-max-content;}.standard-layout-12 .section-1{display:inline-flex;border-bottom:1px solid var(--kup-border-color);width:100%}.standard-layout-12 .section-1 kup-button{margin:0}.standard-layout-12 .section-2{display:flex;flex-direction:column}.standard-layout-12 .section-2.has-content{border-bottom:1px solid var(--kup-border-color);padding:0.5em 0.5em}.standard-layout-12 .section-2 kup-date-picker:first-of-type,.standard-layout-12 .section-2 kup-time-picker:first-of-type{margin-bottom:0.5em}.standard-layout-12 .section-3{backface-visibility:hidden;display:flex;flex-direction:column;max-height:20vh;overflow:auto}.standard-layout-12 .section-3 kup-checkbox{margin-left:0;margin-right:auto}.standard-layout-13{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-13 kup-button{margin-left:0}.standard-layout-13 .section-1{background-color:var(--kup-background-color);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;box-shadow:0px 1px 3px 0px var(--kup-text-color);height:52px;width:100%;text-align:right}.standard-layout-13 .section-1 kup-button{margin-right:0.25em}.standard-layout-13 .section-2{height:100%;width:100%;overflow:auto;max-height:50vh}.standard-layout-13 .text{color:var(--kup-text-color);font-family:var(--kup-font-family-monospace);white-space:nowrap;border-bottom:1px solid var(--kup-border-color);line-height:1.75em}.standard-layout-14{background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);min-width:200px;min-width:-moz-max-content;min-width:-webkit-max-content;}.standard-layout-14 .section-1{display:flex;padding:1em}.standard-layout-14 .section-1 .sub-1{width:100%}.standard-layout-14 .section-1 .sub-spinner{height:88px;width:88px;margin:0 10px}.standard-layout-14 .section-1 .f-image{margin:0 0.5em 0 0}.standard-layout-14 .section-1 .title{font-size:1.25em;margin-top:-0.5em;padding:0 0.25em 0.25em}.standard-layout-14 .section-1 .title .label{cursor:pointer;padding-right:0.25em}.standard-layout-14 .section-1 .title .label:hover{text-decoration:underline}.standard-layout-14 .section-1 .info{display:flex;padding:0 0.25em 0.25em;width:100%}.standard-layout-14 .section-1 .info .label{color:rgba(var(--kup-text-color-rgb), 0.75);margin-right:0.75em;min-width:max-content;width:auto}.standard-layout-14 .section-1 .info .value{width:100%}.standard-layout-14 .sub-button{display:inline-flex;width:100%}.standard-layout-14 .sub-button kup-button{margin:0}.standard-layout-14 .sub-checkbox{backface-visibility:hidden;display:flex;flex-direction:column;max-height:20vh;overflow:auto}.standard-layout-14 .sub-checkbox kup-checkbox{margin-left:0;margin-right:auto}.standard-layout-14 .sub-chip{max-width:25vw;overflow:auto;box-shadow:0 3px 2px -2px var(--kup-border-color)}.standard-layout-14 .sub-field{display:flex;flex-direction:column}.standard-layout-14 .sub-field.has-content{border-bottom:1px solid var(--kup-border-color);padding:0.5em 0.5em}.standard-layout-14 .sub-field kup-date-picker:first-of-type,.standard-layout-14 .sub-field kup-time-picker:first-of-type{margin-bottom:0.5em}.standard-layout-14 .sub-spinner{height:100px}.standard-layout-14 .sub-autocomplete{padding-top:1em}.standard-layout-14 .sub-autocomplete kup-autocomplete{margin:auto;padding:0.5em 0;width:max-content}.standard-layout-14 .sub-switch{display:flex;justify-content:space-evenly;padding:2em}.standard-layout-14 .sub-tree{max-height:25vh;overflow:auto}.standard-layout-14 #apply{display:none}.standard-layout-14 #apply.visible{display:block}.standard-layout-14 #open-in-new,.standard-layout-14 #search,.standard-layout-14 #new{margin:0;display:inline-flex}.standard-layout-15{outline:none;display:block;font-size:var(--kup-font-size);background:var(--kup-background-color);color:var(--kup-text-color);box-shadow:var(--kup-box-shadow);border-radius:3px;min-width:350px;max-width:700px}.standard-layout-15 .section-1{box-sizing:border-box;display:flex;padding:1em}.standard-layout-15 .section-1 .sub-1{width:100%}.standard-layout-15 .section-1 .sub-spinner{height:88px;width:88px;margin:0 10px}.standard-layout-15 .section-1 .f-image{margin:0 0.5em 0 0}.standard-layout-15 .section-1 .title{font-size:1.25em;padding:0 0.25em 0.25em;text-align:left}.standard-layout-15 .section-1 .title .label{cursor:pointer;padding-right:0.25em}.standard-layout-15 .section-1 .title .label:hover{text-decoration:underline}.standard-layout-15 .section-1 .info{display:flex;padding:0 0.25em 0.25em;width:100%}.standard-layout-15 .section-1 .info .label{color:rgba(var(--kup-text-color-rgb), 0.75);margin-right:0.75em;min-width:max-content;width:auto}.standard-layout-15 .section-1 .info .value{width:100%}.standard-layout-15 .section-2{border-top:1px solid var(--kup-border-color);box-sizing:border-box;height:180px;opacity:1;overflow:auto;transition:height 250ms ease-out, opacity 250ms ease-out}.standard-layout-15 .section-2 .info{box-sizing:border-box;height:100%;padding:1.25em}.standard-layout-15 .section-2 .detail-row{display:flex;justify-content:space-between}.standard-layout-15 .section-2 .detail-row:not(:last-child){margin-bottom:6px}.standard-layout-15 .section-2 .detail-row__label{color:rgba(var(--kup-text-color-rgb), 0.5);margin-top:0.175em;max-width:320px}.standard-layout-15 .section-2 .detail-row__value{color:var(--kup-text-color);font-size:120%;max-width:320px}.standard-layout-15 .section-2 kup-tree{text-align:left}.standard-layout-15 .section-3{border-top:1px solid var(--kup-border-color);display:flex;justify-content:flex-end;padding:6px;padding-top:2px;padding-bottom:2px}.standard-layout-15 .section-3 kup-button{margin:auto 0}.standard-layout-15 #open-in-new,.standard-layout-15 #search,.standard-layout-15 #new{margin:0;display:inline-flex}:host{--kup_card_ripple_color:var(\n    --kup-card-ripple-color,\n    var(--kup-primary-color)\n  );display:block;font-size:var(--kup-font-size);height:var(--kup_card_height);min-height:var(--kup_card_height);min-width:var(--kup_card_width);outline:none;position:relative;width:var(--kup_card_width)}:host([is-menu]) #kup-component{animation:fade-in 0.25s ease-out;display:none}:host([menu-visible]) #kup-component{display:block}#kup-component{height:100%;width:100%}.mdc-ripple-surface{cursor:pointer;flex-direction:column;display:flex;height:100%;position:relative}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_card_ripple_color)}.card-view{animation:fade-in 0.25s ease-out;display:none;height:100%;width:100%}.card-view.visible{display:block}";
+const kupCardCss = ".builtin-layout-1{padding:0.5em}.builtin-layout-1 .section-1{box-sizing:border-box;height:5em;overflow:auto;padding-bottom:1em;width:100%}.builtin-layout-1 .section-1 .sub-1{display:flex;flex-direction:row;justify-content:center}.builtin-layout-1 .section-2{height:calc(100% - 60px);overflow:auto;width:100%}.builtin-layout-1 .prev-page{margin-left:auto}.builtin-layout-1 .change-view-button{margin:auto;width:12em;text-align:center}.builtin-layout-1 #change-view-button button{text-transform:capitalize}.builtin-layout-1 .next-page{margin-right:auto}.builtin-layout-1 .calendar{border-collapse:collapse;width:100%}.builtin-layout-1 thead{border-bottom:1px solid var(--kup-border-color)}.builtin-layout-1 .item-text{color:rgba(var(--kup-text-color-rgb), 0.5)}.builtin-layout-1 .item{text-align:center}.builtin-layout-1 .item:not(.selected) .item-number:hover{background-color:var(--kup-hover-background-color)}.builtin-layout-1 .item.selected .item-number,.builtin-layout-1 .item.selected .item-number:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.175)}.builtin-layout-1 .item-number{border-radius:50%;cursor:pointer;display:flex;justify-content:center;line-height:2.5em;margin:auto;width:2.5em;transition:background-color 0.25s;text-transform:capitalize}.builtin-layout-2 .clock{box-shadow:var(--kup-box-shadow);width:300px;height:450px;background-color:var(--kup-background-color);position:relative;font-family:var(--kup-font-family)}.builtin-layout-2 .top{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color);height:100px;line-height:100px;font-size:50px;text-align:center}.builtin-layout-2 .top span{cursor:pointer;opacity:0.75;transition:0.25s ease-in-out}.builtin-layout-2 .top .visible{opacity:1}.builtin-layout-2 .circle{user-select:none;background-color:rgba(var(--kup-text-color-rgb), 0.1);width:250px;height:250px;border-radius:1000px;position:relative;top:25px;left:25px;box-sizing:border-box;display:none}.builtin-layout-2 .circle.visible{display:block}.builtin-layout-2 .mid{position:absolute;left:calc(50% - 0px);top:calc(50% - 0px);width:2px;height:2px;border-radius:10px;background-color:var(--kup-text-color)}.builtin-layout-2 .hour{position:absolute;height:40px;line-height:40px;width:40px;border-radius:40px;text-align:center}.builtin-layout-2 .hour.selected{z-index:2}.builtin-layout-2 .hour.selected::after{content:\"\";z-index:-1;background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.builtin-layout-2 .hour2{z-index:2;position:absolute;height:30px;line-height:30px;width:30px;border-radius:40px;text-align:center;font-size:14px}.builtin-layout-2 .hour2.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:64px;right:50%;z-index:-1}.builtin-layout-2 .unit{position:absolute;height:20px;line-height:20px;width:20px;border-radius:40px;text-align:center;font-size:12px}.builtin-layout-2 .unit.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.builtin-layout-2 .hour,.builtin-layout-2 .hour2,.builtin-layout-2 .unit{cursor:pointer;transition:background-color 0.25s}.builtin-layout-2 .hour:hover,.builtin-layout-2 .hour2:hover,.builtin-layout-2 .unit:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.275)}.builtin-layout-2 .hour.selected,.builtin-layout-2 .hour2.selected,.builtin-layout-2 .unit.selected{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color)}.builtin-layout-2 .actions{color:var(--kup-primary-color);font-weight:bold;font-size:20px;display:flex;justify-content:flex-end;position:absolute;width:100%;box-sizing:border-box;bottom:10px}.builtin-layout-2 .action{display:inline-block;width:100px;text-align:center;height:37.5px;line-height:37.5px;margin-right:10px;cursor:pointer;border-radius:2px}.builtin-layout-2 .clock .actions .action:hover{background-color:rgba(0, 0, 0, 0.1)}.builtin-layout-2 .clock .actions .action:visible{background-color:rgba(0, 0, 0, 0.3)}.builtin-layout-2 .hour:nth-child(12):after{transform:rotate(330deg)}.builtin-layout-2 .hour:nth-child(11):after{transform:rotate(300deg)}.builtin-layout-2 .hour:nth-child(10):after{transform:rotate(270deg)}.builtin-layout-2 .hour:nth-child(9):after{transform:rotate(240deg)}.builtin-layout-2 .hour:nth-child(8):after{transform:rotate(210deg)}.builtin-layout-2 .hour:nth-child(7):after{transform:rotate(180deg)}.builtin-layout-2 .hour:nth-child(6):after{transform:rotate(150deg)}.builtin-layout-2 .hour:nth-child(5):after{transform:rotate(120deg)}.builtin-layout-2 .hour:nth-child(4):after{transform:rotate(90deg)}.builtin-layout-2 .hour:nth-child(3):after{transform:rotate(60deg)}.builtin-layout-2 .hour:nth-child(2):after{transform:rotate(30deg)}.builtin-layout-2 .hour:nth-child(1):after{transform:rotate(0deg)}.builtin-layout-2 .hour2:nth-child(24):after{transform:rotate(690deg)}.builtin-layout-2 .hour2:nth-child(23):after{transform:rotate(660deg)}.builtin-layout-2 .hour2:nth-child(22):after{transform:rotate(630deg)}.builtin-layout-2 .hour2:nth-child(21):after{transform:rotate(600deg)}.builtin-layout-2 .hour2:nth-child(20):after{transform:rotate(570deg)}.builtin-layout-2 .hour2:nth-child(19):after{transform:rotate(540deg)}.builtin-layout-2 .hour2:nth-child(18):after{transform:rotate(510deg)}.builtin-layout-2 .hour2:nth-child(17):after{transform:rotate(480deg)}.builtin-layout-2 .hour2:nth-child(16):after{transform:rotate(450deg)}.builtin-layout-2 .hour2:nth-child(15):after{transform:rotate(420deg)}.builtin-layout-2 .hour2:nth-child(14):after{transform:rotate(390deg)}.builtin-layout-2 .hour2:nth-child(13):after{transform:rotate(360deg)}.builtin-layout-2 .unit:nth-child(60):after{transform:rotate(354deg)}.builtin-layout-2 .unit:nth-child(59):after{transform:rotate(348deg)}.builtin-layout-2 .unit:nth-child(58):after{transform:rotate(342deg)}.builtin-layout-2 .unit:nth-child(57):after{transform:rotate(336deg)}.builtin-layout-2 .unit:nth-child(56):after{transform:rotate(330deg)}.builtin-layout-2 .unit:nth-child(55):after{transform:rotate(324deg)}.builtin-layout-2 .unit:nth-child(54):after{transform:rotate(318deg)}.builtin-layout-2 .unit:nth-child(53):after{transform:rotate(312deg)}.builtin-layout-2 .unit:nth-child(52):after{transform:rotate(306deg)}.builtin-layout-2 .unit:nth-child(51):after{transform:rotate(300deg)}.builtin-layout-2 .unit:nth-child(50):after{transform:rotate(294deg)}.builtin-layout-2 .unit:nth-child(49):after{transform:rotate(288deg)}.builtin-layout-2 .unit:nth-child(48):after{transform:rotate(282deg)}.builtin-layout-2 .unit:nth-child(47):after{transform:rotate(276deg)}.builtin-layout-2 .unit:nth-child(46):after{transform:rotate(270deg)}.builtin-layout-2 .unit:nth-child(45):after{transform:rotate(264deg)}.builtin-layout-2 .unit:nth-child(44):after{transform:rotate(258deg)}.builtin-layout-2 .unit:nth-child(43):after{transform:rotate(252deg)}.builtin-layout-2 .unit:nth-child(42):after{transform:rotate(246deg)}.builtin-layout-2 .unit:nth-child(41):after{transform:rotate(240deg)}.builtin-layout-2 .unit:nth-child(40):after{transform:rotate(234deg)}.builtin-layout-2 .unit:nth-child(39):after{transform:rotate(228deg)}.builtin-layout-2 .unit:nth-child(38):after{transform:rotate(222deg)}.builtin-layout-2 .unit:nth-child(37):after{transform:rotate(216deg)}.builtin-layout-2 .unit:nth-child(36):after{transform:rotate(210deg)}.builtin-layout-2 .unit:nth-child(35):after{transform:rotate(204deg)}.builtin-layout-2 .unit:nth-child(34):after{transform:rotate(198deg)}.builtin-layout-2 .unit:nth-child(33):after{transform:rotate(192deg)}.builtin-layout-2 .unit:nth-child(32):after{transform:rotate(186deg)}.builtin-layout-2 .unit:nth-child(31):after{transform:rotate(180deg)}.builtin-layout-2 .unit:nth-child(30):after{transform:rotate(174deg)}.builtin-layout-2 .unit:nth-child(29):after{transform:rotate(168deg)}.builtin-layout-2 .unit:nth-child(28):after{transform:rotate(162deg)}.builtin-layout-2 .unit:nth-child(27):after{transform:rotate(156deg)}.builtin-layout-2 .unit:nth-child(26):after{transform:rotate(150deg)}.builtin-layout-2 .unit:nth-child(25):after{transform:rotate(144deg)}.builtin-layout-2 .unit:nth-child(24):after{transform:rotate(138deg)}.builtin-layout-2 .unit:nth-child(23):after{transform:rotate(132deg)}.builtin-layout-2 .unit:nth-child(22):after{transform:rotate(126deg)}.builtin-layout-2 .unit:nth-child(21):after{transform:rotate(120deg)}.builtin-layout-2 .unit:nth-child(20):after{transform:rotate(114deg)}.builtin-layout-2 .unit:nth-child(19):after{transform:rotate(108deg)}.builtin-layout-2 .unit:nth-child(18):after{transform:rotate(102deg)}.builtin-layout-2 .unit:nth-child(17):after{transform:rotate(96deg)}.builtin-layout-2 .unit:nth-child(16):after{transform:rotate(90deg)}.builtin-layout-2 .unit:nth-child(15):after{transform:rotate(84deg)}.builtin-layout-2 .unit:nth-child(14):after{transform:rotate(78deg)}.builtin-layout-2 .unit:nth-child(13):after{transform:rotate(72deg)}.builtin-layout-2 .unit:nth-child(12):after{transform:rotate(66deg)}.builtin-layout-2 .unit:nth-child(11):after{transform:rotate(60deg)}.builtin-layout-2 .unit:nth-child(10):after{transform:rotate(54deg)}.builtin-layout-2 .unit:nth-child(9):after{transform:rotate(48deg)}.builtin-layout-2 .unit:nth-child(8):after{transform:rotate(42deg)}.builtin-layout-2 .unit:nth-child(7):after{transform:rotate(36deg)}.builtin-layout-2 .unit:nth-child(6):after{transform:rotate(30deg)}.builtin-layout-2 .unit:nth-child(5):after{transform:rotate(24deg)}.builtin-layout-2 .unit:nth-child(4):after{transform:rotate(18deg)}.builtin-layout-2 .unit:nth-child(3):after{transform:rotate(12deg)}.builtin-layout-2 .unit:nth-child(2):after{transform:rotate(6deg)}.builtin-layout-2 .unit:nth-child(1):after{transform:rotate(0deg)}.builtin-card{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.collapsible-layout-1{color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.collapsible-layout-1 .section-1{background-color:var(--color-0);display:flex;flex:0 0 10%;max-width:10%}.collapsible-layout-1 .section-2{box-sizing:border-box;height:100%;display:flex;flex:0 0 90%;flex-direction:column;max-width:90%}.collapsible-layout-1 .section-2 .sub-1{min-height:1.5em;display:flex;padding:0.6rem 0.8em 0;font-weight:bold;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.collapsible-layout-1 .section-2 .sub-1 div{font-size:1em}.collapsible-layout-1 .section-2 .sub-1 .left{text-align:left;width:80%}.collapsible-layout-1 .section-2 .sub-1 .right{text-align:right;width:20%}.collapsible-layout-1 .section-2 .sub-2{text-align:left;padding:0.6em 0.8em;font-size:0.875em}.collapsible-layout-2{color:var(--kup-text-color);box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;border-radius:4px;display:flex;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.collapsible-layout-2 .section-1{box-sizing:border-box;height:100%;display:flex;flex-direction:column;max-width:100%;width:100%}.collapsible-layout-2 .section-1 .sub-1{text-align:left;padding:0.6em 0.8em 0;font-size:1em;font-weight:bold;max-width:75%}.collapsible-layout-2 .section-1 .sub-2{text-align:left;padding:0.6em 0.8em;max-width:75%}.collapsible-layout-2 .section-1 .sub-2 div{font-size:0.875em}.collapsible-layout-2 .section-1 .sub-3{color:var(--color-0);text-align:center;position:absolute;top:1em;right:1em;max-width:25%;text-overflow:ellipsis;overflow:hidden;max-height:calc(24px + 2.25em);padding:0 1em}.collapsible-layout-2 .section-1 .sub-3 kup-image{margin:auto}.collapsible-layout-2 .section-1 .sub-3 div{font-size:1.25em}.collapsible-card .collapsible-trigger{display:none;position:absolute;bottom:0;left:0;height:50px;width:100%}.collapsible-card .collapsible-trigger kup-button{margin:auto;width:48px}.collapsible-card .collapsible-wrapper{overflow:auto}.collapsible-card.collapsible-active{padding-bottom:50px}.collapsible-card.collapsible-active .collapsible-trigger{display:block}.dialog-layout-1{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);color:var(--kup-text-color);display:flex;flex-direction:column;height:100%;width:100%;overflow:auto}.dialog-layout-1 .section-1{display:grid;grid-gap:0.5em;grid-template-columns:repeat(2, auto);grid-template-rows:repeat(auto-fill, 1.25em);height:100%;padding:0.5em;overflow:auto;touch-action:none}.dialog-layout-1 .section-1 .text{min-width:max-content}.dialog-layout-1 .section-1 .text:not(.label){font-weight:bold}.dialog-layout-2{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-2 .section-1{text-align:center;touch-action:none;padding-bottom:1em}.dialog-layout-2 .section-1 .text{padding-top:0.75em}.dialog-layout-2 .section-1 .text:not(.label){font-weight:bold}.dialog-layout-2 .section-2{border-top:1px solid var(--kup-border-color);display:grid;grid-gap:0.5em;grid-template-columns:repeat(2, auto);grid-template-rows:repeat(auto-fill, 1.25em);height:100%;padding:0.5em;overflow:auto;touch-action:none}.dialog-layout-2 .section-2 .text{min-width:max-content}.dialog-layout-2 .section-2 .text:not(.label){font-weight:bold}.dialog-layout-3{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;overflow:visible;flex-direction:column;height:100%;position:relative;width:100%}.dialog-layout-3 kup-button{margin-left:0}.dialog-layout-3 .section-1{background-color:var(--kup-background-color);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;box-shadow:0px 1px 3px 0px var(--kup-text-color);height:52px;width:100%;text-align:right;touch-action:none}.dialog-layout-3 .section-1 kup-button{margin-right:0.25em}.dialog-layout-3 .section-2{height:100%;width:100%;overflow:auto;max-height:50vh}.dialog-layout-3 ::slotted(.text){color:var(--kup-text-color);font-family:var(--kup-font-family-monospace);white-space:nowrap;border-bottom:1px solid var(--kup-border-color);line-height:1.75em}.dialog-layout-4{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-4 .section-1{display:flex;justify-content:space-evenly}.dialog-layout-4 .section-2{height:100%;overflow:auto;padding:0.25em;touch-action:none}.dialog-layout-5{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-5 .section-1{display:flex;justify-content:space-evenly}.dialog-layout-5 .section-2{height:100%;overflow:auto}.dialog-layout-6{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;max-height:95vh;max-width:95vw;width:100%}.dialog-layout-6 .section-1{display:flex;height:100%;justify-content:space-evenly;overflow:auto}.dialog-layout-6 kup-data-table{width:100%}#drag-handle{-ms-touch-action:none;touch-action:none}#drag-handle:not(.header-bar){display:flex;height:100%}#drag-handle:not(.header-bar) .f-image{margin:auto}#drag-handle.header-bar{background-color:var(--kup-title-background-color);color:var(--kup-title-color);display:flex;flex-direction:row;height:2em;position:relative;width:100%}#drag-handle.header-bar .dialog-title{font-weight:bold;line-height:2em;padding-left:0.5em;padding-right:2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#drag-handle.header-bar #dialog-close{cursor:pointer;margin-right:0;transition:opacity 0.25s;position:absolute;right:0;background:var(--kup-title-background-color)}#drag-handle.header-bar #dialog-close:hover{opacity:0.5}.free-layout-1{background:var(--kup-background-color);box-shadow:var(--kup-box-shadow);box-sizing:border-box;overflow:auto;padding:1em}.scalable-layout-1 .descr{font-size:70%;width:100%}.scalable-layout-1 .value{font-size:220%}.scalable-layout-2 #image1 img{object-fit:contain}.scalable-layout-2 .scalable-element{display:grid;grid-template-columns:1fr 1fr 0.5fr 0.5fr}.scalable-layout-2 .icon{margin:auto;font-size:150%;margin-right:5%}.scalable-layout-2 .value-int{font-size:250%}.scalable-layout-2 .value-dec,.scalable-layout-2 .unit{font-size:130%;margin-top:auto;margin-bottom:10%}.scalable-layout-2 .value-dec{margin-left:2%}.scalable-layout-2 .unit{margin-left:4%}.scalable-layout-3 .descr{font-size:70%;width:100%}.scalable-layout-3 .value{font-size:220%}.scalable-layout-4 #image1 img{object-fit:contain}.scalable-layout-4 .scalable-element{display:grid;grid-template-columns:1fr 5fr}.scalable-layout-4 .icon{font-size:150%;margin:auto 5% auto auto}.scalable-layout-4 .value-and-unit{display:flex;color:var(--color-0)}.scalable-layout-4 .value-and-unit .value-int{font-size:250%}.scalable-layout-4 .value-and-unit .value-dec,.scalable-layout-4 .value-and-unit .unit{font-size:130%;margin-top:auto;margin-bottom:10%}.scalable-layout-4 .value-and-unit .value-dec{margin-left:2%}.scalable-layout-4 .value-and-unit .unit{margin-left:4%}.scalable-layout-4 .descr{margin-left:4%;text-align:left;font-size:80%;width:100%;min-width:max-content}.scalable-layout-5 #image1 img{object-fit:contain}.scalable-layout-5 .scalable-element{display:flex}.scalable-layout-5 .text-wrapper{margin-right:10px}.scalable-layout-5 .icon{font-size:150%;margin:auto;margin-bottom:0.35em}.scalable-layout-5 .value{font-size:200%}.scalable-layout-5 .descr{text-align:right;font-size:65%;width:100%;min-width:max-content;position:relative;bottom:-10%}.scalable-layout-6 #image1 img{object-fit:contain}.scalable-layout-6 .scalable-element{display:flex;justify-content:space-between}.scalable-layout-6 .text-wrapper{margin-left:1em}.scalable-layout-6 .icon{font-size:150%;margin:auto}.scalable-layout-6 .value{font-size:220%;text-align:right}.scalable-layout-6 .descr{font-size:80%;text-align:right;width:100%;min-width:max-content}.scalable-layout-7 #image1 img{object-fit:contain}.scalable-layout-7 .scalable-element{display:flex}.scalable-layout-7 .text-wrapper{margin-right:0.5em}.scalable-layout-7 .icon{font-size:150%;margin:auto;margin-top:0.35em}.scalable-layout-7 .value{font-size:200%}.scalable-layout-7 .descr{text-align:right;font-size:65%;width:100%;min-width:max-content;position:relative;bottom:10%}.scalable-layout-8 #image1 img{object-fit:contain}.scalable-layout-8 .scalable-element{align-items:center;display:grid;grid-template-columns:0.25fr 1.25fr 0.25fr}.scalable-layout-8 .icon{margin-right:4%;font-size:75%}.scalable-layout-8 .value{margin:0 10%;font-size:250%}.scalable-layout-8 .descr{font-size:60%;text-align:left}.scalable-card{align-items:center;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);border-radius:4px;display:flex;font-size:calc(var(--kup-font-size) * var(--kup_card_multiplier));height:100%;justify-content:center;position:relative;text-align:center;word-break:normal;width:100%}.standard-layout-1{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-1 kup-button{margin-right:0}.standard-layout-1 #image1 img{object-fit:cover}.standard-layout-1.has-actions{padding-bottom:52px}.standard-layout-1.has-actions .section-2 .sub-2.description{padding-bottom:0}.standard-layout-1 .section-1{height:60%;width:100%}.standard-layout-1 .section-2{height:40%;width:100%;overflow:auto}.standard-layout-1 .section-2 .sub-2.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-1 .section-2 .sub-2.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-1 .section-2 .sub-2.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-1 .section-3{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-1 .section-3 kup-button{margin-left:0.25em}.standard-layout-2{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-2 kup-button{margin-right:0}.standard-layout-2 #image1 img{object-fit:cover}.standard-layout-2.has-actions{padding-bottom:52px}.standard-layout-2.has-actions .section-3 .sub-3.description{padding-bottom:0}.standard-layout-2 .section-1{width:100%}.standard-layout-2 .section-1 .sub-1.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-2 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-2 .section-1 .sub-1.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-2 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-2 .section-2{height:75%;width:100%}.standard-layout-2 .section-3{width:100%;overflow:auto}.standard-layout-2 .section-3 .sub-3.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em 8px;padding-top:1em;text-align:left}.standard-layout-2 .section-3 .sub-3.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-2 .section-4{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-2 .section-4 kup-button{margin-left:0.25em}.standard-layout-3{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-3 kup-button{margin-right:0}.standard-layout-3 #image1 img{object-fit:cover}.standard-layout-3.has-actions{padding-bottom:52px}.standard-layout-3.has-actions .section-2 .sub-2.description{padding-bottom:0}.standard-layout-3 .section-1{height:75%;width:100%}.standard-layout-3 .section-1 .media{position:relative;height:100%;width:100%}.standard-layout-3 .section-1 .text-on-media{position:absolute;bottom:0;left:0}.standard-layout-3 .section-1 .sub-1.title{color:white;padding:0 1em;padding-top:1em;text-align:left}.standard-layout-3 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-3 .section-1 .sub-1.subtitle{color:white;opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-3 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-3 .section-2{width:100%;overflow:auto}.standard-layout-3 .section-2 .sub-2.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em 8px;padding-top:1em;text-align:left}.standard-layout-3 .section-2 .sub-2.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-3 .section-3{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-3 .section-3 kup-button{margin-left:0.25em}.standard-layout-4{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-4 kup-button{margin-right:0}.standard-layout-4 #image1 img{object-fit:cover}.standard-layout-4.has-actions{padding-bottom:52px}.standard-layout-4.has-actions .section-3 .sub-3.description{padding-bottom:0}.standard-layout-4 .section-1{display:flex;height:100%;width:100%}.standard-layout-4 .section-1 .sub-1.image{width:33%}.standard-layout-4 .section-1 .sub-1.text{width:77%}.standard-layout-4 .section-1 .sub-1.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-4 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-4 .section-1 .sub-1.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-4 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-4 .section-2{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-4 .section-2 kup-button{margin-left:0.25em}.standard-layout-5{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);height:100%;overflow:hidden;width:100%}.standard-layout-5 .section-1{background-color:var(--color-0);height:3%}.standard-layout-5 .section-2{display:flex;height:53%}.standard-layout-5 .section-3{display:flex;height:24%}.standard-layout-5 .section-4{display:flex;height:20%;background-color:var(--color-1)}.standard-layout-5 .sub-2{box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.standard-layout-5 .sub-2.icon{min-height:20px;flex:0 0 10%;max-width:10%}.standard-layout-5 .sub-2.icon #image1{box-sizing:border-box;margin:auto;padding:0 20%}.standard-layout-5 .sub-2.icon #image1 img{object-fit:contain}.standard-layout-5 .sub-2.text{flex:0 0 70%;max-width:70%;margin:auto;height:100%;flex-wrap:nowrap;padding:1em;text-align:left}.standard-layout-5 .sub-2.image{box-sizing:border-box;flex:0 0 20%;padding:1.5vh 0;max-width:20%}.standard-layout-5 .sub-2.image #image2{box-sizing:border-box;margin:auto;padding:0 10%}.standard-layout-5 .sub-2.image #image2 img{object-fit:contain}.standard-layout-5 .sub-2 .desc-text{overflow:auto}.standard-layout-5 .sub-2 .alt-text{color:var(--kup-primary-color)}.standard-layout-5 .sub-3{box-sizing:border-box}.standard-layout-5 .sub-3.progress-bar{margin:auto;padding:0 5%;vertical-align:2px;width:80%}.standard-layout-5 .sub-3.button{margin:auto;text-align:center;width:20%}.standard-layout-5 .sub-3 kup-button{margin:auto}.standard-layout-5 .sub-4{box-sizing:border-box;margin:auto}.standard-layout-5 .sub-4.text{width:50%;font-size:0.875em}.standard-layout-5 .sub-4 div{padding:0 5%}.standard-layout-5 .sub-4 .alt-text{color:var(--color-0);font-size:1em}.standard-layout-5 .alt-text{font-weight:bold}@media screen and (max-width: 767px){.standard-layout-5 .sub-2.image{display:none}.standard-layout-5 .sub-2.icon{flex-basis:30%;max-width:30%}}.standard-layout-6{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;height:100%;overflow:hidden;width:100%}.standard-layout-6 .section-1{background-color:var(--color-0);display:flex;flex:0 0 10%;max-width:10%}.standard-layout-6 .section-1 .alt-text{color:var(--kup_card_dynamic_color_0);height:100%;text-align:center;writing-mode:vertical-lr;margin:auto;font-size:1.25em}.standard-layout-6 .section-2{box-sizing:border-box;height:100%;display:flex;flex:0 0 90%;flex-direction:column;max-width:90%}.standard-layout-6 .section-2 .sub-2{margin:auto;text-align:center}.standard-layout-6 .section-2 .sub-2 kup-progress-bar{margin-bottom:1em}.standard-layout-6 kup-button{position:absolute;bottom:2%;right:2%}.standard-layout-7{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.standard-layout-7 #image1 img{margin:auto;object-fit:contain}.standard-layout-7 .section-1{background-color:var(--color-0);height:5%;width:100%}.standard-layout-7 .section-2{height:80%;width:100%;text-align:center;padding:25px 25%;box-sizing:border-box}.standard-layout-7 .section-2 .sub-2{margin:auto}.standard-layout-7 .section-2 .sub-2.image{box-sizing:border-box;height:65%}.standard-layout-7 .section-2 .sub-2.text{font-size:1.4em;letter-spacing:1.2px;padding-top:1em;height:35%}.standard-layout-7 .section-3{display:flex;height:15%;width:100%}.standard-layout-7 .section-3 .alt-text{margin:auto;opacity:0.75;width:50%}.standard-layout-7 .section-3 .alt-text:nth-child(1){margin-left:1em;text-align:left}.standard-layout-7 .section-3 .alt-text:nth-child(2){margin-right:1em;text-align:right}.standard-layout-8{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-8 .background{background-color:var(--color-0);content:\"\";height:100%;width:100%;opacity:0.1;pointer-events:none;position:absolute;top:0;left:0;z-index:1}.standard-layout-8 .section-1{box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;overflow:auto;height:auto}.standard-layout-8 .section-1 .sub-1{text-align:left;padding:0.6em 0.8em 0;font-size:1em;font-weight:bold;max-width:75%}.standard-layout-8 .section-1 .sub-2{text-align:left;padding:0.6em 0.8em;font-size:0.875em;max-width:75%}.standard-layout-8 .section-1 .sub-3{color:var(--color-0);font-weight:bold;text-align:center;font-size:1.2em;position:absolute;top:1em;right:1em;max-width:25%;text-overflow:ellipsis;max-height:calc(24px + 2.25em);padding:0 1em;overflow:hidden}.standard-layout-8 .section-1 .sub-3 kup-image{margin:auto}.standard-layout-8 .section-2{display:flex;height:auto;overflow:auto}.standard-layout-9{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-9 #image1 img{object-fit:contain}.standard-layout-9 .section-1{margin-top:auto;margin-right:18px;margin-bottom:auto;white-space:nowrap}.standard-layout-9 .section-2{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-9 .sub-2{display:flex;flex-direction:row}.standard-layout-9 .text{text-align:left}.standard-layout-9 .text-wrapper{display:flex;flex-direction:column}.standard-layout-9 .icon{margin:auto;padding:0 1.25em}.standard-layout-9 .description{font-size:1.5em;letter-spacing:1px;padding-left:1.25em;padding-top:0.25em}.standard-layout-9 .title{font-size:2.75em;font-weight:bold}.standard-layout-9 .subtitle{font-size:1.5em;opacity:0.75}.standard-layout-10{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-10 #image1 img{object-fit:contain}.standard-layout-10 .section-1{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-10 .section-2{margin-top:auto;margin-left:18px;margin-bottom:auto;white-space:nowrap}.standard-layout-10 .sub-2{display:flex;flex-direction:row-reverse}.standard-layout-10 .text{text-align:right}.standard-layout-10 .text-wrapper{display:flex;flex-direction:column}.standard-layout-10 .icon{margin:auto;padding:0 1.25em}.standard-layout-10 .description{font-size:1.5em;letter-spacing:1px;padding-right:1.25em;padding-top:0.25em}.standard-layout-10 .title{font-size:2.75em;font-weight:bold}.standard-layout-10 .subtitle{font-size:1.5em;opacity:0.75}.standard-layout-11{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-11 #image1 img{object-fit:contain}.standard-layout-11 .section-1{display:flex;height:100%;margin-top:auto;margin-bottom:auto;min-width:6em;max-width:6em;overflow:hidden;transition:0.25s ease-in}.standard-layout-11 .section-2{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-11 .sub-1{background-color:var(--color-0);height:100%;text-align:center;writing-mode:vertical-lr;min-width:6em;display:flex;transition:width 0.25s ease-in}.standard-layout-11 .sub-1 div{font-size:1.25em}.standard-layout-11 .sub-2{display:flex;flex-direction:row}.standard-layout-11 .text:not(.description){text-align:left}.standard-layout-11 .text-wrapper{display:flex;flex-direction:column}.standard-layout-11 .icon{margin:auto;padding:0 1.25em}.standard-layout-11 .description{font-size:1.5em;letter-spacing:1px;margin:auto;color:var(--kup_card_dynamic_color_0)}.standard-layout-11 .title{font-size:2.75em;font-weight:bold;margin-top:auto}.standard-layout-11 .subtitle{font-size:1.5em;opacity:0.75;margin-bottom:auto}.standard-layout-12{background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);min-width:200px;min-width:-moz-max-content;min-width:-webkit-max-content;}.standard-layout-12 .section-1{display:inline-flex;border-bottom:1px solid var(--kup-border-color);width:100%}.standard-layout-12 .section-1 kup-button{margin:0}.standard-layout-12 .section-2{display:flex;flex-direction:column}.standard-layout-12 .section-2.has-content{border-bottom:1px solid var(--kup-border-color);padding:0.5em 0.5em}.standard-layout-12 .section-2 kup-date-picker:first-of-type,.standard-layout-12 .section-2 kup-time-picker:first-of-type{margin-bottom:0.5em}.standard-layout-12 .section-3{backface-visibility:hidden;display:flex;flex-direction:column;max-height:20vh;overflow:auto}.standard-layout-12 .section-3 kup-checkbox{margin-left:0;margin-right:auto}.standard-layout-13{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-13 kup-button{margin-left:0}.standard-layout-13 .section-1{background-color:var(--kup-background-color);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;box-shadow:0px 1px 3px 0px var(--kup-text-color);height:52px;width:100%;text-align:right}.standard-layout-13 .section-1 kup-button{margin-right:0.25em}.standard-layout-13 .section-2{height:100%;width:100%;overflow:auto;max-height:50vh}.standard-layout-13 .text{color:var(--kup-text-color);font-family:var(--kup-font-family-monospace);white-space:nowrap;border-bottom:1px solid var(--kup-border-color);line-height:1.75em}.standard-layout-14{background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);min-width:200px;min-width:-moz-max-content;min-width:-webkit-max-content;}.standard-layout-14 .section-1{display:flex;padding:1em}.standard-layout-14 .section-1 .sub-1{width:100%}.standard-layout-14 .section-1 .sub-spinner{height:88px;width:88px;margin:0 10px}.standard-layout-14 .section-1 .f-image{margin:0 0.5em 0 0}.standard-layout-14 .section-1 .title{font-size:1.25em;margin-top:-0.5em;padding:0 0.25em 0.25em}.standard-layout-14 .section-1 .title .label{cursor:pointer;padding-right:0.25em}.standard-layout-14 .section-1 .title .label:hover{text-decoration:underline}.standard-layout-14 .section-1 .info{display:flex;padding:0 0.25em 0.25em;width:100%}.standard-layout-14 .section-1 .info .label{color:rgba(var(--kup-text-color-rgb), 0.75);margin-right:0.75em;min-width:max-content;width:auto}.standard-layout-14 .section-1 .info .value{width:100%}.standard-layout-14 .sub-button{display:inline-flex;width:100%}.standard-layout-14 .sub-button kup-button{margin:0}.standard-layout-14 .sub-checkbox{backface-visibility:hidden;display:flex;flex-direction:column;max-height:20vh;overflow:auto}.standard-layout-14 .sub-checkbox kup-checkbox{margin-left:0;margin-right:auto}.standard-layout-14 .sub-chip{max-width:25vw;overflow:auto;box-shadow:0 3px 2px -2px var(--kup-border-color)}.standard-layout-14 .sub-field{display:flex;flex-direction:column}.standard-layout-14 .sub-field.has-content{border-bottom:1px solid var(--kup-border-color);padding:0.5em 0.5em}.standard-layout-14 .sub-field kup-date-picker:first-of-type,.standard-layout-14 .sub-field kup-time-picker:first-of-type{margin-bottom:0.5em}.standard-layout-14 .sub-spinner{height:100px}.standard-layout-14 .sub-autocomplete{padding-top:1em}.standard-layout-14 .sub-autocomplete kup-autocomplete{margin:auto;padding:0.5em 0;width:max-content}.standard-layout-14 .sub-switch{display:flex;justify-content:space-evenly;padding:2em}.standard-layout-14 .sub-tree{max-height:25vh;overflow:auto}.standard-layout-14 #apply{display:none}.standard-layout-14 #apply.visible{display:block}.standard-layout-14 #open-in-new,.standard-layout-14 #search,.standard-layout-14 #new{margin:0;display:inline-flex}.standard-layout-15{outline:none;display:block;font-size:var(--kup-font-size);background:var(--kup-background-color);color:var(--kup-text-color);box-shadow:var(--kup-box-shadow);border-radius:3px;min-width:350px;max-width:700px}.standard-layout-15 .section-1{box-sizing:border-box;display:flex;padding:1em}.standard-layout-15 .section-1 .sub-1{width:100%}.standard-layout-15 .section-1 .sub-spinner{height:88px;width:88px;margin:0 10px}.standard-layout-15 .section-1 .f-image{margin:0 0.5em 0 0}.standard-layout-15 .section-1 .title{font-size:1.25em;padding:0 0.25em 0.25em;text-align:left}.standard-layout-15 .section-1 .title .label{cursor:pointer;padding-right:0.25em}.standard-layout-15 .section-1 .title .label:hover{text-decoration:underline}.standard-layout-15 .section-1 .info{display:flex;padding:0 0.25em 0.25em;width:100%}.standard-layout-15 .section-1 .info .label{color:rgba(var(--kup-text-color-rgb), 0.75);margin-right:0.75em;min-width:max-content;width:auto}.standard-layout-15 .section-1 .info .value{width:100%}.standard-layout-15 .section-2{border-top:1px solid var(--kup-border-color);box-sizing:border-box;height:180px;opacity:1;overflow:auto;transition:height 250ms ease-out, opacity 250ms ease-out}.standard-layout-15 .section-2 .info{box-sizing:border-box;height:100%;padding:1.25em}.standard-layout-15 .section-2 .detail-row{display:flex;justify-content:space-between}.standard-layout-15 .section-2 .detail-row:not(:last-child){margin-bottom:6px}.standard-layout-15 .section-2 .detail-row__label{color:rgba(var(--kup-text-color-rgb), 0.5);margin-top:0.175em;max-width:320px}.standard-layout-15 .section-2 .detail-row__value{color:var(--kup-text-color);font-size:120%;max-width:320px}.standard-layout-15 .section-2 kup-tree{text-align:left}.standard-layout-15 .section-3{border-top:1px solid var(--kup-border-color);display:flex;justify-content:flex-end;padding:6px;padding-top:2px;padding-bottom:2px}.standard-layout-15 .section-3 kup-button{margin:auto 0}.standard-layout-15 #open-in-new,.standard-layout-15 #search,.standard-layout-15 #new{margin:0;display:inline-flex}:host{--kup_card_ripple_color:var(\n    --kup-card-ripple-color,\n    var(--kup-primary-color)\n  );display:block;font-size:var(--kup-font-size);height:var(--kup_card_height);min-height:var(--kup_card_height);min-width:var(--kup_card_width);outline:none;position:relative;width:var(--kup_card_width)}:host([is-menu]){display:none;animation:fade-in 0.25s ease-out}:host([menu-visible]){display:block}#kup-component{height:100%;width:100%}.mdc-ripple-surface{cursor:pointer;flex-direction:column;display:flex;height:100%;position:relative}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_card_ripple_color)}.card-view{animation:fade-in 0.25s ease-out;display:none;height:100%;width:100%}.card-view.visible{display:block}";
 
 let KupCard = class {
   constructor(hostRef) {
@@ -8547,10 +9375,11 @@ let KupCard = class {
      */
     this.scalingActive = false;
   }
-  onKupClick(id) {
+  onKupClick(id, value) {
     this.kupClick.emit({
       comp: this,
       id: id,
+      value: value,
     });
   }
   onKupClose(id) {
@@ -8621,7 +9450,7 @@ let KupCard = class {
         const link = links[index];
         link.onclick = (e) => {
           e.stopPropagation();
-          this.onKupClick(link.id);
+          this.onKupClick(link.id, null);
         };
       }
     }
@@ -8657,12 +9486,18 @@ let KupCard = class {
     const method = 'create' + this.layoutNumber;
     try {
       switch (family) {
+        case kupManager.KupCardFamily.BUILTIN: {
+          return builtinLayouts[method](this);
+        }
         case kupManager.KupCardFamily.COLLAPSIBLE: {
           return collapsibleLayouts[method](this);
         }
         case kupManager.KupCardFamily.DIALOG: {
           return dialogLayouts[method](this);
         }
+        case kupManager.KupCardFamily.FREE: {
+          return freeLayouts[method](this);
+        }
         case kupManager.KupCardFamily.SCALABLE: {
           return scalableLayouts[method](this);
         }
@@ -8855,14 +9690,14 @@ let KupCard = class {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    if (!this.data) {
+    if (!this.data && this.rootElement.children.length < 1) {
       return;
     }
     const style = {
       '--kup_card_height': this.sizeY ? this.sizeY : '100%',
       '--kup_card_width': this.sizeX ? this.sizeX : '100%',
     };
-    return (index.h(index.Host, { style: style }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, onClick: () => this.onKupClick(null) }, this.getLayout())));
+    return (index.h(index.Host, { style: style }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, onClick: () => this.onKupClick(null, null) }, this.getLayout())));
   }
   disconnectedCallback() {
     this.kupManager.interact.unregister([this.rootElement]);
@@ -12294,7 +13129,7 @@ class KupColumnMenu {
   }
 }
 
-const kupDataTableCss = ":host{--kup_datatable_background_color:var(\n    --kup-datatable-background-color,\n    var(--kup-background-color)\n  );--kup_datatable_border:var(\n    --kup-datatable-border,\n    1px solid var(--kup-border-color)\n  );--kup_datatable_color:var(--kup-datatable-color, var(--kup-text-color));--kup_datatable_font_family:var(\n    --kup-datatable-font-family,\n    var(--kup-font-family)\n  );--kup_datatable_font_family_monospace:var(\n    --kup-datatable-font-family-monospace,\n    var(--kup-font-family-monospace)\n  );--kup_datatable_font_size:var(\n    --kup-datatable-font-size,\n    var(--kup-font-size)\n  );--kup_datatable_th_border:var(\n    --kup-datatable-th-border,\n    1px solid var(--kup-border-color)\n  );--kup_datatable_th_resize_handle_width:var(\n    --kup-datatable-th-resize-handle-width,\n    3px\n  );display:block;font-family:var(--kup_datatable_font_family);font-size:var(--kup_datatable_font_size);position:relative}:host([kup-toolbar]) .settings-trigger{height:12px}:host([kup-toolbar]) .customize-panel{visibility:visible}:host([force-one-line]) .f-cell__text{white-space:nowrap}table{background-color:var(--kup_datatable_background_color);border-spacing:0;border-collapse:separate;color:var(--kup_datatable_color);min-width:intrinsic;min-width:-moz-max-content;min-width:-webkit-max-content;text-align:left;width:100%}table.auto-width{min-width:auto;width:0}table>tbody>tr.focus td:first-of-type,table>tbody>tr[kup-drag-over] td:first-of-type{box-shadow:inset 4px 0px 0px 0px var(--kup-secondary-color)}table>tbody>tr>td:first-of-type,table>tbody>tr>td.placeholder~td:not(.placeholder){border-left:var(--kup_datatable_border)}table>tbody>tr>td:last-of-type{border-right:var(--kup_datatable_border)}table>tbody>tr:last-of-type>td{border-bottom:var(--kup_datatable_border)}table.border-top>tbody>tr:first-of-type>td{border-top:var(--kup_datatable_border)}table.row-separation>tbody>tr>td{border-bottom:var(--kup_datatable_border)}table.column-separation>tbody>tr>td{border-right:var(--kup_datatable_border)}table.noGrid,table.noGrid td{border:none}table tfoot td{border-bottom:var(--kup_datatable_border);border-right:var(--kup_datatable_border);box-sizing:border-box;height:36px;text-align:right;font-weight:bold;padding:0.5em 0.3125em}table tfoot td:hover{background-color:var(--kup_datatable_background_color)}table tfoot td:first-of-type{border-left:var(--kup_datatable_border)}#global-filter{margin:0.5em 0px;min-width:140px;width:100%}.kup-icon:not(.f-image){background-color:var(--kup-title-color);margin:0 0.25em;height:1.25em;width:1.25em}.kup-icon:not(.f-image).kup-ascending-icon,.kup-icon:not(.f-image).kup-descending-icon,.kup-icon:not(.f-image).kup-key-icon,.kup-icon:not(.f-image).kup-filter-remove-icon{height:auto}.kup-icon:not(.f-image).kup-collapsed-icon,.kup-icon:not(.f-image).kup-expanded-icon{float:left}.kup-icon:not(.f-image).kup-filter-remove-icon,.kup-icon:not(.f-image).kup-key-icon{margin:0 0.25em}.below-wrapper{backface-visibility:hidden;height:auto;overflow:auto}.below-wrapper.custom-size{overflow:unset}.below-wrapper:not(.custom-size){overflow-x:auto}.density-dense tbody>tr.group td{padding-top:0.25em;padding-bottom:0.25em}.density-wide tbody>tr.group>td{padding-top:0.75em;padding-bottom:0.75em}.fontsize-small{font-size:calc(var(--kup_datatable_font_size) * 0.75);transition:font-size 0.1s}.fontsize-small .group-cell-content>span:before{font-size:calc(var(--kup_datatable_font_size) * 1) !important}.fontsize-big{font-size:calc(var(--kup_datatable_font_size) * 1.25);transition:font-size 0.1s}.fontsize-big .group-cell-content>span:before{font-size:calc(var(--kup_datatable_font_size) * 1.5) !important}th{background-color:var(--kup-title-background-color);border:var(--kup_datatable_th_border);border-left:0 none;border-bottom-width:2px;box-sizing:border-box;top:0;touch-action:none;transition:background-color 0.25s ease;user-select:none}th:first-of-type{border-left:var(--kup_datatable_th_border)}.header-cell__content{color:var(--kup-title-color);display:flex;justify-content:space-between;padding:0.5em 0.3125em;text-overflow:ellipsis;white-space:nowrap}.header-cell--centered .header-cell__content{justify-content:center}.header-cell--is-number .header-cell__content{justify-content:flex-end}.header-cell__title{overflow:hidden;text-overflow:ellipsis;user-select:none}.header-cell__icons{display:flex}.header-cell__drag-handler{background:rgba(var(--kup-title-color-rgb), 0.25);height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:var(--kup_datatable_th_resize_handle_width)}.header-cell__drag-handler:hover{background:rgba(var(--kup-title-color-rgb), 0.5)}.header-cell--sortable{cursor:pointer}.header-cell--is-icon{width:30px}tbody{cursor:auto}tbody td{height:0;padding:0}tbody td>*{border:none !important}tbody tr kup-button{max-width:max-content}tbody tr[kup-draggable]{opacity:0.5}tbody tr.selected td{background-color:rgba(var(--kup-primary-color-rgb), 0.175)}tbody tr:hover:not(.group):not(.selected) td{color:var(--kup-hover-color);background-color:var(--kup-hover-background-color)}tbody tr.group{background:var(--kup-title-background-color);border-top:var(--kup_datatable_border);color:var(--kup-title-color);font-weight:bold;cursor:pointer}tbody tr.group.group-label{border-bottom:none}tbody tr.group.group-total{border-top:none;line-height:0.5em}tbody tr.group>td{padding:0.5em 0}tbody tr.group>td .group-cell-content .indent{float:left;margin-left:0.25em}tbody tr.group>td .group-cell-content>span{display:inline-flex;outline:none;margin-left:0.25em}tbody tr.group>td.total{text-align:right;padding:0.5em 0.3125em}tbody tr.group>td.total.negative-number{color:var(--kup-danger-color)}tbody tr>td{box-sizing:border-box;transition:box-shadow 0.1s}tbody tr>td .row-expander{margin-right:0.5em}tbody tr>td .row-action{margin-right:0.2em}tbody tr [row-select-cell]{min-height:40px}tbody tr td[row-action-cell]{width:calc(3em * var(--kup_datatable_row_actions))}tbody tr td[row-action-cell] .f-image{cursor:pointer;margin-left:0.75em;display:inline-block;opacity:1;transition:0.25s ease-in-out}tbody tr td[row-action-cell] .f-image:hover{opacity:0.5}.above-wrapper{display:flex;width:100%}.kup-icon.overlay-action{display:none;position:absolute;top:0.5em;left:calc(50% - 0.625em)}th:hover .kup-icon.overlay-action{display:block}thead th{position:relative}th.obj:hover span:not(.overlay-action){opacity:0.5}.hidden span{color:transparent;position:relative;text-overflow:ellipsis;transition:color 200ms}.hidden span:hover{color:var(--kup_datatable_color)}.totals-value{font-weight:bold}.settings-trigger{cursor:pointer;display:block;width:32px;height:0;border-top-left-radius:25px 30px;border-top-right-radius:25px 30px;background-color:var(--kup-border-color);transition:height 0.25s}.settings-trigger.toggled{background-color:var(--kup-primary-color)}.settings-trigger.toggled .f-image__icon{background:var(--kup-text-on-primary-color) !important}.customize-panel{visibility:hidden;background:var(--kup_datatable_background_color);box-shadow:var(--kup-box-shadow);min-width:200px;width:fit-content;transition:height 0.25s}.customize-panel kup-switch{text-align:center}.customize-element{padding:0 1em 1em 1em}.customize-element:nth-child(1){padding-top:1em}.kup-menu{animation:fade-in 0.25s ease-out;background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);display:none;max-height:33vh;overflow:auto;position:relative;transform:none;transform-origin:unset;transition:height 0.2s;will-change:unset}.kup-menu.visible{display:block}.indent{display:inline-block;height:1em;width:2em}.indent~kup-image,.indent~kup-button{margin:0;vertical-align:middle}.indent~kup-image{display:inline-block}.indent~kup-button,.indent~kup-checkbox{display:inline-block}.kup-icon.kup-ascending-icon{-webkit-mask:var(--kup-ascending-icon);mask:var(--kup-ascending-icon)}.kup-icon.kup-collapsed-icon{-webkit-mask:var(--kup-collapsed-icon);mask:var(--kup-collapsed-icon)}.kup-icon.kup-descending-icon{-webkit-mask:var(--kup-descending-icon);mask:var(--kup-descending-icon)}.kup-icon.kup-expanded-icon{-webkit-mask:var(--kup-expanded-icon);mask:var(--kup-expanded-icon)}.kup-icon.kup-filter-remove-icon{-webkit-mask:var(--kup-filter-remove-icon);mask:var(--kup-filter-remove-icon)}.kup-icon.kup-key-icon{-webkit-mask:var(--kup-key-icon);mask:var(--kup-key-icon)}.paginator-wrapper{display:flex;flex-flow:wrap;min-width:max-content}.paginator-tabs{width:100%}.paginator-tabs kup-paginator{display:inline-flex}.paginator-tabs kup-button{position:relative;height:100%;margin-left:0.25em;float:right}.paginator-tabs .load-more-button{margin:0.5em 0px 0px}sticky-header{display:none}.persistent-header~sticky-header{background:var(--kup-title-background-color);border-bottom:2px solid var(--kup-border-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);color:var(--kup-title-color);display:block;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:opacity 0.25s ease-in-out;z-index:10}.persistent-header~sticky-header.activated{opacity:1;pointer-events:all}.persistent-header~sticky-header[hidden]{display:none}.persistent-header~sticky-header tr-sticky{display:inline-flex}.persistent-header~sticky-header th-sticky{box-sizing:border-box;display:inline-flex;padding:0 0.3125em}.persistent-header~sticky-header th-sticky .header-cell__content{width:100%}.fixed-column,.fixed-row{background-color:var(--kup_datatable_background_color);color:var(--kup-text-color);position:sticky}thead .fixed-column,thead .fixed-row,tfoot .fixed-column,tfoot .fixed-row{z-index:10}table.custom-size th{position:sticky;top:0;z-index:10}table.custom-size th.fixed-column{z-index:11}tr:hover .fixed-row,tr:hover .fixed-column{color:var(--kup-hover-color);background-color:var(--kup-hover-background-color)}tr.selected .fixed-column,tr.selected .fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-primary-color-rgb), 0.175) 0%, rgba(var(--kup-primary-color-rgb), 0.175) 0.1%, rgba(var(--kup-primary-color-rgb), 0.175))}.fixed-row{top:0;z-index:4}.fixed-column{left:0;z-index:6}.fixed-column.fixed-row{z-index:8}thead tr .fixed-column,thead tr:hover:not(.group):not(.selected) .fixed-column{background-color:var(--kup-title-background-color);color:var(--kup-title-color)}tfoot tr:hover:not(.group):not(.selected) .fixed-row,tfoot tr:hover:not(.group):not(.selected) .fixed-column{color:var(--kup-text-color);background-color:var(--kup_datatable_background_color)}:host([drag-enabled]) tr{touch-action:none}th[kup-drag-over]{background-color:rgba(var(--kup-success-color-rgb), 0.25)}th[kup-draggable]{cursor:grabbing !important;opacity:0.5}.droparea{animation:fade-in 0.25s ease-out;background:var(--kup_datatable_background_color);border-radius:8px;box-shadow:var(--kup-box-shadow);display:none;padding:1em 0.5em}.droparea--visible{display:flex}.droparea__groups{border:2px dashed var(--kup-text-color)}.droparea__remove{border:2px dashed var(--kup-danger-color)}.droparea__groups,.droparea__remove{background:var(--kup_datatable_background_color);box-shadow:var(--kup-box-shadow);display:block;height:50px;margin:0 0.5em;opacity:0.5;position:relative;transition:opacity 0.25s;width:50px}.droparea__groups .f-image,.droparea__remove .f-image{width:100%;position:absolute}.droparea__groups .f-image:first-of-type,.droparea__remove .f-image:first-of-type{opacity:1}.droparea__groups .f-image:last-of-type,.droparea__remove .f-image:last-of-type{opacity:0}.droparea__groups[kup-drag-over],.droparea__remove[kup-drag-over]{opacity:1}.droparea__groups[kup-drag-over] .f-image:first-of-type,.droparea__remove[kup-drag-over] .f-image:first-of-type{opacity:0}.droparea__groups[kup-drag-over] .f-image:last-of-type,.droparea__remove[kup-drag-over] .f-image:last-of-type{opacity:1}:host(.kup-cross-selection) #kup-component th.selected{box-shadow:inset 0px 4px 0px 0px var(--kup-secondary-color)}:host(.kup-cross-selection) #kup-component td.selected{background-color:rgba(var(--kup-text-color-rgb), 0.075)}:host(.kup-cross-selection) #kup-component td.selected.fixed-column,:host(.kup-cross-selection) #kup-component td.selected.fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.075) 0%, rgba(var(--kup-text-color-rgb), 0.075) 0.1%, rgba(var(--kup-text-color-rgb), 0.075))}:host(.kup-cross-selection) #kup-component tr.selected td{background-color:rgba(var(--kup-text-color-rgb), 0.075)}:host(.kup-cross-selection) #kup-component tr.selected td:first-of-type{box-shadow:inset 4px 0px 0px 0px var(--kup-secondary-color)}:host(.kup-cross-selection) #kup-component tr.selected td.selected{background-color:rgba(var(--kup-text-color-rgb), 0.15)}:host(.kup-cross-selection) #kup-component tr.selected td.fixed-column,:host(.kup-cross-selection) #kup-component tr.selected td.fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.075) 0%, rgba(var(--kup-text-color-rgb), 0.075) 0.1%, rgba(var(--kup-text-color-rgb), 0.075))}:host(.kup-cross-selection) #kup-component tr.selected td.fixed-column.selected,:host(.kup-cross-selection) #kup-component tr.selected td.fixed-row.selected{background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.15) 0%, rgba(var(--kup-text-color-rgb), 0.15) 0.1%, rgba(var(--kup-text-color-rgb), 0.15))}:host(.kup-layout-fixed) #kup-component table{table-layout:fixed;width:100%}tr.clickable{cursor:pointer}";
+const kupDataTableCss = ":host{--kup_datatable_background_color:var(\n    --kup-datatable-background-color,\n    var(--kup-background-color)\n  );--kup_datatable_border:var(\n    --kup-datatable-border,\n    1px solid var(--kup-border-color)\n  );--kup_datatable_color:var(--kup-datatable-color, var(--kup-text-color));--kup_datatable_font_family:var(\n    --kup-datatable-font-family,\n    var(--kup-font-family)\n  );--kup_datatable_font_family_monospace:var(\n    --kup-datatable-font-family-monospace,\n    var(--kup-font-family-monospace)\n  );--kup_datatable_font_size:var(\n    --kup-datatable-font-size,\n    var(--kup-font-size)\n  );--kup_datatable_th_border:var(\n    --kup-datatable-th-border,\n    1px solid var(--kup-border-color)\n  );--kup_datatable_th_resize_handle_width:var(\n    --kup-datatable-th-resize-handle-width,\n    3px\n  );display:block;font-family:var(--kup_datatable_font_family);font-size:var(--kup_datatable_font_size);position:relative}:host([kup-toolbar]) .settings-trigger{height:12px}:host([kup-toolbar]) .customize-panel{visibility:visible}:host([force-one-line]) .f-cell__text{white-space:nowrap}table{background-color:var(--kup_datatable_background_color);border-spacing:0;border-collapse:separate;color:var(--kup_datatable_color);min-width:intrinsic;min-width:-moz-max-content;min-width:-webkit-max-content;text-align:left;width:100%}table.auto-width{min-width:auto;width:0}table>tbody>tr.focus td:first-of-type,table>tbody>tr[kup-drag-over] td:first-of-type{box-shadow:inset 4px 0px 0px 0px var(--kup-secondary-color)}table>tbody>tr>td:first-of-type,table>tbody>tr>td.placeholder~td:not(.placeholder){border-left:var(--kup_datatable_border)}table>tbody>tr>td:last-of-type{border-right:var(--kup_datatable_border)}table>tbody>tr:last-of-type>td{border-bottom:var(--kup_datatable_border)}table.border-top>tbody>tr:first-of-type>td{border-top:var(--kup_datatable_border)}table.row-separation>tbody>tr>td{border-bottom:var(--kup_datatable_border)}table.column-separation>tbody>tr>td{border-right:var(--kup_datatable_border)}table.noGrid,table.noGrid td{border:none}table tfoot td{border-bottom:var(--kup_datatable_border);border-right:var(--kup_datatable_border);box-sizing:border-box;height:36px;text-align:right;font-weight:bold;padding:0.5em 0.3125em}table tfoot td:hover{background-color:var(--kup_datatable_background_color)}table tfoot td:first-of-type{border-left:var(--kup_datatable_border)}#global-filter{margin:0.5em 0px;min-width:140px;width:100%}.kup-icon:not(.f-image){background-color:var(--kup-title-color);margin:0 0.25em;height:1.25em;width:1.25em}.kup-icon:not(.f-image).kup-ascending-icon,.kup-icon:not(.f-image).kup-descending-icon,.kup-icon:not(.f-image).kup-key-icon,.kup-icon:not(.f-image).kup-filter-remove-icon{height:auto}.kup-icon:not(.f-image).kup-collapsed-icon,.kup-icon:not(.f-image).kup-expanded-icon{float:left}.kup-icon:not(.f-image).kup-filter-remove-icon,.kup-icon:not(.f-image).kup-key-icon{margin:0 0.25em}.below-wrapper{backface-visibility:hidden;height:auto;overflow:auto}.below-wrapper.custom-size{overflow:unset}.below-wrapper:not(.custom-size){overflow-x:auto}.density-dense tbody>tr.group td{padding-top:0.25em;padding-bottom:0.25em}.density-wide tbody>tr.group>td{padding-top:0.75em;padding-bottom:0.75em}.fontsize-small{font-size:calc(var(--kup_datatable_font_size) * 0.75);transition:font-size 0.1s}.fontsize-small .group-cell-content>span:before{font-size:calc(var(--kup_datatable_font_size) * 1) !important}.fontsize-big{font-size:calc(var(--kup_datatable_font_size) * 1.25);transition:font-size 0.1s}.fontsize-big .group-cell-content>span:before{font-size:calc(var(--kup_datatable_font_size) * 1.5) !important}th{background-color:var(--kup-title-background-color);border:var(--kup_datatable_th_border);border-left:0 none;border-bottom-width:2px;box-sizing:border-box;top:0;touch-action:none;transition:background-color 0.25s ease;user-select:none}th:first-of-type{border-left:var(--kup_datatable_th_border)}.header-cell__content{color:var(--kup-title-color);display:flex;justify-content:space-between;padding:0.5em 0.3125em;text-overflow:ellipsis;white-space:nowrap}.header-cell--centered .header-cell__content{justify-content:center}.header-cell--is-number .header-cell__content{justify-content:flex-end}.header-cell__title{overflow:hidden;text-overflow:ellipsis;user-select:none}.header-cell__icons{display:flex}.header-cell__drag-handler{background:rgba(var(--kup-title-color-rgb), 0.25);height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:var(--kup_datatable_th_resize_handle_width)}.header-cell__drag-handler:hover{background:rgba(var(--kup-title-color-rgb), 0.5)}.header-cell--sortable{cursor:pointer}.header-cell--is-icon{width:30px}tbody{cursor:auto}tbody td{height:0;padding:0}tbody td>*{border:none !important}tbody tr kup-button{max-width:max-content}tbody tr[kup-draggable]{opacity:0.5}tbody tr.selected td{background-color:rgba(var(--kup-primary-color-rgb), 0.175)}tbody tr:hover:not(.group):not(.selected) td{color:var(--kup-hover-color);background-color:var(--kup-hover-background-color)}tbody tr.group{background:var(--kup-title-background-color);border-top:var(--kup_datatable_border);color:var(--kup-title-color);font-weight:bold;cursor:pointer}tbody tr.group.group-label{border-bottom:none}tbody tr.group.group-total{border-top:none;line-height:0.5em}tbody tr.group>td{padding:0.5em 0}tbody tr.group>td .group-cell-content .indent{float:left;margin-left:0.25em}tbody tr.group>td .group-cell-content>span{display:inline-flex;outline:none;margin-left:0.25em}tbody tr.group>td.total{text-align:right;padding:0.5em 0.3125em}tbody tr.group>td.total.negative-number{color:var(--kup-danger-color)}tbody tr>td{box-sizing:border-box;transition:box-shadow 0.1s}tbody tr>td .row-expander{margin-right:0.5em}tbody tr>td .row-action{margin-right:0.2em}tbody tr [row-select-cell]{min-height:40px}tbody tr td[row-action-cell]{width:calc(3em * var(--kup_datatable_row_actions))}tbody tr td[row-action-cell] .f-image{cursor:pointer;margin-left:0.75em;display:inline-block;opacity:1;transition:0.25s ease-in-out}tbody tr td[row-action-cell] .f-image:hover{opacity:0.5}.above-wrapper{display:flex;width:100%}.kup-icon.overlay-action{display:none;position:absolute;top:0.5em;left:calc(50% - 0.625em)}th:hover .kup-icon.overlay-action{display:block}thead th{position:relative}th.obj:hover span:not(.overlay-action){opacity:0.5}.hidden span{color:transparent;position:relative;text-overflow:ellipsis;transition:color 200ms}.hidden span:hover{color:var(--kup_datatable_color)}.totals-value{font-weight:bold}.settings-trigger{cursor:pointer;display:block;width:32px;height:0;border-top-left-radius:25px 30px;border-top-right-radius:25px 30px;background-color:var(--kup-border-color);transition:height 0.25s}.settings-trigger.toggled{background-color:var(--kup-primary-color)}.settings-trigger.toggled .f-image__icon{background:var(--kup-text-on-primary-color) !important}.indent{display:inline-block;height:1em;width:2em}.indent~kup-image,.indent~kup-button{margin:0;vertical-align:middle}.indent~kup-image{display:inline-block}.indent~kup-button,.indent~kup-checkbox{display:inline-block}.kup-icon.kup-ascending-icon{-webkit-mask:var(--kup-ascending-icon);mask:var(--kup-ascending-icon)}.kup-icon.kup-collapsed-icon{-webkit-mask:var(--kup-collapsed-icon);mask:var(--kup-collapsed-icon)}.kup-icon.kup-descending-icon{-webkit-mask:var(--kup-descending-icon);mask:var(--kup-descending-icon)}.kup-icon.kup-expanded-icon{-webkit-mask:var(--kup-expanded-icon);mask:var(--kup-expanded-icon)}.kup-icon.kup-filter-remove-icon{-webkit-mask:var(--kup-filter-remove-icon);mask:var(--kup-filter-remove-icon)}.kup-icon.kup-key-icon{-webkit-mask:var(--kup-key-icon);mask:var(--kup-key-icon)}.paginator-wrapper{display:flex;flex-flow:wrap;min-width:max-content}.paginator-tabs{width:100%}.paginator-tabs kup-paginator{display:inline-flex}.paginator-tabs kup-button{position:relative;height:100%;margin-left:0.25em;float:right}.paginator-tabs .load-more-button{margin:0.5em 0px 0px}sticky-header{display:none}.persistent-header~sticky-header{background:var(--kup-title-background-color);border-bottom:2px solid var(--kup-border-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);color:var(--kup-title-color);display:block;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:opacity 0.25s ease-in-out;z-index:10}.persistent-header~sticky-header.activated{opacity:1;pointer-events:all}.persistent-header~sticky-header[hidden]{display:none}.persistent-header~sticky-header tr-sticky{display:inline-flex}.persistent-header~sticky-header th-sticky{box-sizing:border-box;display:inline-flex;padding:0 0.3125em}.persistent-header~sticky-header th-sticky .header-cell__content{width:100%}.fixed-column,.fixed-row{background-color:var(--kup_datatable_background_color);color:var(--kup-text-color);position:sticky}thead .fixed-column,thead .fixed-row,tfoot .fixed-column,tfoot .fixed-row{z-index:10}table.custom-size th{position:sticky;top:0;z-index:10}table.custom-size th.fixed-column{z-index:11}tr:hover .fixed-row,tr:hover .fixed-column{color:var(--kup-hover-color);background-color:var(--kup-hover-background-color)}tr.selected .fixed-column,tr.selected .fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-primary-color-rgb), 0.175) 0%, rgba(var(--kup-primary-color-rgb), 0.175) 0.1%, rgba(var(--kup-primary-color-rgb), 0.175))}.fixed-row{top:0;z-index:4}.fixed-column{left:0;z-index:6}.fixed-column.fixed-row{z-index:8}thead tr .fixed-column,thead tr:hover:not(.group):not(.selected) .fixed-column{background-color:var(--kup-title-background-color);color:var(--kup-title-color)}tfoot tr:hover:not(.group):not(.selected) .fixed-row,tfoot tr:hover:not(.group):not(.selected) .fixed-column{color:var(--kup-text-color);background-color:var(--kup_datatable_background_color)}:host([drag-enabled]) tr{touch-action:none}th[kup-drag-over]{background-color:rgba(var(--kup-success-color-rgb), 0.25)}th[kup-draggable]{cursor:grabbing !important;opacity:0.5}.droparea{animation:fade-in 0.25s ease-out;background:var(--kup_datatable_background_color);border-radius:8px;box-shadow:var(--kup-box-shadow);display:none;padding:1em 0.5em}.droparea--visible{display:flex}.droparea__groups{border:2px dashed var(--kup-text-color)}.droparea__remove{border:2px dashed var(--kup-danger-color)}.droparea__groups,.droparea__remove{background:var(--kup_datatable_background_color);box-shadow:var(--kup-box-shadow);display:block;height:50px;margin:0 0.5em;opacity:0.5;position:relative;transition:opacity 0.25s;width:50px}.droparea__groups .f-image,.droparea__remove .f-image{width:100%;position:absolute}.droparea__groups .f-image:first-of-type,.droparea__remove .f-image:first-of-type{opacity:1}.droparea__groups .f-image:last-of-type,.droparea__remove .f-image:last-of-type{opacity:0}.droparea__groups[kup-drag-over],.droparea__remove[kup-drag-over]{opacity:1}.droparea__groups[kup-drag-over] .f-image:first-of-type,.droparea__remove[kup-drag-over] .f-image:first-of-type{opacity:0}.droparea__groups[kup-drag-over] .f-image:last-of-type,.droparea__remove[kup-drag-over] .f-image:last-of-type{opacity:1}:host(.kup-cross-selection) #kup-component th.selected{box-shadow:inset 0px 4px 0px 0px var(--kup-secondary-color)}:host(.kup-cross-selection) #kup-component td.selected{background-color:rgba(var(--kup-text-color-rgb), 0.075)}:host(.kup-cross-selection) #kup-component td.selected.fixed-column,:host(.kup-cross-selection) #kup-component td.selected.fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.075) 0%, rgba(var(--kup-text-color-rgb), 0.075) 0.1%, rgba(var(--kup-text-color-rgb), 0.075))}:host(.kup-cross-selection) #kup-component tr.selected td{background-color:rgba(var(--kup-text-color-rgb), 0.075)}:host(.kup-cross-selection) #kup-component tr.selected td:first-of-type{box-shadow:inset 4px 0px 0px 0px var(--kup-secondary-color)}:host(.kup-cross-selection) #kup-component tr.selected td.selected{background-color:rgba(var(--kup-text-color-rgb), 0.15)}:host(.kup-cross-selection) #kup-component tr.selected td.fixed-column,:host(.kup-cross-selection) #kup-component tr.selected td.fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.075) 0%, rgba(var(--kup-text-color-rgb), 0.075) 0.1%, rgba(var(--kup-text-color-rgb), 0.075))}:host(.kup-cross-selection) #kup-component tr.selected td.fixed-column.selected,:host(.kup-cross-selection) #kup-component tr.selected td.fixed-row.selected{background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.15) 0%, rgba(var(--kup-text-color-rgb), 0.15) 0.1%, rgba(var(--kup-text-color-rgb), 0.15))}:host(.kup-layout-fixed) #kup-component table{table-layout:fixed;width:100%}tr.clickable{cursor:pointer}";
 
 let KupDataTable = class {
   constructor(hostRef) {
@@ -12577,6 +13412,7 @@ let KupDataTable = class {
     this.removeDropareaRef = null;
     this.groupsDropareaRef = null;
     this.clickCb = null;
+    this.clickCbCustomPanel = null;
     /**
      * Reference to the row detail card.
      */
@@ -13569,11 +14405,9 @@ let KupDataTable = class {
     }
   }
   customizePanelPosition() {
-    if (this.customizeTopButtonRef) {
-      this.kupManager.dynamicPosition.register(this.customizeTopPanelRef, this.customizeTopButtonRef);
-    }
-    if (this.customizeBottomButtonRef) {
-      this.kupManager.dynamicPosition.register(this.customizeBottomPanelRef, this.customizeBottomButtonRef);
+    if (this.customizeTopButtonRef &&
+      !this.kupManager.dynamicPosition.isRegistered(this.customizeTopPanelRef)) {
+      this.kupManager.dynamicPosition.register(this.customizeTopPanelRef, this.customizeTopButtonRef, 0, kupManager.KupDynamicPositionPlacement.BOTTOM, true);
     }
   }
   rowsPointLength() {
@@ -15284,19 +16118,28 @@ let KupDataTable = class {
     }
   }
   openCustomSettings() {
-    this.customizeTopPanelRef.classList.add('visible');
+    this.customizeTopPanelRef.menuVisible = true;
     this.customizeTopButtonRef.classList.add('toggled');
     this.kupManager.dynamicPosition.start(this.customizeTopPanelRef);
     this.openedCustomSettings = true;
+    if (!this.clickCbCustomPanel) {
+      this.clickCbCustomPanel = {
+        cb: () => {
+          this.closeCustomSettings();
+        },
+        el: this.customizeTopPanelRef,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCbCustomPanel, true);
   }
   closeCustomSettings() {
     this.customizeTopButtonRef.classList.remove('toggled');
     if (this.customizeTopPanelRef == null) {
       return;
     }
-    this.customizeTopPanelRef.classList.remove('visible');
-    this.kupManager.dynamicPosition.stop(this.customizeTopPanelRef);
+    this.customizeTopPanelRef.menuVisible = false;
     this.openedCustomSettings = false;
+    this.kupManager.removeClickCallback(this.clickCbCustomPanel);
   }
   renderPaginator(top) {
     return (index.h("div", { class: "paginator-wrapper" }, index.h("div", { class: "paginator-tabs" }, !this.lazyLoadRows &&
@@ -15317,9 +16160,9 @@ let KupDataTable = class {
         totalsMatrix = this.renderTotalsMatrix();
       }
     }
-    return (index.h("div", { class: "kup-menu customize-panel", ref: (el) => {
+    return (index.h("kup-card", { customStyle: "::slotted(kup-switch) { width: max-content !important; } ::slotted(*) { margin: auto !important; } ::slotted(.customize-element) { margin: auto !important; padding: 0 1em 1em 1em !important; width: max-content !important; } ::slotted(.customize-element):nth-child(1) { padding-top: 1em !important; }", isMenu: true, layoutFamily: kupManager.KupCardFamily.FREE, ref: (el) => {
         this.customizeTopPanelRef = el;
-      } }, density, grid, fontsize, transpose, index.h("kup-switch", { class: "customize-element", checked: this.dragEnabled, label: this.kupManager.language.translate(kupManager.KupLanguageGeneric.DRAG_AND_DROP), leadingLabel: true, "onkup-switch-change": () => (this.dragEnabled = !this.dragEnabled) }), index.h("kup-switch", { class: "customize-element", checked: this.editableData, label: this.kupManager.language.translate(kupManager.KupLanguageGeneric.EDITABLE), leadingLabel: true, "onkup-switch-change": () => (this.editableData = !this.editableData) }), index.h("kup-button", { title: this.kupManager.language.translate(kupManager.KupLanguageGeneric.TOGGLE) +
+      }, sizeX: "360px", sizeY: "300px" }, density, grid, fontsize, transpose, index.h("kup-switch", { class: "customize-element", checked: this.dragEnabled, label: this.kupManager.language.translate(kupManager.KupLanguageGeneric.DRAG_AND_DROP), leadingLabel: true, "onkup-switch-change": () => (this.dragEnabled = !this.dragEnabled) }), index.h("kup-switch", { class: "customize-element", checked: this.editableData, label: this.kupManager.language.translate(kupManager.KupLanguageGeneric.EDITABLE), leadingLabel: true, "onkup-switch-change": () => (this.editableData = !this.editableData) }), index.h("kup-button", { title: this.kupManager.language.translate(kupManager.KupLanguageGeneric.TOGGLE) +
         ' Magic Box ' +
         '(' +
         this.kupManager.language.translate(kupManager.KupLanguageGeneric.EXPERIMENTAL_FEAT) +
@@ -15680,6 +16523,9 @@ let KupDataTable = class {
     if (dynamicPositionElements.length > 0) {
       this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
     }
+    if (this.customizeTopPanelRef) {
+      this.customizeTopPanelRef.remove();
+    }
     if (this.columnMenuCard) {
       this.columnMenuCard.remove();
     }
@@ -15708,26 +16554,7 @@ let KupDataTable = class {
 };
 KupDataTable.style = kupDataTableCss;
 
-/**
- * Props of the kup-date-picker component.
- * Used to export every prop in an object.
- */
-var KupDatePickerProps;
-(function (KupDatePickerProps) {
-  KupDatePickerProps["customStyle"] = "Custom style of the component.";
-  KupDatePickerProps["data"] = "Props of the sub-components.";
-  KupDatePickerProps["disabled"] = "Defaults at false. When set to true, the component is disabled.";
-  KupDatePickerProps["firstDayIndex"] = "First day number (0 - sunday, 1 - monday, ...)";
-  KupDatePickerProps["initialValue"] = "Sets the initial value of the component";
-})(KupDatePickerProps || (KupDatePickerProps = {}));
-var SourceEvent;
-(function (SourceEvent) {
-  SourceEvent["DATE"] = "date";
-  SourceEvent["MONTH"] = "month";
-  SourceEvent["YEAR"] = "year";
-})(SourceEvent || (SourceEvent = {}));
-
-const kupDatePickerCss = ":host{display:block;font-size:var(--kup-font-size)}#date-picker-div{outline:none;pointer-events:all;background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);display:none;overflow:hidden;padding:10px;box-sizing:border-box;flex-direction:column;justify-content:center;height:22em;width:22em;position:absolute;z-index:1}#date-picker-div.visible{display:block}#date-picker-div.dynamic-position-active{display:flex}#date-picker-div .section-1{box-sizing:border-box;height:5em;overflow:auto;padding-bottom:1em;width:100%}#date-picker-div .section-1 .sub-1{display:flex;flex-direction:row;justify-content:center}#date-picker-div .section-2{height:calc(100% - 60px);overflow:auto;width:100%}#date-picker-div #prev-page{margin-left:auto}#date-picker-div #change-view-button{margin:auto;width:12em;text-align:center}#date-picker-div #next-page{margin-right:auto}#date-picker-div #calendar{border-collapse:collapse;width:100%}#date-picker-div thead{border-bottom:1px solid var(--kup-border-color)}#date-picker-div .item-text{color:rgba(var(--kup-text-color-rgb), 0.5)}#date-picker-div .item{text-align:center}#date-picker-div .item:not(.selected) .item-number:hover{background-color:var(--kup-hover-background-color)}#date-picker-div .item.selected .item-number,#date-picker-div .item.selected .item-number:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.175)}#date-picker-div .item-number{border-radius:50%;cursor:pointer;display:flex;justify-content:center;line-height:2.5em;margin:auto;width:2.5em;transition:background-color 0.25s;text-transform:capitalize}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color);--kup-textfield-primary-color-rgb:var(--kup-warning-color-rgb)}";
+const kupDatePickerCss = ":host{display:block;font-size:var(--kup-font-size)}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color);--kup-textfield-primary-color-rgb:var(--kup-warning-color-rgb)}";
 
 let KupDatePicker = class {
   constructor(hostRef) {
@@ -15783,14 +16610,12 @@ let KupDatePicker = class {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManager.kupManagerInstance();
-    this.calendarView = SourceEvent.DATE;
     this.textfieldEl = null;
     this.pickerContainerEl = null;
     this.pickerEl = {
       value: new Date().toISOString(),
       date: new Date(),
     };
-    this.pickerOpened = false;
     this.clickCb = null;
   }
   onKupDatePickerItemClick(value) {
@@ -15805,6 +16630,7 @@ let KupDatePicker = class {
       id: this.rootElement.id,
       value: this.value,
     });
+    this.setFocus();
   }
   onKupClearIconClick() {
     this.setPickerValueSelected('');
@@ -15818,19 +16644,6 @@ let KupDatePicker = class {
       id: this.rootElement.id,
     });
   }
-  onKupDatePickerMonthYearItemClick(value) {
-    switch (this.calendarView) {
-      case SourceEvent.MONTH: {
-        this.calendarView = SourceEvent.DATE;
-        break;
-      }
-      case SourceEvent.YEAR: {
-        this.calendarView = SourceEvent.MONTH;
-        break;
-      }
-    }
-    this.refreshPickerComponentValue(value);
-  }
   onKupBlur() {
     this.kupBlur.emit({
       id: this.rootElement.id,
@@ -16006,20 +16819,22 @@ let KupDatePicker = class {
     return this.value;
   }
   openPicker() {
-    this.calendarView = SourceEvent.DATE;
-    let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = true;
+    const textfieldEl = this.textfieldEl;
+    this.pickerContainerEl.menuVisible = true;
+    const elStyle = this.pickerContainerEl.style;
+    elStyle.height = 'auto';
+    elStyle.minWidth = this.textfieldEl.parentElement.clientWidth + 'px';
     this.refreshPickerComponentValue(this.getValueForPickerComponent());
     if (textfieldEl != null) {
       textfieldEl.classList.add('toggled');
     }
-    if (containerEl != null) {
-      containerEl.classList.add('visible');
-      const elStyle = containerEl.style;
-      elStyle.height = 'auto';
-      elStyle.minWidth = textfieldEl.clientWidth + 'px';
+    if (this.kupManager.dynamicPosition.isRegistered(this.pickerContainerEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.pickerContainerEl, this.textfieldEl.parentElement);
     }
+    else {
+      this.kupManager.dynamicPosition.register(this.pickerContainerEl, this.textfieldEl.parentElement, 0, kupManager.KupDynamicPositionPlacement.AUTO, true);
+    }
+    this.kupManager.dynamicPosition.start(this.pickerContainerEl);
     if (!this.clickCb) {
       this.clickCb = {
         cb: () => {
@@ -16036,22 +16851,21 @@ let KupDatePicker = class {
       return;
     }
     let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = false;
     if (textfieldEl != null) {
       textfieldEl.classList.remove('toggled');
     }
-    if (containerEl != null) {
-      containerEl.classList.remove('visible');
-    }
+    this.pickerContainerEl.menuVisible = false;
+    this.kupManager.dynamicPosition.stop(this.pickerContainerEl);
   }
   isPickerOpened() {
-    return this.pickerOpened;
+    return this.pickerContainerEl.menuVisible == true;
   }
   getTextFieldId() {
     return this.textfieldEl.id;
   }
   prepTextfield(initialValue) {
+    const fullHeight = this.rootElement.classList.contains('kup-full-height');
+    const fullWidth = this.rootElement.classList.contains('kup-full-width');
     const textfieldData = Object.assign({}, this.data['kup-text-field']);
     if (!textfieldData.icon) {
       textfieldData.icon = 'calendar';
@@ -16059,7 +16873,7 @@ let KupDatePicker = class {
     if (textfieldData.icon) {
       textfieldData.trailingIcon = true;
     }
-    return (index.h(fCell.FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, id: this.rootElement.id + '_text-field', value: initialValue, onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onkupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), this.prepDatePicker()));
+    return (index.h(fCell.FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, id: this.rootElement.id + '_text-field', value: initialValue, onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onkupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), this.prepDatePicker()));
   }
   getInitEndYear(curYear) {
     let initYear = curYear - (curYear % 10);
@@ -16081,254 +16895,17 @@ let KupDatePicker = class {
     return idConc.indexOf('#' + id + '#') >= 0;
   }
   prepDatePicker() {
-    let date = this.pickerEl.date;
-    let months = utils.getMonthsAsStringByLocale();
-    let curYear = date.getFullYear();
-    let yearRange = this.getInitEndYear(curYear);
-    let initYear = yearRange.initYear;
-    let endYear = yearRange.endYear;
-    let changeViewButtonLabel = 'not-set';
-    switch (this.calendarView) {
-      case SourceEvent.DATE: {
-        changeViewButtonLabel =
-          months[date.getMonth()] + ', ' + curYear.toString();
-        break;
-      }
-      case SourceEvent.MONTH: {
-        changeViewButtonLabel = curYear.toString();
-        break;
-      }
-      case SourceEvent.YEAR: {
-        changeViewButtonLabel =
-          initYear.toString() + ' - ' + endYear.toString();
-        break;
-      }
-    }
-    let prevButtonComp = null;
-    let nextButtonComp = null;
-    prevButtonComp = (index.h("kup-button", { id: "prev-page", icon: "chevron_left", "onkup-button-click": () => this.prevPage() }));
-    nextButtonComp = (index.h("kup-button", { id: "next-page", icon: "chevron_right", "onkup-button-click": () => this.nextPage() }));
-    return (index.h("div", { id: "date-picker-div", ref: (el) => (this.pickerContainerEl = el) }, index.h("div", { class: "section-1" }, index.h("div", { class: "sub-1 nav" }, prevButtonComp, index.h("kup-button", { customStyle: "#kup-component button {text-transform:capitalize}", id: "change-view-button", styling: fButtonDeclarations.FButtonStyling.FLAT, label: changeViewButtonLabel, "onkup-button-click": () => this.changeView() }), nextButtonComp)), index.h("div", { class: "section-2" }, this.createCalendar())));
-  }
-  createCalendar() {
-    switch (this.calendarView) {
-      case SourceEvent.DATE: {
-        return this.createDaysCalendar();
-      }
-      case SourceEvent.MONTH: {
-        return this.createMonthsCalendar();
-      }
-      case SourceEvent.YEAR: {
-        return this.createYearsCalendar();
-      }
-    }
-  }
-  createDaysCalendar() {
-    let days = utils.getDaysOfWeekAsStringByLocale(this.firstDayIndex);
-    let date = this.pickerEl.date;
-    let selecteDate = new Date(date);
-    let thead = [];
-    let tbody = [];
-    for (let index$1 = 0; index$1 < days.length; index$1++) {
-      thead.push(index.h("th", null, index.h("span", { class: "item-text" }, days[index$1])));
-    }
-    let firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1);
-    let lastMonthDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-    let finish = false;
-    let currentDayIndex = this.firstDayIndex;
-    let firstMonthDayIndex = firstMonthDay.getDay();
-    let row = [];
-    let daysForRowAdded = 0;
-    while (!finish) {
-      if (currentDayIndex == firstMonthDayIndex) {
-        break;
-      }
-      row.push(index.h("td", { class: "item empty" }));
-      currentDayIndex++;
-      daysForRowAdded++;
-      if (currentDayIndex > 6) {
-        currentDayIndex = 0;
-      }
-    }
-    let dayCount = 1;
-    while (dayCount <= lastMonthDay.getDate()) {
-      for (let i = daysForRowAdded; i < 7; i++) {
-        let dayClass = 'item';
-        let dataIndex = {
-          'data-index': date.getFullYear().toString() +
-            '-' +
-            utils.fillString((date.getMonth() + 1).toString(), '0', 2, true) +
-            '-' +
-            utils.fillString(dayCount.toString(), '0', 2, true),
-        };
-        if (dayCount === selecteDate.getDate() &&
-          date.getMonth() === selecteDate.getMonth() &&
-          date.getFullYear() === selecteDate.getFullYear()) {
-          dayClass += ' selected';
-        }
-        row.push(index.h("td", { class: dayClass }, index.h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-            this.onKupDatePickerItemClick(dataIndex['data-index']);
-          } }), dayCount)));
-        dayCount++;
-        if (dayCount > lastMonthDay.getDate()) {
-          break;
-        }
-      }
-      if (row.length > 0) {
-        tbody.push(index.h("tr", null, row));
-        row = [];
-      }
-      daysForRowAdded = 0;
-    }
-    return (index.h("table", { id: "calendar" }, index.h("thead", null, thead), index.h("tbody", null, tbody)));
-  }
-  createMonthsCalendar() {
-    let months = utils.getMonthsAsStringByLocale(utils.DateTimeFormatOptionsMonth.SHORT);
-    let date = this.pickerEl.date;
-    let selecteDate;
-    if (this.value == null || this.value.trim() == '') {
-      selecteDate = new Date();
-    }
-    else {
-      selecteDate = new Date(this.value);
-    }
-    let tbody = [];
-    let row = [];
-    let monthCount = 0;
-    while (monthCount < 12) {
-      for (let i = 0; i < 4; i++) {
-        let monthClass = 'item';
-        let dataIndex = {
-          'data-index': date.getFullYear().toString() +
-            '-' +
-            utils.fillString((monthCount + 1).toString(), '0', 2, true) +
-            '-' +
-            utils.fillString(date.getDate().toString(), '0', 2, true),
-        };
-        if (monthCount === selecteDate.getMonth() &&
-          date.getFullYear() == selecteDate.getFullYear()) {
-          monthClass += ' selected';
-        }
-        row.push(index.h("td", { class: monthClass }, index.h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-            this.onKupDatePickerMonthYearItemClick(dataIndex['data-index']);
-          } }), months[monthCount])));
-        monthCount++;
-      }
-      if (row.length > 0) {
-        tbody.push(index.h("tr", null, row));
-        row = [];
-      }
-    }
-    return (index.h("table", { id: "calendar" }, index.h("tbody", null, tbody)));
-  }
-  createYearsCalendar() {
-    let date = this.pickerEl.date;
-    let curYear = date.getFullYear();
-    let yearRange = this.getInitEndYear(curYear);
-    let initYear = yearRange.initYear;
-    let endYear = yearRange.endYear;
-    let selecteDate;
-    if (this.value == null || this.value.trim() == '') {
-      selecteDate = new Date();
-    }
-    else {
-      selecteDate = new Date(this.value);
-    }
-    let tbody = [];
-    let row = [];
-    let yearCount = initYear;
-    while (yearCount <= endYear) {
-      for (let i = 0; i < 4; i++) {
-        let yearClass = 'item';
-        let dataIndex = {
-          'data-index': yearCount.toString() +
-            '-' +
-            utils.fillString((date.getMonth() + 1).toString(), '0', 2, true) +
-            '-' +
-            utils.fillString(date.getDate().toString(), '0', 2, true),
-        };
-        if (yearCount === selecteDate.getFullYear()) {
-          yearClass += ' selected';
-        }
-        row.push(index.h("td", { class: yearClass }, index.h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-            this.onKupDatePickerMonthYearItemClick(dataIndex['data-index']);
-          } }), yearCount)));
-        yearCount++;
-      }
-      if (row.length > 0) {
-        tbody.push(index.h("tr", null, row));
-        row = [];
-      }
-    }
-    return (index.h("table", { id: "calendar" }, index.h("tbody", null, tbody)));
-  }
-  changeView() {
-    switch (this.calendarView) {
-      case SourceEvent.DATE: {
-        this.calendarView = SourceEvent.MONTH;
-        break;
-      }
-      case SourceEvent.MONTH: {
-        this.calendarView = SourceEvent.YEAR;
-        break;
-      }
-      case SourceEvent.YEAR: {
-        this.calendarView = SourceEvent.DATE;
-      }
-    }
-    this.refresh();
-  }
-  prevPage() {
-    let date = this.pickerEl.date;
-    let yy = date.getFullYear();
-    let mm = date.getMonth();
-    if (this.calendarView == SourceEvent.DATE) {
-      if (mm < 1) {
-        mm = 11;
-        yy--;
-      }
-      else {
-        mm--;
-      }
-    }
-    if (this.calendarView == SourceEvent.MONTH) {
-      yy--;
-    }
-    if (this.calendarView == SourceEvent.YEAR) {
-      let yearRange = this.getInitEndYear(yy);
-      yy = yearRange.initYear - 1;
-    }
-    date.setFullYear(yy);
-    date.setMonth(mm);
-    this.pickerEl.value = date.toISOString();
-    this.pickerEl.date = date;
-    this.refresh();
-  }
-  nextPage() {
-    let date = this.pickerEl.date;
-    let yy = date.getFullYear();
-    let mm = date.getMonth();
-    if (this.calendarView == SourceEvent.DATE) {
-      if (mm > 10) {
-        mm = 0;
-        yy++;
-      }
-      else {
-        mm++;
-      }
-    }
-    if (this.calendarView == SourceEvent.MONTH) {
-      yy++;
-    }
-    if (this.calendarView == SourceEvent.YEAR) {
-      let yearRange = this.getInitEndYear(yy);
-      yy = yearRange.endYear + 1;
-    }
-    date.setFullYear(yy);
-    date.setMonth(mm);
-    this.pickerEl.value = date.toISOString();
-    this.pickerEl.date = date;
-    this.refresh();
+    const data = {
+      options: {
+        initialValue: this.value,
+        firstDayIndex: this.firstDayIndex,
+        resetStatus: true,
+      },
+    };
+    return (index.h("kup-card", { ref: (el) => (this.pickerContainerEl = el), data: data, "layout-family": "builtin", "layout-number": "1", "size-x": "300px", "size-y": "300px", "is-menu": true, "onkup-card-click": (ev) => {
+        if (ev.detail.value != null && ev.detail.value != '')
+          this.onKupDatePickerItemClick(ev.detail.value);
+      } }));
   }
   getDateForOutput() {
     if (this.value == null || this.value.trim() == '') {
@@ -16369,22 +16946,13 @@ let KupDatePicker = class {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const hostClass = {};
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['className'] &&
-      this.data['kup-text-field']['className'].indexOf('kup-full-height') > -1) {
-      hostClass['kup-full-height'] = true;
-    }
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['fullWidth']) {
-      hostClass['kup-full-width'] = true;
-    }
-    return (index.h(index.Host, { class: hostClass }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, this.prepTextfield(this.getDateForOutput()))));
+    return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, this.prepTextfield(this.getDateForOutput()))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
+    if (this.pickerContainerEl) {
+      this.pickerContainerEl.remove();
+    }
   }
   get rootElement() { return index.getElement(this); }
   static get watchers() { return {
@@ -20442,7 +21010,7 @@ var KupTimePickerProps;
   KupTimePickerProps["timeMinutesStep"] = "Minutes step";
 })(KupTimePickerProps || (KupTimePickerProps = {}));
 
-const kupTimePickerCss = ":host{display:block;font-size:var(--kup-font-size)}#time-picker-div{display:none;outline:none;position:absolute;z-index:1}#time-picker-div.visible{display:block}.clock{box-shadow:var(--kup-box-shadow);width:300px;height:450px;background-color:var(--kup-background-color);position:relative;font-family:var(--kup-font-family)}.top{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color);height:100px;line-height:100px;font-size:50px;text-align:center}.top span{cursor:pointer;opacity:0.75;transition:0.25s ease-in-out}.top .active{opacity:1}.circle{user-select:none;background-color:rgba(var(--kup-text-color-rgb), 0.1);width:250px;height:250px;border-radius:1000px;position:relative;top:25px;left:25px;box-sizing:border-box;display:none}.circle.active{display:block}.mid{position:absolute;left:calc(50% - 0px);top:calc(50% - 0px);width:2px;height:2px;border-radius:10px;background-color:var(--kup-text-color)}.hour{position:absolute;height:40px;line-height:40px;width:40px;border-radius:40px;text-align:center}.hour.selected{z-index:2}.hour.selected::after{content:\"\";z-index:-1;background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.hour2{z-index:2;position:absolute;height:30px;line-height:30px;width:30px;border-radius:40px;text-align:center;font-size:14px}.hour2.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:64px;right:50%;z-index:-1}.unit{position:absolute;height:20px;line-height:20px;width:20px;border-radius:40px;text-align:center;font-size:12px}.unit.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.hour,.hour2,.unit{cursor:pointer;transition:background-color 0.25s}.hour:hover,.hour2:hover,.unit:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.275)}.hour.selected,.hour2.selected,.unit.selected{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color)}.actions{color:var(--kup-primary-color);font-weight:bold;font-size:20px;display:flex;justify-content:flex-end;position:absolute;width:100%;box-sizing:border-box;bottom:10px}.action{display:inline-block;width:100px;text-align:center;height:37.5px;line-height:37.5px;margin-right:10px;cursor:pointer;border-radius:2px}.clock .actions .action:hover{background-color:rgba(0, 0, 0, 0.1)}.clock .actions .action:active{background-color:rgba(0, 0, 0, 0.3)}.hour:nth-child(12):after{transform:rotate(330deg)}.hour:nth-child(11):after{transform:rotate(300deg)}.hour:nth-child(10):after{transform:rotate(270deg)}.hour:nth-child(9):after{transform:rotate(240deg)}.hour:nth-child(8):after{transform:rotate(210deg)}.hour:nth-child(7):after{transform:rotate(180deg)}.hour:nth-child(6):after{transform:rotate(150deg)}.hour:nth-child(5):after{transform:rotate(120deg)}.hour:nth-child(4):after{transform:rotate(90deg)}.hour:nth-child(3):after{transform:rotate(60deg)}.hour:nth-child(2):after{transform:rotate(30deg)}.hour:nth-child(1):after{transform:rotate(0deg)}.hour2:nth-child(24):after{transform:rotate(690deg)}.hour2:nth-child(23):after{transform:rotate(660deg)}.hour2:nth-child(22):after{transform:rotate(630deg)}.hour2:nth-child(21):after{transform:rotate(600deg)}.hour2:nth-child(20):after{transform:rotate(570deg)}.hour2:nth-child(19):after{transform:rotate(540deg)}.hour2:nth-child(18):after{transform:rotate(510deg)}.hour2:nth-child(17):after{transform:rotate(480deg)}.hour2:nth-child(16):after{transform:rotate(450deg)}.hour2:nth-child(15):after{transform:rotate(420deg)}.hour2:nth-child(14):after{transform:rotate(390deg)}.hour2:nth-child(13):after{transform:rotate(360deg)}.unit:nth-child(60):after{transform:rotate(354deg)}.unit:nth-child(59):after{transform:rotate(348deg)}.unit:nth-child(58):after{transform:rotate(342deg)}.unit:nth-child(57):after{transform:rotate(336deg)}.unit:nth-child(56):after{transform:rotate(330deg)}.unit:nth-child(55):after{transform:rotate(324deg)}.unit:nth-child(54):after{transform:rotate(318deg)}.unit:nth-child(53):after{transform:rotate(312deg)}.unit:nth-child(52):after{transform:rotate(306deg)}.unit:nth-child(51):after{transform:rotate(300deg)}.unit:nth-child(50):after{transform:rotate(294deg)}.unit:nth-child(49):after{transform:rotate(288deg)}.unit:nth-child(48):after{transform:rotate(282deg)}.unit:nth-child(47):after{transform:rotate(276deg)}.unit:nth-child(46):after{transform:rotate(270deg)}.unit:nth-child(45):after{transform:rotate(264deg)}.unit:nth-child(44):after{transform:rotate(258deg)}.unit:nth-child(43):after{transform:rotate(252deg)}.unit:nth-child(42):after{transform:rotate(246deg)}.unit:nth-child(41):after{transform:rotate(240deg)}.unit:nth-child(40):after{transform:rotate(234deg)}.unit:nth-child(39):after{transform:rotate(228deg)}.unit:nth-child(38):after{transform:rotate(222deg)}.unit:nth-child(37):after{transform:rotate(216deg)}.unit:nth-child(36):after{transform:rotate(210deg)}.unit:nth-child(35):after{transform:rotate(204deg)}.unit:nth-child(34):after{transform:rotate(198deg)}.unit:nth-child(33):after{transform:rotate(192deg)}.unit:nth-child(32):after{transform:rotate(186deg)}.unit:nth-child(31):after{transform:rotate(180deg)}.unit:nth-child(30):after{transform:rotate(174deg)}.unit:nth-child(29):after{transform:rotate(168deg)}.unit:nth-child(28):after{transform:rotate(162deg)}.unit:nth-child(27):after{transform:rotate(156deg)}.unit:nth-child(26):after{transform:rotate(150deg)}.unit:nth-child(25):after{transform:rotate(144deg)}.unit:nth-child(24):after{transform:rotate(138deg)}.unit:nth-child(23):after{transform:rotate(132deg)}.unit:nth-child(22):after{transform:rotate(126deg)}.unit:nth-child(21):after{transform:rotate(120deg)}.unit:nth-child(20):after{transform:rotate(114deg)}.unit:nth-child(19):after{transform:rotate(108deg)}.unit:nth-child(18):after{transform:rotate(102deg)}.unit:nth-child(17):after{transform:rotate(96deg)}.unit:nth-child(16):after{transform:rotate(90deg)}.unit:nth-child(15):after{transform:rotate(84deg)}.unit:nth-child(14):after{transform:rotate(78deg)}.unit:nth-child(13):after{transform:rotate(72deg)}.unit:nth-child(12):after{transform:rotate(66deg)}.unit:nth-child(11):after{transform:rotate(60deg)}.unit:nth-child(10):after{transform:rotate(54deg)}.unit:nth-child(9):after{transform:rotate(48deg)}.unit:nth-child(8):after{transform:rotate(42deg)}.unit:nth-child(7):after{transform:rotate(36deg)}.unit:nth-child(6):after{transform:rotate(30deg)}.unit:nth-child(5):after{transform:rotate(24deg)}.unit:nth-child(4):after{transform:rotate(18deg)}.unit:nth-child(3):after{transform:rotate(12deg)}.unit:nth-child(2):after{transform:rotate(6deg)}.unit:nth-child(1):after{transform:rotate(0deg)}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb);--kup-list-primary-color:var(--kup-danger-color);--kup-list-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb);--kup-list-primary-color:var(--kup-info-color);--kup-list-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-list-primary-color:var(--kup-secondary-color);--kup-list-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb);--kup-list-primary-color:var(--kup-success-color);--kup-list-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color);--kup-textfield-primary-color-rgb:var(--kup-warning-color-rgb);--kup-list-primary-color:var(--kup-warning-color);--kup-list-primary-color-rgb:var(--kup-warning-color-rgb)}";
+const kupTimePickerCss = ":host{display:block;font-size:var(--kup-font-size);width:max-content}#time-picker-div{display:none;outline:none;position:absolute;z-index:1}#time-picker-div.visible{display:block}.clock{box-shadow:var(--kup-box-shadow);width:300px;height:450px;background-color:var(--kup-background-color);position:relative;font-family:var(--kup-font-family)}.top{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color);height:100px;line-height:100px;font-size:50px;text-align:center}.top span{cursor:pointer;opacity:0.75;transition:0.25s ease-in-out}.top .active{opacity:1}.circle{user-select:none;background-color:rgba(var(--kup-text-color-rgb), 0.1);width:250px;height:250px;border-radius:1000px;position:relative;top:25px;left:25px;box-sizing:border-box;display:none}.circle.active{display:block}.mid{position:absolute;left:calc(50% - 0px);top:calc(50% - 0px);width:2px;height:2px;border-radius:10px;background-color:var(--kup-text-color)}.hour{position:absolute;height:40px;line-height:40px;width:40px;border-radius:40px;text-align:center}.hour.selected{z-index:2}.hour.selected::after{content:\"\";z-index:-1;background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.hour2{z-index:2;position:absolute;height:30px;line-height:30px;width:30px;border-radius:40px;text-align:center;font-size:14px}.hour2.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:64px;right:50%;z-index:-1}.unit{position:absolute;height:20px;line-height:20px;width:20px;border-radius:40px;text-align:center;font-size:12px}.unit.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.hour,.hour2,.unit{cursor:pointer;transition:background-color 0.25s}.hour:hover,.hour2:hover,.unit:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.275)}.hour.selected,.hour2.selected,.unit.selected{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color)}.actions{color:var(--kup-primary-color);font-weight:bold;font-size:20px;display:flex;justify-content:flex-end;position:absolute;width:100%;box-sizing:border-box;bottom:10px}.action{display:inline-block;width:100px;text-align:center;height:37.5px;line-height:37.5px;margin-right:10px;cursor:pointer;border-radius:2px}.clock .actions .action:hover{background-color:rgba(0, 0, 0, 0.1)}.clock .actions .action:active{background-color:rgba(0, 0, 0, 0.3)}.hour:nth-child(12):after{transform:rotate(330deg)}.hour:nth-child(11):after{transform:rotate(300deg)}.hour:nth-child(10):after{transform:rotate(270deg)}.hour:nth-child(9):after{transform:rotate(240deg)}.hour:nth-child(8):after{transform:rotate(210deg)}.hour:nth-child(7):after{transform:rotate(180deg)}.hour:nth-child(6):after{transform:rotate(150deg)}.hour:nth-child(5):after{transform:rotate(120deg)}.hour:nth-child(4):after{transform:rotate(90deg)}.hour:nth-child(3):after{transform:rotate(60deg)}.hour:nth-child(2):after{transform:rotate(30deg)}.hour:nth-child(1):after{transform:rotate(0deg)}.hour2:nth-child(24):after{transform:rotate(690deg)}.hour2:nth-child(23):after{transform:rotate(660deg)}.hour2:nth-child(22):after{transform:rotate(630deg)}.hour2:nth-child(21):after{transform:rotate(600deg)}.hour2:nth-child(20):after{transform:rotate(570deg)}.hour2:nth-child(19):after{transform:rotate(540deg)}.hour2:nth-child(18):after{transform:rotate(510deg)}.hour2:nth-child(17):after{transform:rotate(480deg)}.hour2:nth-child(16):after{transform:rotate(450deg)}.hour2:nth-child(15):after{transform:rotate(420deg)}.hour2:nth-child(14):after{transform:rotate(390deg)}.hour2:nth-child(13):after{transform:rotate(360deg)}.unit:nth-child(60):after{transform:rotate(354deg)}.unit:nth-child(59):after{transform:rotate(348deg)}.unit:nth-child(58):after{transform:rotate(342deg)}.unit:nth-child(57):after{transform:rotate(336deg)}.unit:nth-child(56):after{transform:rotate(330deg)}.unit:nth-child(55):after{transform:rotate(324deg)}.unit:nth-child(54):after{transform:rotate(318deg)}.unit:nth-child(53):after{transform:rotate(312deg)}.unit:nth-child(52):after{transform:rotate(306deg)}.unit:nth-child(51):after{transform:rotate(300deg)}.unit:nth-child(50):after{transform:rotate(294deg)}.unit:nth-child(49):after{transform:rotate(288deg)}.unit:nth-child(48):after{transform:rotate(282deg)}.unit:nth-child(47):after{transform:rotate(276deg)}.unit:nth-child(46):after{transform:rotate(270deg)}.unit:nth-child(45):after{transform:rotate(264deg)}.unit:nth-child(44):after{transform:rotate(258deg)}.unit:nth-child(43):after{transform:rotate(252deg)}.unit:nth-child(42):after{transform:rotate(246deg)}.unit:nth-child(41):after{transform:rotate(240deg)}.unit:nth-child(40):after{transform:rotate(234deg)}.unit:nth-child(39):after{transform:rotate(228deg)}.unit:nth-child(38):after{transform:rotate(222deg)}.unit:nth-child(37):after{transform:rotate(216deg)}.unit:nth-child(36):after{transform:rotate(210deg)}.unit:nth-child(35):after{transform:rotate(204deg)}.unit:nth-child(34):after{transform:rotate(198deg)}.unit:nth-child(33):after{transform:rotate(192deg)}.unit:nth-child(32):after{transform:rotate(186deg)}.unit:nth-child(31):after{transform:rotate(180deg)}.unit:nth-child(30):after{transform:rotate(174deg)}.unit:nth-child(29):after{transform:rotate(168deg)}.unit:nth-child(28):after{transform:rotate(162deg)}.unit:nth-child(27):after{transform:rotate(156deg)}.unit:nth-child(26):after{transform:rotate(150deg)}.unit:nth-child(25):after{transform:rotate(144deg)}.unit:nth-child(24):after{transform:rotate(138deg)}.unit:nth-child(23):after{transform:rotate(132deg)}.unit:nth-child(22):after{transform:rotate(126deg)}.unit:nth-child(21):after{transform:rotate(120deg)}.unit:nth-child(20):after{transform:rotate(114deg)}.unit:nth-child(19):after{transform:rotate(108deg)}.unit:nth-child(18):after{transform:rotate(102deg)}.unit:nth-child(17):after{transform:rotate(96deg)}.unit:nth-child(16):after{transform:rotate(90deg)}.unit:nth-child(15):after{transform:rotate(84deg)}.unit:nth-child(14):after{transform:rotate(78deg)}.unit:nth-child(13):after{transform:rotate(72deg)}.unit:nth-child(12):after{transform:rotate(66deg)}.unit:nth-child(11):after{transform:rotate(60deg)}.unit:nth-child(10):after{transform:rotate(54deg)}.unit:nth-child(9):after{transform:rotate(48deg)}.unit:nth-child(8):after{transform:rotate(42deg)}.unit:nth-child(7):after{transform:rotate(36deg)}.unit:nth-child(6):after{transform:rotate(30deg)}.unit:nth-child(5):after{transform:rotate(24deg)}.unit:nth-child(4):after{transform:rotate(18deg)}.unit:nth-child(3):after{transform:rotate(12deg)}.unit:nth-child(2):after{transform:rotate(6deg)}.unit:nth-child(1):after{transform:rotate(0deg)}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb);--kup-list-primary-color:var(--kup-danger-color);--kup-list-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb);--kup-list-primary-color:var(--kup-info-color);--kup-list-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-list-primary-color:var(--kup-secondary-color);--kup-list-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb);--kup-list-primary-color:var(--kup-success-color);--kup-list-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color);--kup-textfield-primary-color-rgb:var(--kup-warning-color-rgb);--kup-list-primary-color:var(--kup-warning-color);--kup-list-primary-color-rgb:var(--kup-warning-color-rgb)}";
 
 let KupTimePicker = class {
   constructor(hostRef) {
@@ -20515,10 +21083,9 @@ let KupTimePicker = class {
     this.hoursActive = true;
     this.minutesActive = false;
     this.secondsActive = false;
+    this.textFieldContainerEl = undefined;
     this.textfieldEl = undefined;
-    this.pickerContainerEl = undefined;
-    this.pickerEl = undefined;
-    this.pickerOpened = false;
+    this.pickerKupEl = undefined;
     this.clickCb = null;
   }
   onKupTimePickerItemClick(e, value) {
@@ -20538,6 +21105,7 @@ let KupTimePicker = class {
       id: this.rootElement.id,
       value: this.value,
     });
+    this.setFocus();
   }
   onKupClearIconClick() {
     this.setPickerValueSelected('');
@@ -20659,7 +21227,7 @@ let KupTimePicker = class {
    */
   async setFocus() {
     if (this.textfieldEl != null) {
-      this.textfieldEl.setFocus();
+      this.textfieldEl.focus();
     }
   }
   /**
@@ -20720,61 +21288,61 @@ let KupTimePicker = class {
     return this.value;
   }
   openPicker() {
-    let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = true;
-    this.setClockViewActive(true, false, false);
-    if (textfieldEl != null) {
-      textfieldEl.classList.add('toggled');
+    const elStyle = this.pickerKupEl.style;
+    elStyle.height = 'auto';
+    elStyle.minWidth = this.textFieldContainerEl.clientWidth + 'px';
+    this.pickerKupEl.menuVisible = true;
+    if (this.textfieldEl != null) {
+      this.textfieldEl.classList.add('toggled');
+    }
+    if (this.kupManager.dynamicPosition.isRegistered(this.pickerKupEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.pickerKupEl, this.textFieldContainerEl);
     }
-    if (containerEl != null) {
-      containerEl.classList.add('visible');
-      const elStyle = containerEl.style;
-      elStyle.height = 'auto';
-      elStyle.minWidth = textfieldEl.clientWidth + 'px';
+    else {
+      this.kupManager.dynamicPosition.register(this.pickerKupEl, this.textFieldContainerEl, 0, kupManager.KupDynamicPositionPlacement.AUTO, true);
     }
+    this.kupManager.dynamicPosition.start(this.pickerKupEl);
     if (!this.clickCb) {
       this.clickCb = {
         cb: () => {
           this.closePicker();
         },
-        el: this.pickerContainerEl,
+        el: this.pickerKupEl,
       };
     }
     this.kupManager.addClickCallback(this.clickCb, true);
-    this.refresh();
   }
   closePicker() {
+    this.pickerKupEl.menuVisible = false;
+    this.kupManager.removeClickCallback(this.clickCb);
     let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = false;
     if (textfieldEl != null) {
       textfieldEl.classList.remove('toggled');
-      textfieldEl.emitSubmitEventOnEnter = true;
-    }
-    if (containerEl != null) {
-      containerEl.classList.remove('visible');
     }
+    this.pickerKupEl.menuVisible = false;
+    this.kupManager.dynamicPosition.stop(this.pickerKupEl);
     this.kupManager.removeClickCallback(this.clickCb);
   }
   isPickerOpened() {
-    return this.pickerOpened;
+    return this.pickerKupEl.menuVisible == true;
   }
   getTextFieldId() {
     return this.textfieldEl.id;
   }
   getPickerElId() {
-    return this.pickerEl.id;
+    return this.pickerKupEl.id;
   }
   prepTextfield(initialValue) {
-    let textfieldData = Object.assign({}, this.data['kup-text-field']);
-    if (!textfieldData['icon']) {
-      textfieldData['icon'] = 'access_time';
+    const fullHeight = this.rootElement.classList.contains('kup-full-height');
+    const fullWidth = this.rootElement.classList.contains('kup-full-width');
+    const textfieldData = Object.assign({}, this.data['kup-text-field']);
+    if (!textfieldData.icon) {
+      textfieldData.icon = 'access_time';
     }
-    if (textfieldData['icon']) {
-      textfieldData['trailingIcon'] = true;
+    if (textfieldData.icon) {
+      textfieldData.trailingIcon = true;
     }
-    let comp = (index.h(fCell.FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, id: this.rootElement.id + '_text-field', value: initialValue, onChange: (e) => this.onKupChange(e), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onInput: (e) => this.onKupInput(e), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onClearIconClick: () => this.onKupClearIconClick() }), this.prepTimePicker()));
+    let comp = (index.h(fCell.FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, id: this.rootElement.id + '_text-field', value: initialValue, onChange: (e) => this.onKupChange(e), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onInput: (e) => this.onKupInput(e), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onClearIconClick: () => this.onKupClearIconClick() }), this.prepTimePicker()));
     return comp;
   }
   isRelatedTargetInThisComponent(e) {
@@ -20794,183 +21362,25 @@ let KupTimePicker = class {
     let idConc = '#time-picker-div#confirm#';
     return idConc.indexOf('#' + id + '#') >= 0;
   }
-  setTimeFromClock(e) {
-    let text = this.hoursEl.innerText + ':' + this.minutesEl.innerText;
-    if (this.manageSeconds) {
-      text += ':' + this.secondsEl.innerText;
-    }
-    this.onKupTimePickerItemClick(e, text);
-  }
-  createClock() {
-    let selectedTime;
-    if (this.value) {
-      selectedTime = this.kupManager.dates.toDate(this.value, this.manageSeconds
-        ? kupManager.KupDatesFormats.ISO_TIME
-        : kupManager.KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
-    }
-    else {
-      selectedTime = new Date();
-    }
-    let hh = selectedTime.getHours().toString();
-    let mm = selectedTime.getMinutes().toString();
-    if (hh.length === 1) {
-      hh = '0' + hh;
-    }
-    if (mm.length === 1) {
-      mm = '0' + mm;
-    }
-    let ss = '';
-    if (this.manageSeconds) {
-      ss = selectedTime.getSeconds().toString();
-      if (ss.length === 1) {
-        ss = '0' + ss;
-      }
-    }
-    let seconds;
-    let time = [
-      index.h("span", { class: "h", ref: (el) => (this.hoursEl = el), onClick: () => {
-          this.setClockViewActive(true, false, false);
-          this.switchView(this.hoursEl, this.hoursCircleEl);
-        }, innerHTML: hh }),
-      ':',
-      index.h("span", { class: "m", ref: (el) => (this.minutesEl = el), onClick: () => {
-          this.setClockViewActive(false, true, false);
-          this.switchView(this.minutesEl, this.minutesCircleEl);
-        }, innerHTML: mm }),
-    ];
-    if (this.manageSeconds) {
-      seconds = (index.h("div", { class: "circle seconds", ref: (el) => (this.secondsCircleEl = el) }, this.buildClock(60, 101, 115, 115, 'sec unit', 0, 5, ss), index.h("div", { class: "mid" })));
-      time.push(':', index.h("span", { class: "s", ref: (el) => (this.secondsEl = el), onClick: () => {
-          this.setClockViewActive(false, false, true);
-          this.switchView(this.secondsEl, this.secondsCircleEl);
-        }, innerHTML: ss }));
-    }
-    return (index.h("div", { class: "clock", id: this.rootElement.id + '_clock', ref: (el) => (this.pickerEl = el) }, index.h("div", { class: "top" }, time), index.h("div", { class: "circle hours", ref: (el) => (this.hoursCircleEl = el) }, this.buildClock(12, 101, 105, 105, 'hour', 0, 1, hh), this.buildClock(12, 64, 110, 110, 'hour2', 12, 1, hh), index.h("div", { class: "mid" })), index.h("div", { class: "circle minutes", ref: (el) => (this.minutesCircleEl = el) }, this.buildClock(60, 101, 115, 115, 'min unit', 0, 5, mm), index.h("div", { class: "mid" })), seconds, index.h("div", { class: "actions" }, index.h("kup-button", { "onkup-button-click": (e) => {
-        this.setTimeFromClock(e);
-      }, id: "confirm", styling: fButtonDeclarations.FButtonStyling.FLAT, label: "Ok" }))));
-  }
-  switchView(el, elCircle) {
-    this.hoursEl.classList.remove('active');
-    this.hoursCircleEl.classList.remove('active');
-    this.minutesEl.classList.remove('active');
-    this.minutesCircleEl.classList.remove('active');
-    if (this.secondsEl) {
-      this.secondsEl.classList.remove('active');
-      this.secondsCircleEl.classList.remove('active');
-    }
-    el.classList.add('active');
-    elCircle.classList.add('active');
-  }
-  setClockViewActive(hoursActive, minutesActive, secondsActive) {
-    this.hoursActive = hoursActive;
-    this.minutesActive = minutesActive;
-    this.secondsActive = secondsActive;
-  }
-  buildClock(num, radius, offsetX, offsetY, className, add, separator, selectedValue) {
-    let x, y;
-    let divsArray = [];
-    for (var n = 0; n < num; n++) {
-      x = radius * Math.cos((n / num) * 2 * Math.PI);
-      y = radius * Math.sin((n / num) * 2 * Math.PI);
-      let text;
-      let dataValue = {};
-      let style = {};
-      if (separator == 1) {
-        if (n + 3 > 12) {
-          text = n + 3 - 12 + add + '';
-        }
-        else {
-          let calc = n + 3 + add;
-          if (calc !== 24) {
-            text = n + 3 + add + '';
-          }
-          else {
-            text = '00';
-          }
-        }
-        dataValue['data-value'] = text;
-      }
-      else {
-        if (n % separator == 0) {
-          if (n + 15 >= 60) {
-            dataValue['data-value'] = n + 15 - 60 + '';
-            text = n + 15 - 60 + add + '';
-          }
-          else {
-            dataValue['data-value'] = n + 15 + '';
-            text = n + 15 + add + '';
-          }
-        }
-        else {
-          if (n + 15 >= 60) {
-            dataValue['data-value'] = n + 15 - 60 + '';
-            text = '⋅';
-          }
-          else {
-            dataValue['data-value'] = n + 15 + '';
-            text = '\u00B7';
-          }
-        }
-      }
-      style['left'] = x + offsetX + 'px';
-      style['top'] = y + offsetY + 'px';
-      if (dataValue['data-value'].length === 1) {
-        dataValue['data-value'] = '0' + dataValue['data-value'];
-      }
-      let elClass = className;
-      if (dataValue['data-value'] === selectedValue) {
-        elClass += ' selected';
-      }
-      let div = (index.h("div", Object.assign({ class: elClass, style: style }, dataValue, { onClick: (e) => this.setClockTime(e) }), text));
-      divsArray.push(div);
-    }
-    return divsArray;
-  }
-  setClockTime(e) {
-    let time = e.target.getAttribute('data-value');
-    if (this.hoursActive) {
-      this.hoursEl.innerText = time;
-      this.hoursCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      this.setClockViewActive(false, true, false);
-      this.switchView(this.minutesEl, this.minutesCircleEl);
-    }
-    else if (this.minutesActive) {
-      this.minutesEl.innerText = time;
-      this.minutesCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      if (this.manageSeconds) {
-        this.setClockViewActive(false, false, true);
-        this.switchView(this.secondsEl, this.secondsCircleEl);
-      }
-      else {
-        this.setTimeFromClock(e);
-      }
-    }
-    else {
-      this.secondsEl.innerText = time;
-      this.secondsCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      this.setTimeFromClock(e);
-    }
-    e.target.classList.add('selected');
-  }
   prepTimePicker() {
-    let widget = undefined;
     if (this.clockVariant) {
-      widget = this.createClock();
+      const data = {
+        options: {
+          initialValue: this.value,
+          manageSeconds: this.manageSeconds,
+          hoursActive: this.hoursActive,
+          minutesActive: this.minutesActive,
+          secondsActive: this.secondsActive,
+        },
+      };
+      return (index.h("kup-card", { ref: (el) => (this.pickerKupEl = el), data: data, "layout-family": "builtin", "layout-number": "2", "size-x": "300px", "size-y": "450px", "is-menu": true, "onkup-card-click": (ev) => {
+          if (ev.detail.value != null && ev.detail.value != '')
+            this.onKupTimePickerItemClick(ev, ev.detail.value);
+        } }));
     }
     else {
-      widget = (index.h("kup-list", { data: this.createTimeListData(this.value), "is-menu": true, "menu-visible": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list', ref: (el) => (this.pickerEl = el) }));
+      return (index.h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list' }));
     }
-    return (index.h("div", { id: "time-picker-div", ref: (el) => (this.pickerContainerEl = el), onBlur: (e) => {
-        if (!this.isRelatedTargetInThisComponent(e)) {
-          this.onKupBlur();
-        }
-      } }, widget));
   }
   createTimeListData(value) {
     let listData = [];
@@ -21040,40 +21450,21 @@ let KupTimePicker = class {
     if (root) {
       const f = root.querySelector('.f-text-field');
       if (f) {
+        this.textFieldContainerEl = f;
         this.textfieldEl = f.querySelector('input');
         FTextFieldMDC(f);
       }
     }
-    if (this.clockVariant) {
-      if (this.hoursActive) {
-        this.switchView(this.hoursEl, this.hoursCircleEl);
-      }
-      else if (this.minutesActive) {
-        this.switchView(this.minutesEl, this.minutesCircleEl);
-      }
-      else if (this.secondsActive) {
-        this.switchView(this.secondsEl, this.secondsCircleEl);
-      }
-    }
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let hostClass = {};
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['className'] &&
-      this.data['kup-text-field']['className'].indexOf('kup-full-height') > -1) {
-      hostClass['kup-full-height'] = true;
-    }
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['fullWidth']) {
-      hostClass['kup-full-width'] = true;
-    }
-    return (index.h(index.Host, { class: hostClass }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
+    return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
+    if (this.pickerKupEl) {
+      this.pickerKupEl.remove();
+    }
   }
   get rootElement() { return index.getElement(this); }
   static get watchers() { return {