@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/esm/bh-input-autocomplete.entry.js

@@ -1,340 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DtVghh5W.js';
-
-const bhInputAutocompleteCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block;position:relative}.input-autocomplete-wrapper{position:relative}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}.input-field{display:flex;align-items:center;min-height:44px;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);transition:all 0.15s ease}.input-field.input-hover{border-color:var(--color-neutral-400)}.input-field.input-focused{border-color:var(--color-brand-500);box-shadow:0 0 0 4px var(--color-brand-50)}.input-field.input-error{border-color:var(--color-error-500)}.input-field.input-error.input-focused{box-shadow:0 0 0 4px var(--color-error-50)}.input-field.input-disabled{background:var(--color-neutral-50);cursor:not-allowed}.input-content-flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xs);width:100%}.leading-icon{font-size:20px;color:var(--color-neutral-500);flex-shrink:0}.inline-input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-family:var(--font-inter);font-size:var(--text-md-size);line-height:var(--text-md-line);color:var(--color-neutral-900)}.inline-input::placeholder{color:var(--color-neutral-500)}.inline-input:disabled{cursor:not-allowed;color:var(--color-neutral-400)}.hint-text{font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-600);transition:opacity 0.15s ease}.hint-text.hint-error{color:var(--color-error-600)}";
-
-const BhInputAutocomplete = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bhChange = createEvent(this, "bhChange");
-        this.bhSelectedItemsChange = createEvent(this, "bhSelectedItemsChange");
-        this.bhFocus = createEvent(this, "bhFocus");
-        this.bhBlur = createEvent(this, "bhBlur");
-        this.bhHelpClick = createEvent(this, "bhHelpClick");
-        this.bhOptionSelect = createEvent(this, "bhOptionSelect");
-    }
-    get el() { return getElement(this); }
-    // Base input props
-    /**
-     * Input state
-     */
-    state;
-    /**
-     * Whether input has error
-     */
-    error = false;
-    /**
-     * Whether input is required
-     */
-    required = false;
-    /**
-     * Whether input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether to show help icon
-     */
-    showHelpIcon = false;
-    /**
-     * Whether to show leading icon
-     */
-    showLeadingIcon = true;
-    /**
-     * Whether to show label
-     */
-    showLabel = true;
-    /**
-     * Whether to show hint text
-     */
-    showHintText = true;
-    /**
-     * Label text
-     */
-    label = 'Search';
-    /**
-     * Placeholder text
-     */
-    placeholder = 'Search...';
-    /**
-     * Hint text
-     */
-    hintText = 'This is a hint text to help user.';
-    /**
-     * Leading icon name
-     */
-    leadingIcon = 'search';
-    /**
-     * Help icon tooltip
-     */
-    helpIconTooltip = 'Help';
-    /**
-     * Current value
-     */
-    value = '';
-    /**
-     * Width of the component
-     */
-    width = '450px';
-    // Autocomplete-specific props
-    /**
-     * Available options
-     */
-    options = [];
-    /**
-     * Maximum number of options to show
-     */
-    maxOptions = 10;
-    /**
-     * Enable multi-select mode
-     */
-    multiSelect = false;
-    /**
-     * Minimum search length to show options
-     */
-    minSearchLength = 3;
-    /**
-     * Selected items (for multi-select)
-     */
-    selectedItems = [];
-    showDropdown = false;
-    focusedOptionIndex = -1;
-    isFocused = false;
-    isHovered = false;
-    isTagClickOpen = false;
-    /**
-     * Event emitted when value changes
-     */
-    bhChange;
-    /**
-     * Event emitted when selected items change
-     */
-    bhSelectedItemsChange;
-    /**
-     * Event emitted when input is focused
-     */
-    bhFocus;
-    /**
-     * Event emitted when input is blurred
-     */
-    bhBlur;
-    /**
-     * Event emitted when help icon is clicked
-     */
-    bhHelpClick;
-    /**
-     * Event emitted when an option is selected
-     */
-    bhOptionSelect;
-    handleValueChange(newValue) {
-        if (newValue && newValue.length >= this.minSearchLength) {
-            this.showDropdown = true;
-        }
-    }
-    get filteredOptions() {
-        let baseOptions = [];
-        if (this.isTagClickOpen && this.multiSelect) {
-            baseOptions = this.selectedItems;
-        }
-        else if (this.showDropdown && (!this.value || this.value.length === 0)) {
-            baseOptions = this.options.slice(0, this.maxOptions);
-        }
-        else if (this.value && this.value.length >= this.minSearchLength) {
-            const searchLower = this.value.toLowerCase();
-            const filtered = this.options.filter(option => option.label.toLowerCase().includes(searchLower));
-            baseOptions = filtered.slice(0, this.maxOptions);
-        }
-        return baseOptions.map(option => ({
-            ...option,
-            selected: this.multiSelect && this.selectedItems.some(item => item.id === option.id),
-        }));
-    }
-    get shouldShowClearButton() {
-        return !this.disabled && ((this.multiSelect && this.selectedItems.length > 0) ||
-            (!this.multiSelect && Boolean(this.value && this.value.length > 0)));
-    }
-    get visibleTags() {
-        if (!this.multiSelect || this.selectedItems.length === 0) {
-            return { tags: [], remaining: 0 };
-        }
-        const containerWidth = parseFloat(this.width.replace('px', '')) || 450;
-        const searchIconWidth = this.showLeadingIcon ? 40 : 0;
-        const clearButtonWidth = this.shouldShowClearButton ? 32 : 0;
-        const inputFieldMinWidth = 60;
-        const padding = 24;
-        const reservedWidth = searchIconWidth + clearButtonWidth + inputFieldMinWidth + padding;
-        const availableWidth = Math.max(containerWidth - reservedWidth, 80);
-        let currentWidth = 0;
-        const visibleTagsList = [];
-        const tagSpacing = 8;
-        const counterWidth = 40;
-        const reversedItems = [...this.selectedItems].reverse();
-        for (let i = 0; i < reversedItems.length; i++) {
-            const tag = reversedItems[i];
-            const baseTagWidth = Math.min(tag.label.length * 8 + 36, 150);
-            const remainingAfterThis = reversedItems.length - (i + 1);
-            const needsCounter = remainingAfterThis > 0;
-            const totalRequiredWidth = currentWidth + baseTagWidth + (needsCounter ? counterWidth : 0);
-            if (totalRequiredWidth <= availableWidth) {
-                visibleTagsList.push(tag);
-                currentWidth += baseTagWidth + tagSpacing;
-            }
-            else {
-                break;
-            }
-        }
-        const finalVisibleTags = visibleTagsList.reverse();
-        return {
-            tags: finalVisibleTags,
-            remaining: this.selectedItems.length - finalVisibleTags.length,
-        };
-    }
-    handleInputChange = (e) => {
-        const target = e.target;
-        this.value = target.value;
-        this.bhChange.emit(this.value);
-        this.isTagClickOpen = false;
-        if (this.value.length >= this.minSearchLength) {
-            this.focusedOptionIndex = -1;
-        }
-        else {
-            this.showDropdown = false;
-        }
-    };
-    handleInputFocus = () => {
-        this.isFocused = true;
-        this.bhFocus.emit();
-        if (this.value && this.value.length >= this.minSearchLength && this.filteredOptions.length > 0) {
-            this.showDropdown = true;
-        }
-    };
-    getInputTextState() {
-        if (this.state === 'placeholder') {
-            return 'default';
-        }
-        if (this.state === 'focused') {
-            return 'focus';
-        }
-        return this.state;
-    }
-    handleInputBlur = () => {
-        setTimeout(() => {
-            this.isFocused = false;
-            this.showDropdown = false;
-            this.focusedOptionIndex = -1;
-            this.isTagClickOpen = false;
-            this.bhBlur.emit();
-        }, 200);
-    };
-    handleOptionSelect = (event) => {
-        const option = event.detail;
-        if (option.disabled)
-            return;
-        this.bhOptionSelect.emit(option);
-        if (this.multiSelect) {
-            const isSelected = this.selectedItems.some(item => item.id === option.id);
-            const newItems = isSelected
-                ? this.selectedItems.filter(item => item.id !== option.id)
-                : [...this.selectedItems, option];
-            this.selectedItems = newItems;
-            this.bhSelectedItemsChange.emit(newItems);
-            this.value = '';
-            this.bhChange.emit('');
-            this.isTagClickOpen = false;
-            this.showDropdown = false;
-        }
-        else {
-            this.value = option.label;
-            this.bhChange.emit(option.label);
-            this.showDropdown = false;
-        }
-    };
-    handleTagRemove = (tag) => {
-        const newItems = this.selectedItems.filter(item => item.id !== tag.id);
-        this.selectedItems = newItems;
-        this.bhSelectedItemsChange.emit(newItems);
-    };
-    handleTagClick = (e) => {
-        if (e.target.closest('.tag-dismiss')) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        if (!this.disabled) {
-            this.isTagClickOpen = true;
-            this.showDropdown = true;
-            this.isFocused = true;
-        }
-    };
-    handleClearAll = () => {
-        if (this.multiSelect) {
-            this.selectedItems = [];
-            this.bhSelectedItemsChange.emit([]);
-        }
-        this.value = '';
-        this.bhChange.emit('');
-    };
-    handleKeyDown = (e) => {
-        if (!this.showDropdown || this.filteredOptions.length === 0)
-            return;
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                this.focusedOptionIndex = this.focusedOptionIndex < this.filteredOptions.length - 1
-                    ? this.focusedOptionIndex + 1
-                    : 0;
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                this.focusedOptionIndex = this.focusedOptionIndex > 0
-                    ? this.focusedOptionIndex - 1
-                    : this.filteredOptions.length - 1;
-                break;
-            case 'Enter':
-                e.preventDefault();
-                if (this.focusedOptionIndex >= 0 && this.focusedOptionIndex < this.filteredOptions.length) {
-                    const option = this.filteredOptions[this.focusedOptionIndex];
-                    this.handleOptionSelect({ detail: option });
-                }
-                break;
-            case 'Escape':
-                e.preventDefault();
-                this.showDropdown = false;
-                this.focusedOptionIndex = -1;
-                break;
-        }
-    };
-    handleItemHover = (event) => {
-        this.focusedOptionIndex = event.detail;
-    };
-    render() {
-        const { tags, remaining } = this.visibleTags;
-        return (h(Host, { key: '61d319d2ad6a9fad1067d017602b4ec3e856c62d' }, h("div", { key: '1fd6c5019c2abde42bddbf604087183e9a0355be', class: "input-autocomplete-wrapper", style: { width: this.width }, onKeyDown: this.handleKeyDown }, this.multiSelect ? (
-        // Multi-select input with flowing tags
-        h("div", { class: "input-wrapper" }, h("bh-label", { label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: () => this.bhHelpClick.emit() }, h("div", { class: {
-                'input-field': true,
-                'autocomplete-multi-input': true,
-                'input-error': this.error,
-                'input-disabled': this.disabled,
-                'input-focused': this.isFocused,
-                'input-hover': this.isHovered,
-            }, onMouseEnter: () => !this.isFocused && (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("div", { class: "input-content-flow" }, this.showLeadingIcon && (h("span", { class: "leading-icon material-symbols-outlined" }, this.leadingIcon)), tags.map(tag => (h("div", { key: tag.id, onClick: this.handleTagClick, onMouseDown: e => e.preventDefault(), style: { cursor: 'pointer' } }, h("bh-tag", { variant: "text-only", size: "sm", label: tag.label, dismissible: !this.disabled, disabled: this.disabled, maxWidth: 150, onBhDismiss: () => this.handleTagRemove(tag) })))), remaining > 0 && (h("div", { onClick: this.handleTagClick, onMouseDown: e => e.preventDefault(), style: { cursor: 'pointer' } }, h("bh-tag", { variant: "text-only", size: "sm", label: `+${remaining}`, dismissible: false, disabled: this.disabled }))), h("input", { type: "text", value: this.value, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, class: "inline-input", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), this.shouldShowClearButton && (h("bh-button-icon", { hierarchy: "tertiary", size: "xs", iconName: "close", onBhClick: this.handleClearAll, disabled: this.disabled }))))), this.showHintText && this.hintText && (h("div", { class: { 'hint-text': true, 'hint-error': this.error }, style: { opacity: this.showDropdown ? '0' : '1' } }, this.hintText)))) : (
-        // Standard single-select using bh-input-text
-        h("bh-input-text", { state: this.getInputTextState(), error: this.error, required: this.required, disabled: this.disabled, showHelpIcon: this.showHelpIcon, showLeadingIcon: this.showLeadingIcon, showLabel: this.showLabel, showHintText: this.showHintText, label: this.label, placeholder: this.placeholder, hintText: this.hintText, leadingIcon: this.leadingIcon, helpIconTooltip: this.helpIconTooltip, value: this.value, width: "100%", onBhInput: (e) => {
-                this.value = e.detail;
-                this.bhChange.emit(this.value);
-                this.isTagClickOpen = false;
-                if (this.value.length >= this.minSearchLength) {
-                    this.showDropdown = true;
-                }
-                else {
-                    this.showDropdown = false;
-                }
-            }, onBhFocus: this.handleInputFocus, onBhBlur: this.handleInputBlur, onBhHelpClick: () => this.bhHelpClick.emit() })), h("bh-autocomplete-menu", { key: 'a6a4e0692cb97555257ac794a090275533ff5dd7', visible: this.showDropdown, menuItems: this.filteredOptions, selectedIndex: this.focusedOptionIndex, multiSelect: this.multiSelect, searchQuery: this.value, onBhItemClick: this.handleOptionSelect, onBhItemHover: this.handleItemHover }))));
-    }
-    static get watchers() { return {
-        "value": ["handleValueChange"]
-    }; }
-};
-BhInputAutocomplete.style = bhInputAutocompleteCss;
-
-export { BhInputAutocomplete as bh_input_autocomplete };
-//# sourceMappingURL=bh-input-autocomplete.entry.js.map

package/esm/bh-input-number.entry.js

@@ -1,305 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DtVghh5W.js';
-import { u as updateValidity } from './form-CPgx0iFq.js';
-
-const bhInputNumberCss = ":host{display:block}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%;max-width:100%}.input-field{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);height:36px;width:100%;background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:var(--spacing-md);transition:all 0.2s ease-in-out;cursor:text;box-shadow:0 0 0 0px transparent;overflow:hidden;position:relative;box-sizing:border-box}.input-field.input-icon-leading{padding:var(--spacing-md) var(--spacing-lg)}.input-content{display:flex;align-items:center;gap:var(--spacing-md);flex:1;height:100%;min-width:0;max-width:100%}.leading-icon{font-size:var(--text-xl-size);color:var(--color-neutral-500);user-select:none;flex-shrink:0;cursor:default;pointer-events:auto;transition:color 0.2s ease-in-out}.input-field.input-focused .leading-icon{color:var(--color-brand-600)}.input-element{flex:1;height:100%;border:none;outline:none;background:transparent;font-family:var(--font-inter);font-weight:400;font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-800);min-width:60px;padding-left:var(--spacing-xs);box-shadow:none}.input-element:focus{outline:none;border:none;box-shadow:none}.input-element::placeholder{color:var(--color-neutral-500)}.input-element:disabled{cursor:not-allowed;opacity:0.5}.input-element::-webkit-outer-spin-button,.input-element::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-element[type='number']{-moz-appearance:textfield;appearance:textfield}.text-placeholder{color:var(--color-neutral-500)}.text-filled{color:var(--color-neutral-800)}.hint-text{font-family:var(--font-inter);font-weight:400;font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-600)}.input-field.input-hover{border-color:var(--color-brand-500)}.input-field.input-focused{border-color:var(--color-brand-500);box-shadow:0 0 0 1px var(--color-brand-500)}.input-field.input-disabled{opacity:0.5;cursor:not-allowed;background:var(--color-neutral-50)}.input-field.input-error{border-color:var(--color-error-300)}.input-field.input-error.input-hover{border-color:var(--color-error-500)}.input-field.input-error.input-focused{border-color:var(--color-brand-600)}.hint-text.hint-error{color:var(--color-error-600)}.prefix-text,.suffix-text{font-family:var(--font-inter);font-weight:400;font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-600);user-select:none;flex-shrink:0}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}@media (max-width: 768px){.input-wrapper{width:100%}}";
-
-const BhInputNumber = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bhChange = createEvent(this, "bhChange");
-        this.bhFocus = createEvent(this, "bhFocus");
-        this.bhBlur = createEvent(this, "bhBlur");
-        this.bhHelpClick = createEvent(this, "bhHelpClick");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    get el() { return getElement(this); }
-    internals;
-    inputEl;
-    /**
-     * Whether the input is in an error state
-     */
-    error = false;
-    /**
-     * Whether the field is required
-     */
-    required = false;
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether to show the help icon
-     */
-    showHelpIcon = false;
-    /**
-     * Whether to show the leading icon
-     */
-    showLeadingIcon = false;
-    /**
-     * Whether to show the label
-     */
-    showLabel = true;
-    /**
-     * Whether to show the hint text
-     */
-    showHintText = true;
-    /**
-     * Label text for the input
-     */
-    label = 'Amount';
-    /**
-     * Placeholder text
-     */
-    placeholder = '0';
-    /**
-     * Hint text displayed below the input
-     */
-    hintText = 'Enter a numeric value.';
-    /**
-     * Leading icon name (Material Symbols)
-     */
-    leadingIcon = 'tag';
-    /**
-     * Tooltip text for the help icon
-     */
-    helpIconTooltip = 'Help';
-    /**
-     * Current numeric value
-     */
-    value = null;
-    /**
-     * Minimum allowed value
-     */
-    min = null;
-    /**
-     * Maximum allowed value
-     */
-    max = null;
-    /**
-     * Step value for increment/decrement
-     */
-    step = 1;
-    /**
-     * Text prefix before the input value
-     */
-    prefixText = '';
-    /**
-     * Text suffix after the input value
-     */
-    suffixText = '';
-    /**
-     * Width of the component
-     */
-    width = '';
-    /**
-     * Name attribute for form submission
-     */
-    name = '';
-    /**
-     * Default value for form reset
-     */
-    defaultValue = null;
-    /**
-     * Custom validation message
-     */
-    validationMessage = '';
-    internalState = 'placeholder';
-    isHovered = false;
-    isFocused = false;
-    internalValue = null;
-    hasValidationError = false;
-    /**
-     * Event emitted when the value changes
-     */
-    bhChange;
-    /**
-     * Event emitted when the input receives focus
-     */
-    bhFocus;
-    /**
-     * Event emitted when the input loses focus
-     */
-    bhBlur;
-    /**
-     * Event emitted when the help icon is clicked
-     */
-    bhHelpClick;
-    get isControlled() {
-        return this.value !== undefined && this.value !== null;
-    }
-    get currentValue() {
-        return this.isControlled ? this.value : this.internalValue;
-    }
-    watchValue(newValue) {
-        this.hasValidationError = this.isOutOfBounds(newValue);
-        this.updateInternalState(newValue);
-    }
-    componentWillLoad() {
-        if (this.value !== null && this.value !== undefined) {
-            this.internalValue = this.value;
-        }
-        this.hasValidationError = this.isOutOfBounds(this.currentValue);
-        this.updateInternalState(this.currentValue);
-    }
-    componentDidLoad() {
-        this.syncNumberFormValue();
-        updateValidity(this.internals, this.inputEl, this.validationMessage);
-    }
-    formResetCallback() {
-        this.value = this.defaultValue;
-        this.internalValue = this.defaultValue;
-        if (this.inputEl) {
-            this.inputEl.value = this.defaultValue !== null ? String(this.defaultValue) : '';
-        }
-        this.hasValidationError = this.isOutOfBounds(this.defaultValue);
-        this.updateInternalState(this.defaultValue);
-        this.syncNumberFormValue();
-        updateValidity(this.internals, this.inputEl);
-    }
-    syncNumberFormValue() {
-        if (!this.internals || !this.name)
-            return;
-        const val = this.currentValue;
-        if (val === null || val === undefined) {
-            this.internals.setFormValue(null);
-        }
-        else {
-            this.internals.setFormValue(String(val));
-        }
-    }
-    isOutOfBounds(val) {
-        if (val === null)
-            return false;
-        if (this.min !== null && val < this.min)
-            return true;
-        if (this.max !== null && val > this.max)
-            return true;
-        return false;
-    }
-    updateInternalState(val) {
-        if (val !== null && val !== undefined) {
-            this.internalState = 'filled';
-        }
-        else if (!this.isFocused && !this.isHovered) {
-            this.internalState = 'placeholder';
-        }
-    }
-    validateValue(val) {
-        if (this.min !== null && val < this.min) {
-            return this.min;
-        }
-        if (this.max !== null && val > this.max) {
-            return this.max;
-        }
-        return val;
-    }
-    updateValue(newValue, allowOutOfBounds = false) {
-        let finalValue;
-        if (newValue === null) {
-            finalValue = null;
-        }
-        else if (allowOutOfBounds) {
-            finalValue = newValue;
-        }
-        else {
-            finalValue = this.validateValue(newValue);
-        }
-        this.internalValue = finalValue;
-        this.value = finalValue;
-        this.hasValidationError = this.isOutOfBounds(finalValue);
-        this.syncNumberFormValue();
-        updateValidity(this.internals, this.inputEl, this.validationMessage);
-        this.bhChange.emit(finalValue);
-    }
-    handleInputChange = (event) => {
-        const input = event.target;
-        const inputValue = input.value;
-        const numericValue = inputValue === '' ? null : parseFloat(inputValue);
-        if (numericValue !== null && !isNaN(numericValue)) {
-            this.updateValue(numericValue, true);
-        }
-        else if (inputValue === '') {
-            this.updateValue(null, true);
-        }
-    };
-    increment = () => {
-        const baseValue = this.currentValue ?? 0;
-        const newValue = baseValue + this.step;
-        this.updateValue(newValue);
-    };
-    decrement = () => {
-        const baseValue = this.currentValue ?? 0;
-        const newValue = baseValue - this.step;
-        this.updateValue(newValue);
-    };
-    handleInputFocus = () => {
-        this.isFocused = true;
-        this.internalState = 'focused';
-        this.bhFocus.emit();
-    };
-    handleInputBlur = () => {
-        this.isFocused = false;
-        this.updateInternalState(this.currentValue);
-        this.bhBlur.emit();
-    };
-    handleMouseEnter = () => {
-        if (!this.isFocused) {
-            this.isHovered = true;
-            this.internalState = 'hover';
-        }
-    };
-    handleMouseLeave = () => {
-        this.isHovered = false;
-        if (!this.isFocused) {
-            this.updateInternalState(this.currentValue);
-        }
-    };
-    handleHelpIconClick = () => {
-        this.bhHelpClick.emit();
-    };
-    getValidationErrorMessage() {
-        if (!this.hasValidationError || this.currentValue === null)
-            return '';
-        if (this.min !== null && this.max !== null) {
-            return `Enter a number between ${this.min} and ${this.max}.`;
-        }
-        if (this.min !== null && this.currentValue < this.min) {
-            return `Value must be at least ${this.min}`;
-        }
-        if (this.max !== null && this.currentValue > this.max) {
-            return `Value must be no more than ${this.max}`;
-        }
-        return '';
-    }
-    render() {
-        const showError = this.error || this.hasValidationError;
-        const displayHintText = showError && this.hasValidationError ? this.getValidationErrorMessage() : this.hintText;
-        const inputFieldClasses = {
-            'input-field': true,
-            'input-hover': this.internalState === 'hover' || this.isHovered,
-            'input-focused': this.internalState === 'focused' || this.isFocused,
-            'input-error': showError,
-            'input-disabled': this.disabled,
-            'input-icon-leading': this.showLeadingIcon,
-        };
-        const textColorClass = this.currentValue !== null && this.currentValue !== undefined ? 'text-filled' : 'text-placeholder';
-        const wrapperStyle = this.width ? { width: this.width } : {};
-        const isDecrementDisabled = this.disabled || (this.min !== null && this.currentValue !== null && this.currentValue <= this.min);
-        const isIncrementDisabled = this.disabled || (this.max !== null && this.currentValue !== null && this.currentValue >= this.max);
-        return (h("div", { key: 'e575b1982af49b05d43e26107d0e6f0259693309', class: "input-wrapper", style: wrapperStyle }, h("bh-label", { key: 'a6ba247e1aa8faf69882624964e24994237f9b99', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpIconClick }, h("div", { key: '2e518017ed3e16bfb0109f67f0b97fdc4088da10', class: inputFieldClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'ae95010994de4d51220e085abe345b0fe3693e9f', class: "input-content" }, this.showLeadingIcon && (h("span", { key: 'f5a4c54ff0d2bbe6e125d86f47587b16be34595a', class: "leading-icon material-symbols-outlined" }, this.leadingIcon)), this.prefixText && h("span", { key: 'd361eac479f123fe971f661a68a2bb0248f41c82', class: "prefix-text" }, this.prefixText), h("input", { key: 'a7c1b3d4dc7c0a97532dbc9bf52ad00f4466e93e', ref: (el) => (this.inputEl = el), type: "number", name: this.name, value: this.currentValue ?? '', placeholder: this.placeholder, disabled: this.disabled, required: this.required, class: `input-element ${textColorClass}`, onInput: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, min: this.min ?? undefined, max: this.max ?? undefined, step: this.step }), this.suffixText && h("span", { key: '0f45089745e92275fa5fef6539dea724aa75ca64', class: "suffix-text" }, this.suffixText), h("bh-button-icon", { key: 'cf8f2059727fc00b0640e01ae39182dd6e434ab6', hierarchy: "tertiary", size: "xs", iconName: "remove", disabled: isDecrementDisabled, onClick: this.decrement, "aria-label": "Decrease value" }), h("bh-button-icon", { key: '59cc6e617af95da7ee44a7fac4aa04505432d88a', hierarchy: "tertiary", size: "xs", iconName: "add", disabled: isIncrementDisabled, onClick: this.increment, "aria-label": "Increase value" })))), this.showHintText && displayHintText && (h("div", { key: '387bb2b4602cf09f2a1942d1b082b2604548b5a2', class: { 'hint-text': true, 'hint-error': showError } }, displayHintText))));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "value": ["watchValue"]
-    }; }
-};
-BhInputNumber.style = bhInputNumberCss;
-
-export { BhInputNumber as bh_input_number };
-//# sourceMappingURL=bh-input-number.entry.js.map