@3mo/select-field/dist/Option.js

A select field web component

import { __decorate } from "tslib";
import { component, property, css, html, eventListener, event } from '@a11d/lit';
import { SelectionListItem } from '@3mo/list';
let Option = class Option extends SelectionListItem {
    constructor() {
        super(...arguments);
        this.role = 'option';
        this.selected = false;
        this.multiple = false;
        this.preventClickOnSpace = true;
    }
    dataMatches(data) {
        return JSON.stringify(this.data) === JSON.stringify(data);
    }
    get normalizedValue() {
        return this.normalizeValue(this.value);
    }
    valueMatches(value) {
        return this.normalizedValue === this.normalizeValue(value);
    }
    normalizeValue(value) {
        return typeof value === 'number'
            ? value
            : isNaN(Number(value))
                ? value
                : Number(value);
    }
    get text() {
        return this.inputText ?? this.textContent?.trim() ?? '';
    }
    textMatches(text) {
        return [this.textContent, this.inputText]
            .map(text => text?.replaceAll(/\s+/g, '').toLowerCase())
            .filter(Boolean)
            .some(keyword => keyword.includes(text.toLowerCase()));
    }
    static get styles() {
        return css `
			${super.styles}

			:host {
				cursor: pointer;
				min-height: 36px;
				width: 100%;
			}

			:host([focused]) {
				background-color: var(--mo-color-transparent-gray);
			}

			:host([selected]) {
				background-color: var(--mo-color-accent-transparent);
			}

			:host([data-search-no-match]) {
				display: none;
				pointer-events: none;
			}

			mo-checkbox {
				height: fit-content;
				margin-inline-start: auto;
			}
		`;
    }
    get template() {
        return html `
			${super.template}
			${this.checkboxTemplate}
		`;
    }
    get checkboxTemplate() {
        return !this.multiple ? html.nothing : html `
			<mo-checkbox tabindex='-1'
				?selected=${this.selected}
				@click=${(e) => e.stopImmediatePropagation()}
				@change=${(e) => this.handleChange(e.detail)}
			></mo-checkbox>
		`;
    }
    handleClick() {
        this.handleChange(!this.multiple || !this.selected);
    }
    handleChange(value) {
        this.selected = value;
        this.change.dispatch(value);
    }
};
__decorate([
    event({ bubbles: true, cancelable: true, composed: true })
], Option.prototype, "requestSelectValueUpdate", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], Option.prototype, "selected", void 0);
__decorate([
    property({ type: Number, reflect: true, updated() { this.requestSelectValueUpdate.dispatch(); } })
], Option.prototype, "index", void 0);
__decorate([
    property({ updated() { this.requestSelectValueUpdate.dispatch(); } })
], Option.prototype, "value", void 0);
__decorate([
    property({ type: Object, updated() { this.requestSelectValueUpdate.dispatch(); } })
], Option.prototype, "data", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], Option.prototype, "multiple", void 0);
__decorate([
    property()
], Option.prototype, "inputText", void 0);
__decorate([
    eventListener('click')
], Option.prototype, "handleClick", null);
Option = __decorate([
    component('mo-option')
], Option);
export { Option };