@redvars/peacock 3.5.1 → 3.6.0

package/src/notification-manager/notification-manager.scss

@@ -0,0 +1,113 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+@keyframes reveal-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-1rem);
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes reveal-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(1rem);
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:host {
+  display: block;
+  position: var(--notification-manager-position, absolute);
+  width: 20rem;
+  z-index: var(--z-index-notification-manager, 9000);
+  pointer-events: none;
+}
+
+.notification-manager {
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+  margin: var(--spacing-150);
+}
+
+.notification {
+  pointer-events: auto;
+  max-height: 500px;
+  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
+  overflow: hidden;
+}
+
+.notification.hidden {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* Position variants */
+
+:host([position='bottom-right']) {
+  bottom: 0;
+  right: 0;
+
+  .notification-manager {
+    align-items: flex-end;
+  }
+
+  .notification {
+    animation: reveal-bottom 0.5s ease-in;
+  }
+}
+
+:host([position='bottom-left']) {
+  bottom: 0;
+  left: 0;
+
+  .notification-manager {
+    align-items: flex-start;
+  }
+
+  .notification {
+    animation: reveal-bottom 0.5s ease-in;
+  }
+}
+
+:host([position='top-right']) {
+  top: 0;
+  right: 0;
+
+  .notification-manager {
+    align-items: flex-end;
+  }
+
+  .notification {
+    animation: reveal-top 0.5s ease-in;
+  }
+}
+
+:host([position='top-left']) {
+  top: 0;
+  left: 0;
+
+  .notification-manager {
+    align-items: flex-start;
+  }
+
+  .notification {
+    animation: reveal-top 0.5s ease-in;
+  }
+}

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/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';
@@ -37,6 +39,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';
@@ -62,15 +66,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 +145,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 +199,9 @@ const loaderConfig: LoaderConfig = {
     'wc-notification': {
       CustomElementClass: Notification,
     },
+    'wc-notification-manager': {
+      CustomElementClass: NotificationManager,
+    },
     'wc-tag': {
       CustomElementClass: Tag,
     },
@@ -213,12 +239,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`,
     },
@@ -285,6 +320,9 @@ const loaderConfig: LoaderConfig = {
     'wc-side-sheet': {
       CustomElementClass: SideSheet,
     },
+    'wc-modal': {
+      CustomElementClass: Modal,
+    },
     'wc-select': {
       CustomElementClass: Select,
     },
@@ -303,6 +341,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 +371,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;
+}