le-kit 0.5.2 → 0.5.3

package/dist/cjs/le-multiselect.cjs.entry.js

@@ -10,82 +10,152 @@ const LeMultiselect = class {
         this.leChange = index.createEvent(this, "leChange");
         this.leOpen = index.createEvent(this, "leOpen");
         this.leClose = index.createEvent(this, "leClose");
+        /**
+         * The options to display in the dropdown.
+         */
+        this.options = [];
+        /**
+         * The currently selected values.
+         */
+        this.value = [];
+        /**
+         * Placeholder text when no options are selected.
+         */
+        this.placeholder = 'Select options...';
+        /**
+         * Whether the multiselect is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether selection is required.
+         */
+        this.required = false;
+        /**
+         * Whether the multiselect should take full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant of the multiselect.
+         */
+        this.size = 'medium';
+        /**
+         * Labels for the "Select All" option.
+         */
+        this.selectAllLabel = 'Select All';
+        this.deselectAllLabel = 'Deselect All';
+        /**
+         * Whether to show a "Select All" option.
+         * Also accepts a string or array of strings to customize the label(s).
+         */
+        this.showSelectAll = false;
+        /**
+         * Whether the input is searchable.
+         */
+        this.searchable = false;
+        /**
+         * Text to show when no options match the search.
+         */
+        this.emptyText = 'No results found';
+        /**
+         * Whether the dropdown is currently open.
+         */
+        this.open = false;
+        this.selectedOptions = [];
+        this.searchQuery = '';
+        this.filterOption = (option, query) => {
+            if (!query)
+                return true;
+            // Always show "Select All" option
+            if (option.value === '__select_all__')
+                return true;
+            const searchLower = query.toLowerCase();
+            return (option.label.toLowerCase().includes(searchLower) ||
+                (option.description?.toLowerCase().includes(searchLower) ?? false));
+        };
+        this.handleOptionSelect = (e) => {
+            const { value } = e.detail;
+            const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);
+            if (enabledOptions.length === 0)
+                return;
+            // Handle "Select All" option
+            if (value === '__select_all__') {
+                if (this.selectedOptions.length === enabledOptions.length) {
+                    // Deselect all
+                    this.value = [];
+                }
+                else {
+                    // Select all (respect maxSelections)
+                    const selectableOptions = this.maxSelections
+                        ? enabledOptions.slice(0, this.maxSelections)
+                        : enabledOptions;
+                    this.value = selectableOptions.map(opt => opt.value ?? opt.label);
+                }
+                this.emitChange();
+                return;
+            }
+            const isSelected = this.value.includes(value);
+            if (isSelected) {
+                // Remove from selection
+                this.value = this.value.filter(v => v !== value);
+                this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);
+            }
+            else {
+                // Add to selection (if not at max)
+                if (this.maxSelections && this.value.length >= this.maxSelections) {
+                    return; // Don't add more
+                }
+                this.value = [...this.value, value];
+            }
+            this.emitChange();
+            // Clear search after szelection
+            this.searchQuery = '';
+        };
+        this.handleDropdownOpen = () => {
+            this.open = true;
+            this.leOpen.emit();
+            // Focus search input if searchable
+            if (this.searchable) {
+                setTimeout(() => {
+                    this.inputEl?.focus();
+                }, 50);
+            }
+        };
+        this.handleDropdownClose = () => {
+            this.open = false;
+            this.searchQuery = '';
+            this.leClose.emit();
+        };
+        this.handleTriggerClick = () => {
+            if (!this.disabled) {
+                this.dropdownEl?.toggle();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.dropdownEl?.show();
+            }
+        };
+        this.handleTagDismiss = (option, e) => {
+            e.stopPropagation();
+            const value = option.value ?? option.label;
+            this.value = this.value.filter(v => v !== value);
+            this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);
+            this.emitChange();
+        };
+        this.handleSearchInput = (e) => {
+            const target = e.target;
+            this.searchQuery = target.value;
+        };
+        this.handleClearAll = (e) => {
+            e.stopPropagation();
+            this.value = [];
+            this.selectedOptions = [];
+            this.emitChange();
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * The options to display in the dropdown.
-     */
-    options = [];
-    /**
-     * The currently selected values.
-     */
-    value = [];
-    /**
-     * Placeholder text when no options are selected.
-     */
-    placeholder = 'Select options...';
-    /**
-     * Whether the multiselect is disabled.
-     */
-    disabled = false;
-    /**
-     * Whether selection is required.
-     */
-    required = false;
-    /**
-     * Name attribute for form submission.
-     */
-    name;
-    /**
-     * Whether the multiselect should take full width of its container.
-     */
-    fullWidth = false;
-    /**
-     * Size variant of the multiselect.
-     */
-    size = 'medium';
-    /**
-     * Maximum number of selections allowed.
-     */
-    maxSelections;
-    /**
-     * Labels for the "Select All" option.
-     */
-    selectAllLabel = 'Select All';
-    deselectAllLabel = 'Deselect All';
-    /**
-     * Whether to show a "Select All" option.
-     * Also accepts a string or array of strings to customize the label(s).
-     */
-    showSelectAll = false;
-    /**
-     * Whether the input is searchable.
-     */
-    searchable = false;
-    /**
-     * Text to show when no options match the search.
-     */
-    emptyText = 'No results found';
-    /**
-     * Whether the dropdown is currently open.
-     */
-    open = false;
-    /**
-     * Emitted when the selected values change.
-     */
-    leChange;
-    /**
-     * Emitted when the dropdown opens.
-     */
-    leOpen;
-    /**
-     * Emitted when the dropdown closes.
-     */
-    leClose;
-    selectedOptions = [];
-    searchQuery = '';
-    dropdownEl;
-    inputEl;
     handleValueChange() {
         this.updateSelectedOptions();
     }
@@ -158,105 +228,12 @@ const LeMultiselect = class {
         const valueArray = Array.isArray(this.value) ? this.value : [];
         this.selectedOptions = this.parsedOptions.filter(opt => valueArray.includes(opt.value ?? opt.label));
     }
-    filterOption = (option, query) => {
-        if (!query)
-            return true;
-        // Always show "Select All" option
-        if (option.value === '__select_all__')
-            return true;
-        const searchLower = query.toLowerCase();
-        return (option.label.toLowerCase().includes(searchLower) ||
-            (option.description?.toLowerCase().includes(searchLower) ?? false));
-    };
-    handleOptionSelect = (e) => {
-        const { value } = e.detail;
-        const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);
-        if (enabledOptions.length === 0)
-            return;
-        // Handle "Select All" option
-        if (value === '__select_all__') {
-            if (this.selectedOptions.length === enabledOptions.length) {
-                // Deselect all
-                this.value = [];
-            }
-            else {
-                // Select all (respect maxSelections)
-                const selectableOptions = this.maxSelections
-                    ? enabledOptions.slice(0, this.maxSelections)
-                    : enabledOptions;
-                this.value = selectableOptions.map(opt => opt.value ?? opt.label);
-            }
-            this.emitChange();
-            return;
-        }
-        const isSelected = this.value.includes(value);
-        if (isSelected) {
-            // Remove from selection
-            this.value = this.value.filter(v => v !== value);
-            this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);
-        }
-        else {
-            // Add to selection (if not at max)
-            if (this.maxSelections && this.value.length >= this.maxSelections) {
-                return; // Don't add more
-            }
-            this.value = [...this.value, value];
-        }
-        this.emitChange();
-        // Clear search after szelection
-        this.searchQuery = '';
-    };
     emitChange() {
         this.leChange.emit({
             values: this.value,
             options: this.selectedOptions,
         });
     }
-    handleDropdownOpen = () => {
-        this.open = true;
-        this.leOpen.emit();
-        // Focus search input if searchable
-        if (this.searchable) {
-            setTimeout(() => {
-                this.inputEl?.focus();
-            }, 50);
-        }
-    };
-    handleDropdownClose = () => {
-        this.open = false;
-        this.searchQuery = '';
-        this.leClose.emit();
-    };
-    handleTriggerClick = () => {
-        if (!this.disabled) {
-            this.dropdownEl?.toggle();
-        }
-    };
-    handleTriggerKeyDown = (e) => {
-        if (this.disabled)
-            return;
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.dropdownEl?.show();
-        }
-    };
-    handleTagDismiss = (option, e) => {
-        e.stopPropagation();
-        const value = option.value ?? option.label;
-        this.value = this.value.filter(v => v !== value);
-        this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);
-        this.emitChange();
-    };
-    handleSearchInput = (e) => {
-        const target = e.target;
-        this.searchQuery = target.value;
-    };
-    handleClearAll = (e) => {
-        e.stopPropagation();
-        this.value = [];
-        this.selectedOptions = [];
-        this.emitChange();
-    };
     /**
      * Opens the dropdown.
      */
@@ -286,14 +263,15 @@ const LeMultiselect = class {
     render() {
         const hasSelections = this.selectedOptions.length > 0;
         const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
-        return (index.h("le-component", { key: 'e6183adb112775737e6a7f47b0be614a76a1c110', component: "le-multiselect" }, index.h("le-dropdown-base", { key: 'ee8ba9e02608a5c26d8a8b0a659e89e5631f3f6a', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, index.h("div", { key: '4c87bf167dd876476dae3b0259cda2f28e3787a5', slot: "trigger", class: {
+        return (index.h("le-component", { key: 'b22fd0273666745ad4dcfaf5692102d4cbc1946c', component: "le-multiselect" }, index.h("le-dropdown-base", { key: 'e81736ecb7e4b50fe9d8ea19460271a705baeb80', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, index.h("div", { key: 'cd3e45b676ee7b90c82ae0b2c18684d89bb3f3f8', slot: "trigger", class: {
                 'multiselect-trigger': true,
                 'has-selections': hasSelections,
                 'is-open': this.open,
                 'is-disabled': this.disabled,
-            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), index.h("div", { key: 'be629671c75d408127edb480df54c6649e28ca2a', class: "multiselect-actions" }, hasSelections && !this.disabled && (index.h("button", { key: '67f4c2152e4b2f8f52b8b98093fbb238571f6105', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, index.h("svg", { key: '5894bfb10a310a29f21c865323b2175cde05173e', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '50f7445b3627bf110a899dbba2b5f7244d706a49', d: "M4 4l8 8M12 4l-8 8" })))), index.h("span", { key: '58ef10834f74ce5b21b675b47a4c2a96df4bd173', class: "multiselect-arrow" }, index.h("svg", { key: '74a20681e12aff0295c219c8ff8f953908aa9a94', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '8e48c5333f7f3035e4c4f80f7c3507e5d3d4caaa', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (index.h("div", { key: '906f9596d6a0da2840d534570d38ea008d7cdb4b', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: 'ccd7f1b2594be3440adb16ef5c001beaa5547396', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
-            this.value.map(val => (index.h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (index.h("span", { key: 'c329c06d0e00a1516c9d3323ad4a83b81a205f13', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
+            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), index.h("div", { key: 'dfcb6b8397aec56be4588421b7545ae6caae31b2', class: "multiselect-actions" }, hasSelections && !this.disabled && (index.h("button", { key: '3ddd374aa458784d7d19f52966ee4f4fa5ca93f1', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, index.h("svg", { key: '1687f1af7277b8489c6de841891439d5f4c77483', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '864debd4e5ce7f93338bea67f24c1c43e63a4dc3', d: "M4 4l8 8M12 4l-8 8" })))), index.h("span", { key: '6d2fa2b5aaa3970068d40e4ec4db7c7809dc85cd', class: "multiselect-arrow" }, index.h("svg", { key: '2fb670f75e9d9ba726c320cfeb6b8d31dd3a6ac4', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '70429d2d874f30a2a55ac57bf4d758663c048893', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (index.h("div", { key: '1224afb258731403d9c95888b8b3b8fc0f0c1b03', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: 'b8d592186887238ea1acbf5db8d8f9c9cca0656f', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
+            this.value.map(val => (index.h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (index.h("span", { key: 'c47d74d5f40c30881e6b8bb35dafe80be85ee41a', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["handleValueChange"],
         "options": ["handleOptionsChange"],

package/dist/cjs/le-number-input.cjs.entry.js

@@ -10,73 +10,94 @@ const LeNumberInput = class {
         index.registerInstance(this, hostRef);
         this.leChange = index.createEvent(this, "leChange");
         this.leInput = index.createEvent(this, "leInput");
+        /**
+         * Step value for increment/decrement
+         */
+        this.step = 1;
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is read-only
+         */
+        this.readonly = false;
+        /**
+         * Whether to show the spinner controls
+         */
+        this.showSpinners = true;
+        /**
+         * Internal validation state
+         */
+        this.isValid = true;
+        this.validationMessage = '';
+        this.handleInput = (ev) => {
+            const input = ev.target;
+            const val = parseFloat(input.value);
+            if (input.value === '') {
+                this.value = undefined;
+            }
+            else if (!isNaN(val)) {
+                this.value = val;
+            }
+            this.validate();
+            this.emitInput();
+        };
+        this.handleChange = () => {
+            this.validate();
+            this.emitChange();
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            let multiplier = 1;
+            if (ev.shiftKey)
+                multiplier = 10;
+            if (ev.altKey)
+                multiplier = 0.1;
+            const current = this.value || 0;
+            if (ev.key === 'ArrowUp') {
+                ev.preventDefault();
+                this.updateValue(current + (this.step * multiplier));
+            }
+            else if (ev.key === 'ArrowDown') {
+                ev.preventDefault();
+                this.updateValue(current - (this.step * multiplier));
+            }
+        };
+        this.handleWheel = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            // Only handle if input is focused to prevent accidental scrolling
+            if (document.activeElement !== ev.target)
+                return;
+            ev.preventDefault();
+            const current = this.value || 0;
+            if (ev.deltaY < 0) {
+                this.updateValue(current + this.step);
+            }
+            else {
+                this.updateValue(current - this.step);
+            }
+        };
+        this.increment = (ev) => {
+            ev.preventDefault(); // Prevent focus loss
+            const current = this.value || 0;
+            this.updateValue(current + this.step);
+            // Trigger change event for buttons as they are "final" actions usually
+            this.emitChange();
+        };
+        this.decrement = (ev) => {
+            ev.preventDefault();
+            const current = this.value || 0;
+            this.updateValue(current - this.step);
+            this.emitChange();
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * The value of the input
-     */
-    value;
-    /**
-     * The name of the input
-     */
-    name;
-    /**
-     * Label for the input
-     */
-    label;
-    /**
-     * Placeholder text
-     */
-    placeholder;
-    /**
-     * Minimum allowed value
-     */
-    min;
-    /**
-     * Maximum allowed value
-     */
-    max;
-    /**
-     * Step value for increment/decrement
-     */
-    step = 1;
-    /**
-     * Whether the input is required
-     */
-    required = false;
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the input is read-only
-     */
-    readonly = false;
-    /**
-     * Icon for the start icon
-     */
-    iconStart;
-    /**
-     * Whether to show the spinner controls
-     */
-    showSpinners = true;
-    /**
-     * External ID for linking with external systems
-     */
-    externalId;
-    /**
-     * Internal validation state
-     */
-    isValid = true;
-    validationMessage = '';
-    /**
-     * Emitted when the value changes (on blur or Enter)
-     */
-    leChange;
-    /**
-     * Emitted when the input value changes (on keystroke/spin)
-     */
-    leInput;
     valueChanged() {
         this.validate();
     }
@@ -127,71 +148,10 @@ const LeNumberInput = class {
         this.validate();
         this.emitInput();
     }
-    handleInput = (ev) => {
-        const input = ev.target;
-        const val = parseFloat(input.value);
-        if (input.value === '') {
-            this.value = undefined;
-        }
-        else if (!isNaN(val)) {
-            this.value = val;
-        }
-        this.validate();
-        this.emitInput();
-    };
-    handleChange = () => {
-        this.validate();
-        this.emitChange();
-    };
-    handleKeyDown = (ev) => {
-        if (this.disabled || this.readonly)
-            return;
-        let multiplier = 1;
-        if (ev.shiftKey)
-            multiplier = 10;
-        if (ev.altKey)
-            multiplier = 0.1;
-        const current = this.value || 0;
-        if (ev.key === 'ArrowUp') {
-            ev.preventDefault();
-            this.updateValue(current + (this.step * multiplier));
-        }
-        else if (ev.key === 'ArrowDown') {
-            ev.preventDefault();
-            this.updateValue(current - (this.step * multiplier));
-        }
-    };
-    handleWheel = (ev) => {
-        if (this.disabled || this.readonly)
-            return;
-        // Only handle if input is focused to prevent accidental scrolling
-        if (document.activeElement !== ev.target)
-            return;
-        ev.preventDefault();
-        const current = this.value || 0;
-        if (ev.deltaY < 0) {
-            this.updateValue(current + this.step);
-        }
-        else {
-            this.updateValue(current - this.step);
-        }
-    };
-    increment = (ev) => {
-        ev.preventDefault(); // Prevent focus loss
-        const current = this.value || 0;
-        this.updateValue(current + this.step);
-        // Trigger change event for buttons as they are "final" actions usually
-        this.emitChange();
-    };
-    decrement = (ev) => {
-        ev.preventDefault();
-        const current = this.value || 0;
-        this.updateValue(current - this.step);
-        this.emitChange();
-    };
     render() {
-        return (index.h("le-component", { key: '38670cabc16dd9a966a5f430e1d4d5e2fc618744', component: "le-number-input", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '473450ef637fa744c7a83416beabd87fe9540436', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'c74d4166c1925f02c743dc1250b574a679415ae8', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '9066bfe0737700717bf902f46a6a6fa51b22a3a1', class: utils.classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (index.h("span", { key: 'dcabeda7256fc25dc8bacd4ecbd2cc2941ea02d7', class: "icon-start" }, this.iconStart)), index.h("input", { key: '85d9040a37f4f5cf5c8c403dd58a3b1e9947d21d', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (index.h("div", { key: '9a197fc41798ff09b5618f5fb901b51ca2581d28', class: "le-input-controls" }, index.h("le-button", { key: '8befc86b373c03417ba87110d4092c8f6bf2f19c', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, index.h("span", { key: '70b53c26b9e061cd747bd1ccaa39d14c4ac69b68', slot: "icon-only" }, "\u2191")), index.h("le-button", { key: '3f9f65048977127cc2faaf911b9db6861005e17d', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, index.h("span", { key: 'ecbdfd9a72b357b1daca7be54ba5188795a44929', slot: "icon-only" }, "\u2193"))))), !this.isValid && index.h("div", { key: '41b7315c03d7caba36a535375e6a4774f9ff82b9', class: "le-input-error" }, this.validationMessage), index.h("div", { key: '3eda10b4e02add4dd780f6b51b5fd9565882dba8', class: "le-input-description" }, index.h("le-slot", { key: '7f9d9e5299dde3bc2f003687830f6d26d9f234b1', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: 'a80e340b5ba3c4b84e6d684156ccdfae106d6fc0', name: "description" }))))));
+        return (index.h("le-component", { key: '3448b68633e7ebde8e6175f29047791c9094dc49', component: "le-number-input", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: 'd941698c42e2dd9a5b2dbe60decfa9692c840c1a', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'c2b255bf365937e2233835ef6564b81f8a1872a5', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '6090fe6737015bc1cd87ef881276975870e6797c', class: utils.classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (index.h("span", { key: 'e453aa8eb57857540b29d78c3f61ec371be6c71a', class: "icon-start" }, this.iconStart)), index.h("input", { key: '3e9d52dbfcc1bac000e0ca9663595aaac8f42d85', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (index.h("div", { key: 'dd4e42f8a9916574e61643dbe90bae50e2defb77', class: "le-input-controls" }, index.h("le-button", { key: '5aa823b516f6f71a26b5749959dec30fac2b65b3', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, index.h("span", { key: 'c1858ce8cf23de1610ac6e957bd40ec2fe7a97ea', slot: "icon-only" }, "\u2191")), index.h("le-button", { key: '71982d4f725dc9a94144033e2b328f33699264e4', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, index.h("span", { key: '0c5225558cf4adf80e63dcfafe1bb83d80fbb7dd', slot: "icon-only" }, "\u2193"))))), !this.isValid && index.h("div", { key: 'd97bc87f564b9a23dac85b518895e7ffcbd72aa8', class: "le-input-error" }, this.validationMessage), index.h("div", { key: '257757f47a84f40c48e98672d6217ec565f37cce', class: "le-input-description" }, index.h("le-slot", { key: '89c69d0be6c3ef9975d2b2ab21f65c916067d452', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '9dffb85d1c8e2463d05a514b1659d0ac3eee802e', name: "description" }))))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["valueChanged"]
     }; }

package/dist/cjs/le-round-progress.cjs.entry.js

@@ -7,27 +7,21 @@ const leRoundProgressCss = () => `.round-progress--container{position:relative}.
 const LeRoundProgress = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        // progress value coming from an attribute
+        this.value = 0;
+        // padding value coming from an attribute
+        this.padding = 0;
     }
-    get el() { return index.getElement(this); }
-    // progress value coming from an attribute
-    value = 0;
     updateValue(newValue) {
         this.value = parseFloat(newValue);
     }
-    // padding value coming from an attribute
-    padding = 0;
     updatePadding(newValue) {
         this.padding = parseFloat(newValue);
         this.calcParams();
     }
-    // the progress backgrounds can be as many as needed
-    // but it should be JSON format: double quotes and strict commas
-    paths;
     updateProgressBackgrounds(newValue) {
         this.progressPaths = JSON.parse(newValue);
     }
-    progressPaths;
-    params;
     /**
      * Component lifecycles
      *
@@ -92,8 +86,9 @@ const LeRoundProgress = class {
         return (index.h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
     }
     render() {
-        return (index.h("div", { key: 'dd678c7e3ff93c60f9eb6c2c09cbf1eab963ec69', class: "round-progress--container" }, this.getPaths(), index.h("svg", { key: '4a7fc03af132741d9bcddb10d94db800a51e53bc', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, index.h("path", { key: 'd3091d22a5c5e696d0e58748f880471d99f4ac4d', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), index.h("slot", { key: '8dabb64461b68928e1e58c48dcaec84f504d4639' })));
+        return (index.h("div", { key: '5a51e57f587b1c065bc63091a4d824006ffb0547', class: "round-progress--container" }, this.getPaths(), index.h("svg", { key: '12ca2118e9f5ff3dc472f1d20a4a4d4dbd3b97c0', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, index.h("path", { key: '7fb75f5b03fe34d4a0f9ecdba94db95ba59a7756', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), index.h("slot", { key: 'a855a01d4332479f6488d1e7a7760d70e29eb707' })));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["updateValue"],
         "padding": ["updatePadding"],