@redvars/peacock 3.4.0 → 3.5.1

package/dist/src/styleMixins.css.d.ts

@@ -1,9 +0,0 @@
-import { CSSResult } from 'lit';
-export declare const focusRing: (color?: string) => CSSResult;
-export declare const getTypography: (name: string) => CSSResult;
-export declare const getTypographyNotImportant: (name: string) => CSSResult;
-export declare const forPhoneOnly: (content: CSSResult) => CSSResult;
-export declare const forTabletPortraitUp: (content: CSSResult) => CSSResult;
-export declare const forTabletLandscapeUp: (content: CSSResult) => CSSResult;
-export declare const forDesktopUp: (content: CSSResult) => CSSResult;
-export declare const forBigDesktopUp: (content: CSSResult) => CSSResult;

package/dist/src/tree-view/index.d.ts

@@ -1,2 +0,0 @@
-export { TreeNode } from './tree-node.js';
-export { TreeView } from './tree-view.js';

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

@@ -1,69 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @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 declare class TreeNode extends LitElement {
-    static styles: import("lit").CSSResultGroup[];
-    /**
-     * The value used to identify this node when selected.
-     */
-    value: string;
-    /**
-     * The display label for this node.
-     */
-    label: string;
-    /**
-     * Optional icon name to display before the label.
-     */
-    icon: string;
-    /**
-     * Optional hyperlink to navigate to on click.
-     */
-    href: string;
-    /**
-     * Sets or retrieves the window or frame at which to target content.
-     */
-    target: string;
-    /**
-     * If true, the user cannot interact with the node.
-     */
-    disabled: boolean;
-    /**
-     * Whether the node is currently selected.
-     */
-    selected: boolean;
-    /**
-     * Whether child nodes are visible.
-     */
-    expanded: boolean;
-    /**
-     * The nesting depth level (set automatically by the parent tree-view).
-     */
-    level: number;
-    private readonly _nativeElement;
-    focus(): void;
-    blur(): void;
-    private _getChildNodes;
-    connectedCallback(): void;
-    private _syncHostAria;
-    private _updateChildLevels;
-    private _handleClick;
-    private _handleKeyDown;
-    updated(changedProps: Map<string, unknown>): void;
-    private _renderContent;
-    render(): import("lit-html").TemplateResult<1>;
-}

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

@@ -1,40 +0,0 @@
-import { LitElement } from 'lit';
-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 declare class TreeView extends LitElement {
-    static styles: import("lit").CSSResultGroup[];
-    /**
-     * The value of the currently selected node.
-     */
-    selectedNode: string;
-    connectedCallback(): void;
-    updated(changedProps: Map<string, unknown>): void;
-    disconnectedCallback(): void;
-    private _getTopLevelNodes;
-    private _getAllVisibleNodes;
-    private _onNodeClick;
-    private _updateSelectedState;
-    private _clearSelectedState;
-    private _syncSelectedStateFromProperty;
-    private _onSlotChange;
-    private _collectAllNodes;
-    private _onKeyDown;
-    render(): import("lit-html").TemplateResult<1>;
-    static Node: typeof TreeNode;
-}

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

@@ -1,6 +0,0 @@
-import { TreeView } from './tree-view.js';
-import { TreeNode } from './tree-node.js';
-export declare class WcTreeNode extends TreeNode {
-}
-export declare class WcTreeView extends TreeView {
-}

package/dist/src/utils.d.ts

@@ -1,9 +0,0 @@
-export declare function createCacheFetch(name: string): Promise<(url: string) => Promise<string>>;
-export declare function sanitizeSvg(rawSvg: string): string;
-export declare function observerSlotChangesWithCallback(slot: HTMLSlotElement | null, callback: (hasContent: boolean) => void): void;
-export declare function throttle(func: Function, delay: number, options?: {
-    leading: boolean;
-    trailing: boolean;
-}): (...args: any[]) => void;
-export declare function isInViewport(element: HTMLElement): boolean;
-export declare function isDarkMode(): boolean;

package/dist/test/tree-view.test.d.ts

@@ -1 +0,0 @@
-import '../src/tree-view/wc-tree-view.js';

package/src/styleMixins.css.ts

@@ -1,55 +0,0 @@
-import { css, unsafeCSS, CSSResult } from 'lit';
-
-export const focusRing = (
-  color = 'var(--border-interactive)',
-): CSSResult => css`
-  outline: 2px solid ${unsafeCSS(color)};
-`;
-
-export const getTypography = (name: string): CSSResult => css`
-  font-family: var(--typography-${unsafeCSS(name)}-font-family) !important;
-  font-size: var(--typography-${unsafeCSS(name)}-font-size) !important;
-  font-weight: var(--typography-${unsafeCSS(name)}-font-weight) !important;
-  line-height: var(--typography-${unsafeCSS(name)}-line-height) !important;
-  letter-spacing: var(
-    --typography-${unsafeCSS(name)}-letter-spacing
-  ) !important;
-`;
-
-export const getTypographyNotImportant = (name: string): CSSResult => css`
-  font-family: var(--typography-${unsafeCSS(name)}-font-family);
-  font-size: var(--typography-${unsafeCSS(name)}-font-size);
-  font-weight: var(--typography-${unsafeCSS(name)}-font-weight);
-  line-height: var(--typography-${unsafeCSS(name)}-line-height);
-  letter-spacing: var(--typography-${unsafeCSS(name)}-letter-spacing);
-`;
-
-export const forPhoneOnly = (content: CSSResult): CSSResult => css`
-  @media (max-width: 671px) {
-    ${content}
-  }
-`;
-
-export const forTabletPortraitUp = (content: CSSResult): CSSResult => css`
-  @media (min-width: 672px) {
-    ${content}
-  }
-`;
-
-export const forTabletLandscapeUp = (content: CSSResult): CSSResult => css`
-  @media (min-width: 1056px) {
-    ${content}
-  }
-`;
-
-export const forDesktopUp = (content: CSSResult): CSSResult => css`
-  @media (min-width: 1312px) {
-    ${content}
-  }
-`;
-
-export const forBigDesktopUp = (content: CSSResult): CSSResult => css`
-  @media (min-width: 1584px) {
-    ${content}
-  }
-`;

package/src/tree-view/demo/index.html

@@ -1,57 +0,0 @@
-<!doctype html>
-<html lang='en-GB'>
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-
-  <style>
-    body {
-      background: #fafafa;
-      padding: 2rem;
-      font-family: 'Noto Sans', sans-serif;
-    }
-    h2 {
-      margin-top: 2rem;
-      margin-bottom: 0.5rem;
-    }
-  </style>
-</head>
-<body>
-
-<h2>Basic Tree View</h2>
-<wc-tree-view>
-  <wc-tree-node label="Documents" icon="folder" expanded>
-    <wc-tree-node label="Work" icon="folder" expanded>
-      <wc-tree-node label="Project A" icon="description"></wc-tree-node>
-      <wc-tree-node label="Project B" icon="description"></wc-tree-node>
-    </wc-tree-node>
-    <wc-tree-node label="Personal" icon="folder">
-      <wc-tree-node label="Resume.pdf" icon="picture_as_pdf"></wc-tree-node>
-    </wc-tree-node>
-  </wc-tree-node>
-  <wc-tree-node label="Pictures" icon="photo_library">
-    <wc-tree-node label="Vacation.jpg" icon="image"></wc-tree-node>
-    <wc-tree-node label="Family.jpg" icon="image"></wc-tree-node>
-  </wc-tree-node>
-  <wc-tree-node label="Disabled Node" icon="block" disabled></wc-tree-node>
-</wc-tree-view>
-
-<h2>Tree View without Icons</h2>
-<wc-tree-view>
-  <wc-tree-node label="Category 1" expanded>
-    <wc-tree-node label="Item 1.1"></wc-tree-node>
-    <wc-tree-node label="Item 1.2">
-      <wc-tree-node label="Item 1.2.1"></wc-tree-node>
-      <wc-tree-node label="Item 1.2.2"></wc-tree-node>
-    </wc-tree-node>
-  </wc-tree-node>
-  <wc-tree-node label="Category 2">
-    <wc-tree-node label="Item 2.1"></wc-tree-node>
-  </wc-tree-node>
-</wc-tree-view>
-
-<script type='module' src='/dist/peacock-loader.js'></script>
-</body>
-</html>

package/src/tree-view/index.ts

@@ -1,2 +0,0 @@
-export { TreeNode } from './tree-node.js';
-export { TreeView } from './tree-view.js';

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

@@ -1,101 +0,0 @@
-@use '../../scss/mixin';
-
-@include mixin.base-styles;
-
-:host {
-  display: block;
-
-  // M3 tree node sizing
-  --tree-node-height: 2.5rem;
-  --tree-node-icon-size: 1.25rem;
-  --tree-node-border-radius: var(--global-shape-corner-full, 9999px);
-
-  // M3 color tokens
-  --tree-node-label-color: var(--color-on-surface);
-  --tree-node-icon-color: var(--color-on-surface-variant);
-  --tree-node-selected-background: var(--color-secondary-container);
-  --tree-node-selected-color: var(--color-on-secondary-container);
-  --tree-node-hover-background: var(--color-inverse-primary);
-  --tree-node-focus-ring-color: var(--color-primary);
-}
-
-.tree-node {
-  display: block;
-}
-
-.tree-node-content {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  height: var(--tree-node-height);
-  border-radius: var(--tree-node-border-radius);
-  color: var(--tree-node-label-color);
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  outline: none;
-
-  @include mixin.get-typography(body-medium);
-
-  &:not(.disabled):hover {
-    background-color: var(--tree-node-hover-background);
-  }
-
-  &:focus-visible {
-    @include mixin.focus-ring(var(--tree-node-focus-ring-color));
-  }
-
-  &.selected {
-    background-color: var(--tree-node-selected-background);
-    color: var(--tree-node-selected-color);
-
-    .node-icon {
-      --icon-color: var(--tree-node-selected-color);
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.38;
-    pointer-events: none;
-  }
-}
-
-.expand-icon {
-  --icon-size: var(--tree-node-icon-size);
-  --icon-color: var(--tree-node-icon-color);
-  flex-shrink: 0;
-  transition: transform var(--duration-short2, 200ms) var(--easing-standard, ease);
-
-  &.expanded {
-    transform: rotate(90deg);
-  }
-}
-
-.icon-space {
-  display: inline-block;
-  width: var(--tree-node-icon-size);
-  height: var(--tree-node-icon-size);
-  flex-shrink: 0;
-}
-
-.node-icon {
-  --icon-size: var(--tree-node-icon-size);
-  --icon-color: var(--tree-node-icon-color);
-  flex-shrink: 0;
-}
-
-.tree-node-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.node-children {
-  display: none;
-
-  &.expanded {
-    display: block;
-  }
-}

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

@@ -1,268 +0,0 @@
-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>`;
-  }
-}