/**
 * 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 { filter } from "../../globals/internal/collection-helpers.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 time_picker_default 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 { ifDefined } from "lit/directives/if-defined.js";
import ChevronDown16 from "@carbon/icons/es/chevron--down/16.js";
//#region src/components/time-picker/time-picker-select.ts
/**
* Copyright IBM Corp. 2020, 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.
*/
/**
* Time picker select dropdown.
*
* @element cds-time-picker-select
*/
let CDSTimePickerSelect = class CDSTimePickerSelect extends FormMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this._observerMutation = null;
		this.ariaLabel = "open list of options";
		this.defaultValue = "";
		this.readOnly = false;
		this.disabled = false;
		this.id = "";
		this.name = "";
		this.value = "";
		this.size = "md";
		this._handleMutation = () => {
			this.requestUpdate();
		};
	}
	/**
	* Handles `oninput` event on the `<select>`.
	*
	* @param event The event.
	* @param event.target The event target.
	*/
	_handleInput(event) {
		const { value } = event.target;
		this.value = value;
		const { eventSelect } = this.constructor;
		this.dispatchEvent(new CustomEvent(eventSelect, {
			bubbles: true,
			composed: true,
			detail: { value }
		}));
	}
	/**
	* @returns The template containing child `<option>` elements from select items.
	*/
	_renderItems() {
		const selectorItem = `cds-select-item`;
		return filter(this.childNodes, (item) => item.nodeType === Node.ELEMENT_NODE && item.matches(selectorItem)).map((item) => {
			const disabled = item.hasAttribute("disabled");
			const label = item.getAttribute("label");
			const selected = item.hasAttribute("selected");
			const value = item.getAttribute("value");
			const { textContent } = item;
			return html`
        <option
          ?disabled="${disabled}"
          label="${ifDefined(label)}"
          ?selected="${selected}"
          value="${ifDefined(value)}">
          ${textContent}
        </option>
      `;
		});
	}
	_handleFormdata(event) {
		const { formData } = event;
		const { disabled, name, value } = this;
		if (!disabled) formData.append(name, value);
	}
	connectedCallback() {
		super.connectedCallback();
		this._observerMutation = new MutationObserver(this._handleMutation);
		this._observerMutation.observe(this, {
			attributes: true,
			childList: true,
			subtree: true
		});
	}
	disconnectedCallback() {
		if (this._observerMutation) {
			this._observerMutation.disconnect();
			this._observerMutation = null;
		}
		super.disconnectedCallback();
	}
	updated(changedProperties) {
		if (changedProperties.has("defaultValue") && this.defaultValue && !this.value) this.value = this.defaultValue;
		if (changedProperties.has("value")) {
			if (this._selectNode) this._selectNode.value = this.value;
		}
	}
	render() {
		const { ariaLabel, disabled, size, id, value, readOnly, _handleInput: handleInput } = this;
		const inputClasses = classMap({
			[`cds--select-input`]: true,
			[`cds--select-input--${size}`]: size
		});
		return html`
      <select
        id="${ifDefined(id)}"
        class="${inputClasses}"
        aria-readonly="${String(readOnly)}"
        ?disabled="${disabled}"
        aria-label="${ifDefined(ariaLabel)}"
        .value="${ifDefined(value)}"
        @input="${handleInput}">
        ${this._renderItems()}
      </select>
      ${iconLoader(ChevronDown16, {
			class: `cds--select__arrow`,
			"aria-hidden": "true"
		})}
    `;
	}
	static get eventSelect() {
		return `cds-select-selected`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = time_picker_default;
	}
};
__decorate([query("select")], CDSTimePickerSelect.prototype, "_selectNode", void 0);
__decorate([property({ attribute: "aria-label" })], CDSTimePickerSelect.prototype, "ariaLabel", void 0);
__decorate([property({ attribute: "default-value" })], CDSTimePickerSelect.prototype, "defaultValue", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTimePickerSelect.prototype, "readOnly", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTimePickerSelect.prototype, "disabled", void 0);
__decorate([property({ reflect: true })], CDSTimePickerSelect.prototype, "id", void 0);
__decorate([property()], CDSTimePickerSelect.prototype, "name", void 0);
__decorate([property({ reflect: true })], CDSTimePickerSelect.prototype, "value", void 0);
__decorate([property({ reflect: true })], CDSTimePickerSelect.prototype, "size", void 0);
CDSTimePickerSelect = __decorate([carbonElement(`cds-time-picker-select`)], CDSTimePickerSelect);
var time_picker_select_default = CDSTimePickerSelect;
//#endregion
export { time_picker_select_default as default };

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