@redvars/peacock 3.5.0 → 3.6.0

package/src/html-editor/html-editor.scss

@@ -0,0 +1,146 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+// ── Field wrapper overrides ─────────────────────────────────────────────────
+
+.html-editor-field {
+  // Let the field expand to fit content vertically
+  --field-height: auto;
+  --field-padding-block: 0;
+
+  width: 100%;
+}
+
+// ── Toolbar ─────────────────────────────────────────────────────────────────
+
+.html-editor-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-025, 0.125rem);
+  padding: var(--spacing-050, 0.25rem) var(--spacing-100, 0.5rem);
+  background: var(
+    --html-editor-toolbar-background,
+    var(--color-surface-container, #f3edf7)
+  );
+  border-block-end: 1px solid
+    var(
+      --html-editor-toolbar-border-color,
+      var(--color-outline-variant, #cac4d0)
+    );
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+.toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--shape-corner-extra-small, 0.25rem);
+  background: transparent;
+  color: var(--color-on-surface-variant, #49454f);
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+
+  &:hover:not(:disabled) {
+    background: color-mix(
+      in srgb,
+      var(--color-on-surface-variant, #49454f) 8%,
+      transparent
+    );
+  }
+
+  &:active:not(:disabled) {
+    background: color-mix(
+      in srgb,
+      var(--color-primary, #6750a4) 12%,
+      transparent
+    );
+    color: var(--color-primary, #6750a4);
+  }
+
+  &:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  wc-icon {
+    pointer-events: none;
+  }
+}
+
+.toolbar-divider {
+  display: inline-block;
+  width: 1px;
+  height: 1.5rem;
+  background: var(--color-outline-variant, #cac4d0);
+  margin-inline: var(--spacing-025, 0.125rem);
+  flex-shrink: 0;
+}
+
+// ── Editable content area ───────────────────────────────────────────────────
+
+.html-editor-content {
+  min-height: var(--html-editor-min-height, 8rem);
+  padding: var(--spacing-200, 1rem) var(--spacing-150, 0.75rem);
+  outline: none;
+  color: var(--color-on-surface, #1c1b1f);
+  font-family: var(--typography-body-medium-font-family, inherit);
+  font-size: var(--typography-body-medium-font-size, 0.875rem);
+  line-height: var(--typography-body-medium-line-height, 1.5);
+  cursor: text;
+  word-break: break-word;
+  overflow-wrap: break-word;
+
+  // Placeholder
+  &.is-empty::before {
+    content: attr(data-placeholder);
+    color: var(--color-on-surface-variant, #49454f);
+    opacity: 0.6;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  // Sensible defaults for user-generated rich content
+  ul,
+  ol {
+    padding-inline-start: 1.5rem;
+    margin-block: 0.25rem;
+  }
+
+  a {
+    color: var(--color-primary, #6750a4);
+    text-decoration: underline;
+  }
+
+  strong,
+  b {
+    font-weight: 600;
+  }
+}
+
+// ── Read-only tag ───────────────────────────────────────────────────────────
+
+.read-only-tag {
+  margin: var(--spacing-050, 0.25rem);
+}
+
+// ── Disabled / readonly host states ────────────────────────────────────────
+
+:host([disabled]) .html-editor-content,
+:host([readonly]) .html-editor-content {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

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';
@@ -18,6 +20,7 @@ export { LinearProgress } from './progress/linear-progress/index.js';
 export { CircularProgress } from './progress/circular-progress/index.js';
 export { Skeleton } from './skeleton/index.js';
 export { Input } from './input/index.js';
+export { UrlField } from './url-field/index.js';
 export { Field } from './field/index.js';
 export { NumberField } from './number-field/index.js';
 export { DatePicker } from './date-picker/index.js';
@@ -31,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';
@@ -44,12 +49,14 @@ export { ChartPie } from './chart-pie/index.js';
 export { ChartBar, ChartStackedBar } from './chart-bar/index.js';
 export { Table } from './table/index.js';
 export { Pagination } from './pagination/index.js';
-export { TreeView, TreeNode } from './tree-view/index.js';
+export { SidebarMenu, SidebarMenuItem, SidebarSubMenu } from './sidebar-menu/index.js';
 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';
@@ -57,4 +64,24 @@ export type { SelectOption } from './select/index.js';
 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/input/input.ts

@@ -178,11 +178,13 @@ export class Input extends BaseInput {
                 <wc-icon-button
                   class="password-toggle"
                   variant="text"
-                  name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
                   @click=${() => {
                     this.passwordVisible = !this.passwordVisible;
                   }}
                 >
+                  <wc-icon
+                    name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
+                  ></wc-icon>
                 </wc-icon-button>
               </pc-tooltip>
             `

package/src/link/link.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import BaseHyperlink from '../__base_element/BaseHyperlink.js';
+import BaseHyperlinkMixin from '../__mixins/BaseHyperlinkMixin.js';
 import styles from './link.scss';
 
 /**
@@ -16,7 +16,7 @@ import styles from './link.scss';
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-export class Link extends BaseHyperlink(LitElement) {
+export class Link extends BaseHyperlinkMixin(LitElement) {
   static styles = [styles];
 
   render() {

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