/**
 * 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 "../tooltip/tooltip-content.js";
import "../tooltip/index.js";
import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
import if_non_empty_default from "../../globals/directives/if-non-empty.js";
import text_input_default from "../text-input/text-input.js";
import password_input_default$1 from "./password-input.scss.js";
import { INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_DIRECTION, INPUT_TYPE } from "./defs.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/password-input/password-input.ts
/**
* Copyright IBM Corp. 2025, 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.
*/
/**
* Password Input element. Supports all the usual attributes for textual input types
*
* @element cds-password-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 CDSPasswordInput = class CDSPasswordInput extends text_input_default {
	constructor(..._args) {
		super(..._args);
		this.hidePasswordLabel = "Hide password";
		this.showPasswordLabel = "Show password";
		this.type = "password";
		this.tooltipAlignment = "end";
		this.isFluid = false;
		this.tooltipDirection = "bottom";
	}
	/**
	* Handles `oninput` event on the `input`.
	*
	* @param event The event.
	* @param event.target The event target.
	*/
	_handleInput({ target }) {
		this.value = target.value;
	}
	/**
	* Handles password visibility toggle button click
	*/
	handleTogglePasswordVisibility() {
		if (this.disabled) return;
		this.type = this.type === "password" ? "text" : "password";
	}
	render() {
		const { disabled, helperText, hideLabel, inline, invalid, invalidText, label, readonly, required, isFluid, size, type, warn, warnText, _handleInput: handleInput, _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 inputWrapperClasses = classMap({
			[`cds--form-item`]: true,
			[`cds--text-input-wrapper`]: true,
			[`cds--password-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--password-input`]: true
		});
		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--layout--size-${size}`]: size !== void 0
		});
		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 passwordVisibilityTooltipClasses = classMap({
			[`cds--toggle-password-tooltip`]: true,
			[`cds--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,
			[`cds--tooltip--align-${this.tooltipAlignment}`]: this.tooltipAlignment
		});
		const passwordVisibilityButtonClasses = classMap({
			[`cds--text-input--password__visibility__toggle`]: true,
			[`cds--btn`]: true,
			[`cds--tooltip__trigger`]: true,
			[`cds--tooltip--a11y`]: true,
			[`cds--btn--disabled`]: normalizedProps.disabled || readonly
		});
		const labelWrapper = html`<div class="${"cds"}--text-input__label-wrapper">
      <label class="${labelClasses}"> ${label} </label>
    </div>`;
		const helper = helperText ? html`<div
          class="${helperTextClasses}"
          id="helper-text"
          ?hidden="${normalizedProps.invalid || normalizedProps.warn}">
          <slot name="helper-text"> ${helperText} </slot>
        </div>` : null;
		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;
		let align = "";
		if (this.tooltipDirection === "top" || this.tooltipDirection === "bottom") {
			if (this.tooltipAlignment === "center") align = this.tooltipDirection;
			if (this.tooltipAlignment === "end") align = `${this.tooltipDirection}-right`;
			if (this.tooltipAlignment === "start") align = `${this.tooltipDirection}-left`;
		}
		if (this.tooltipDirection === "right" || this.tooltipDirection === "left") align = this.tooltipDirection;
		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}">
            ${normalizedProps.icon}
            <input
              ?autofocus="${this.autofocus}"
              class="${inputClasses}"
              ?data-invalid="${invalid}"
              ?disabled="${disabled}"
              aria-describedby="helper-text"
              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}"
              @input="${handleInput}" />
            <slot name="slug" @slotchange="${handleSlotChange}"></slot>
            <cds-tooltip
              align="${align}"
              class="${passwordVisibilityTooltipClasses}"
              .dropShadow="${false}"
              ?disabled="${normalizedProps.disabled}">
              <button
                ?disabled="${normalizedProps.disabled}"
                type="button"
                role="button"
                class="${passwordVisibilityButtonClasses}"
                aria-labelledby="content"
                @click="${this.handleTogglePasswordVisibility}">
                ${passwordVisibilityIcon}
              </button>
              <cds-tooltip-content
                id="content"
                ?toggle-password-tooltip-content="${!isFluid}"
                ?hidden="${normalizedProps.disabled}">
                ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}
              </cds-tooltip-content>
            </cds-tooltip>
            ${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>
    `;
	}
	async firstUpdated() {
		await this._passwordTooltip?.updateComplete;
		this._passwordTooltip?.shadowRoot?.querySelector(`.cds--tooltip`)?.classList.add(`cds--icon-tooltip`);
	}
	/**
	* A selector that will return the slug item.
	*
	* remove in v12
	*/
	static get slugItem() {
		return `cds-slug`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = password_input_default$1;
	}
};
__decorate([query(`cds-tooltip`)], CDSPasswordInput.prototype, "_passwordTooltip", void 0);
__decorate([property({
	type: String,
	attribute: "hide-password-label",
	reflect: true
})], CDSPasswordInput.prototype, "hidePasswordLabel", void 0);
__decorate([property({
	type: String,
	attribute: "show-password-label",
	reflect: true
})], CDSPasswordInput.prototype, "showPasswordLabel", void 0);
__decorate([property({ reflect: true })], CDSPasswordInput.prototype, "type", void 0);
__decorate([property({
	type: String,
	attribute: "tooltip-alignment",
	reflect: true
})], CDSPasswordInput.prototype, "tooltipAlignment", void 0);
__decorate([property({ type: Boolean })], CDSPasswordInput.prototype, "isFluid", void 0);
__decorate([property({
	type: String,
	attribute: "tooltip-position",
	reflect: true
})], CDSPasswordInput.prototype, "tooltipDirection", void 0);
CDSPasswordInput = __decorate([carbonElement(`cds-password-input`)], CDSPasswordInput);
var password_input_default = CDSPasswordInput;
//#endregion
export { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_DIRECTION, INPUT_TYPE, password_input_default as default };

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