/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../globals/settings.js";
import { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import iconLoader from "../../globals/internal/icon-loader.js";
import FocusMixin from "../../globals/mixins/focus.js";
import HostListener from "../../globals/decorators/host-listener.js";
import HostListenerMixin from "../../globals/mixins/host-listener.js";
import FormMixin from "../../globals/mixins/form.js";
import if_non_empty_default from "../../globals/directives/if-non-empty.js";
import { SEARCH_SIZE } from "./defs.js";
import search_default$1 from "./search.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import Close16 from "@carbon/icons/es/close/16.js";
import Search16 from "@carbon/icons/es/search/16.js";
//#region src/components/search/search.ts
/**
* Copyright IBM Corp. 2019, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Search box.
*
* @element cds-custom-search
* @csspart search-icon The search icon.
* @csspart label-text The label text.
* @csspart input The input box.
* @csspart close-button The close button.
* @csspart close-icon The close icon.
* @fires cds-custom-search-input - The custom event fired after the search content is changed upon a user gesture.
*/
let CDSSearch = class CDSSearch extends HostListenerMixin(FocusMixin(FormMixin(LitElement))) {
	constructor(..._args) {
		super(..._args);
		this.autoComplete = "off";
		this.closeButtonLabelText = "";
		this.disabled = false;
		this.expandable = false;
		this.expanded = false;
		this.hasCustomIcon = false;
		this.labelText = "";
		this.name = "";
		this.role = "";
		this.placeholder = "Search";
		this.type = "";
		this.value = "";
	}
	/**
	* Handles `input` event on the `<input>` in the shadow DOM.
	*/
	_handleInput(event) {
		const { target } = event;
		const { value } = target;
		this.dispatchEvent(new CustomEvent(this.constructor.eventInput, {
			bubbles: true,
			composed: true,
			cancelable: false,
			detail: { value }
		}));
		this.value = value;
	}
	/**
	* Handles `click` event on the button to clear search box content.
	*/
	_handleClearInputButtonClick() {
		if (this.value) {
			this.dispatchEvent(new CustomEvent(this.constructor.eventInput, {
				bubbles: true,
				composed: true,
				cancelable: false,
				detail: { value: "" }
			}));
			this.value = "";
			this.shadowRoot.querySelector("input").focus();
		}
	}
	/**
	* Expand only when the magnifier icon is clicked
	*/
	_handleExpand(e) {
		if ((e.composedPath && e.composedPath() || []).some((n) => n?.classList?.contains(`cds-custom--search-magnifier`)) && this.expandable && !this.expanded) this._expandAndFocus();
	}
	_expandAndFocus() {
		this.setAttribute("expanded", "");
		this.shadowRoot?.getElementById("input")?.focus();
	}
	/**
	* Handle keyboard interactions:
	* - Enter/Space: expand when collapsed and focus the input
	* - Esc: if input has text: clear it | if empty: collapse and move focus back to magnifier
	*/
	_handleKeys(event) {
		const key = event.key;
		if (key === "Escape") {
			const inputEl = this.shadowRoot?.getElementById("input");
			if (this.shadowRoot?.activeElement === inputEl) {
				event.stopPropagation();
				event.preventDefault();
				if (this.value?.length) {
					this.dispatchEvent(new CustomEvent(this.constructor.eventInput, {
						bubbles: true,
						composed: true,
						cancelable: false,
						detail: { value: "" }
					}));
					this.value = "";
				} else {
					if (this.expandable && this.expanded) this.removeAttribute("expanded");
					this._focusMagnifier();
				}
			}
			return;
		}
		if (!this.expandable || this.expanded) return;
		if (key === "Enter" || key === " ") {
			event.preventDefault();
			this._expandAndFocus();
		}
	}
	/**
	* Handles `focusout` event on the component to be closed after being expanded
	* Will not close if there is a value typed within.
	*/
	_handleClose() {
		if (this.expandable && this.expanded && !this.value) this.removeAttribute("expanded");
	}
	/**
	* Handler for @slotchange, will only be ran if user sets an element under the "icon" slot.
	*
	* @private
	*/
	_handleSlotChange() {
		const icon = this.querySelector("svg");
		icon?.setAttribute("part", "search-icon");
		icon?.setAttribute("class", `cds-custom--search-magnifier-icon`);
		icon?.setAttribute("role", `img`);
		this.hasCustomIcon = true;
	}
	_handleFormdata(event) {
		const { formData } = event;
		const { disabled, name, value } = this;
		if (!disabled) formData.append(name, value);
	}
	/**
	* Move focus back to the magnifier element.
	* Adds tabindex="-1" if it is not focusable yet.
	*/
	_focusMagnifier() {
		const magnifier = this.shadowRoot?.querySelector(`.cds-custom--search-magnifier`);
		if (magnifier) {
			if (!magnifier.hasAttribute("tabindex")) magnifier.tabIndex = -1;
			magnifier.focus();
		}
	}
	render() {
		const { autoComplete, closeButtonLabelText, disabled, hasCustomIcon, labelText, name, placeholder, role, type, value = "", _handleInput: handleInput, _handleClearInputButtonClick: handleClearInputButtonClick, _handleSlotChange: handleSlotChange } = this;
		const clearClasses = classMap({
			[`cds-custom--search-close`]: true,
			[`cds-custom--search-close--hidden`]: !this.value
		});
		return html`
      <div class="${"cds-custom"}--search-magnifier">
        <slot name="icon" @slotchange=${handleSlotChange}>
          ${hasCustomIcon ? html`` : iconLoader(Search16, {
			part: "search-icon",
			class: `cds-custom--search-magnifier-icon`,
			role: "img"
		})}
        </slot>
      </div>
      <label for="input" part="label-text" class="${"cds-custom"}--label">
        <slot>${labelText}</slot>
      </label>
      <input
        autocomplete="${autoComplete}"
        id="input"
        part="input"
        type="${if_non_empty_default(type)}"
        class="${"cds-custom"}--search-input"
        ?disabled="${disabled}"
        name="${if_non_empty_default(name)}"
        placeholder="${if_non_empty_default(placeholder)}"
        role="${role}"
        .value="${value}"
        @input="${handleInput}" />
      <button
        part="close-button"
        ?disabled="${disabled}"
        class="${clearClasses}"
        @click="${handleClearInputButtonClick}"
        type="button"
        aria-label="${closeButtonLabelText}">
        ${iconLoader(Close16, {
			part: "close-icon",
			"aria-label": closeButtonLabelText,
			role: "img"
		})}
      </button>
    `;
	}
	/**
	* The name of the custom event fired after the search content is changed upon a user gesture.
	*/
	static get eventInput() {
		return `cds-custom-search-input`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = search_default$1;
	}
};
__decorate([HostListener("click")], CDSSearch.prototype, "_handleExpand", null);
__decorate([HostListener("keydown")], CDSSearch.prototype, "_handleKeys", null);
__decorate([HostListener("focusout")], CDSSearch.prototype, "_handleClose", null);
__decorate([property({ attribute: "autocomplete" })], CDSSearch.prototype, "autoComplete", void 0);
__decorate([property({ attribute: "close-button-label-text" })], CDSSearch.prototype, "closeButtonLabelText", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSearch.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSearch.prototype, "expandable", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSearch.prototype, "expanded", void 0);
__decorate([property({ type: Boolean })], CDSSearch.prototype, "hasCustomIcon", void 0);
__decorate([property({ attribute: "label-text" })], CDSSearch.prototype, "labelText", void 0);
__decorate([property()], CDSSearch.prototype, "name", void 0);
__decorate([property()], CDSSearch.prototype, "role", void 0);
__decorate([property()], CDSSearch.prototype, "placeholder", void 0);
__decorate([property({ reflect: true })], CDSSearch.prototype, "size", void 0);
__decorate([property()], CDSSearch.prototype, "type", void 0);
__decorate([property({ type: String })], CDSSearch.prototype, "value", void 0);
CDSSearch = __decorate([carbonElement(`cds-custom-search`)], CDSSearch);
var search_default = CDSSearch;
//#endregion
export { SEARCH_SIZE, search_default as default };

//# sourceMappingURL=search.js.map