@redvars/peacock 3.5.0 → 3.6.0

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

@@ -0,0 +1,93 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+  --cb-divider-line-color: var(--color-outline-variant);
+}
+
+.divider {
+  display: flex;
+}
+
+.divider:not(.vertical) {
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: var(--spacing-200);
+
+  .line {
+    height: 100%;
+  }
+
+  &.connect-start .line-start {
+    width: 1rem;
+    margin-left: 1rem;
+    border-inline-start: 1px solid var(--cb-divider-line-color);
+    border-top: 1px solid var(--cb-divider-line-color);
+    border-radius: var(--shape-corner-extra-small) 0 0 0;
+  }
+
+  &:not(.connect-start) .line-start {
+    border-inline-start: 1px solid var(--cb-divider-line-color);
+  }
+
+  &.connect-end .line-end {
+    width: 1rem;
+    margin-left: 1rem;
+    border-inline-start: 1px solid var(--cb-divider-line-color);
+    border-bottom: 1px solid var(--cb-divider-line-color);
+    border-radius: 0 0 0 var(--shape-corner-extra-small);
+  }
+
+  &:not(.connect-end) .line-end {
+    border-inline-start: 1px solid var(--cb-divider-line-color);
+  }
+
+  .content {
+    padding: var(--spacing-050) 0;
+  }
+}
+
+.divider.vertical {
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  .line {
+    width: 100%;
+  }
+
+  &.connect-start .line-start {
+    height: 1rem;
+    margin-top: 1rem;
+    border-top: 1px solid var(--cb-divider-line-color);
+    border-left: 1px solid var(--cb-divider-line-color);
+    border-radius: var(--shape-corner-extra-small) 0 0 0;
+  }
+
+  &:not(.connect-start) .line-start {
+    border-top: 1px solid var(--cb-divider-line-color);
+  }
+
+  &.connect-end .line-end {
+    height: 1rem;
+    margin-top: 1rem;
+    border-top: 1px solid var(--cb-divider-line-color);
+    border-right: 1px solid var(--cb-divider-line-color);
+    border-radius: 0 var(--shape-corner-extra-small) 0 0;
+  }
+
+  &:not(.connect-end) .line-end {
+    border-top: 1px solid var(--cb-divider-line-color);
+  }
+
+  .content {
+    padding: 0 var(--spacing-050);
+  }
+}

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

@@ -0,0 +1,56 @@
+import { html, LitElement } 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-divider.scss';
+
+/**
+ * @label CB Divider
+ * @tag wc-cb-divider
+ * @rawTag cb-divider
+ * @summary A divider line used within a condition builder to visually connect expressions with operator tags.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-divider>
+ *   <wc-tag color="green">and</wc-tag>
+ * </wc-cb-divider>
+ * ```
+ */
+@IndividualComponent
+export class CbDivider extends LitElement {
+  static styles = [styles];
+
+  /** Whether to render the divider vertically instead of horizontally. */
+  @property({ type: Boolean, reflect: true })
+  vertical = false;
+
+  /** Whether to render a connecting line at the start. */
+  @property({ type: Boolean, reflect: true, attribute: 'connect-start' })
+  connectStart = false;
+
+  /** Whether to render a connecting line at the end. */
+  @property({ type: Boolean, reflect: true, attribute: 'connect-end' })
+  connectEnd = false;
+
+  render() {
+    const classes = {
+      divider: true,
+      'connect-start': this.connectStart,
+      'connect-end': this.connectEnd,
+      vertical: this.vertical,
+    };
+
+    return html`
+      <div class=${classMap(classes)}>
+        <div class="line line-start"></div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="line line-end"></div>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,14 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.expression {
+  display: flex;
+  gap: var(--spacing-100);
+  align-items: center;
+  padding-bottom: var(--spacing-200);
+}

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/date-picker/date-picker.ts

@@ -168,7 +168,6 @@ export class DatePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -177,6 +176,7 @@ export class DatePicker extends BaseInput {
             });
           }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;

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);
+}