@shoelace-style/shoelace
Version:
A forward-thinking library of web components.
316 lines (309 loc) • 9.92 kB
JavaScript
import {
tree_item_styles_default
} from "./chunk.BWVSW6TI.js";
import {
SlCheckbox
} from "./chunk.4Y6VMQSD.js";
import {
SlSpinner
} from "./chunk.TLKDQ5JG.js";
import {
getAnimation,
setDefaultAnimation
} from "./chunk.UW6SLYOK.js";
import {
animateTo,
shimKeyframesHeightAuto,
stopAnimations
} from "./chunk.3EPZX5HE.js";
import {
LocalizeController
} from "./chunk.WLV3FVBR.js";
import {
SlIcon
} from "./chunk.E6QAPUBK.js";
import {
watch
} from "./chunk.CCJUT23E.js";
import {
component_styles_default
} from "./chunk.TUVJKY7S.js";
import {
ShoelaceElement
} from "./chunk.UYAO2JRR.js";
import {
__decorateClass
} from "./chunk.B3BW2AY6.js";
// src/components/tree-item/tree-item.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit";
import { live } from "lit/directives/live.js";
import { property, query, state } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
var _SlTreeItem = class _SlTreeItem extends ShoelaceElement {
constructor() {
super(...arguments);
this.localize = new LocalizeController(this);
this.indeterminate = false;
this.isLeaf = false;
this.loading = false;
this.selectable = false;
this.expanded = false;
this.selected = false;
this.disabled = false;
this.lazy = false;
}
static isTreeItem(node) {
return node instanceof Element && node.getAttribute("role") === "treeitem";
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("role", "treeitem");
this.setAttribute("tabindex", "-1");
if (this.isNestedItem()) {
this.slot = "children";
}
}
firstUpdated() {
this.childrenContainer.hidden = !this.expanded;
this.childrenContainer.style.height = this.expanded ? "auto" : "0";
this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;
this.handleExpandedChange();
}
async animateCollapse() {
this.emit("sl-collapse");
await stopAnimations(this.childrenContainer);
const { keyframes, options } = getAnimation(this, "tree-item.collapse", { dir: this.localize.dir() });
await animateTo(
this.childrenContainer,
shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),
options
);
this.childrenContainer.hidden = true;
this.emit("sl-after-collapse");
}
// Checks whether the item is nested into an item
isNestedItem() {
const parent = this.parentElement;
return !!parent && _SlTreeItem.isTreeItem(parent);
}
handleChildrenSlotChange() {
this.loading = false;
this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;
}
willUpdate(changedProperties) {
if (changedProperties.has("selected") && !changedProperties.has("indeterminate")) {
this.indeterminate = false;
}
}
async animateExpand() {
this.emit("sl-expand");
await stopAnimations(this.childrenContainer);
this.childrenContainer.hidden = false;
const { keyframes, options } = getAnimation(this, "tree-item.expand", { dir: this.localize.dir() });
await animateTo(
this.childrenContainer,
shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),
options
);
this.childrenContainer.style.height = "auto";
this.emit("sl-after-expand");
}
handleLoadingChange() {
this.setAttribute("aria-busy", this.loading ? "true" : "false");
if (!this.loading) {
this.animateExpand();
}
}
handleDisabledChange() {
this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
}
handleSelectedChange() {
this.setAttribute("aria-selected", this.selected ? "true" : "false");
}
handleExpandedChange() {
if (!this.isLeaf) {
this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
} else {
this.removeAttribute("aria-expanded");
}
}
handleExpandAnimation() {
if (this.expanded) {
if (this.lazy) {
this.loading = true;
this.emit("sl-lazy-load");
} else {
this.animateExpand();
}
} else {
this.animateCollapse();
}
}
handleLazyChange() {
this.emit("sl-lazy-change");
}
/** Gets all the nested tree items in this node. */
getChildrenItems({ includeDisabled = true } = {}) {
return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: true })].filter(
(item) => _SlTreeItem.isTreeItem(item) && (includeDisabled || !item.disabled)
) : [];
}
render() {
const isRtl = this.localize.dir() === "rtl";
const showExpandButton = !this.loading && (!this.isLeaf || this.lazy);
return html`
<div
part="base"
class="${classMap({
"tree-item": true,
"tree-item--expanded": this.expanded,
"tree-item--selected": this.selected,
"tree-item--disabled": this.disabled,
"tree-item--leaf": this.isLeaf,
"tree-item--has-expand-button": showExpandButton,
"tree-item--rtl": this.localize.dir() === "rtl"
})}"
>
<div
class="tree-item__item"
part="
item
${this.disabled ? "item--disabled" : ""}
${this.expanded ? "item--expanded" : ""}
${this.indeterminate ? "item--indeterminate" : ""}
${this.selected ? "item--selected" : ""}
"
>
<div class="tree-item__indentation" part="indentation"></div>
<div
part="expand-button"
class=${classMap({
"tree-item__expand-button": true,
"tree-item__expand-button--visible": showExpandButton
})}
aria-hidden="true"
>
${when(
this.loading,
() => html` <sl-spinner part="spinner" exportparts="base:spinner__base"></sl-spinner> `
)}
<slot class="tree-item__expand-icon-slot" name="expand-icon">
<sl-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></sl-icon>
</slot>
<slot class="tree-item__expand-icon-slot" name="collapse-icon">
<sl-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></sl-icon>
</slot>
</div>
${when(
this.selectable,
() => html`
<sl-checkbox
part="checkbox"
exportparts="
base:checkbox__base,
control:checkbox__control,
control--checked:checkbox__control--checked,
control--indeterminate:checkbox__control--indeterminate,
checked-icon:checkbox__checked-icon,
indeterminate-icon:checkbox__indeterminate-icon,
label:checkbox__label
"
class="tree-item__checkbox"
?disabled="${this.disabled}"
?checked="${live(this.selected)}"
?indeterminate="${this.indeterminate}"
tabindex="-1"
></sl-checkbox>
`
)}
<slot class="tree-item__label" part="label"></slot>
</div>
<div class="tree-item__children" part="children" role="group">
<slot name="children" @slotchange="${this.handleChildrenSlotChange}"></slot>
</div>
</div>
`;
}
};
_SlTreeItem.styles = [component_styles_default, tree_item_styles_default];
_SlTreeItem.dependencies = {
"sl-checkbox": SlCheckbox,
"sl-icon": SlIcon,
"sl-spinner": SlSpinner
};
__decorateClass([
state()
], _SlTreeItem.prototype, "indeterminate", 2);
__decorateClass([
state()
], _SlTreeItem.prototype, "isLeaf", 2);
__decorateClass([
state()
], _SlTreeItem.prototype, "loading", 2);
__decorateClass([
state()
], _SlTreeItem.prototype, "selectable", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], _SlTreeItem.prototype, "expanded", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], _SlTreeItem.prototype, "selected", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], _SlTreeItem.prototype, "disabled", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], _SlTreeItem.prototype, "lazy", 2);
__decorateClass([
query("slot:not([name])")
], _SlTreeItem.prototype, "defaultSlot", 2);
__decorateClass([
query("slot[name=children]")
], _SlTreeItem.prototype, "childrenSlot", 2);
__decorateClass([
query(".tree-item__item")
], _SlTreeItem.prototype, "itemElement", 2);
__decorateClass([
query(".tree-item__children")
], _SlTreeItem.prototype, "childrenContainer", 2);
__decorateClass([
query(".tree-item__expand-button slot")
], _SlTreeItem.prototype, "expandButtonSlot", 2);
__decorateClass([
watch("loading", { waitUntilFirstUpdate: true })
], _SlTreeItem.prototype, "handleLoadingChange", 1);
__decorateClass([
watch("disabled")
], _SlTreeItem.prototype, "handleDisabledChange", 1);
__decorateClass([
watch("selected")
], _SlTreeItem.prototype, "handleSelectedChange", 1);
__decorateClass([
watch("expanded", { waitUntilFirstUpdate: true })
], _SlTreeItem.prototype, "handleExpandedChange", 1);
__decorateClass([
watch("expanded", { waitUntilFirstUpdate: true })
], _SlTreeItem.prototype, "handleExpandAnimation", 1);
__decorateClass([
watch("lazy", { waitUntilFirstUpdate: true })
], _SlTreeItem.prototype, "handleLazyChange", 1);
var SlTreeItem = _SlTreeItem;
setDefaultAnimation("tree-item.expand", {
keyframes: [
{ height: "0", opacity: "0", overflow: "hidden" },
{ height: "auto", opacity: "1", overflow: "hidden" }
],
options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
});
setDefaultAnimation("tree-item.collapse", {
keyframes: [
{ height: "auto", opacity: "1", overflow: "hidden" },
{ height: "0", opacity: "0", overflow: "hidden" }
],
options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
});
export {
SlTreeItem
};