@redvars/peacock 3.3.0 → 3.3.2

package/src/tree-view/tree-node.ts

@@ -0,0 +1,268 @@
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import styles from './tree-node.scss';
+
+/**
+ * @label Tree Node
+ * @tag wc-tree-node
+ * @rawTag tree-node
+ * @parentRawTag tree-view
+ * @summary A tree node represents a single item in a hierarchical tree structure. It supports nesting, icons, links, and keyboard navigation.
+ *
+ * @example
+ * ```html
+ * <wc-tree-view>
+ *   <wc-tree-node label="Parent">
+ *     <wc-tree-node label="Child"></wc-tree-node>
+ *   </wc-tree-node>
+ * </wc-tree-view>
+ * ```
+ * @tags navigation
+ */
+export class TreeNode extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The value used to identify this node when selected.
+   */
+  @property({ type: String, reflect: true })
+  value: string = '';
+
+  /**
+   * The display label for this node.
+   */
+  @property({ type: String, reflect: true })
+  label: string = '';
+
+  /**
+   * Optional icon name to display before the label.
+   */
+  @property({ type: String, reflect: true })
+  icon: string = '';
+
+  /**
+   * Optional hyperlink to navigate to on click.
+   */
+  @property({ type: String, reflect: true })
+  href: string = '';
+
+  /**
+   * Sets or retrieves the window or frame at which to target content.
+   */
+  @property({ type: String, reflect: true })
+  target: string = '_self';
+
+  /**
+   * If true, the user cannot interact with the node.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  /**
+   * Whether the node is currently selected.
+   */
+  @property({ type: Boolean, reflect: true })
+  selected: boolean = false;
+
+  /**
+   * Whether child nodes are visible.
+   */
+  @property({ type: Boolean, reflect: true })
+  expanded: boolean = false;
+
+  /**
+   * The nesting depth level (set automatically by the parent tree-view).
+   */
+  @property({ type: Number, reflect: true })
+  level: number = 0;
+
+  @query('.tree-node-content')
+  private readonly _nativeElement!: HTMLElement | null;
+
+  override focus() {
+    this._nativeElement?.focus();
+  }
+
+  override blur() {
+    this._nativeElement?.blur();
+  }
+
+  private _getChildNodes(): TreeNode[] {
+    return Array.from(this.children).filter(
+      el => el.tagName.toLowerCase() === 'wc-tree-node',
+    ) as TreeNode[];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateChildLevels();
+    this.setAttribute('role', 'treeitem');
+    this._syncHostAria();
+  }
+
+  private _syncHostAria() {
+    const hasChildren = this._getChildNodes().length > 0;
+    if (hasChildren) {
+      this.setAttribute('aria-expanded', String(this.expanded));
+    } else {
+      this.removeAttribute('aria-expanded');
+    }
+    this.setAttribute('aria-selected', String(this.selected));
+    this.setAttribute('aria-disabled', String(this.disabled));
+    this.setAttribute('aria-level', String(this.level + 1));
+  }
+
+  private _updateChildLevels() {
+    const children = this._getChildNodes();
+    children.forEach(child => {
+      // eslint-disable-next-line no-param-reassign
+      child.level = this.level + 1;
+    });
+  }
+
+  private _handleClick(event: Event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    const hasChildren = this._getChildNodes().length > 0;
+    if (hasChildren) {
+      this.expanded = !this.expanded;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('tree-node:click', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          value: this.value || this.label,
+          label: this.label,
+          expanded: this.expanded,
+        },
+      }),
+    );
+  }
+
+  private _handleKeyDown(event: KeyboardEvent) {
+    if (this.disabled) return;
+
+    const hasChildren = this._getChildNodes().length > 0;
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.preventDefault();
+        if (hasChildren) {
+          this.expanded = !this.expanded;
+        }
+        this.dispatchEvent(
+          new CustomEvent('tree-node:click', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              value: this.value || this.label,
+              label: this.label,
+              expanded: this.expanded,
+            },
+          }),
+        );
+        if (this.href) {
+          window.open(this.href, this.target);
+        }
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        if (this.expanded && hasChildren) {
+          this.expanded = false;
+        }
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        if (hasChildren) {
+          if (!this.expanded) {
+            this.expanded = true;
+          } else {
+            const firstChild = this._getChildNodes()[0];
+            firstChild?.focus();
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    super.updated(changedProps);
+    if (changedProps.has('level')) {
+      this._updateChildLevels();
+    }
+    this._syncHostAria();
+  }
+
+  private _renderContent(hasChildren: boolean) {
+    // 0.125rem offset aligns text visually with the expand/icon space
+    const indentStyle = styleMap({
+      paddingInlineStart: `calc(${this.level + 1}rem - 0.125rem)`,
+    });
+
+    const contentClasses = classMap({
+      'tree-node-content': true,
+      selected: this.selected,
+      disabled: this.disabled,
+    });
+
+    const innerContent = html`
+      ${hasChildren
+        ? html`<wc-icon
+            class=${classMap({ 'expand-icon': true, expanded: this.expanded })}
+            name="arrow_right"
+          ></wc-icon>`
+        : html`<span class="icon-space"></span>`}
+      ${this.icon
+        ? html`<wc-icon class="node-icon" name=${this.icon}></wc-icon>`
+        : ''}
+      <span class="tree-node-label">${this.label}<slot name="label"></slot></span>
+    `;
+
+    if (this.href) {
+      return html`<a
+        class=${contentClasses}
+        style=${indentStyle}
+        href=${this.href}
+        target=${this.target}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+      >${innerContent}</a>`;
+    }
+
+    return html`<div
+      class=${contentClasses}
+      style=${indentStyle}
+      tabindex=${this.disabled ? '-1' : '0'}
+      @click=${this._handleClick}
+      @keydown=${this._handleKeyDown}
+    >${innerContent}</div>`;
+  }
+
+  render() {
+    const hasChildren = this._getChildNodes().length > 0;
+
+    const nodeSlotClasses = classMap({
+      'node-children': true,
+      expanded: this.expanded,
+    });
+
+    return html`<div class="tree-node">
+      ${this._renderContent(hasChildren)}
+      <div class=${nodeSlotClasses}>
+        <slot></slot>
+      </div>
+    </div>`;
+  }
+}

package/src/tree-view/tree-view.scss

@@ -0,0 +1,12 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.tree-view {
+  display: block;
+  padding: var(--spacing-100, 0.5rem) 0;
+}

package/src/tree-view/tree-view.ts

@@ -0,0 +1,182 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './tree-view.scss';
+import { TreeNode } from './tree-node.js';
+
+/**
+ * @label Tree View
+ * @tag wc-tree-view
+ * @rawTag tree-view
+ * @summary A tree view is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable nodes.
+ *
+ * @example
+ * ```html
+ * <wc-tree-view>
+ *   <wc-tree-node label="Parent" expanded>
+ *     <wc-tree-node label="Child 1"></wc-tree-node>
+ *     <wc-tree-node label="Child 2"></wc-tree-node>
+ *   </wc-tree-node>
+ * </wc-tree-view>
+ * ```
+ * @tags navigation
+ */
+export class TreeView extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The value of the currently selected node.
+   */
+  @property({ type: String, attribute: 'selected-node', reflect: true })
+  selectedNode: string = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('tree-node:click', this._onNodeClick as EventListener);
+    this.addEventListener('keydown', this._onKeyDown);
+    this.setAttribute('role', 'tree');
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    super.updated(changedProps);
+
+    if (changedProps.has('selectedNode')) {
+      this._syncSelectedStateFromProperty();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('tree-node:click', this._onNodeClick as EventListener);
+    this.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  private _getTopLevelNodes(): TreeNode[] {
+    return Array.from(this.children).filter(
+      el => el.tagName.toLowerCase() === 'wc-tree-node',
+    ) as TreeNode[];
+  }
+
+  private _getAllVisibleNodes(): TreeNode[] {
+    const result: TreeNode[] = [];
+    const collect = (nodes: TreeNode[]) => {
+      nodes.forEach(node => {
+        result.push(node);
+        if (node.expanded) {
+          const children = Array.from(node.children).filter(
+            el => el.tagName.toLowerCase() === 'wc-tree-node',
+          ) as TreeNode[];
+          collect(children);
+        }
+      });
+    };
+    collect(this._getTopLevelNodes());
+    return result;
+  }
+
+  private _onNodeClick = (event: CustomEvent) => {
+    const target = event.target as TreeNode;
+    if (target.disabled) return;
+
+    const value = event.detail?.value ?? target.value ?? target.label;
+    this.selectedNode = value;
+
+    // Update selected state on all nodes
+    this._updateSelectedState(value);
+
+    this.dispatchEvent(
+      new CustomEvent('tree-view:change', {
+        bubbles: true,
+        composed: true,
+        detail: { value, node: target },
+      }),
+    );
+  };
+
+  private _updateSelectedState(selectedValue: string) {
+    const allNodes = this._collectAllNodes(this._getTopLevelNodes());
+    allNodes.forEach(node => {
+      const nodeValue = node.value || node.label;
+      // eslint-disable-next-line no-param-reassign
+      node.selected = nodeValue === selectedValue;
+    });
+  }
+
+  private _clearSelectedState() {
+    const allNodes = this._collectAllNodes(this._getTopLevelNodes());
+    allNodes.forEach(node => {
+      // eslint-disable-next-line no-param-reassign
+      node.selected = false;
+    });
+  }
+
+  private _syncSelectedStateFromProperty() {
+    if (this.selectedNode) {
+      this._updateSelectedState(this.selectedNode);
+      return;
+    }
+
+    this._clearSelectedState();
+  }
+
+  private _onSlotChange = () => {
+    this._syncSelectedStateFromProperty();
+  };
+
+  private _collectAllNodes(nodes: TreeNode[]): TreeNode[] {
+    const result: TreeNode[] = [];
+    nodes.forEach(node => {
+      result.push(node);
+      const children = Array.from(node.children).filter(
+        el => el.tagName.toLowerCase() === 'wc-tree-node',
+      ) as TreeNode[];
+      result.push(...this._collectAllNodes(children));
+    });
+    return result;
+  }
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    const visibleNodes = this._getAllVisibleNodes().filter(n => !n.disabled);
+    if (visibleNodes.length === 0) return;
+
+    const focusedIndex = visibleNodes.findIndex(node => {
+      const root = node.shadowRoot;
+      return root?.activeElement !== null && root?.activeElement !== undefined;
+    });
+
+    if (focusedIndex === -1 && event.key !== 'Tab') return;
+
+    switch (event.key) {
+      case 'ArrowDown': {
+        event.preventDefault();
+        const nextIndex = (focusedIndex + 1) % visibleNodes.length;
+        visibleNodes[nextIndex]?.focus();
+        break;
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
+        const prevIndex =
+          (focusedIndex - 1 + visibleNodes.length) % visibleNodes.length;
+        visibleNodes[prevIndex]?.focus();
+        break;
+      }
+      case 'Home':
+        event.preventDefault();
+        visibleNodes[0]?.focus();
+        break;
+      case 'End':
+        event.preventDefault();
+        visibleNodes[visibleNodes.length - 1]?.focus();
+        break;
+      default:
+        break;
+    }
+  };
+
+  render() {
+    return html`<div class="tree-view">
+      <slot @slotchange=${this._onSlotChange}></slot>
+    </div>`;
+  }
+
+  static Node = TreeNode;
+}

package/src/tree-view/wc-tree-view.ts

@@ -0,0 +1,9 @@
+import { customElement } from 'lit/decorators.js';
+import { TreeView } from './tree-view.js';
+import { TreeNode } from './tree-node.js';
+
+@customElement('wc-tree-node')
+export class WcTreeNode extends TreeNode {}
+
+@customElement('wc-tree-view')
+export class WcTreeView extends TreeView {}

package/dist/class-map-DpeNtqCn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"class-map-DpeNtqCn.js","sources":["../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACA,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}