@ajsf/material 0.2.0-beta.1 → 0.4.0-beta.1

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

@@ -1,120 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import {Component, Inject, Input, OnInit, Optional} from '@angular/core';
-import { JsonSchemaFormService, buildTitleMap, isArray } from '@ajsf/core';
-import { MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material/core';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-select-widget',
-  template: `
-    <mat-form-field
-      [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
-      [class]="options?.htmlClass || ''"
-      [floatLabel]="options?.floatLabel || matLabelGlobalOptions?.float || (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>
-      <mat-select *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.name]="controlName"
-        [id]="'control' + layoutNode?._id"
-        [multiple]="options?.multiple"
-        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        (blur)="options.showErrors = true">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <mat-option *ngIf="!isArray(selectItem?.items)"
-            [value]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </mat-option>
-          <mat-optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <mat-option *ngFor="let subItem of selectItem.items"
-              [value]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </mat-option>
-          </mat-optgroup>
-        </ng-template>
-      </mat-select>
-      <mat-select *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.name]="controlName"
-        [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
-        [multiple]="options?.multiple"
-        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-        [required]="options?.required"
-        [style.width]="'100%'"
-        [value]="controlValue"
-        (blur)="options.showErrors = true"
-        (change)="updateValue($event)">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <mat-option *ngIf="!isArray(selectItem?.items)"
-            [attr.selected]="selectItem?.value === controlValue"
-            [value]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </mat-option>
-          <mat-optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <mat-option *ngFor="let subItem of selectItem.items"
-              [attr.selected]="subItem?.value === controlValue"
-              [value]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </mat-option>
-          </mat-optgroup>
-        </ng-template>
-      </mat-select>
-      <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-form-field-wrapper .mat-form-field-flex
-      .mat-form-field-infix { width: initial; }
-  `],
-})
-export class MaterialSelectComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  selectList: any[] = [];
-  isArray = isArray;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,
-    @Inject(MAT_LABEL_GLOBAL_OPTIONS) @Optional() public matLabelGlobalOptions,
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.selectList = buildTitleMap(
-      this.options.titleMap || this.options.enumNames,
-      this.options.enum, !!this.options.required, !!this.options.flatList
-    );
-    this.jsf.initializeControl(this, !this.options.readonly);
-    if (!this.options.notitle && !this.options.description && this.options.placeholder) {
-      this.options.description = this.options.placeholder;
-    }
-  }
-
-  updateValue(event) {
-    this.options.showErrors = true;
-    this.jsf.updateValue(this, event.value);
-  }
-}

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

@@ -1,61 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '@ajsf/core';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-slider-widget',
-  template: `
-    <mat-slider thumbLabel *ngIf="boundControl"
-      [formControl]="formControl"
-      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-      [id]="'control' + layoutNode?._id"
-      [max]="options?.maximum"
-      [min]="options?.minimum"
-      [step]="options?.multipleOf || options?.step || 'any'"
-      [style.width]="'100%'"
-      (blur)="options.showErrors = true"></mat-slider>
-    <mat-slider thumbLabel *ngIf="!boundControl"
-      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-      [disabled]="controlDisabled || options?.readonly"
-      [id]="'control' + layoutNode?._id"
-      [max]="options?.maximum"
-      [min]="options?.minimum"
-      [step]="options?.multipleOf || options?.step || 'any'"
-      [style.width]="'100%'"
-      [value]="controlValue"
-      (blur)="options.showErrors = true"
-      (change)="updateValue($event)"></mat-slider>
-    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
-      [innerHTML]="options?.errorMessage"></mat-error>`,
-    styles: [` mat-error { font-size: 75%; } `],
-})
-export class MaterialSliderComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  allowNegative = true;
-  allowDecimal = true;
-  allowExponents = false;
-  lastValidNumber = '';
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this, !this.options.readonly);
-  }
-
-  updateValue(event) {
-    this.options.showErrors = true;
-    this.jsf.updateValue(this, event.value);
-  }
-}

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

@@ -1,35 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '@ajsf/core';
-
-// TODO: Add this control
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-stepper-widget',
-  template: ``,
-})
-export class MaterialStepperComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this);
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}

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

@@ -1,69 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '@ajsf/core';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-tabs-widget',
-  template: `
-    <nav mat-tab-nav-bar
-      [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>
-    <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>`,
-  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

@@ -1,90 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import {Component, Inject, Input, OnInit, Optional} from '@angular/core';
-import { JsonSchemaFormService } from '@ajsf/core';
-import { MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material/core';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-textarea-widget',
-  template: `
-    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
-      [class]="options?.htmlClass || ''"
-      [floatLabel]="options?.floatLabel || matLabelGlobalOptions?.float || (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-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,
-    @Inject(MAT_LABEL_GLOBAL_OPTIONS) @Optional() public matLabelGlobalOptions,
-    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/test.ts

@@ -1,21 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: any;
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

package/tsconfig.lib.json

@@ -1,25 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "target": "es2015",
-    "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

@@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}

package/tsconfig.spec.json

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

package/tslint.json

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