select-pure/lib/components/Option.js

Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient

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 { boundMethod } from "autobind-decorator";
import { LitElement, html } from "lit";
import { ifDefined } from "lit-html/directives/if-defined.js";
import { customElement } from "lit/decorators/custom-element.js";
import { property } from "lit/decorators/property.js";
import { KEYS } from "./../constants";
import { optionStyles } from "./../styles";
let OptionPure = class OptionPure extends LitElement {
    constructor() {
        super(...arguments);
        this.isSelected = false;
        this.isDisabled = false;
        this.isHidden = false;
        this.optionValue = "";
        this.displayedLabel = "";
        this.optionIndex = -1;
    }
    static get styles() {
        return optionStyles;
    }
    connectedCallback() {
        super.connectedCallback();
        this.isSelected = this.getAttribute("selected") !== null;
        this.isDisabled = this.getAttribute("disabled") !== null;
        this.isHidden = this.getAttribute("hidden") !== null;
        this.optionValue = this.getAttribute("value") || "";
        this.assignDisplayedLabel();
        this.fireOnReadyCallback();
    }
    getOption() {
        return {
            label: this.displayedLabel,
            value: this.optionValue,
            select: this.select,
            unselect: this.unselect,
            selected: this.isSelected,
            disabled: this.isDisabled,
            hidden: this.isHidden,
        };
    }
    select() {
        this.isSelected = true;
        this.setAttribute("selected", "");
    }
    unselect() {
        this.isSelected = false;
        this.removeAttribute("selected");
    }
    setOnReadyCallback(onReadyCallback, optionIndex) {
        this.onReady = onReadyCallback;
        this.optionIndex = optionIndex;
    }
    setOnSelectCallback(callback) {
        this.onSelect = callback;
    }
    render() {
        const optionWrapperClassNames = ["option"];
        if (this.isSelected) {
            optionWrapperClassNames.push("selected");
        }
        if (this.isDisabled) {
            optionWrapperClassNames.push("disabled");
        }
        return html `
      <div
        class="${optionWrapperClassNames.join(" ")}"
        @click=${this.fireOnSelectCallback}
        @keydown="${this.fireOnSelectIfEnterPressed}"
        tabindex="${ifDefined(this.isDisabled ? undefined : "0")}"
      >
        <slot hidden @slotchange=${this.assignDisplayedLabel}></slot>
        ${this.displayedLabel}
      </div>
    `;
    }
    assignDisplayedLabel() {
        if (this.textContent) {
            this.displayedLabel = this.textContent;
            return;
        }
        if (this.getAttribute("label")) {
            this.displayedLabel = this.getAttribute("label") || "";
        }
    }
    fireOnReadyCallback() {
        if (!this.onReady) {
            return;
        }
        this.onReady(this.getOption(), this.optionIndex);
    }
    fireOnSelectCallback(optionClickEvent) {
        optionClickEvent.stopPropagation();
        if (!this.onSelect || this.isDisabled) {
            return;
        }
        this.onSelect(this.optionValue);
    }
    fireOnSelectIfEnterPressed(keyboardKeydownEvent) {
        if (keyboardKeydownEvent.key === KEYS.ENTER) {
            this.fireOnSelectCallback(keyboardKeydownEvent);
        }
    }
};
__decorate([
    property()
], OptionPure.prototype, "isSelected", void 0);
__decorate([
    property()
], OptionPure.prototype, "isDisabled", void 0);
__decorate([
    property()
], OptionPure.prototype, "isHidden", void 0);
__decorate([
    property()
], OptionPure.prototype, "optionValue", void 0);
__decorate([
    property()
], OptionPure.prototype, "displayedLabel", void 0);
__decorate([
    property()
], OptionPure.prototype, "optionIndex", void 0);
__decorate([
    boundMethod
], OptionPure.prototype, "getOption", null);
__decorate([
    boundMethod
], OptionPure.prototype, "select", null);
__decorate([
    boundMethod
], OptionPure.prototype, "unselect", null);
__decorate([
    boundMethod
], OptionPure.prototype, "fireOnReadyCallback", null);
OptionPure = __decorate([
    customElement("option-pure")
], OptionPure);
export { OptionPure };
//# sourceMappingURL=Option.js.map