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

Material web components

import { __decorate } from "tslib";
import { svg } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmMenuItem } from '../menu/menu-item.js';
import { styles } from './option.styles.js';
import './select.js';
let UmOption = class UmOption extends UmMenuItem {
    constructor() {
        super(...arguments);
        this.#mutationObserver = new MutationObserver(() => this.#updateContent());
        this.#value = '';
        this.#selected = false;
        this._nativeOption = null;
    }
    static { this.styles = [UmMenuItem.styles, styles]; }
    #mutationObserver;
    #value;
    #selected;
    get value() {
        return this.#value;
    }
    set value(value) {
        this.#value = value;
        if (this._nativeOption) {
            this._nativeOption.value = value;
        }
    }
    get selected() {
        return this.#selected;
    }
    set selected(selected) {
        if (this.#selected === selected) {
            return;
        }
        this.#selected = selected;
        if (this._nativeOption) {
            this._nativeOption.selected = selected;
        }
        this._select?._updateEmpty();
    }
    _getContainerClasses() {
        return {
            ...super._getContainerClasses(),
            selected: this.selected,
        };
    }
    _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 _select() {
        return this.parentElement?.tagName === 'U-SELECT'
            ? this.parentElement
            : null;
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('click', this.#handleClick);
        this.setAttribute('tabindex', '-1');
        this.#mutationObserver.observe(this, {
            subtree: true,
            characterData: true,
            childList: true,
        });
        this.#updateContent();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('click', this.#handleClick);
        this.#mutationObserver.disconnect();
    }
    #handleClick(e) {
        if (!this._select) {
            return;
        }
        e.stopPropagation();
        this._setSelectedByUser();
    }
    _writeNativeSelected() {
        if (!this._nativeOption) {
            return;
        }
        this.selected = this._nativeOption.selected;
    }
    _setSelectedByUser() {
        this.selected = true;
        if (!this._select) {
            return;
        }
        this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
        this._select.dispatchEvent(new Event('change', { bubbles: true }));
        this._select._updateEmpty();
        this._select._syncSelectedOptions();
        this._select._menu?.close();
    }
    #updateContent() {
        this._select?._renderOptionRelatedElements();
    }
};
__decorate([
    property({ reflect: true })
], UmOption.prototype, "value", null);
__decorate([
    property({ type: Boolean })
], UmOption.prototype, "selected", null);
UmOption = __decorate([
    customElement('u-option')
], UmOption);
export { UmOption };
//# sourceMappingURL=option.js.map