@ng-formworks/core 16.6.2 → 16.6.3

package/fesm2022/ng-formworks-core.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, ViewContainerRef, Component, Input, ViewChild, Directive, ChangeDetectionStrategy, NgModule, Inject, forwardRef, EventEmitter, Output } from '@angular/core';
+import { Injectable, ViewContainerRef, Component, Input, ViewChild, Directive, ChangeDetectionStrategy, Inject, inject, NgModule, forwardRef, EventEmitter, Output } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { UntypedFormControl, UntypedFormArray, UntypedFormGroup, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import addFormats from 'ajv-formats';
@@ -4586,8 +4586,32 @@ function fixRequiredArrayProperties(schema) {
  * @param schema:any
  * @param negate:boolean=false
  * @returns
-
  */
+//TODO also handle ifs with mixed conditional such as allOf/oneOf etc
+/*
+
+  "if": {
+   "allOf": [
+     {
+       "properties": {
+         "animalType": {
+           "enum": ["Cat", "Fish"]
+         }
+       }
+     },
+     {
+       "properties": {
+         "color": {
+           "const": "orange"
+         }
+       }
+     }
+   ]
+ }
+
+
+
+*/
 function convertJSONSchemaIfToCondition(schema, layoutNode, negate = false) {
     let conditionFun = "";
     let condition = {};
@@ -4612,17 +4636,26 @@ function convertJSONSchemaIfToCondition(schema, layoutNode, negate = false) {
         .join("")
         : "";
     let modelPath = parentPath ? `model.${parentPath}` : "model";
-    let checkPath = modelPath.split(".")
-        .reduce((accumulator, currentPart, index) => {
-        const currentExpression = index === 0 ? currentPart : `${accumulator}.${currentPart}`;
-        return index === 0 ? currentExpression : `${accumulator} && ${currentExpression}`;
-    }, '');
+    let checkPath = modelPath.split('.')
+        .map((_, index, array) => {
+        return array.slice(0, index + 1).join('.'); // Build each part of the path dynamically
+    }).join(' && '); // Join the parts with '&&'
+    //  .reduce((accumulator, currentPart, index) => {
+    //   const currentExpression = index === 0 ? currentPart : `${accumulator}.${currentPart}`;
+    //   return index === 0 ? currentExpression : `${accumulator} && ${currentExpression}`;
+    // }, '');
     if (schema.if) {
         Object.keys(schema.if.properties).forEach((ifProp, ind) => {
             let amper = ind > 0 ? "&" : "";
             //Note the model value is first converted to string and so is the condition
             //so that booleans and numbers can also be compared 
-            conditionFun += `${amper} ${checkPath} && ${modelPath}.${ifProp}+""=='${schema.if.properties[ifProp].const}'`;
+            //changed to an includesList to handle cases such as 
+            const includesList = hasOwn(schema.if.properties[ifProp], "const") ? [schema.if.properties[ifProp].const]
+                : hasOwn(schema.if.properties[ifProp], "enum") ? schema.if.properties[ifProp].enum
+                    : [];
+            const includesListAsStr = includesList.map(val => { return `"${val}"`; });
+            conditionFun += `${amper} ${checkPath} && [${includesListAsStr}].includes(${modelPath}.${ifProp}+"")`;
+            //conditionFun+=`${amper} ${checkPath} && ${modelPath}.${ifProp}+""=='${schema.if.properties[ifProp].const}'`
         });
     }
     condition["functionBody"] = `return ${notOp}(${conditionFun})`;
@@ -5052,7 +5085,7 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                     ["then", "else"].forEach(con => {
                         if (hasOwn(schema, con)) {
                             const keySchemaPointer = `/${con}`;
-                            let thenFGTemplate = buildFormGroupTemplate(jsf, nodeValue, false, //JsonPointer.get(nodeValue, keySchemaPointer), setValues,
+                            let thenFGTemplate = buildFormGroupTemplate(jsf, nodeValue, setValues, //false,//JsonPointer.get(nodeValue, keySchemaPointer), setValues,
                             schemaPointer + keySchemaPointer, dataPointer, templatePointer + `/controls/${con}`);
                             Object.assign(controls, thenFGTemplate.controls);
                         }
@@ -5113,7 +5146,8 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                             if (foundKeys && foundKeys.length > 0) {
                                 const keySchemaPointer = `/${ofType}/${ind}`;
                                 //console.log(`found:${keySchemaPointer}`);
-                                let newNodeValue = JsonPointer.get(nodeValue, dataPointer);
+                                let newNodeValue = nodeValue;
+                                //JsonPointer.get(nodeValue, dataPointer);
                                 //JsonPointer.get(nodeValue, keySchemaPointer);
                                 if (ofType == "oneOf") {
                                     newNodeValue = nodeValue;
@@ -5144,9 +5178,16 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                                         let oneOfItemSchema = JsonPointer.get(jsf.schema, controlItem.schemaPointer);
                                         //JsonPointer.get(schema,pointerPath);
                                         let dPointer = controlItem.schemaPointer.replace(/(anyOf|allOf|oneOf|none)\/[\d]+\//g, '')
-                                            .replace(/(if|then|else|properties)\//g, '');
+                                            .replace(/(if|then|else|properties)\//g, '').replace(/\/items\//g, '/-/');
+                                        dPointer = dPointer.indexOf(dataPointer) == 0
+                                            ? dPointer.substring(dataPointer.length) : dPointer;
+                                        //dataPointer+"/"+controlItem.schemaPointer.split("/").slice(-1)[0];
+                                        ////controlItem.schemaPointer.replace(/(anyOf|allOf|oneOf|none)\/[\d]+\//g, '')
+                                        ////.replace(/(if|then|else|properties)\//g, '').replace(/\/items\//g,'/-/');
                                         //JsonPointer.toDataPointer(controlItem.schemaPointer,jsf.schema);
-                                        let dVal = JsonPointer.get(nodeValue, dPointer);
+                                        //console.log(`dataPointer:${dataPointer}\ndPointer:${dPointer}`)
+                                        let dVal = //JsonPointer.get(jsf.formValues,dPointer);
+                                         JsonPointer.get(nodeValue, dPointer);
                                         let fkey = key;
                                         let oneOfItemValue = dVal;
                                         /*
@@ -5289,43 +5330,22 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                 ["then", "else"].forEach(con => {
                     if (hasOwn(schema, con)) {
                         const keySchemaPointer = `/${con}`;
-                        let thenTFGTemplate = buildFormGroupTemplate(jsf, nodeValue, false, schemaPointer + keySchemaPointer, dataPointer, templatePointer + `/controls/${con}`);
+                        let thenTFGTemplate = buildFormGroupTemplate(jsf, nodeValue, setValues, //false,
+                        schemaPointer + keySchemaPointer, dataPointer, templatePointer + `/controls/${con}`);
                         //NB same property can be in both then and else
                         //so key must be the unique path to control
                         //let ifItemSchema=JsonPointer.get(schema,keySchemaPointer);
                         //let ifItemValue;
-                        Object.keys(thenTFGTemplate.controls).forEach(key => {
-                            let controlKey = thenTFGTemplate.controls[key].schemaPointer;
-                            ////let controlItem=cloneDeep(thenTFGTemplate.controls[key]);
-                            ////thenTFGTemplate.controls[key].schemaPointer || `${schemaPointer}${keySchemaPointer}/${key}`;
-                            controlKey = path2ControlKey(controlKey);
-                            let cItem = Object.assign({}, thenTFGTemplate.controls[key]);
-                            ////cItem.schemaPointer = `${schemaPointer}${keySchemaPointer}/${key}`;
-                            /*
-                           if(ifItemSchema.properties && jsf.formValues===undefined){
-                             //check if no form data values were supplied
-                             //then set it to default otherwise to its nodevalue
-                             ifItemValue=ifItemSchema.default
-                             ifItemValue[key]=ifItemSchema.properties[key]?.default;
-                           }
-                           if(ifItemSchema.properties && jsf.formValues!=undefined){
-                             ifItemValue ={};
-                             //nodeValue||{};
-                             ifItemValue[key]=nodeValue&&nodeValue[key];
-                           }
-                           if(!ifItemSchema.properties && jsf.formValues==undefined){
-                             ifItemValue=ifItemSchema.default;
-                           }
-                           if(hasOwn(cItem,"value")){
-                             if(!jsf.ajv.validate(ifItemSchema,ifItemValue)){
-                               cItem.value.value=null;
-                             }else{
-                               cItem.value.value=ifItemValue[key];
-                             }
-                           }
-                           */
-                            controls[controlKey] = cItem;
-                        });
+                        if (hasOwn(thenTFGTemplate, 'controls')) {
+                            Object.keys(thenTFGTemplate.controls).forEach(key => {
+                                let controlKey = thenTFGTemplate.controls[key].schemaPointer;
+                                if (controlKey) {
+                                    controlKey = path2ControlKey(controlKey);
+                                    let cItem = Object.assign({}, thenTFGTemplate.controls[key]);
+                                    controls[controlKey] = cItem;
+                                }
+                            });
+                        }
                     }
                 });
             }
@@ -5562,7 +5582,8 @@ function getControl(formGroup, dataPointer, returnGroup = false, schemaPointer)
             // If dataPointer input is not a valid JSON pointer, check to
             // see if it is instead a valid object path, using dot notaion
             if (typeof dataPointer === 'string') {
-                const formControl = formGroup.get(path2ControlKey(schemaPointer || "")) || formGroup.get(dataPointer);
+                const controlPath = !!schemaPointer ? path2ControlKey(schemaPointer) : dataPointer;
+                const formControl = formGroup.get(controlPath);
                 if (formControl) {
                     return formControl;
                 }
@@ -5582,7 +5603,8 @@ function getControl(formGroup, dataPointer, returnGroup = false, schemaPointer)
     // try using formGroup.get() to return the control
     if (typeof formGroup.get === 'function' &&
         dataPointerArray.every(key => key.indexOf('.') === -1)) {
-        const formControl = formGroup.get(path2ControlKey(schemaPointer || "")) || formGroup.get(dataPointerArray.join('.'));
+        const controlPath = !!schemaPointer ? path2ControlKey(schemaPointer) : dataPointerArray.join('.');
+        const formControl = formGroup.get(controlPath);
         if (formControl) {
             return formControl;
         }
@@ -5595,15 +5617,16 @@ function getControl(formGroup, dataPointer, returnGroup = false, schemaPointer)
         if (hasOwn(subGroup, 'controls')) {
             subGroup = subGroup.controls;
         }
-        if (isArray(subGroup) && (key === '-')) {
+        if (schemaPointer && hasOwn(subGroup, path2ControlKey(schemaPointer))) {
+            subGroup = subGroup[path2ControlKey(schemaPointer)];
+            return subGroup;
+        }
+        else if (isArray(subGroup) && (key === '-')) {
             subGroup = subGroup[subGroup.length - 1];
         }
         else if (hasOwn(subGroup, key)) {
             subGroup = subGroup[key];
         }
-        else if (schemaPointer && hasOwn(subGroup, path2ControlKey(schemaPointer))) {
-            subGroup = subGroup[path2ControlKey(schemaPointer)];
-        }
         else {
             console.error(`getControl error: Unable to find "${key}" item in FormGroup.`);
             console.error(dataPointer);
@@ -6477,7 +6500,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                     if (hasOwn(schema, con)) {
                         const keySchemaPointer = `/${con}`;
                         const negateClause = con == "else";
-                        const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, nodeValue.then, schemaPointer + keySchemaPointer, dataPointer, false, null, null, forRefLibrary, dataPointerPrefix);
+                        const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, nodeValue[con], schemaPointer + keySchemaPointer, dataPointer, false, null, null, forRefLibrary, dataPointerPrefix);
                         if (innerItem) {
                             applyITEConditions(innerItem, schemaPointer, keySchemaPointer, negateClause);
                             if (isArray(innerItem)) {
@@ -6704,7 +6727,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
             if (hasOwn(schema, con)) {
                 const keySchemaPointer = `/${con}`;
                 const negateClause = con == "else";
-                const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, nodeValue.then, schemaPointer + keySchemaPointer, dataPointer, false, null, null, forRefLibrary, dataPointerPrefix);
+                const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, nodeValue[con], schemaPointer + keySchemaPointer, dataPointer, false, null, null, forRefLibrary, dataPointerPrefix);
                 if (innerItem) {
                     applyITEConditions(innerItem, schemaPointer, keySchemaPointer, negateClause);
                     if (isArray(innerItem)) {
@@ -6712,17 +6735,19 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                             //item.schemaPointer = schemaPointer + keySchemaPointer + item.dataPointer;
                             //item.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
                             newSection.push(item);
-                            newNode = newSection;
+                            /////// newNode = newSection
                         });
                     }
                     else {
                         //innerItem.schemaPointer = schemaPointer + keySchemaPointer + innerItem.dataPointer;
                         //innerItem.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
-                        newNode = innerItem;
+                        ///////newNode = innerItem
+                        newSection.push(innerItem);
                     }
                 }
             }
         });
+        newNode = newSection;
     }
     return newNode;
 }
@@ -8926,7 +8951,7 @@ class OneOfComponent {
                             let controlSchema = JsonPointer.get(this.jsf.schema, parts.join("/"));
                             let schemaPointer = parts.join("/");
                             let dPointer = schemaPointer.replace(/(anyOf|allOf|oneOf|none)\/[\d]+\//g, '')
-                                .replace(/(if|then|else|properties)\//g, '');
+                                .replace(/(if|then|else|properties)\//g, '').replace(/\/items\//g, '/-/');
                             //JsonPointer.toDataPointer(parts.join("/"),this.jsf.schema);
                             let dVal = JsonPointer.get(this.jsf.formValues, dPointer);
                             let compareVal = dVal; //formValue;
@@ -9304,6 +9329,7 @@ class RootComponent {
     }
     sortableInit(sortable) {
         this.sortableObj = sortable;
+        //Sortable.utils.on(this.sortableObj.el,"nulling",(s)=>{console.log("event nulling sortablejs")})
         ///NB issue caused by sortablejs when it its destroyed
         //this mainly affects checkboxes coupled with conditions
         //-the value is rechecked
@@ -9986,43 +10012,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class TabComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-    }
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, selector: "tab-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
-    <div [class]="options?.htmlClass || ''">
-      <root-widget
-        [dataIndex]="dataIndex"
-        [layoutIndex]="layoutIndex"
-        [layout]="layoutNode.items"></root-widget>
-    </div>`, isInline: true, dependencies: [{ kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'tab-widget',
-                    template: `
-    <div [class]="options?.htmlClass || ''">
-      <root-widget
-        [dataIndex]="dataIndex"
-        [layoutIndex]="layoutIndex"
-        [layout]="layoutNode.items"></root-widget>
-    </div>`,
-                }]
-        }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
 class TemplateComponent {
     constructor(jsf) {
         this.jsf = jsf;
@@ -10256,6 +10245,7 @@ class WidgetLibraryService {
             'wizard': 'section',
             // Widgets included for compatibility with other libraries
             'textline': 'text',
+            'selectcheckbox': SelectCheckboxComponent,
             // Recommended 3rd-party add-on widgets (TODO: create wrappers for these...)
             // 'ng2-select': Select control replacement - http://valor-software.com/ng2-select/
             // 'flatpickr': Flatpickr date picker - https://github.com/chmln/flatpickr
@@ -10372,73 +10362,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-const BASIC_WIDGETS = [
-    AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
-    CheckboxesComponent, FileComponent, HiddenComponent, InputComponent,
-    MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
-    RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
-    SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
-    TemplateComponent, TextareaComponent
-];
-
-class WidgetLibraryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, declarations: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, OrderableDirective, ElementAttributeDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, i3$1.SortablejsModule], exports: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, OrderableDirective, ElementAttributeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
-            SortablejsModule.forRoot({
-                //disabled:false,
-                //draggable:".draggableitem",//">:not(.nonsort)",//">.draggable-item",//":not(.nonsort)",//">*",//":not(.nonsort)",//":not(.non-draggable)",
-                filter: ".sortable-filter",
-                preventOnFilter: false,
-                onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
-                    if (evt.related.classList.contains("sortable-fixed")) {
-                        //console.log(evt.related);
-                        return false;
-                    }
-                }
-            })] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule,
-                        SortablejsModule.forRoot({
-                            //disabled:false,
-                            //draggable:".draggableitem",//">:not(.nonsort)",//">.draggable-item",//":not(.nonsort)",//">*",//":not(.nonsort)",//":not(.non-draggable)",
-                            filter: ".sortable-filter",
-                            preventOnFilter: false,
-                            onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
-                                if (evt.related.classList.contains("sortable-fixed")) {
-                                    //console.log(evt.related);
-                                    return false;
-                                }
-                            }
-                        })],
-                    declarations: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective],
-                    exports: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective]
-                }]
-        }] });
-
-// No framework - plain HTML controls (styles from form layout only)
-class NoFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, providers: [
-            { provide: Framework, useClass: NoFramework, multi: true }
-        ], imports: [CommonModule, WidgetLibraryModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, WidgetLibraryModule],
-                    declarations: [NoFrameworkComponent],
-                    exports: [NoFrameworkComponent],
-                    providers: [
-                        { provide: Framework, useClass: NoFramework, multi: true }
-                    ]
-                }]
-        }] });
-
 // Possible future frameworks:
 // - Foundation 6:
 //   http://justindavis.co/2017/06/15/using-foundation-6-in-angular-4/
@@ -10606,6 +10529,289 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     args: [WidgetLibraryService]
                 }] }, { type: i1.HttpClient }]; } });
 
+//component created as a fallback for the checkbox/sortabljs issue
+//its meant to display a select as a checkbox
+class SelectCheckboxComponent {
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.jsfFLService = inject(FrameworkLibraryService);
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.selectList = [];
+        this.selectListFlatGroup = [];
+        this.isArray = isArray;
+        this.frameworkStyles = {
+            daisyui: { selectClass: "select-box", optionClass: "checkbox tw:dui-checkbox", optionChecked: "active", optionUnchecked: "" },
+            "bootstrap-3": { selectClass: "select-box", optionClass: "bs3-option checkbox display-inline-block", optionChecked: "active", optionUnchecked: "" },
+            "bootstrap-4": { selectClass: "select-box", optionClass: "bs4-option checkbox display-inline-block", optionChecked: "active", optionUnchecked: "" },
+            "bootstrap-5": { selectClass: " select-box", optionClass: "form-check-input display-inline-block", optionChecked: "active", optionUnchecked: "" },
+            //"material-design":{selectClass:" ",optionClass:" "}
+        };
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.activeFramework = this.jsfFLService.activeFramework.name;
+        this.selectList = buildTitleMap(
+        //this.options.titleMap || this.options.enumNames,
+        //TODO review-title is set to null in the setTitle() method of CssFrameworkComponent
+        this.options.enumNames || (this.options?.title && [this.options?.title])
+            || [this.layoutNode.name], 
+        //this.options.enum, 
+        [true], 
+        //make required true to avoid creating 'none' select option
+        true, !!this.options.flatList);
+        //the selectListFlatGroup array will be used to update the formArray values
+        //while the selectList array will be bound to the form select
+        //as either a grouped select or a flat select
+        /*
+        this.selectListFlatGroup = buildTitleMap(
+          this.options.titleMap || this.options.enumNames,
+          this.options.enum, !!this.options.required, true
+        )
+        */
+        this.jsf.initializeControl(this);
+        this.selectValue = [this.controlValue];
+    }
+    deselectAll() {
+        this.selectListFlatGroup.forEach(selItem => {
+            selItem.checked = false;
+        });
+    }
+    updateValue(event) {
+        this.options.showErrors = true;
+        this.controlValue = this.selectValue[0];
+        this.jsf.updateValue(this, this.controlValue);
+    }
+    onSelectClicked($event) {
+        this.selectValue = this.selectValue && this.selectValue[0] ? [false] : [true];
+        this.controlValue = this.selectValue[0];
+        this.jsf.updateValue(this, this.controlValue);
+    }
+    ngOnDestroy() {
+        let nullVal = this.options.multiple ? [null] : null;
+        this.formControl.reset(nullVal);
+        this.controlValue = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectCheckboxComponent, selector: "selectcheckbox-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <div 
+      [class]="options?.htmlClass || ''">
+      <select *ngIf="boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]=" frameworkStyles[activeFramework].selectClass"
+        [multiple]="true"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [ngModel]="selectValue"   
+        >
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [class]="frameworkStyles[activeFramework].optionClass"
+            [class.active]="selectItem?.value === controlValue"
+            [class.unchecked-notusing]="selectItem?.value != controlValue"
+            [value]="selectItem?.value"
+            (click)="onSelectClicked($event)"
+            type="checkbox"
+            >
+          </option>
+          <!--NB the text is out of the option element to display besides the checkbox-->
+          <span [innerHTML]="selectItem?.name"></span>
+        </ng-template>
+      </select>
+      <select *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]="frameworkStyles[activeFramework].selectClass +' select-box'"
+        [multiple]="true"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        (change)="updateValue($event)">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [selected]="selectItem?.value === controlValue"
+            [class]="frameworkStyles[activeFramework].optionClass"
+            [class.checked-notusing]="selectItem?.value === controlValue"
+            [class.unchecked-notusing]]="selectItem?.value != controlValue"
+            [value]="selectItem?.value"
+            type="checkbox">
+          </option>
+          <!--NB the text is out of the option element to display besides the checkbox-->
+          <span [innerHTML]="selectItem?.name"></span>
+        </ng-template>
+      </select>
+      
+    </div>`, isInline: true, styles: [".select-box{font-size:16px;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;height:25px;overflow:hidden;text-overflow:ellipsis;background-color:#fff;color:#000;background-color:transparent}.select-box:focus{outline:none}.select-option{font-size:20px;color:#000;background-color:#fff;display:inline-block}.unchecked:before{content:\"\\2610\";left:5px;top:50%;transform:translateY(-50%);font-size:30px}.checked:before{content:\"\\2611\";left:5px;top:50%;transform:translateY(-50%);font-size:30px}.select-option:checked{background-image:linear-gradient(0deg,#fff 0% 100%);color:#000}.select-box[multiple]:focus{background-color:transparent;color:#00f;-webkit-text-fill-color:black}.display-inline-block{display:inline-block}.bs4-option,.bs3-option{width:14px;height:14px;border:solid 1px;color:#a9a9a9;min-block-size:auto;border-radius:3px}.bs4-option:checked[type=checkbox],.bs3-option:checked[type=checkbox]{background-image:url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20MIT.%20Made%20by%20jaynewey%3A%20https%3A%2F%2Fgithub.com%2Fjaynewey%2Fcharm-icons%20--%3E%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.5%22%3E%3Cpolyline%20points%3D%224%208.75%2C6.25%2012.25%2C13.25%203.5%22%2F%3E%3C%2Fsvg%3E);background-color:#00ced1}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'selectcheckbox-widget', template: `
+    <div 
+      [class]="options?.htmlClass || ''">
+      <select *ngIf="boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]=" frameworkStyles[activeFramework].selectClass"
+        [multiple]="true"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [ngModel]="selectValue"   
+        >
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [class]="frameworkStyles[activeFramework].optionClass"
+            [class.active]="selectItem?.value === controlValue"
+            [class.unchecked-notusing]="selectItem?.value != controlValue"
+            [value]="selectItem?.value"
+            (click)="onSelectClicked($event)"
+            type="checkbox"
+            >
+          </option>
+          <!--NB the text is out of the option element to display besides the checkbox-->
+          <span [innerHTML]="selectItem?.name"></span>
+        </ng-template>
+      </select>
+      <select *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]="frameworkStyles[activeFramework].selectClass +' select-box'"
+        [multiple]="true"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        (change)="updateValue($event)">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [selected]="selectItem?.value === controlValue"
+            [class]="frameworkStyles[activeFramework].optionClass"
+            [class.checked-notusing]="selectItem?.value === controlValue"
+            [class.unchecked-notusing]]="selectItem?.value != controlValue"
+            [value]="selectItem?.value"
+            type="checkbox">
+          </option>
+          <!--NB the text is out of the option element to display besides the checkbox-->
+          <span [innerHTML]="selectItem?.name"></span>
+        </ng-template>
+      </select>
+      
+    </div>`, standalone: false, styles: [".select-box{font-size:16px;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;height:25px;overflow:hidden;text-overflow:ellipsis;background-color:#fff;color:#000;background-color:transparent}.select-box:focus{outline:none}.select-option{font-size:20px;color:#000;background-color:#fff;display:inline-block}.unchecked:before{content:\"\\2610\";left:5px;top:50%;transform:translateY(-50%);font-size:30px}.checked:before{content:\"\\2611\";left:5px;top:50%;transform:translateY(-50%);font-size:30px}.select-option:checked{background-image:linear-gradient(0deg,#fff 0% 100%);color:#000}.select-box[multiple]:focus{background-color:transparent;color:#00f;-webkit-text-fill-color:black}.display-inline-block{display:inline-block}.bs4-option,.bs3-option{width:14px;height:14px;border:solid 1px;color:#a9a9a9;min-block-size:auto;border-radius:3px}.bs4-option:checked[type=checkbox],.bs3-option:checked[type=checkbox]{background-image:url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20MIT.%20Made%20by%20jaynewey%3A%20https%3A%2F%2Fgithub.com%2Fjaynewey%2Fcharm-icons%20--%3E%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.5%22%3E%3Cpolyline%20points%3D%224%208.75%2C6.25%2012.25%2C13.25%203.5%22%2F%3E%3C%2Fsvg%3E);background-color:#00ced1}\n"] }]
+        }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class TabComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, selector: "tab-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <div [class]="options?.htmlClass || ''">
+      <root-widget
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [layout]="layoutNode.items"></root-widget>
+    </div>`, isInline: true, dependencies: [{ kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'tab-widget',
+                    template: `
+    <div [class]="options?.htmlClass || ''">
+      <root-widget
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [layout]="layoutNode.items"></root-widget>
+    </div>`,
+                }]
+        }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+const BASIC_WIDGETS = [
+    AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
+    CheckboxesComponent, FileComponent, HiddenComponent, InputComponent,
+    MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
+    RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
+    SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
+    TemplateComponent, TextareaComponent, SelectCheckboxComponent
+];
+
+class WidgetLibraryModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, declarations: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, SelectCheckboxComponent, OrderableDirective, ElementAttributeDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, i3$1.SortablejsModule], exports: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, SelectCheckboxComponent, OrderableDirective, ElementAttributeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
+            SortablejsModule.forRoot({
+                //disabled:false,
+                //draggable:".draggableitem",//">:not(.nonsort)",//">.draggable-item",//":not(.nonsort)",//">*",//":not(.nonsort)",//":not(.non-draggable)",
+                filter: ".sortable-filter",
+                preventOnFilter: false,
+                onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
+                    if (evt.related.classList.contains("sortable-fixed")) {
+                        //console.log(evt.related);
+                        return false;
+                    }
+                }
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule,
+                        SortablejsModule.forRoot({
+                            //disabled:false,
+                            //draggable:".draggableitem",//">:not(.nonsort)",//">.draggable-item",//":not(.nonsort)",//">*",//":not(.nonsort)",//":not(.non-draggable)",
+                            filter: ".sortable-filter",
+                            preventOnFilter: false,
+                            onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
+                                if (evt.related.classList.contains("sortable-fixed")) {
+                                    //console.log(evt.related);
+                                    return false;
+                                }
+                            }
+                        })],
+                    declarations: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective],
+                    exports: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective]
+                }]
+        }] });
+
+// No framework - plain HTML controls (styles from form layout only)
+class NoFrameworkModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, providers: [
+            { provide: Framework, useClass: NoFramework, multi: true }
+        ], imports: [CommonModule, WidgetLibraryModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, WidgetLibraryModule],
+                    declarations: [NoFrameworkComponent],
+                    exports: [NoFrameworkComponent],
+                    providers: [
+                        { provide: Framework, useClass: NoFramework, multi: true }
+                    ]
+                }]
+        }] });
+
 const JSON_SCHEMA_FORM_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => JsonSchemaFormComponent),
@@ -11398,5 +11604,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddReferenceComponent, BASIC_WIDGETS, ButtonComponent, CheckboxComponent, CheckboxesComponent, ElementAttributeDirective, FileComponent, Framework, FrameworkLibraryService, HiddenComponent, InputComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, WidgetLibraryModule, WidgetLibraryService, _executeAsyncValidators, _executeValidators, _mergeErrors, _mergeObjects, _toPromise, addClasses, buildFormGroup, buildFormGroupTemplate, buildLayout, buildLayoutFromSchema, buildSchemaFromData, buildSchemaFromLayout, buildTitleMap, checkInlineType, combineAllOf, commonItems, convertSchemaToDraft6, copy, deValidationMessages, enValidationMessages, esValidationMessages, fixRequiredArrayProperties, fixTitle, forEach, forEachCopy, formatFormData, frValidationMessages, getControl, getControlValidators, getFromSchema, getInputType, getLayoutNode, getSubSchema, getTitleMapFromOneOf, getType, hasNonNullValue, hasOwn, hasValue, inArray, isArray, isBoolean, isDate, isDefined, isEmpty, isFunction, isInputRequired, isInteger, isMap, isNumber, isObject, isObservable, isPrimitive, isPromise, isSet, isString, isType, itValidationMessages, mapLayout, mergeFilteredObject, mergeSchemas, path2ControlKey, ptValidationMessages, removeRecursiveReferences, resolveSchemaReferences, setControl, setRequiredFields, toJavaScriptType, toObservable, toSchemaType, toTitleCase, uniqueItems, updateInputOptions, xor, zhValidationMessages };
+export { AddReferenceComponent, BASIC_WIDGETS, ButtonComponent, CheckboxComponent, CheckboxesComponent, ElementAttributeDirective, FileComponent, Framework, FrameworkLibraryService, HiddenComponent, InputComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, SelectCheckboxComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, WidgetLibraryModule, WidgetLibraryService, _executeAsyncValidators, _executeValidators, _mergeErrors, _mergeObjects, _toPromise, addClasses, buildFormGroup, buildFormGroupTemplate, buildLayout, buildLayoutFromSchema, buildSchemaFromData, buildSchemaFromLayout, buildTitleMap, checkInlineType, combineAllOf, commonItems, convertSchemaToDraft6, copy, deValidationMessages, enValidationMessages, esValidationMessages, fixRequiredArrayProperties, fixTitle, forEach, forEachCopy, formatFormData, frValidationMessages, getControl, getControlValidators, getFromSchema, getInputType, getLayoutNode, getSubSchema, getTitleMapFromOneOf, getType, hasNonNullValue, hasOwn, hasValue, inArray, isArray, isBoolean, isDate, isDefined, isEmpty, isFunction, isInputRequired, isInteger, isMap, isNumber, isObject, isObservable, isPrimitive, isPromise, isSet, isString, isType, itValidationMessages, mapLayout, mergeFilteredObject, mergeSchemas, path2ControlKey, ptValidationMessages, removeRecursiveReferences, resolveSchemaReferences, setControl, setRequiredFields, toJavaScriptType, toObservable, toSchemaType, toTitleCase, uniqueItems, updateInputOptions, xor, zhValidationMessages };
 //# sourceMappingURL=ng-formworks-core.mjs.map