sudovanilla-website/public/@shoelace-style/shoelace/cdn/chunks/chunk.74VRIHH6.js

149 lines
3.9 KiB
JavaScript
Raw Normal View History

2024-05-13 22:34:06 -05:00
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
};