@ng-formworks/cssframework 16.3.0 → 17.3.0

package/fesm2022/ng-formworks-cssframework.mjs

@@ -7,425 +7,425 @@ import { Subject } from 'rxjs';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
-class CssframeworkService {
-    constructor() {
-        this.frameworkThemeSubject = new Subject();
-        this.frameworkTheme$ = this.frameworkThemeSubject.asObservable();
-    }
-    //TODO-review: this acts as a public api to change the theme
-    //but doesn't do the actual change, instead it relies on 
-    //the CssFramewkCoromponent having subscribed to listen 
-    //and perform the actual theme change
-    requestThemeChange(themeName) {
-        this.frameworkThemeSubject.next(themeName);
-        this.activeRequestedTheme = themeName;
-    }
-    //TODO-review:there's no way of knowing what the individual component instance
-    //has set its theme to, this is just the theme made through the requestThemeChange
-    //calls and not guaranteed to correspond to the actual theme set by the 
-    //component instance themselves
-    getActiveRequestedTheme() {
-        return this.activeRequestedTheme;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssframeworkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssframeworkService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssframeworkService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
+class CssframeworkService {
+    constructor() {
+        this.frameworkThemeSubject = new Subject();
+        this.frameworkTheme$ = this.frameworkThemeSubject.asObservable();
+    }
+    //TODO-review: this acts as a public api to change the theme
+    //but doesn't do the actual change, instead it relies on 
+    //the CssFramewkCoromponent having subscribed to listen 
+    //and perform the actual theme change
+    requestThemeChange(themeName) {
+        this.frameworkThemeSubject.next(themeName);
+        this.activeRequestedTheme = themeName;
+    }
+    //TODO-review:there's no way of knowing what the individual component instance
+    //has set its theme to, this is just the theme made through the requestThemeChange
+    //calls and not guaranteed to correspond to the actual theme set by the 
+    //component instance themselves
+    getActiveRequestedTheme() {
+        return this.activeRequestedTheme;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssframeworkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssframeworkService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssframeworkService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
 
-class CssFrameworkComponent {
-    //TODO-move to ng-formworks/core utility.functions.ts
-    applyCssClasses(type, widgetOptions, styleOptions) {
-        //console.log("applyCssClasses for type:"+type);
-        let cssClasses = this.widgetStyles[type];
-        if (!cssClasses || _.isEmpty(cssClasses)) {
-            cssClasses = this.widgetStyles.default;
-        }
-        Object.keys(cssClasses).forEach(catName => {
-            let classList = cssClasses[catName];
-            if (classList.length) {
-                widgetOptions[catName] = addClasses(widgetOptions[catName], classList);
-            }
-            if (styleOptions) {
-                widgetOptions[catName] = addClasses(widgetOptions[catName], styleOptions);
-            }
-        });
-    }
-    flattenWidgetStyles(wstyles) {
-        var flattened = {};
-        let ignore = ['__themes__'];
-        Object.keys(wstyles).forEach(wkey => {
-            let wstyle = wstyles[wkey];
-            if (ignore.indexOf(wkey) >= 0) {
-                flattened[wkey] = wstyle;
-                return;
-            }
-            if (_.isArray(wstyle)) {
-                flattened[wkey] = wstyle.join(" ");
-            }
-            if (_.isObject(wstyle)) { //is csscategories
-                flattened[wkey] = flattened[wkey] || {};
-                Object.keys(wstyle).forEach(catName => {
-                    let cssCat = wstyle[catName];
-                    if (_.isArray(cssCat)) {
-                        flattened[wkey][catName] = cssCat.join(" ");
-                    }
-                    else {
-                        flattened[wkey][catName] = cssCat;
-                    }
-                });
-            }
-            if (_.isString(wstyle)) {
-                flattened[wkey] = wstyle;
-            }
-        });
-        return flattened;
-    }
-    constructor(changeDetector, jsf, jsfFLService, cssFWService
-    /*@Inject(CSS_FRAMEWORK_CFG ) fwcfg: css_fw.frameworkcfg*/
-    ) {
-        this.changeDetector = changeDetector;
-        this.jsf = jsf;
-        this.jsfFLService = jsfFLService;
-        this.cssFWService = cssFWService;
-        this.frameworkInitialized = false;
-        this.formControl = null;
-        this.debugOutput = '';
-        this.debug = '';
-        this.parentArray = null;
-        this.isOrderable = false;
-        this.defaultStyling = {
-            array: {},
-            default: { fieldHtmlClass: "cssfw-form-control" },
-            __themes__: [{ name: 'notheme', text: 'None' }],
-            __remove_item__: "cssfw-remove-item",
-            __array_item_nonref__: {
-                "htmlClass": "cssfw-array-item-nonref"
-            },
-            __active__: { activeClass: "cssfw-active" },
-            __array__: { htmlClass: "cssfw-array" },
-            __control_label__: { labelHtmlClass: "cssfw-control-label" },
-            __form_group__: { htmlClass: "cssfw-form-group" },
-            __field_addon_left__: "cssfw-addon-left",
-            __field_addon_right__: "cssfw-addon-right",
-            __help_block__: "cssfw-help-block",
-            __required_asterisk__: "cssfw-required-astersisk",
-            __screen_reader__: "cssfw-screen-reader"
-        };
-        let activeFramework = this.jsfFLService.activeFramework;
-        let fwcfg = activeFramework.config || {};
-        this.widgetStyles = Object.assign(this.defaultStyling, fwcfg.widgetstyles);
-        let defaultTheme = this.widgetStyles.__themes__[0];
-        let defaultThemeName = cssFWService.activeRequestedTheme || defaultTheme.name;
-        this.theme = this.options?.theme || defaultThemeName;
-        this.frameworkThemeSubs = cssFWService.frameworkTheme$.subscribe(newTheme => {
-            this.theme = newTheme;
-        });
-    }
-    ngOnDestroy() {
-        this.frameworkThemeSubs.unsubscribe();
-        this.frameworkThemeSubs = null;
-    }
-    get showRemoveButton() {
-        if (!this.options.removable || this.options.readonly ||
-            this.layoutNode.type === '$ref') {
-            return false;
-        }
-        if (this.layoutNode.recursiveReference) {
-            return true;
-        }
-        if (!this.layoutNode.arrayItem || !this.parentArray) {
-            return false;
-        }
-        // If array length <= minItems, don't allow removing any items
-        return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :
-            // For removable list items, allow removing any item
-            this.layoutNode.arrayItemType === 'list' ? true :
-                // For removable tuple items, only allow removing last item in list
-                this.layoutIndex[this.layoutIndex.length - 1] === this.parentArray.items.length - 2;
-    }
-    ngOnInit() {
-        this.initializeFramework();
-        if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
-            this.parentArray = this.jsf.getParentNode(this);
-            if (this.parentArray) {
-                this.isOrderable = this.layoutNode.arrayItemType === 'list' &&
-                    !this.options.readonly && this.parentArray.options.orderable;
-            }
-        }
-    }
-    ngOnChanges() {
-        if (!this.frameworkInitialized) {
-            this.initializeFramework();
-        }
-    }
-    initializeFramework() {
-        if (this.layoutNode) {
-            this.options = cloneDeep(this.layoutNode.options);
-            this.widgetLayoutNode = {
-                ...this.layoutNode,
-                options: cloneDeep(this.layoutNode.options)
-            };
-            this.widgetOptions = this.widgetLayoutNode.options;
-            this.formControl = this.jsf.getFormControl(this);
-            this.options.isInputWidget = inArray(this.layoutNode.type, [
-                'button', 'checkbox', 'checkboxes-inline', 'checkboxes', 'color',
-                'date', 'datetime-local', 'datetime', 'email', 'file', 'hidden',
-                'image', 'integer', 'month', 'number', 'password', 'radio',
-                'radiobuttons', 'radios-inline', 'radios', 'range', 'reset', 'search',
-                'select', 'submit', 'tel', 'text', 'textarea', 'time', 'url', 'week'
-            ]);
-            this.options.title = this.setTitle();
-            this.options.htmlClass =
-                addClasses(this.options.htmlClass, 'schema-form-' + this.layoutNode.type);
-            if (this.layoutNode.type === 'array') {
-                this.options.htmlClass = addClasses(this.options.htmlClass, this.widgetStyles.__array__.htmlClass);
-            }
-            else if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
-                this.options.htmlClass = addClasses(this.options.htmlClass, this.widgetStyles.__array_item_nonref__.htmlClass);
-            }
-            else {
-                this.options.htmlClass = addClasses(this.options.htmlClass, this.widgetStyles.__form_group__.htmlClass);
-            }
-            /*
-            this.options.htmlClass =
-            this.layoutNode.type === 'array' ?
-              addClasses(this.options.htmlClass, ['border','shadow-md','p-1']) :
-              this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?
-                addClasses(this.options.htmlClass, ['border','shadow-md','p-1']) :
-                addClasses(this.options.htmlClass, 'mb-1');
-      */
-            /*
-            this.options.htmlClass =
-            this.layoutNode.type === 'array' ?
-            addClasses(this.options.htmlClass, this.widgetStyles.array.htmlClass):
-              this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?
-              addClasses(this.options.htmlClass, this.widgetStyles.__array_item_nonref__.htmlClass):
-              addClasses(this.options.htmlClass, this.widgetStyles.__form_group__.htmlClass);
-            */
-            this.widgetOptions.htmlClass = '';
-            this.options.labelHtmlClass =
-                addClasses(this.options.labelHtmlClass, this.widgetStyles.__control_label__.labelHtmlClass);
-            this.widgetOptions.activeClass =
-                addClasses(this.widgetOptions.activeClass, this.widgetStyles.__active__.activeClass);
-            this.options.fieldAddonLeft =
-                this.options.fieldAddonLeft || this.options.prepend;
-            this.options.fieldAddonRight =
-                this.options.fieldAddonRight || this.options.append;
-            // Add asterisk to titles if required
-            if (this.options.title && this.layoutNode.type !== 'tab' &&
-                !this.options.notitle && this.options.required &&
-                !this.options.title.includes('*')) {
-                let required_asterisk_class = this.widgetStyles.__required_asterisk__ || 'text-danger';
-                this.options.title += ` <strong class="${required_asterisk_class}">*</strong>`;
-            }
-            if (this.layoutNode.type == 'optionfieldset') {
-                this.options.messageLocation = 'top';
-            }
-            // Set miscelaneous styles and settings for each control type
-            this.applyCssClasses(this.layoutNode.type, this.widgetOptions, this.options.style);
-            if (this.formControl) {
-                this.updateHelpBlock(this.formControl.status);
-                this.formControl.statusChanges.subscribe(status => this.updateHelpBlock(status));
-                if (this.options.debug) {
-                    const vars = [];
-                    this.debugOutput = map(vars, thisVar => JSON.stringify(thisVar, null, 2)).join('\n');
-                }
-            }
-            this.frameworkInitialized = true;
-        }
-    }
-    updateHelpBlock(status) {
-        this.options.helpBlock = status === 'INVALID' &&
-            this.options.enableErrorState && this.formControl.errors &&
-            (this.formControl.dirty || this.options.feedbackOnRender) ?
-            this.jsf.formatErrors(this.formControl.errors, this.options.validationMessages) :
-            this.options.description || this.options.help || null;
-    }
-    setTitle() {
-        switch (this.layoutNode.type) {
-            case 'button':
-            case 'checkbox':
-            case 'section':
-            case 'help':
-            case 'msg':
-            case 'submit':
-            case 'message':
-            case 'tabarray':
-            case 'tabs':
-            case '$ref':
-                return null;
-            case 'advancedfieldset':
-                this.widgetOptions.expandable = true;
-                this.widgetOptions.title = 'Advanced options';
-                return null;
-            case 'authfieldset':
-                this.widgetOptions.expandable = true;
-                this.widgetOptions.title = 'Authentication settings';
-                return null;
-            case 'fieldset':
-                this.widgetOptions.title = this.options.title;
-                return null;
-            default:
-                this.widgetOptions.title = null;
-                return this.jsf.setItemTitle(this);
-        }
-    }
-    removeItem() {
-        this.jsf.removeItem(this);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssFrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }, { token: i1.FrameworkLibraryService }, { token: CssframeworkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CssFrameworkComponent, selector: "css-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex", widgetStyles: "widgetStyles" }, usesOnChanges: true, ngImport: i0, template: "<div [attr.data-bs-theme]=\"theme\" [attr.data-theme]=\"theme\" [class]=\"options?.htmlClass || ''\" [class.has-feedback]=\"options?.feedback && options?.isInputWidget &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\" [class.has-error]=\"options?.enableErrorState && formControl?.errors &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\" [class.has-success]=\"options?.enableSuccessState && !formControl?.errors &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\">\r\n\r\n    <button *ngIf=\"showRemoveButton\" [class]=\"widgetStyles.__remove_item__\" type=\"button\" (click)=\"removeItem()\">\r\n    <span aria-hidden=\"true\">&times;</span>\r\n    <span [class]=\"widgetStyles.__screen_reader__\">Close</span>\r\n  </button>\r\n    <div *ngIf=\"options?.messageLocation === 'top'\">\r\n        <p *ngIf=\"options?.helpBlock\" [class]=\"widgetStyles.__help_block__\" [innerHTML]=\"options?.helpBlock\"></p>\r\n    </div>\r\n\r\n    <label *ngIf=\"options?.title && layoutNode?.type !== 'tab'\" [attr.for]=\"'control' + layoutNode?._id\" [class]=\"options?.labelHtmlClass || ''\" [class.sr-only]=\"options?.notitle\" [innerHTML]=\"options?.title\"></label>\r\n    <p *ngIf=\"layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired\">\r\n        <strong [class]=\"widgetStyles.__required_asterisk__\">*</strong> = required fields\r\n    </p>\r\n    <div [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\">\r\n        <span *ngIf=\"options?.fieldAddonLeft\" [class]=\"widgetStyles.__field_addon_left__\" [innerHTML]=\"options?.fieldAddonLeft\"></span>\r\n\r\n        <select-widget-widget [layoutNode]=\"widgetLayoutNode\" [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\"></select-widget-widget>\r\n\r\n        <span *ngIf=\"options?.fieldAddonRight\" [class]=\"widgetStyles.__field_addon_right__\" [innerHTML]=\"options?.fieldAddonRight\"></span>\r\n    </div>\r\n\r\n    <span *ngIf=\"options?.feedback && options?.isInputWidget &&\r\n          !options?.fieldAddonRight && !layoutNode.arrayItem &&\r\n          (formControl?.dirty || options?.feedbackOnRender)\" [class.glyphicon-ok]=\"options?.enableSuccessState && !formControl?.errors\" [class.glyphicon-remove]=\"options?.enableErrorState && formControl?.errors\" aria-hidden=\"true\" class=\"form-control-feedback glyphicon\"></span>\r\n    <div *ngIf=\"options?.messageLocation !== 'top'\">\r\n        <p *ngIf=\"options?.helpBlock\" [class]=\"widgetStyles.__help_block__\" [innerHTML]=\"options?.helpBlock\"></p>\r\n    </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"debug && debugOutput\">debug:\r\n    <pre>{{debugOutput}}</pre>\r\n</div>\r\n\r\n<!--\r\n<div class=\"btn input input-bordered input-primary w-full max-w-xs\r\nbtn-neutral\r\nbtn-primary\r\nbtn-secondary\r\nbtn-accent\r\nbtn-info\r\nbtn-success\r\nbtn-warning\r\nbtn-error\r\nbtn-ghost\r\nbtn-link\r\nbtn-outline\r\nbtn-active\r\nbtn-disabled\r\nglass\r\nno-animation\r\nbtn-lg\r\nbtn-md\r\nbtn-sm\r\nbtn-xs\r\nbtn-wide\r\nbtn-block\r\nbtn-circle\r\nbtn-square\r\nhidden\r\n\">defs al</div>\r\n-->\r\n<!--<input type=\"text\" placeholder=\"Type here\" class=\"input input-bordered input-primary w-full max-w-xs\" />-->", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .checkbox,:host ::ng-deep .radio{margin-top:0;margin-bottom:0}:host ::ng-deep .checkbox-inline,:host ::ng-deep .checkbox-inline+.checkbox-inline,:host ::ng-deep .checkbox-inline+.radio-inline,:host ::ng-deep .radio-inline,:host ::ng-deep .radio-inline+.radio-inline,:host ::ng-deep .radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}:host ::ng-deep .checkbox-inline:last-child,:host ::ng-deep .radio-inline:last-child{margin-right:0}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}.checkbox-inline,.checkbox-inline+.checkbox-inline,.checkbox-inline+.radio-inline,.radio-inline,.radio-inline+.radio-inline,.radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}.checkbox-inline:last-child,.radio-inline:last-child{margin-right:0}.ng-invalid.ng-touched{border:1px solid #f44336}\n"], dependencies: [{ kind: "component", type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssFrameworkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'css-framework', encapsulation: ViewEncapsulation.None, template: "<div [attr.data-bs-theme]=\"theme\" [attr.data-theme]=\"theme\" [class]=\"options?.htmlClass || ''\" [class.has-feedback]=\"options?.feedback && options?.isInputWidget &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\" [class.has-error]=\"options?.enableErrorState && formControl?.errors &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\" [class.has-success]=\"options?.enableSuccessState && !formControl?.errors &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\">\r\n\r\n    <button *ngIf=\"showRemoveButton\" [class]=\"widgetStyles.__remove_item__\" type=\"button\" (click)=\"removeItem()\">\r\n    <span aria-hidden=\"true\">&times;</span>\r\n    <span [class]=\"widgetStyles.__screen_reader__\">Close</span>\r\n  </button>\r\n    <div *ngIf=\"options?.messageLocation === 'top'\">\r\n        <p *ngIf=\"options?.helpBlock\" [class]=\"widgetStyles.__help_block__\" [innerHTML]=\"options?.helpBlock\"></p>\r\n    </div>\r\n\r\n    <label *ngIf=\"options?.title && layoutNode?.type !== 'tab'\" [attr.for]=\"'control' + layoutNode?._id\" [class]=\"options?.labelHtmlClass || ''\" [class.sr-only]=\"options?.notitle\" [innerHTML]=\"options?.title\"></label>\r\n    <p *ngIf=\"layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired\">\r\n        <strong [class]=\"widgetStyles.__required_asterisk__\">*</strong> = required fields\r\n    </p>\r\n    <div [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\">\r\n        <span *ngIf=\"options?.fieldAddonLeft\" [class]=\"widgetStyles.__field_addon_left__\" [innerHTML]=\"options?.fieldAddonLeft\"></span>\r\n\r\n        <select-widget-widget [layoutNode]=\"widgetLayoutNode\" [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\"></select-widget-widget>\r\n\r\n        <span *ngIf=\"options?.fieldAddonRight\" [class]=\"widgetStyles.__field_addon_right__\" [innerHTML]=\"options?.fieldAddonRight\"></span>\r\n    </div>\r\n\r\n    <span *ngIf=\"options?.feedback && options?.isInputWidget &&\r\n          !options?.fieldAddonRight && !layoutNode.arrayItem &&\r\n          (formControl?.dirty || options?.feedbackOnRender)\" [class.glyphicon-ok]=\"options?.enableSuccessState && !formControl?.errors\" [class.glyphicon-remove]=\"options?.enableErrorState && formControl?.errors\" aria-hidden=\"true\" class=\"form-control-feedback glyphicon\"></span>\r\n    <div *ngIf=\"options?.messageLocation !== 'top'\">\r\n        <p *ngIf=\"options?.helpBlock\" [class]=\"widgetStyles.__help_block__\" [innerHTML]=\"options?.helpBlock\"></p>\r\n    </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"debug && debugOutput\">debug:\r\n    <pre>{{debugOutput}}</pre>\r\n</div>\r\n\r\n<!--\r\n<div class=\"btn input input-bordered input-primary w-full max-w-xs\r\nbtn-neutral\r\nbtn-primary\r\nbtn-secondary\r\nbtn-accent\r\nbtn-info\r\nbtn-success\r\nbtn-warning\r\nbtn-error\r\nbtn-ghost\r\nbtn-link\r\nbtn-outline\r\nbtn-active\r\nbtn-disabled\r\nglass\r\nno-animation\r\nbtn-lg\r\nbtn-md\r\nbtn-sm\r\nbtn-xs\r\nbtn-wide\r\nbtn-block\r\nbtn-circle\r\nbtn-square\r\nhidden\r\n\">defs al</div>\r\n-->\r\n<!--<input type=\"text\" placeholder=\"Type here\" class=\"input input-bordered input-primary w-full max-w-xs\" />-->", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .checkbox,:host ::ng-deep .radio{margin-top:0;margin-bottom:0}:host ::ng-deep .checkbox-inline,:host ::ng-deep .checkbox-inline+.checkbox-inline,:host ::ng-deep .checkbox-inline+.radio-inline,:host ::ng-deep .radio-inline,:host ::ng-deep .radio-inline+.radio-inline,:host ::ng-deep .radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}:host ::ng-deep .checkbox-inline:last-child,:host ::ng-deep .radio-inline:last-child{margin-right:0}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}.checkbox-inline,.checkbox-inline+.checkbox-inline,.checkbox-inline+.radio-inline,.radio-inline,.radio-inline+.radio-inline,.radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}.checkbox-inline:last-child,.radio-inline:last-child{margin-right:0}.ng-invalid.ng-touched{border:1px solid #f44336}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.JsonSchemaFormService }, { type: i1.FrameworkLibraryService }, { type: CssframeworkService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }], widgetStyles: [{
-                type: Input
+class CssFrameworkComponent {
+    //TODO-move to ng-formworks/core utility.functions.ts
+    applyCssClasses(type, widgetOptions, styleOptions) {
+        //console.log("applyCssClasses for type:"+type);
+        let cssClasses = this.widgetStyles[type];
+        if (!cssClasses || _.isEmpty(cssClasses)) {
+            cssClasses = this.widgetStyles.default;
+        }
+        Object.keys(cssClasses).forEach(catName => {
+            let classList = cssClasses[catName];
+            if (classList.length) {
+                widgetOptions[catName] = addClasses(widgetOptions[catName], classList);
+            }
+            if (styleOptions) {
+                widgetOptions[catName] = addClasses(widgetOptions[catName], styleOptions);
+            }
+        });
+    }
+    flattenWidgetStyles(wstyles) {
+        var flattened = {};
+        let ignore = ['__themes__'];
+        Object.keys(wstyles).forEach(wkey => {
+            let wstyle = wstyles[wkey];
+            if (ignore.indexOf(wkey) >= 0) {
+                flattened[wkey] = wstyle;
+                return;
+            }
+            if (_.isArray(wstyle)) {
+                flattened[wkey] = wstyle.join(" ");
+            }
+            if (_.isObject(wstyle)) { //is csscategories
+                flattened[wkey] = flattened[wkey] || {};
+                Object.keys(wstyle).forEach(catName => {
+                    let cssCat = wstyle[catName];
+                    if (_.isArray(cssCat)) {
+                        flattened[wkey][catName] = cssCat.join(" ");
+                    }
+                    else {
+                        flattened[wkey][catName] = cssCat;
+                    }
+                });
+            }
+            if (_.isString(wstyle)) {
+                flattened[wkey] = wstyle;
+            }
+        });
+        return flattened;
+    }
+    constructor(changeDetector, jsf, jsfFLService, cssFWService
+    /*@Inject(CSS_FRAMEWORK_CFG ) fwcfg: css_fw.frameworkcfg*/
+    ) {
+        this.changeDetector = changeDetector;
+        this.jsf = jsf;
+        this.jsfFLService = jsfFLService;
+        this.cssFWService = cssFWService;
+        this.frameworkInitialized = false;
+        this.formControl = null;
+        this.debugOutput = '';
+        this.debug = '';
+        this.parentArray = null;
+        this.isOrderable = false;
+        this.defaultStyling = {
+            array: {},
+            default: { fieldHtmlClass: "cssfw-form-control" },
+            __themes__: [{ name: 'notheme', text: 'None' }],
+            __remove_item__: "cssfw-remove-item",
+            __array_item_nonref__: {
+                "htmlClass": "cssfw-array-item-nonref"
+            },
+            __active__: { activeClass: "cssfw-active" },
+            __array__: { htmlClass: "cssfw-array" },
+            __control_label__: { labelHtmlClass: "cssfw-control-label" },
+            __form_group__: { htmlClass: "cssfw-form-group" },
+            __field_addon_left__: "cssfw-addon-left",
+            __field_addon_right__: "cssfw-addon-right",
+            __help_block__: "cssfw-help-block",
+            __required_asterisk__: "cssfw-required-astersisk",
+            __screen_reader__: "cssfw-screen-reader"
+        };
+        let activeFramework = this.jsfFLService.activeFramework;
+        let fwcfg = activeFramework.config || {};
+        this.widgetStyles = Object.assign(this.defaultStyling, fwcfg.widgetstyles);
+        let defaultTheme = this.widgetStyles.__themes__[0];
+        let defaultThemeName = cssFWService.activeRequestedTheme || defaultTheme.name;
+        this.theme = this.options?.theme || defaultThemeName;
+        this.frameworkThemeSubs = cssFWService.frameworkTheme$.subscribe(newTheme => {
+            this.theme = newTheme;
+        });
+    }
+    ngOnDestroy() {
+        this.frameworkThemeSubs.unsubscribe();
+        this.frameworkThemeSubs = null;
+    }
+    get showRemoveButton() {
+        if (!this.options.removable || this.options.readonly ||
+            this.layoutNode.type === '$ref') {
+            return false;
+        }
+        if (this.layoutNode.recursiveReference) {
+            return true;
+        }
+        if (!this.layoutNode.arrayItem || !this.parentArray) {
+            return false;
+        }
+        // If array length <= minItems, don't allow removing any items
+        return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :
+            // For removable list items, allow removing any item
+            this.layoutNode.arrayItemType === 'list' ? true :
+                // For removable tuple items, only allow removing last item in list
+                this.layoutIndex[this.layoutIndex.length - 1] === this.parentArray.items.length - 2;
+    }
+    ngOnInit() {
+        this.initializeFramework();
+        if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
+            this.parentArray = this.jsf.getParentNode(this);
+            if (this.parentArray) {
+                this.isOrderable = this.layoutNode.arrayItemType === 'list' &&
+                    !this.options.readonly && this.parentArray.options.orderable;
+            }
+        }
+    }
+    ngOnChanges() {
+        if (!this.frameworkInitialized) {
+            this.initializeFramework();
+        }
+    }
+    initializeFramework() {
+        if (this.layoutNode) {
+            this.options = cloneDeep(this.layoutNode.options);
+            this.widgetLayoutNode = {
+                ...this.layoutNode,
+                options: cloneDeep(this.layoutNode.options)
+            };
+            this.widgetOptions = this.widgetLayoutNode.options;
+            this.formControl = this.jsf.getFormControl(this);
+            this.options.isInputWidget = inArray(this.layoutNode.type, [
+                'button', 'checkbox', 'checkboxes-inline', 'checkboxes', 'color',
+                'date', 'datetime-local', 'datetime', 'email', 'file', 'hidden',
+                'image', 'integer', 'month', 'number', 'password', 'radio',
+                'radiobuttons', 'radios-inline', 'radios', 'range', 'reset', 'search',
+                'select', 'submit', 'tel', 'text', 'textarea', 'time', 'url', 'week'
+            ]);
+            this.options.title = this.setTitle();
+            this.options.htmlClass =
+                addClasses(this.options.htmlClass, 'schema-form-' + this.layoutNode.type);
+            if (this.layoutNode.type === 'array') {
+                this.options.htmlClass = addClasses(this.options.htmlClass, this.widgetStyles.__array__.htmlClass);
+            }
+            else if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
+                this.options.htmlClass = addClasses(this.options.htmlClass, this.widgetStyles.__array_item_nonref__.htmlClass);
+            }
+            else {
+                this.options.htmlClass = addClasses(this.options.htmlClass, this.widgetStyles.__form_group__.htmlClass);
+            }
+            /*
+            this.options.htmlClass =
+            this.layoutNode.type === 'array' ?
+              addClasses(this.options.htmlClass, ['border','shadow-md','p-1']) :
+              this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?
+                addClasses(this.options.htmlClass, ['border','shadow-md','p-1']) :
+                addClasses(this.options.htmlClass, 'mb-1');
+      */
+            /*
+            this.options.htmlClass =
+            this.layoutNode.type === 'array' ?
+            addClasses(this.options.htmlClass, this.widgetStyles.array.htmlClass):
+              this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?
+              addClasses(this.options.htmlClass, this.widgetStyles.__array_item_nonref__.htmlClass):
+              addClasses(this.options.htmlClass, this.widgetStyles.__form_group__.htmlClass);
+            */
+            this.widgetOptions.htmlClass = '';
+            this.options.labelHtmlClass =
+                addClasses(this.options.labelHtmlClass, this.widgetStyles.__control_label__.labelHtmlClass);
+            this.widgetOptions.activeClass =
+                addClasses(this.widgetOptions.activeClass, this.widgetStyles.__active__.activeClass);
+            this.options.fieldAddonLeft =
+                this.options.fieldAddonLeft || this.options.prepend;
+            this.options.fieldAddonRight =
+                this.options.fieldAddonRight || this.options.append;
+            // Add asterisk to titles if required
+            if (this.options.title && this.layoutNode.type !== 'tab' &&
+                !this.options.notitle && this.options.required &&
+                !this.options.title.includes('*')) {
+                let required_asterisk_class = this.widgetStyles.__required_asterisk__ || 'text-danger';
+                this.options.title += ` <strong class="${required_asterisk_class}">*</strong>`;
+            }
+            if (this.layoutNode.type == 'optionfieldset') {
+                this.options.messageLocation = 'top';
+            }
+            // Set miscelaneous styles and settings for each control type
+            this.applyCssClasses(this.layoutNode.type, this.widgetOptions, this.options.style);
+            if (this.formControl) {
+                this.updateHelpBlock(this.formControl.status);
+                this.formControl.statusChanges.subscribe(status => this.updateHelpBlock(status));
+                if (this.options.debug) {
+                    const vars = [];
+                    this.debugOutput = map(vars, thisVar => JSON.stringify(thisVar, null, 2)).join('\n');
+                }
+            }
+            this.frameworkInitialized = true;
+        }
+    }
+    updateHelpBlock(status) {
+        this.options.helpBlock = status === 'INVALID' &&
+            this.options.enableErrorState && this.formControl.errors &&
+            (this.formControl.dirty || this.options.feedbackOnRender) ?
+            this.jsf.formatErrors(this.formControl.errors, this.options.validationMessages) :
+            this.options.description || this.options.help || null;
+    }
+    setTitle() {
+        switch (this.layoutNode.type) {
+            case 'button':
+            case 'checkbox':
+            case 'section':
+            case 'help':
+            case 'msg':
+            case 'submit':
+            case 'message':
+            case 'tabarray':
+            case 'tabs':
+            case '$ref':
+                return null;
+            case 'advancedfieldset':
+                this.widgetOptions.expandable = true;
+                this.widgetOptions.title = 'Advanced options';
+                return null;
+            case 'authfieldset':
+                this.widgetOptions.expandable = true;
+                this.widgetOptions.title = 'Authentication settings';
+                return null;
+            case 'fieldset':
+                this.widgetOptions.title = this.options.title;
+                return null;
+            default:
+                this.widgetOptions.title = null;
+                return this.jsf.setItemTitle(this);
+        }
+    }
+    removeItem() {
+        this.jsf.removeItem(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssFrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }, { token: i1.FrameworkLibraryService }, { token: CssframeworkService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CssFrameworkComponent, selector: "css-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex", widgetStyles: "widgetStyles" }, usesOnChanges: true, ngImport: i0, template: "<div [attr.data-bs-theme]=\"theme\" [attr.data-theme]=\"theme\" [class]=\"options?.htmlClass || ''\" [class.has-feedback]=\"options?.feedback && options?.isInputWidget &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\" [class.has-error]=\"options?.enableErrorState && formControl?.errors &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\" [class.has-success]=\"options?.enableSuccessState && !formControl?.errors &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\">\r\n\r\n    <button *ngIf=\"showRemoveButton\" [class]=\"widgetStyles.__remove_item__\" type=\"button\" (click)=\"removeItem()\">\r\n    <span aria-hidden=\"true\">&times;</span>\r\n    <span [class]=\"widgetStyles.__screen_reader__\">Close</span>\r\n  </button>\r\n    <div *ngIf=\"options?.messageLocation === 'top'\">\r\n        <p *ngIf=\"options?.helpBlock\" [class]=\"widgetStyles.__help_block__\" [innerHTML]=\"options?.helpBlock\"></p>\r\n    </div>\r\n\r\n    <label *ngIf=\"options?.title && layoutNode?.type !== 'tab'\" [attr.for]=\"'control' + layoutNode?._id\" [class]=\"options?.labelHtmlClass || ''\" [class.sr-only]=\"options?.notitle\" [innerHTML]=\"options?.title\"></label>\r\n    <p *ngIf=\"layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired\">\r\n        <strong [class]=\"widgetStyles.__required_asterisk__\">*</strong> = required fields\r\n    </p>\r\n    <div [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\">\r\n        <span *ngIf=\"options?.fieldAddonLeft\" [class]=\"widgetStyles.__field_addon_left__\" [innerHTML]=\"options?.fieldAddonLeft\"></span>\r\n\r\n        <select-widget-widget [layoutNode]=\"widgetLayoutNode\" [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\"></select-widget-widget>\r\n\r\n        <span *ngIf=\"options?.fieldAddonRight\" [class]=\"widgetStyles.__field_addon_right__\" [innerHTML]=\"options?.fieldAddonRight\"></span>\r\n    </div>\r\n\r\n    <span *ngIf=\"options?.feedback && options?.isInputWidget &&\r\n          !options?.fieldAddonRight && !layoutNode.arrayItem &&\r\n          (formControl?.dirty || options?.feedbackOnRender)\" [class.glyphicon-ok]=\"options?.enableSuccessState && !formControl?.errors\" [class.glyphicon-remove]=\"options?.enableErrorState && formControl?.errors\" aria-hidden=\"true\" class=\"form-control-feedback glyphicon\"></span>\r\n    <div *ngIf=\"options?.messageLocation !== 'top'\">\r\n        <p *ngIf=\"options?.helpBlock\" [class]=\"widgetStyles.__help_block__\" [innerHTML]=\"options?.helpBlock\"></p>\r\n    </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"debug && debugOutput\">debug:\r\n    <pre>{{debugOutput}}</pre>\r\n</div>\r\n\r\n<!--\r\n<div class=\"btn input input-bordered input-primary w-full max-w-xs\r\nbtn-neutral\r\nbtn-primary\r\nbtn-secondary\r\nbtn-accent\r\nbtn-info\r\nbtn-success\r\nbtn-warning\r\nbtn-error\r\nbtn-ghost\r\nbtn-link\r\nbtn-outline\r\nbtn-active\r\nbtn-disabled\r\nglass\r\nno-animation\r\nbtn-lg\r\nbtn-md\r\nbtn-sm\r\nbtn-xs\r\nbtn-wide\r\nbtn-block\r\nbtn-circle\r\nbtn-square\r\nhidden\r\n\">defs al</div>\r\n-->\r\n<!--<input type=\"text\" placeholder=\"Type here\" class=\"input input-bordered input-primary w-full max-w-xs\" />-->", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .checkbox,:host ::ng-deep .radio{margin-top:0;margin-bottom:0}:host ::ng-deep .checkbox-inline,:host ::ng-deep .checkbox-inline+.checkbox-inline,:host ::ng-deep .checkbox-inline+.radio-inline,:host ::ng-deep .radio-inline,:host ::ng-deep .radio-inline+.radio-inline,:host ::ng-deep .radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}:host ::ng-deep .checkbox-inline:last-child,:host ::ng-deep .radio-inline:last-child{margin-right:0}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}.checkbox-inline,.checkbox-inline+.checkbox-inline,.checkbox-inline+.radio-inline,.radio-inline,.radio-inline+.radio-inline,.radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}.checkbox-inline:last-child,.radio-inline:last-child{margin-right:0}.ng-invalid.ng-touched{border:1px solid #f44336}\n"], dependencies: [{ kind: "component", type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssFrameworkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'css-framework', encapsulation: ViewEncapsulation.None, template: "<div [attr.data-bs-theme]=\"theme\" [attr.data-theme]=\"theme\" [class]=\"options?.htmlClass || ''\" [class.has-feedback]=\"options?.feedback && options?.isInputWidget &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\" [class.has-error]=\"options?.enableErrorState && formControl?.errors &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\" [class.has-success]=\"options?.enableSuccessState && !formControl?.errors &&\r\n        (formControl?.dirty || options?.feedbackOnRender)\">\r\n\r\n    <button *ngIf=\"showRemoveButton\" [class]=\"widgetStyles.__remove_item__\" type=\"button\" (click)=\"removeItem()\">\r\n    <span aria-hidden=\"true\">&times;</span>\r\n    <span [class]=\"widgetStyles.__screen_reader__\">Close</span>\r\n  </button>\r\n    <div *ngIf=\"options?.messageLocation === 'top'\">\r\n        <p *ngIf=\"options?.helpBlock\" [class]=\"widgetStyles.__help_block__\" [innerHTML]=\"options?.helpBlock\"></p>\r\n    </div>\r\n\r\n    <label *ngIf=\"options?.title && layoutNode?.type !== 'tab'\" [attr.for]=\"'control' + layoutNode?._id\" [class]=\"options?.labelHtmlClass || ''\" [class.sr-only]=\"options?.notitle\" [innerHTML]=\"options?.title\"></label>\r\n    <p *ngIf=\"layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired\">\r\n        <strong [class]=\"widgetStyles.__required_asterisk__\">*</strong> = required fields\r\n    </p>\r\n    <div [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\">\r\n        <span *ngIf=\"options?.fieldAddonLeft\" [class]=\"widgetStyles.__field_addon_left__\" [innerHTML]=\"options?.fieldAddonLeft\"></span>\r\n\r\n        <select-widget-widget [layoutNode]=\"widgetLayoutNode\" [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\"></select-widget-widget>\r\n\r\n        <span *ngIf=\"options?.fieldAddonRight\" [class]=\"widgetStyles.__field_addon_right__\" [innerHTML]=\"options?.fieldAddonRight\"></span>\r\n    </div>\r\n\r\n    <span *ngIf=\"options?.feedback && options?.isInputWidget &&\r\n          !options?.fieldAddonRight && !layoutNode.arrayItem &&\r\n          (formControl?.dirty || options?.feedbackOnRender)\" [class.glyphicon-ok]=\"options?.enableSuccessState && !formControl?.errors\" [class.glyphicon-remove]=\"options?.enableErrorState && formControl?.errors\" aria-hidden=\"true\" class=\"form-control-feedback glyphicon\"></span>\r\n    <div *ngIf=\"options?.messageLocation !== 'top'\">\r\n        <p *ngIf=\"options?.helpBlock\" [class]=\"widgetStyles.__help_block__\" [innerHTML]=\"options?.helpBlock\"></p>\r\n    </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"debug && debugOutput\">debug:\r\n    <pre>{{debugOutput}}</pre>\r\n</div>\r\n\r\n<!--\r\n<div class=\"btn input input-bordered input-primary w-full max-w-xs\r\nbtn-neutral\r\nbtn-primary\r\nbtn-secondary\r\nbtn-accent\r\nbtn-info\r\nbtn-success\r\nbtn-warning\r\nbtn-error\r\nbtn-ghost\r\nbtn-link\r\nbtn-outline\r\nbtn-active\r\nbtn-disabled\r\nglass\r\nno-animation\r\nbtn-lg\r\nbtn-md\r\nbtn-sm\r\nbtn-xs\r\nbtn-wide\r\nbtn-block\r\nbtn-circle\r\nbtn-square\r\nhidden\r\n\">defs al</div>\r\n-->\r\n<!--<input type=\"text\" placeholder=\"Type here\" class=\"input input-bordered input-primary w-full max-w-xs\" />-->", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .checkbox,:host ::ng-deep .radio{margin-top:0;margin-bottom:0}:host ::ng-deep .checkbox-inline,:host ::ng-deep .checkbox-inline+.checkbox-inline,:host ::ng-deep .checkbox-inline+.radio-inline,:host ::ng-deep .radio-inline,:host ::ng-deep .radio-inline+.radio-inline,:host ::ng-deep .radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}:host ::ng-deep .checkbox-inline:last-child,:host ::ng-deep .radio-inline:last-child{margin-right:0}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}.checkbox-inline,.checkbox-inline+.checkbox-inline,.checkbox-inline+.radio-inline,.radio-inline,.radio-inline+.radio-inline,.radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}.checkbox-inline:last-child,.radio-inline:last-child{margin-right:0}.ng-invalid.ng-touched{border:1px solid #f44336}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.JsonSchemaFormService }, { type: i1.FrameworkLibraryService }, { type: CssframeworkService }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }], widgetStyles: [{
+                type: Input
             }] } });
 
-const CSS_FRAMEWORK_CFG = new InjectionToken('CSS_FRAMEWORK_CFG');
-var css_fw;
-(function (css_fw) {
-    class csscategories {
-    }
-    css_fw.csscategories = csscategories;
+const CSS_FRAMEWORK_CFG = new InjectionToken('CSS_FRAMEWORK_CFG');
+var css_fw;
+(function (css_fw) {
+    class csscategories {
+    }
+    css_fw.csscategories = csscategories;
 })(css_fw || (css_fw = {}));
 
-class CssFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CssFrameworkModule, declarations: [CssFrameworkComponent], imports: [JsonSchemaFormModule,
-            CommonModule,
-            WidgetLibraryModule], exports: [CssFrameworkComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssFrameworkModule, providers: [
-            JsonSchemaFormService,
-            FrameworkLibraryService,
-            WidgetLibraryService,
-            CssframeworkService
-            // { provide: Framework, useClass: CssFramework, multi: true },
-        ], imports: [JsonSchemaFormModule,
-            CommonModule,
-            WidgetLibraryModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssFrameworkModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CssFrameworkComponent
-                    ],
-                    imports: [
-                        JsonSchemaFormModule,
-                        CommonModule,
-                        WidgetLibraryModule,
-                    ],
-                    exports: [
-                        CssFrameworkComponent
-                    ],
-                    providers: [
-                        JsonSchemaFormService,
-                        FrameworkLibraryService,
-                        WidgetLibraryService,
-                        CssframeworkService
-                        // { provide: Framework, useClass: CssFramework, multi: true },
-                    ]
-                }]
+class CssFrameworkModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CssFrameworkModule, declarations: [CssFrameworkComponent], imports: [JsonSchemaFormModule,
+            CommonModule,
+            WidgetLibraryModule], exports: [CssFrameworkComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssFrameworkModule, providers: [
+            JsonSchemaFormService,
+            FrameworkLibraryService,
+            WidgetLibraryService,
+            CssframeworkService
+            // { provide: Framework, useClass: CssFramework, multi: true },
+        ], imports: [JsonSchemaFormModule,
+            CommonModule,
+            WidgetLibraryModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssFrameworkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CssFrameworkComponent
+                    ],
+                    imports: [
+                        JsonSchemaFormModule,
+                        CommonModule,
+                        WidgetLibraryModule,
+                    ],
+                    exports: [
+                        CssFrameworkComponent
+                    ],
+                    providers: [
+                        JsonSchemaFormService,
+                        FrameworkLibraryService,
+                        WidgetLibraryService,
+                        CssframeworkService
+                        // { provide: Framework, useClass: CssFramework, multi: true },
+                    ]
+                }]
         }] });
 
-class CssFramework extends Framework {
-    constructor(cfg, cssFWService) {
-        super();
-        this.cssFWService = cssFWService;
-        this.name = 'css';
-        this.framework = CssFrameworkComponent;
-        this.name = cfg.name;
-        this.text = cfg.text || this.name;
-        this.stylesheets = cfg.stylesheets;
-        this.scripts = cfg.scripts;
-        this.config = cfg;
-        this.widgets = cfg.widgets;
-    }
-    getActiveTheme() {
-        let activeRequestedThemeName = this.cssFWService.getActiveRequestedTheme();
-        let frameWorkThemes = this.config?.widgetstyles?.__themes__;
-        let theme = frameWorkThemes && frameWorkThemes[0];
-        if (activeRequestedThemeName) { //if not set return first theme in config;
-            theme = { name: activeRequestedThemeName, text: activeRequestedThemeName };
-            if (frameWorkThemes) {
-                let filtered = frameWorkThemes.filter(theme => { return theme.name == activeRequestedThemeName; });
-                theme = (filtered && filtered[0]) || theme;
-            }
-        }
-        return theme;
-    }
-    requestThemeChange(name) {
-        this.cssFWService.requestThemeChange(name);
-    }
-    registerTheme(newTheme, overwrite = true) {
-        let themeList = this.config?.widgetstyles?.__themes__ || [];
-        let matchedThemes = themeList.filter(theme => { return newTheme.name == theme.name; });
-        if (matchedThemes && matchedThemes[0]) {
-            if (overwrite) {
-                matchedThemes[0].text = newTheme.text;
-                return true;
-            }
-            if (!overwrite) {
-                return false;
-            }
-        }
-        if (!matchedThemes || matchedThemes.length == 0) {
-            let cfg = this.config;
-            cfg.widgetstyles = this.config.widgetstyles || {};
-            cfg.widgetstyles.__themes__ = cfg.widgetstyles.__themes__ || [];
-            cfg.widgetstyles.__themes__.push(newTheme);
-            return true;
-        }
-    }
-    ;
-    unregisterTheme(name) {
-        let themeList = this.config?.widgetstyles?.__themes__;
-        let foundInd = -1;
-        if (themeList) {
-            themeList.forEach((theme, ind) => {
-                if (name == theme.name) {
-                    foundInd = ind;
-                }
-            });
-            if (foundInd >= 0) {
-                themeList.splice(foundInd, 1);
-                return true;
-            }
-        }
-        return false;
-    }
-    getConfig() {
-        return this.config;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssFramework, deps: [{ token: CSS_FRAMEWORK_CFG }, { token: CssframeworkService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssFramework }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CssFramework, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CSS_FRAMEWORK_CFG]
-                }] }, { type: CssframeworkService }]; } });
+class CssFramework extends Framework {
+    constructor(cfg, cssFWService) {
+        super();
+        this.cssFWService = cssFWService;
+        this.name = 'css';
+        this.framework = CssFrameworkComponent;
+        this.name = cfg.name;
+        this.text = cfg.text || this.name;
+        this.stylesheets = cfg.stylesheets;
+        this.scripts = cfg.scripts;
+        this.config = cfg;
+        this.widgets = cfg.widgets;
+    }
+    getActiveTheme() {
+        let activeRequestedThemeName = this.cssFWService.getActiveRequestedTheme();
+        let frameWorkThemes = this.config?.widgetstyles?.__themes__;
+        let theme = frameWorkThemes && frameWorkThemes[0];
+        if (activeRequestedThemeName) { //if not set return first theme in config;
+            theme = { name: activeRequestedThemeName, text: activeRequestedThemeName };
+            if (frameWorkThemes) {
+                let filtered = frameWorkThemes.filter(theme => { return theme.name == activeRequestedThemeName; });
+                theme = (filtered && filtered[0]) || theme;
+            }
+        }
+        return theme;
+    }
+    requestThemeChange(name) {
+        this.cssFWService.requestThemeChange(name);
+    }
+    registerTheme(newTheme, overwrite = true) {
+        let themeList = this.config?.widgetstyles?.__themes__ || [];
+        let matchedThemes = themeList.filter(theme => { return newTheme.name == theme.name; });
+        if (matchedThemes && matchedThemes[0]) {
+            if (overwrite) {
+                matchedThemes[0].text = newTheme.text;
+                return true;
+            }
+            if (!overwrite) {
+                return false;
+            }
+        }
+        if (!matchedThemes || matchedThemes.length == 0) {
+            let cfg = this.config;
+            cfg.widgetstyles = this.config.widgetstyles || {};
+            cfg.widgetstyles.__themes__ = cfg.widgetstyles.__themes__ || [];
+            cfg.widgetstyles.__themes__.push(newTheme);
+            return true;
+        }
+    }
+    ;
+    unregisterTheme(name) {
+        let themeList = this.config?.widgetstyles?.__themes__;
+        let foundInd = -1;
+        if (themeList) {
+            themeList.forEach((theme, ind) => {
+                if (name == theme.name) {
+                    foundInd = ind;
+                }
+            });
+            if (foundInd >= 0) {
+                themeList.splice(foundInd, 1);
+                return true;
+            }
+        }
+        return false;
+    }
+    getConfig() {
+        return this.config;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssFramework, deps: [{ token: CSS_FRAMEWORK_CFG }, { token: CssframeworkService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssFramework }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CssFramework, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CSS_FRAMEWORK_CFG]
+                }] }, { type: CssframeworkService }] });
 
-/*
- * Public API Surface of ng-formworks-cssframework
+/*
+ * Public API Surface of ng-formworks-cssframework
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { CSS_FRAMEWORK_CFG, CssFramework, CssFrameworkComponent, CssFrameworkModule, CssframeworkService, css_fw };