@redvars/peacock 3.2.8 → 3.2.9

package/src/code-editor/code-editor.ts

@@ -0,0 +1,215 @@
+import { html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import {init} from 'modern-monaco';
+import PeacockComponent from 'src/PeacockComponent.js';
+import BaseInput from '../input/BaseInput.js';
+import { observeThemeChange } from '../utils/observe-theme-change.js';
+import { redispatchEvent } from '../utils/dispatch-event-utils.js';
+import {
+  isDarkMode,
+} from '../utils.js';
+
+import styles from './code-editor.scss';
+
+// At module level, outside the class
+// @ts-ignore
+// At module level, outside the class
+(self as any).MonacoEnvironment = {
+  getWorkerUrl(moduleId: string, label: string) {
+    const workersDir = new URL('monaco/workers/', import.meta.url);
+    switch (label) {
+      case 'json':       return `${workersDir}json.worker.js`;
+      case 'css':        return `${workersDir}css.worker.js`;
+      case 'html':       return `${workersDir}html.worker.js`;
+      case 'typescript':
+      case 'javascript': return `${workersDir}ts.worker.js`;
+      default:           return `${workersDir}editor.worker.js`;
+    }
+  }
+};
+
+/**
+ * @label Code Editor
+ * @tag code-editor
+ * @rawTag code-editor
+ *
+ * @summary Code editor 
+ * @overview
+ *  - CodeHighlighter is a component that provides syntax highlighting for code snippets.
+ *  - It supports various programming languages and can display line numbers for better readability.
+ *
+ * @example
+ * ```html
+ * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
+ *   function helloWorld() {
+ *     console.log('Hello, world!');
+ *   }</code></pre>
+ * </code-highlighter>
+ * ```
+ * @tags display
+ */
+@PeacockComponent
+export default class CodeEditor extends BaseInput {
+
+  static styles = [styles];
+
+  @property({ type: String }) 
+  name = "";
+
+  @property({ type: String }) 
+  value = '';
+
+  @property({ type: String }) 
+  language: 'javascript' | 'json' | 'html' = 'javascript';
+
+  @property({ type: Object }) 
+  libSource: any;
+
+  @property({ type: String }) 
+  lineNumbers: 'off' | 'on' = 'on';
+
+  @property({ type: Boolean }) 
+  minimap = false;
+
+  @state() private _isDarkMode: boolean = isDarkMode();
+
+  @state() private hasFocus = false;
+  
+  // Type the instance correctly using the npm package types
+  @state() private editorMonacoInstance?: any;
+
+  @query('.editor') private editorElement!: HTMLElement;
+
+  monaco: any;
+
+  connectedCallback() {
+    super.connectedCallback();
+    observeThemeChange(() => {
+      this._isDarkMode = isDarkMode();
+      this.monaco.editor.setTheme(this.getTheme());
+    });
+  }
+
+  // Cleanup to prevent memory leaks
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.editorMonacoInstance?.dispose();
+  }
+
+  protected firstUpdated() {
+    this.initializeMonaco();
+  }
+
+  protected updated(changedProperties: any) {
+    if (changedProperties.has('libSource')) this.libSourceChanged();
+
+    if (changedProperties.has('disabled') || changedProperties.has('readonly')) {
+      this.editorMonacoInstance?.updateOptions({
+        readOnly: this.disabled || this.readonly,
+      });
+    }
+
+    if (changedProperties.has('value')) {
+      if (this.editorMonacoInstance && this.editorMonacoInstance.getValue() !== this.value) {
+        this.editorMonacoInstance.setValue(this.value || '');
+      }
+    }
+  } 
+
+
+
+  private libSourceChanged() {
+    const libUri = 'java://peacock.redvars.com/lib.java';
+    const libModel = this.monaco.editor.getModel(this.monaco.Uri.parse(libUri));
+    
+    if (libModel) libModel.dispose();
+    
+    if (this.libSource) {
+      this.monaco.editor.createModel(
+        this.libSource,
+        this.language,
+        this.monaco.Uri.parse(libUri)
+      );
+    }
+  }
+
+
+  private getTheme() {
+    return this._isDarkMode ? 'github-dark' : 'github-light';
+  }
+
+  async initializeMonaco() {
+    this.monaco = await init({
+  themes: [
+    "github-light",
+    "github-dark",
+  ],
+});
+
+
+    this.editorMonacoInstance = this.monaco.editor.create(this.editorElement, {
+      value: this.value,
+      lineNumbers: this.lineNumbers,
+      language: this.language,
+      minimap: { enabled: this.minimap },
+      theme: this.getTheme(),
+      readOnly: this.disabled || this.readonly
+    });
+
+
+    
+    if (this.libSource) {
+      this.libSourceChanged();
+    }
+
+    this.editorMonacoInstance.onDidChangeModelContent((e: any) => {
+      if (!e.isFlush) {
+        const newValue = this.editorMonacoInstance!.getValue();
+        this.value = newValue;
+        redispatchEvent(this, new Event('change', { bubbles: true, composed: true }));
+      }
+    });
+
+    this.editorMonacoInstance.onDidFocusEditorText(() => {
+      this.hasFocus = true;
+    });
+
+    this.editorMonacoInstance.onDidBlurEditorText(() => {
+      this.hasFocus = false
+    });
+  }
+
+
+  async setFocus() { this.editorMonacoInstance?.focus(); }
+
+  async setBlur() { this.editorMonacoInstance?.trigger('keyboard', 'type', ''); /* Focus hack or use blur if available */ }
+
+  render() {
+    return html`
+    <base-field
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        ?focused=${this.hasFocus}
+        .host=${this}
+        class="${classMap({
+        'code-editor-component': true,
+        'disabled': this.disabled,
+      })}"
+      >
+        ${(this.disabled || this.readonly) 
+          ? html`<base-tag class="read-only-tag" color="red">Read Only</base-tag>` 
+          : nothing
+        }
+        <div class="editor"></div>
+        ${!this.editorMonacoInstance ? html`
+          <div class="code-editor-loader">
+            <base-spinner></base-spinner> Loading...
+          </div>
+        ` : nothing}
+      </base-field>
+    `;
+  }
+}

package/src/code-editor/demo/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang='en-GB' data-theme="dark">
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles.css' />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+  <style>
+    body {
+      background: var(--color-surface);
+    }
+  </style>
+
+</head>
+<body>
+
+
+<code-editor style="height: 400px" id="business-rule-editor" language="javascript" ></code-editor>
+
+<script type='module'>
+  import '/dist/peacock-loader.js';
+
+  document.getElementById("business-rule-editor").value = `/**
+      * Sample Code
+      */
+      function myBusinessRuleFunction(){
+        const a = 1;
+        const b = 2;
+        let c = a + b;
+        console.log(c);
+      }`;
+</script>
+
+
+</body>
+</html>

package/src/code-editor/index.ts

@@ -0,0 +1,3 @@
+import CodeEditor from "./code-editor.js";
+
+export { CodeEditor };

package/src/container/container.scss

@@ -35,7 +35,7 @@
   width: 100%;
 
   .content {
-    padding: v(--spacing-200);
+    padding: var(--spacing-200);
   }
 }
 

package/src/date-picker/date-picker.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
 import BaseInput from '../input/BaseInput.js';
 import styles from './date-picker.scss';
 import { spread } from '../spread.js';
-import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Date Picker

package/src/image/image.scss

@@ -0,0 +1,49 @@
+:host {
+      display: inline-block;
+    }
+
+    .image-wrapper {
+      position: relative;
+      display: inline-block;
+    }
+
+    img {
+      display: block;
+      max-width: 100%;
+    }
+
+    img.clickable {
+      cursor: zoom-in;
+    }
+
+    .placeholder {
+      background: #e0e0e0;
+      min-width: 100px;
+      min-height: 100px;
+      display: block;
+    }
+
+    /* Preview overlay — rendered in light DOM via portal, but we keep
+       a host-level overlay as a fallback when shadow DOM is used.       */
+    .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-overlay img {
+      max-width: 90vw;
+      max-height: 90vh;
+      object-fit: contain;
+      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+      border-radius: 4px;
+    }

package/src/image/image.ts

@@ -0,0 +1,135 @@
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { isDarkMode } from '../utils.js';
+import { observeThemeChange } from '../utils/observe-theme-change.js';
+
+import styles from './image.scss';
+
+/**
+ * @label Image
+ * @tag base-image
+ * @rawTag image
+ *
+ * @summary Image
+ * @overview
+ *  - CodeHighlighter is a component that provides syntax highlighting for code snippets.
+ *  - It supports various programming languages and can display line numbers for better readability.
+ *
+ * @example
+ * ```html
+ * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
+ *   function helloWorld() {
+ *     console.log('Hello, world!');
+ *   }</code></pre>
+ * </code-highlighter>
+ * ```
+ * @tags display
+ */
+export class Image extends LitElement {
+  static styles = [styles];
+
+  /** Primary image source */
+  @property({ reflect: true }) src = '';
+
+  /** Optional dark-mode image source */
+  @property({ reflect: true, attribute: 'dark-src' }) darkSrc = '';
+
+  /** Alt text / title for the image */
+  @property({ attribute: 'image-title' }) imageTitle = '';
+
+  /** Enable click-to-preview lightbox */
+  @property({ type: Boolean, reflect: true }) preview = false;
+
+  @state() private _isDarkMode: boolean = isDarkMode();
+
+  @state() private _loaded = false;
+
+  @state() private _previewOpen = false;
+
+  private _intersectionObserver: IntersectionObserver | null = null;
+
+  private _themeCleanup: (() => void) | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Theme observation
+    this._themeCleanup = observeThemeChange(() => {
+      this._isDarkMode = isDarkMode();
+      // Reset lazy-load state so new src is loaded when visible
+      this._loaded = false;
+      this._setupIntersectionObserver();
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._intersectionObserver?.disconnect();
+    this._themeCleanup?.();
+  }
+
+  firstUpdated() {
+    this._setupIntersectionObserver();
+  }
+
+  private _setupIntersectionObserver() {
+    this._intersectionObserver?.disconnect();
+
+    const wrapper = this.shadowRoot?.querySelector('.image-wrapper');
+    if (!wrapper) return;
+
+    this._intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          this._loaded = true;
+          this._intersectionObserver?.disconnect();
+        }
+      },
+      { rootMargin: '200px' } // start loading slightly before entering viewport
+    );
+
+    this._intersectionObserver.observe(wrapper);
+  }
+
+  private get _activeSrc(): string {
+    return this._isDarkMode && this.darkSrc ? this.darkSrc : this.src;
+  }
+
+  private _handleClick() {
+    if (this.preview) {
+      this._previewOpen = true;
+    }
+  }
+
+  private _closePreview(e: Event) {
+    e.stopPropagation();
+    this._previewOpen = false;
+  }
+
+  render() {
+    return html`
+      <div class="image-wrapper">
+        ${this._loaded
+          ? html`<img
+              src=${this._activeSrc}
+              alt=${this.imageTitle}
+              class=${this.preview ? 'clickable' : ''}
+              @click=${this._handleClick}
+            />`
+          : html`<span class="placeholder" aria-hidden="true"></span>`}
+      </div>
+
+      <!-- Lightbox preview overlay (inside shadow root) -->
+      <div
+        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Image preview"
+        @click=${this._closePreview}
+        @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && this._closePreview(e)}
+      >
+        <img src=${this._activeSrc} alt=${this.imageTitle} @click=${(e: Event) => e.stopPropagation()} />
+      </div>
+    `;
+  }
+}

package/src/image/index.ts

@@ -0,0 +1 @@
+export {Image} from './image.js';

package/src/index.ts

@@ -31,3 +31,5 @@ export { Tooltip } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
+export { CodeEditor } from './code-editor/index.js';
+export { Image } from './image/index.js';

package/src/input/input.ts

@@ -1,10 +1,9 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
 import BaseInput from './BaseInput.js';
 import styles from './input.scss';
 import { spread } from '../spread.js';
-import { redispatchEvent } from '../utils.js';
-
 /**
  * @label Input
  * @tag input-field

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

@@ -13,6 +13,7 @@
   align-items: center;
   padding-inline: 0.75rem;
   outline: 0;
+  text-decoration: none;
 
   @include mixin.get-typography(label-large);
 
@@ -93,10 +94,10 @@
   &.selected {
     --_container-color: var(--menu-item-container-selected-color);
     --_label-text-color: var(--menu-item-label-selected-color);
-    --_container-shape-start-start: var(--menu-item-container-shape-start-start, var(--shape-corner-large));
-    --_container-shape-start-end: var(--menu-item-container-shape-start-end, var(--shape-corner-large));
-    --_container-shape-end-start: var(--menu-item-container-shape-end-start, var(--shape-corner-large));
-    --_container-shape-end-end: var(--menu-item-container-shape-end-end, var(--shape-corner-large));
+    --_container-shape-start-start: var(--shape-corner-large);
+    --_container-shape-start-end: var(--shape-corner-large);
+    --_container-shape-end-start: var(--shape-corner-large);
+    --_container-shape-end-end: var(--shape-corner-large);
     --_container-corner-shape-variant: none;
   }
 

package/src/menu/menu-list/menu-list.scss

@@ -13,6 +13,7 @@
     flex-direction: column;
     gap: var(--spacing-050);
     z-index: 1;
+    width: 100%;
 
     ::slotted(:first-child) {
       --menu-item-container-shape-start-start: var(--shape-corner-medium);

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

@@ -1,10 +1,10 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
 import BaseInput from '../input/BaseInput.js';
 import styles from './number-field.scss';
 import { spread } from '../spread.js';
-import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Number Field

package/src/peacock-loader.ts

@@ -39,6 +39,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 { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
 import { loadCSS } from './CssLoader.js';
@@ -151,6 +152,9 @@ const loaderConfig: LoaderConfig = {
     'number-counter': {
       importPath: `${distDirectory}/number-counter.js`,
     },
+    'code-editor': {
+      importPath: `${distDirectory}/code-editor.js`,
+    },
     'code-highlighter': {
       importPath: `${distDirectory}/code-highlighter.js`,
     },
@@ -183,6 +187,9 @@ const loaderConfig: LoaderConfig = {
     },
     'base-container': {
       CustomElementClass: Container
+    },
+    'base-image': {
+      CustomElementClass: Image
     }
   },
 };

package/src/textarea/textarea.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
 import BaseInput from '../input/BaseInput.js';
 import styles from './textarea.scss';
 import { spread } from '../spread.js';
-import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Textarea

package/src/time-picker/time-picker.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
 import BaseInput from '../input/BaseInput.js';
 import styles from './time-picker.scss';
 import { spread } from '../spread.js';
-import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Time Picker