var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, customElement, html, state } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../lit-element/index.js';
/**
 * Default element for the collection text filter extension.
 *
 * Renders a text input that allows users to filter collection items.
 * Works in conjunction with {@link UmbDefaultCollectionTextFilterApi} to apply the filter.
 * @element umb-default-collection-text-filter
 */
let UmbDefaultCollectionTextFilterElement = class UmbDefaultCollectionTextFilterElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this._text = undefined;
    }
    #api;
    /**
     * The API instance that handles the filter logic.
     * This is set by the extension system when the element is created.
     * @returns {UmbCollectionTextFilterApi | undefined} The collection text filter API instance.
     */
    get api() {
        return this.#api;
    }
    /**
     * Sets the API instance that handles the filter logic.
     * @param {UmbCollectionTextFilterApi | undefined} value - The collection text filter API instance.
     */
    set api(value) {
        this.#api = value;
        this.observe(this.#api?.text, (value) => (this._text = value), 'umbApiTextObserver');
    }
    #onTextFilterChange(event) {
        const target = event.target;
        const value = target.value || '';
        this.#api?.setText(value);
    }
    render() {
        return html `
			<uui-input
				value=${this._text || ''}
				@input=${this.#onTextFilterChange}
				label=${this.localize.term('placeholders_filter')}
				placeholder=${this.localize.term('placeholders_filter')}
				data-mark="collection-text-filter"></uui-input>
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: flex;
				flex: 1 1 auto;
			}

			uui-input {
				width: 100%;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbDefaultCollectionTextFilterElement.prototype, "_text", void 0);
UmbDefaultCollectionTextFilterElement = __decorate([
    customElement('umb-default-collection-text-filter')
], UmbDefaultCollectionTextFilterElement);
export { UmbDefaultCollectionTextFilterElement };
export { UmbDefaultCollectionTextFilterElement as element };
