@ng-formworks/material 17.2.7 → 18.0.0

package/karma.conf.js

@@ -1,46 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, '../../coverage/ajsf-material'),
-      reporters: [
-        {
-          type: 'html',
-        },
-        {
-          type: 'lcov',
-        },
-        {
-          type: 'text-summary',
-        },
-      ],
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    singleRun: false,
-    browsers: ['Chrome', 'ChromeHeadlessCI'],
-    customLaunchers: {
-      ChromeHeadlessCI: {
-        base: 'ChromeHeadless',
-        flags: ['--no-sandbox'],
-      },
-    },
-  });
-};

package/ng-package.json

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

package/src/lib/flexlayout-replacement-styles.scss

@@ -1,95 +0,0 @@
-/* style sheet created to help replace angular flex-layout package
-which is out of maintenance
-see-https://github.com/angular/flex-layout
-adapted from 
-https://github.com/angular/flex-layout/issues/1433
-https://github.com/angular/flex-layout/issues/1433#issue-1508899434
-*/
-
-[fxLayout] {
-    box-sizing: border-box;
-    display: flex;
-}
-
-[fxLayout="row wrap"] {
-    flex-flow: row wrap;
-}
-
-[fxLayout="row"] {
-    flex-direction: row;
-}
-
-[fxLayout="column"] {
-    flex-direction: column;
-}
-
-[fxLayoutAlign="center center"] {
-    display: flex;
-    place-content: center;
-    align-items: center;
-}
-
-[fxLayoutAlign="start center"] {
-    display: flex;
-    place-content: center flex-start;
-    align-items: center;
-}
-
-[fxLayoutAlign="start start"] {
-    display: flex;
-    place-content: flex-start flex-start;
-    align-items: center;
-}
-
-[fxLayoutAlign="end center"] {
-    display: flex;
-    place-content: center flex-end;
-    align-items: center;
-}
-
-[fxFlex] {
-    box-sizing: border-box;
-    display: flex;
-    flex: 1 1 100%;
-}
-
-[fxFlex="none"] {
-    flex: none;
-}
-
-@media only screen and (min-width: 960px) {
-    [fxFlex-gt-sm="50"] {
-        flex: 1 1 50% !important;
-        box-sizing: border-box;
-        max-width: 50% !important;
-    }
-    [fxFlex-gt-sm="33"] {
-        flex: 1 1 33% !important;
-        box-sizing: border-box;
-        max-width: 33% !important;
-    }
-}
-
-[fxFlex="33"] {
-    flex: 1 1 33%;
-    box-sizing: border-box;
-    max-width: 33%;
-}
-
-[fxFlex="67"] {
-    flex: 1 1 67%;
-    box-sizing: border-box;
-    max-width: 67%;
-}
-
-@mixin flex {
-    @for $i from 0 through 20 {
-        [fxFlex="#{$i*5}"] {
-            flex: 1 1 $i*5%;
-            box-sizing: border-box;
-            max-width: $i*5%;
-        }
-    }
-}
-
-@include flex;

package/src/lib/material-design-cssframework.ts

@@ -1,20 +0,0 @@
-
-export const cssFrameworkCfgMaterialDesign:any={
-    "name": "material-design",
-    "text":"Material Design",
-    "scripts": [],
-    "stylesheets": [
-        '//fonts.googleapis.com/icon?family=Material+Icons',
-        '//fonts.googleapis.com/css?family=Roboto:300,400,500,700',
-    ],
-    "widgetstyles": {
-        "__themes__": [
-            {"name":"material_default","text":"Default Theme"},
-            {"name":"indigo-pink","text":"Indigo & Pink"},
-            {"name":"purple-green","text":"Purple & Green"},
-            {"name":"deeppurple-amber","text":"Deep Purple & Amber"},
-            {"name":"pink-bluegrey","text":"Pink & Blue-Grey"}
-        ]
-    }
-}
-

package/src/lib/material-design-framework.component.html

@@ -1,13 +0,0 @@
-<div [class]="theme">
-    <div class="mat-app-background">
-
-        <div [class.array-item]="widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'" [orderable]="isOrderable" [dataIndex]="dataIndex" [layoutIndex]="layoutIndex" [layoutNode]="widgetLayoutNode">
-            <svg *ngIf="showRemoveButton" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" class="close-button" (click)="removeItem()">
-      <path
-        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-    </svg>
-            <select-widget-widget [dataIndex]="dataIndex" [layoutIndex]="layoutIndex" [layoutNode]="widgetLayoutNode"></select-widget-widget>
-        </div>
-        <div class="spacer" *ngIf="widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'"></div>
-    </div>
-</div>

package/src/lib/material-design-framework.component.scss

@@ -1,58 +0,0 @@
-.array-item {
-    border-radius: 2px;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
-    padding: 6px;
-    position: relative;
-    transition: all 280ms cubic-bezier(.4, 0, .2, 1);
-}
-
-.close-button {
-    cursor: pointer;
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    fill: rgba(0, 0, 0, .4);
-    visibility: hidden;
-    z-index: 500;
-}
-
-.close-button:hover {
-    fill: rgba(0, 0, 0, .8);
-}
-
-.array-item:hover>.close-button {
-    visibility: visible;
-}
-
-.spacer {
-    margin: 6px 0;
-}
-
-[draggable=true]:hover {
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
-    cursor: move;
-    z-index: 10;
-}
-
-[draggable=true].drag-target-top {
-    box-shadow: 0 -2px 0 #000;
-    position: relative;
-    z-index: 20;
-}
-
-[draggable=true].drag-target-bottom {
-    box-shadow: 0 2px 0 #000;
-    position: relative;
-    z-index: 20;
-}
-
-
-/*
-.purple-green {
-    @import './material-design-themes.scss';
-}
-*/
-
-@import './material-design-themes.scss';
-@import './flexlayout-replacement-styles.scss';
-@import './tailwind-output.scss';

package/src/lib/material-design-framework.component.spec.ts

@@ -1,39 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import {
-    JsonSchemaFormModule,
-    JsonSchemaFormService,
-    WidgetLibraryModule
-} from '@ng-formworks/core';
-import { MaterialDesignFrameworkComponent } from './material-design-framework.component';
-
-describe('FwBootstrap4Component', () => {
-  let component: MaterialDesignFrameworkComponent;
-  let fixture: ComponentFixture<MaterialDesignFrameworkComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        JsonSchemaFormModule,
-        CommonModule,
-        WidgetLibraryModule,
-      ],
-      declarations: [MaterialDesignFrameworkComponent],
-      providers: [JsonSchemaFormService]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MaterialDesignFrameworkComponent);
-    component = fixture.componentInstance;
-    component.layoutNode = { options: {} };
-    component.layoutIndex = [];
-    component.dataIndex = [];
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/material-design-framework.component.ts

@@ -1,143 +0,0 @@
-import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
-import { FrameworkLibraryService, JsonSchemaFormService, isDefined } from '@ng-formworks/core';
-import { CssframeworkService } from '@ng-formworks/cssframework';
-import cloneDeep from 'lodash/cloneDeep';
-import { Subscription } from 'rxjs';
-import { cssFrameworkCfgMaterialDesign } from './material-design-cssframework';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-design-framework',
-  templateUrl: './material-design-framework.component.html',
-  styleUrls: ['./material-design-framework.component.scss'],
-  //changeDetection:ChangeDetectionStrategy.OnPush
-})
-export class MaterialDesignFrameworkComponent implements OnInit, OnChanges ,OnDestroy {
-  frameworkInitialized = false;
-  inputType: string;
-  options: any; // Options used in this framework
-  widgetLayoutNode: any; // layoutNode passed to child widget
-  widgetOptions: any; // Options passed to child widget
-  formControl: any = null;
-  parentArray: any = null;
-  isOrderable = false;
-  dynamicTitle: string = null;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  theme:string="material-default-theme";
-  frameworkThemeSubs:Subscription;
-  constructor(
-    private changeDetector: ChangeDetectorRef,
-    private jsf: JsonSchemaFormService,
-    public jsfFLService:FrameworkLibraryService,
-    public cssFWService:CssframeworkService
-  ) {
-    let activeFramework:any=this.jsfFLService.activeFramework;
-    let fwcfg=activeFramework.config||{};
-    let defaultTheme=cssFrameworkCfgMaterialDesign.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.layoutNode || !this.widgetOptions.removable ||
-      this.widgetOptions.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();
-  }
-
-  ngOnChanges() {
-    if (!this.frameworkInitialized) {
-      this.initializeFramework();
-    }
-    if (this.dynamicTitle) {
-      this.updateTitle();
-    }
-  }
-
-  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);
-
-      if (
-        isDefined(this.widgetOptions.minimum) &&
-        isDefined(this.widgetOptions.maximum) &&
-        this.widgetOptions.multipleOf >= 1
-      ) {
-        this.layoutNode.type = 'range';
-      }
-
-      if (
-        !['$ref', 'advancedfieldset', 'authfieldset', 'button', 'card',
-          'checkbox', 'expansion-panel', 'help', 'message', 'msg', 'section',
-          'submit', 'tabarray', 'tabs'].includes(this.layoutNode.type) &&
-        /{{.+?}}/.test(this.widgetOptions.title || '')
-      ) {
-        this.dynamicTitle = this.widgetOptions.title;
-        this.updateTitle();
-      }
-
-      if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
-        this.parentArray = this.jsf.getParentNode(this);
-        if (this.parentArray) {
-          this.isOrderable =
-            this.parentArray.type.slice(0, 3) !== 'tab' &&
-            this.layoutNode.arrayItemType === 'list' &&
-            !this.widgetOptions.readonly &&
-            this.parentArray.options.orderable;
-        }
-      }
-
-      this.frameworkInitialized = true;
-    } else {
-      this.options = {};
-    }
-  }
-
-  updateTitle() {
-    this.widgetLayoutNode.options.title = this.jsf.parseText(
-      this.dynamicTitle,
-      this.jsf.getFormControlValue(this),
-      this.jsf.getFormControlGroup(this).value,
-      this.dataIndex[this.dataIndex.length - 1]
-    );
-  }
-
-  removeItem() {
-    this.jsf.removeItem(this);
-  }
-}

package/src/lib/material-design-framework.module.ts

@@ -1,81 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatNativeDateModule } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import {
-    Framework,
-    FrameworkLibraryService,
-    JsonSchemaFormModule,
-    JsonSchemaFormService,
-    WidgetLibraryModule, WidgetLibraryService
-} from '@ng-formworks/core';
-import { CssFrameworkModule } from '@ng-formworks/cssframework';
-import { MaterialDesignFramework } from './material-design.framework';
-import { MATERIAL_FRAMEWORK_COMPONENTS } from './widgets/public_api';
-
-
-/**
- * unused @angular/material modules:
- * MatDialogModule, MatGridListModule, MatListModule, MatMenuModule,
- * MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule,
- * MatSidenavModule, MatSnackBarModule, MatSortModule, MatTableModule,
- * ,
- */
-export const ANGULAR_MATERIAL_MODULES = [
-  MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule,
-  MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatExpansionModule,
-  MatFormFieldModule, MatIconModule, MatInputModule, MatNativeDateModule,
-  MatRadioModule, MatSelectModule, MatSliderModule, MatSlideToggleModule,
-  MatStepperModule, MatTabsModule, MatTooltipModule,
-  MatToolbarModule, MatMenuModule, MatToolbarModule,
-];
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        ...ANGULAR_MATERIAL_MODULES,
-        WidgetLibraryModule,
-        JsonSchemaFormModule,
-        CssFrameworkModule
-    ],
-    declarations: [
-        ...MATERIAL_FRAMEWORK_COMPONENTS,
-    ],
-    exports: [
-        JsonSchemaFormModule,
-        ...MATERIAL_FRAMEWORK_COMPONENTS,
-    ],
-    providers: [
-        JsonSchemaFormService,
-        FrameworkLibraryService,
-        WidgetLibraryService,
-        { provide: Framework, useClass: MaterialDesignFramework, multi: true },
-    ]
-})
-export class MaterialDesignFrameworkModule {
-  constructor() {
-
-  }
-}

package/src/lib/material-design-themes.scss

@@ -1,71 +0,0 @@
-/* see https://material.angular.io/guide/theming */
-
-@use '@angular/material' as mat;
-@include mat.core();
-$indigo-primary: mat.define-palette(mat.$indigo-palette, 500);
-$green-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
-$red-warn: mat.define-palette(mat.$red-palette);
-$pink-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-$deep-purple-primary: mat.define-palette(mat.$deep-purple-palette, 500);
-$amber-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
-$pink-primary: mat.define-palette(mat.$pink-palette, 500);
-$bluegrey-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
-$typography:mat.define-typography-config();
-$density:0;
-
-/*Palettes (primary, accent, warn)-indigo, pink, red */
-
-$indigo-pink-primary: $indigo-primary;
-$indigo-pink-accent: $pink-accent;
-$indigo-pink-warn: $red-warn;
-$indigo-pink-theme: mat.define-light-theme(( color: ( primary: $indigo-pink-primary, accent: $indigo-pink-accent, warn:$indigo-pink-warn), typography: $typography, density: $density));
-.indigo-pink {
-    @include mat.core-theme($indigo-pink-theme);
-    @include mat.all-component-themes($indigo-pink-theme);
-    @include mat.button-color($indigo-pink-theme);
-}
-
-
-/*Palettes (primary, accent, warn)-purple, green, red */
-
-$purple-green-primary: $indigo-primary;
-$purple-green-accent: $green-accent;
-$purple-green-warn: $red-warn;
-$purple-green-theme: mat.define-dark-theme(( color: ( primary: $purple-green-primary, accent: $purple-green-accent, warn:$purple-green-warn)));
-.purple-green {
-    @include mat.core-color($purple-green-theme);
-    @include mat.all-component-colors($purple-green-theme);
-    @include mat.button-color($purple-green-theme);
-}
-
-
-/*Palettes (primary, accent, warn)-deep-purple, amber, red */
-
-$deeppurple-amber-primary: $deep-purple-primary;
-$deeppurple-amber-accent: $amber-accent;
-$deeppurple-amber-warn: $red-warn;
-$deeppurple-amber-theme: mat.define-light-theme(( color: ( primary: $deeppurple-amber-primary, accent: $deeppurple-amber-accent, warn:$deeppurple-amber-warn)));
-.deeppurple-amber {
-    @include mat.core-color($deeppurple-amber-theme);
-    @include mat.all-component-colors($deeppurple-amber-theme);
-    @include mat.button-color($deeppurple-amber-theme);
-}
-
-
-/*Palettes (primary, accent, warn)-pink, blue-grey, red */
-
-$pink-bluegrey-primary: $pink-primary;
-$pink-bluegrey-accent: $bluegrey-accent;
-$pink-bluegrey-warn: $red-warn;
-$pink-bluegrey-theme: mat.define-dark-theme(( color: ( primary: $pink-bluegrey-primary, accent: $pink-bluegrey-accent, warn:$pink-bluegrey-warn)));
-.pink-bluegrey {
-    @include mat.core-color($pink-bluegrey-theme);
-    @include mat.all-component-colors($pink-bluegrey-theme);
-    @include mat.button-color($pink-bluegrey-theme);
-}
-
-.material_default {
-    @include mat.core-color($indigo-pink-theme);
-    @include mat.all-component-colors($indigo-pink-theme);
-    @include mat.button-color($indigo-pink-theme);
-}

package/src/lib/material-design.framework.ts

@@ -1,83 +0,0 @@
-import { Injectable } from '@angular/core';
-import { CssFramework, CssframeworkService } from '@ng-formworks/cssframework';
-import { cssFrameworkCfgMaterialDesign } from './material-design-cssframework';
-import {
-  FlexLayoutRootComponent,
-  FlexLayoutSectionComponent,
-  MaterialAddReferenceComponent,
-  MaterialButtonComponent,
-  MaterialButtonGroupComponent,
-  MaterialCheckboxComponent,
-  MaterialCheckboxesComponent,
-  MaterialChipListComponent,
-  MaterialDatepickerComponent,
-  MaterialDesignFrameworkComponent,
-  MaterialFileComponent,
-  MaterialInputComponent,
-  MaterialNumberComponent,
-  MaterialOneOfComponent,
-  MaterialRadiosComponent,
-  MaterialSelectComponent,
-  MaterialSliderComponent,
-  MaterialStepperComponent,
-  MaterialTabsComponent,
-  MaterialTextareaComponent
-} from './widgets/public_api';
-
-
-// Material Design Framework
-// https://github.com/angular/material2
-
-@Injectable()
-export class MaterialDesignFramework extends CssFramework {
-  name = 'material-design';
-
-  framework = MaterialDesignFrameworkComponent;
-
-  stylesheets = [
-    '//fonts.googleapis.com/icon?family=Material+Icons',
-    '//fonts.googleapis.com/css?family=Roboto:300,400,500,700',
-  ];
-
-  _widgets = {
-    'root': FlexLayoutRootComponent,
-    'section': FlexLayoutSectionComponent,
-    '$ref': MaterialAddReferenceComponent,
-    'button': MaterialButtonComponent,
-    'button-group': MaterialButtonGroupComponent,
-    'checkbox': MaterialCheckboxComponent,
-    'checkboxes': MaterialCheckboxesComponent,
-    'chip-list': MaterialChipListComponent,
-    'date': MaterialDatepickerComponent,
-    'file': MaterialFileComponent,
-    'number': MaterialNumberComponent,
-    'one-of': MaterialOneOfComponent,
-    'radios': MaterialRadiosComponent,
-    'select': MaterialSelectComponent,
-    'slider': MaterialSliderComponent,
-    'stepper': MaterialStepperComponent,
-    'tabs': MaterialTabsComponent,
-    'text': MaterialInputComponent,
-    'textarea': MaterialTextareaComponent,
-    'alt-date': 'date',
-    'any-of': 'one-of',
-    'card': 'section',
-    'color': 'text',
-    'expansion-panel': 'section',
-    'hidden': 'none',
-    'image': 'none',
-    'integer': 'number',
-    'radiobuttons': 'button-group',
-    'range': 'slider',
-    'submit': 'button',
-    'tagsinput': 'chip-list',
-    'wizard': 'stepper',
-  };
-
-  constructor(public cssFWService:CssframeworkService){
-    super(cssFrameworkCfgMaterialDesign,cssFWService);
-    this.widgets=this._widgets
-  }
-
-
-}