/**
 * 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 { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
import "../text-input/defs.js";
import "../text-input/text-input.js";
import { DATE_PICKER_INPUT_KIND } from "./defs.js";
import date_picker_default from "./date-picker.scss.js";
import { LitElement, html } from "lit";
import { property, query, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import WarningFilled16 from "@carbon/icons/es/warning--filled/16.js";
import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16.js";
import Calendar16 from "@carbon/icons/es/calendar/16.js";
//#region src/components/date-picker/date-picker-input.ts
/**
* Copyright IBM Corp. 2019, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* The input box for date picker.
*
* @element cds-date-picker-input
*/
let CDSDatePickerInput = class CDSDatePickerInput extends FocusMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this._hasAILabel = false;
		this._hasHelperText = false;
		this.colorScheme = "";
		this.disabled = false;
		this.hideLabel = false;
		this.invalid = false;
		this.invalidText = "";
		this.kind = "simple";
		this.readonly = false;
		this.required = false;
		this.short = false;
		this.size = "md";
		this.warn = false;
		this.warnText = "";
	}
	/**
	* Handles `slotchange` event.
	*/
	_handleAILabelSlotChange({ 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 `click` event on the calendar icon.
	*
	* @param event The event.
	*/
	_handleClickWrapper(event) {
		if (event.target === this._iconNode) this.input.focus();
	}
	/**
	* Handles `input` event on `<input>` in the shadow DOM.
	*
	* @param event The event.
	* @param event.target The event target.
	*/
	_handleInput({ target }) {
		const { value } = target;
		this.value = value;
	}
	/**
	* @returns The template for the the calendar icon.
	*/
	_renderIcon() {
		return this.kind === "simple" ? void 0 : iconLoader(Calendar16, {
			class: `cds--date-picker__icon`,
			role: "img",
			title: "Open calendar"
		});
	}
	/**
	* Handles `slotchange` event on the default `<slot>`.
	*/
	_handleSlotChange({ target }) {
		if (!target.name) {
			const hasContent = target.assignedNodes().some((node) => node.nodeType !== Node.TEXT_NODE || node.textContent.trim());
			this._hasHelperText = hasContent;
		}
	}
	render() {
		const constructor = this.constructor;
		const { disabled, _hasHelperText: hasHelperText, hideLabel, invalid, invalidText, labelText, pattern = constructor.defaultPattern, placeholder, readonly, size, type = constructor.defaultType, value, warn, warnText, _handleClickWrapper: handleClickWrapper, _handleInput: handleInput, _hasAILabel: hasAILabel } = this;
		const invalidIcon = iconLoader(WarningFilled16, { class: `cds--date-picker__icon cds--date-picker__icon--invalid` });
		const warnIcon = iconLoader(WarningAltFilled16, { class: `cds--date-picker__icon cds--date-picker__icon--warn` });
		const normalizedProps = {
			disabled: disabled && !readonly,
			invalid: invalid && !readonly && !disabled,
			warn: warn && !readonly && !disabled && !invalid,
			"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 labelClasses = classMap({
			[`cds--label`]: true,
			[`cds--visually-hidden`]: hideLabel,
			[`cds--label--disabled`]: disabled
		});
		const inputClasses = classMap({
			[`cds--date-picker__input`]: true,
			[`cds--date-picker__input--invalid`]: normalizedProps.invalid,
			[`cds--date-picker__input--warn`]: normalizedProps.warn,
			[`cds--date-picker__input--${size}`]: size,
			[`cds--date-picker__input--decorator`]: hasAILabel
		});
		const inputWrapperClasses = classMap({
			[`cds--date-picker-input__wrapper`]: true,
			[`cds--date-picker-input__wrapper--invalid`]: normalizedProps.invalid,
			[`cds--date-picker-input__wrapper--warn`]: normalizedProps.warn
		});
		const helperTextClasses = classMap({
			[`cds--form__helper-text`]: true,
			[`cds--form__helper-text--disabled`]: disabled
		});
		return html`
      <label for="input" class="${labelClasses}">
        <slot name="label-text">${labelText}</slot>
      </label>
      <div class="${inputWrapperClasses}" @click="${handleClickWrapper}">
        <span>
          <input
            id="input"
            type="${type}"
            class="${inputClasses}"
            ?disabled="${normalizedProps.disabled}"
            pattern="${pattern}"
            placeholder="${ifDefined(placeholder)}"
            .value="${ifDefined(value)}"
            ?data-invalid="${normalizedProps.invalid}"
            @input="${handleInput}"
            ?readonly="${readonly}" />
          ${normalizedProps.icon || this._renderIcon()}
          <slot
            name="ai-label"
            @slotchange="${this._handleAILabelSlotChange}"></slot>
          <slot
            name="slug"
            @slotchange="${this._handleAILabelSlotChange}"></slot>
        </span>
      </div>
      <div
        class="${"cds"}--form-requirement"
        ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
        <slot name="${normalizedProps["slot-name"]}">
          ${normalizedProps["slot-text"]}
        </slot>
      </div>
      <div ?hidden="${hasHelperText}" class="${helperTextClasses}">
        <slot name="helper-text" @slotchange="${this._handleSlotChange}"></slot>
      </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"));
	}
	static {
		this.defaultPattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
	}
	static {
		this.defaultType = "text";
	}
	/**
	* A selector that will return the parent date picker.
	*/
	static get selectorParent() {
		return `cds-date-picker`;
	}
	/**
	* 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 = date_picker_default;
	}
};
__decorate([query(`.cds--date-picker__icon`)], CDSDatePickerInput.prototype, "_iconNode", void 0);
__decorate([state()], CDSDatePickerInput.prototype, "_hasHelperText", void 0);
__decorate([query("input")], CDSDatePickerInput.prototype, "input", void 0);
__decorate([property({
	attribute: "color-scheme",
	reflect: true
})], CDSDatePickerInput.prototype, "colorScheme", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSDatePickerInput.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	reflect: true,
	attribute: "hide-label"
})], CDSDatePickerInput.prototype, "hideLabel", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSDatePickerInput.prototype, "invalid", void 0);
__decorate([property({ attribute: "invalid-text" })], CDSDatePickerInput.prototype, "invalidText", void 0);
__decorate([property({ reflect: true })], CDSDatePickerInput.prototype, "kind", void 0);
__decorate([property({ attribute: "label-text" })], CDSDatePickerInput.prototype, "labelText", void 0);
__decorate([property()], CDSDatePickerInput.prototype, "pattern", void 0);
__decorate([property()], CDSDatePickerInput.prototype, "placeholder", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSDatePickerInput.prototype, "readonly", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSDatePickerInput.prototype, "required", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSDatePickerInput.prototype, "short", void 0);
__decorate([property({
	attribute: "size",
	reflect: true
})], CDSDatePickerInput.prototype, "size", void 0);
__decorate([property()], CDSDatePickerInput.prototype, "type", void 0);
__decorate([property()], CDSDatePickerInput.prototype, "value", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSDatePickerInput.prototype, "warn", void 0);
__decorate([property({ attribute: "warn-text" })], CDSDatePickerInput.prototype, "warnText", void 0);
CDSDatePickerInput = __decorate([carbonElement(`cds-date-picker-input`)], CDSDatePickerInput);
var date_picker_input_default = CDSDatePickerInput;
//#endregion
export { FORM_ELEMENT_COLOR_SCHEME as DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND, date_picker_input_default as default };

//# sourceMappingURL=date-picker-input.js.map