le-kit 0.5.3 → 0.6.0

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

@@ -1,282 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DFTm5BqT.js';
-
-const leMultiselectCss = () => `:host{display:inline-block;min-width:250px;--le-multiselect-min-height:0;--le-multiselect-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);--le-multiselect-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}.multiselect-trigger{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;min-height:var(--le-multiselect-min-height);padding:var(--le-multiselect-padding);line-height:var(--le-line-height-tight);background:var(--le-multiselect-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);border-radius:var(--le-multiselect-border-radius, 0.375rem);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.multiselect-trigger:hover:not(.is-disabled),:host(:focus-within) .multiselect-trigger:not(.is-disabled){border-color:var(--le-multiselect-border-color)}:host(:focus-within) .multiselect-trigger{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([full-width]){width:100%}.multiselect-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.multiselect-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.multiselect-placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.multiselect-tags{display:flex;flex-wrap:wrap;gap:0.25rem;flex:1;min-width:0}.multiselect-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.multiselect-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:transparent;color:var(--le-color-primary, #3b82f6);border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.multiselect-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.multiselect-clear svg{width:0.875rem;height:0.875rem}.multiselect-arrow{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1rem;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.multiselect-arrow svg{width:1rem;height:1rem}.multiselect-trigger.is-open .multiselect-arrow{transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}.multiselect-status{display:block;margin-top:0.25rem;font-size:0.75rem;color:var(--le-color-text-muted, #6b7280)}:host([size='small']) .multiselect-trigger{--le-multiselect-min-height:2rem;--le-multiselect-padding:0.25rem 0.375rem;--le-multiselect-font-size:0.75rem}:host([size='large']) .multiselect-trigger{--le-multiselect-min-height:3rem;--le-multiselect-padding:0.5rem 0.625rem;--le-multiselect-font-size:1rem}`;
-
-const LeMultiselect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "leChange");
-        this.leOpen = createEvent(this, "leOpen");
-        this.leClose = 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();
-        };
-    }
-    handleValueChange() {
-        this.updateSelectedOptions();
-    }
-    handleOptionsChange() {
-        this.updateSelectedOptions();
-    }
-    handleShowSelectAllChange(newValue) {
-        if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {
-            this.showSelectAll = false;
-        }
-        else if (typeof newValue === 'boolean') {
-            this.showSelectAll = newValue;
-        }
-        else if (Array.isArray(newValue)) {
-            this.showSelectAll = true;
-            this.selectAllLabel = newValue[0];
-            this.deselectAllLabel = newValue[1] || newValue[0];
-        }
-        else if (typeof newValue === 'string') {
-            this.showSelectAll = true;
-            try {
-                const parsed = JSON.parse(newValue);
-                if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {
-                    this.selectAllLabel = parsed[0];
-                    this.deselectAllLabel = parsed[1] || parsed[0];
-                }
-                else {
-                    this.selectAllLabel = newValue;
-                    this.deselectAllLabel = newValue;
-                }
-            }
-            catch {
-                this.selectAllLabel = newValue;
-                this.deselectAllLabel = newValue;
-            }
-        }
-    }
-    componentWillLoad() {
-        this.updateSelectedOptions();
-        this.handleShowSelectAllChange(this.showSelectAll);
-    }
-    get parsedOptions() {
-        if (typeof this.options === 'string') {
-            try {
-                return JSON.parse(this.options);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.options;
-    }
-    get effectiveOptions() {
-        let options = [...this.parsedOptions];
-        // Add "Select All" option if enabled
-        if (this.showSelectAll && options.length > 0) {
-            const allSelected = this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;
-            options = [
-                {
-                    label: allSelected ? this.deselectAllLabel : this.selectAllLabel,
-                    value: '__select_all__',
-                    iconStart: allSelected ? '✕' : '⇣',
-                },
-                ...options,
-            ];
-        }
-        return options;
-    }
-    updateSelectedOptions() {
-        const valueArray = Array.isArray(this.value) ? this.value : [];
-        this.selectedOptions = this.parsedOptions.filter(opt => valueArray.includes(opt.value ?? opt.label));
-    }
-    emitChange() {
-        this.leChange.emit({
-            values: this.value,
-            options: this.selectedOptions,
-        });
-    }
-    /**
-     * Opens the dropdown.
-     */
-    async showDropdown() {
-        await this.dropdownEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hideDropdown() {
-        await this.dropdownEl?.hide();
-    }
-    /**
-     * Clears all selections.
-     */
-    async clearSelection() {
-        this.value = [];
-        this.selectedOptions = [];
-        this.emitChange();
-    }
-    renderTags() {
-        if (this.selectedOptions.length === 0) {
-            return h("span", { class: "multiselect-placeholder" }, this.placeholder);
-        }
-        return (h("div", { class: "multiselect-tags" }, this.selectedOptions.map(option => (h("le-tag", { key: option.value ?? option.label, label: option.label, icon: option.iconStart, size: this.size === 'large' ? 'medium' : 'small', dismissible: true, disabled: this.disabled, onLeDismiss: e => this.handleTagDismiss(option, e), mode: "default" })))));
-    }
-    render() {
-        const hasSelections = this.selectedOptions.length > 0;
-        const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
-        return (h("le-component", { key: 'b22fd0273666745ad4dcfaf5692102d4cbc1946c', component: "le-multiselect" }, 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 }, 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(), h("div", { key: 'dfcb6b8397aec56be4588421b7545ae6caae31b2', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: '3ddd374aa458784d7d19f52966ee4f4fa5ca93f1', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '1687f1af7277b8489c6de841891439d5f4c77483', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '864debd4e5ce7f93338bea67f24c1c43e63a4dc3', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '6d2fa2b5aaa3970068d40e4ec4db7c7809dc85cd', class: "multiselect-arrow" }, h("svg", { key: '2fb670f75e9d9ba726c320cfeb6b8d31dd3a6ac4', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '70429d2d874f30a2a55ac57bf4d758663c048893', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '1224afb258731403d9c95888b8b3b8fc0f0c1b03', class: "multiselect-search", slot: "header" }, 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 => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: 'c47d74d5f40c30881e6b8bb35dafe80be85ee41a', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"],
-        "showSelectAll": ["handleShowSelectAllChange"]
-    }; }
-};
-LeMultiselect.style = leMultiselectCss();
-
-export { LeMultiselect as le_multiselect };
-//# sourceMappingURL=le-multiselect.entry.js.map

package/dist/esm/le-multiselect.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-multiselect.entry.js","sources":["src/components/le-multiselect/le-multiselect.css?tag=le-multiselect&encapsulation=shadow","src/components/le-multiselect/le-multiselect.tsx"],"sourcesContent":["/**\n * le-multiselect component styles\n *\n * CSS Custom Properties:\n * --le-multiselect-min-height\n * --le-multiselect-padding\n * --le-multiselect-font-size\n * --le-multiselect-border-radius\n * --le-multiselect-border-color\n * --le-multiselect-bg\n * --le-multiselect-color\n */\n\n:host {\n  display: inline-block;\n  min-width: 250px;\n\n  --le-multiselect-min-height: 0;\n  --le-multiselect-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);\n  --le-multiselect-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Trigger wrapper */\n.multiselect-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  width: 100%;\n  min-height: var(--le-multiselect-min-height);\n  padding: var(--le-multiselect-padding);\n  line-height: var(--le-line-height-tight);\n  background: var(--le-multiselect-bg, var(--le-color-surface, #fff));\n  border: 1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);\n  border-radius: var(--le-multiselect-border-radius, 0.375rem);\n  cursor: pointer;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.multiselect-trigger:hover:not(.is-disabled),\n:host(:focus-within) .multiselect-trigger:not(.is-disabled) {\n  border-color: var(--le-multiselect-border-color);\n}\n\n:host(:focus-within) .multiselect-trigger {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n:host([full-width]) {\n  width: 100%;\n}\n\n.multiselect-trigger.is-open {\n  border-color: var(--le-color-primary, #3b82f6);\n}\n\n.multiselect-trigger.is-disabled {\n  cursor: not-allowed;\n  background: var(--le-color-surface-disabled, #f9fafb);\n}\n\n/* Placeholder */\n.multiselect-placeholder {\n  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n/* Tags container */\n.multiselect-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Actions (clear + arrow) */\n.multiselect-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  flex-shrink: 0;\n}\n\n/* Clear button */\n.multiselect-clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  background: transparent;\n  color: var(--le-color-primary, #3b82f6);\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.multiselect-clear:hover {\n  opacity: 1;\n  background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.multiselect-clear svg {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* Arrow icon */\n.multiselect-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1rem;\n  color: var(--le-color-primary, #3b82f6);\n  transition: transform 0.2s ease;\n}\n\n.multiselect-arrow svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.multiselect-trigger.is-open .multiselect-arrow {\n  transform: rotate(180deg);\n}\n\n/* Search in dropdown */\n.search-input::part(container):focus-within {\n  outline: none !important;\n}\n.search-input {\n  --le-input-radius: var(--le-radius-md);\n}\n\n/* Status message */\n.multiselect-status {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: 0.75rem;\n  color: var(--le-color-text-muted, #6b7280);\n}\n\n/* Size variants */\n:host([size='small']) .multiselect-trigger {\n  --le-multiselect-min-height: 2rem;\n  --le-multiselect-padding: 0.25rem 0.375rem;\n  --le-multiselect-font-size: 0.75rem;\n}\n\n:host([size='large']) .multiselect-trigger {\n  --le-multiselect-min-height: 3rem;\n  --le-multiselect-padding: 0.5rem 0.625rem;\n  --le-multiselect-font-size: 1rem;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n  Watch,\n  h,\n} from '@stencil/core';\nimport {\n  LeOption,\n  LeOptionValue,\n  LeMultiOptionSelectDetail,\n  LeOptionSelectDetail,\n} from '../../types/options';\n\n/**\n * A multiselect component for selecting multiple options.\n *\n * Displays selected items as tags with optional search filtering.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic multiselect\n * ```html\n * <le-multiselect\n *   placeholder=\"Select options...\"\n *   options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With max selections\n * ```html\n * <le-multiselect\n *   max-selections=\"3\"\n *   options='[{\"label\": \"Option 1\"}, {\"label\": \"Option 2\"}, {\"label\": \"Option 3\"}, {\"label\": \"Option 4\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With search\n * ```html\n * <le-multiselect\n *   searchable\n *   placeholder=\"Search and select...\"\n *   options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-multiselect>\n * ```\n */\n@Component({\n  tag: 'le-multiselect',\n  styleUrl: 'le-multiselect.css',\n  shadow: true,\n})\nexport class LeMultiselect {\n  @Element() el: HTMLElement;\n\n  /**\n   * The options to display in the dropdown.\n   */\n  @Prop() options: LeOption[] | string = [];\n\n  /**\n   * The currently selected values.\n   */\n  @Prop({ mutable: true }) value: LeOptionValue[] = [];\n\n  /**\n   * Placeholder text when no options are selected.\n   */\n  @Prop() placeholder: string = 'Select options...';\n\n  /**\n   * Whether the multiselect is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether selection is required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Name attribute for form submission.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the multiselect should take full width of its container.\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Size variant of the multiselect.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Maximum number of selections allowed.\n   */\n  @Prop() maxSelections?: number;\n\n  /**\n   * Labels for the \"Select All\" option.\n   */\n  @State() private selectAllLabel: string = 'Select All';\n  @State() private deselectAllLabel: string = 'Deselect All';\n\n  /**\n   * Whether to show a \"Select All\" option.\n   * Also accepts a string or array of strings to customize the label(s).\n   */\n  @Prop({ mutable: true }) showSelectAll: boolean | string | string[] = false;\n\n  /**\n   * Whether the input is searchable.\n   */\n  @Prop() searchable: boolean = false;\n\n  /**\n   * Text to show when no options match the search.\n   */\n  @Prop() emptyText: string = 'No results found';\n\n  /**\n   * Whether the dropdown is currently open.\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Emitted when the selected values change.\n   */\n  @Event() leChange: EventEmitter<LeMultiOptionSelectDetail>;\n\n  /**\n   * Emitted when the dropdown opens.\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the dropdown closes.\n   */\n  @Event() leClose: EventEmitter<void>;\n\n  @State() private selectedOptions: LeOption[] = [];\n  @State() private searchQuery: string = '';\n\n  private dropdownEl?: HTMLLeDropdownBaseElement;\n  private inputEl?: HTMLInputElement;\n\n  @Watch('value')\n  handleValueChange() {\n    this.updateSelectedOptions();\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    this.updateSelectedOptions();\n  }\n\n  @Watch('showSelectAll')\n  handleShowSelectAllChange(newValue: boolean | string | string[]) {\n    if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {\n      this.showSelectAll = false;\n    } else if (typeof newValue === 'boolean') {\n      this.showSelectAll = newValue;\n    } else if (Array.isArray(newValue)) {\n      this.showSelectAll = true;\n      this.selectAllLabel = newValue[0];\n      this.deselectAllLabel = newValue[1] || newValue[0];\n    } else if (typeof newValue === 'string') {\n      this.showSelectAll = true;\n      try {\n        const parsed = JSON.parse(newValue);\n        if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {\n          this.selectAllLabel = parsed[0];\n          this.deselectAllLabel = parsed[1] || parsed[0];\n        } else {\n          this.selectAllLabel = newValue;\n          this.deselectAllLabel = newValue;\n        }\n      } catch {\n        this.selectAllLabel = newValue;\n        this.deselectAllLabel = newValue;\n      }\n    }\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOptions();\n    this.handleShowSelectAllChange(this.showSelectAll);\n  }\n\n  private get parsedOptions(): LeOption[] {\n    if (typeof this.options === 'string') {\n      try {\n        return JSON.parse(this.options);\n      } catch {\n        return [];\n      }\n    }\n    return this.options;\n  }\n\n  private get effectiveOptions(): LeOption[] {\n    let options = [...this.parsedOptions];\n\n    // Add \"Select All\" option if enabled\n    if (this.showSelectAll && options.length > 0) {\n      const allSelected =\n        this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;\n      options = [\n        {\n          label: allSelected ? this.deselectAllLabel : this.selectAllLabel,\n          value: '__select_all__',\n          iconStart: allSelected ? '✕' : '⇣',\n        },\n        ...options,\n      ];\n    }\n\n    return options;\n  }\n\n  private updateSelectedOptions() {\n    const valueArray = Array.isArray(this.value) ? this.value : [];\n    this.selectedOptions = this.parsedOptions.filter(opt =>\n      valueArray.includes(opt.value ?? opt.label),\n    );\n  }\n\n  private filterOption = (option: LeOption, query: string): boolean => {\n    if (!query) return true;\n    // Always show \"Select All\" option\n    if (option.value === '__select_all__') return true;\n\n    const searchLower = query.toLowerCase();\n    return (\n      option.label.toLowerCase().includes(searchLower) ||\n      (option.description?.toLowerCase().includes(searchLower) ?? false)\n    );\n  };\n\n  private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n    const { value } = e.detail;\n\n    const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);\n    if (enabledOptions.length === 0) return;\n\n    // Handle \"Select All\" option\n    if (value === '__select_all__') {\n      if (this.selectedOptions.length === enabledOptions.length) {\n        // Deselect all\n        this.value = [];\n      } else {\n        // Select all (respect maxSelections)\n        const selectableOptions = this.maxSelections\n          ? enabledOptions.slice(0, this.maxSelections)\n          : enabledOptions;\n        this.value = selectableOptions.map(opt => opt.value ?? opt.label);\n      }\n      this.emitChange();\n      return;\n    }\n\n    const isSelected = this.value.includes(value);\n\n    if (isSelected) {\n      // Remove from selection\n      this.value = this.value.filter(v => v !== value);\n      this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);\n    } else {\n      // Add to selection (if not at max)\n      if (this.maxSelections && this.value.length >= this.maxSelections) {\n        return; // Don't add more\n      }\n      this.value = [...this.value, value];\n    }\n\n    this.emitChange();\n\n    // Clear search after szelection\n    this.searchQuery = '';\n  };\n\n  private emitChange() {\n    this.leChange.emit({\n      values: this.value,\n      options: this.selectedOptions,\n    });\n  }\n\n  private handleDropdownOpen = () => {\n    this.open = true;\n    this.leOpen.emit();\n\n    // Focus search input if searchable\n    if (this.searchable) {\n      setTimeout(() => {\n        this.inputEl?.focus();\n      }, 50);\n    }\n  };\n\n  private handleDropdownClose = () => {\n    this.open = false;\n    this.searchQuery = '';\n    this.leClose.emit();\n  };\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.dropdownEl?.toggle();\n    }\n  };\n\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleTagDismiss = (option: LeOption, e: CustomEvent) => {\n    e.stopPropagation();\n    const value = option.value ?? option.label;\n    this.value = this.value.filter(v => v !== value);\n    this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);\n    this.emitChange();\n  };\n\n  private handleSearchInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.searchQuery = target.value;\n  };\n\n  private handleClearAll = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.value = [];\n    this.selectedOptions = [];\n    this.emitChange();\n  };\n\n  /**\n   * Opens the dropdown.\n   */\n  @Method()\n  async showDropdown() {\n    await this.dropdownEl?.show();\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async hideDropdown() {\n    await this.dropdownEl?.hide();\n  }\n\n  /**\n   * Clears all selections.\n   */\n  @Method()\n  async clearSelection() {\n    this.value = [];\n    this.selectedOptions = [];\n    this.emitChange();\n  }\n\n  private renderTags() {\n    if (this.selectedOptions.length === 0) {\n      return <span class=\"multiselect-placeholder\">{this.placeholder}</span>;\n    }\n\n    return (\n      <div class=\"multiselect-tags\">\n        {this.selectedOptions.map(option => (\n          <le-tag\n            key={option.value ?? option.label}\n            label={option.label}\n            icon={option.iconStart}\n            size={this.size === 'large' ? 'medium' : 'small'}\n            dismissible\n            disabled={this.disabled}\n            onLeDismiss={e => this.handleTagDismiss(option, e)}\n            mode=\"default\"\n          />\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    const hasSelections = this.selectedOptions.length > 0;\n    const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;\n\n    return (\n      <le-component component=\"le-multiselect\">\n        <le-dropdown-base\n          ref={el => (this.dropdownEl = el)}\n          options={this.effectiveOptions}\n          value={this.value}\n          multiple={true}\n          disabled={this.disabled}\n          filterFn={this.searchable ? this.filterOption : undefined}\n          filterQuery={this.searchQuery}\n          emptyText={this.emptyText}\n          showCheckboxes={true}\n          fullWidth={this.fullWidth}\n          onLeOptionSelect={this.handleOptionSelect}\n          onLeDropdownOpen={this.handleDropdownOpen}\n          onLeDropdownClose={this.handleDropdownClose}\n        >\n          <div\n            slot=\"trigger\"\n            class={{\n              'multiselect-trigger': true,\n              'has-selections': hasSelections,\n              'is-open': this.open,\n              'is-disabled': this.disabled,\n            }}\n            tabIndex={this.disabled ? -1 : 0}\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            onClick={this.handleTriggerClick}\n            onKeyDown={this.handleTriggerKeyDown}\n          >\n            {this.renderTags()}\n\n            <div class=\"multiselect-actions\">\n              {hasSelections && !this.disabled && (\n                <button\n                  type=\"button\"\n                  class=\"multiselect-clear\"\n                  onClick={this.handleClearAll}\n                  aria-label=\"Clear all\"\n                  tabIndex={-1}\n                >\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path d=\"M4 4l8 8M12 4l-8 8\" />\n                  </svg>\n                </button>\n              )}\n              <span class=\"multiselect-arrow\">\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M4 6l4 4 4-4\" />\n                </svg>\n              </span>\n            </div>\n          </div>\n\n          {/* Search input shown in dropdown header */}\n          {this.searchable && this.open && (\n            <div class=\"multiselect-search\" slot=\"header\">\n              <le-string-input\n                mode=\"default\"\n                inputRef={el => (this.inputEl = el)}\n                class=\"search-input\"\n                placeholder=\"Search...\"\n                value={this.searchQuery}\n                onInput={this.handleSearchInput}\n              />\n            </div>\n          )}\n        </le-dropdown-base>\n\n        {/* Hidden inputs for form submission */}\n        {this.name &&\n          this.value.map(val => (\n            <input type=\"hidden\" name={this.name} value={val.toString()} key={val.toString()} />\n          ))}\n\n        {/* Status message */}\n        {atMaxSelections && (\n          <span class=\"multiselect-status\">Maximum {this.maxSelections} selections</span>\n        )}\n      </le-component>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,160 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DFTm5BqT.js';
-import { c as classnames } from './utils-DZYCZLrF.js';
-
-const leNumberInputCss = () => `:host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999;--le-input-border-error:2px solid var(--le-color-danger, #dc3545);--le-input-error-color:var(--le-color-danger, #dc3545)}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-input-container.has-error{border:var(--le-input-border-error)}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;width:100%;height:calc(var(--le-input-height) - 2px);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;text-align:right;-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-controls{display:flex;flex-direction:column;border-left:1px solid var(--le-color-border, #cccccc);height:100%}.le-input-control-btn{--le-button-border-radius:0;--le-button-padding-x:0;--le-button-padding-y:0;--le-button-small-font-size:9.5px;--le-button-small-padding:0 0.2rem;--le-button-icon-aspect-ratio:2;display:flex;align-items:center;justify-content:center;height:50%;cursor:pointer;background:none;border:none;color:var(--le-input-desc-color);font-size:10px;line-height:1}.le-input-control-btn:hover{background-color:rgba(0,0,0,0.05);color:var(--le-color-primary, #007bff)}.le-input-control-btn:active{background-color:rgba(0,0,0,0.1)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-error{font-size:0.85em;color:var(--le-input-error-color);margin-top:2px}`;
-
-const LeNumberInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "leChange");
-        this.leInput = 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();
-        };
-    }
-    valueChanged() {
-        this.validate();
-    }
-    validate() {
-        if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {
-            this.isValid = false;
-            this.validationMessage = 'This field is required';
-            return;
-        }
-        if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {
-            if (this.min !== undefined && this.value < this.min) {
-                this.isValid = false;
-                this.validationMessage = `Value must be at least ${this.min}`;
-                return;
-            }
-            if (this.max !== undefined && this.value > this.max) {
-                this.isValid = false;
-                this.validationMessage = `Value must be at most ${this.max}`;
-                return;
-            }
-        }
-        this.isValid = true;
-        this.validationMessage = '';
-    }
-    emitChange() {
-        this.leChange.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-            isValid: this.isValid
-        });
-    }
-    emitInput() {
-        this.leInput.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-            isValid: this.isValid
-        });
-    }
-    updateValue(newValue) {
-        if (this.disabled || this.readonly)
-            return;
-        // Round to avoid floating point errors
-        const precision = this.step.toString().split('.')[1]?.length || 0;
-        const rounded = parseFloat(newValue.toFixed(precision));
-        this.value = rounded;
-        this.validate();
-        this.emitInput();
-    }
-    render() {
-        return (h("le-component", { key: '3448b68633e7ebde8e6175f29047791c9094dc49', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'd941698c42e2dd9a5b2dbe60decfa9692c840c1a', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c2b255bf365937e2233835ef6564b81f8a1872a5', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '6090fe6737015bc1cd87ef881276975870e6797c', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: 'e453aa8eb57857540b29d78c3f61ec371be6c71a', class: "icon-start" }, this.iconStart)), 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 && (h("div", { key: 'dd4e42f8a9916574e61643dbe90bae50e2defb77', class: "le-input-controls" }, 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" }, h("span", { key: 'c1858ce8cf23de1610ac6e957bd40ec2fe7a97ea', slot: "icon-only" }, "\u2191")), 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" }, h("span", { key: '0c5225558cf4adf80e63dcfafe1bb83d80fbb7dd', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: 'd97bc87f564b9a23dac85b518895e7ffcbd72aa8', class: "le-input-error" }, this.validationMessage), h("div", { key: '257757f47a84f40c48e98672d6217ec565f37cce', class: "le-input-description" }, h("le-slot", { key: '89c69d0be6c3ef9975d2b2ab21f65c916067d452', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '9dffb85d1c8e2463d05a514b1659d0ac3eee802e', name: "description" }))))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-};
-LeNumberInput.style = leNumberInputCss();
-
-export { LeNumberInput as le_number_input };
-//# sourceMappingURL=le-number-input.entry.js.map

package/dist/esm/le-number-input.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-number-input.entry.js","sources":["src/components/le-number-input/le-number-input.css?tag=le-number-input&encapsulation=shadow","src/components/le-number-input/le-number-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-padding: 2px 6px;\n  --le-input-height: 1.5rem;\n  --le-input-label-color: var(--le-color-text-primary, #333333);\n  --le-input-desc-color: var(--le-color-text-secondary, #666666);\n  --le-input-placeholder-color: #999999;\n  --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);\n  --le-input-error-color: var(--le-color-danger, #dc3545);\n}\n\n.le-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.le-input-label {\n  display: block;\n  font-size: 0.9em;\n  font-weight: 500;\n  color: var(--le-input-label-color);\n  margin-bottom: 2px;\n}\n\n.le-input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.le-input-container.has-error {\n  border: var(--le-input-border-error);\n}\n\n:host([disabled]) .le-input-container {\n  opacity: 0.6;\n  background-color: rgba(0,0,0,0.05);\n  cursor: not-allowed;\n}\n\ninput {\n  flex: 1;\n  width: 100%;\n  height: calc(var(--le-input-height) - 2px);\n  padding: var(--le-input-padding);\n  border: none;\n  background: transparent;\n  color: var(--le-input-color);\n  font-family: inherit;\n  font-size: inherit;\n  outline: none;\n  text-align: right; /* Aligned to end */\n  -moz-appearance: textfield; /* Remove default spinners in Firefox */\n}\n\n/* Remove default spinners in Chrome/Safari/Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput::placeholder {\n  color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: var(--le-input-desc-color);\n}\n\n.le-input-controls {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--le-color-border, #cccccc);\n  height: 100%;\n}\n\n.le-input-control-btn {\n  --le-button-border-radius: 0;\n  --le-button-padding-x: 0;\n  --le-button-padding-y: 0;\n  --le-button-small-font-size: 9.5px;\n  --le-button-small-padding: 0 0.2rem;\n  --le-button-icon-aspect-ratio: 2;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50%;\n  cursor: pointer;\n  background: none;\n  border: none;\n  color: var(--le-input-desc-color);\n  font-size: 10px;\n  line-height: 1;\n}\n\n.le-input-control-btn:hover {\n  background-color: rgba(0,0,0,0.05);\n  color: var(--le-color-primary, #007bff);\n}\n\n.le-input-control-btn:active {\n  background-color: rgba(0,0,0,0.1);\n}\n\n.le-input-description {\n  font-size: 0.85em;\n  color: var(--le-input-desc-color);\n  margin-top: 2px;\n}\n\n.le-input-error {\n  font-size: 0.85em;\n  color: var(--le-input-error-color);\n  margin-top: 2px;\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-number-input',\n  styleUrl: 'le-number-input.css',\n  shadow: true,\n})\nexport class LeNumberInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: number;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Minimum allowed value\n   */\n  @Prop() min?: number;\n\n  /**\n   * Maximum allowed value\n   */\n  @Prop() max?: number;\n\n  /**\n   * Step value for increment/decrement\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart?: string;\n\n  /**\n   * Whether to show the spinner controls\n   */\n  @Prop() showSpinners: boolean = true;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Internal validation state\n   */\n  @State() private isValid: boolean = true;\n  @State() private validationMessage: string = '';\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke/spin)\n   */\n  @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  @Watch('value')\n  valueChanged() {\n    this.validate();\n  }\n\n  private validate() {\n    if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n      this.isValid = false;\n      this.validationMessage = 'This field is required';\n      return;\n    }\n\n    if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n      if (this.min !== undefined && this.value < this.min) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at least ${this.min}`;\n        return;\n      }\n      if (this.max !== undefined && this.value > this.max) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at most ${this.max}`;\n        return;\n      }\n    }\n\n    this.isValid = true;\n    this.validationMessage = '';\n  }\n\n  private emitChange() {\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private emitInput() {\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private updateValue(newValue: number) {\n    if (this.disabled || this.readonly) return;\n    \n    // Round to avoid floating point errors\n    const precision = this.step.toString().split('.')[1]?.length || 0;\n    const rounded = parseFloat(newValue.toFixed(precision));\n    \n    this.value = rounded;\n    this.validate();\n    this.emitInput();\n  }\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const val = parseFloat(input.value);\n    \n    if (input.value === '') {\n      this.value = undefined;\n    } else if (!isNaN(val)) {\n      this.value = val;\n    }\n    \n    this.validate();\n    this.emitInput();\n  };\n\n  private handleChange = () => {\n    this.validate();\n    this.emitChange();\n  };\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return;\n\n    let multiplier = 1;\n    if (ev.shiftKey) multiplier = 10;\n    if (ev.altKey) multiplier = 0.1;\n\n    const current = this.value || 0;\n\n    if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.updateValue(current + (this.step * multiplier));\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.updateValue(current - (this.step * multiplier));\n    }\n  };\n\n  private handleWheel = (ev: WheelEvent) => {\n    if (this.disabled || this.readonly) return;\n    // Only handle if input is focused to prevent accidental scrolling\n    if (document.activeElement !== ev.target) return;\n\n    ev.preventDefault();\n    const current = this.value || 0;\n    \n    if (ev.deltaY < 0) {\n      this.updateValue(current + this.step);\n    } else {\n      this.updateValue(current - this.step);\n    }\n  };\n\n  private increment = (ev: Event) => {\n    ev.preventDefault(); // Prevent focus loss\n    const current = this.value || 0;\n    this.updateValue(current + this.step);\n    // Trigger change event for buttons as they are \"final\" actions usually\n    this.emitChange();\n  };\n\n  private decrement = (ev: Event) => {\n    ev.preventDefault();\n    const current = this.value || 0;\n    this.updateValue(current - this.step);\n    this.emitChange();\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            \n            <input\n              id={this.name}\n              type=\"number\"\n              name={this.name}\n              placeholder={this.placeholder}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onKeyDown={this.handleKeyDown}\n              onWheel={this.handleWheel}\n            />\n            \n            {this.showSpinners && (\n              <div class=\"le-input-controls\">\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\"\n                  icon-only\n                  class=\"le-input-control-btn\" \n                  onClick={this.increment}\n                  disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↑</span>\n                </le-button>\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\" \n                  icon-only \n                  class=\"le-input-control-btn\" \n                  onClick={this.decrement}\n                  disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↓</span>\n                </le-button>\n              </div>\n            )}\n          </div>\n\n          {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n          <div class=\"le-input-description\">\n            <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n              <slot name=\"description\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}