@limetech/lime-elements 39.10.2 → 39.10.4

package/dist/collection/components/slider/slider.js

@@ -1,14 +1,15 @@
-import { MDCSlider } from "@material/slider";
 import { h, Host, } from "@stencil/core";
 import { getPercentageClass } from "./get-percentage-class";
 import { createRandomString } from "../../util/random-string";
 const DEFAULT_FACTOR = 1;
 const DEFAULT_MAX_VALUE = 100;
 const DEFAULT_MIN_VALUE = 0;
+const MAX_VISIBLE_STEP_DOTS = 20;
 /**
  * @exampleComponent limel-example-slider-basic
  * @exampleComponent limel-example-slider-multiplier
  * @exampleComponent limel-example-slider-multiplier-percentage-colors
+ * @exampleComponent limel-example-slider-unit
  * @exampleComponent limel-example-slider-composite
  */
 export class Slider {
@@ -59,24 +60,16 @@ export class Slider {
          * The minimum value allowed
          */
         this.valuemin = DEFAULT_MIN_VALUE;
-        this.renderRangeContainer = () => {
-            return (h("div", { class: "slider__content-range-container" }, h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)));
-        };
-        this.renderSliderContainer = (inputProps) => {
-            return (h("div", { class: {
-                    'mdc-slider': true,
-                    'mdc-slider--discrete': true,
-                    'mdc-slider--disabled': this.disabled || this.readonly,
-                } }, this.renderSliderInput(inputProps), this.renderTrack(), this.renderThumb()));
-        };
-        this.renderSliderInput = (inputProps) => {
-            return (h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-labelledby": this.labelId, "aria-describedby": this.helperText ? this.helperTextId : undefined, "aria-controls": this.helperText ? this.helperTextId : undefined }, inputProps)));
-        };
-        this.renderTrack = () => {
-            return (h("div", { class: "mdc-slider__track" }, h("div", { class: "mdc-slider__track--inactive" }), h("div", { class: "mdc-slider__track--active" }, h("div", { class: "mdc-slider__track--active_fill" }))));
-        };
-        this.renderThumb = () => {
-            return (h("div", { class: "mdc-slider__thumb" }, h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, h("div", { class: "mdc-slider__value-indicator" }, h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), h("div", { class: "mdc-slider__thumb-knob" })));
+        this.renderStepDots = (min, max) => {
+            if (!this.step) {
+                return;
+            }
+            const step = this.multiplyByFactor(this.step);
+            const count = Math.floor((max - min) / step) + 1;
+            if (count > MAX_VISIBLE_STEP_DOTS) {
+                return;
+            }
+            return Array.from({ length: count }, () => h("span", { class: "step-dot" }));
         };
         this.renderHelperLine = () => {
             if (!this.helperText) {
@@ -84,97 +77,31 @@ export class Slider {
             }
             return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
         };
-        this.initialize = () => {
-            const inputElement = this.getInputElement();
-            if (!inputElement) {
-                return;
-            }
-            const value = this.getValue();
-            /*
-            For some reason the input element's `value` attribute is removed
-            (probably by Stencil) when the element is first rendered. But if the
-            attribute is missing when MDCSlider is initialized (MDC v11.0.0),
-            MDCSlider crashes.
-            So we add the attribute right before initializing MDCSlider. /Ads
-            */
-            inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);
-            /*
-            When creating the `mdcSlider` component, its important that the value set in
-            the input field obeys the range and the step size.
-    
-            The MDCSlider will throw an exception unless the value in the input element
-            is dividible by the step value and is in the provided range.
-            If an exception occurs, this component will crash and it will be impossible to change
-            its value.
-            The logic below ensures that the component will render even though the
-            provided value is wrong.
-            This could be considered wrong, but it at least fixes so that it's possible
-            to change the value from the UI.
-            */
-            const greaterThanOrEqualMin = value >= this.valuemin;
-            const lessThanOrEqualMax = value <= this.valuemax;
-            if (!greaterThanOrEqualMin) {
-                const newMin = this.multiplyByFactor(value);
-                inputElement.setAttribute('min', `${newMin}`);
-            }
-            if (!lessThanOrEqualMax) {
-                const newMax = this.multiplyByFactor(value);
-                inputElement.setAttribute('max', `${newMax}`);
-            }
-            if (this.step) {
-                const step = this.multiplyByFactor(this.step);
-                const scaledValue = this.multiplyByFactor(value);
-                if (!this.isMultipleOfStep(scaledValue, step)) {
-                    const roundedValue = this.roundToStep(scaledValue, step);
-                    inputElement.setAttribute('value', `${roundedValue}`);
-                }
-                inputElement.setAttribute('step', `${step}`);
-            }
-            this.createMDCSlider();
-        };
-        this.reCreateSliderWithStep = () => {
-            const inputElement = this.getInputElement();
-            const step = `${this.multiplyByFactor(this.step)}`;
-            inputElement.setAttribute('step', step);
-            this.destroyMDCSlider();
-            this.createMDCSlider();
-        };
-        this.createMDCSlider = () => {
-            const element = this.getRootElement();
-            this.mdcSlider = new MDCSlider(element);
-            this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
-            this.mdcSlider.listen('MDCSlider:input', this.inputHandler);
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            const input = event.target;
+            const value = Number(input.value);
+            this.displayValue = value;
+            this.setPercentageClass(value / this.factor);
         };
-        this.changeHandler = (event) => {
-            let value = event.detail.value;
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            const input = event.target;
+            let value = Number(input.value);
             const step = this.multiplyByFactor(this.step);
             if (!this.isMultipleOfStep(value, step)) {
                 value = this.roundToStep(value, step);
             }
             this.change.emit(value / this.factor);
         };
-        this.inputHandler = (event) => {
-            this.setPercentageClass(event.detail.value / this.factor);
-        };
         this.getContainerClassList = () => {
+            if (!this.percentageClass) {
+                return {};
+            }
             return {
                 [this.percentageClass]: true,
-                'displays-percentage-colors': this.displaysPercentageColors,
-                disabled: this.disabled || this.readonly,
-                readonly: this.readonly,
             };
         };
-        this.resizeObserverCallback = () => {
-            var _a;
-            (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.layout();
-        };
-        this.updateDisabledState = () => {
-            var _a;
-            if (!this.mdcSlider) {
-                return;
-            }
-            (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || this.readonly);
-        };
         this.multiplyByFactor = (value) => {
             return Math.round(value * this.factor);
         };
@@ -185,6 +112,14 @@ export class Slider {
             }
             return value;
         };
+        this.getFraction = () => {
+            const min = this.multiplyByFactor(this.valuemin);
+            const max = this.multiplyByFactor(this.valuemax);
+            if (max === min) {
+                return 0;
+            }
+            return Math.max(0, Math.min(1, (this.displayValue - min) / (max - min)));
+        };
         this.setPercentageClass = (value) => {
             this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
         };
@@ -197,45 +132,17 @@ export class Slider {
         this.roundToStep = (value, step) => {
             return Math.round(value / step) * step;
         };
-        this.getRootElement = () => {
-            return this.rootElement.shadowRoot.querySelector('.mdc-slider');
-        };
-        this.getInputElement = () => {
-            const element = this.getRootElement();
-            if (!element) {
-                return;
-            }
-            return element.querySelector('input');
-        };
-        this.isStepConfigured = () => {
-            if (!this.step) {
-                return true;
-            }
-            const input = this.getInputElement();
-            if (!input) {
-                return true;
-            }
-            return input.hasAttribute('step');
-        };
         this.labelId = createRandomString();
         this.helperTextId = createRandomString();
     }
-    connectedCallback() {
-        this.initialize();
-        this.observer = new ResizeObserver(this.resizeObserverCallback);
-        this.observer.observe(this.rootElement);
-    }
     componentWillLoad() {
-        this.setPercentageClass(this.value);
-    }
-    componentDidLoad() {
-        this.initialize();
-    }
-    disconnectedCallback() {
-        this.destroyMDCSlider();
-        this.observer.disconnect();
+        this.displayValue = this.multiplyByFactor(this.getValue());
+        this.setPercentageClass(this.getValue());
     }
     render() {
+        const min = this.multiplyByFactor(this.valuemin);
+        const max = this.multiplyByFactor(this.valuemax);
+        const fraction = this.getFraction();
         const inputProps = {};
         if (this.step) {
             inputProps.step = this.multiplyByFactor(this.step);
@@ -243,34 +150,13 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: '4d8742b0c40d836b9cab61988cafc42e90843e31', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'a775070fe819f15542ad3ba4a2a3839bcf392051', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { key: 'f01ca4b8c2f71ef4ea7466aff58d821c484e20bc', slot: "content" }, this.renderRangeContainer(), this.renderSliderContainer(inputProps))), this.renderHelperLine()));
-    }
-    watchDisabled() {
-        this.updateDisabledState();
-    }
-    watchReadonly() {
-        this.updateDisabledState();
+        return (h(Host, { key: 'fa9695563f078bdab1707422cad3aaef2610e592', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '8b71ef15e9544a6b346248217c2c2fa8acbba6e7', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { key: '0327cf7d5295bb1d56e2e34b8dca15cfc3e15c0d', slot: "content" }, h("div", { key: '83fade77119ba9fa1d24ae8fdcd54317648918b3', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '5181430787abe75b4556923e31ebe8520df977e9', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
+                ? this.helperTextId
+                : undefined, onInput: this.handleInput, onChange: this.handleChange }, inputProps)), h("div", { key: '6ee95d718f1d01e92adcf9592882ed1d32e4ba67', class: "track" }, h("div", { key: 'bba420e41501990bdeb1326e59e6eff57000848d', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '46e5a45adbda4e1a650d01408c3d228f1c6be68d', class: "thumb" }, h("div", { key: 'eeba995f52ff3291e2e7818528b05c7c1dec1b32', class: "knob" }), h("div", { key: 'd0321459ed22c6870d939da54df43fe2bfef6333', class: "indicator", "aria-hidden": "true" }, this.displayValue))), h("div", { key: 'bcc4449d7605343fd64f4b89b50c8e5d665f6937', class: "range-labels" }, h("span", { key: '301c78b1640551fe814ad3b2768bb40f9b682b39', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '7f8d741f63030b6f8e88231e5215448b815bf3ca', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderHelperLine()));
     }
     watchValue() {
-        if (!this.mdcSlider) {
-            return;
-        }
-        const value = this.multiplyByFactor(this.getValue());
-        this.mdcSlider.setValue(value);
-        if (this.isStepConfigured()) {
-            return;
-        }
-        const step = this.multiplyByFactor(this.step);
-        if (!this.isMultipleOfStep(value, step)) {
-            return;
-        }
-        this.reCreateSliderWithStep();
-    }
-    destroyMDCSlider() {
-        this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);
-        this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);
-        this.mdcSlider.destroy();
-        this.mdcSlider = undefined;
+        this.displayValue = this.multiplyByFactor(this.getValue());
+        this.setPercentageClass(this.getValue());
     }
     static get is() { return "limel-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -546,7 +432,8 @@ export class Slider {
     }
     static get states() {
         return {
-            "percentageClass": {}
+            "percentageClass": {},
+            "displayValue": {}
         };
     }
     static get events() {
@@ -567,15 +454,8 @@ export class Slider {
                 }
             }];
     }
-    static get elementRef() { return "rootElement"; }
     static get watchers() {
         return [{
-                "propName": "disabled",
-                "methodName": "watchDisabled"
-            }, {
-                "propName": "readonly",
-                "methodName": "watchReadonly"
-            }, {
                 "propName": "value",
                 "methodName": "watchValue"
             }];

package/dist/collection/components/snackbar/snackbar.js

@@ -121,14 +121,14 @@ export class Snackbar {
         }
     }
     render() {
-        return (h("aside", { key: 'ea6276745563c7dd62d3061da0b1c6a41b3d1243', popover: "manual", style: {
+        return (h("aside", { key: '0c9605ecafcab256f9e1b2ac43b72c70695c1719', popover: "manual", style: {
                 '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
                 '--snackbar-distance-to-top-edge': `${this.offset}px`,
             }, class: {
                 open: this.open,
                 'is-closing': this.closing,
                 'limel-portal--parent': true,
-            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'd5c42448d07093b5df96a44a9bdf2842b4bf9a9f', class: "surface" }, h("div", { key: '93a9ea81726b0e309ae54ab23270562702b59104', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
+            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: '58b4d6d2f94be604273c46e0babccade357798ab', class: "surface" }, h("div", { key: '148001236225eb6980f3894151e04fd43037863e', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

package/dist/collection/components/spinner/spinner.js

@@ -16,7 +16,7 @@ export class Spinner {
         this.limeBranded = false;
     }
     render() {
-        return (h(Host, { key: '5d7275ec64f2e3b07c7e25065d8d115de772324e' }, h("svg", { key: '41e5110dc29d6112261bea4afbd8cffde213cde0', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (h(Host, { key: 'bb72728921dd48ab02cad031e3b35641c92b4dce' }, h("svg", { key: 'fccd59e394e3e4a0101d2e7f903b1b4f9dffc630', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
     }
     renderSpinner() {
         if (!this.limeBranded) {

package/dist/collection/components/split-button/split-button.js

@@ -55,9 +55,9 @@ export class SplitButton {
         };
     }
     render() {
-        return (h(Host, { key: 'c36360c226a10f303158e13033451541d4e232fd', class: {
+        return (h(Host, { key: '4ddbc6a1d81d69c50340512ed8a7112b2288fa3e', class: {
                 'has-menu': this.items.length > 0,
-            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: 'bc63b91941bfb71d090a04ff7dc46cf97d0c18e7', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
+            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '050586c28af81bc598021a602d4f274afd7a777b', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
     }
     static get is() { return "limel-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.js

@@ -78,7 +78,7 @@ export class Switch {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: '4b90d19763474c8a9f54364091797a3eb537fbc9' }, this.readonly
+        return (h(Host, { key: '4adc29ba50c4e06948efef7b922c0fb70bb58ecb' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -62,11 +62,11 @@ export class TabBar {
         this.tearDown();
     }
     render() {
-        return (h("div", { key: '764d28d7417c3c2801491c54d6c5db36b022adda', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: 'ee7a869e13069c2baac39b6abb8ac9f7353f8655', class: {
+        return (h("div", { key: '011bbe3e75ebeb4fefe4942704ef003ad64e92fc', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: '6119888fd94f5ea3d474c1a14016e456ff98923e', class: {
                 'mdc-tab-scroller': true,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, h("div", { key: '55a955d4686181d2ded9ae24b525e863a9c9514c', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: '005a0150e3f03b9f8ca4facd767e7e05b17b5689', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '68956d9c7c9d17e9b572014e4e865e20680fbc98', class: "scroll-fade left" }), h("div", { key: '268c2616ff24edf6959931a324f9b242eec28a87', class: "scroll-button left" }, h("button", { key: '4a7f75826b7344ba6f88de784a2c9928c0779cd0', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '7d2e61ed0001a17a51aa71064f58f5c40692c4b7', name: "angle_left" }))), h("div", { key: 'dce1d143623bcdf84607428e205dc88d7b9a16d7', class: "scroll-fade right" }), h("div", { key: 'bc6f06e98950256a67748095999d676173871b2f', class: "scroll-button right" }, h("button", { key: '1b5aac1ebd4dea1d2eff4d88b154c62d87a353c1', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: '022f900f20506369ffa79a045e144fcb213f4006', name: "angle_right" }))))));
+            } }, h("div", { key: 'ac46f8471cbdbaec95bed2d5541d6f927eee0fb7', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: 'a12f6a5112ff94c5c70a6800972e81998fd51517', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '2891ceddace39d210b314c203bdaaf1cf50257da', class: "scroll-fade left" }), h("div", { key: '52d16debe5cba91b876d2c1ebc3fa0b65554193c', class: "scroll-button left" }, h("button", { key: 'a9c6c3bc7027e7dfcfdc999f542911533d2ad97d', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '6d910230e3e7182c0431508603f97a8da195454f', name: "angle_left" }))), h("div", { key: '47ab1002864f2603fcaee518c5cf8604512a5294', class: "scroll-fade right" }), h("div", { key: 'cebdcc16ed78ecbeafcf4bfbc9e1c59277f3c959', class: "scroll-button right" }, h("button", { key: 'd35caa827d3f4218537f91522cfe1b4b85d0de29', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: '875ee1bfc8a28a6fbed1d6323974f732f5d3274e', name: "angle_right" }))))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);

package/dist/collection/components/tab-panel/tab-panel.js

@@ -56,7 +56,7 @@ export class TabPanel {
         this.tabs.forEach(this.setTabStatus);
     }
     render() {
-        return (h(Host, { key: '831b5534fb89f2892ede144fdbdd9747e4e8ef83', onChangeTab: this.handleChangeTabs }, h("div", { key: '7215d031f6558985ce6d7b3b5ee0d0d57b546e4b', class: "tab-panel" }, h("limel-tab-bar", { key: '4891c70a6aa19357a19c8a08c207ffae1ee1ce73', tabs: this.tabs }), h("div", { key: 'e682144fba03c72a220e57de4668f83690b54572', class: "tab-content" }, h("slot", { key: '192b28283d6aa49d27fbe31395728441e34cb252' })))));
+        return (h(Host, { key: 'ebab881a0b0efc36b64c866b58b919890c526525', onChangeTab: this.handleChangeTabs }, h("div", { key: '1417a34aea0af009e44cd91ac8fd425412a2b706', class: "tab-panel" }, h("limel-tab-bar", { key: '5b420eeec41fdd353ba0ba36bb0e475c3fd26821', tabs: this.tabs }), h("div", { key: 'aa3d6f711a824a07eed6f2b5120497dd4218ed7b', class: "tab-content" }, h("slot", { key: '7ba511fa07bd96018e4d8d288d7b1dca572cead0' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();

package/dist/collection/components/table/table.js

@@ -578,16 +578,16 @@ export class Table {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: '06e9aec7ea04c3acc5de284f0c2a0c6dce22f859', class: {
+        return (h(Host, { key: '83aff83d2e82d2b6bb71cca08a0f9532f084edf7', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
-            } }, h("div", { key: 'b03936f9ac33f82c6fe9c92da82eb73b4ecb552b', id: "tabulator-container", class: {
+            } }, h("div", { key: '159ef3258158b9987c2023612bc9975163253d91', id: "tabulator-container", class: {
                 'has-pagination': totalRows > this.pageSize,
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-movable-columns': this.movableColumns,
                 'has-rowselector': this.selectable,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: '645d50bd392a0486351b6643dd6a2183dd36f417', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '19114065dfa74f82af84f3ed78c9830e621baaf4', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '68cb8e0809f9dfc69ec25dc6e8a93182d881cd18', id: "tabulator-table" }))));
+            } }, h("div", { key: '74fbcc4af5ee32f05f19987127f1c26c71794cd3', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'b9da01750a35d99e2ea2f6ba024c5a3b25ac1aef', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: 'dc3936c5ea3999ded14c4929ad7a03eef11418b1', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;

package/dist/collection/components/text-editor/link-menu/editor-link-menu.js

@@ -106,9 +106,9 @@ export class TextEditorLinkMenu {
         var _a, _b;
         const isValid = this.isValid(this.link.href);
         return [
-            h("limel-input-field", { key: '76061c2cec6ffe2b1c37b19bed1c5db5c2792e88', label: this.getTranslation('editor-link-menu.text'), value: ((_a = this.link) === null || _a === void 0 ? void 0 : _a.text) || '', leadingIcon: "text_cursor", onChange: this.handleLinkTitleChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textInput = el) }),
-            h("limel-input-field", { key: '3583c4a38a5cb78d75747ff846f1ca09166d4d72', label: this.getTranslation('editor-link-menu.link'), value: ((_b = this.link) === null || _b === void 0 ? void 0 : _b.href) || '', type: "text", leadingIcon: "-lime-text-link", trailingIcon: "external_link", invalid: !isValid, onChange: this.handleLinkValueChange, onAction: this.handleLinkInputAction, onKeyDown: this.handleKeyDown }),
-            h("div", { key: 'c352df81c4e8e561242e981f9df0e8bb0a5acd9e', class: "actions" }, h("limel-button", { key: '8c2742b66c594c1713a82e2290aa51af04b25df8', label: this.getTranslation('cancel'), onClick: this.handleCancel }), h("limel-button", { key: '99f1e41709ea974fbe3a841bbe3637050a94a24f', primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
+            h("limel-input-field", { key: 'f91dd3a9c03bb52cb91ea0f3251288f5a612cd3a', label: this.getTranslation('editor-link-menu.text'), value: ((_a = this.link) === null || _a === void 0 ? void 0 : _a.text) || '', leadingIcon: "text_cursor", onChange: this.handleLinkTitleChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textInput = el) }),
+            h("limel-input-field", { key: '1034663268cae0a749397331b43ea44387431c78', label: this.getTranslation('editor-link-menu.link'), value: ((_b = this.link) === null || _b === void 0 ? void 0 : _b.href) || '', type: "text", leadingIcon: "-lime-text-link", trailingIcon: "external_link", invalid: !isValid, onChange: this.handleLinkValueChange, onAction: this.handleLinkInputAction, onKeyDown: this.handleKeyDown }),
+            h("div", { key: '5c4b46deb47d9369a0a59e1e5908934093322755', class: "actions" }, h("limel-button", { key: '62c2dcc49a7907d938a27e2887432caa3e1a75ff', label: this.getTranslation('cancel'), onClick: this.handleCancel }), h("limel-button", { key: '5252752da58d02fd81abef41fc9788a07e277738', primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
         ];
     }
     static get is() { return "limel-text-editor-link-menu"; }

package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css

@@ -318,19 +318,25 @@ li {
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
+pre,
+pre p,
 code {
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
-  font-size: var(--limel-theme-default-small-font-size);
+  font-size: 0.75rem;
+}
+
+pre {
+  max-width: 100%;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+code {
   letter-spacing: -0.0125rem;
   color: rgb(var(--contrast-1300));
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
-  display: inline-block;
+  display: inline;
   border-radius: 0.25rem;
   padding: 0.03125rem 0.25rem;
   background-color: rgb(var(--contrast-600));
@@ -340,8 +346,6 @@ pre > code {
   display: block;
   margin: 0.5rem 0;
   padding: 0.5rem 0.75rem;
-  overflow: auto;
-  white-space: pre-wrap;
 }
 
 :host(limel-markdown:not(.no-table-styles)) table {

package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js

@@ -246,7 +246,7 @@ export class ProsemirrorAdapter {
         (_e = this.view) === null || _e === void 0 ? void 0 : _e.destroy();
     }
     render() {
-        return (h(Host, { key: '2f17d3935ed3c9d7a7191b3b4cd85bb1c2a4ac32', onFocus: this.handleFocus }, h("div", { key: '328602696f29dbbe89cee0c535f2efddf92c2a20', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
+        return (h(Host, { key: '125d6d80cfc94a3121cde5d121d3cb2a26cf1635', onFocus: this.handleFocus }, h("div", { key: 'eb076afa683c0dfcb57b6688bc94ce1b81ce5710', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
     }
     renderToolbar() {
         if (this.actionBarItems.length === 0 || this.ui === 'no-toolbar') {

package/dist/collection/components/text-editor/text-editor.js

@@ -142,7 +142,7 @@ export class TextEditor {
         this.editorId = createRandomString();
     }
     render() {
-        return (h(Host, { key: '5c901a284efe050bd17b56bb56ce053022b8c6f4' }, h("limel-notched-outline", { key: 'e6d0dbf1ca9af78cff86c0a227d4da030619ab33', labelId: this.editorId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, this.renderEditor(), this.renderPlaceholder()), this.renderHelperLine()));
+        return (h(Host, { key: '31661aea27e0dea61827560c031587bd208f8bed' }, h("limel-notched-outline", { key: '81571a171ba0b629117d8b153e091e6d34c98c70', labelId: this.editorId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, this.renderEditor(), this.renderPlaceholder()), this.renderHelperLine()));
     }
     renderEditor() {
         if (this.readonly) {

package/dist/collection/components/tooltip/tooltip-content.js

@@ -18,7 +18,7 @@ export class TooltipContent {
             };
         }
         return [
-            h("text", Object.assign({ key: '5f6cde48d57c7c5b680055314f3b6d082ff37b5a', class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { key: 'ebfc96849d68c4db09e7be7b3d86e12d3937a5d9', class: "label" }, this.label), h("div", { key: 'a2730d9d13111bd949fc1a2795b785c217f800f8', class: "helper-label" }, this.helperLabel)),
+            h("text", Object.assign({ key: '14fbfda34a833644fd73cbfabb4e481ab5979c69', class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { key: '672c23e4d0f992395a422f684436ffb18720bd12', class: "label" }, this.label), h("div", { key: '132cffce86c4cd1a274ffbfd3d0ec1bfb9c3c073', class: "helper-label" }, this.helperLabel)),
         ];
     }
     static get is() { return "limel-tooltip-content"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -78,10 +78,10 @@ export class Tooltip {
     }
     render() {
         const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-        return (h("div", { key: '93e90be597ba45e4063a9a7a689783f31a3b5871', class: "trigger-anchor" }, h("limel-portal", { key: '94cdcde46fc3f172e194894d0546cf96bce35623', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
+        return (h("div", { key: 'ffc3b079a0fcb1a4065c176228d720c64ca57d2e', class: "trigger-anchor" }, h("limel-portal", { key: 'e18fa14f5c328485f6755bc62c402c16d6dd0fd1', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
                 'z-index': tooltipZIndex,
                 'pointer-events': 'none',
-            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: 'd24de90d827c87b1e8fd2c10142fc34bcd498774', label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: 'cc3a5f98a22082b4e8c2d0ec6bd71d5cf5770c0a', label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
     }
     setOwnerAriaLabel() {
         var _a;