webwriter-chart/types/helper-components/Select.js

ww-chart is an interactive data visualization widget for the WebWriter tool that implements various charts and diagrams for static and exploratory data visualization.

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 { html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { converter } from "../functions";
import "@shoelace-style/shoelace/dist/components/select/select.js";
import "@shoelace-style/shoelace/dist/components/option/option.js";
import { LitElementWw } from "@webwriter/lit";
import SlSelect from "@shoelace-style/shoelace/dist/components/select/select.component.js";
import SlOption from "@shoelace-style/shoelace/dist/components/option/option.component.js";
let Select = class Select extends LitElementWw {
    #selectOptions_accessor_storage = [];
    get selectOptions() { return this.#selectOptions_accessor_storage; }
    set selectOptions(value) { this.#selectOptions_accessor_storage = value; }
    #label_accessor_storage = "";
    get label() { return this.#label_accessor_storage; }
    set label(value) { this.#label_accessor_storage = value; }
    #placeholder_accessor_storage = "";
    get placeholder() { return this.#placeholder_accessor_storage; }
    set placeholder(value) { this.#placeholder_accessor_storage = value; }
    #value_accessor_storage = "";
    get value() { return this.#value_accessor_storage; }
    set value(value) { this.#value_accessor_storage = value; }
    #selectedIndex_accessor_storage = 0;
    get selectedIndex() { return this.#selectedIndex_accessor_storage; }
    set selectedIndex(value) { this.#selectedIndex_accessor_storage = value; }
    #disabled_accessor_storage = false;
    get disabled() { return this.#disabled_accessor_storage; }
    set disabled(value) { this.#disabled_accessor_storage = value; }
    changeSelected(e) {
        this.selectedIndex = this.selectOptions.findIndex((v) => e.target.value === convertFriendlyNameToId(v));
        this.value = this.selectOptions[this.selectedIndex];
        this.dispatchEvent(new CustomEvent("wwci-change", {
            detail: { value: this.value },
            composed: true,
        }));
    }
    render() {
        this.selectedIndex = this.value
            ? this.selectOptions.indexOf(this.value)
            : 0;
        return html `
      <sl-select
        ?disabled="${this.disabled}"
        placeholder="${this.placeholder}"
        label="${this.label}"
        @sl-change="${this.changeSelected}"
        value=${convertFriendlyNameToId(this.selectOptions[this.selectedIndex])}
        hoist
      >
        ${this.selectOptions.map((option) => html `<sl-option value="${convertFriendlyNameToId(option)}"
              >${option}</sl-option
            >`)}
      </sl-select>
    `;
    }
    static get scopedElements() {
        return {
            "sl-select": SlSelect,
            "sl-option": SlOption,
        };
    }
};
__decorate([
    property({ type: (Array), converter })
], Select.prototype, "selectOptions", null);
__decorate([
    property()
], Select.prototype, "label", null);
__decorate([
    property()
], Select.prototype, "placeholder", null);
__decorate([
    property()
], Select.prototype, "value", null);
__decorate([
    property({ type: Number })
], Select.prototype, "selectedIndex", null);
__decorate([
    property({ type: Boolean })
], Select.prototype, "disabled", null);
Select = __decorate([
    customElement("wwci-select")
], Select);
export { Select };
function convertFriendlyNameToId(name) {
    return name.toLowerCase().replace(/ /g, "-");
}