/**
 * 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 FormMixin from "../../globals/mixins/form.js";
import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
import ValidityMixin from "../../globals/mixins/validity.js";
import if_non_empty_default from "../../globals/directives/if-non-empty.js";
import { INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_DIRECTION, INPUT_TYPE } from "./defs.js";
import text_input_default$1 from "./text-input.scss.js";
import { LitElement, html } from "lit";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import WarningFilled16 from "@carbon/icons/es/warning--filled/16.js";
import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16.js";
import View16 from "@carbon/icons/es/view/16.js";
import ViewOff16 from "@carbon/icons/es/view--off/16.js";
//#region src/components/text-input/text-input.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.
*/
/**
* Text Input element. Supports all the usual attributes for textual input types
*
* @element cds-text-input
* @slot helper-text - The helper text.
* @slot label-text - The label text.
* @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
*/
let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {
	constructor(..._args) {
		super(..._args);
		this._hasAILabel = false;
		this._value = "";
		this.autocomplete = "";
		this.autofocus = false;
		this.disabled = false;
		this.enableCounter = false;
		this.helperText = "";
		this.invalid = false;
		this.invalidText = "";
		this.warn = false;
		this.warnText = "";
		this.hideLabel = false;
		this.label = "";
		this.name = "";
		this.pattern = "";
		this.placeholder = "";
		this.readonly = false;
		this.required = false;
		this.requiredValidityMessage = "Please fill out this field.";
		this.hidePasswordLabel = "Hide password";
		this.showPasswordLabel = "Show password";
		this.showPasswordVisibilityToggle = false;
		this.isFluid = false;
		this.inline = false;
		this.tooltipAlignment = "center";
		this.tooltipDirection = "bottom";
		this.type = "text";
		this.validityMessage = "";
	}
	/**
	* Handles `slotchange` event.
	*/
	_handleSlotChange({ target }) {
		const hasContent = target.assignedNodes().filter((elem) => elem.matches !== void 0 ? elem.matches(this.constructor.aiLabelItem) || elem.matches(this.constructor.slugItem) : false);
		this._hasAILabel = Boolean(hasContent);
		hasContent[0].setAttribute("size", "mini");
		this.requestUpdate();
	}
	/**
	* Handles `oninput` event on the `input`.
	*
	* @param event The event.
	* @param event.target The event target.
	*/
	_handleInput({ target }) {
		this.value = target.value;
	}
	_handleFormdata(event) {
		const { formData } = event;
		const { disabled, name, value } = this;
		if (!disabled) formData.append(name, value);
	}
	_handleHelperTextSlotChange() {
		this.requestUpdate();
	}
	/**
	* The value of the input.
	*/
	get value() {
		if (this._input) return this._input.value;
		return this._value;
	}
	set value(value) {
		const oldValue = this._value;
		this._value = value;
		this.requestUpdate("value", oldValue);
		if (this._input) this._input.value = value;
	}
	/**
	* Handles password visibility toggle button click
	*
	* @deprecated will be removed in the next major version, use `cds-password-input` instead
	*/
	togglePasswordVisibility() {
		this.type = this.type === "password" ? "text" : "password";
	}
	render() {
		const { disabled, enableCounter, helperText, hideLabel, inline, isFluid, invalid, invalidText, label, maxCount, readonly, required, size, type, warn, warnText, value, _handleInput: handleInput, _hasAILabel: hasAILabel, _handleSlotChange: handleSlotChange } = this;
		const invalidIcon = iconLoader(WarningFilled16, { class: `cds--text-input__invalid-icon` });
		const warnIcon = iconLoader(WarningAltFilled16, { class: `cds--text-input__invalid-icon cds--text-input__invalid-icon--warning` });
		const normalizedProps = {
			disabled: !readonly && disabled,
			invalid: !readonly && invalid,
			warn: !readonly && !invalid && warn,
			"slot-name": "",
			"slot-text": "",
			icon: null
		};
		if (normalizedProps.invalid) {
			normalizedProps.icon = invalidIcon;
			normalizedProps["slot-name"] = "invalid-text";
			normalizedProps["slot-text"] = invalidText;
		} else if (normalizedProps.warn) {
			normalizedProps.icon = warnIcon;
			normalizedProps["slot-name"] = "warn-text";
			normalizedProps["slot-text"] = warnText;
		}
		const counterClasses = classMap({
			[`cds--label`]: true,
			[`cds--text-input__label-counter`]: true,
			[`cds--label--disabled`]: disabled
		});
		const inputWrapperClasses = classMap({
			[`cds--form-item`]: true,
			[`cds--text-input-wrapper`]: true,
			[`cds--text-input-wrapper--inline`]: inline,
			[`cds--text-input-wrapper--readonly`]: readonly,
			[`cds--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid
		});
		const inputClasses = classMap({
			[`cds--text-input`]: true,
			[`cds--text-input--invalid`]: normalizedProps.invalid,
			[`cds--text-input--warning`]: normalizedProps.warn,
			[`cds--text-input--${size}`]: size !== void 0,
			[`cds--layout--size-${size}`]: size !== void 0,
			[`cds--password-input`]: type === "password"
		});
		const fieldOuterWrapperClasses = classMap({
			[`cds--text-input__field-outer-wrapper`]: true,
			[`cds--text-input__field-outer-wrapper--inline`]: inline
		});
		const fieldWrapperClasses = classMap({
			[`cds--text-input__field-wrapper`]: true,
			[`cds--text-input__field-wrapper--warning`]: normalizedProps.warn,
			[`cds--text-input__field-wrapper--decorator`]: hasAILabel
		});
		const labelClasses = classMap({
			[`cds--label`]: true,
			[`cds--visually-hidden`]: hideLabel,
			[`cds--label--disabled`]: normalizedProps.disabled,
			[`cds--label--inline`]: inline
		});
		const helperTextClasses = classMap({
			[`cds--form__helper-text`]: true,
			[`cds--form__helper-text--disabled`]: normalizedProps.disabled,
			[`cds--form__helper-text--inline`]: inline
		});
		const passwordIsVisible = type !== "password";
		const passwordVisibilityIcon = passwordIsVisible ? iconLoader(ViewOff16, { class: `cds--icon-visibility-off` }) : iconLoader(View16, { class: `cds--icon-visibility-on` });
		const passwordVisibilityToggleClasses = classMap({
			[`cds--text-input--password__visibility__toggle`]: true,
			[`cds--btn`]: true,
			[`cds--btn--icon-only`]: true,
			[`cds--tooltip__trigger`]: true,
			[`cds--tooltip--a11y`]: true,
			[`cds--btn--disabled`]: normalizedProps.disabled,
			[`cds--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,
			[`cds--tooltip--align-${this.tooltipAlignment}`]: this.tooltipAlignment
		});
		const passwordButtonLabel = html`
      <span class="${"cds"}--assistive-text">
        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}
      </span>
    `;
		const passwordVisibilityButton = () => html`
      <button
        type="button"
        class="${passwordVisibilityToggleClasses}"
        ?disabled="${normalizedProps.disabled}"
        @click="${this.togglePasswordVisibility}">
        ${!normalizedProps.disabled ? passwordButtonLabel : null}
        ${passwordVisibilityIcon}
      </button>
    `;
		const textCount = value?.length;
		const labelWrapper = html`<div class="${"cds"}--text-input__label-wrapper">
      <label class="${labelClasses}">
        <slot name="label-text">${label}</slot>
      </label>
      ${enableCounter && maxCount ? html` <label class="${counterClasses}">
            <slot name="label-text">${textCount}/${maxCount}</slot>
          </label>` : null}
    </div>`;
		const hasHelperText = helperText || (this._slotHelperTextNode?.assignedNodes().length ?? 0) > 0;
		const helper = html`<div
      class="${helperTextClasses}"
      id="helper-text"
      ?hidden="${normalizedProps.invalid || normalizedProps.warn || !hasHelperText}">
      <slot
        name="helper-text"
        @slotchange="${this._handleHelperTextSlotChange}">
        ${helperText}
      </slot>
    </div>`;
		const validationMessage = normalizedProps.invalid || normalizedProps.warn ? html`<div
            class="${"cds"}--form-requirement"
            ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
            <slot name="${normalizedProps["slot-name"]}">
              ${normalizedProps["slot-text"]}
            </slot>
          </div>` : null;
		return html`
      <div class="${inputWrapperClasses}">
        ${!inline ? labelWrapper : html`<div class="${"cds"}--text-input__label-helper-wrapper">
              ${labelWrapper}
            </div>`}
        <div class="${fieldOuterWrapperClasses}">
          <div class="${fieldWrapperClasses}" ?data-invalid="${invalid}">
            <input
              autocomplete="${this.autocomplete}"
              ?autofocus="${this.autofocus}"
              class="${inputClasses}"
              ?data-invalid="${invalid}"
              ?disabled="${disabled}"
              ?aria-describedby="${hasHelperText ? "helper-text" : void 0}"
              id="input"
              name="${if_non_empty_default(this.name)}"
              pattern="${if_non_empty_default(this.pattern)}"
              placeholder="${if_non_empty_default(this.placeholder)}"
              ?readonly="${readonly}"
              ?required="${required}"
              type="${if_non_empty_default(type)}"
              .value="${this._value}"
              maxlength="${if_non_empty_default(maxCount)}"
              @input="${handleInput}" />
            ${normalizedProps.icon}
            <slot name="ai-label" @slotchange="${handleSlotChange}"></slot>
            <slot name="slug" @slotchange="${handleSlotChange}"></slot>
            ${this.showPasswordVisibilityToggle && (type === "password" || type === "text") ? passwordVisibilityButton() : null}
            ${isFluid ? html`<hr class="${"cds"}--text-input__divider" />` : null}
            ${isFluid && !inline ? validationMessage : null}
          </div>

          ${""}
          ${!isFluid && !inline ? validationMessage || helper : null}
        </div>
        ${inline && !isFluid ? html`<div class="${"cds"}--text-input__label-helper-wrapper">
              ${!isFluid ? validationMessage || helper : null}
            </div>` : null}
      </div>
    `;
	}
	updated() {
		this.toggleAttribute("ai-label", this._hasAILabel);
		const label = this.shadowRoot?.querySelector("slot[name='ai-label']");
		if (label) label?.classList.toggle(`cds--slug--revert`, this.querySelector(`cds-ai-label`)?.hasAttribute("revert-active"));
		else this.shadowRoot?.querySelector("slot[name='slug']")?.classList.toggle(`cds--slug--revert`, this.querySelector(`cds-slug`)?.hasAttribute("revert-active"));
	}
	/**
	* A selector that will return the slug item.
	*
	* remove in v12
	*/
	static get slugItem() {
		return `cds-slug`;
	}
	/**
	* A selector that will return the AI Label item.
	*/
	static get aiLabelItem() {
		return `cds-ai-label`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = text_input_default$1;
	}
};
__decorate([query("input")], CDSTextInput.prototype, "_input", void 0);
__decorate([query("slot[name=\"helper-text\"]")], CDSTextInput.prototype, "_slotHelperTextNode", void 0);
__decorate([property()], CDSTextInput.prototype, "autocomplete", void 0);
__decorate([property({ type: Boolean })], CDSTextInput.prototype, "autofocus", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTextInput.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	attribute: "enable-counter",
	reflect: true
})], CDSTextInput.prototype, "enableCounter", void 0);
__decorate([property({ attribute: "helper-text" })], CDSTextInput.prototype, "helperText", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTextInput.prototype, "invalid", void 0);
__decorate([property({ attribute: "invalid-text" })], CDSTextInput.prototype, "invalidText", void 0);
__decorate([property({
	type: Number,
	attribute: "max-count",
	reflect: true
})], CDSTextInput.prototype, "maxCount", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTextInput.prototype, "warn", void 0);
__decorate([property({ attribute: "warn-text" })], CDSTextInput.prototype, "warnText", void 0);
__decorate([property({
	attribute: "hide-label",
	type: Boolean,
	reflect: true
})], CDSTextInput.prototype, "hideLabel", void 0);
__decorate([property({ attribute: "label" })], CDSTextInput.prototype, "label", void 0);
__decorate([property()], CDSTextInput.prototype, "name", void 0);
__decorate([property()], CDSTextInput.prototype, "pattern", void 0);
__decorate([property({ reflect: true })], CDSTextInput.prototype, "placeholder", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTextInput.prototype, "readonly", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTextInput.prototype, "required", void 0);
__decorate([property({ attribute: "required-validity-message" })], CDSTextInput.prototype, "requiredValidityMessage", void 0);
__decorate([property()], CDSTextInput.prototype, "hidePasswordLabel", void 0);
__decorate([property()], CDSTextInput.prototype, "showPasswordLabel", void 0);
__decorate([property({
	type: Boolean,
	attribute: "show-password-visibility-toggle",
	reflect: true
})], CDSTextInput.prototype, "showPasswordVisibilityToggle", void 0);
__decorate([property({ reflect: true })], CDSTextInput.prototype, "size", void 0);
__decorate([property({ type: Boolean })], CDSTextInput.prototype, "isFluid", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTextInput.prototype, "inline", void 0);
__decorate([property()], CDSTextInput.prototype, "tooltipAlignment", void 0);
__decorate([property()], CDSTextInput.prototype, "tooltipDirection", void 0);
__decorate([property({ reflect: true })], CDSTextInput.prototype, "type", void 0);
__decorate([property({ attribute: "validity-message" })], CDSTextInput.prototype, "validityMessage", void 0);
__decorate([property({ reflect: true })], CDSTextInput.prototype, "value", null);
CDSTextInput = __decorate([carbonElement(`cds-text-input`)], CDSTextInput);
var text_input_default = CDSTextInput;
//#endregion
export { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_DIRECTION, INPUT_TYPE, text_input_default as default };

//# sourceMappingURL=text-input.js.map