@redvars/peacock 3.2.10 → 3.3.1

package/dist/clock.js

@@ -1,4 +1,4 @@
-import { i, _ as __decorate, n, P as PeacockComponent, a as i$1, b } from './PeacockComponent-CxJc63xj.js';
+import { i, _ as __decorate, n, I as IndividualComponent, a as i$1, b } from './IndividualComponent-tDnXrOLV.js';
 
 class ClockController {
     constructor(host, timeout = 1000) {
@@ -44,19 +44,18 @@ var css_248z = i`* {
 
 /**
  * @label Clock
- * @tag base-clock
+ * @tag wc-clock
  * @rawTag clock
- *
  * @summary Displays the current time in a given timezone.
  * @overview
  *  - Clocks are used to display the current time in a specified timezone.
  *  - They can be displayed in various formats, including 12-hour and 24-hour time.
+ * @tags display
  *
  * @example
  * ```html
- * <base-clock></base-clock>
+ * <wc-clock></wc-clock>
  * ```
- * @tags display
  */
 let Clock = class Clock extends i$1 {
     constructor() {
@@ -78,7 +77,7 @@ __decorate([
     n()
 ], Clock.prototype, "timezone", void 0);
 Clock = __decorate([
-    PeacockComponent
+    IndividualComponent
 ], Clock);
 
 export { Clock };

package/dist/clock.js.map

@@ -1 +1 @@
-{"version":3,"file":"clock.js","sources":["../../src/clock/ClockController.ts","../../src/clock/clock.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class ClockController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  value = new Date();\n\n  timeout: number;\n\n  private _timerID?: any;\n\n  constructor(host: ReactiveControllerHost, timeout = 1000) {\n    this.host = host;\n    this.host.addController(this);\n    this.timeout = timeout;\n  }\n\n  hostConnected() {\n    // Start a timer when the host is connected\n    this._timerID = setInterval(() => {\n      this.value = new Date();\n      // Update the host with new value\n      this.host.requestUpdate();\n    }, this.timeout);\n  }\n\n  hostDisconnected() {\n    // Clear the timer when the host is disconnected\n    clearInterval(this._timerID);\n    this._timerID = undefined;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport PeacockComponent from 'src/PeacockComponent.js';\nimport { ClockController } from './ClockController.js';\n\nimport styles from './clock.scss';\n\n/**\n * @label Clock\n * @tag base-clock\n * @rawTag clock\n *\n * @summary Displays the current time in a given timezone.\n * @overview\n *  - Clocks are used to display the current time in a specified timezone.\n *  - They can be displayed in various formats, including 12-hour and 24-hour time.\n *\n * @example\n * ```html\n * <base-clock></base-clock>\n * ```\n * @tags display\n */\n@PeacockComponent\nexport class Clock extends LitElement {\n  static styles = [styles];\n\n  clockController = new ClockController(this, 100);\n\n  @property() timezone?: string;\n\n  __formatDate(date: Date) {\n    return date.toLocaleTimeString('en-US', {\n      timeZone: this.timezone,\n    });\n  }\n\n  render() {\n    const currentDate = this.__formatDate(this.clockController.value);\n    return html`<div class=\"current-time\">${currentDate}</div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;MAEa,eAAe,CAAA;AAS1B,IAAA,WAAA,CAAY,IAA4B,EAAE,OAAO,GAAG,IAAI,EAAA;AANxD,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,IAAI,EAAE;AAOhB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;IACxB;IAEA,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE;;AAEvB,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAC3B,QAAA,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC;IAClB;IAEA,gBAAgB,GAAA;;AAEd,QAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;IAC3B;AACD;;;;;;;;;;;;;;;;;;;;;;ACxBD;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;QAGL,IAAA,CAAA,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,GAAG,CAAC;IAclD;AAVE,IAAA,YAAY,CAAC,IAAU,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AACjE,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,WAAW,QAAQ;IAC7D;;AAfO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AALnB,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAiBjB;;;;"}
+{"version":3,"file":"clock.js","sources":["../../src/clock/ClockController.ts","../../src/clock/clock.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class ClockController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  value = new Date();\n\n  timeout: number;\n\n  private _timerID?: any;\n\n  constructor(host: ReactiveControllerHost, timeout = 1000) {\n    this.host = host;\n    this.host.addController(this);\n    this.timeout = timeout;\n  }\n\n  hostConnected() {\n    // Start a timer when the host is connected\n    this._timerID = setInterval(() => {\n      this.value = new Date();\n      // Update the host with new value\n      this.host.requestUpdate();\n    }, this.timeout);\n  }\n\n  hostDisconnected() {\n    // Clear the timer when the host is disconnected\n    clearInterval(this._timerID);\n    this._timerID = undefined;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport { ClockController } from './ClockController.js';\n\nimport styles from './clock.scss';\n\n/**\n * @label Clock\n * @tag wc-clock\n * @rawTag clock\n * @summary Displays the current time in a given timezone.\n * @overview\n *  - Clocks are used to display the current time in a specified timezone.\n *  - They can be displayed in various formats, including 12-hour and 24-hour time.\n * @tags display\n *\n * @example\n * ```html\n * <wc-clock></wc-clock>\n * ```\n */\n@IndividualComponent\nexport class Clock extends LitElement {\n  static styles = [styles];\n\n  clockController = new ClockController(this, 100);\n\n  @property() timezone?: string;\n\n  __formatDate(date: Date) {\n    return date.toLocaleTimeString('en-US', {\n      timeZone: this.timezone,\n    });\n  }\n\n  render() {\n    const currentDate = this.__formatDate(this.clockController.value);\n    return html`<div class=\"current-time\">${currentDate}</div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;MAEa,eAAe,CAAA;AAS1B,IAAA,WAAA,CAAY,IAA4B,EAAE,OAAO,GAAG,IAAI,EAAA;AANxD,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,IAAI,EAAE;AAOhB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;IACxB;IAEA,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE;;AAEvB,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAC3B,QAAA,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC;IAClB;IAEA,gBAAgB,GAAA;;AAEd,QAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;IAC3B;AACD;;;;;;;;;;;;;;;;;;;;;;ACxBD;;;;;;;;;;;;;;AAcG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;QAGL,IAAA,CAAA,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,GAAG,CAAC;IAclD;AAVE,IAAA,YAAY,CAAC,IAAU,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AACjE,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,WAAW,QAAQ;IAC7D;;AAfO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AALnB,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAiBjB;;;;"}

package/dist/code-editor.js

@@ -1,8 +1,8 @@
-import { i, _ as __decorate, n, P as PeacockComponent, A, b } from './PeacockComponent-CxJc63xj.js';
-import { r } from './state-B09bP3XH.js';
-import { e, a as isDarkMode, r as redispatchEvent } from './dispatch-event-utils-vbdiOSeC.js';
-import { e as e$1 } from './class-map-BvQRv7eW.js';
-import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-NneLARW8.js';
+import { i, _ as __decorate, n, I as IndividualComponent, A, b } from './IndividualComponent-tDnXrOLV.js';
+import { r, e as e$1 } from './class-map-hJdvjl-W.js';
+import { e } from './query-QBcUV-L_.js';
+import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-BISF-Gl5.js';
+import { a as isDarkMode, r as redispatchEvent } from './dispatch-event-utils-B4odODQf.js';
 import './directive-Cuw6h7YA.js';
 
 // src/util.ts
@@ -43650,8 +43650,7 @@ var css_248z = i`@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
-  --code-editor-border: 1px solid var(--color-outline);
-  --code-editor-border-radius: var(--shape-corner-small);
+  --code-editor-height: 300px;
 }
 
 .code-editor-loader {
@@ -43670,11 +43669,10 @@ var css_248z = i`@charset "UTF-8";
   display: block;
   height: 100%;
   position: relative;
-  --field-height: 300px;
-  min-height: 5rem;
+  --field-height: var(--code-editor-height);
 }
 .code-editor-component .editor {
-  height: var(--field-height);
+  height: var(--code-editor-height);
 }
 .code-editor-component .monaco-editor {
   --vscode-editor-background: transparent;
@@ -43688,6 +43686,18 @@ var css_248z = i`@charset "UTF-8";
   top: var(--spacing-200);
 }`;
 
+/**
+ * @label Code Editor
+ * @tag wc-code-editor
+ * @rawTag code-editor
+ * @summary A code editor component using Monaco Editor.
+ * @tags input
+ *
+ * @example
+ * ```html
+ * <wc-code-editor language="javascript"></wc-code-editor>
+ * ```
+ */
 // At module level, outside the class
 // @ts-ignore
 // At module level, outside the class
@@ -43706,23 +43716,26 @@ self.MonacoEnvironment = {
 };
 /**
  * @label Code Editor
- * @tag code-editor
+ * @tag wc-code-editor
  * @rawTag code-editor
  *
- * @summary Code editor
+ * @summary A Monaco-based code editing component with syntax highlighting and theming.
  * @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.
+ *  - CodeEditor wraps Monaco Editor as a web component.
+ *  - Supports JS/JSON/HTML languages, read-only mode, line numbers, minimap, and dark/light theme.
+ *  - Emits `change` when content is edited and updates value from property changes.
  *
  * @example
  * ```html
- * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
- *   function helloWorld() {
- *     console.log('Hello, world!');
- *   }</code></pre>
- * </code-highlighter>
+ * <wc-code-editor
+ *   language="javascript"
+ *   style="width: 100%; --code-editor-height: 10rem;"
+ *   value="function hello() { console.log('Hello'); }"
+ *   lineNumbers="on"
+ *   minimap="false">
+ * </wc-code-editor>
  * ```
- * @tags display
+ * @tags input, editor
  */
 let CodeEditor = class CodeEditor extends BaseInput {
     constructor() {
@@ -43812,7 +43825,7 @@ let CodeEditor = class CodeEditor extends BaseInput {
     async setBlur() { this.editorMonacoInstance?.trigger('keyboard', 'type', ''); /* Focus hack or use blur if available */ }
     render() {
         return b `
-    <base-field
+    <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -43825,15 +43838,15 @@ let CodeEditor = class CodeEditor extends BaseInput {
         })}"
       >
         ${(this.disabled || this.readonly)
-            ? b `<base-tag class="read-only-tag" color="red">Read Only</base-tag>`
+            ? b `<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>`
             : A}
         <div class="editor"></div>
         ${!this.editorMonacoInstance ? b `
           <div class="code-editor-loader">
-            <base-spinner></base-spinner> Loading...
+            <wc-spinner></wc-spinner> Loading...
           </div>
         ` : A}
-      </base-field>
+      </wc-field>
     `;
     }
 };
@@ -43869,7 +43882,7 @@ __decorate([
     e('.editor')
 ], CodeEditor.prototype, "editorElement", void 0);
 CodeEditor = __decorate([
-    PeacockComponent
+    IndividualComponent
 ], CodeEditor);
 var CodeEditor_default = CodeEditor;