@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/components/bh-illustrations.js

@@ -0,0 +1,92 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DLHC5fHk.js';
+
+const bhIllustrationsCss = "@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:inline-flex}.illustration{display:inline-flex;align-items:center;justify-content:center;position:relative}.illustration-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3xl)}.illustration-svg-container{display:flex;align-items:center;justify-content:center;position:relative}.illustration-image{width:100%;height:100%;object-fit:contain}.illustration-content{text-align:center;max-width:480px}.illustration-title{font-family:var(--font-inter);font-size:var(--text-lg-size);font-weight:var(--weight-semibold);line-height:var(--text-lg-line);color:var(--color-neutral-900);margin:0 0 var(--spacing-md) 0}.illustration-description{font-family:var(--font-inter);font-size:var(--text-md-size);font-weight:var(--weight-regular);line-height:var(--text-md-line);color:var(--color-neutral-600);margin:0}.illustration-sm .illustration-svg-container{width:80px;height:80px}.illustration-md .illustration-svg-container{width:120px;height:120px}.illustration-lg .illustration-svg-container{width:160px;height:160px}.illustration-xl .illustration-svg-container{width:200px;height:200px}.illustration-2xl .illustration-svg-container{width:240px;height:240px}.illustration-3xl .illustration-svg-container{width:280px;height:280px}.illustration-4xl .illustration-svg-container{width:320px;height:320px}@media (max-width: 768px){.illustration-4xl .illustration-svg-container{width:400px;height:400px}.illustration-3xl .illustration-svg-container{width:320px;height:320px}.illustration-content{max-width:320px}}@media (max-width: 480px){.illustration-4xl .illustration-svg-container,.illustration-3xl .illustration-svg-container{width:280px;height:280px}.illustration-2xl .illustration-svg-container{width:240px;height:240px}}";
+
+const BhIllustrations$1 = /*@__PURE__*/ proxyCustomElement(class BhIllustrations extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * Size of the illustration
+     */
+    size = 'lg';
+    /**
+     * Title text to display below the illustration
+     */
+    illustrationTitle;
+    /**
+     * Description text to display below the title
+     */
+    description;
+    /**
+     * Path to the SVG illustration
+     */
+    svgPath = '/illustrations/Search-not-found.svg';
+    /**
+     * Alt text for the illustration image
+     */
+    alt = 'Illustration';
+    getSvgDimensions() {
+        switch (this.size) {
+            case 'sm':
+                return { width: 120, height: 120 };
+            case 'md':
+                return { width: 160, height: 160 };
+            case 'lg':
+                return { width: 200, height: 200 };
+            case 'xl':
+                return { width: 280, height: 280 };
+            case '2xl':
+                return { width: 360, height: 360 };
+            case '3xl':
+                return { width: 480, height: 480 };
+            case '4xl':
+                return { width: 600, height: 600 };
+            default:
+                return { width: 200, height: 200 };
+        }
+    }
+    render() {
+        const dimensions = this.getSvgDimensions();
+        return (h(Host, { key: '3de29d491a6ca150687d9ee0aaaac249d60cc966' }, h("div", { key: '03fe38b304e4f6f33018e29e3049ba32adc0dc5d', class: `illustration illustration-${this.size}` }, h("div", { key: '49ccf2fd59aee6ed12ae6a341732b98dbc39f60e', class: "illustration-wrapper" }, h("div", { key: '0f16a287aa62f2c0f44b08b92434c4495d140c56', class: "illustration-svg-container", style: {
+                width: `${dimensions.width}px`,
+                height: `${dimensions.height}px`,
+            } }, h("img", { key: '1452a2a5215e1392bea453a1e06590e66c070370', src: this.svgPath, alt: this.alt, style: {
+                width: `${dimensions.width}px`,
+                height: `${dimensions.height}px`,
+            }, class: "illustration-image" })), (this.illustrationTitle || this.description) && (h("div", { key: '5d57a72b5fa2537061212a20182a4b8802435ca9', class: "illustration-content" }, this.illustrationTitle && (h("h3", { key: '32e360bc3e5f033004a02e72f588066324a50781', class: "illustration-title" }, this.illustrationTitle)), this.description && (h("p", { key: '32b2d8ea6272362145e5de4ea6077f5ca6fb2373', class: "illustration-description" }, this.description))))))));
+    }
+    static get style() { return bhIllustrationsCss; }
+}, [769, "bh-illustrations", {
+        "size": [1],
+        "illustrationTitle": [1, "illustration-title"],
+        "description": [1],
+        "svgPath": [1, "svg-path"],
+        "alt": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-illustrations"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-illustrations":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhIllustrations$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhIllustrations = BhIllustrations$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhIllustrations, defineCustomElement };
+//# sourceMappingURL=bh-illustrations.js.map
+
+//# sourceMappingURL=bh-illustrations.js.map

package/dist/components/bh-input-autocomplete.js

@@ -0,0 +1,433 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.js';
+import { d as defineCustomElement$8 } from './p-qS3vvZaC.js';
+import { d as defineCustomElement$7 } from './p-D_matRYZ.js';
+import { d as defineCustomElement$6 } from './p-BsB67vNb.js';
+import { d as defineCustomElement$5 } from './p-CrB92GYh.js';
+import { d as defineCustomElement$4 } from './p-CzM_4nyA.js';
+import { d as defineCustomElement$3 } from './p-BM_aWCWB.js';
+import { d as defineCustomElement$2 } from './p-UG_h-ztP.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$1 = /*@__PURE__*/ proxyCustomElement(class BhInputAutocomplete extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        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 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: '05045fca42459813e1d147d76378d9a5ab1a12a9' }, h("div", { key: '88d4f3afbececb7ddb3b53f122bd4e650405f377', 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: 'a172ea13dcff3f03895384d83270333a1325870b', 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"]
+    }; }
+    static get style() { return bhInputAutocompleteCss; }
+}, [769, "bh-input-autocomplete", {
+        "state": [1],
+        "error": [4],
+        "required": [4],
+        "disabled": [4],
+        "showHelpIcon": [4, "show-help-icon"],
+        "showLeadingIcon": [4, "show-leading-icon"],
+        "showLabel": [4, "show-label"],
+        "showHintText": [4, "show-hint-text"],
+        "label": [1],
+        "placeholder": [1],
+        "hintText": [1, "hint-text"],
+        "leadingIcon": [1, "leading-icon"],
+        "helpIconTooltip": [1, "help-icon-tooltip"],
+        "value": [1025],
+        "width": [1],
+        "options": [16],
+        "maxOptions": [2, "max-options"],
+        "multiSelect": [4, "multi-select"],
+        "minSearchLength": [2, "min-search-length"],
+        "selectedItems": [1040],
+        "showDropdown": [32],
+        "focusedOptionIndex": [32],
+        "isFocused": [32],
+        "isHovered": [32],
+        "isTagClickOpen": [32]
+    }, undefined, {
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-input-autocomplete", "bh-autocomplete-menu", "bh-avatar", "bh-button-icon", "bh-input-text", "bh-label", "bh-tag", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-input-autocomplete":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhInputAutocomplete$1);
+            }
+            break;
+        case "bh-autocomplete-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "bh-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "bh-button-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "bh-input-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhInputAutocomplete = BhInputAutocomplete$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhInputAutocomplete, defineCustomElement };
+//# sourceMappingURL=bh-input-autocomplete.js.map
+
+//# sourceMappingURL=bh-input-autocomplete.js.map