@redvars/peacock 3.5.1 → 3.6.1

package/src/condition-builder/cb-expression.ts

@@ -0,0 +1,49 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './cb-expression.scss';
+
+/**
+ * @label CB Expression
+ * @tag wc-cb-expression
+ * @rawTag cb-expression
+ * @summary An expression row within a condition builder, containing an operator select and a slot for value inputs.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-expression>
+ *   <wc-input placeholder="Enter value"></wc-input>
+ * </wc-cb-expression>
+ * ```
+ */
+@IndividualComponent
+export class CbExpression extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The list of operator options to display in the operator select.
+   * Each item should have at least `label` and `value` properties.
+   */
+  @property({ type: Array })
+  operators: { label: string; value: string; icon?: string }[] = [];
+
+  /** The currently selected operator value. */
+  @property({ type: String, attribute: 'operator-value' })
+  operatorValue = '';
+
+  render() {
+    return html`
+      <div class="expression">
+        <wc-select
+          inline
+          .value=${this.operatorValue}
+          placeholder="Select Operator"
+          .options=${this.operators}
+        ></wc-select>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/condition-builder/cb-predicate.scss

@@ -0,0 +1,35 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.predicate:not(.vertical) {
+  .predicate-body {
+    padding-top: var(--spacing-200);
+  }
+
+  .predicate-condition-operator {
+    padding: var(--spacing-200) var(--spacing-400) 0 var(--spacing-400);
+  }
+}
+
+.predicate.vertical {
+  display: flex;
+  align-items: stretch;
+
+  .predicate-condition-operator {
+    padding: var(--spacing-400) 0 var(--spacing-200) 0;
+    padding-inline-end: var(--spacing-200);
+  }
+
+  .predicate-body {
+    flex: 1;
+  }
+}
+
+.slot-end {
+  display: block;
+}

package/src/condition-builder/cb-predicate.ts

@@ -0,0 +1,102 @@
+import { html, LitElement, 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 './cb-predicate.scss';
+
+/**
+ * @label CB Predicate
+ * @tag wc-cb-predicate
+ * @rawTag cb-predicate
+ * @summary A predicate container in a condition builder that can display conditions in horizontal or vertical layout with an optional logical operator divider.
+ * @tags condition-builder
+ * @parentRawTag compound-expression
+ *
+ * @example
+ * ```html
+ * <wc-cb-predicate condition-operator="and" vertical>
+ *   <wc-cb-compound-expression field-label="Age">
+ *     <wc-cb-expression></wc-cb-expression>
+ *   </wc-cb-compound-expression>
+ * </wc-cb-predicate>
+ * ```
+ */
+@IndividualComponent
+export class CbPredicate extends LitElement {
+  static styles = [styles];
+
+  /** The logical operator shown between predicates ('and' or 'or'). */
+  @property({ type: String, attribute: 'condition-operator', reflect: true })
+  conditionOperator?: 'and' | 'or';
+
+  /** Whether to render the predicate in vertical layout. */
+  @property({ type: Boolean, reflect: true })
+  vertical = false;
+
+  override updated() {
+    if (this.vertical) {
+      this.__adjustSlotEndPadding();
+    }
+  }
+
+  private __adjustSlotEndPadding() {
+    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');
+    const operatorElm = this.renderRoot.querySelector<HTMLElement>(
+      '.predicate-condition-operator',
+    );
+    if (slotEnd && operatorElm) {
+      slotEnd.style.paddingInlineStart =
+        operatorElm.getBoundingClientRect().width + 'px';
+    }
+  }
+
+  private __renderHorizontalOperator() {
+    if (!this.conditionOperator) return nothing;
+    return html`
+      <wc-cb-divider vertical class="predicate-condition-operator">
+        <wc-tag color="yellow" size="sm">${this.conditionOperator}</wc-tag>
+      </wc-cb-divider>
+    `;
+  }
+
+  private __renderVerticalOperator() {
+    if (!this.conditionOperator) return nothing;
+    return html`
+      <div class="predicate-condition-operator">
+        <wc-cb-divider connect-start connect-end>
+          <wc-tag color="green" size="sm">${this.conditionOperator}</wc-tag>
+        </wc-cb-divider>
+      </div>
+    `;
+  }
+
+  render() {
+    const classes = {
+      predicate: true,
+      vertical: this.vertical,
+    };
+
+    if (this.vertical) {
+      return html`
+        <div class=${classMap(classes)}>
+          ${this.__renderVerticalOperator()}
+          <div class="predicate-body">
+            <slot></slot>
+          </div>
+        </div>
+        <div class="slot-end">
+          <slot name="end"></slot>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class=${classMap(classes)}>
+        <div class="predicate-body">
+          <slot></slot>
+        </div>
+        ${this.__renderHorizontalOperator()}
+      </div>
+    `;
+  }
+}

package/src/condition-builder/condition-builder.scss

@@ -0,0 +1,13 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.condition-builder {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-200);
+}

package/src/condition-builder/condition-builder.ts

@@ -0,0 +1,38 @@
+import { html, LitElement } from 'lit';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './condition-builder.scss';
+
+/**
+ * @label Condition Builder
+ * @tag wc-condition-builder
+ * @rawTag condition-builder
+ * @summary A condition builder component that allows users to construct complex filter conditions using a visual rule-based interface with predicates, compound expressions, and logical operators.
+ * @tags condition-builder
+ *
+ * @example
+ * ```html
+ * <wc-condition-builder>
+ *   <wc-cb-predicate condition-operator="or">
+ *     <wc-cb-predicate vertical condition-operator="and">
+ *       <wc-cb-compound-expression field-label="Age" condition-operator="or">
+ *         <wc-cb-expression>
+ *           <wc-input inline placeholder="Enter value"></wc-input>
+ *         </wc-cb-expression>
+ *       </wc-cb-compound-expression>
+ *     </wc-cb-predicate>
+ *   </wc-cb-predicate>
+ * </wc-condition-builder>
+ * ```
+ */
+@IndividualComponent
+export class ConditionBuilder extends LitElement {
+  static styles = [styles];
+
+  render() {
+    return html`
+      <div class="condition-builder">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/condition-builder/index.ts

@@ -0,0 +1,5 @@
+export { ConditionBuilder } from './condition-builder.js';
+export { CbPredicate } from './cb-predicate.js';
+export { CbCompoundExpression } from './cb-compound-expression.js';
+export { CbExpression } from './cb-expression.js';
+export { CbDivider } from './cb-divider.js';

package/src/dropdown-button/demo/index.html

@@ -0,0 +1,110 @@
+<!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: var(--color-surface);
+      padding: 2rem;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: flex-start;
+      font-family: var(--font-family-sans);
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Basic usage -->
+  <wc-dropdown-button>
+    Actions
+    <wc-menu-item slot="menu">Edit</wc-menu-item>
+    <wc-menu-item slot="menu">Duplicate</wc-menu-item>
+    <wc-menu-item slot="menu">Delete</wc-menu-item>
+  </wc-dropdown-button>
+
+  <!-- Variants -->
+  <wc-dropdown-button variant="filled">
+    Filled
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+  <wc-dropdown-button variant="tonal">
+    Tonal
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+  <wc-dropdown-button variant="outlined">
+    Outlined
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+  <wc-dropdown-button variant="text">
+    Text
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+  <wc-dropdown-button variant="elevated">
+    Elevated
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+
+  <!-- Colors -->
+  <wc-dropdown-button color="primary">
+    Primary
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+  <wc-dropdown-button color="success">
+    Success
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+  <wc-dropdown-button color="danger">
+    Danger
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+
+  <!-- Sizes -->
+  <wc-dropdown-button size="xs">
+    Extra small
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+  <wc-dropdown-button size="sm">
+    Small
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+  <wc-dropdown-button size="md">
+    Medium
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+
+  <!-- Disabled -->
+  <wc-dropdown-button disabled>
+    Disabled
+    <wc-menu-item slot="menu">Option A</wc-menu-item>
+    <wc-menu-item slot="menu">Option B</wc-menu-item>
+  </wc-dropdown-button>
+
+  <!-- Placement -->
+  <wc-dropdown-button placement="bottom-end">
+    Bottom End
+    <wc-menu-item slot="menu">Option 1</wc-menu-item>
+    <wc-menu-item slot="menu">Option 2</wc-menu-item>
+  </wc-dropdown-button>
+
+<script type='module'>
+  import '/dist/peacock-loader.js';
+</script>
+</body>
+</html>

package/src/dropdown-button/dropdown-button.scss

@@ -0,0 +1,22 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+  position: relative;
+
+  --dropdown-button-container-shape: var(--shape-corner-medium);
+}
+
+.trigger-button {
+  --button-container-shape: var(--dropdown-button-container-shape);
+}
+
+.dropdown-icon {
+  transition: transform 200ms ease;
+}
+
+.trigger-button.active .dropdown-icon {
+  transform: rotate(180deg);
+}

package/src/dropdown-button/dropdown-button.ts

@@ -0,0 +1,206 @@
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './dropdown-button.scss';
+
+/**
+ * @label Dropdown Button
+ * @tag wc-dropdown-button
+ * @rawTag dropdown-button
+ *
+ * @summary A button that opens a dropdown menu when clicked.
+ * @overview
+ * <p>The dropdown button combines a single button with a dropdown menu. Clicking the button toggles a menu of actions or options. It follows M3 Material Design, keeping a compact control while exposing related actions on demand.</p>
+ *
+ * @cssprop --dropdown-button-container-shape: Defines the border radius of the dropdown button container shape.
+ *
+ * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.
+ *
+ * @example
+ * ```html
+ * <wc-dropdown-button>
+ *   Actions
+ *   <wc-menu-item slot="menu">Edit</wc-menu-item>
+ *   <wc-menu-item slot="menu">Delete</wc-menu-item>
+ * </wc-dropdown-button>
+ * ```
+ * @tags controls
+ */
+@IndividualComponent
+export class DropdownButton extends LitElement {
+  static override styles = [styles];
+
+  /**
+   * Button size.
+   * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+   */
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+
+  /**
+   * The visual style of the dropdown button.
+   *
+   * Possible variant values:
+   * `"filled"` is a filled button.
+   * `"outlined"` is an outlined button.
+   * `"text"` is a transparent button.
+   * `"tonal"` is a light color button.
+   * `"elevated"` is an elevated button.
+   */
+  @property({ reflect: true }) variant:
+    | 'elevated'
+    | 'filled'
+    | 'tonal'
+    | 'outlined'
+    | 'text' = 'filled';
+
+  /**
+   * Defines the primary color of the dropdown button.
+   */
+  @property({ reflect: true }) color:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'surface'
+    | 'on-surface' = 'primary';
+
+  /**
+   * Whether the dropdown button is disabled.
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * Menu placement relative to the button.
+   * Possible values are `"bottom-start"`, `"bottom-end"`, `"top-start"`, `"top-end"`. Defaults to `"bottom-start"`.
+   */
+  @property({ reflect: true }) placement:
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'top-start'
+    | 'top-end' = 'bottom-start';
+
+  @state() private _menuOpen = false;
+
+  @query('.trigger-button') private readonly _triggerButton!: HTMLElement & {
+    focus: () => void;
+  };
+
+  @query('wc-menu') private readonly _menu!: HTMLElement & {
+    open: boolean;
+    anchorElement: HTMLElement | null;
+    show: () => void;
+    close: () => void;
+    focus: () => void;
+  };
+
+  private _menuId = `dropdown-menu-${Math.random().toString(36).slice(2, 9)}`;
+
+  override focus() {
+    this._triggerButton?.focus();
+  }
+
+  private _onButtonClick(event: MouseEvent) {
+    event.stopPropagation();
+    if (this.disabled) return;
+
+    if (this._menuOpen) {
+      this._menu?.close();
+    } else {
+      this._menu.anchorElement = this;
+      this._menu?.show();
+    }
+  }
+
+  private _onMenuOpened = () => {
+    this._menuOpen = true;
+    this.dispatchEvent(
+      new CustomEvent('toggle-menu', {
+        detail: { open: true },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private _onMenuClosed = () => {
+    this._menuOpen = false;
+    this.dispatchEvent(
+      new CustomEvent('toggle-menu', {
+        detail: { open: false },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    if (this.disabled) return;
+
+    if (event.key === 'ArrowDown' && !this._menuOpen) {
+      event.preventDefault();
+      this._menu.anchorElement = this;
+      this._menu?.show();
+      requestAnimationFrame(() => this._menu?.focus());
+    }
+
+    if (event.key === 'Escape' && this._menuOpen) {
+      this._menu?.close();
+      this._triggerButton?.focus();
+    }
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', this._onKeyDown);
+  }
+
+  override disconnectedCallback() {
+    this.removeEventListener('keydown', this._onKeyDown);
+    super.disconnectedCallback();
+  }
+
+  override render() {
+    const buttonClasses = {
+      'trigger-button': true,
+      active: this._menuOpen,
+      disabled: this.disabled,
+    };
+
+    return html`
+      <wc-button
+        class=${classMap(buttonClasses)}
+        size=${this.size}
+        variant=${this.variant}
+        color=${this.color}
+        icon-align="end"
+        ?disabled=${this.disabled}
+        .configAria=${{
+          'aria-haspopup': 'menu',
+          'aria-expanded': String(this._menuOpen),
+          'aria-controls': this._menuId,
+        }}
+        @click=${this._onButtonClick}
+      >
+        <slot></slot>
+        <wc-icon
+          slot="icon"
+          name="arrow_drop_down"
+          class="dropdown-icon"
+          aria-hidden="true"
+        ></wc-icon>
+      </wc-button>
+
+      <wc-menu
+        id=${this._menuId}
+        placement=${this.placement}
+        @opened=${this._onMenuOpened}
+        @closed=${this._onMenuClosed}
+      >
+        <slot name="menu"></slot>
+      </wc-menu>
+    `;
+  }
+}

package/src/dropdown-button/index.ts

@@ -0,0 +1 @@
+export { DropdownButton } from './dropdown-button.js';