@redvars/peacock 3.6.0 → 3.6.1

package/src/svg/svg.scss

@@ -0,0 +1,91 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  --svg-size: inherit;
+  --svg-color: inherit;
+}
+
+.svg-wrapper {
+  height: var(--svg-size, 1rem);
+  width: var(--svg-size, 1rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svg-content {
+  height: 100%;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: var(--svg-color);
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.svg-content.clickable {
+  cursor: zoom-in;
+}
+
+.placeholder {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.preview-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.preview-overlay.open {
+  display: flex;
+}
+
+.preview-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 1.5rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+
+  &:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+}
+
+.preview-content {
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+
+  svg {
+    max-width: 90vw;
+    max-height: 90vh;
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+    border-radius: 4px;
+  }
+}

package/src/svg/svg.ts

@@ -0,0 +1,160 @@
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+import { sanitizeSvg } from '@/__utils/sanitize-svg.js';
+import { fetchSVG } from '../icon/datasource.js';
+
+import styles from './svg.scss';
+
+/**
+ * @label SVG
+ * @tag wc-svg
+ * @rawTag svg
+ * @summary An SVG component with lazy loading and optional preview support.
+ * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.
+ *
+ * @cssprop --svg-color - Controls the fill color of the SVG.
+ * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <wc-svg src="/icons/my-icon.svg" image-title="My icon"></wc-svg>
+ * ```
+ */
+export class Svg extends LitElement {
+  static styles = [styles];
+
+  /** URL of the SVG asset to fetch and render inline. */
+  @property({ type: String, reflect: true }) src = '';
+
+  /** Accessible title / alt text for the SVG. */
+  @property({ attribute: 'image-title' }) imageTitle = '';
+
+  /** Enable click-to-preview lightbox. */
+  @property({ type: Boolean, reflect: true }) preview = false;
+
+  @state() private _loaded = false;
+
+  @state() private _previewOpen = false;
+
+  @state() private _svgContent: string = '';
+
+  // token to avoid stale fetch results
+  private _fetchId = 0;
+
+  private _intersectionObserver: IntersectionObserver | null = null;
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._intersectionObserver?.disconnect();
+  }
+
+  firstUpdated() {
+    this._setupIntersectionObserver();
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('src')) {
+      // Reset lazy-load state so the new src is fetched when visible
+      this._loaded = false;
+      this._svgContent = '';
+      this._setupIntersectionObserver();
+    }
+  }
+
+  private _setupIntersectionObserver() {
+    this._intersectionObserver?.disconnect();
+
+    const wrapper = this.shadowRoot?.querySelector('.svg-wrapper');
+    if (!wrapper) return;
+
+    this._intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          this._loaded = true;
+          this._intersectionObserver?.disconnect();
+          this._fetchSvg();
+        }
+      },
+      { rootMargin: '200px' },
+    );
+
+    this._intersectionObserver.observe(wrapper);
+  }
+
+  private async _fetchSvg() {
+    if (!this.src) return;
+
+    this._fetchId += 1;
+    const currentId = this._fetchId;
+
+    try {
+      const raw = await fetchSVG(this.src);
+      if (currentId !== this._fetchId) return;
+
+      this._svgContent = raw ? sanitizeSvg(raw) : '';
+    } catch {
+      if (currentId === this._fetchId) {
+        this._svgContent = '';
+      }
+    }
+  }
+
+  private _handleClick() {
+    if (this.preview) {
+      this._previewOpen = true;
+      // Move focus into the dialog after render
+      this.updateComplete.then(() => {
+        const closeBtn = this.shadowRoot?.querySelector<HTMLElement>('.preview-close');
+        closeBtn?.focus();
+      });
+    }
+  }
+
+  private _closePreview(e: Event) {
+    e.stopPropagation();
+    const wasOpen = this._previewOpen;
+    this._previewOpen = false;
+    if (wasOpen) {
+      // Return focus to the trigger
+      const trigger = this.shadowRoot?.querySelector<HTMLElement>('.svg-content');
+      trigger?.focus();
+    }
+  }
+
+  render() {
+    return html`
+      <div class="svg-wrapper">
+        ${this._loaded && this._svgContent
+          ? html`<div
+              class="svg-content ${this.preview ? 'clickable' : ''}"
+              role=${this.imageTitle ? 'img' : 'presentation'}
+              aria-label=${this.imageTitle || ''}
+              @click=${this._handleClick}
+            >
+              ${unsafeSVG(this._svgContent)}
+            </div>`
+          : html`<span class="placeholder" aria-hidden="true"></span>`}
+      </div>
+
+      <div
+        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.imageTitle ? `Preview: ${this.imageTitle}` : 'SVG preview'}
+        @click=${this._closePreview}
+        @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && this._closePreview(e)}
+      >
+        <button
+          class="preview-close"
+          aria-label="Close preview"
+          @click=${this._closePreview}
+        >&#x2715;</button>
+        <div class="preview-content" @click=${(e: Event) => e.stopPropagation()}>
+          ${unsafeSVG(this._svgContent)}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/toolbar/toolbar.ts

@@ -33,10 +33,10 @@ import colorStyles from './toolbar-colors.scss';
  * ```html
  * <!-- Docked toolbar -->
  * <wc-toolbar>
- *   <wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><wc-icon name="home"></wc-icon></wc-icon-button>
  *   <wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
- *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
- *   <wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *

package/dist/flow-designer-node-XMe-jlKg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"flow-designer-node-XMe-jlKg.js","sources":["../../src/flow-designer/flow-designer-node.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './flow-designer.scss';\nimport type { WorkflowNode } from './types.js';\n\n/**\n * Individual node component for flow designer\n * Renders a single workflow node with customizable slot templates\n *\n * @tag wc-flow-designer-node\n * @rawTag flow-designer-node\n * @wip true\n */\n@IndividualComponent\nexport class FlowDesignerNode extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The workflow node to render\n   */\n  @property({ type: Object })\n  node: WorkflowNode = { id: '', type: 'action', label: '' };\n\n  /**\n   * Whether this node is currently selected\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'selected' })\n  isSelected: boolean = false;\n\n  /**\n   * Whether this node is in edit mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'editing' })\n  isEditing: boolean = false;\n\n  /**\n   * Whether this node is disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether to show the delete button\n   */\n  @property({ type: Boolean, attribute: 'show-delete' })\n  showDelete: boolean = true;\n\n  private _handleClick = () => {\n    this.dispatchEvent(\n      new CustomEvent('node-click', {\n        detail: { nodeId: this.node.id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _handleDoubleClick = () => {\n    this.dispatchEvent(\n      new CustomEvent('node-edit-start', {\n        detail: { nodeId: this.node.id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _handleDelete = (e: Event) => {\n    e.stopPropagation();\n    if (confirm(`Delete \"${this.node.label}\"?`)) {\n      this.dispatchEvent(\n        new CustomEvent('node-delete', {\n          detail: { nodeId: this.node.id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  };\n\n  private _handleMouseEnter = () => {\n    // Node hover state handled via CSS\n  };\n\n  private _handleMouseLeave = () => {\n    // Node hover state handled via CSS\n  };\n\n  render() {\n    const { node, isSelected, isEditing, disabled } = this;\n    const nodeType = node.type || 'action';\n\n    return html`\n      <div\n        class=\"node-card ${nodeType}\"\n        ?selected=${isSelected}\n        ?editing=${isEditing}\n        ?disabled=${disabled}\n        @click=${this._handleClick}\n        @dblclick=${this._handleDoubleClick}\n        role=\"button\"\n        tabindex=\"0\"\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') this._handleClick();\n        }}\n      >\n        <!-- Customizable header slot -->\n        <slot name=\"${nodeType}-header\">\n          ${this._renderDefaultHeader()}\n        </slot>\n\n        <!-- Customizable body slot -->\n        <slot name=\"${nodeType}-body\">${this._renderDefaultBody()}</slot>\n\n        <!-- Action buttons -->\n        ${this.isEditing\n          ? html`\n              <div class=\"node-actions\">\n                <button class=\"btn-sm\" @click=${this._handleDelete}>\n                  Delete\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private _renderDefaultHeader() {\n    const { node } = this;\n    const iconMap: Record<string, string> = {\n      trigger: 'play-circle',\n      action: 'check-circle',\n      decision: 'help-circle',\n      loop_start: 'repeat',\n      loop_end: 'repeat',\n      fork: 'git-branch',\n      join: 'git-merge',\n    };\n\n    const icon = iconMap[node.type] || 'activity';\n\n    return html`\n      <div class=\"node-header\">\n        <wc-icon name=${icon} class=\"node-icon\"></wc-icon>\n        <span class=\"node-title\">${node.label}</span>\n      </div>\n    `;\n  }\n\n  private _renderDefaultBody() {\n    const { node } = this;\n    return html`\n      <div class=\"node-body\">\n        ${node.description\n          ? html`<p class=\"node-description\">${node.description}</p>`\n          : nothing}\n        <div class=\"node-metadata\">\n          <span class=\"node-type-tag\">${node.type}</span>\n          ${node.id ? html`<span class=\"node-id\">${node.id}</span>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'wc-flow-designer-node': FlowDesignerNode;\n  }\n}\n"],"names":["LitElement","html","nothing","styles","property"],"mappings":"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"}