@nuraly/runtime 0.1.7 → 0.1.9

package/components/ui/components/Event/EventValue/EventValue.ts

@@ -1,6 +1,6 @@
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { css, html, isServer, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { BaseElementBlock } from '../../base/BaseElement';
 import { styleMap } from "lit/directives/style-map.js";
 import { executeHandler } from '../../../../../handlers/handler-executor.ts';
@@ -21,6 +21,8 @@ export class ParameterEventLabel extends BaseElementBlock {
   ];
   @property({ type: Object })
   component: ComponentElement;
+
+  @state() private isDropdownOpen = false;
   
 
   handleCodeChange = (e: CustomEvent) => {
@@ -46,34 +48,37 @@ export class ParameterEventLabel extends BaseElementBlock {
 
   render() {
     return html`
-  
+
     <nr-dropdown
       trigger="click"
       placement="left"
+      position-strategy="fixed"
       style=${styleMap({
         "--nuraly-dropdown-max-width": "500px",
       })}
+      @nr-dropdown-open=${() => { this.isDropdownOpen = true; }}
+      @nr-dropdown-close=${() => { this.isDropdownOpen = false; }}
     >
-        <nr-button 
+        <nr-button
             slot="trigger"
         size=${"small"}
-        .iconLeft=${"code"} 
+        .iconLeft=${"code"}
         style=${styleMap({
           "--nuraly-button-padding-small" : "0px",
           "--nuraly-button-min-width": "30px"
         })}
         iconPosition=${!this.inputHandlersValue?.triggerText ? "left" : "right"}
          >${this.inputHandlersValue?.triggerText ?? ""}</nr-button>
-        
+
         <div slot="content" >
-          ${this.renderCodeEditorTemplate()}
+          ${this.isDropdownOpen ? this.renderCodeEditorTemplate() : nothing}
         </div>
-      
+
       <nr-tooltip position=${this.inputHandlersValue?.triggerText ? "left" : "right"} alignement=${"start"}>
         Set the value programmatically using Javascript script
       </nr-tooltip>
     </nr-dropdown>
-  
+
      `;
   }
 }

package/components/ui/components/ToastContainer/ToastContainer.ts

@@ -9,7 +9,7 @@ try {
 }
 
 import { $toasts, type Toast } from '../../../../redux/store/toast';
-import { hideToast } from '../../../../../../services/toast';
+import { hideToast } from '../../../../utils/toast';
 
 // Singleton instance tracker
 let toastContainerInstance: ToastContainer | null = null;

package/components/ui/components/advanced/AIChat/AIChat.ts

@@ -53,7 +53,7 @@ export class AiChat extends BaseElementBlock {
   @state()
   private isLoading = false;
 
-  override async connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
   }
 
@@ -131,7 +131,6 @@ export class AiChat extends BaseElementBlock {
       requestAnimationFrame(() => {
         this.preview = true;
       });
-      console.log("Message sent:", this.messages);
     } catch (error) {
       console.error("Error sending message:", error);
     } finally {

package/components/ui/components/advanced/Collapse/Collapse.ts

@@ -79,8 +79,11 @@ export class Collapse extends BaseElementBlock {
   }
 
   private generateSection() {
-    const components = this.inputHandlersValue.components;
-    return components?.map(
+    const components = this.inputHandlersValue?.components;
+    if (!components || !Array.isArray(components)) {
+      return [];
+    }
+    return components.map(
       (section: { label: any; blockName: string; open: boolean }, index: number) => {
         return {
           header: section.label,

package/components/ui/components/advanced/Collections/Collections.ts

@@ -40,8 +40,8 @@ export class CollectionViewer extends BaseElementBlock {
   selectedComponent: Readonly<ComponentElement>;
   containerRef: Ref<HTMLInputElement> = createRef();
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     this.updateChildrenComponents();
     if (this.component?.event?.onInit) {
       executeHandler(

package/components/ui/components/advanced/MicroApp/MicroApp.ts

@@ -8,14 +8,6 @@ import { $components } from '../../../../../redux/store/component/store.ts';
 import { $microAppCurrentPage } from '../../../../../redux/store/page.ts';
 import { debounce } from '../../../../../utils/time.ts';
 
-// Safely import @nuralyui/input
-try {
-  await import("@nuralyui/input");
-} catch (error) {
-  console.warn('[@nuralyui/input] Package not found or failed to load.');
-}
-
-
 
 @customElement("micro-app-block")
 export class MicroAppBlock extends BaseElementBlock {
@@ -44,8 +36,8 @@ export class MicroAppBlock extends BaseElementBlock {
     super();
   }
 
-  override async connectedCallback(): Promise<void> {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     const pageUUID = $microAppCurrentPage.get()["84105b5d-49fe-4724-bc0e-325b578cbe17"];
     this.registerCallback("appUUID", debounce((appUUID: string) => {
       if (appUUID) {
@@ -82,7 +74,7 @@ export class MicroAppBlock extends BaseElementBlock {
   
 
   render() {
-    const isPreviewMode = this.inputHandlersValue.mode === ViewMode.Preview || this.inputHandlersValue.mode === ViewMode.Preview;
+    const isPreviewMode = this.inputHandlersValue.mode === ViewMode.Preview;
 
     return html`
       ${this.inputHandlersValue.appUUID

package/components/ui/components/advanced/RefComponent/RefComponent.ts

@@ -42,8 +42,8 @@ export class RefComponentContainer extends BaseElementBlock {
     @state()
     components: ComponentElement[];
 
-    override async connectedCallback() {
-        await super.connectedCallback();
+    override connectedCallback() {
+        super.connectedCallback();
     }
     constructor() {
         super();

package/components/ui/components/advanced/RichText/RichText.ts

@@ -30,7 +30,7 @@ export class RichTextContainer extends BaseElementBlock {
     super();
   }
 
-  override async connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
     window.addEventListener("keydown", this.handleKeyDown);
   }
@@ -59,10 +59,10 @@ export class RichTextContainer extends BaseElementBlock {
             executeHandler(this.component,
                 /* js */ `
                   try {
-                      const selectedComponent = Utils.first(Vars.selectedComponents);
+                      const selectedComponent = Utils.first($selectedComponents);
                       updateInput(selectedComponent, "value", "string", ${serializedValue}, null);
                   } catch (error) {
-                      console.log(error);
+                      console.error(error);
                   }
                 `, {});
         }
@@ -70,9 +70,10 @@ export class RichTextContainer extends BaseElementBlock {
 
   override renderComponent() {
     return html`
+    
       <div ${ref(this.inputRef)}
+     class="${`drop-${this.component.uuid}`}"
       style=${styleMap({
-        ...this.getStyles(),
         width: this.editing  ? "auto" : this.getStyles().width,
         display: "block",})}
       >

package/components/ui/components/advanced/RichText/RichTextEditor.ts

@@ -132,7 +132,6 @@ align-items: center; /* vertically center items */
         <div id="toolbar">
           ${toolbar(this.shadowRoot!, this.getSelection(), (command, val) => {
             document.execCommand(command, false, val);
-            console.log("command", command, val);
           })}
             <input id="bg" type="color" style="display: none" />
             <input id="fg" type="color" style="display: none" />
@@ -294,33 +293,6 @@ function toolbar(
       },
       type: "color",
     },
-    // {
-    //   icon: "title",
-    //   command: "formatblock",
-    //   values: [
-    //     { name: "Normal Text", value: "--" },
-    //     { name: "Heading 1", value: "h1" },
-    //     { name: "Heading 2", value: "h2" },
-    //     { name: "Heading 3", value: "h3" },
-    //     { name: "Heading 4", value: "h4" },
-    //     { name: "Heading 5", value: "h5" },
-    //     { name: "Heading 6", value: "h6" },
-    //     { name: "Paragraph", value: "p" },
-    //     { name: "Pre-Formatted", value: "pre" },
-    //   ],
-    // },
-    // {
-    //   icon: "text_format",
-    //   command: "fontname",
-    //   values: [
-    //     { name: "Font Name", value: "--" },
-    //     ...[...checkFonts()].map((f) => ({
-    //       name: f,
-    //       value: f,
-    //       font: true,
-    //     })),
-    //   ],
-    // },
     {
       icon: "format_size",
       command: "fontsize",
@@ -394,143 +366,4 @@ function toolbar(
       }
     })}
   `;
-}
-
-export function checkFonts(): string[] {
-  const fontCheck = new Set(
-    [
-      // Windows 10
-      "Arial",
-      "Arial Black",
-      "Bahnschrift",
-      "Calibri",
-      "Cambria",
-      "Cambria Math",
-      "Candara",
-      "Comic Sans MS",
-      "Consolas",
-      "Constantia",
-      "Corbel",
-      "Courier New",
-      "Ebrima",
-      "Franklin Gothic Medium",
-      "Gabriola",
-      "Gadugi",
-      "Georgia",
-      "HoloLens MDL2 Assets",
-      "Impact",
-      "Ink Free",
-      "Javanese Text",
-      "Leelawadee UI",
-      "Lucida Console",
-      "Lucida Sans Unicode",
-      "Malgun Gothic",
-      "Marlett",
-      "Microsoft Himalaya",
-      "Microsoft JhengHei",
-      "Microsoft New Tai Lue",
-      "Microsoft PhagsPa",
-      "Microsoft Sans Serif",
-      "Microsoft Tai Le",
-      "Microsoft YaHei",
-      "Microsoft Yi Baiti",
-      "MingLiU-ExtB",
-      "Mongolian Baiti",
-      "MS Gothic",
-      "MV Boli",
-      "Myanmar Text",
-      "Nirmala UI",
-      "Palatino Linotype",
-      "Segoe MDL2 Assets",
-      "Segoe Print",
-      "Segoe Script",
-      "Segoe UI",
-      "Segoe UI Historic",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      "SimSun",
-      "Sitka",
-      "Sylfaen",
-      "Symbol",
-      "Tahoma",
-      "Times New Roman",
-      "Trebuchet MS",
-      "Verdana",
-      "Webdings",
-      "Wingdings",
-      "Yu Gothic",
-      // macOS
-      "American Typewriter",
-      "Andale Mono",
-      "Arial",
-      "Arial Black",
-      "Arial Narrow",
-      "Arial Rounded MT Bold",
-      "Arial Unicode MS",
-      "Avenir",
-      "Avenir Next",
-      "Avenir Next Condensed",
-      "Baskerville",
-      "Big Caslon",
-      "Bodoni 72",
-      "Bodoni 72 Oldstyle",
-      "Bodoni 72 Smallcaps",
-      "Bradley Hand",
-      "Brush Script MT",
-      "Chalkboard",
-      "Chalkboard SE",
-      "Chalkduster",
-      "Charter",
-      "Cochin",
-      "Comic Sans MS",
-      "Copperplate",
-      "Courier",
-      "Courier New",
-      "Didot",
-      "DIN Alternate",
-      "DIN Condensed",
-      "Futura",
-      "Geneva",
-      "Georgia",
-      "Gill Sans",
-      "Helvetica",
-      "Helvetica Neue",
-      "Herculanum",
-      "Hoefler Text",
-      "Impact",
-      "Lucida Grande",
-      "Luminari",
-      "Marker Felt",
-      "Menlo",
-      "Microsoft Sans Serif",
-      "Monaco",
-      "Noteworthy",
-      "Optima",
-      "Palatino",
-      "Papyrus",
-      "Phosphate",
-      "Rockwell",
-      "Savoye LET",
-      "SignPainter",
-      "Skia",
-      "Snell Roundhand",
-      "Tahoma",
-      "Times",
-      "Times New Roman",
-      "Trattatello",
-      "Trebuchet MS",
-      "Verdana",
-      "Zapfino",
-    ].sort()
-  );
-  const fontAvailable = new Set<string>();
-  // @ts-ignore
-  for (const font of fontCheck.values()) {
-    // @ts-ignore
-    if (document.fonts.check(`12px "${font}"`)) {
-      fontAvailable.add(font);
-    }
-  }
-  // @ts-ignore
-  return fontAvailable.values();
 }

package/components/ui/components/base/BaseElement/base-change-detection.ts

@@ -2,17 +2,13 @@ import { getAllChildrenRecursive } from '../../../../../redux/store/component/st
 import { eventDispatcher } from '../../../../../utils/change-detection';
 
 export const setupChangeDetection = () => {
-
     eventDispatcher.onAny((eventName, {ctx} = {}) => {
         if (eventName.startsWith("ccomponent-property-changed")) {
             // getDirectChildren
             const chdilrensComponent = getAllChildrenRecursive(ctx.application_id, ctx.uuid).get();
-            chdilrensComponent.forEach((component) => {
+            chdilrensComponent.forEach(() => {
                 // eventDispatcher.emit(`component-input-refresh-request:${component.uuid}`)
             })
-            // console.log(chdilrensComponent)
-            // console.log(`Event: ${eventName}`, ctx);
         }
     })
-
 }