@ng-formworks/cssframework 15.2.7

package/README.md

@@ -0,0 +1,28 @@
+# @ng-formworks/cssframework
+
+This module is a dependency of the [ng-formworks project][npm_core_ver] and not intended to be consumed independently see [@ng-formworks/core][npm_core_ver] for more details.
+Below is information regarding the development tasks and not related to the module's installation, it should automatically be installed when a framework module is installed.  
+
+## Code scaffolding
+
+Run `ng generate component component-name --project @ng-formworks/cssframework` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project @ng-formworks/cssframework`.
+> Note: Don't forget to add `--project @ng-formworks/cssframework` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build @ng-formworks/cssframework` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build @ng-formworks/cssframework`, go to the dist folder `cd dist/@ng-formworks/cssframework` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test @ng-formworks/cssframework` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+
+[npm_core_ver]:https://www.npmjs.com/package/@ng-formworks/core

package/ng-package.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/@ng-formworks/cssframework",
+    "lib": {
+        "entryFile": "src/public-api.ts"
+    },
+    "assets": ["./assets"],
+    "allowedNonPeerDependencies": [
+        "lodash-es",
+        "@ng-formworks/core"
+    ]
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@ng-formworks/cssframework",
+    "version": "15.2.7",
+    "description": "Angular ng-formworks - JSON Schema Form builder cssframework",
+    "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
+    "keywords": [
+        "Angular",
+        "ng",
+        "Angular15",
+        "Angular 15",
+        "Angular16",
+        "Angular 16",
+        "Angular17",
+        "Angular 17",
+        "ng15",
+        "ng16",
+        "ng17",
+        "JSON Schema",
+        "form",
+        "forms",
+        "form builder",
+        "form themes",
+        "form generator",
+        "ajsf",
+        "ng-formworks",
+        "ng formworks",
+        "formworks",
+        "angular json schema form"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/zahmo/ng-formworks"
+    },
+    "bugs": {
+        "url": "https://github.com/zahmo/ng-formworks/issues"
+    },
+    "private": false,
+    "peerDependencies": {
+        "@angular/common": "^17.0.0",
+        "@angular/core": "^17.0.0"
+    },
+    "dependencies": {
+        "tslib": "^2.3.0",
+        "@ng-formworks/core": "~15.2.7"
+    },
+    "devDependencies": {
+        "@types/lodash-es": "^4.17.6"
+    },
+    "sideEffects": false
+}

package/src/lib/css-framework.component.html

@@ -0,0 +1,67 @@
+<div [attr.data-bs-theme]="theme" [attr.data-theme]="theme" [class]="options?.htmlClass || ''" [class.has-feedback]="options?.feedback && options?.isInputWidget &&
+        (formControl?.dirty || options?.feedbackOnRender)" [class.has-error]="options?.enableErrorState && formControl?.errors &&
+        (formControl?.dirty || options?.feedbackOnRender)" [class.has-success]="options?.enableSuccessState && !formControl?.errors &&
+        (formControl?.dirty || options?.feedbackOnRender)">
+
+    <button *ngIf="showRemoveButton" [class]="widgetStyles.__remove_item__" type="button" (click)="removeItem()">
+    <span aria-hidden="true">&times;</span>
+    <span [class]="widgetStyles.__screen_reader__">Close</span>
+  </button>
+    <div *ngIf="options?.messageLocation === 'top'">
+        <p *ngIf="options?.helpBlock" [class]="widgetStyles.__help_block__" [innerHTML]="options?.helpBlock"></p>
+    </div>
+
+    <label *ngIf="options?.title && layoutNode?.type !== 'tab'" [attr.for]="'control' + layoutNode?._id" [class]="options?.labelHtmlClass || ''" [class.sr-only]="options?.notitle" [innerHTML]="options?.title"></label>
+    <p *ngIf="layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired">
+        <strong [class]="widgetStyles.__required_asterisk__">*</strong> = required fields
+    </p>
+    <div [class.input-group]="options?.fieldAddonLeft || options?.fieldAddonRight">
+        <span *ngIf="options?.fieldAddonLeft" [class]="widgetStyles.__field_addon_left__" [innerHTML]="options?.fieldAddonLeft"></span>
+
+        <select-widget-widget [layoutNode]="widgetLayoutNode" [dataIndex]="dataIndex" [layoutIndex]="layoutIndex"></select-widget-widget>
+
+        <span *ngIf="options?.fieldAddonRight" [class]="widgetStyles.__field_addon_right__" [innerHTML]="options?.fieldAddonRight"></span>
+    </div>
+
+    <span *ngIf="options?.feedback && options?.isInputWidget &&
+          !options?.fieldAddonRight && !layoutNode.arrayItem &&
+          (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>
+    <div *ngIf="options?.messageLocation !== 'top'">
+        <p *ngIf="options?.helpBlock" [class]="widgetStyles.__help_block__" [innerHTML]="options?.helpBlock"></p>
+    </div>
+
+</div>
+
+<div *ngIf="debug && debugOutput">debug:
+    <pre>{{debugOutput}}</pre>
+</div>
+
+<!--
+<div class="btn input input-bordered input-primary w-full max-w-xs
+btn-neutral
+btn-primary
+btn-secondary
+btn-accent
+btn-info
+btn-success
+btn-warning
+btn-error
+btn-ghost
+btn-link
+btn-outline
+btn-active
+btn-disabled
+glass
+no-animation
+btn-lg
+btn-md
+btn-sm
+btn-xs
+btn-wide
+btn-block
+btn-circle
+btn-square
+hidden
+">defs al</div>
+-->
+<!--<input type="text" placeholder="Type here" class="input input-bordered input-primary w-full max-w-xs" />-->

package/src/lib/css-framework.component.scss

@@ -0,0 +1,45 @@
+:host ::ng-deep {
+    .list-group-item .form-control-feedback {
+        top: 40px;
+    }
+    .checkbox,
+    .radio {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .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;
+    }
+}
+
+.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;
+}

package/src/lib/css-framework.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CssFrameworkComponent } from './css-framework.component';
+
+describe('CssFrameworkComponent', () => {
+  let component: CssFrameworkComponent;
+  let fixture: ComponentFixture<CssFrameworkComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CssFrameworkComponent]
+    });
+    fixture = TestBed.createComponent(CssFrameworkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/css-framework.component.ts

@@ -0,0 +1,304 @@
+import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FrameworkLibraryService, JsonSchemaFormService, addClasses, inArray } from '@ng-formworks/core';
+import _, { cloneDeep, map } from 'lodash';
+import { Subscription } from 'rxjs';
+import { css_fw } from './css-framework.defs';
+import { CssframeworkService } from './css-framework.service';
+
+@Component({
+  selector: 'css-framework',
+  templateUrl: './css-framework.component.html',
+  styleUrls: ['./css-framework.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CssFrameworkComponent implements OnInit, OnChanges,OnDestroy {
+  frameworkInitialized = false;
+  widgetOptions: any; // Options passed to child widget
+  widgetLayoutNode: any; // layoutNode passed to child widget
+  options: any; // Options used in this framework
+  formControl: any = null;
+  debugOutput: any = '';
+  debug: any = '';
+  parentArray: any = null;
+  isOrderable = false;
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  @Input() widgetStyles: css_fw.widgetstyles;
+
+
+
+
+
+  //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:css_fw.widgetstyles){
+    var flattened:any={};
+    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
+}
+
+defaultStyling:css_fw.widgetstyles={
+  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"
+
+}
+
+
+
+
+theme:string
+frameworkThemeSubs:Subscription;
+  constructor(
+    public changeDetector: ChangeDetectorRef,
+    public jsf: JsonSchemaFormService,
+    public jsfFLService:FrameworkLibraryService,
+    public cssFWService:CssframeworkService
+    /*@Inject(CSS_FRAMEWORK_CFG ) fwcfg: css_fw.frameworkcfg*/
+
+  ) {
+    
+    let activeFramework:any=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(): void {
+    this.frameworkThemeSubs.unsubscribe();
+    this.frameworkThemeSubs=null;
+  }
+
+
+  get showRemoveButton(): boolean {
+    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: any[] = [];
+          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(): string {
+    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);
+  }
+}

package/src/lib/css-framework.defs.ts

@@ -0,0 +1,78 @@
+import { InjectionToken } from "@angular/core";
+
+export const CSS_FRAMEWORK_CFG = new InjectionToken<css_fw.frameworkcfg>('CSS_FRAMEWORK_CFG');
+
+export namespace css_fw{
+
+    export type themeKV=
+    { 
+        name:string,
+        text:string
+     }
+
+    export class csscategories{
+        fieldHtmlClass?:string|string[]
+        labelHtmlClass?:string|string[]
+        htmlClass?:string|string[]
+        itemLabelHtmlClass?:string|string[]
+        activeClass?:string|string[]
+    }
+
+    export type widgetstyles={
+        '$ref'?:csscategories,
+        'alt-date'?:csscategories,
+        'alt-datetime'?:csscategories,
+        __themes__?:themeKV[],
+        __array_item_nonref__:csscategories,
+        __form_group__:csscategories,
+        __control_label__:csscategories,
+        __active__:csscategories,
+        __required_asterisk__:string,
+        __array__:csscategories,
+        '__remove_item__':string,
+        __help_block__:string,
+        __field_addon_left__:string
+        __field_addon_right__:string,
+        __screen_reader__:string,
+        array:csscategories,
+        authfieldset?:csscategories,
+        advancedfieldset?:csscategories,
+        button?:csscategories,
+        checkbox?:csscategories,
+        checkboxes?:csscategories,
+        checkboxbuttons?:csscategories,
+        'checkboxes-inline'?:csscategories,
+        date?:csscategories,
+        'datetime-local'?:csscategories,
+        fieldset?:csscategories,
+        integer?:csscategories,
+        number?:csscategories,
+        optionfieldset?:csscategories,
+        password?:csscategories,
+        radiobuttons?:csscategories,
+        radio?:csscategories,
+        radios?:csscategories,
+        "radios-inline"?:csscategories,
+        'range'?:csscategories,
+        section?:csscategories,
+        selectfieldset?:csscategories,
+        select?:csscategories,
+        submit?:csscategories,
+        text?:csscategories,
+        tabs?:csscategories,
+        tabarray?:csscategories,
+        textarea?:csscategories,
+        default:csscategories
+    }
+    export type frameworkcfg={
+        name:string,
+        text:string;
+        stylesheets:string[],
+        scripts?:string[],
+        widgetstyles:widgetstyles,
+        widgets?:any;
+    }
+
+    
+
+}

package/src/lib/css-framework.module.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FrameworkLibraryService, JsonSchemaFormModule, JsonSchemaFormService, WidgetLibraryModule, WidgetLibraryService } from '@ng-formworks/core';
+import { CssFrameworkComponent } from './css-framework.component';
+import { CssframeworkService } from './css-framework.service';
+
+
+
+@NgModule({
+  declarations: [
+    CssFrameworkComponent
+  ],
+  imports: [
+    JsonSchemaFormModule,
+    CommonModule,
+    WidgetLibraryModule,
+  ],
+  exports: [
+    CssFrameworkComponent
+  ],
+  providers: [
+    JsonSchemaFormService,
+    FrameworkLibraryService,
+    WidgetLibraryService,
+    CssframeworkService
+   // { provide: Framework, useClass: CssFramework, multi: true },
+  ]
+})
+export class CssFrameworkModule { }

package/src/lib/css-framework.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CssframeworkService } from './css-framework.service';
+
+describe('CssframeworkService', () => {
+  let service: CssframeworkService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CssframeworkService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/css-framework.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CssframeworkService {
+
+  frameworkTheme$: Observable<string>;
+  activeRequestedTheme:string;
+  frameworkThemeSubject: Subject<string>;
+  constructor() {
+    this.frameworkThemeSubject = new Subject<string>();
+    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:string){
+      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():string{
+      return this.activeRequestedTheme;
+   }
+}

package/src/lib/css.framework.ts

@@ -0,0 +1,99 @@
+import { Inject, Injectable } from '@angular/core';
+import { Framework } from '@ng-formworks/core';
+import { CssFrameworkComponent } from './css-framework.component';
+import { CSS_FRAMEWORK_CFG, css_fw } from './css-framework.defs';
+import { CssframeworkService } from './css-framework.service';
+
+
+
+@Injectable()
+export class CssFramework extends Framework {
+  name = 'css';
+
+  framework:any = CssFrameworkComponent;
+  config:css_fw.frameworkcfg
+  constructor(@Inject(CSS_FRAMEWORK_CFG ) cfg:css_fw.frameworkcfg,public cssFWService:CssframeworkService){
+        super();
+        
+        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():css_fw.themeKV{
+    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:string){
+    this.cssFWService.requestThemeChange(name);
+  }
+
+  registerTheme(newTheme:css_fw.themeKV,overwrite:boolean=true):boolean{
+    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:any=this.config
+      cfg.widgetstyles= this.config.widgetstyles||{};
+      cfg.widgetstyles.__themes__=cfg.widgetstyles.__themes__||[];
+      cfg.widgetstyles.__themes__.push(newTheme);
+      return true;
+    }
+  };
+
+  unregisterTheme(name:string):boolean{
+    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():css_fw.frameworkcfg{
+    return this.config;
+  }
+
+  /*
+  stylesheets = [
+    //TODO-enable for dev only
+    cdn.tailwindcss.com/3.3.3'
+  ];
+
+
+  scripts = [
+
+  ];
+  */
+
+}

package/src/public-api.ts

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of ng-formworks-cssframework
+ */
+
+export * from './lib/css-framework.component';
+export * from './lib/css-framework.defs';
+export * from './lib/css-framework.module';
+export * from './lib/css-framework.service';
+export * from './lib/css.framework';
+

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}