148 lines
3.9 KiB
JavaScript
148 lines
3.9 KiB
JavaScript
import {
|
|
option_styles_default
|
|
} from "./chunk.W5NTK4FG.js";
|
|
import {
|
|
LocalizeController
|
|
} from "./chunk.NH3SRVOC.js";
|
|
import {
|
|
e
|
|
} from "./chunk.UZVKBFXH.js";
|
|
import {
|
|
SlIcon
|
|
} from "./chunk.UZYAV5H6.js";
|
|
import {
|
|
watch
|
|
} from "./chunk.FA5RT4K4.js";
|
|
import {
|
|
ShoelaceElement,
|
|
e as e2,
|
|
n,
|
|
r
|
|
} from "./chunk.SEXBCYCU.js";
|
|
import {
|
|
x
|
|
} from "./chunk.CXZZ2LVK.js";
|
|
import {
|
|
__decorateClass
|
|
} from "./chunk.KIILAQWQ.js";
|
|
|
|
// src/components/option/option.component.ts
|
|
var SlOption = class extends ShoelaceElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
// @ts-expect-error - Controller is currently unused
|
|
this.localize = new LocalizeController(this);
|
|
this.current = false;
|
|
this.selected = false;
|
|
this.hasHover = false;
|
|
this.value = "";
|
|
this.disabled = false;
|
|
}
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.setAttribute("role", "option");
|
|
this.setAttribute("aria-selected", "false");
|
|
}
|
|
handleDefaultSlotChange() {
|
|
const textLabel = this.getTextLabel();
|
|
if (typeof this.cachedTextLabel === "undefined") {
|
|
this.cachedTextLabel = textLabel;
|
|
return;
|
|
}
|
|
if (textLabel !== this.cachedTextLabel) {
|
|
this.cachedTextLabel = textLabel;
|
|
this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
|
|
}
|
|
}
|
|
handleMouseEnter() {
|
|
this.hasHover = true;
|
|
}
|
|
handleMouseLeave() {
|
|
this.hasHover = false;
|
|
}
|
|
handleDisabledChange() {
|
|
this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
|
|
}
|
|
handleSelectedChange() {
|
|
this.setAttribute("aria-selected", this.selected ? "true" : "false");
|
|
}
|
|
handleValueChange() {
|
|
if (typeof this.value !== "string") {
|
|
this.value = String(this.value);
|
|
}
|
|
if (this.value.includes(" ")) {
|
|
console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
|
|
this.value = this.value.replace(/ /g, "_");
|
|
}
|
|
}
|
|
/** Returns a plain text label based on the option's content. */
|
|
getTextLabel() {
|
|
const nodes = this.childNodes;
|
|
let label = "";
|
|
[...nodes].forEach((node) => {
|
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
if (!node.hasAttribute("slot")) {
|
|
label += node.outerHTML;
|
|
}
|
|
}
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
label += node.textContent;
|
|
}
|
|
});
|
|
return label.trim();
|
|
}
|
|
render() {
|
|
return x`
|
|
<div
|
|
part="base"
|
|
class=${e({
|
|
option: true,
|
|
"option--current": this.current,
|
|
"option--disabled": this.disabled,
|
|
"option--selected": this.selected,
|
|
"option--hover": this.hasHover
|
|
})}
|
|
@mouseenter=${this.handleMouseEnter}
|
|
@mouseleave=${this.handleMouseLeave}
|
|
>
|
|
<sl-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></sl-icon>
|
|
<slot part="prefix" name="prefix" class="option__prefix"></slot>
|
|
<slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
|
|
<slot part="suffix" name="suffix" class="option__suffix"></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
SlOption.styles = option_styles_default;
|
|
SlOption.dependencies = { "sl-icon": SlIcon };
|
|
__decorateClass([
|
|
e2(".option__label")
|
|
], SlOption.prototype, "defaultSlot", 2);
|
|
__decorateClass([
|
|
r()
|
|
], SlOption.prototype, "current", 2);
|
|
__decorateClass([
|
|
r()
|
|
], SlOption.prototype, "selected", 2);
|
|
__decorateClass([
|
|
r()
|
|
], SlOption.prototype, "hasHover", 2);
|
|
__decorateClass([
|
|
n({ reflect: true })
|
|
], SlOption.prototype, "value", 2);
|
|
__decorateClass([
|
|
n({ type: Boolean, reflect: true })
|
|
], SlOption.prototype, "disabled", 2);
|
|
__decorateClass([
|
|
watch("disabled")
|
|
], SlOption.prototype, "handleDisabledChange", 1);
|
|
__decorateClass([
|
|
watch("selected")
|
|
], SlOption.prototype, "handleSelectedChange", 1);
|
|
__decorateClass([
|
|
watch("value")
|
|
], SlOption.prototype, "handleValueChange", 1);
|
|
|
|
export {
|
|
SlOption
|
|
};
|