@nuraly/runtime 0.1.0

package/components/ui/components/layout/Panel/Panel.ts

@@ -0,0 +1,156 @@
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { BaseElementBlock } from "../../base/BaseElement.ts";
+import "@nuralyui/panel";
+import { ref } from "lit/directives/ref.js";
+import { PanelMode, PanelSize, PanelPosition, MaximizePosition } from "@nuralyui/panel";
+import { $components } from '../../../../../redux/store/component/store.ts';
+import { renderComponent } from '../../../../../utils/render-util';
+
+@customElement("panel-block")
+export class PanelBlock extends BaseElementBlock {
+  static styles = [css``];
+
+  @property({ type: Object })
+  component: ComponentElement;
+
+  @property({ type: Object })
+  item: any;
+
+  @property({ type: Boolean })
+  isViewMode = false;
+
+  @state()
+  childrenComponents: ComponentElement[] = [];
+
+  override async connectedCallback() {
+    await super.connectedCallback();
+    this.updateChildrenComponents();
+  }
+
+  override updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has("component")) {
+      this.updateChildrenComponents();
+    }
+  }
+
+  private updateChildrenComponents(): void {
+    this.childrenComponents = this.component?.childrenIds?.map((id) => {
+      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
+    }) ?? [];
+  }
+
+  renderComponent() {
+    const panelStyles = this.component?.style || {};
+    
+    // Get properties from input or inputHandlers
+    const mode = this.component?.input?.mode?.value || this.inputHandlersValue?.mode || PanelMode.Panel;
+    const size = this.component?.input?.size?.value || this.inputHandlersValue?.size || PanelSize.Medium;
+    const position = this.component?.input?.position?.value || this.inputHandlersValue?.position || PanelPosition.Right;
+    const maximizePosition = this.component?.input?.maximizePosition?.value || this.inputHandlersValue?.maximizePosition || MaximizePosition.Center;
+    const draggable = this.component?.input?.draggable?.value ?? this.inputHandlersValue?.draggable ?? true;
+    const resizable = this.component?.input?.resizable?.value ?? this.inputHandlersValue?.resizable ?? false;
+    const collapsible = this.component?.input?.collapsible?.value ?? this.inputHandlersValue?.collapsible ?? false;
+    const minimizable = this.component?.input?.minimizable?.value ?? this.inputHandlersValue?.minimizable ?? true;
+    const closable = this.component?.input?.closable?.value ?? this.inputHandlersValue?.closable ?? true;
+    const animated = this.component?.input?.animated?.value ?? this.inputHandlersValue?.animated ?? false;
+    const title = this.component?.input?.title?.value || this.inputHandlersValue?.title || '';
+    const icon = this.component?.input?.icon?.value || this.inputHandlersValue?.icon || '';
+    const width = this.component?.input?.width?.value || this.inputHandlersValue?.width || '';
+    const height = this.component?.input?.height?.value || this.inputHandlersValue?.height || '';
+    const open = this.component?.input?.open?.value ?? this.inputHandlersValue?.open ?? true;
+
+    return html`
+      <nr-panel
+        ${ref(this.inputRef)}
+        style=${styleMap(panelStyles)}
+        .mode=${mode}
+        .size=${size}
+        .position=${position}
+        .maximizePosition=${maximizePosition}
+        ?draggable=${draggable}
+        ?resizable=${resizable}
+        ?collapsible=${collapsible}
+        ?minimizable=${minimizable}
+        ?closable=${closable}
+        ?animated=${animated}
+        .title=${title}
+        .icon=${icon}
+        .width=${width}
+        .height=${height}
+        ?open=${open}
+        @panel-mode-change=${(e: CustomEvent) => {
+          this.executeEvent('onPanelModeChange', e);
+        }}
+        @panel-close=${(e: CustomEvent) => {
+          this.executeEvent('onPanelClose', e);
+        }}
+        @panel-minimize=${(e: CustomEvent) => {
+          this.executeEvent('onPanelMinimize', e);
+        }}
+        @panel-maximize=${(e: CustomEvent) => {
+          this.executeEvent('onPanelMaximize', e);
+        }}
+        @panel-drag-start=${(e: CustomEvent) => {
+          this.executeEvent('onPanelDragStart', e);
+        }}
+        @panel-drag-end=${(e: CustomEvent) => {
+          this.executeEvent('onPanelDragEnd', e);
+        }}
+        @panel-resize=${(e: CustomEvent) => {
+          this.executeEvent('onPanelResize', e);
+        }}
+        @panel-maximize-embedded=${(e: CustomEvent) => {
+          this.executeEvent('onPanelMaximizeEmbedded', e);
+        }}
+        @panel-restore-embedded=${(e: CustomEvent) => {
+          this.executeEvent('onPanelRestoreEmbedded', e);
+        }}
+      >
+        ${this.childrenComponents.length
+          ? renderComponent(
+              this.childrenComponents.map((component) => ({ ...component, item: this.item })), 
+              this.item, 
+              this.isViewMode, 
+              {...this.component, uniqueUUID : this.uniqueUUID}
+            )
+          : nothing}
+        ${this.renderHeaderSlot()}
+        ${this.renderFooterSlot()}
+      </nr-panel>
+    `;
+  }
+
+  /**
+   * Render custom header slot if content is provided
+   */
+  private renderHeaderSlot() {
+    const headerContent = this.component?.input?.headerContent?.value || this.inputHandlersValue?.headerContent;
+    
+    if (!headerContent) return nothing;
+    
+    return html`
+      <div slot="header">
+        ${headerContent}
+      </div>
+    `;
+  }
+
+  /**
+   * Render custom footer slot if content is provided
+   */
+  private renderFooterSlot() {
+    const footerContent = this.component?.input?.footerContent?.value || this.inputHandlersValue?.footerContent;
+    
+    if (!footerContent) return nothing;
+    
+    return html`
+      <div slot="footer">
+        ${footerContent}
+      </div>
+    `;
+  }
+}

package/components/ui/components/layout/Panel/index.ts

@@ -0,0 +1 @@
+export * from './Panel.ts';

package/components/ui/components/layout/Tabs/Tabs.style.ts

@@ -0,0 +1,5 @@
+import { css } from "lit";
+
+export default css`
+
+`;

package/components/ui/components/layout/Tabs/Tabs.ts

@@ -0,0 +1,120 @@
+import type { ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { $applicationComponents } from '../../../../../redux/store/component/store.ts';
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { renderComponent } from '../../../../../utils/render-util';
+import { BaseElementBlock } from "../../base/BaseElement.ts";
+import { styleMap } from "lit/directives/style-map.js";
+import { EMPTY_STRING } from '../../../../../utils/constants.ts';
+import "@nuralyui/tabs";  
+@customElement("tabs-block")
+export class TabsBlock extends BaseElementBlock {
+  static override styles = css`
+      :host {
+          display: block;
+          height: 100%;
+          /* CSS variables for tab text alignment customization */
+          --nuraly-tabs-text-align: center; /* Default center alignment */
+      }
+  `;
+  @property({ type: Object, reflect: false })
+  component: ComponentElement;
+  @state()
+  private editableTabs = [];
+  @state()
+  private componentsWithChildren: ComponentElement[] = [];
+
+  constructor() {
+    super()
+    this.registerCallback('tabs', () => {
+      this.updateComponents();
+      this.editableTabs = this.generateTabs();
+    })
+  }
+  override update(changedProperties: Map<string | number | symbol, unknown>) {
+    super.update(changedProperties);
+    if (changedProperties.has("component")) {
+      this.updateComponents();
+     // this.editableTabs = this.generateTabs();
+    }
+  }
+
+  override renderComponent() {
+    const tabStyle = this.getStyles();
+    
+    return html`
+      ${this.editableTabs?.length > 0 ? html`
+        <nr-tabs
+          style=${styleMap({
+            ...tabStyle
+          })}
+          .activeTab=${this.inputHandlersValue.index ?? 0}
+          .tabs=${this.editableTabs}
+          size=${this.inputHandlersValue?.size ?? 'medium'}
+          align=${this.inputHandlersValue?.align ?? nothing}
+          .panelConfig=${this.inputHandlersValue?.panelConfig ?? nothing}
+          .popOut=${this.inputHandlersValue?.popOut ?? nothing}
+          @nr-tab-click=${(e: CustomEvent) => {
+            //@todo pass the object
+          this.executeEvent('onTabChanged', e, {
+            tab: this.editableTabs.find((tab, index) => index === e.detail.index),
+          });
+        }}
+          @nr-tabs-panel-close=${(e: CustomEvent) => {
+            this.executeEvent('onPanelClose', e);
+          }}
+          @nr-tabs-panel-minimize=${(e: CustomEvent) => {
+            this.executeEvent('onPanelMinimize', e);
+          }}
+          @nr-tabs-panel-resize=${(e: CustomEvent) => {
+            this.executeEvent('onPanelResize', e);
+          }}
+          @nr-tab-pop-out=${(e: CustomEvent) => {
+            this.executeEvent('onTabPopOut', e, {
+              tab: e.detail.tab,
+              index: e.detail.index,
+              popOutId: e.detail.popOutId
+            });
+          }}
+          @nr-tab-pop-in=${(e: CustomEvent) => {
+            this.executeEvent('onTabPopIn', e, {
+              tab: e.detail.tab,
+              originalIndex: e.detail.originalIndex,
+              popOutId: e.detail.popOutId
+            });
+          }}
+          .editable=${{
+          canDeleteTab: false,
+          canEditTabTitle: false,
+          canAddTab: false,
+          canMove: false
+        }}
+        ></nr-tabs>
+      ` : EMPTY_STRING}
+    `;
+  }
+
+  private generateComponent(childrensIds: string[]) {
+    // Map over childrensIds to preserve order, find each component in componentsWithChildren
+    const childrens = childrensIds?.map(id => 
+      this.componentsWithChildren.find(component => component.uuid === id)
+    ).filter(Boolean) || []; // Filter out any undefined results
+    return html`${renderComponent(childrens, null, true)}`;
+  }
+
+  private generateTabs() {
+    return (this.inputHandlersValue.tabs)?.map(tab => ({
+      label: tab.label.value,
+      key: tab.key,
+      icon: tab.icon?.value || null,
+      content: html`
+        <div>${this.generateComponent(tab.childrends.value)}</div>`
+    }));
+  }
+
+  private updateComponents() {
+    const components = $applicationComponents(this.component.application_id).get();
+    this.componentsWithChildren = [...components];
+  //  this.editableTabs = this.generateTabs();
+  }
+}

package/components/ui/components/navigation/EmbedURL/EmbedURL.ts

@@ -0,0 +1,108 @@
+import { css, html, type PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ref } from "lit/directives/ref.js";
+import { BaseElementBlock } from "../../base/BaseElement.ts";
+import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { executeHandler } from '../../../../../state/runtime-context.ts';
+import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
+import { debounce } from '../../../../../utils/time.ts';
+
+@customElement("embed-url-block")
+export class EmbedUrlBlock extends BaseElementBlock {
+  static styles = [css`
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  `];
+
+  @property({ type: Object })
+  component: ComponentElement;
+
+  @property({ type: Object })
+  item: any;
+
+  @state()
+  currentUrl = "";
+
+  @state()
+  private _isUserFocused = false;
+
+  private _focusResetTimeout: NodeJS.Timeout | null = null;
+
+  iframeRef = ref();
+
+  unsubscribe: () => void;
+
+  constructor() {
+    super();
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    this.registerCallback("url", (url) => {
+      if (!this._isUserFocused && this.currentUrl !== url) {
+        this.currentUrl = url ?? "";
+      }
+    });
+  }
+
+  handleUrlChange = debounce((url: string) => {
+    if (this.component?.event?.valueChange) {
+      executeHandler(
+        this.component,
+        getNestedAttribute(this.component, `event.valueChange`),
+        { value: url }
+      );
+    }
+    this.resetFocusAfterInactivity();
+  }, 0);
+
+  onFocus = () => {
+    this._isUserFocused = true;
+    if (this.component?.event?.focus) {
+      executeHandler(this.component, getNestedAttribute(this.component, `event.focus`));
+    }
+  };
+
+  onBlur = () => {
+    this._isUserFocused = false;
+    if (this.component?.event?.blur) {
+      executeHandler(this.component, getNestedAttribute(this.component, `event.blur`));
+    }
+  };
+
+  private resetFocusAfterInactivity() {
+    if (this._focusResetTimeout) clearTimeout(this._focusResetTimeout);
+    this._focusResetTimeout = setTimeout(() => {
+      this._isUserFocused = false;
+    }, 3000);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.unsubscribe) this.unsubscribe();
+    if (this._focusResetTimeout) clearTimeout(this._focusResetTimeout);
+  }
+
+  override renderComponent() {
+    const url = this.currentUrl || this.inputHandlersValue?.url || "";
+
+    return html`
+      <div
+      ${ref(this.inputRef)}
+        tabindex="0"
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        style=${styleMap(this.getStyles())}
+      >
+        ${url
+          ? html`<iframe ${ref(this.iframeRef)} src=${url}></iframe>`
+          : html`<div style="text-align:center; color:gray;">No URL provided</div>`}
+      </div>
+    `;
+  }
+}

package/components/ui/components/navigation/Link/Link.ts

@@ -0,0 +1,83 @@
+import { html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { BaseElementBlock } from "../../base/BaseElement.ts";
+import { ref } from "lit/directives/ref.js";
+import { $components } from '../../../../../redux/store/component/store.ts';
+import { renderComponent } from '../../../../../utils/render-util';
+
+
+@customElement("link-block")
+export class DropdownBlock extends BaseElementBlock {
+    @property({ type: Object })
+    component: ComponentElement;
+
+    @state() childrenComponents: ComponentElement[] = [];
+
+
+    constructor() {
+        super();
+
+    }
+
+    override async connectedCallback() {
+        await super.connectedCallback();
+    }
+
+    private updateChildrenComponents(): void {
+        this.childrenComponents = this.component?.childrenIds
+            ?.map((id) => {
+                return $components.get()[this.component?.application_id]?.find(
+                    (component) => component.uuid === id
+                );
+            })
+            .filter(Boolean) ?? [];
+    }
+
+    override updated(changedProperties: Map<string, any>) {
+        if (changedProperties.has("component")) {
+            this.updateChildrenComponents();
+        }
+    }
+
+
+    override  renderComponent() {
+
+        return html`
+      <a  
+     
+            ${ref(this.inputRef)}
+            style=${styleMap({
+            ...this.getStyles(),
+        })} 
+        
+          @click=${(e: CustomEvent) => {
+                this.executeEvent("onClick", e)
+            }}
+            >
+       <span>
+        ${this.childrenComponents.length
+                ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode)
+                : html`
+                     <nr-label
+                style=${styleMap({
+                    "--resolved-text-label-color": this.getStyles()["title-color"],
+                })}
+                >${this.inputHandlersValue?.label ?? this.inputHandlersValue?.placeholder ?? nothing}</nr-label>
+                  
+                <drag-wrapper
+                        .where=${"inside"}
+                        .message=${"Drop inside"}
+                        .component=${{ ...this.component }}
+                        .inputRef=${this.inputRef}
+                        .isDragInitiator=${this.isDragInitiator}
+                      >
+                      </drag-wrapper>
+              
+                  `}
+       </span>
+      </a>
+    `;
+    }
+}

package/components/ui/components/navigation/Menu/Menu.ts

@@ -0,0 +1,92 @@
+import type { ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "@nuralyui/menu";
+import { BaseElementBlock } from "../../base/BaseElement.ts";
+import { executeHandler } from '../../../../../state/runtime-context.ts';
+import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
+import { styleMap } from "lit/directives/style-map.js";
+import { EMPTY_STRING } from '../../../../../utils/constants.ts';
+import { ref } from "lit/directives/ref.js";
+
+@customElement("menu-block")
+export class MenuBlock extends BaseElementBlock {
+
+  static override styles = [
+    css`
+        nr-menu {
+            --nuraly-menu-width: 100%;
+
+        }
+        :host {
+            display: block;
+        }
+        .error {
+            color: red;
+            background-color: black;
+            font-size: smaller;
+        }
+    `
+  ];
+  @property({ type: Object, reflect: false })
+  component: ComponentElement;
+  @state()
+  error: string = EMPTY_STRING;
+  @state()
+  options = [
+    {
+      text: "Pages",
+      id: "pages",
+      children: []
+    }
+  ];
+  @state()
+  components: ComponentElement[] = [];
+
+  constructor() {
+    super();
+  }
+
+  onActionClick(e) {
+    console.log(e)
+    if (this.component?.event?.actionClick) {
+      executeHandler(this.component, getNestedAttribute(this.component, `event.actionClick`), {
+        value : e.detail.additionalData,
+        action : e.detail.value
+      })
+    }
+
+  }
+
+
+  override renderComponent() {
+    return html`
+      
+        <nr-menu
+                    ${ref(this.inputRef)}
+
+          style=${styleMap({ ...this.getStyles(), 
+            display : 'block',
+           })}
+          placeholder="Select an option"
+          size=${this.inputHandlersValue?.size ?? 'medium'}
+          arrowPosition=${this.inputHandlersValue?.arrowPosition ?? 'right'}
+          .items=${this.inputHandlersValue?.options ?? []}
+          @action-click=${this.onActionClick}
+          @change="${(customEvent: CustomEvent) => {
+      const selectedOptionPath = customEvent.detail.path;
+      const selectedPage = this.inputHandlersValue.options[selectedOptionPath[0]]?.id;
+      const option = selectedOptionPath.reduce((acc: {
+        children: { [x: string]: any; };
+      }, curr: string | number) => acc && acc.children && acc.children[curr], { children: this.inputHandlersValue?.options });
+      executeHandler(this.component, getNestedAttribute(this.component, `event.onSelect`), {
+        id: option.id,
+        text: option.text,
+        type: option.type,
+        page: selectedPage
+      });
+    }}">
+        </nr-menu>
+    `;
+  }
+}