Fix preview editor

Author: ViktorKukurba

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dynamic-components",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "description": "NGX Dynamic Components is a configuration based dynamic components library for Angular. That allows you to rapidly create dynamic forms or any other mobile-friendly web layouts.",
   "author": "FalconSoft Ltd",
   "repository": {
@@ -28,16 +28,16 @@
     "fix": "ng serve --configuration=fix"
   },
   "dependencies": {
-    "@angular/animations": "^15.1.0",
+    "@angular/animations": "^15.1.1",
     "@angular/cdk": "^15.1.0",
-    "@angular/common": "^15.1.0",
-    "@angular/compiler": "^15.1.0",
-    "@angular/core": "^15.1.0",
-    "@angular/forms": "^15.1.0",
+    "@angular/common": "^15.1.1",
+    "@angular/compiler": "^15.1.1",
+    "@angular/core": "^15.1.1",
+    "@angular/forms": "^15.1.1",
     "@angular/material": "^15.1.0",
-    "@angular/platform-browser": "^15.1.0",
-    "@angular/platform-browser-dynamic": "^15.1.0",
-    "@angular/router": "^15.1.0",
+    "@angular/platform-browser": "^15.1.1",
+    "@angular/platform-browser-dynamic": "^15.1.1",
+    "@angular/router": "^15.1.1",
     "@ng-select/ng-select": "^10.0.3",
     "ace-builds": "^1.14.0",
     "angular-resizable-element": "^7.0.2",
@@ -46,24 +46,24 @@
     "core-js": "^3.19.3",
     "font-awesome": "^4.7.0",
     "isomorphic-xml2js": "0.1.3",
-    "json-formatter-js": "^2.3.3",
+    "json-formatter-js": "^2.3.4",
     "jspython-interpreter": "^2.1.12",
     "ngx-bootstrap": "^10.2.0",
-    "ngx-markdown": "^15.0.0",
+    "ngx-markdown": "^15.1.0",
     "rxjs": "^7.6.0",
     "tslib": "^2.4.1",
     "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~15.1.0",
+    "@angular-devkit/build-angular": "~15.1.2",
     "@angular-eslint/builder": "^15.1.0",
     "@angular-eslint/eslint-plugin": "^15.1.0",
     "@angular-eslint/eslint-plugin-template": "^15.1.0",
     "@angular-eslint/schematics": "15.1.0",
     "@angular-eslint/template-parser": "^15.1.0",
-    "@angular/cli": "^15.1.0",
-    "@angular/compiler-cli": "^15.1.0",
-    "@angular/language-service": "^15.1.0",
+    "@angular/cli": "^15.1.2",
+    "@angular/compiler-cli": "^15.1.1",
+    "@angular/language-service": "^15.1.1",
     "@types/eslint": "^8.2.1",
     "@types/estree": "^0.0.50",
     "@types/jasmine": "~3.7.7",

projects/bootstrap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-dynamic-components/bootstrap",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "private": false,
   "description": "@ngx-dynamic-components/bootstrap is Angular 7+ library what contains a bootstrap interfaces to build a configuration driven web pages and workflows.",
   "author": "FalconSoft Ltd <[email protected]>",

projects/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-dynamic-components/core",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "private": false,
   "description": "@ngx-dynamic-components/core is Angular 7+ library what contains a core interfaces to build a configuration driven web pages and workflows.",
   "author": "FalconSoft Ltd <[email protected]>",

projects/core/src/lib/components/base-ui-component.ts

@@ -18,7 +18,7 @@ export class BaseUIComponent<T = StyleProperties> extends BaseDynamicComponent<T
     @HostBinding('style.max-height') maxHeight?: string;
     @HostBinding('style.padding') padding?: string;
     @HostBinding('style.margin') margin?: string;
-    @HostBinding('style.display') display? = 'initial';
+    @HostBinding('style.display') display?: string;
     @HostBinding('style.border-left') borderLeft?: string;
     @HostBinding('style.border-top') borderTop?: string;
     @HostBinding('style.border-right') borderRight?: string;

projects/core/src/lib/ui-components/input/input.component.ts

@@ -123,7 +123,7 @@ export class InputComponent extends FormElementComponent<InputProperties> implem
     } else if (this.properties.type === 'radio') {
       if (input.checked) {
         this.componentDataModel = input.value;
-        this.emitEvent(prop, input.value);
+        this.emitEvent(prop, this.properties.value);
       }
     } else {
       this.componentDataModel = input.value;
@@ -179,6 +179,13 @@ export class InputProperties extends FormElementProperties {
     type: PropTypes.EVENT
   })
   debouncedInput?: string;
+
+  @propDescription({
+    description: 'Input initial value.',
+    example: 'option-1',
+    type: PropTypes.PROPERTY
+  })
+  value?: string;
 }
 
 type InputComponentConstrutor = new () => InputComponent;
@@ -197,7 +204,8 @@ export const inputDescriptor: ComponentDescriptor<InputComponentConstrutor, Inpu
   parseUIModel(xmlRes: XMLResult): UIModel {
     const itemProperties: AttributesMap = {
       readonly: xmlRes.attrs.readonly === 'true',
-      list: xmlRes.attrs.list?.split(',').map(o => o.trim())
+      list: xmlRes.attrs.list?.split(',').map(o => o.trim()),
+      ...xmlRes.attrs
     };
 
     return {

projects/core/src/lib/ui-components/input/input.examples.ts

@@ -5,7 +5,7 @@ export const example1: ComponentExample<UIModel<InputProperties>> = {
   title: 'Text input example',
   uiModel: `
   <div class="d-flex flex-column">
-    
+
     <div class="form-group">
       <label class="col-form-label" width="80px">Name</label>
       <input onInput="onNameInput(name)" placeholder="Enter your name" binding="$.name"/>
@@ -18,12 +18,12 @@ export const example1: ComponentExample<UIModel<InputProperties>> = {
 
     <div class="form-group">
       <label class="col-form-label" width="80px">Debounced Input</label>
-      <input 
-        placeholder="Enter text here" 
+      <input
+        placeholder="Enter text here"
         binding="$.text"
-        debouncedInput="onDebouncedInput(searchText)" 
+        debouncedInput="onDebouncedInput(searchText)"
         debounceTime="2000"
-        />      
+        />
       <text binding="$.debouncedText" class="ml-2"></text>
     </div>
 
@@ -59,22 +59,27 @@ export const example2: ComponentExample<UIModel<InputProperties>> = {
 export const example3: ComponentExample<UIModel<InputProperties>> = {
   title: 'Radio group example',
   uiModel: `
-  <div>
+  <div class="d-flex flex-column">
     <div class="form-group form-check mt-5">
-      <input id="opt1" type="radio" class="form-check-input" name="option" value="option-1" binding="$.option"/>
+      <input id="opt1" type="radio" class="form-check-input" name="option" onChange="onSelect(val)" value="option-1"/>
       <label for="opt1" class="form-check-label" width="80px">Option 1</label>
     </div>
     <div class="form-group form-check">
-      <input id="opt2" type="radio" class="form-check-input" name="option" value="option-2" binding="$.option"/>
+      <input id="opt2" type="radio" class="form-check-input" name="option" onChange="onSelect(val)" value="option-2"/>
       <label for="opt2" class="form-check-label" width="80px">Option 2</label>
     </div>
     <div class="form-group form-check">
-      <input id="opt3" type="radio" class="form-check-input" name="option" value="option-3" binding="$.option"/>
+      <input id="opt3" type="radio" class="form-check-input" name="option" onChange="onSelect(val)" value="option-3"/>
       <label for="opt3" class="form-check-label" width="80px">Option 3</label>
     </div>
   </div>
   `,
   dataModel: {},
+  scripts: `
+  def onSelect():
+    print(val)
+    dataModel.selected = val
+  `,
   description: 'You can choose one of 3 options.'
 };
 

projects/core/src/lib/ui-components/register.ts

@@ -4,7 +4,6 @@ import { textDescriptor } from './text/text.component';
 import { buttonDescriptor } from './button/button.component';
 import { inputDescriptor } from './input/input.component';
 import { iconDescriptor } from './icon/icon.component';
-import { radioGroupDescriptor } from './radio-group/radio-group.component';
 import { textareaDescriptor } from './textarea/textarea.component';
 import { containerDescriptor, divDescriptor } from './container/container.component';
 import { linkDescriptor } from './link/link.component';
@@ -27,7 +26,6 @@ export const COMPONENTS_LIST: ComponentDescriptor[] = [
   labelDescriptor,
   iconDescriptor,
   inputDescriptor,
-  radioGroupDescriptor,
   textareaDescriptor,
   buttonDescriptor,
   linkDescriptor,

projects/tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-dynamic-components/tools",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "private": false,
   "description": "@ngx-dynamic-components/tools is Angular 7+ library what contains a core interfaces to build a configuration driven web pages.",
   "author": "FalconSoft Ltd <[email protected]>",

projects/tools/src/lib/components/preview-editor/preview-editor.component.ts

@@ -18,7 +18,7 @@ import type {
   NGXDynamicComponent,
   UIModel,
 } from '@ngx-dynamic-components/core';
-import { map } from 'rxjs/operators';
+import { debounceTime, map } from 'rxjs/operators';
 import { Observable, fromEvent, asyncScheduler } from 'rxjs';
 import { Ace, edit } from 'ace-builds';
 import { jsPython, Interpreter } from 'jspython-interpreter';
@@ -77,6 +77,9 @@ export class PreviewEditorComponent implements OnInit, AfterViewInit {
 
     if (this.interpreter.hasFunction(this.scripts, eventHandler)) {
       try {
+        if (parameters) {
+          parameters[parameters.argsKey] = parameters.argsValue;
+        }
         const res = await this.interpreter.evaluate(
           this.scripts,
           {
@@ -162,7 +165,10 @@ export class PreviewEditorComponent implements OnInit, AfterViewInit {
         this.uiModelEl,
         this.initUiModel,
         'ace/mode/xml'
+      ).pipe(
+        debounceTime(500)
       ).subscribe((uiModel) => {
+        this.dynamicComponent.containerRef.clear();
         this.setJSONEditor(uiModel);
         this.refreshPreview(uiModel, this.dataModel);
       });