@ng-formworks/material 15.2.7

package/src/lib/widgets/material-tabs.component.ts

@@ -0,0 +1,72 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { JsonSchemaFormService } from '@ng-formworks/core';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-tabs-widget',
+  template: `
+    <nav mat-tab-nav-bar [tabPanel]="tabPanel"
+      [attr.aria-label]="options?.label || options?.title || ''"
+      [style.width]="'100%'">
+        <a mat-tab-link *ngFor="let item of layoutNode?.items; let i = index"
+          [active]="selectedItem === i"
+          (click)="select(i)">
+          <span *ngIf="showAddTab || item.type !== '$ref'"
+            [innerHTML]="setTabTitle(item, i)"></span>
+        </a>
+    </nav>
+    <mat-tab-nav-panel #tabPanel>
+      <div *ngFor="let layoutItem of layoutNode?.items; let i = index"
+        [class]="options?.htmlClass || ''">
+        <select-framework-widget *ngIf="selectedItem === i"
+          [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
+          [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
+          [layoutIndex]="(layoutIndex || []).concat(i)"
+          [layoutNode]="layoutItem"></select-framework-widget>
+      </div>
+    </mat-tab-nav-panel>
+`,
+  styles: [` a { cursor: pointer; } `],
+})
+export class MaterialTabsComponent implements OnInit {
+  options: any;
+  itemCount: number;
+  selectedItem = 0;
+  showAddTab = true;
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  constructor(
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  ngOnInit() {
+    this.options = this.layoutNode.options || {};
+    this.itemCount = this.layoutNode.items.length - 1;
+    this.updateControl();
+  }
+
+  select(index) {
+    if (this.layoutNode.items[index].type === '$ref') {
+      this.jsf.addItem({
+        layoutNode: this.layoutNode.items[index],
+        layoutIndex: this.layoutIndex.concat(index),
+        dataIndex: this.dataIndex.concat(index)
+      });
+      this.updateControl();
+    }
+    this.selectedItem = index;
+  }
+
+  updateControl() {
+    this.itemCount = this.layoutNode.items.length - 1;
+    const lastItem = this.layoutNode.items[this.layoutNode.items.length - 1];
+    this.showAddTab = lastItem.type === '$ref' &&
+      this.itemCount < (lastItem.options.maxItems || 1000);
+  }
+
+  setTabTitle(item: any, index: number): string {
+    return this.jsf.setArrayItemTitle(this, item, index);
+  }
+}

package/src/lib/widgets/material-textarea.component.ts

@@ -0,0 +1,88 @@
+import { Component, Inject, Input, OnInit, Optional } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { JsonSchemaFormService } from '@ng-formworks/core';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'material-textarea-widget',
+  template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
+      [class]="options?.htmlClass || ''"
+      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+      [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <textarea matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [required]="options?.required"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [style.width]="'100%'"
+        (blur)="options.showErrors = true"></textarea>
+      <textarea matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [required]="options?.required"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [style.width]="'100%'"
+        [value]="controlValue"
+        (input)="updateValue($event)"
+        (blur)="options.showErrors = true"></textarea>
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+  styles: [`
+    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
+    ::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex
+      .mat-form-field-infix { width: initial; }
+  `],
+})
+export class MaterialTextareaComponent implements OnInit {
+  formControl: AbstractControl;
+  controlName: string;
+  controlValue: any;
+  controlDisabled = false;
+  boundControl = false;
+  options: any;
+  @Input() layoutNode: any;
+  @Input() layoutIndex: number[];
+  @Input() dataIndex: number[];
+
+  constructor(
+    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,
+    private jsf: JsonSchemaFormService
+  ) { }
+
+  ngOnInit() {
+    this.options = this.layoutNode.options || {};
+    this.jsf.initializeControl(this);
+    if (!this.options.notitle && !this.options.description && this.options.placeholder) {
+      this.options.description = this.options.placeholder;
+    }
+  }
+
+  updateValue(event) {
+    this.jsf.updateValue(this, event.target.value);
+  }
+}

package/src/lib/widgets/public_api.ts

@@ -0,0 +1,54 @@
+import { FlexLayoutRootComponent } from './flex-layout-root.component';
+import { FlexLayoutSectionComponent } from './flex-layout-section.component';
+import { MaterialAddReferenceComponent } from './material-add-reference.component';
+import { MaterialButtonComponent } from './material-button.component';
+import { MaterialButtonGroupComponent } from './material-button-group.component';
+import { MaterialCheckboxComponent } from './material-checkbox.component';
+import { MaterialCheckboxesComponent } from './material-checkboxes.component';
+import { MaterialChipListComponent } from './material-chip-list.component';
+import { MaterialDatepickerComponent } from './material-datepicker.component';
+import { MaterialDesignFrameworkComponent } from '../material-design-framework.component';
+import { MaterialFileComponent } from './material-file.component';
+import { MaterialInputComponent } from './material-input.component';
+import { MaterialNumberComponent } from './material-number.component';
+import { MaterialOneOfComponent } from './material-one-of.component';
+import { MaterialRadiosComponent } from './material-radios.component';
+import { MaterialSelectComponent } from './material-select.component';
+import { MaterialSliderComponent } from './material-slider.component';
+import { MaterialStepperComponent } from './material-stepper.component';
+import { MaterialTabsComponent } from './material-tabs.component';
+import { MaterialTextareaComponent } from './material-textarea.component';
+
+
+export const MATERIAL_FRAMEWORK_COMPONENTS = [
+  FlexLayoutRootComponent, FlexLayoutSectionComponent,
+  MaterialAddReferenceComponent, MaterialOneOfComponent,
+  MaterialButtonComponent, MaterialButtonGroupComponent,
+  MaterialCheckboxComponent, MaterialCheckboxesComponent,
+  MaterialChipListComponent, MaterialDatepickerComponent,
+  MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent,
+  MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent,
+  MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent,
+  MaterialDesignFrameworkComponent
+];
+
+export { FlexLayoutRootComponent } from './flex-layout-root.component';
+export { FlexLayoutSectionComponent } from './flex-layout-section.component';
+export { MaterialAddReferenceComponent } from './material-add-reference.component';
+export { MaterialOneOfComponent } from './material-one-of.component';
+export { MaterialButtonComponent } from './material-button.component';
+export { MaterialButtonGroupComponent } from './material-button-group.component';
+export { MaterialCheckboxComponent } from './material-checkbox.component';
+export { MaterialCheckboxesComponent } from './material-checkboxes.component';
+export { MaterialChipListComponent } from './material-chip-list.component';
+export { MaterialDatepickerComponent } from './material-datepicker.component';
+export { MaterialFileComponent } from './material-file.component';
+export { MaterialInputComponent } from './material-input.component';
+export { MaterialNumberComponent } from './material-number.component';
+export { MaterialRadiosComponent } from './material-radios.component';
+export { MaterialSelectComponent } from './material-select.component';
+export { MaterialSliderComponent } from './material-slider.component';
+export { MaterialStepperComponent } from './material-stepper.component';
+export { MaterialTabsComponent } from './material-tabs.component';
+export { MaterialTextareaComponent } from './material-textarea.component';
+export { MaterialDesignFrameworkComponent } from '../material-design-framework.component';

package/src/public_api.ts

@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of @ng-formworks/material-framework
+ */
+
+export * from './lib/material-design-framework.component';
+export * from './lib/material-design-framework.module';
+export * from './lib/material-design.framework';
+export * from './lib/widgets/public_api';
+

package/src/test.ts

@@ -0,0 +1,17 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);

package/tailwind-input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./src/**/*.{html,ts}",
+        "./projects/ng-formworks-material/**/*.{html,ts}"
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}

package/tsconfig.lib.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declarationMap": true,
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tslint.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ]
+  }
+}