@aquera/nile-elements 0.0.80 → 0.0.82

package/dist/src/nile-tree-item/nile-tree-item.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { TemplateResult } from 'lit-element';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
+import NileElement from '../internal/nile-element';
+import '../nile-checkbox/nile-checkbox';
+import '../nile-icon';
+import '../nile-spinner/nile-spinner';
+/**
+ * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+ *
+ * @dependency nile-checkbox
+ * @dependency nile-icon
+ * @dependency nile-spinner
+ *
+ * @event nile-expand - Emitted when the tree item expands.
+ * @event nile-after-expand - Emitted after the tree item expands and all animations are complete.
+ * @event nile-collapse - Emitted when the tree item collapses.
+ * @event nile-after-collapse - Emitted after the tree item collapses and all animations are complete.
+ * @event nile-lazy-change - Emitted when the tree item's lazy state changes.
+ * @event nile-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
+ *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
+ *  state and update the tree.
+ *
+ * @slot - The default slot.
+ * @slot expand-icon - The icon to show when the tree item is expanded.
+ * @slot collapse-icon - The icon to show when the tree item is collapsed.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
+ * @csspart item--disabled - Applied when the tree item is disabled.
+ * @csspart item--expanded - Applied when the tree item is expanded.
+ * @csspart item--indeterminate - Applied when the selection is indeterminate.
+ * @csspart item--selected - Applied when the tree item is selected.
+ * @csspart indentation - The tree item's indentation container.
+ * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
+ * @csspart label - The tree item's label.
+ * @csspart children - The container that wraps the tree item's nested children.
+ * @csspart checkbox - The checkbox that shows when using multiselect.
+ * @csspart checkbox__base - The checkbox's exported `base` part.
+ * @csspart checkbox__control - The checkbox's exported `control` part.
+ * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.
+ * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.
+ * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
+ * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
+ * @csspart checkbox__label - The checkbox's exported `label` part.
+ */
+export declare class NileTreeItem extends NileElement {
+    static styles: CSSResultGroup;
+    static isTreeItem(node: Node): boolean;
+    indeterminate: boolean;
+    isLeaf: boolean;
+    loading: boolean;
+    selectable: boolean;
+    /** Expands the tree item. */
+    expanded: boolean;
+    /** Draws the tree item in a selected state. */
+    selected: boolean;
+    /** Disables the tree item. */
+    disabled: boolean;
+    /** Enables lazy loading behavior. */
+    lazy: boolean;
+    defaultSlot: HTMLSlotElement;
+    childrenSlot: HTMLSlotElement;
+    itemElement: HTMLDivElement;
+    childrenContainer: HTMLDivElement;
+    expandButtonSlot: HTMLSlotElement;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    private animateCollapse;
+    private isNestedItem;
+    private handleChildrenSlotChange;
+    protected willUpdate(changedProperties: PropertyValueMap<NileTreeItem> | Map<PropertyKey, unknown>): void;
+    private animateExpand;
+    handleLoadingChange(): void;
+    handleDisabledChange(): void;
+    handleSelectedChange(): void;
+    handleExpandedChange(): void;
+    handleExpandAnimation(): void;
+    handleLazyChange(): void;
+    /** Gets all the nested tree items in this node. */
+    getChildrenItems({ includeDisabled }?: {
+        includeDisabled?: boolean;
+    }): NileTreeItem[];
+    render(): TemplateResult<1>;
+}
+export default NileTreeItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-tree-item': NileTreeItem;
+    }
+}

package/dist/src/nile-tree-item/nile-tree-item.js

@@ -0,0 +1,324 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var NileTreeItem_1;
+import { __decorate } from "tslib";
+import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { html } from 'lit';
+import { live } from 'lit/directives/live.js';
+import { watch } from '../internal/watch';
+import { when } from 'lit/directives/when.js';
+import { styles } from './nile-tree-item.css';
+import NileElement from '../internal/nile-element';
+import '../nile-checkbox/nile-checkbox';
+import '../nile-icon';
+import '../nile-spinner/nile-spinner';
+/**
+ * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+ *
+ * @dependency nile-checkbox
+ * @dependency nile-icon
+ * @dependency nile-spinner
+ *
+ * @event nile-expand - Emitted when the tree item expands.
+ * @event nile-after-expand - Emitted after the tree item expands and all animations are complete.
+ * @event nile-collapse - Emitted when the tree item collapses.
+ * @event nile-after-collapse - Emitted after the tree item collapses and all animations are complete.
+ * @event nile-lazy-change - Emitted when the tree item's lazy state changes.
+ * @event nile-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
+ *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
+ *  state and update the tree.
+ *
+ * @slot - The default slot.
+ * @slot expand-icon - The icon to show when the tree item is expanded.
+ * @slot collapse-icon - The icon to show when the tree item is collapsed.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
+ * @csspart item--disabled - Applied when the tree item is disabled.
+ * @csspart item--expanded - Applied when the tree item is expanded.
+ * @csspart item--indeterminate - Applied when the selection is indeterminate.
+ * @csspart item--selected - Applied when the tree item is selected.
+ * @csspart indentation - The tree item's indentation container.
+ * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
+ * @csspart label - The tree item's label.
+ * @csspart children - The container that wraps the tree item's nested children.
+ * @csspart checkbox - The checkbox that shows when using multiselect.
+ * @csspart checkbox__base - The checkbox's exported `base` part.
+ * @csspart checkbox__control - The checkbox's exported `control` part.
+ * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.
+ * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.
+ * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
+ * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
+ * @csspart checkbox__label - The checkbox's exported `label` part.
+ */
+let NileTreeItem = NileTreeItem_1 = class NileTreeItem extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.indeterminate = false;
+        this.isLeaf = false;
+        this.loading = false;
+        this.selectable = false;
+        /** Expands the tree item. */
+        this.expanded = false;
+        /** Draws the tree item in a selected state. */
+        this.selected = false;
+        /** Disables the tree item. */
+        this.disabled = false;
+        /** Enables lazy loading behavior. */
+        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('nile-collapse');
+        await stopAnimations(this.childrenContainer);
+        const { keyframes, options } = getAnimation(this, 'tree-item.collapse', { dir: 'ltr' });
+        await animateTo(this.childrenContainer, shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight), options);
+        this.childrenContainer.hidden = true;
+        this.emit('nile-after-collapse');
+    }
+    // Checks whether the item is nested into an item
+    isNestedItem() {
+        const parent = this.parentElement;
+        return !!parent && NileTreeItem_1.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('nile-expand');
+        await stopAnimations(this.childrenContainer);
+        this.childrenContainer.hidden = false;
+        const { keyframes, options } = getAnimation(this, 'tree-item.expand', { dir: 'ltr' });
+        await animateTo(this.childrenContainer, shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight), options);
+        this.childrenContainer.style.height = 'auto';
+        this.emit('nile-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('nile-lazy-load');
+            }
+            else {
+                this.animateExpand();
+            }
+        }
+        else {
+            this.animateCollapse();
+        }
+    }
+    handleLazyChange() {
+        this.emit('nile-lazy-change');
+    }
+    /** Gets all the nested tree items in this node. */
+    getChildrenItems({ includeDisabled = true } = {}) {
+        return this.childrenSlot
+            ? [...this.childrenSlot.assignedElements({ flatten: true })].filter((item) => NileTreeItem_1.isTreeItem(item) && (includeDisabled || !item.disabled))
+            : [];
+    }
+    render() {
+        const isRtl = false;
+        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': false
+        })}"
+      >
+        <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 ` <nile-spinner></nile-spinner> `)}
+            <slot class="tree-item__expand-icon-slot" name="expand-icon">
+              <nile-icon library="system" name=${isRtl ? 'arrowleft' : 'arrowright'}></nile-icon>
+            </slot>
+            <slot class="tree-item__expand-icon-slot" name="collapse-icon">
+              <nile-icon library="system" name=${isRtl ? 'arrowleft' : 'arrowright'}></nile-icon>
+            </slot>
+          </div>
+
+          ${when(this.selectable, () => html `
+                <nile-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"
+                ></nile-checkbox>
+              `)}
+
+          <slot class="tree-item__label" part="label"></slot>
+        </div>
+
+        <slot
+          name="children"
+          class="tree-item__children"
+          part="children"
+          role="group"
+          @slotchange="${this.handleChildrenSlotChange}"
+        ></slot>
+      </div>
+    `;
+    }
+};
+NileTreeItem.styles = styles;
+__decorate([
+    state()
+], NileTreeItem.prototype, "indeterminate", void 0);
+__decorate([
+    state()
+], NileTreeItem.prototype, "isLeaf", void 0);
+__decorate([
+    state()
+], NileTreeItem.prototype, "loading", void 0);
+__decorate([
+    state()
+], NileTreeItem.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTreeItem.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTreeItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTreeItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTreeItem.prototype, "lazy", void 0);
+__decorate([
+    query('slot:not([name])')
+], NileTreeItem.prototype, "defaultSlot", void 0);
+__decorate([
+    query('slot[name=children]')
+], NileTreeItem.prototype, "childrenSlot", void 0);
+__decorate([
+    query('.tree-item__item')
+], NileTreeItem.prototype, "itemElement", void 0);
+__decorate([
+    query('.tree-item__children')
+], NileTreeItem.prototype, "childrenContainer", void 0);
+__decorate([
+    query('.tree-item__expand-button slot')
+], NileTreeItem.prototype, "expandButtonSlot", void 0);
+__decorate([
+    watch('loading', { waitUntilFirstUpdate: true })
+], NileTreeItem.prototype, "handleLoadingChange", null);
+__decorate([
+    watch('disabled')
+], NileTreeItem.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('selected')
+], NileTreeItem.prototype, "handleSelectedChange", null);
+__decorate([
+    watch('expanded', { waitUntilFirstUpdate: true })
+], NileTreeItem.prototype, "handleExpandedChange", null);
+__decorate([
+    watch('expanded', { waitUntilFirstUpdate: true })
+], NileTreeItem.prototype, "handleExpandAnimation", null);
+__decorate([
+    watch('lazy', { waitUntilFirstUpdate: true })
+], NileTreeItem.prototype, "handleLazyChange", null);
+NileTreeItem = NileTreeItem_1 = __decorate([
+    customElement('nile-tree-item')
+], NileTreeItem);
+export { NileTreeItem };
+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 default NileTreeItem;
+//# sourceMappingURL=nile-tree-item.js.map

package/dist/src/nile-tree-item/nile-tree-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tree-item.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, CSSResultArray, TemplateResult} from 'lit-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { html } from 'lit';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport { when } from 'lit/directives/when.js';\nimport type { CSSResultGroup, PropertyValueMap } from 'lit';\nimport {styles} from './nile-tree-item.css';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox/nile-checkbox';\nimport '../nile-icon';\nimport '../nile-spinner/nile-spinner';\n\n/**\n * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n *\n * @dependency nile-checkbox\n * @dependency nile-icon\n * @dependency nile-spinner\n *\n * @event nile-expand - Emitted when the tree item expands.\n * @event nile-after-expand - Emitted after the tree item expands and all animations are complete.\n * @event nile-collapse - Emitted when the tree item collapses.\n * @event nile-after-collapse - Emitted after the tree item collapses and all animations are complete.\n * @event nile-lazy-change - Emitted when the tree item's lazy state changes.\n * @event nile-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append\n *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading\n *  state and update the tree.\n *\n * @slot - The default slot.\n * @slot expand-icon - The icon to show when the tree item is expanded.\n * @slot collapse-icon - The icon to show when the tree item is collapsed.\n *\n * @csspart base - The component's base wrapper.\n * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.\n * @csspart item--disabled - Applied when the tree item is disabled.\n * @csspart item--expanded - Applied when the tree item is expanded.\n * @csspart item--indeterminate - Applied when the selection is indeterminate.\n * @csspart item--selected - Applied when the tree item is selected.\n * @csspart indentation - The tree item's indentation container.\n * @csspart expand-button - The container that wraps the tree item's expand button and spinner.\n * @csspart label - The tree item's label.\n * @csspart children - The container that wraps the tree item's nested children.\n * @csspart checkbox - The checkbox that shows when using multiselect.\n * @csspart checkbox__base - The checkbox's exported `base` part.\n * @csspart checkbox__control - The checkbox's exported `control` part.\n * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.\n * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.\n * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.\n * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.\n * @csspart checkbox__label - The checkbox's exported `label` part.\n */\n@customElement('nile-tree-item')\nexport class NileTreeItem extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  static isTreeItem(node: Node) {\n    return node instanceof Element && node.getAttribute('role') === 'treeitem';\n  }\n\n\n  @state() indeterminate = false;\n  @state() isLeaf = false;\n  @state() loading = false;\n  @state() selectable = false;\n\n  /** Expands the tree item. */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /** Draws the tree item in a selected state. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Disables the tree item. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Enables lazy loading behavior. */\n  @property({ type: Boolean, reflect: true }) lazy = false;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('slot[name=children]') childrenSlot: HTMLSlotElement;\n  @query('.tree-item__item') itemElement: HTMLDivElement;\n  @query('.tree-item__children') childrenContainer: HTMLDivElement;\n  @query('.tree-item__expand-button slot') expandButtonSlot: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'treeitem');\n    this.setAttribute('tabindex', '-1');\n\n    if (this.isNestedItem()) {\n      this.slot = 'children';\n    }\n  }\n\n  firstUpdated() {\n    this.childrenContainer.hidden = !this.expanded;\n    this.childrenContainer.style.height = this.expanded ? 'auto' : '0';\n\n    this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;\n    this.handleExpandedChange();\n  }\n\n  private async animateCollapse() {\n    this.emit('nile-collapse');\n\n    await stopAnimations(this.childrenContainer);\n\n    const { keyframes, options } = getAnimation(this, 'tree-item.collapse', { dir: 'ltr' });\n    await animateTo(\n      this.childrenContainer,\n      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),\n      options\n    );\n    this.childrenContainer.hidden = true;\n\n    this.emit('nile-after-collapse');\n  }\n\n  // Checks whether the item is nested into an item\n  private isNestedItem(): boolean {\n    const parent = this.parentElement;\n    return !!parent && NileTreeItem.isTreeItem(parent);\n  }\n\n  private handleChildrenSlotChange() {\n    this.loading = false;\n    this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;\n  }\n\n  protected willUpdate(changedProperties: PropertyValueMap<NileTreeItem> | Map<PropertyKey, unknown>) {\n    if (changedProperties.has('selected') && !changedProperties.has('indeterminate')) {\n      this.indeterminate = false;\n    }\n  }\n\n  private async animateExpand() {\n    this.emit('nile-expand');\n\n    await stopAnimations(this.childrenContainer);\n    this.childrenContainer.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, 'tree-item.expand', { dir: 'ltr' });\n    await animateTo(\n      this.childrenContainer,\n      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),\n      options\n    );\n    this.childrenContainer.style.height = 'auto';\n\n    this.emit('nile-after-expand');\n  }\n\n  @watch('loading', { waitUntilFirstUpdate: true })\n  handleLoadingChange() {\n    this.setAttribute('aria-busy', this.loading ? 'true' : 'false');\n\n    if (!this.loading) {\n      this.animateExpand();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('expanded', { waitUntilFirstUpdate: true })\n  handleExpandedChange() {\n    if (!this.isLeaf) {\n      this.setAttribute('aria-expanded', this.expanded ? 'true' : 'false');\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n  }\n\n  @watch('expanded', { waitUntilFirstUpdate: true })\n  handleExpandAnimation() {\n    if (this.expanded) {\n      if (this.lazy) {\n        this.loading = true;\n\n        this.emit('nile-lazy-load');\n      } else {\n        this.animateExpand();\n      }\n    } else {\n      this.animateCollapse();\n    }\n  }\n\n  @watch('lazy', { waitUntilFirstUpdate: true })\n  handleLazyChange() {\n    this.emit('nile-lazy-change');\n  }\n\n  /** Gets all the nested tree items in this node. */\n  getChildrenItems({ includeDisabled = true }: { includeDisabled?: boolean } = {}): NileTreeItem[] {\n    return this.childrenSlot\n      ? ([...this.childrenSlot.assignedElements({ flatten: true })].filter(\n          (item: NileTreeItem) => NileTreeItem.isTreeItem(item) && (includeDisabled || !item.disabled)\n        ) as NileTreeItem[])\n      : [];\n  }\n\n  render() {\n    const isRtl = false;\n    const showExpandButton = !this.loading && (!this.isLeaf || this.lazy);\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          'tree-item': true,\n          'tree-item--expanded': this.expanded,\n          'tree-item--selected': this.selected,\n          'tree-item--disabled': this.disabled,\n          'tree-item--leaf': this.isLeaf,\n          'tree-item--has-expand-button': showExpandButton,\n          'tree-item--rtl': false\n        })}\"\n      >\n        <div\n          class=\"tree-item__item\"\n          part=\"\n            item\n            ${this.disabled ? 'item--disabled' : ''}\n            ${this.expanded ? 'item--expanded' : ''}\n            ${this.indeterminate ? 'item--indeterminate' : ''}\n            ${this.selected ? 'item--selected' : ''}\n          \"\n        >\n          <div class=\"tree-item__indentation\" part=\"indentation\"></div>\n\n          <div\n            part=\"expand-button\"\n            class=${classMap({\n              'tree-item__expand-button': true,\n              'tree-item__expand-button--visible': showExpandButton\n            })}\n            aria-hidden=\"true\"\n          >\n            ${when(this.loading, () => html` <nile-spinner></nile-spinner> `)}\n            <slot class=\"tree-item__expand-icon-slot\" name=\"expand-icon\">\n              <nile-icon library=\"system\" name=${isRtl ? 'arrowleft' : 'arrowright'}></nile-icon>\n            </slot>\n            <slot class=\"tree-item__expand-icon-slot\" name=\"collapse-icon\">\n              <nile-icon library=\"system\" name=${isRtl ? 'arrowleft' : 'arrowright'}></nile-icon>\n            </slot>\n          </div>\n\n          ${when(\n            this.selectable,\n            () =>\n              html`\n                <nile-checkbox\n                  part=\"checkbox\"\n                  exportparts=\"\n                    base:checkbox__base,\n                    control:checkbox__control,\n                    control--checked:checkbox__control--checked,\n                    control--indeterminate:checkbox__control--indeterminate,\n                    checked-icon:checkbox__checked-icon,\n                    indeterminate-icon:checkbox__indeterminate-icon,\n                    label:checkbox__label\n                  \"\n                  class=\"tree-item__checkbox\"\n                  ?disabled=\"${this.disabled}\"\n                  ?checked=\"${live(this.selected)}\"\n                  ?indeterminate=\"${this.indeterminate}\"\n                  tabindex=\"-1\"\n                ></nile-checkbox>\n              `\n          )}\n\n          <slot class=\"tree-item__label\" part=\"label\"></slot>\n        </div>\n\n        <slot\n          name=\"children\"\n          class=\"tree-item__children\"\n          part=\"children\"\n          role=\"group\"\n          @slotchange=\"${this.handleChildrenSlotChange}\"\n        ></slot>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('tree-item.expand', {\n  keyframes: [\n    { height: '0', opacity: '0', overflow: 'hidden' },\n    { height: 'auto', opacity: '1', overflow: 'hidden' }\n  ],\n  options: { duration: 250, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }\n});\n\nsetDefaultAnimation('tree-item.collapse', {\n  keyframes: [\n    { height: 'auto', opacity: '1', overflow: 'hidden' },\n    { height: '0', opacity: '0', overflow: 'hidden' }\n  ],\n  options: { duration: 200, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }\n});\n\n\nexport default NileTreeItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tree-item': NileTreeItem;\n  }\n}\n"]}