/**
 * 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 ValidityMixin from "../../globals/mixins/validity.js";
import if_non_empty_default from "../../globals/directives/if-non-empty.js";
import time_picker_default$1 from "./time-picker.scss.js";
import "./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";
//#region src/components/time-picker/time-picker.ts
/**
* Copyright IBM Corp. 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.
*/
/**
* Time Picker component.
* @element cds-time-picker
* @slot label-text - The label text.
* @slot time-picker-select - Slot for time picker select components.
* @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
*/
let CDSTimePicker = class CDSTimePicker extends ValidityMixin(FormMixin(LitElement)) {
	constructor(..._args) {
		super(..._args);
		this._value = "";
		this.disabled = false;
		this.invalid = false;
		this.invalidText = "Invalid time format.";
		this.warning = false;
		this.warningText = "Warning message.";
		this.hideLabel = false;
		this.name = "";
		this.labelText = "Select a time";
		this.placeholder = "hh:mm";
		this.readOnly = false;
		this.maxLength = 5;
		this.pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?";
		this.size = "md";
		this.type = "text";
		this.validityMessage = "";
		this.required = false;
		this.requiredValidityMessage = "Please fill out this field.";
	}
	_handleInput({ target }) {
		this.value = target.value;
		this.dispatchEvent(new CustomEvent("change", {
			bubbles: true,
			composed: true,
			detail: { value: this.value }
		}));
	}
	/**
	* Handle slotchange event for time-picker-select slot
	* to propagate properties to child elements
	*/
	_handleSlotChange() {
		this.requestUpdate();
	}
	_handleFormdata(event) {
		const { formData } = event;
		const { disabled, name, value } = this;
		if (!disabled) formData.append(name, value);
	}
	/**
	* Value of the input
	*/
	get value() {
		return this._input ? this._input.value : this._value;
	}
	set value(value) {
		const oldValue = this._value;
		this._value = value;
		this.requestUpdate("value", oldValue);
		if (this._input) this._input.value = value;
	}
	render() {
		const { className, disabled, hideLabel, invalid, invalidText, warning, warningText, labelText, placeholder, readOnly, maxLength, pattern, size, type, value, _handleInput: handleInput, _handleSlotChange: handleSlotChange } = this;
		const normalizedProps = {
			disabled: !readOnly && disabled,
			invalid: !readOnly && !disabled && invalid,
			warn: !readOnly && !invalid && !disabled && warning
		};
		const labelClasses = classMap({
			[`cds--label`]: true,
			[`cds--visually-hidden`]: hideLabel,
			[`cds--label--disabled`]: disabled
		});
		const timePickerClasses = classMap({
			[`cds--time-picker`]: true,
			[`cds--time-picker--invalid`]: normalizedProps.invalid,
			[`cds--time-picker--warning`]: normalizedProps.warn,
			[`cds--time-picker--readonly`]: readOnly,
			[`cds--time-picker--${size}`]: size,
			...className && { [className]: true }
		});
		const inputClasses = classMap({
			[`cds--time-picker__input-field`]: true,
			[`cds--text-input`]: true,
			[`cds--time-picker__input-field-error`]: normalizedProps.invalid || normalizedProps.warn,
			...className && { [className]: true }
		});
		return html`
      <div class="${"cds"}--form-item ">
        ${labelText ? html`<label class="${labelClasses}">${labelText}</label>` : null}
        <div class="${timePickerClasses}">
          <div class="${"cds"}--time-picker__input">
            <input
              class="${inputClasses}"
              ?data-invalid="${normalizedProps.invalid}"
              ?disabled="${normalizedProps.disabled}"
              maxlength="${if_non_empty_default(maxLength)}"
              name="${if_non_empty_default(this.name)}"
              pattern="${if_non_empty_default(pattern)}"
              placeholder="${if_non_empty_default(placeholder)}"
              ?readonly="${readOnly}"
              type="${if_non_empty_default(type)}"
              .value="${value}"
              @input="${handleInput}" />
            ${normalizedProps.invalid || normalizedProps.warn ? html`
                  <div class="${"cds"}--time-picker__error__icon">
                    ${normalizedProps.invalid ? iconLoader(WarningFilled16, { class: `cds--checkbox__invalid-icon` }) : iconLoader(WarningAltFilled16, { class: `cds--text-input__invalid-icon--warning` })}
                  </div>
                ` : null}
          </div>
          <slot @slotchange="${handleSlotChange}"></slot>
        </div>
        ${normalizedProps.invalid || normalizedProps.warn ? html`
              <div class="${"cds"}--form-requirement">
                ${normalizedProps.invalid ? invalidText : warningText}
              </div>
            ` : null}
      </div>
    `;
	}
	updated(changedProperties) {
		super.updated(changedProperties);
		const { selectorTimePickerSelect } = this.constructor;
		const timePickerSelects = this.querySelectorAll(selectorTimePickerSelect);
		[
			"disabled",
			"readOnly",
			"size"
		].forEach((name) => {
			if (changedProperties.has(name)) {
				const { [name]: value } = this;
				timePickerSelects.forEach((elem) => {
					elem[name] = value;
				});
			}
		});
	}
	static get selectorTimePickerSelect() {
		return `cds-time-picker-select`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = time_picker_default$1;
	}
};
__decorate([query("input")], CDSTimePicker.prototype, "_input", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTimePicker.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTimePicker.prototype, "invalid", void 0);
__decorate([property({ attribute: "invalid-text" })], CDSTimePicker.prototype, "invalidText", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTimePicker.prototype, "warning", void 0);
__decorate([property({ attribute: "warning-text" })], CDSTimePicker.prototype, "warningText", void 0);
__decorate([property({
	attribute: "hide-label",
	type: Boolean,
	reflect: true
})], CDSTimePicker.prototype, "hideLabel", void 0);
__decorate([property()], CDSTimePicker.prototype, "name", void 0);
__decorate([property({ attribute: "label-text" })], CDSTimePicker.prototype, "labelText", void 0);
__decorate([property({ reflect: true })], CDSTimePicker.prototype, "placeholder", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTimePicker.prototype, "readOnly", void 0);
__decorate([property({
	type: Number,
	attribute: "max-length",
	reflect: true
})], CDSTimePicker.prototype, "maxLength", void 0);
__decorate([property()], CDSTimePicker.prototype, "pattern", void 0);
__decorate([property({ reflect: true })], CDSTimePicker.prototype, "size", void 0);
__decorate([property({ reflect: true })], CDSTimePicker.prototype, "type", void 0);
__decorate([property({ attribute: "validity-message" })], CDSTimePicker.prototype, "validityMessage", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTimePicker.prototype, "required", void 0);
__decorate([property({ attribute: "required-validity-message" })], CDSTimePicker.prototype, "requiredValidityMessage", void 0);
__decorate([property({ reflect: true })], CDSTimePicker.prototype, "value", null);
CDSTimePicker = __decorate([carbonElement(`cds-time-picker`)], CDSTimePicker);
var time_picker_default = CDSTimePicker;
//#endregion
export { time_picker_default as default };

//# sourceMappingURL=time-picker.js.map