@redvars/peacock 3.5.1 → 3.6.0

package/src/html-editor/html-editor.ts

@@ -0,0 +1,276 @@
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import IndividualComponent from '@/IndividualComponent.js';
+import BaseInput from '../input/BaseInput.js';
+import { redispatchEvent } from '../__utils/dispatch-event-utils.js';
+
+import styles from './html-editor.scss';
+
+/**
+ * @label HTML Editor
+ * @tag wc-html-editor
+ * @rawTag html-editor
+ *
+ * @summary A WYSIWYG HTML editor component with a Material 3 styled toolbar.
+ * @overview
+ * <p>The HTML Editor provides a rich-text editing experience using the browser's built-in
+ * <code>contenteditable</code> API. It wraps the editable area in a Material 3 styled
+ * <code>wc-field</code> and exposes a toolbar with common formatting actions.</p>
+ *
+ * <p>Get and set the HTML content via the <code>value</code> property. The component
+ * dispatches a <code>change</code> event whenever the content is modified.</p>
+ *
+ * @cssprop --html-editor-min-height - Minimum height of the editable area. Defaults to 8rem.
+ * @cssprop --html-editor-toolbar-background - Background color of the toolbar.
+ * @cssprop --html-editor-toolbar-border-color - Border color between toolbar and editing area.
+ *
+ * @fires {Event} change - Fired whenever the editable content changes.
+ *
+ * @example
+ * ```html
+ * <wc-html-editor label="Description" value="<p>Hello <strong>world</strong></p>"></wc-html-editor>
+ * ```
+ * @tags input editor
+ */
+@IndividualComponent
+export class HtmlEditor extends BaseInput {
+  static styles = [styles];
+
+  /** Current HTML value of the editor. */
+  @property({ type: String })
+  value = '';
+
+  /** Label displayed above the editor. */
+  @property({ type: String })
+  label = '';
+
+  /** Placeholder text shown when the editor is empty. */
+  @property({ type: String })
+  placeholder = 'Enter text\u2026';
+
+  /** Visual style of the wrapping field. */
+  @property({ type: String })
+  variant: 'filled' | 'outlined' | 'default' = 'default';
+
+  /** Helper text displayed below the editor. */
+  @property({ type: String, attribute: 'helper-text' })
+  helperText = '';
+
+  /** Whether to show an error state. */
+  @property({ type: Boolean })
+  error = false;
+
+  /** Error message text. */
+  @property({ type: String, attribute: 'error-text' })
+  errorText = '';
+
+  @state() private _focused = false;
+
+  @query('.html-editor-content')
+  private _editorEl!: HTMLDivElement;
+
+  // ─── Lifecycle ─────────────────────────────────────────────────────────────
+
+  protected firstUpdated() {
+    if (this.value && this._editorEl) {
+      this._editorEl.innerHTML = this.value;
+    }
+  }
+
+  protected updated(changed: Map<string, unknown>) {
+    if (changed.has('value') && this._editorEl) {
+      if (this._editorEl.innerHTML !== this.value) {
+        this._editorEl.innerHTML = this.value ?? '';
+      }
+    }
+    if (changed.has('disabled') || changed.has('readonly')) {
+      if (this._editorEl) {
+        this._editorEl.contentEditable =
+          this.disabled || this.readonly ? 'false' : 'true';
+      }
+    }
+  }
+
+  // ─── Private helpers ───────────────────────────────────────────────────────
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private _execCmd(command: string, value?: string) {
+    if (this.disabled || this.readonly) return;
+    this._editorEl.focus();
+    // execCommand is deprecated but remains broadly supported for rich-text editing
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (document as any).execCommand(command, false, value ?? null);
+  }
+
+  private _handleInput() {
+    this.value = this._editorEl.innerHTML;
+    redispatchEvent(
+      this,
+      new Event('change', { bubbles: true, composed: true }),
+    );
+  }
+
+  private _handleFocus() {
+    this._focused = true;
+  }
+
+  private _handleBlur() {
+    this._focused = false;
+  }
+
+  private _insertLink() {
+    // eslint-disable-next-line no-alert
+    const url = window.prompt('Enter URL:', 'https://');
+    if (url) this._execCmd('createLink', url);
+  }
+
+  // ─── Toolbar button ────────────────────────────────────────────────────────
+
+  private _toolbarButton(
+    icon: string,
+    title: string,
+    command: string,
+    value?: string,
+  ) {
+    return html`
+      <button
+        class="toolbar-btn"
+        title=${title}
+        aria-label=${title}
+        ?disabled=${this.disabled || this.readonly}
+        @mousedown=${(e: Event) => e.preventDefault()}
+        @click=${(e: Event) => {
+          e.preventDefault();
+          this._execCmd(command, value);
+        }}
+      >
+        <wc-icon name=${icon} size="sm"></wc-icon>
+      </button>
+    `;
+  }
+
+  // ─── Toolbar ───────────────────────────────────────────────────────────────
+
+  private _renderToolbar() {
+    return html`
+      <div
+        class="html-editor-toolbar"
+        role="toolbar"
+        aria-label="Formatting toolbar"
+      >
+        ${this._toolbarButton('format_bold', 'Bold', 'bold')}
+        ${this._toolbarButton('format_italic', 'Italic', 'italic')}
+        ${this._toolbarButton('format_underlined', 'Underline', 'underline')}
+        ${this._toolbarButton(
+          'format_strikethrough',
+          'Strikethrough',
+          'strikeThrough',
+        )}
+
+        <span class="toolbar-divider"></span>
+
+        ${this._toolbarButton('format_align_left', 'Align left', 'justifyLeft')}
+        ${this._toolbarButton(
+          'format_align_center',
+          'Align center',
+          'justifyCenter',
+        )}
+        ${this._toolbarButton(
+          'format_align_right',
+          'Align right',
+          'justifyRight',
+        )}
+
+        <span class="toolbar-divider"></span>
+
+        ${this._toolbarButton(
+          'format_list_bulleted',
+          'Unordered list',
+          'insertUnorderedList',
+        )}
+        ${this._toolbarButton(
+          'format_list_numbered',
+          'Ordered list',
+          'insertOrderedList',
+        )}
+
+        <span class="toolbar-divider"></span>
+
+        ${this._toolbarButton(
+          'format_indent_increase',
+          'Indent',
+          'indent',
+        )}
+        ${this._toolbarButton('format_indent_decrease', 'Outdent', 'outdent')}
+
+        <span class="toolbar-divider"></span>
+
+        <button
+          class="toolbar-btn"
+          title="Insert link"
+          aria-label="Insert link"
+          ?disabled=${this.disabled || this.readonly}
+          @mousedown=${(e: Event) => e.preventDefault()}
+          @click=${() => this._insertLink()}
+        >
+          <wc-icon name="link" size="sm"></wc-icon>
+        </button>
+
+        <span class="toolbar-divider"></span>
+
+        ${this._toolbarButton('undo', 'Undo', 'undo')}
+        ${this._toolbarButton('redo', 'Redo', 'redo')}
+      </div>
+    `;
+  }
+
+  // ─── Render ────────────────────────────────────────────────────────────────
+
+  render() {
+    const isEmpty = !this.value || this.value === '<br>';
+
+    return html`
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        ?focused=${this._focused}
+        ?error=${this.error}
+        error-text=${this.errorText}
+        helper-text=${this.helperText}
+        variant=${this.variant}
+        ?populated=${!isEmpty}
+        .host=${this}
+        class=${classMap({
+          'html-editor-field': true,
+          disabled: this.disabled,
+          readonly: this.readonly,
+        })}
+      >
+        ${this._renderToolbar()}
+
+        <div
+          class=${classMap({
+            'html-editor-content': true,
+            'is-empty': isEmpty,
+          })}
+          contenteditable=${this.disabled || this.readonly ? 'false' : 'true'}
+          data-placeholder=${this.placeholder}
+          @input=${this._handleInput}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+        ></div>
+
+        ${this.disabled
+          ? html`<wc-tag class="read-only-tag" color="red">Disabled</wc-tag>`
+          : this.readonly
+          ? html`<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>`
+          : nothing}
+      </wc-field>
+    `;
+  }
+}

package/src/html-editor/index.ts

@@ -0,0 +1,3 @@
+import { HtmlEditor } from './html-editor.js';
+
+export { HtmlEditor };

package/src/index.ts

@@ -7,6 +7,8 @@ export { Elevation } from './elevation/index.js';
 export { Button, ButtonGroup, IconButton } from './button/index.js';
 export { Fab } from './fab/index.js';
 export { SegmentedButton, SegmentedButtonGroup } from './segmented-button/index.js';
+export { SplitButton } from './split-button/index.js';
+export { DropdownButton } from './dropdown-button/index.js';
 
 export { FocusRing } from './focus-ring/index.js';
 export { Ripple } from './ripple/index.js';
@@ -32,11 +34,13 @@ export { Container } from './container/index.js';
 export { NumberCounter } from './number-counter/index.js';
 export { EmptyState } from './empty-state/index.js';
 export { Tooltip } from './popover/index.js';
+export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';
+export { HtmlEditor } from './html-editor/index.js';
 export { Image } from './image/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
@@ -49,8 +53,10 @@ export { SidebarMenu, SidebarMenuItem, SidebarSubMenu } from './sidebar-menu/ind
 export { Card } from './card/index.js';
 export { Banner } from './banner/index.js';
 export { Notification } from './notification/index.js';
+export { NotificationManager } from './notification-manager/index.js';
 export { Snackbar } from './snackbar/index.js';
 export { Radio } from './radio/index.js';
+export { Modal } from './modal/index.js';
 export { BottomSheet } from './bottom-sheet/index.js';
 export { SideSheet } from './side-sheet/index.js';
 export { Select } from './select/index.js';
@@ -59,4 +65,23 @@ export { SelectOptionElement } from './select/index.js';
 export { Search } from './search/index.js';
 export { Toolbar } from './toolbar/index.js';
 export { NavigationRail, NavigationRailItem } from './navigation-rail/index.js';
+export { Calendar, CalendarColumnView, CalendarMonthView } from './calendar/index.js';
+export type { CalendarViewType, EventType } from './calendar/index.js';
+export { Canvas } from './canvas/index.js';
+export type { CanvasShape } from './canvas/index.js';
+export { FlowDesigner, FlowDesignerNode } from './flow-designer/index.js';
+export type {
+  Workflow,
+  WorkflowNode,
+  WorkflowCommand,
+  PositionedNode,
+  ValidationError,
+  HistoryEntry,
+  EditorState,
+  NodeType,
+  WorkflowChangeEvent,
+  SwimlaneConfig,
+  NodeTemplate,
+} from './flow-designer/index.js';
+export { ConditionBuilder, CbPredicate, CbCompoundExpression, CbExpression, CbDivider } from './condition-builder/index.js';
 

package/src/menu/menu/menu.scss

@@ -12,8 +12,8 @@
   padding-block: var(--spacing-050);
   transform-origin: top center;
 
-  --_menu-enter-duration: var(--duration-medium1, 250ms);
-  --_menu-exit-duration: var(--duration-short4, 200ms);
+  --_menu-enter-duration: var(--duration-medium1);
+  --_menu-exit-duration: var(--duration-medium2);
   --_menu-enter-easing: cubic-bezier(0.05, 0.7, 0.1, 1);
   --_menu-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
 

package/src/menu/menu/menu.ts

@@ -3,8 +3,8 @@ import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import type { Placement } from '@floating-ui/dom';
 import styles from './menu.scss';
+import { FloatingController } from '../../__controllers/floating-controller.js';
 import { MenuItem } from '../menu-item/menu-item.js';
-import { MenuSurfaceController } from './MenuSurfaceController.js';
 
 type CloseReason =
   | { kind: 'click-selection' }
@@ -60,7 +60,18 @@ export class Menu extends LitElement {
 
   anchorElement: HTMLElement | null = null;
 
-  private readonly _surfaceController = new MenuSurfaceController(this);
+  private readonly _floatingController = new FloatingController(this, {
+    trigger: 'manual',
+    closeOnClickOutside: false,
+    strategy: 'fixed',
+    onOpenChange: (isOpen) => {
+      if (isOpen || !this.open) {
+        return;
+      }
+
+      this.close({ kind: 'outside-click' });
+    },
+  });
 
   private _lastFocusedElement: HTMLElement | null = null;
 
@@ -72,22 +83,14 @@ export class Menu extends LitElement {
     this.setAttribute('role', 'menu');
 
     this.addEventListener('keydown', this._onKeyDown);
-    this.addEventListener('focusout', this._onFocusOut);
-    this.addEventListener('menu-item-activate', this._onItemActivate);
-    this.addEventListener('menu-item-request-close', this._onItemRequestClose);
-    window.addEventListener('click', this._onWindowClick, { capture: true });
+    this.addEventListener('click', this._onClick);
     this._syncAnchorAria();
   }
 
   disconnectedCallback() {
     this.removeEventListener('keydown', this._onKeyDown);
-    this.removeEventListener('focusout', this._onFocusOut);
-    this.removeEventListener('menu-item-activate', this._onItemActivate);
-    this.removeEventListener(
-      'menu-item-request-close',
-      this._onItemRequestClose,
-    );
-    window.removeEventListener('click', this._onWindowClick, { capture: true });
+    this.removeEventListener('click', this._onClick);
+    this._floatingController.close();
     super.disconnectedCallback();
   }
 
@@ -170,7 +173,12 @@ export class Menu extends LitElement {
   }
 
   private _syncRovingTabIndex() {
+    const ownedItems = this.items;
     const enabledItems = this._enabledItems();
+    for (const item of ownedItems) {
+      item.tabIndex = -1;
+    }
+
     if (!enabledItems.length) {
       this.activeIndex = -1;
       return;
@@ -180,10 +188,7 @@ export class Menu extends LitElement {
       this.activeIndex = 0;
     }
 
-    for (let index = 0; index < enabledItems.length; index += 1) {
-      const currentItem = enabledItems[index];
-      currentItem.tabIndex = index === this.activeIndex ? 0 : -1;
-    }
+    enabledItems[this.activeIndex].tabIndex = 0;
   }
 
   private _setActiveByOffset(offset: 1 | -1) {
@@ -227,50 +232,66 @@ export class Menu extends LitElement {
     return this._enabledItems()[0] ?? null;
   }
 
-  private _ownsKeyboardEvent(event: KeyboardEvent) {
+  private _isEventFromThisMenu(event: Event) {
     const path = event.composedPath();
-    const ownedItems = this.items;
+    const sourceMenu = path.find(
+      target =>
+        target instanceof HTMLElement &&
+        target.tagName.toLowerCase() === 'wc-menu',
+    );
 
-    return path.some(target => target instanceof MenuItem && ownedItems.includes(target));
+    return sourceMenu === this;
   }
 
-  private _onItemActivate = (event: Event) => {
-    const customEvent = event as CustomEvent<{ item: MenuItem }>;
-    const { item } = customEvent.detail;
+  private _ownedItemFromEvent(event: Event) {
+    if (!this._isEventFromThisMenu(event)) {
+      return null;
+    }
+
+    const path = event.composedPath();
     const ownedItems = this.items;
-    if (!ownedItems.includes(item)) {
-      return;
+
+    for (const target of path) {
+      if (target instanceof HTMLElement) {
+        if (target.tagName.toLowerCase() === 'wc-menu-item') {
+          const ownedItem = ownedItems.find(item => item === target);
+          if (ownedItem) {
+            return ownedItem;
+          }
+        }
+      }
     }
 
+    return null;
+  }
+
+  private _setActiveItem(item: MenuItem) {
     const enabledItems = this._enabledItems();
     const nextIndex = enabledItems.indexOf(item);
-    if (nextIndex >= 0) {
-      this.activeIndex = nextIndex;
-      this._syncRovingTabIndex();
+    if (nextIndex < 0) {
+      return;
     }
-  };
 
-  private _onItemRequestClose = (event: Event) => {
-    const customEvent = event as CustomEvent<{
-      item: MenuItem;
-      reason: 'click-selection' | 'keydown';
-      key?: string;
-    }>;
+    this.activeIndex = nextIndex;
+    this._syncRovingTabIndex();
+  }
 
-    if (!this.items.includes(customEvent.detail.item)) {
+  private _onClick = (event: Event) => {
+    if (!this.open) {
       return;
     }
 
-    if (customEvent.defaultPrevented) {
+    const item = this._ownedItemFromEvent(event);
+    if (!item) {
       return;
     }
 
-    if (customEvent.detail.reason === 'click-selection') {
-      this.close({ kind: 'click-selection' });
+    this._setActiveItem(item);
+    if (item.keepOpen) {
       return;
     }
 
-    this.close({ kind: 'keydown', key: customEvent.detail.key ?? 'Enter' });
+    this.close({ kind: 'click-selection' });
   };
 
   private _onKeyDown = (event: KeyboardEvent) => {
@@ -278,10 +299,15 @@ export class Menu extends LitElement {
       return;
     }
 
-    if (!this._ownsKeyboardEvent(event)) {
+    if (!this._isEventFromThisMenu(event)) {
       return;
     }
 
+    const eventItem = this._ownedItemFromEvent(event);
+    if (eventItem) {
+      this._setActiveItem(eventItem);
+    }
+
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
@@ -305,67 +331,27 @@ export class Menu extends LitElement {
         event.preventDefault();
         this.close({ kind: 'keydown', key: 'Escape' });
         break;
-      default:
+      case 'Tab':
+        this.close({ kind: 'keydown', key: 'Tab' });
         break;
-    }
-  };
-
-  private _onWindowClick = (event: MouseEvent) => {
-    if (!this.open || this.stayOpenOnOutsideClick) {
-      return;
-    }
-
-    const path = event.composedPath();
-    const anchorEl = this._resolveAnchorElement();
-    const inMenuTree = path.some(
-      target => target === this || (target instanceof Node && this.contains(target)),
-    );
-
-    if (inMenuTree || (anchorEl && path.includes(anchorEl))) {
-      return;
-    }
-
-    this.close({ kind: 'outside-click' });
-  };
-
-  private _isWithinMenuTree(node: Node | null) {
-    if (!node) {
-      return false;
-    }
-
-    let current: Node | null = node;
-    while (current) {
-      if (current === this || this.contains(current)) {
-        return true;
-      }
+      case 'Enter':
+      case ' ': {
+        event.preventDefault();
+        const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();
+        if (!activeItem) {
+          return;
+        }
 
-      const root = current.getRootNode();
-      if (root instanceof ShadowRoot) {
-        current = root.host;
-      } else {
-        current = null;
+        this._setActiveItem(activeItem);
+        activeItem.click();
+        break;
       }
+      default:
+        break;
     }
+  };
 
-    return false;
-  }
-
-  private _onFocusOut = (event: FocusEvent) => {
-    if (!this.open || this.stayOpenOnFocusout) {
-      return;
-    }
-
-    const next = event.relatedTarget;
-    if (!next) {
-      return;
-    }
-
-    if (next instanceof Node && this._isWithinMenuTree(next)) {
-      return;
-    }
 
-    this.close({ kind: 'focusout' });
-  };
 
   private _onSlotChange = () => {
     this._syncRovingTabIndex();
@@ -381,13 +367,14 @@ export class Menu extends LitElement {
       return;
     }
 
-    this._surfaceController.start({
-      reference: anchorEl,
-      floating: this.menuListElement,
+    this._floatingController.setOptions({
       placement: this.placement,
       offset: this.offset,
       strategy: 'fixed',
+      closeOnClickOutside: !this.stayOpenOnOutsideClick,
     });
+    this._floatingController.setElements(anchorEl, this.menuListElement);
+    this._floatingController.open();
   }
 
   protected override updated(changedProperties: Map<string, unknown>) {
@@ -408,7 +395,7 @@ export class Menu extends LitElement {
 
         this._applyPositioning();
       } else {
-        this._surfaceController.stop();
+        this._floatingController.close();
 
         const reason = this._closeReason;
         this.dispatchEvent(
@@ -429,7 +416,10 @@ export class Menu extends LitElement {
           }),
         );
 
-        if (!this.isSubmenu) {
+        const shouldRestoreFocus =
+          reason.kind !== 'keydown' || reason.key !== 'Tab';
+
+        if (!this.isSubmenu && shouldRestoreFocus) {
           this._lastFocusedElement?.focus();
         }
       }

package/src/menu/menu-item/menu-item.scss

@@ -92,6 +92,10 @@
     --_container-state-opacity: 0.08;
   }
 
+   &.pressed:not(:where(.disabled)) {
+    --_container-state-opacity: 0.12;
+  }
+
   &.selected {
     --_container-color: var(--menu-item-container-selected-color);
     --_label-text-color: var(--menu-item-label-selected-color);