@ajsf/material 22.2.1 → 22.3.0

package/README.md

@@ -1,67 +1,57 @@
 # @ajsf/material
 
-## Getting started
+Angular Material framework for [AJSF](https://github.com/hamzahamidi/ajsf#readme), which builds Angular forms from JSON Schema.
 
-```shell
-npm install @ajsf/material@latest
-```
+## Getting started
 
-With YARN, run the following:
+`@ajsf/material` declares `@angular/material` and `@angular/cdk` as peer dependencies and needs a Material theme. `ng add @angular/material` installs both and writes a theme:
 
 ```shell
-yarn add @ajsf/material@latest
+ng add @angular/material
+npm install @ajsf/material
 ```
 
-Then import `MaterialDesignFrameworkModule` in your main application module if you want to use `material-angular` UI, like this:
-
-```javascript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+Import `MaterialDesignFrameworkModule` in the standalone component that renders the form. Nothing goes in `app.config.ts`, and no animations provider is needed:
 
+```typescript
+import { Component } from '@angular/core';
 import { MaterialDesignFrameworkModule } from '@ajsf/material';
 
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [ AppComponent ],
-  imports: [
-    MaterialDesignFrameworkModule
-  ],
-  providers: [],
-  bootstrap: [ AppComponent ]
+@Component({
+  selector: 'app-root',
+  imports: [MaterialDesignFrameworkModule],
+  templateUrl: './app.html',
 })
-export class AppModule { }
+export class App {
+  schema = {
+    type: 'object',
+    properties: {
+      name: { type: 'string', title: 'Name' },
+      plan: { type: 'string', title: 'Plan', enum: ['free', 'pro', 'team'] },
+    },
+    required: ['name'],
+  };
+
+  onSubmit(data: any) {
+    console.log(data);
+  }
+}
 ```
 
-For basic use, after loading JsonSchemaFormModule as described above, to display a form in your Angular component, simply add the following to your component's template:
+In an `NgModule` app, add `MaterialDesignFrameworkModule` to the module's `imports` instead.
+
+Then render the form in the component's template:
 
 ```html
 <json-schema-form
-  loadExternalAssets="true"
-  [schema]="yourJsonSchema"
+  [schema]="schema"
   framework="material-design"
-  (onSubmit)="yourOnSubmitFn($event)">
+  (onSubmit)="onSubmit($event)">
 </json-schema-form>
 ```
 
-Where `schema` is a valid JSON schema object, and `onSubmit` calls a function to process the submitted JSON form data. If you don't already have your own schemas, you can find a bunch of samples to test with in the `demo/assets/example-schemas` folder, as described above.
-
-`framework` is for the template you want to use, the default value is `no-framwork`. The possible values are:
-
-* `material-design` for  Material Design.
-* `bootstrap-3` for Bootstrap 3.
-* `bootstrap-4` for 'Bootstrap 4.
-* `no-framework` for (plain HTML).
-
-## Code scaffolding
-
-Run `ng generate component component-name --project @ajsf/material` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project @ajsf/material`.
-> Note: Don't forget to add `--project @ajsf/material` or else it will be added to the default project in your `angular.json` file.
-
-## Build
-
-Run `ng build @ajsf/material` to build the project. The build artifacts will be stored in the `dist/` directory.
+`framework="material-design"` selects this package's widgets. The other values are `primeng`, `bootstrap-3`, `bootstrap-4`, `bootstrap-5` and `no-framework`, the default.
 
-## Running unit tests
+This package takes the initial bundle of a new app to 1.40 MB, above the 1 MB `maximumError` budget `ng new` writes into `angular.json`, so raise the `initial` budget of the `production` configuration, for example to `"maximumWarning": "2MB"` and `"maximumError": "2.5MB"`.
 
-Run `ng test @ajsf/material` to execute the unit tests via [Karma](https://karma-runner.github.io).
+The [AJSF README](https://github.com/hamzahamidi/ajsf#readme) covers the other inputs and outputs, layouts, custom widgets and validation messages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajsf/material",
-  "version": "22.2.1",
+  "version": "22.3.0",
   "description": "Angular JSON Schema Form builder using Angular Material UI",
   "author": "https://github.com/hamzahamidi/ajsf/graphs/contributors",
   "keywords": [
@@ -29,7 +29,7 @@
   "funding": "https://github.com/sponsors/hamzahamidi",
   "private": false,
   "dependencies": {
-    "@ajsf/core": "^22.2.1",
+    "@ajsf/core": "^22.3.0",
     "tslib": "^2.0.0"
   },
   "peerDependencies": {