@redvars/peacock 3.5.1 → 3.6.1

package/src/notification-manager/notification-manager.ts

@@ -0,0 +1,199 @@
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './notification-manager.scss';
+
+type NotificationVariant = 'success' | 'error' | 'info' | 'warning';
+
+type NotificationEntry = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  action?: string;
+  variant: NotificationVariant;
+  dismissible: boolean;
+  timeout: number;
+  hide: boolean;
+  width?: string;
+};
+
+let notificationCounter = 0;
+function nextId(): string {
+  return `wc-notification-${++notificationCounter}`;
+}
+
+/**
+ * @label Notification Manager
+ * @tag wc-notification-manager
+ * @rawTag notification-manager
+ * @summary The Notification Manager handles the organization and display of notifications within the application.
+ *
+ * @fires {CustomEvent} notification-manager-action - Fired when the action button of a managed notification is clicked. Detail: `{ id: string }`.
+ * @fires {CustomEvent} notification-manager-dismiss - Fired when a managed notification is dismissed. Detail: `{ id: string }`.
+ *
+ * @example
+ * ```html
+ * <wc-notification-manager position="bottom-right"></wc-notification-manager>
+ * <script>
+ *   window.dispatchEvent(new CustomEvent('notification', {
+ *     detail: { title: 'Record saved', variant: 'success', dismissible: true }
+ *   }));
+ * </script>
+ * ```
+ * @tags display, feedback
+ */
+@IndividualComponent
+export class NotificationManager extends LitElement {
+  static styles = [styles];
+
+  /**
+   * Name of this manager instance. Only notifications whose `target` matches
+   * this name (or whose `target` is absent and this manager's `name` is
+   * `'global'`) will be handled.
+   */
+  @property({ type: String, reflect: true }) name = 'global';
+
+  /**
+   * Screen position where notifications are stacked.
+   */
+  @property({ type: String, reflect: true })
+  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' =
+    'bottom-right';
+
+  @state() private notifications: NotificationEntry[] = [];
+
+  private readonly handleWindowNotification = (event: Event) => {
+    const evt = event as CustomEvent;
+    const detail = evt.detail ?? {};
+
+    // Route by target: accept if target matches our name, or if we are global
+    // and no specific target is set.
+    const target: string | undefined = detail.target;
+    const isForUs =
+      target === this.name || (!target && this.name === 'global');
+
+    if (!isForUs || detail.processed) {
+      return;
+    }
+
+    evt.stopPropagation();
+    detail.processed = true;
+
+    const entry: NotificationEntry = {
+      id: nextId(),
+      title: detail.title ?? '',
+      subtitle: detail.subtitle,
+      action: detail.action,
+      variant: detail.variant ?? 'info',
+      dismissible: detail.dismissible ?? false,
+      timeout: detail.timeout ?? 5000,
+      hide: false,
+      width: detail.width,
+    };
+
+    this.notifications = [...this.notifications, entry];
+
+    if (typeof detail.callback === 'function') {
+      detail.callback(entry.id);
+    }
+
+    if (!entry.dismissible) {
+      setTimeout(() => {
+        this._hideNotification(entry.id);
+      }, entry.timeout);
+    }
+  };
+
+  private readonly handleWindowDismiss = (event: Event) => {
+    const evt = event as CustomEvent;
+    const ids: string[] = evt.detail?.notifications ?? [];
+    ids.forEach(id => this._hideNotification(id));
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('notification', this.handleWindowNotification);
+    window.addEventListener(
+      'notification-dismiss',
+      this.handleWindowDismiss,
+    );
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener(
+      'notification',
+      this.handleWindowNotification,
+    );
+    window.removeEventListener(
+      'notification-dismiss',
+      this.handleWindowDismiss,
+    );
+    super.disconnectedCallback();
+  }
+
+  private _hideNotification(id: string) {
+    this.notifications = this.notifications.map(n =>
+      n.id === id ? { ...n, hide: true } : n,
+    );
+  }
+
+  private _handleDismiss(id: string) {
+    this._hideNotification(id);
+    this.dispatchEvent(
+      new CustomEvent('notification-manager-dismiss', {
+        detail: { id },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleAction(id: string) {
+    this.dispatchEvent(
+      new CustomEvent('notification-manager-action', {
+        detail: { id },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private renderNotification(n: NotificationEntry) {
+    return html`
+      <div
+        id=${n.id}
+        class=${classMap({ notification: true, hidden: n.hide })}
+        style=${n.width ? `width: ${n.width}` : nothing}
+      >
+        <wc-notification
+          variant=${n.variant}
+          ?dismissible=${n.dismissible}
+          managed
+          action=${n.action ?? nothing}
+          @notification-dismiss=${() => this._handleDismiss(n.id)}
+          @notification-action-click=${() => this._handleAction(n.id)}
+        >
+          <span slot="title">${n.title}</span>
+          ${n.subtitle
+            ? html`<span slot="subtitle">${n.subtitle}</span>`
+            : nothing}
+        </wc-notification>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div
+        class=${classMap({
+          'notification-manager': true,
+          [`position-${this.position}`]: true,
+        })}
+      >
+        ${this.notifications.map(n => this.renderNotification(n))}
+      </div>
+    `;
+  }
+}

package/src/number-field/number-field.ts

@@ -10,8 +10,8 @@ import styles from './number-field.scss';
 
 /**
  * @label Number Field
- * @tag number-field
- * @rawTag number
+ * @tag wc-number-field
+ * @rawTag number-field
  *
  * @summary The Number Field component is used to capture numeric user input.
  *

package/src/peacock-loader.ts

@@ -14,6 +14,8 @@ import { IconButton } from './button/icon-button/icon-button.js';
 import { Fab } from './fab/fab.js';
 import { SegmentedButton } from './segmented-button/segmented-button.js';
 import { SegmentedButtonGroup } from './segmented-button/segmented-button-group.js';
+import { SplitButton } from './split-button/split-button.js';
+import { DropdownButton } from './dropdown-button/dropdown-button.js';
 import { Input } from './input/input.js';
 import { UrlField } from './url-field/url-field.js';
 import { Field } from './field/field.js';
@@ -28,6 +30,8 @@ import { Radio } from './radio/radio.js';
 import { Menu } from './menu/menu/menu.js';
 import { MenuItem } from './menu/menu-item/menu-item.js';
 import { SubMenu } from './menu/sub-menu/sub-menu.js';
+import { List } from './list/list.js';
+import { ListItem } from './list/list-item.js';
 
 import { Accordion } from './accordion/accordion.js';
 import { Link } from './link/link.js';
@@ -37,6 +41,8 @@ import { LinearProgress } from './progress/linear-progress/linear-progress.js';
 import { CircularProgress } from './progress/circular-progress/circular-progress.js';
 
 import { Tooltip } from './tooltip/tooltip.js';
+import { Popover } from './popover/popover.js';
+import { PopoverContent } from './popover/popover-content.js';
 import { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 
 import { Skeleton } from './skeleton/skeleton.js';
@@ -45,6 +51,7 @@ import { Spinner } from './spinner/spinner.js';
 import { EmptyState } from './empty-state/empty-state.js';
 import { Container } from './container/container.js';
 import { Image } from './image/image.js';
+import { Svg } from './svg/svg.js';
 
 import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
 import { loadCSS } from './CssLoader.js';
@@ -62,15 +69,28 @@ import { Card } from './card/card.js';
 import { CardContent } from './card/card-content.js';
 import { Banner } from './banner/banner.js';
 import { Notification } from './notification/notification.js';
+import { NotificationManager } from './notification-manager/notification-manager.js';
 import { Snackbar } from './snackbar/snackbar.js';
 import { BottomSheet } from './bottom-sheet/bottom-sheet.js';
 import { SideSheet } from './side-sheet/side-sheet.js';
+import { Modal } from './modal/modal.js';
 import { Select } from './select/select.js';
 import { SelectOptionElement } from './select/option.js';
 import { Search } from './search/search.js';
 import { Toolbar } from './toolbar/toolbar.js';
 import { NavigationRail } from './navigation-rail/navigation-rail.js';
 import { NavigationRailItem } from './navigation-rail/navigation-rail-item.js';
+import { Calendar } from './calendar/calendar.js';
+import { CalendarColumnView } from './calendar/calendar-column-view.js';
+import { CalendarMonthView } from './calendar/calendar-month-view.js';
+import { Canvas } from './canvas/canvas.js';
+import { FlowDesigner } from './flow-designer/flow-designer.js';
+import { FlowDesignerNode } from './flow-designer/flow-designer-node.js';
+import { ConditionBuilder } from './condition-builder/condition-builder.js';
+import { CbPredicate } from './condition-builder/cb-predicate.js';
+import { CbCompoundExpression } from './condition-builder/cb-compound-expression.js';
+import { CbExpression } from './condition-builder/cb-expression.js';
+import { CbDivider } from './condition-builder/cb-divider.js';
 
 const distDirectory = `${import.meta.url}/..`;
 await loadCSS(`${distDirectory}/assets/styles.css`);
@@ -128,6 +148,12 @@ const loaderConfig: LoaderConfig = {
     'wc-segmented-button-group': {
       CustomElementClass: SegmentedButtonGroup,
     },
+    'wc-split-button': {
+      CustomElementClass: SplitButton,
+    },
+    'wc-dropdown-button': {
+      CustomElementClass: DropdownButton,
+    },
     'wc-divider': {
       CustomElementClass: Divider,
     },
@@ -176,6 +202,9 @@ const loaderConfig: LoaderConfig = {
     'wc-notification': {
       CustomElementClass: Notification,
     },
+    'wc-notification-manager': {
+      CustomElementClass: NotificationManager,
+    },
     'wc-tag': {
       CustomElementClass: Tag,
     },
@@ -213,12 +242,21 @@ const loaderConfig: LoaderConfig = {
     'wc-tooltip': {
       CustomElementClass: Tooltip,
     },
+    'wc-popover': {
+      CustomElementClass: Popover,
+    },
+    'wc-popover-content': {
+      CustomElementClass: PopoverContent,
+    },
     'wc-number-counter': {
       importPath: `${distDirectory}/number-counter.js`,
     },
     'wc-code-editor': {
       importPath: `${distDirectory}/code-editor.js`,
     },
+    'wc-html-editor': {
+      importPath: `${distDirectory}/html-editor.js`,
+    },
     'wc-code-highlighter': {
       importPath: `${distDirectory}/code-highlighter.js`,
     },
@@ -252,12 +290,21 @@ const loaderConfig: LoaderConfig = {
     'wc-sub-menu': {
       CustomElementClass: SubMenu,
     },
+    'wc-list': {
+      CustomElementClass: List,
+    },
+    'wc-list-item': {
+      CustomElementClass: ListItem,
+    },
     'wc-container': {
       CustomElementClass: Container,
     },
     'wc-image': {
       CustomElementClass: Image,
     },
+    'wc-svg': {
+      CustomElementClass: Svg,
+    },
     'wc-slider': {
       CustomElementClass: Slider,
     },
@@ -285,6 +332,9 @@ const loaderConfig: LoaderConfig = {
     'wc-side-sheet': {
       CustomElementClass: SideSheet,
     },
+    'wc-modal': {
+      CustomElementClass: Modal,
+    },
     'wc-select': {
       CustomElementClass: Select,
     },
@@ -303,6 +353,24 @@ const loaderConfig: LoaderConfig = {
     'wc-navigation-rail-item': {
       CustomElementClass: NavigationRailItem,
     },
+    'wc-calendar': {
+      CustomElementClass: Calendar,
+    },
+    'wc-calendar-column-view': {
+      CustomElementClass: CalendarColumnView,
+    },
+    'wc-calendar-month-view': {
+      CustomElementClass: CalendarMonthView,
+    },
+    'wc-canvas': {
+      CustomElementClass: Canvas,
+    },
+    'wc-flow-designer': {
+      CustomElementClass: FlowDesigner,
+    },
+    'wc-flow-designer-node': {
+      CustomElementClass: FlowDesignerNode,
+    },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,
     },
@@ -315,6 +383,21 @@ const loaderConfig: LoaderConfig = {
     'wc-chart-stacked-bar': {
       importPath: `${distDirectory}/chart-stacked-bar.js`,
     },
+    'wc-condition-builder': {
+      CustomElementClass: ConditionBuilder,
+    },
+    'wc-cb-predicate': {
+      CustomElementClass: CbPredicate,
+    },
+    'wc-cb-compound-expression': {
+      CustomElementClass: CbCompoundExpression,
+    },
+    'wc-cb-expression': {
+      CustomElementClass: CbExpression,
+    },
+    'wc-cb-divider': {
+      CustomElementClass: CbDivider,
+    },
   },
 };
 

package/src/popover/index.ts

@@ -1 +1,3 @@
 export { Tooltip } from '../tooltip/tooltip.js';
+export { Popover } from './popover.js';
+export { PopoverContent } from './popover-content.js';

package/src/popover/popover-content.scss

@@ -0,0 +1,69 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-popover, 1000);
+  pointer-events: none;
+
+  /**
+   * @prop --popover-content-background: Background color of the popover content
+   */
+  --popover-content-background: var(--color-surface-container);
+
+  /**
+   * @prop --popover-content-padding: Padding of the popover content
+   */
+  --popover-content-padding: var(--spacing-200);
+
+  /**
+   * @prop --popover-content-border-radius: Border radius of the popover content
+   */
+  --popover-content-border-radius: var(--shape-corner-small);
+
+  /**
+   * @prop --popover-content-min-width: Minimum width of the popover content
+   */
+  --popover-content-min-width: 10rem;
+}
+
+:host([open]) {
+  pointer-events: auto;
+}
+
+.popover-content {
+  position: relative;
+  background: var(--popover-content-background);
+  padding: var(--popover-content-padding);
+  border-radius: var(--popover-content-border-radius);
+  min-width: var(--popover-content-min-width);
+  color: var(--color-on-surface);
+
+  transform: scale(0.9);
+  opacity: 0;
+  transition:
+    transform var(--duration-short2, 0.1s) var(--easing-standard, ease-in-out),
+    opacity var(--duration-short2, 0.1s) var(--easing-standard, ease-in-out);
+
+  &.open {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.elevation {
+  --elevation-level: 2;
+  --elevation-container-shape: var(--popover-content-border-radius, var(--shape-corner-small));
+}
+
+.arrow {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--popover-content-background);
+  position: absolute;
+  z-index: -1;
+  display: none;
+}

package/src/popover/popover-content.ts

@@ -0,0 +1,51 @@
+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 './popover-content.scss';
+
+/**
+ * @label Popover Content
+ * @tag wc-popover-content
+ * @rawTag popover-content
+ * @summary Content container for the wc-popover component.
+ * @childComponent true
+ * @tags display
+ *
+ * @cssprop --popover-content-background - Background color of the popover content. Defaults to `var(--color-surface-container)`.
+ * @cssprop --popover-content-padding - Padding of the popover content. Defaults to `var(--spacing-200)`.
+ * @cssprop --popover-content-border-radius - Border radius of the popover content. Defaults to `var(--shape-corner-small)`.
+ * @cssprop --popover-content-min-width - Minimum width of the popover content. Defaults to `10rem`.
+ *
+ * @example
+ * ```html
+ * <wc-popover-content>
+ *   <p>Popover body text</p>
+ * </wc-popover-content>
+ * ```
+ */
+@IndividualComponent
+export class PopoverContent extends LitElement {
+  static styles = [styles];
+
+  /**
+   * Whether the popover content is visible.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  render() {
+    return html`
+      <div
+        class=${classMap({
+          'popover-content': true,
+          open: this.open,
+        })}
+        part="container"
+      >
+        <slot></slot>
+        <wc-elevation class="elevation"></wc-elevation>
+        <div class="arrow" part="arrow"></div>
+      </div>
+    `;
+  }
+}

package/src/popover/popover.scss

@@ -0,0 +1,7 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-block;
+}

package/src/popover/popover.ts

@@ -0,0 +1,170 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { Placement } from '@floating-ui/dom';
+import IndividualComponent from '@/IndividualComponent.js';
+import { FloatingController } from '../__controllers/floating-controller.js';
+import styles from './popover.scss';
+import type { PopoverContent } from './popover-content.js';
+
+/**
+ * @label Popover
+ * @tag wc-popover
+ * @rawTag popover
+ * @summary Displays additional information in a floating panel anchored to a trigger element.
+ * @overview
+ * <p>The Popover component wraps a trigger element and a <code>wc-popover-content</code> child. It uses
+ * floating-ui to compute position, keeping the panel visible inside the viewport even on scroll.</p>
+ * @tags display
+ *
+ * @fires {CustomEvent} wc-popover--open - Fired when the popover opens.
+ * @fires {CustomEvent} wc-popover--close - Fired when the popover closes.
+ *
+ * @example
+ * ```html
+ * <wc-popover trigger="click">
+ *   <wc-button>Open popover</wc-button>
+ *   <wc-popover-content>
+ *     <p>Popover body text goes here.</p>
+ *   </wc-popover-content>
+ * </wc-popover>
+ * ```
+ */
+@IndividualComponent
+export class Popover extends LitElement {
+  static styles = [styles];
+
+  /**
+   * Determines how the popover is triggered.
+   * Possible values are `"click"`, `"hover"`, `"manual"`.
+   */
+  @property({ reflect: true }) trigger: 'click' | 'hover' | 'manual' = 'click';
+
+  /**
+   * Preferred placement of the popover relative to the trigger element.
+   * Accepts any floating-ui `Placement` string such as `"bottom"`, `"top-start"`, `"right"`, etc.
+   */
+  @property({ reflect: true }) placement: Placement = 'bottom';
+
+  /**
+   * Whether the popover is open.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * Distance in pixels between the trigger element and the popover panel.
+   */
+  @property({ type: Number }) offset = 8;
+
+  private _floating: FloatingController | null = null;
+
+  private _contentEl: PopoverContent | null = null;
+
+  private _triggerEl: HTMLElement | null = null;
+
+  private _setupFloating() {
+    // Tear down any existing controller
+    if (this._floating) {
+      this._floating = null;
+    }
+
+    // Resolve the content element
+    this._contentEl = this.querySelector<PopoverContent>('wc-popover-content');
+
+    // Resolve the trigger element: first light-DOM child that is NOT wc-popover-content
+    this._triggerEl =
+      (Array.from(this.children).find(
+        (c) => c.tagName.toLowerCase() !== 'wc-popover-content',
+      ) as HTMLElement) ?? null;
+
+    if (!this._triggerEl || !this._contentEl) return;
+
+    const triggerMode =
+      this.trigger === 'manual'
+        ? 'manual'
+        : (this.trigger as 'click' | 'hover');
+
+    this._floating = new FloatingController(this, {
+      placement: this.placement,
+      strategy: 'fixed',
+      offset: this.offset,
+      trigger: triggerMode,
+      closeOnClickOutside: true,
+      onOpenChange: (isOpen) => {
+        this.open = isOpen;
+        if (this._contentEl) {
+          this._contentEl.open = isOpen;
+        }
+        this.dispatchEvent(
+          new CustomEvent(isOpen ? 'wc-popover--open' : 'wc-popover--close', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
+      },
+    });
+
+    this._floating.setElements(
+      this._triggerEl,
+      this._contentEl as unknown as HTMLElement,
+    );
+
+    if (this.open) {
+      this._floating.open();
+      this._contentEl.open = true;
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  firstUpdated() {
+    this._setupFloating();
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    if (
+      changedProps.has('trigger') ||
+      changedProps.has('placement') ||
+      changedProps.has('offset')
+    ) {
+      this._setupFloating();
+    }
+
+    if (changedProps.has('open') && this._floating) {
+      if (this.open && !this._floating.isOpen) {
+        this._floating.open();
+        if (this._contentEl) this._contentEl.open = true;
+      } else if (!this.open && this._floating.isOpen) {
+        this._floating.close();
+        if (this._contentEl) this._contentEl.open = false;
+      }
+    }
+  }
+
+  /**
+   * Programmatically opens the popover.
+   */
+  show() {
+    if (this._floating && !this._floating.isOpen) {
+      this._floating.open();
+    } else if (!this._floating) {
+      this.open = true;
+    }
+  }
+
+  /**
+   * Programmatically closes the popover.
+   */
+  hide() {
+    if (this._floating && this._floating.isOpen) {
+      this._floating.close();
+    } else if (!this._floating) {
+      this.open = false;
+    }
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/split-button/index.ts

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