@redvars/peacock 3.3.3 → 3.5.0

package/src/select/select.ts

@@ -0,0 +1,520 @@
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import BaseInput from '../input/BaseInput.js';
+import styles from './select.scss';
+import type { Menu } from '../menu/menu/menu.js';
+import { SelectOptionElement } from './option.js';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  icon?: string;
+}
+
+/**
+ * @label Select
+ * @tag wc-select
+ * @rawTag select
+ *
+ * @summary A dropdown select component supporting single and multi-select with optional typeahead search.
+ * @overview
+ * Select builds on wc-field and wc-menu to provide a fully-featured dropdown picker.
+ *
+ * - Single and multi-select modes
+ * - Client-side typeahead with `search="contains"`
+ * - Server-side typeahead with `search="managed"`
+ * - Multi-select chips display
+ *
+ * @example
+ * ```html
+ * <wc-select label="Fruit" placeholder="Pick a fruit...">
+ *   <wc-option value="apple">Apple</wc-option>
+ *   <wc-option value="banana">Banana</wc-option>
+ * </wc-select>
+ * ```
+ * @tags form
+ */
+export class Select extends BaseInput {
+  static styles = [styles];
+
+  private readonly _menuId = `wc-select-menu-${Math.random().toString(36).slice(2, 9)}`;
+
+  /**
+   * Array of options to display in the dropdown.
+   * Setting this property creates matching `<wc-option>` children automatically.
+   */
+  @property({ type: Array })
+  options: SelectOption[] = [];
+
+  /**
+   * The selected value. For multi-select, a comma-separated list of values.
+   */
+  @property({ type: String, reflect: true })
+  value: string = '';
+
+  /**
+   * Enable multi-select mode.
+   */
+  @property({ type: Boolean, reflect: true })
+  multiple: boolean = false;
+
+  /**
+   * Enable typeahead search.
+   * - `'contains'`: filters options client-side.
+   * - `'managed'`: emits a `select-search` event for server-controlled filtering.
+   */
+  @property({ type: String })
+  search: '' | 'contains' | 'managed' = '';
+
+  /**
+   * Placeholder text shown when no value is selected.
+   */
+  @property({ type: String })
+  placeholder: string = '';
+
+  /**
+   * Label displayed above the field.
+   */
+  @property({ type: String })
+  label: string = '';
+
+  /**
+   * Visual variant of the field.
+   */
+  @property({ type: String })
+  variant: 'filled' | 'outlined' | 'default' = 'default';
+
+  /**
+   * Helper text displayed below the field.
+   */
+  @property({ type: String, attribute: 'helper-text' })
+  helperText: string = '';
+
+  @property({ type: Boolean })
+  error: boolean = false;
+
+  @property({ type: String, attribute: 'error-text' })
+  errorText: string = '';
+
+  @property({ type: Boolean })
+  warning: boolean = false;
+
+  @property({ type: String, attribute: 'warning-text' })
+  warningText: string = '';
+
+  @state()
+  private _open: boolean = false;
+
+  @state()
+  private _focused: boolean = false;
+
+  @state()
+  private _searchQuery: string = '';
+
+  /** True when all options are filtered out by the current search query. */
+  @state()
+  private _noOptionsVisible: boolean = false;
+
+  @query('.select-trigger')
+  private _triggerEl?: HTMLElement;
+
+  private get _menu(): Menu | null {
+    return (this.renderRoot?.querySelector('wc-menu') as unknown as Menu) ?? null;
+  }
+
+  @query('.search-input')
+  private _searchInputEl?: HTMLInputElement;
+
+  override focus() {
+    this._triggerEl?.focus();
+  }
+
+  override blur() {
+    this._triggerEl?.blur();
+  }
+
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+
+  protected override updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('options')) {
+      this._syncProgrammaticOptions();
+    }
+    this._syncOptionStates();
+  }
+
+  // ── Programmatic options ───────────────────────────────────────────────────
+
+  /**
+   * Reconciles the `options` property with auto-generated `<wc-option>` light-DOM
+   * children (marked `data-generated`).  Declarative children placed by the
+   * consumer are left untouched.
+   */
+  private _syncProgrammaticOptions() {
+    this.querySelectorAll('wc-option[data-generated]').forEach(el => el.remove());
+    for (const opt of this.options) {
+      const el = new SelectOptionElement();
+      el.value = opt.value;
+      if (opt.icon) el.icon = opt.icon;
+      el.textContent = opt.label || (opt.value === '' ? 'None' : '');
+      el.dataset.generated = '';
+      this.appendChild(el);
+    }
+  }
+
+  // ── Option state sync ──────────────────────────────────────────────────────
+
+  /**
+   * Pushes `selected`, `keepOpen`, and `filtered` state onto every `<wc-option>`
+   * child element so each one can render itself correctly.
+   */
+  private _syncOptionStates() {
+    const optEls = Array.from(
+      this.querySelectorAll<SelectOptionElement>('wc-option'),
+    );
+    let visibleCount = 0;
+    for (const opt of optEls) {
+      opt.selected = this._isSelected(opt.value);
+      opt.keepOpen = this.multiple;
+      if (this.search && this.search !== 'managed' && this._searchQuery) {
+        const q = this._searchQuery.toLowerCase();
+        const label = opt.textContent?.trim() ?? '';
+        opt.filtered = !label.toLowerCase().includes(q);
+        if (!opt.filtered) visibleCount += 1;
+      } else {
+        opt.filtered = false;
+        visibleCount += 1;
+      }
+    }
+    this._noOptionsVisible = visibleCount === 0;
+  }
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
+
+  private get _selectedValues(): string[] {
+    if (!this.value) return [];
+    return this.value
+      .split(',')
+      .map(v => v.trim())
+      .filter(Boolean);
+  }
+
+  private _isSelected(value: string): boolean {
+    if (!this.multiple) {
+      return this.value === value;
+    }
+    return this._selectedValues.includes(value);
+  }
+
+  /** Returns the display label for a given option value. */
+  private _getLabelForValue(val: string): string {
+    for (const opt of this.querySelectorAll<SelectOptionElement>('wc-option')) {
+      if (opt.value === val) {
+        const label = opt.textContent?.trim();
+        if (label) return label;
+        return val === '' ? 'None' : val;
+      }
+    }
+    // Fallback to options array (before wc-option children are created)
+    const programmaticLabel = this.options.find(o => o.value === val)?.label;
+    if (programmaticLabel) return programmaticLabel;
+    return val === '' ? 'None' : val;
+  }
+
+  private get _displayLabel(): string {
+    if (!this.value) return '';
+    const firstValue = this._selectedValues[0];
+    if (!firstValue) return '';
+    return this._getLabelForValue(firstValue);
+  }
+
+  private get _isPopulated(): boolean {
+    return !!this.value;
+  }
+
+  // ── Menu open/close ────────────────────────────────────────────────────────
+
+  private _openMenu() {
+    if (this.disabled || this.readonly) return;
+    this._open = true;
+    this._focused = true;
+    this._triggerEl?.focus();
+    const menu = this._menu;
+    if (menu && this._triggerEl) {
+      menu.anchorElement = this._triggerEl;
+      const triggerWidth = this._triggerEl.getBoundingClientRect().width;
+      if (triggerWidth < 240) {
+        menu.style.setProperty('--menu-width', '240px');
+      } else {
+        menu.style.setProperty('--menu-width', `${Math.ceil(triggerWidth)}px`);
+      }
+      menu.show();
+    }
+    if (this.search) {
+      this._searchQuery = '';
+      // Use rAF so that the search input receives focus *after* wc-menu has
+      // finished showing and potentially focused a menu item.
+      this.updateComplete.then(() => {
+        requestAnimationFrame(() => {
+          this._searchInputEl?.focus();
+        });
+      });
+    }
+  }
+
+  private _closeMenu() {
+    if (!this._open) return;
+    this._open = false;
+    this._focused = false;
+    this._searchQuery = '';
+    this._menu?.close();
+  }
+
+  // ── Event handlers ─────────────────────────────────────────────────────────
+
+  private _handleTriggerClick(event: MouseEvent) {
+    event.stopPropagation();
+    // Ignore clicks that originated inside the search input — those should not
+    // toggle the menu (the input needs to stay open so the user can type).
+    if (event.target instanceof HTMLInputElement) {
+      return;
+    }
+    if (this._open) {
+      this._closeMenu();
+    } else {
+      this._openMenu();
+    }
+  }
+
+  private _handleFieldClick(event: MouseEvent) {
+    const eventPath = event.composedPath();
+
+    if (
+      eventPath.includes(this._triggerEl as EventTarget) ||
+      eventPath.some(
+        target =>
+          target instanceof HTMLInputElement ||
+          (target instanceof HTMLElement &&
+            (target.closest('.clear-btn') != null ||
+              target.matches('wc-icon-button'))),
+      )
+    ) {
+      return;
+    }
+
+    if (this._open) {
+      this._closeMenu();
+    } else {
+      this._openMenu();
+    }
+  }
+
+  private _handleTriggerKeyDown(event: KeyboardEvent) {
+    // When the typeahead search input is active, let the input handle its own
+    // keys (Space, Enter, etc.). Only intercept Escape to close the menu.
+    if (event.target instanceof HTMLInputElement) {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        this._closeMenu();
+      }
+      return;
+    }
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!this._open) this._openMenu();
+        break;
+      case 'Escape':
+        if (this._open) {
+          event.preventDefault();
+          this._closeMenu();
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  private _handleMenuClosed() {
+    this._open = false;
+    this._focused = false;
+    this._searchQuery = '';
+  }
+
+  private _handleMenuItemActivate(event: CustomEvent) {
+    const item = event.detail?.item as { value: string } | undefined;
+    if (!item) return;
+
+    const val = item.value;
+
+    if (val === undefined) return;
+
+    if (this.multiple) {
+      if (val === '') return;
+      const values = this._selectedValues;
+      const idx = values.indexOf(val);
+      if (idx >= 0) {
+        values.splice(idx, 1);
+      } else {
+        values.push(val);
+      }
+      this.value = values.join(',');
+    } else {
+      this.value = val;
+      this._closeMenu();
+    }
+
+    this._dispatchChange();
+  }
+
+  private _dispatchChange() {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleSearchInput(event: InputEvent) {
+    this._searchQuery = (event.target as HTMLInputElement).value;
+    if (this.search === 'managed') {
+      this.dispatchEvent(
+        new CustomEvent('select-search', {
+          detail: { value: this._searchQuery },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
+  private _handleChipDismiss(event: CustomEvent, chipValue: string) {
+    event.stopPropagation();
+    const values = this._selectedValues.filter(v => v !== chipValue);
+    this.value = values.join(',');
+    this._dispatchChange();
+  }
+
+  private _renderEmptyState() {
+    const hasSearchQuery = this._searchQuery.trim().length > 0;
+
+    return html`
+      <wc-empty-state
+        class="select-empty-state content-center"
+        illustration="no-document"
+        headline=${hasSearchQuery ? 'No results found' : 'No options available'}
+        description=${hasSearchQuery
+          ? 'Try a different search term.'
+          : 'There is nothing to select right now.'}
+      ></wc-empty-state>
+    `;
+  }
+
+  // ── Render helpers ─────────────────────────────────────────────────────────
+
+  private _renderTriggerContent() {
+    // Typeahead: when open, show a text input for filtering
+    if (this.search && this._open) {
+      return html`<input
+        class="search-input"
+        .value=${this._searchQuery}
+        placeholder=${this._displayLabel || this.placeholder}
+        @input=${this._handleSearchInput}
+      />`;
+    }
+
+    // Multi-select: show chips for selected items
+    if (this.multiple && this._selectedValues.length > 0) {
+      return html`<div class="chips-container">
+        ${this._selectedValues.map(
+          val => html`
+            <wc-chip
+              dismissible
+              value=${val}
+              @tag--dismiss=${(e: CustomEvent) =>
+                this._handleChipDismiss(e, val)}
+            >${this._getLabelForValue(val)}</wc-chip
+            >
+          `,
+        )}
+      </div>`;
+    }
+
+    // Single select: show selected label or placeholder
+    const label = this._displayLabel;
+    if (!label) {
+      return html`<span class="placeholder">${this.placeholder}</span>`;
+    }
+    return html`<span class="display-value">${label}</span>`;
+  }
+
+  private _renderFieldEnd() {
+    return html`
+      <wc-icon
+        class=${classMap({
+          'dropdown-icon': true,
+          'dropdown-icon--open': this._open,
+        })}
+        name="arrow_drop_down"
+      ></wc-icon>
+    `;
+  }
+
+  render() {
+    return html`
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        helper-text=${this.helperText}
+        ?error=${this.error}
+        error-text=${this.errorText}
+        ?warning=${this.warning}
+        warning-text=${this.warningText}
+        variant=${this.variant}
+        ?populated=${this._isPopulated || this._open}
+        ?focused=${this._focused}
+        .host=${this}
+        class="select-field"
+        @click=${this._handleFieldClick}
+      >
+        <div
+          class="select-trigger"
+          tabindex=${this.disabled ? -1 : 0}
+          role="combobox"
+          aria-label=${this.label || this.placeholder || 'Select option'}
+          aria-controls=${this._menuId}
+          aria-expanded=${String(this._open)}
+          aria-haspopup="listbox"
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeyDown}
+        >
+          ${this._renderTriggerContent()}
+        </div>
+
+        <div slot="field-end" class="field-end-wrapper">
+          ${this._renderFieldEnd()}
+        </div>
+      </wc-field>
+
+      <wc-menu
+        id=${this._menuId}
+        placement="bottom-start"
+        aria-label=${this.label || 'Options'}
+        @closed=${this._handleMenuClosed}
+        @menu-item-activate=${(e: CustomEvent) =>
+          this._handleMenuItemActivate(e)}
+      >
+        <slot></slot>
+        ${this._noOptionsVisible ? this._renderEmptyState() : nothing}
+      </wc-menu>
+    `;
+  }
+}
+

package/src/side-sheet/index.ts

@@ -0,0 +1 @@
+export { SideSheet } from './side-sheet.js';

package/src/side-sheet/side-sheet.scss

@@ -0,0 +1,79 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: contents;
+
+  --side-sheet-container-color: var(--color-surface-container-low, #f7f2fa);
+  --side-sheet-scrim-color: rgba(0, 0, 0, 0.32);
+  --side-sheet-shape: var(--shape-corner-extra-large, 28px);
+  --side-sheet-width: 360px;
+  --side-sheet-transition-duration: var(--duration-medium2, 300ms);
+  --side-sheet-transition-easing: var(--easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.scrim {
+  inset: 0;
+  position: fixed;
+  background-color: var(--side-sheet-scrim-color);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--side-sheet-transition-duration) var(--side-sheet-transition-easing);
+  z-index: 1000;
+}
+
+.scrim.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sheet {
+  background-color: var(--side-sheet-container-color);
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  transition:
+    transform var(--side-sheet-transition-duration) var(--side-sheet-transition-easing);
+  width: var(--side-sheet-width);
+  will-change: transform;
+  z-index: 1001;
+}
+
+.sheet.variant-standard {
+  position: relative;
+  z-index: 1;
+}
+
+/* Position: right */
+.sheet.position-right {
+  border-radius: var(--side-sheet-shape) 0 0 var(--side-sheet-shape);
+  right: 0;
+  transform: translateX(100%);
+}
+
+.sheet.position-right.open {
+  transform: translateX(0);
+}
+
+/* Position: left */
+.sheet.position-left {
+  border-radius: 0 var(--side-sheet-shape) var(--side-sheet-shape) 0;
+  left: 0;
+  transform: translateX(-100%);
+}
+
+.sheet.position-left.open {
+  transform: translateX(0);
+}
+
+.content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--spacing-300, 1.5rem);
+}

package/src/side-sheet/side-sheet.ts

@@ -0,0 +1,100 @@
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import IndividualComponent from '../IndividualComponent.js';
+import styles from './side-sheet.scss';
+
+/**
+ * @label Side Sheet
+ * @tag wc-side-sheet
+ * @rawTag side-sheet
+ * @summary Side sheets slide in from the edge of the screen to reveal supplemental content. Supports standard and modal variants per Material Design 3.
+ *
+ * @cssprop --side-sheet-container-color - Background color of the sheet container.
+ * @cssprop --side-sheet-scrim-color - Color of the modal scrim overlay.
+ * @cssprop --side-sheet-shape - Corner radius of the leading edge.
+ * @cssprop --side-sheet-width - Width of the side sheet.
+ *
+ * @example
+ * ```html
+ * Side Sheet
+
+ * ```
+ * @tags navigation, overlay
+ */
+@IndividualComponent
+export class SideSheet extends LitElement {
+  static styles = [styles];
+
+  /** Whether the sheet is visible. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * Sheet variant.
+   * - `"standard"`: Coexists with page content; no scrim.
+   * - `"modal"`: Overlays page content with a scrim backdrop.
+   */
+  @property({ type: String, reflect: true }) variant: 'standard' | 'modal' =
+    'modal';
+
+  /**
+   * Side from which the sheet slides in.
+   * - `"left"`: Sheet opens from the left edge.
+   * - `"right"`: Sheet opens from the right edge.
+   */
+  @property({ type: String, reflect: true }) position: 'left' | 'right' =
+    'right';
+
+  show() {
+    this.open = true;
+  }
+
+  hide() {
+    this._close('programmatic');
+  }
+
+  private _close(reason: string) {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent('side-sheet-close', {
+        detail: { reason },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleScrimClick() {
+    if (this.variant === 'modal') {
+      this._close('scrim');
+    }
+  }
+
+  render() {
+    return html`
+      ${this.variant === 'modal'
+        ? html`<div
+            class=${classMap({ scrim: true, visible: this.open })}
+            @click=${this._handleScrimClick}
+          ></div>`
+        : nothing}
+
+      <div
+        class=${classMap({
+          sheet: true,
+          open: this.open,
+          [`variant-${this.variant}`]: true,
+          [`position-${this.position}`]: true,
+        })}
+        role="dialog"
+        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
+        aria-hidden=${!this.open ? 'true' : 'false'}
+      >
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}