@ng-formworks/cssframework/fesm2022/ng-formworks-cssframework.mjs

Angular ng-formworks - JSON Schema Form builder cssframework

import * as i0 from '@angular/core';
import { Injectable, inject, ChangeDetectorRef, input, model, ViewEncapsulation, Component, InjectionToken, NgModule, Inject } from '@angular/core';
import * as i1 from '@ng-formworks/core';
import { addClasses, JsonSchemaFormService, FrameworkLibraryService, inArray, JsonSchemaFormModule, WidgetLibraryModule, WidgetLibraryService, Framework } from '@ng-formworks/core';
import _, { cloneDeep, map } from 'lodash';
import { Subject } from 'rxjs';
import * as i2 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: "19.2.6", ngImport: i0, type: CssframeworkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CssframeworkService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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() {
        this.changeDetector = inject(ChangeDetectorRef);
        this.jsf = inject(JsonSchemaFormService);
        this.jsfFLService = inject(FrameworkLibraryService);
        this.cssFWService = inject(CssframeworkService);
        this.frameworkInitialized = false;
        this.formControl = null;
        this.debugOutput = '';
        this.debug = '';
        this.parentArray = null;
        this.isOrderable = false;
        this.layoutNode = input(undefined);
        this.layoutIndex = input(undefined);
        this.dataIndex = input(undefined);
        this.widgetStyles = model(undefined);
        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"
        };
        const cssFWService = this.cssFWService;
        let activeFramework = this.jsfFLService.activeFramework;
        let fwcfg = activeFramework.config || {};
        this.widgetStyles.set(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() {
        const layoutNode = this.layoutNode();
        if (!this.options.removable || this.options.readonly ||
            layoutNode.type === '$ref') {
            return false;
        }
        if (layoutNode.recursiveReference) {
            return true;
        }
        if (!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
            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();
        const layoutNode = this.layoutNode();
        if (layoutNode.arrayItem && layoutNode.type !== '$ref') {
            this.parentArray = this.jsf.getParentNode(this);
            if (this.parentArray) {
                this.isOrderable = layoutNode.arrayItemType === 'list' &&
                    !this.options.readonly && this.parentArray.options.orderable;
            }
        }
    }
    ngOnChanges() {
        if (!this.frameworkInitialized) {
            this.initializeFramework();
        }
    }
    initializeFramework() {
        const layoutNode = this.layoutNode();
        if (layoutNode) {
            this.options = cloneDeep(layoutNode.options);
            this.widgetLayoutNode = {
                ...layoutNode,
                options: cloneDeep(layoutNode.options)
            };
            this.widgetOptions = this.widgetLayoutNode.options;
            this.formControl = this.jsf.getFormControl(this);
            this.options.isInputWidget = inArray(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-' + layoutNode.type);
            if (layoutNode.type === 'array') {
                this.options.htmlClass = addClasses(this.options.htmlClass, this.widgetStyles().__array__.htmlClass);
            }
            else if (layoutNode.arrayItem && 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 && 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 (layoutNode.type == 'optionfieldset') {
                this.options.messageLocation = 'top';
            }
            // Set miscelaneous styles and settings for each control type
            this.applyCssClasses(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: "19.2.6", ngImport: i0, type: CssFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: CssFrameworkComponent, isStandalone: false, selector: "css-framework", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null }, widgetStyles: { classPropertyName: "widgetStyles", publicName: "widgetStyles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widgetStyles: "widgetStylesChange" }, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CssFrameworkComponent, decorators: [{
            type: Component,
            args: [{ selector: 'css-framework', encapsulation: ViewEncapsulation.None, standalone: false, 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: () => [] });

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: "19.2.6", ngImport: i0, type: CssFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: CssFrameworkModule, declarations: [CssFrameworkComponent], imports: [JsonSchemaFormModule,
            CommonModule,
            WidgetLibraryModule], exports: [CssFrameworkComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", 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) {
        //reverted to use @Inject for other child classes
        //const cfg = inject<css_fw.frameworkcfg>(CSS_FRAMEWORK_CFG);
        super();
        this.cssFWService = inject(CssframeworkService);
        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: "19.2.6", ngImport: i0, type: CssFramework, deps: [{ token: CSS_FRAMEWORK_CFG }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CssFramework }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CssFramework, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [CSS_FRAMEWORK_CFG]
                }] }] });

/*
 * Public API Surface of ng-formworks-cssframework
 */

/**
 * Generated bundle index. Do not edit.
 */

export { CSS_FRAMEWORK_CFG, CssFramework, CssFrameworkComponent, CssFrameworkModule, CssframeworkService, css_fw };
//# sourceMappingURL=ng-formworks-cssframework.mjs.map