@covalent/components 0.0.0-COVALENT

package/src/tooltip/tooltip.ts

@@ -0,0 +1,185 @@
+import { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { addHasRemoveClass } from '@material/mwc-base/base-element';
+import { MDCTooltipAdapter, events } from '@material/tooltip';
+import { MDCTooltipFoundation } from '@material/tooltip/foundation';
+import styles from './tooltip.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-tooltip': CovalentTooltip;
+  }
+}
+
+@customElement('cv-tooltip')
+export class CovalentTooltip extends LitElement {
+  protected mdcFoundation!: MDCTooltipFoundation;
+  protected readonly mdcFoundationClass = MDCTooltipFoundation;
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  @query('.mdc-tooltip') protected mdcRoot!: HTMLElement;
+  @query('.mdc-tooltip__surface') protected mdcSurface!: HTMLElement;
+
+  @property({ type: Object }) anchor?: HTMLElement;
+  @property() richTitle?: string;
+  @property({ type: Boolean, reflect: true }) rich?: boolean;
+  @property({ type: Boolean, reflect: true }) persistent?: HTMLElement;
+  @property({ type: Number }) showDelay?: number;
+  @property({ type: Number }) hideDelay?: number;
+
+  protected createAdapter(): MDCTooltipAdapter {
+    return {
+      ...addHasRemoveClass(this.mdcRoot),
+      getAttribute: (attr: string) => this.mdcRoot.getAttribute(attr),
+      setAttribute: (attr: string, value: string) =>
+        this.mdcRoot.setAttribute(attr, value),
+      removeAttribute: (attr: string) => this.mdcRoot.removeAttribute(attr),
+      getComputedStyleProperty: (propertyName: string) =>
+        getComputedStyle(this.mdcRoot, propertyName).cssText,
+      setStyleProperty: (propertyName: string, value: string) =>
+        this.mdcRoot.style.setProperty(propertyName, value),
+      setSurfaceAnimationStyleProperty: (propertyName: string, value: string) =>
+        this.mdcSurface.style.setProperty(propertyName, value),
+      getViewportWidth: () =>
+        Math.max(
+          document.documentElement.clientWidth || 0,
+          window.innerWidth || 0
+        ),
+      getViewportHeight: () =>
+        Math.max(
+          document.documentElement.clientHeight || 0,
+          window.innerHeight || 0
+        ),
+      getTooltipSize: () =>
+        Object.assign({
+          width: this.mdcRoot.clientWidth,
+          height: this.mdcRoot.clientHeight,
+        }),
+      getTooltipCaretBoundingRect: () => this.mdcRoot.getBoundingClientRect() ?? null,
+      getAnchorBoundingRect: () => this.anchor?.getBoundingClientRect() ?? null,
+      getParentBoundingRect: () =>
+        this.renderRoot.getRootNode().parentElement?.getBoundingClientRect() ??
+        null,
+      getAnchorAttribute: (attr: string) =>
+        this.anchor?.getAttribute(attr) ?? null,
+      setAnchorAttribute: (attr: string, value: string) =>
+        this.anchor?.setAttribute(attr, value),
+      isRTL: () => false,
+      isInstanceOfElement:(eventTarget: EventTarget | null) => eventTarget instanceof Element,
+      anchorContainsElement: (element: HTMLElement) =>
+        this.anchor?.contains(element) ?? false,
+      tooltipContainsElement: (element: HTMLElement) => this.contains(element),
+      focusAnchorElement: () => this.anchor?.focus(),
+      registerEventHandler: (evtType, handler) =>
+        this.mdcRoot?.addEventListener(evtType, handler),
+      deregisterEventHandler: (evtType, handler) =>
+        this.mdcRoot?.removeEventListener(evtType, handler),
+      registerAnchorEventHandler: (evtType, handler) =>
+        this.anchor?.addEventListener(evtType, handler),
+      deregisterAnchorEventHandler: (evtType, handler) =>
+        this.anchor?.removeEventListener(evtType, handler),
+      registerDocumentEventHandler: (evtType, handler) =>
+        document.addEventListener(evtType, handler),
+      deregisterDocumentEventHandler: (evtType, handler) =>
+        document.removeEventListener(evtType, handler),
+      registerWindowEventHandler: (evtType, handler) =>
+        window.addEventListener(evtType, handler),
+      deregisterWindowEventHandler: (evtType, handler) =>
+        window.removeEventListener(evtType, handler),
+      notifyHidden: () => this.dispatchEvent(new Event(events.HIDDEN)),
+      notifyShown: () => this.dispatchEvent(new Event(events.SHOWN)),
+      setTooltipCaretStyle: () => {
+        //
+      },
+      clearTooltipCaretStyles: () => {
+        //
+      },
+      getActiveElement: () => document.activeElement,
+    };
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (this.showDelay !== undefined && !isNaN(this.showDelay)) {
+      this.mdcFoundation.setShowDelay(this.showDelay);
+    }
+
+    if (this.hideDelay !== undefined && !isNaN(this.hideDelay)) {
+      this.mdcFoundation.setHideDelay(this.hideDelay);
+    }
+  }
+
+  protected override async firstUpdated() {
+    if (this.mdcFoundation !== undefined) {
+      this.mdcFoundation.destroy();
+    }
+    this.mdcFoundation = new this.mdcFoundationClass(this.createAdapter());
+
+    this.anchor?.addEventListener('click', () =>
+      this.mdcFoundation.handleAnchorClick()
+    );
+    this.anchor?.addEventListener('mouseenter', () =>
+      this.mdcFoundation.handleAnchorMouseEnter()
+    );
+    this.anchor?.addEventListener('touchstart', () =>
+      this.mdcFoundation.handleAnchorTouchstart()
+    );
+
+    if (!this.persistent) {
+      this.anchor?.addEventListener('mouseleave', () =>
+        this.mdcFoundation.handleAnchorMouseLeave()
+      );
+      this.anchor?.addEventListener('touchend', () =>
+        this.mdcFoundation.handleAnchorTouchend()
+      );
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.connectedCallback();
+    this.anchor?.removeEventListener('click', () =>
+      this.mdcFoundation.handleAnchorClick()
+    );
+    this.anchor?.removeEventListener('mouseenter', () =>
+      this.mdcFoundation.handleAnchorMouseEnter()
+    );
+    this.anchor?.removeEventListener('mouseleave', () =>
+      this.mdcFoundation.handleAnchorMouseLeave()
+    );
+    this.anchor?.removeEventListener('touchstart', () =>
+      this.mdcFoundation.handleAnchorTouchstart()
+    );
+    this.anchor?.removeEventListener('touchend', () =>
+      this.mdcFoundation.handleAnchorTouchend()
+    );
+  }
+
+  override render() {
+    return html`
+      <div
+        class="mdc-tooltip ${this.rich ? 'mdc-tooltip--rich' : ''}"
+        role="tooltip"
+        aria-hidden="true"
+        data-mdc-tooltip-persistent="true"
+      >
+        <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
+          ${this.rich
+            ? html`<div class="mdc-tooltip__title">${this.richTitle}</div>
+                <div class="mdc-tooltip__content">
+                  <slot></slot>
+                </div>
+                <div class="mdc-tooltip--rich-actions">
+                  <slot name="actionItems"></slot>
+                </div>`
+            : html`<slot></slot>`}
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default CovalentTooltip;

package/src/top-app-bar/top-app-bar-fixed.ts

@@ -0,0 +1,23 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TopAppBarFixedBase } from '@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base';
+import { styles } from '@material/mwc-top-app-bar/mwc-top-app-bar.css';
+import baseStyles from './top-app-bar.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-top-app-bar-fixed': CovalentTopAppBarFixed;
+  }
+}
+
+@customElement('cv-top-app-bar-fixed')
+export class CovalentTopAppBarFixed extends TopAppBarFixedBase {
+  static override styles = [
+    styles,
+    css`
+      ${unsafeCSS(baseStyles)}
+    `,
+  ];
+}
+
+export default CovalentTopAppBarFixed;

package/src/top-app-bar/top-app-bar.scss

@@ -0,0 +1,14 @@
+:host {
+  --mdc-theme-primary: var(--mdc-theme-surface);
+  --mdc-theme-on-primary: var(--mdc-theme-text-primary-on-background);
+
+  ::slotted(cv-button) {
+    --mdc-theme-primary: var(--mdc-theme-primary);
+    --mdc-theme-on-primary: var(--mdc-theme-on-primary);
+  }
+}
+
+.mdc-top-app-bar {
+  background: var(--mdc-theme-surface);
+  color: var(--mdc-theme-on-surface);
+}

package/src/top-app-bar/top-app-bar.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentTopAppBar } from './top-app-bar';
+
+describe('Top app bar', () => {
+  it('should work', () => {
+    expect(new CovalentTopAppBar()).toBeDefined();
+  });
+});

package/src/top-app-bar/top-app-bar.stories.js

@@ -0,0 +1,41 @@
+import './top-app-bar';
+import './top-app-bar-fixed';
+import topAppBarComponent from '../../stories/demos/top-app-bar.component';
+import '../data-table/data-table.stories.scss';
+
+export default {
+  title: 'Components/Top App Bar',
+  argTypes: {
+    showContent: {
+      options: ['table', 'tableWithSelection', 'loremIpsum'],
+      control: { type: 'radio' },
+    },
+    showActionItems: {
+      options: ['buttons', 'icons'],
+      control: { type: 'radio' },
+    },
+  },
+  args: {
+    centerTitle: false,
+    dense: false,
+    prominent: false,
+    showContent: 'table',
+    showActionItems: 'icons',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Basic = topAppBarComponent.bind({});
+Basic.args = {};
+
+export const BasicWithButtons = topAppBarComponent.bind({});
+BasicWithButtons.args = {
+  showActionItems: 'buttons',
+};
+
+export const Fixed = topAppBarComponent.bind({});
+Fixed.parameters = {
+  fixed: true,
+};

package/src/top-app-bar/top-app-bar.ts

@@ -0,0 +1,23 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TopAppBarBase } from '@material/mwc-top-app-bar/mwc-top-app-bar-base';
+import { styles } from '@material/mwc-top-app-bar/mwc-top-app-bar.css';
+import baseStyles from './top-app-bar.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-top-app-bar': CovalentTopAppBar;
+  }
+}
+
+@customElement('cv-top-app-bar')
+export class CovalentTopAppBar extends TopAppBarBase {
+  static override styles = [
+    styles,
+    css`
+      ${unsafeCSS(baseStyles)}
+    `,
+  ];
+}
+
+export default CovalentTopAppBar;

package/src/tree-list/tree-list-item.scss

@@ -0,0 +1,96 @@
+@use '@material/ripple';
+
+.mdc-ripple-surface {
+  @include ripple.surface;
+  @include ripple.radius-bounded(50%);
+  @include ripple.states;
+}
+
+.mdc-ripple-surface::after,
+.mdc-ripple-surface::before {
+  border-radius: 0 16px 16px 0;
+}
+
+.itemContent {
+  // .itemContent is a div so its width will be the width of its parent.
+  padding: 0 32px 0 var(--indent);
+  margin-right: 16px;
+}
+
+.itemContent:hover {
+  cursor: pointer;
+  background-color: var(--mdc-theme-surface-neutral-highlight-hover);
+  border-radius: 0 16px 16px 0;
+}
+
+.selected {
+  background-color: var(--mdc-theme-surface-primary-highlight);
+  color: var(--mdc-theme-primary);
+  border-radius: 0 16px 16px 0;
+}
+
+.selected:hover {
+  background-color: var(--mdc-theme-surface-primary-highlight-hover);
+}
+
+.mainContent {
+  display: flex;
+  flex-direction: row;
+  padding: 4px 0;
+}
+
+[name='label']::slotted(*) {
+  font-family: var(--mdc-typography-body1-font-family);
+  font-size: var(--mdc-typography-body1-font-size);
+  font-weight: var(--mdc-typography-body1-font-weight);
+  line-height: var(--mdc-typography-body1-line-height);
+  letter-spacing: 0.25px;
+  padding-left: 16px;
+}
+
+[name='extraContent']::slotted(*) {
+  padding-left: 64px;
+  padding-bottom: 4px;
+  margin-top: -4px;
+  letter-spacing: 0.4px;
+  color: var(--mdc-theme-text-secondary-on-background);
+  font-family: var(--mdc-typography-caption-font-family);
+  font-size: var(--mdc-typography-caption-font-size);
+  font-weight: var(--mdc-typography-caption-font-weight);
+  line-height: var(--mdc-typography-caption-line-height);
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: flex;
+  flex-direction: column;
+}
+
+.endOfNest {
+  padding: 8px;
+  padding-left: calc(var(--indent) + 20px);
+  letter-spacing: 0.4px;
+  user-select: none;
+  color: var(--mdc-theme-text-disabled-on-background);
+  font-family: var(--mdc-typography-caption-font-family);
+  font-size: var(--mdc-typography-caption-font-size);
+  font-weight: var(--mdc-typography-caption-font-weight);
+  line-height: var(--mdc-typography-caption-line-height);
+}
+
+.arrowIcon {
+  color: var(--mdc-theme-text-primary-on-background);
+}
+
+.open {
+  transition: transform 100ms ease-out;
+  transform: rotate(90deg);
+}
+
+.close {
+  transition: transform 100ms ease-in;
+  transform: rotate(0deg);
+}

package/src/tree-list/tree-list-item.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentTreeListItem } from './tree-list-item';
+
+describe('Tree list item', () => {
+  it('should work', () => {
+    expect(new CovalentTreeListItem()).toBeDefined();
+  });
+});

package/src/tree-list/tree-list-item.ts

@@ -0,0 +1,87 @@
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './tree-list-item.scss?inline';
+
+import '../icon/icon';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-tree-list-item': CovalentTreeListItem;
+  }
+}
+
+@customElement('cv-tree-list-item')
+export class CovalentTreeListItem extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+  // Check if a list item is open.
+  @property({ type: Boolean }) isOpen = false;
+  // Optional icon for each list item.
+  @property({ type: String }) icon = '';
+  // Indicates which nest level a list item is at.
+  @property({ type: Number }) indentLevel = 0;
+  // How much left padding (px) to add for nested elements.
+  @property({ type: Number }) indentMultiple = 16;
+  override render() {
+    // Class map for showing/hiding an item's content.
+    const classes = {
+      hidden: !this.isOpen,
+      visible: this.isOpen,
+    };
+    // Class map for animating the arrows.
+    const animation = {
+      open: this.isOpen,
+      close: !this.isOpen,
+    };
+    const arrowIcon = 'arrow_right';
+    const icon = html`<cv-icon>${this.icon}</cv-icon>`;
+    const arrow = html`<cv-icon class="${classMap(animation)} arrowIcon"
+      >${arrowIcon}</cv-icon
+    >`;
+
+    // The nest slot should only take cv-tree-list-item components. Otherwise use default value and display "No results".
+    return html`
+      <div
+        class="itemContent mdc-ripple-surface"
+        @click="${this._handleClick}"
+        style="--indent:${this.indentLevel * this.indentMultiple + 8}px"
+      >
+        <div class="mainContent">
+          ${arrow} ${icon}
+          <slot name="label"></slot>
+        </div>
+        <slot name="extraContent"></slot>
+      </div>
+      <slot name="nest" class="${classMap(classes)}">
+        <div
+          class="endOfNest"
+          style="--indent:${this.indentLevel * this.indentMultiple +
+          this.indentMultiple}px"
+        >
+          No results
+        </div>
+      </slot>
+    `;
+  }
+  private _handleClick() {
+    // Toggles the dropdown for a list item.
+    this.isOpen = !this.isOpen;
+
+    // Create and emit the select event; the tree-list component is listening for this.
+    const event = new CustomEvent('select', {
+      detail: {
+        message: `Emitting an event from ${this}`,
+      },
+      // bubbles and composed are required in order to allow custom event to pass through shadow DOM boundary to cv-tree-list.
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+}
+
+export default CovalentTreeListItem;

package/src/tree-list/tree-list.scss

@@ -0,0 +1,13 @@
+@use '@material/typography/mdc-typography';
+
+.container {
+  overflow-x: auto;
+}
+
+.content {
+  color: var(--mdc-theme-text-primary-on-background);
+  // Inline-block width is based on children.
+  display: inline-block;
+  // Set the min-width to 100% so the menu items always extend edge to edge.
+  min-width: 100%;
+}

package/src/tree-list/tree-list.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentTreeList } from './tree-list';
+
+describe('Tree list', () => {
+  it('should work', () => {
+    expect(new CovalentTreeList()).toBeDefined();
+  });
+});

package/src/tree-list/tree-list.stories.js

@@ -0,0 +1,151 @@
+import './tree-list';
+import './tree-list-item';
+export default {
+  title: 'Components/Tree List',
+  args: {
+    icon: 'description',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const TreeList = ({ icon }) => {
+  return `
+        <cv-tree-list>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}" isOpen="true">
+                <div slot="label">PDCRAdmin</div>
+                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1">
+                    <div slot="label">PDCRAdmin</div>
+                </cv-tree-list-item>
+                <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="1">
+                    <div slot="label">PDCRAdmin</div>
+                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
+                        <div slot="label">PDCRAdmin</div>
+                    </cv-tree-list-item>
+                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
+                        <div slot="label">PDCRAdmin</div>
+                        <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="3">
+                            <div slot="label">PDCRAdmin</div>
+                            <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="4">
+                                <div slot="label">PDCRAdmin</div>
+                            </cv-tree-list-item>
+                        </cv-tree-list-item>
+                    </cv-tree-list-item>
+                </cv-tree-list-item>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+        </cv-tree-list>
+    `;
+};
+
+export const TwoLineItems = ({ icon }) => {
+  return `
+        <cv-tree-list>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}" isOpen="true">
+                <div slot="label">PDCRAdmin</div>
+                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1">
+                    <div slot="label">PDCRAdmin</div>
+                </cv-tree-list-item>
+                <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="1">
+                    <div slot="label">PDCRAdmin</div>
+                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
+                        <div slot="label">PDCRAdmin</div>
+                        <div slot="extraContent">VARCHAR(8)</div>
+                    </cv-tree-list-item>
+                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
+                        <div slot="label">PDCRAdmin</div>
+                        <div slot="extraContent">VARCHAR(8)</div>
+                    </cv-tree-list-item>
+                </cv-tree-list-item>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+        </cv-tree-list>
+    `;
+};
+
+export const EmptyState = ({ icon }) => {
+  return `
+        <cv-tree-list>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}" isOpen="true">
+                <div slot="label">PDCRAdmin</div>
+                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1">
+                    <div slot="label">PDCRAdmin</div>
+                </cv-tree-list-item>
+                <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="1">
+                    <div slot="label">PDCRAdmin</div>
+                    <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="2">
+                        <div slot="label">PDCRAdmin</div>
+                    </cv-tree-list-item>
+                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
+                        <div slot="label">PDCRAdmin</div>
+                    </cv-tree-list-item>
+                </cv-tree-list-item>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+            <cv-tree-list-item icon="${icon}">
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+        </cv-tree-list>
+    `;
+};
+// Putting the tree list into a container that has a set width.
+export const OverflowTest = ({ icon }) => {
+  return `
+        <div style="width: 300px; border-left: solid white 1px; border-right: solid white 1px">
+            <cv-tree-list>
+                <cv-tree-list-item icon="${icon}">
+                    <div slot="label">PDCRAdmin</div>
+                </cv-tree-list-item>
+                <cv-tree-list-item icon="${icon}">
+                    <div slot="label">PDCRAdmin</div>
+                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1">
+                        <div slot="label">PDCRAdmin</div>
+                    </cv-tree-list-item>
+                    <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="1">
+                        <div slot="label">PDCRAdmin</div>
+                        <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
+                            <div slot="label">PDCRAdmin</div>
+                        </cv-tree-list-item>
+                        <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="2">
+                            <div slot="label">PDCRAdmin</div>
+                            <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="3">
+                                <div slot="label">PDCRAdmin</div>
+                                <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="4">
+                                    <div slot="label">AReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabel</div>
+                                </cv-tree-list-item>
+                            </cv-tree-list-item>
+                        </cv-tree-list-item>
+                    </cv-tree-list-item>
+                </cv-tree-list-item>
+                <cv-tree-list-item icon="${icon}">
+                    <div slot="label">PDCRAdmin</div>
+                </cv-tree-list-item>
+                <cv-tree-list-item icon="${icon}">
+                    <div slot="label">PDCRAdmin</div>
+                </cv-tree-list-item>
+            </cv-tree-list>
+        </div>
+    `;
+};