@universal-material/web/select/option.js

Material web components

import { __decorate } from "tslib";
import { svg } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UmMenuItem } from '../menu/menu-item.js';
import { styles } from './option.styles.js';
import { UmSelect } from './select.js';
import './select.js';
let UmOption = class UmOption extends UmMenuItem {
    constructor() {
        super(...arguments);
        this._nativeOption = (() => {
            const option = document.createElement('option');
            option._parent = this;
            if (this.hasAttribute('selected')) {
                option.setAttribute('selected', '');
            }
            option.textContent = this.textContent;
            return option;
        })();
    }
    static { this.styles = [UmMenuItem.styles, styles]; }
    get value() {
        return this._nativeOption.value;
    }
    set value(value) {
        this._nativeOption.value = value;
    }
    get selected() {
        return this._nativeOption.selected;
    }
    set selected(selected) {
        if (this.selected === selected) {
            return;
        }
        this._nativeOption.selected = selected;
        if (selected) {
            this.classList.add('selected');
        }
        else {
            this.classList.remove('selected');
        }
        if (!this._select) {
            return;
        }
        // this._select._button.setAttribute('aria-labelledby', this._listItem.id);
        this._select.empty = !this._nativeOption.textContent?.trim();
    }
    renderDefaultTrailingIcon() {
        return svg `
      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
      </svg>`;
    }
    get _selectedAttribute() {
        return this._nativeOption.hasAttribute('selected');
    }
    // @ts-ignore
    set _selectedAttribute(selected) {
        if (selected) {
            this._nativeOption.setAttribute('selected', '');
            return;
        }
        this._nativeOption.removeAttribute('selected');
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('click', this.#handleClick);
        this.setAttribute('tabindex', '-1');
        this.#attach();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('click', this.#handleClick);
        if (this._select === this.parentElement) {
            return;
        }
        this._nativeOption.remove();
        if (!this._select) {
            return;
        }
        this._select.value = this._select.value;
        this._select = null;
    }
    async #attach() {
        if (this._select === this.parentElement) {
            return;
        }
        this._select = this.parentElement instanceof UmSelect ? this.parentElement : null;
        await this.#setNativeOption();
    }
    #handleClick(e) {
        if (!this._select) {
            return;
        }
        e.stopPropagation();
        this.setSelectedByUser();
    }
    setSelectedByUser() {
        if (!this._select) {
            return;
        }
        this._select.selectedOptions[0]?.classList.remove('selected');
        this.selected = true;
        this._select.value = this._select.value;
        this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
        this._select.dispatchEvent(new Event('change', { bubbles: true }));
        this._select._menu?.close();
    }
    #updateContent() {
        this._nativeOption.textContent = this.textContent;
    }
    async #setNativeOption() {
        await this.updateComplete;
        this.#updateContent();
        this._select?._updateOptions();
    }
};
__decorate([
    property({ reflect: true })
], UmOption.prototype, "value", null);
__decorate([
    state()
], UmOption.prototype, "selected", null);
__decorate([
    property({ type: Boolean, attribute: 'selected' })
    // @ts-ignore
], UmOption.prototype, "_selectedAttribute", null);
UmOption = __decorate([
    customElement('u-option')
], UmOption);
export { UmOption };
//# sourceMappingURL=option.js.map