@ng-formworks/material 15.2.7

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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,71 @@
+/* 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

@@ -0,0 +1,83 @@
+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
+  }
+
+
+}