@sme.up/ketchup 9.6.2 → 9.6.3

package/dist/collection/f-components/f-cell/f-cell.js

@@ -15,6 +15,8 @@ import { FProgressBar } from "../f-progress-bar/f-progress-bar";
 import { FRadio } from "../f-radio/f-radio";
 import { FRating } from "../f-rating/f-rating";
 const dom = document.documentElement;
+let touchEndTime = 0;
+let touchStartTime = 0;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
@@ -39,6 +41,9 @@ export const FCell = (props, children) => {
         : column.cssClass
             ? column.cssClass
             : '';
+    if (props.component.legacyLook) {
+        cssClasses += ' monospace c-pre';
+    }
     const classObj = {
         'f-cell': true,
         [FCellClasses.OBJ]: hasObj ? true : false,
@@ -108,7 +113,27 @@ export const FCell = (props, children) => {
     }
     return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
             return props;
-        }, ref: (el) => (cell.element = el), style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
+        }, onTouchEnd: dom.ketchup.interact.isMobileDevice()
+            ? () => {
+                if (touchStartTime) {
+                    touchEndTime = performance.now();
+                    const delta = touchEndTime - touchStartTime;
+                    // 600ms is interact's default "hold" value
+                    if (delta < 600) {
+                        const newEvt = document.createEvent('MouseEvents');
+                        cellEvent(newEvt, props, cellType, FCellEvents.CLICK);
+                    }
+                    touchEndTime = 0;
+                    touchStartTime = 0;
+                }
+            }
+            : null, onTouchStart: dom.ketchup.interact.isMobileDevice()
+            ? (e) => {
+                touchEndTime = 0;
+                touchStartTime = performance.now();
+                e.preventDefault();
+            }
+            : null, ref: (el) => (cell.element = el), style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
         ? children
         : [props.indents, infoEl, icon, content])));
 };
@@ -232,6 +257,20 @@ function setEditableCell(cellType, classObj, cell, column, props) {
             return (h("kup-chip", Object.assign({ displayId: true }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }), h("kup-autocomplete", Object.assign({ class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, selectMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), showDropDownIcon: false }, cell.slotData))));
         case FCellTypes.MULTI_COMBOBOX:
             return (h("kup-chip", Object.assign({ displayId: true }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }), h("kup-combobox", Object.assign({ class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, selectMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) }, cell.slotData))));
+        case FCellTypes.RADIO:
+            return (h(FRadio, Object.assign({}, cell.data, { disabled: false, onChange: (i, e) => {
+                    const radioData = cell.data.data;
+                    for (let index = 0; index < radioData.length; index++) {
+                        const radioEl = radioData[index];
+                        if (index === i) {
+                            radioEl.checked = true;
+                        }
+                        else {
+                            radioEl.checked = false;
+                        }
+                    }
+                    cellEvent(e, props, cellType, FCellEvents.UPDATE);
+                } })));
         case FCellTypes.RATING:
             return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
         case FCellTypes.SWITCH:
@@ -376,8 +415,8 @@ function cellEvent(e, props, cellType, cellEventName) {
     const column = props.column;
     const comp = props.component;
     const row = props.row;
-    let value = getValueFromEventTaget(e, cellType);
     if (cellEventName === FCellEvents.UPDATE) {
+        let value = getValueFromEventTaget(e, cellType);
         switch (cellType) {
             case FCellTypes.AUTOCOMPLETE:
             case FCellTypes.COMBOBOX:
@@ -395,6 +434,9 @@ function cellEvent(e, props, cellType, cellEventName) {
                         value === '0' ? false : true;
                 }
                 break;
+            case FCellTypes.RADIO:
+                // data change handled outside this switchcase to avoid passing the index
+                break;
             case FCellTypes.CHIP:
             case FCellTypes.MULTI_AUTOCOMPLETE:
             case FCellTypes.MULTI_COMBOBOX:

package/dist/collection/f-components/f-paginator/f-paginator.js

@@ -8,6 +8,9 @@ const dom = document.documentElement;
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FPaginator = (props) => {
+    if (!props.perPage) {
+        props.perPage = 10;
+    }
     const maxNumberOfPage = Math.ceil(props.max / props.perPage);
     const pageItems = getPageItems(props, maxNumberOfPage);
     const rowsPerPageItems = getRowsItems(props);

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

@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import minMax from "dayjs/plugin/minMax";
@@ -31,16 +32,24 @@ export class KupDates {
          * Parses a Date string to JS Date Object
          *
          * @param {string} ymd - The string to be converted to Date.
-        */
-        this.parseToDayStart = (ymd) => dayjs(ymd).toDate();
-        this.parseToDayEnd = (endDate) => dayjs(endDate).add(23, 'hour').add(59, 'minute').add(59, 'second').toDate();
+         */
+        this.parseToDayStart = (ymd) => {
+            return dayjs(ymd).toDate();
+        };
+        this.parseToDayEnd = (endDate) => {
+            return dayjs(endDate)
+                .set('hour', 23)
+                .set('minute', 59)
+                .set('second', 59)
+                .toDate();
+        };
         /**
          * Returns Start and end date of given dates
          *
          * @param {string} startDate - The start date string.
          * @param {string} endDate - The end date string.
          * @param {string} _name
-        */
+         */
         this.validDates = (startDate, endDate, _name) => {
             let start = this.parseToDayStart(startDate);
             const end = this.parseToDayEnd(endDate);
@@ -49,10 +58,11 @@ export class KupDates {
             }
             return { start, end };
         };
-        this.formatToLocaleSimple = (date) => dayjs(date).format("DD/MM/YYYY");
+        this.formatToLocaleSimple = (date) => dayjs(date).format('DD/MM/YYYY');
         this.managedComponents = new Set();
         this.setLocale(locale);
         this.dayjs = dayjs;
+        dayjs.extend(utc);
         dayjs.extend(customParseFormat);
         dayjs.extend(localizedFormat);
         dayjs.extend(minMax);
@@ -179,7 +189,7 @@ export class KupDates {
         if (!format) {
             format = 'L'; // MM/DD/YYYY, DD/MM/YYYY depending on locale
         }
-        return dayjs(input).format(format);
+        return dayjs.utc(input).format(format);
     }
     /**
      * Gets the time formatted
@@ -231,10 +241,10 @@ export class KupDates {
      */
     toDate(input, format) {
         if (format && format != null) {
-            return dayjs(input, format).toDate();
+            return dayjs.utc(input, format).toDate();
         }
         else {
-            return dayjs(input).toDate();
+            return dayjs.utc(input).toDate();
         }
     }
     /**

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

@@ -240,6 +240,13 @@ export class KupInteract {
         interact(el).dropzone(options);
         this.managedElements.add(el);
     }
+    /**
+     * Tests whether the current device is mobile or not.
+     * @returns {boolean} Returns true when it's a mobile device
+     */
+    isMobileDevice() {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    }
     /**
      * Sets up a new resizable element.
      * @param {HTMLElement} el - The resizable element.

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

@@ -113,8 +113,8 @@ export function compareValues(obj1, value1, obj2, value2, sortMode) {
         v2 = Number(s2.replace(/:/g, ''));
     }
     else if (dom.ketchup.objects.isTimestamp(obj1)) {
-        v1 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE_TIME));
-        v2 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE_TIME));
+        v1 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE_TIME), KupDatesFormats.ISO_DATE_TIME);
+        v2 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE_TIME), KupDatesFormats.ISO_DATE_TIME);
     }
     if (v1 > v2) {
         return sm * 1;

package/dist/components/custom-task-list-header.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const customTaskListHeaderModuleCss = ".custom-task-list-wrapper{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}.title{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toggler{max-width:max-content;padding:0 4px;text-align:right}.switch{position:relative;display:inline-block;width:30px;height:17px}.input{opacity:0;width:0;height:0}.input:checked+.slider{background-color:#003b77}.input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translateX(13px)}.input:focus+.slider{box-shadow:0 0 1px #003b77}.slider{-webkit-transition:0.4s;cursor:pointer;background-color:#ccc;bottom:0;border-radius:17px;left:0;position:absolute;right:0;top:0;transition:0.4s}.slider:before{-webkit-transition:0.1s;background-color:white;border-radius:50%;bottom:2px;content:\"\";height:13px;left:2px;position:absolute;transition:0.1s;width:13px}.label{font-size:12px;padding:6px}.filter{font-size:12px}";
+const customTaskListHeaderModuleCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.custom-task-list-wrapper{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}.title{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toggler{max-width:max-content;padding:0 4px;text-align:right}.switch{position:relative;display:inline-block;width:30px;height:17px}.input{opacity:0;width:0;height:0}.input:checked+.slider{background-color:#003b77}.input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translateX(13px)}.input:focus+.slider{box-shadow:0 0 1px #003b77}.slider{-webkit-transition:0.4s;cursor:pointer;background-color:#ccc;bottom:0;border-radius:17px;left:0;position:absolute;right:0;top:0;transition:0.4s}.slider:before{-webkit-transition:0.1s;background-color:white;border-radius:50%;bottom:2px;content:\"\";height:13px;left:2px;position:absolute;transition:0.1s;width:13px}.label{font-size:12px;padding:6px}.filter{font-size:12px}";
 const KupCustomTaskListHeaderStyle0 = customTaskListHeaderModuleCss;
 
 const KupCustomTaskListHeader = /*@__PURE__*/ proxyCustomElement(class KupCustomTaskListHeader extends HTMLElement {

package/dist/components/custom-task-list-table.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { b as KupDates } from './kup-dates.js';
 
-const ganttTableModuleCss = ".container{padding:0 10px;margin-right:10px}.project{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}.project>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.project .main{font-weight:700;width:100%;padding-left:4px}.subrow{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}.subrow>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.subrow:has(+.subrow),.project:has(+.subrow){border-bottom-left-radius:0;border-bottom-right-radius:0}.timeline{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}.timeline>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.timeline .main{font-weight:700;width:100%;padding-left:4px}";
+const ganttTableModuleCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.container{padding:0 10px;margin-right:10px}.project{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}.project>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.project .main{font-weight:700;width:100%;padding-left:4px}.subrow{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}.subrow>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.subrow:has(+.subrow),.project:has(+.subrow){border-bottom-left-radius:0;border-bottom-right-radius:0}.timeline{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}.timeline>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.timeline .main{font-weight:700;width:100%;padding-left:4px}";
 const KupCustomTaskListTableStyle0 = ganttTableModuleCss;
 
 const KupCustomTaskListTable = /*@__PURE__*/ proxyCustomElement(class KupCustomTaskListTable extends HTMLElement {

package/dist/components/kup-accordion.js

@@ -13,7 +13,7 @@ var KupAccordionProps;
     KupAccordionProps["ripple"] = "When enabled displays Material's ripple effect on item headers.";
 })(KupAccordionProps || (KupAccordionProps = {}));
 
-const kupAccordionCss = ":host{--kup_accordion_background_color:var(\n    --kup-accordion-background-color,\n    var(--kup-background-color)\n  );--kup_accordion_border:var(\n    --kup-accordion-border,\n    1px solid var(--kup-border-color)\n  );--kup_accordion_border_radius:var(--kup-accordion-border-radius, 4px);--kup-accordion_dropdown_icon_color:var(\n    --kup-accordion-dropdown-icon-color,\n    var(--kup-icon-color)\n  );--kup_accordion_font_family:var(\n    --kup-accordion-font-family,\n    var(--kup-font-family)\n  );--kup_accordion_font_size:var(\n    --kup-accordion-font-size,\n    var(--kup-font-size)\n  );--kup_accordion_hover_background_color:var(\n    --kup-accordion-hover-background-color,\n    var(--kup-hover-background-color)\n  );--kup_accordion_hover_color:var(\n    --kup-accordion-hover-color,\n    var(--kup-hover-color)\n  );--kup_accordion_padding:var(--kup-accordion-padding, 1em 1.5em);--kup_accordion_primary_color:var(\n    --kup-accordion-primary-color,\n    var(--kup-primary-color)\n  );--kup_accordion_primary_color_rgb:var(\n    --kup-accordion-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_accordion_text_color:var(\n    --kup-accordion-text-color,\n    var(--kup-text-color)\n  );--kup_accordion_text_on_primary_color:var(\n    --kup-accordion-text-on-primary-color,\n    var(--kup-text-on-primary-color)\n  );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{background-color:var(--kup_accordion_background_color);border-bottom:var(--kup_accordion_border);border-radius:var(--kup_accordion_border_radius);border-top:var(--kup_accordion_border);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-left:var(--kup_accordion_border);border-right:var(--kup_accordion_border);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:not(:first-of-type){border-top:var(--kup_accordion_border)}.accordion-item__header{align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%}.accordion-item__header:hover:not(.accordion-item__header--selected){color:var(--kup_accordion_hover_color);background-color:var(--kup_accordion_hover_background_color)}.accordion-item__header--expanded{color:var(--kup_accordion_hover_color);background-color:var(--kup_accordion_hover_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__header--selected{background-color:rgba(var(--kup_accordion_primary_color_rgb), 0.175)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup-accordion_dropdown_icon_color);height:1.5em;margin-left:auto;margin-right:0;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{animation:fade-in 0.25s ease-out;display:none}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color);--kup-accordion-primary-color-rgb:var(--kup-danger-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color);--kup-accordion-primary-color-rgb:var(--kup-success-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color);--kup-accordion-primary-color-rgb:var(--kup-warning-color-rgb);--kup-accordion-text-on-primary-color:white}";
+const kupAccordionCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_accordion_background_color:var(\n    --kup-accordion-background-color,\n    var(--kup-background-color)\n  );--kup_accordion_border:var(\n    --kup-accordion-border,\n    1px solid var(--kup-border-color)\n  );--kup_accordion_border_radius:var(--kup-accordion-border-radius, 4px);--kup-accordion_dropdown_icon_color:var(\n    --kup-accordion-dropdown-icon-color,\n    var(--kup-icon-color)\n  );--kup_accordion_font_family:var(\n    --kup-accordion-font-family,\n    var(--kup-font-family)\n  );--kup_accordion_font_size:var(\n    --kup-accordion-font-size,\n    var(--kup-font-size)\n  );--kup_accordion_hover_background_color:var(\n    --kup-accordion-hover-background-color,\n    var(--kup-hover-background-color)\n  );--kup_accordion_hover_color:var(\n    --kup-accordion-hover-color,\n    var(--kup-hover-color)\n  );--kup_accordion_padding:var(--kup-accordion-padding, 1em 1.5em);--kup_accordion_primary_color:var(\n    --kup-accordion-primary-color,\n    var(--kup-primary-color)\n  );--kup_accordion_primary_color_rgb:var(\n    --kup-accordion-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_accordion_text_color:var(\n    --kup-accordion-text-color,\n    var(--kup-text-color)\n  );--kup_accordion_text_on_primary_color:var(\n    --kup-accordion-text-on-primary-color,\n    var(--kup-text-on-primary-color)\n  );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{background-color:var(--kup_accordion_background_color);border-bottom:var(--kup_accordion_border);border-radius:var(--kup_accordion_border_radius);border-top:var(--kup_accordion_border);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-left:var(--kup_accordion_border);border-right:var(--kup_accordion_border);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:not(:first-of-type){border-top:var(--kup_accordion_border)}.accordion-item__header{align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%}.accordion-item__header:hover:not(.accordion-item__header--selected){color:var(--kup_accordion_hover_color);background-color:var(--kup_accordion_hover_background_color)}.accordion-item__header--expanded{color:var(--kup_accordion_hover_color);background-color:var(--kup_accordion_hover_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__header--selected{background-color:rgba(var(--kup_accordion_primary_color_rgb), 0.175)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup-accordion_dropdown_icon_color);height:1.5em;margin-left:auto;margin-right:0;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{animation:fade-in 0.25s ease-out;display:none}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color);--kup-accordion-primary-color-rgb:var(--kup-danger-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color);--kup-accordion-primary-color-rgb:var(--kup-success-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color);--kup-accordion-primary-color-rgb:var(--kup-warning-color-rgb);--kup-accordion-text-on-primary-color:white}";
 const KupAccordionStyle0 = kupAccordionCss;
 
 const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion extends HTMLElement {