diff --git a/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ b/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ new file mode 100644 index 000000000000..194f9ec7473d --- /dev/null +++ b/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ @@ -0,0 +1,27 @@ +.full-width { + width: 100%; +} + +.shipping-card { + min-width: 120px; + margin: 20px auto; +} + +.mat-radio-button { + display: block; + margin: 5px 0; +} + +.row { + display: flex; + flex-direction: row; +} + +.col { + flex: 1; + margin-right: 20px; +} + +.col:last-child { + margin-right: 0; +} diff --git a/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html new file mode 100644 index 000000000000..f3d77eaca46d --- /dev/null +++ b/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html @@ -0,0 +1,100 @@ +
+ + + Shipping Information + + +
+
+ + + +
+
+
+
+ + + + First name is required + + +
+
+ + + + Last name is required + + +
+
+
+
+ + + + Address is required + + +
+
+
+
+ +
+
+
+
+ + + +
+
+
+
+ + + + City is required + + +
+
+ + + + {{ state.name }} + + + + State is required + + +
+
+
+
+ + + {{postalCode.value.length}} / 5 + +
+
+
+
+ + Free Shipping + Priority Shipping + Next Day Shipping + +
+
+ + + + + +
diff --git a/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts b/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts new file mode 100644 index 000000000000..ad38814c940d --- /dev/null +++ b/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts @@ -0,0 +1,24 @@ + +import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; + +describe('<%= classify(name) %>Component', () => { + let component: <%= classify(name) %>Component; + let fixture: ComponentFixture<<%= classify(name) %>Component>; + + beforeEach(fakeAsync(() => { + TestBed.configureTestingModule({ + declarations: [ <%= classify(name) %>Component ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(<%= classify(name) %>Component); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should compile', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts new file mode 100644 index 000000000000..168a7bfd10d0 --- /dev/null +++ b/src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -0,0 +1,226 @@ +import { Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; +import { FormBuilder, Validators } from '@angular/forms'; + +@Component({ + selector: '<%= selector %>',<% if(inlineTemplate) { %> + template: ` +
+ + + Shipping Information + + +
+
+ + + +
+
+
+
+ + + + First name is required + + +
+
+ + + + Last name is required + + +
+
+
+
+ + + + Address is required + + +
+
+
+
+ +
+
+
+
+ + + +
+
+
+
+ + + + City is required + + +
+
+ + + + {{ state.name }} + + + + State is required + + +
+
+
+
+ + + {{postalCode.value.length}} / 5 + +
+
+
+
+ + Free Shipping + Priority Shipping + Next Day Shipping + +
+
+ + + + + +
+ `,<% } else { %> + templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %> + styles: [ + ` + .full-width { + width: 100%; + } + + .shipping-card { + min-width: 120px; + margin: 20px auto; + } + + .mat-radio-button { + display: block; + margin: 5px 0; + } + + .row { + display: flex; + flex-direction: row; + } + + .col { + flex: 1; + margin-right: 20px; + } + + .col:last-child { + margin-right: 0; + } + ` + ]<% } else { %> + styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>, + encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, + changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> +}) +export class <%= classify(name) %>Component { + addressForm = this.fb.group({ + company: null, + firstName: [null, Validators.required], + lastName: [null, Validators.required], + address: [null, Validators.required], + address2: null, + city: [null, Validators.required], + state: [null, Validators.required], + postalCode: [null, Validators.required, Validators.minLength(5), Validators.maxLength(5)], + shipping: ['free', Validators.required] + }); + + hasUnitNumber = false; + + states = [ + {name:'Alabama', abbreviation:'AL'}, + {name:'Alaska', abbreviation:'AK'}, + {name:'American Samoa', abbreviation:'AS'}, + {name:'Arizona', abbreviation:'AZ'}, + {name:'Arkansas', abbreviation:'AR'}, + {name:'California', abbreviation:'CA'}, + {name:'Colorado', abbreviation:'CO'}, + {name:'Connecticut', abbreviation:'CT'}, + {name:'Delaware', abbreviation:'DE'}, + {name:'District Of Columbia', abbreviation:'DC'}, + {name:'Federated States Of Micronesia', abbreviation:'FM'}, + {name:'Florida', abbreviation:'FL'}, + {name:'Georgia', abbreviation:'GA'}, + {name:'Guam', abbreviation:'GU'}, + {name:'Hawaii', abbreviation:'HI'}, + {name:'Idaho', abbreviation:'ID'}, + {name:'Illinois', abbreviation:'IL'}, + {name:'Indiana', abbreviation:'IN'}, + {name:'Iowa', abbreviation:'IA'}, + {name:'Kansas', abbreviation:'KS'}, + {name:'Kentucky', abbreviation:'KY'}, + {name:'Louisiana', abbreviation:'LA'}, + {name:'Maine', abbreviation:'ME'}, + {name:'Marshall Islands', abbreviation:'MH'}, + {name:'Maryland', abbreviation:'MD'}, + {name:'Massachusetts', abbreviation:'MA'}, + {name:'Michigan', abbreviation:'MI'}, + {name:'Minnesota', abbreviation:'MN'}, + {name:'Mississippi', abbreviation:'MS'}, + {name:'Missouri', abbreviation:'MO'}, + {name:'Montana', abbreviation:'MT'}, + {name:'Nebraska', abbreviation:'NE'}, + {name:'Nevada', abbreviation:'NV'}, + {name:'New Hampshire', abbreviation:'NH'}, + {name:'New Jersey', abbreviation:'NJ'}, + {name:'New Mexico', abbreviation:'NM'}, + {name:'New York', abbreviation:'NY'}, + {name:'North Carolina', abbreviation:'NC'}, + {name:'North Dakota', abbreviation:'ND'}, + {name:'Northern Mariana Islands', abbreviation:'MP'}, + {name:'Ohio', abbreviation:'OH'}, + {name:'Oklahoma', abbreviation:'OK'}, + {name:'Oregon', abbreviation:'OR'}, + {name:'Palau', abbreviation:'PW'}, + {name:'Pennsylvania', abbreviation:'PA'}, + {name:'Puerto Rico', abbreviation:'PR'}, + {name:'Rhode Island', abbreviation:'RI'}, + {name:'South Carolina', abbreviation:'SC'}, + {name:'South Dakota', abbreviation:'SD'}, + {name:'Tennessee', abbreviation:'TN'}, + {name:'Texas', abbreviation:'TX'}, + {name:'Utah', abbreviation:'UT'}, + {name:'Vermont', abbreviation:'VT'}, + {name:'Virgin Islands', abbreviation:'VI'}, + {name:'Virginia', abbreviation:'VA'}, + {name:'Washington', abbreviation:'WA'}, + {name:'West Virginia', abbreviation:'WV'}, + {name:'Wisconsin', abbreviation:'WI'}, + {name:'Wyoming', abbreviation:'WY'} + ]; + + constructor(private fb: FormBuilder) {} + + onSubmit() { + alert('Thanks!'); + } +} diff --git a/src/lib/schematics/address-form/index.ts b/src/lib/schematics/address-form/index.ts new file mode 100644 index 000000000000..ec6c433da264 --- /dev/null +++ b/src/lib/schematics/address-form/index.ts @@ -0,0 +1,31 @@ +import {chain, Rule, noop, Tree, SchematicContext} from '@angular-devkit/schematics'; +import {Schema} from './schema'; +import {addModuleImportToModule, findModuleFromOptions} from '../utils/ast'; +import {buildComponent} from '../utils/devkit-utils/component'; + +/** + * Scaffolds a new table component. + * Internally it bootstraps the base component schematic + */ +export default function(options: Schema): Rule { + return chain([ + buildComponent({...options}), + options.skipImport ? noop() : addFormModulesToModule(options) + ]); +} + +/** + * Adds the required modules to the relative module. + */ +function addFormModulesToModule(options: Schema) { + return (host: Tree) => { + const modulePath = findModuleFromOptions(host, options); + addModuleImportToModule(host, modulePath, 'MatInputModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'MatSelectModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'MatRadioModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'MatCardModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'ReactiveFormsModule', '@angular/forms'); + return host; + }; +} diff --git a/src/lib/schematics/address-form/schema.json b/src/lib/schematics/address-form/schema.json new file mode 100644 index 000000000000..7e209d744a4b --- /dev/null +++ b/src/lib/schematics/address-form/schema.json @@ -0,0 +1,93 @@ +{ + "$schema": "http://json-schema.org/schema", + "id": "SchematicsMaterialAddressForm", + "title": "Material Address Form Options Schema", + "type": "object", + "properties": { + "path": { + "type": "string", + "format": "path", + "description": "The path to create the component.", + "visible": false + }, + "project": { + "type": "string", + "description": "The name of the project.", + "visible": false + }, + "name": { + "type": "string", + "description": "The name of the component.", + "$default": { + "$source": "argv", + "index": 0 + } + }, + "inlineStyle": { + "description": "Specifies if the style will be in the ts file.", + "type": "boolean", + "default": false, + "alias": "s" + }, + "inlineTemplate": { + "description": "Specifies if the template will be in the ts file.", + "type": "boolean", + "default": false, + "alias": "t" + }, + "viewEncapsulation": { + "description": "Specifies the view encapsulation strategy.", + "enum": ["Emulated", "Native", "None"], + "type": "string", + "alias": "v" + }, + "changeDetection": { + "description": "Specifies the change detection strategy.", + "enum": ["Default", "OnPush"], + "type": "string", + "default": "Default", + "alias": "c" + }, + "prefix": { + "type": "string", + "format": "html-selector", + "description": "The prefix to apply to generated selectors.", + "alias": "p" + }, + "styleext": { + "description": "The file extension to be used for style files.", + "type": "string", + "default": "css" + }, + "spec": { + "type": "boolean", + "description": "Specifies if a spec file is generated.", + "default": true + }, + "flat": { + "type": "boolean", + "description": "Flag to indicate if a dir is created.", + "default": false + }, + "skipImport": { + "type": "boolean", + "description": "Flag to skip the module import.", + "default": false + }, + "selector": { + "type": "string", + "format": "html-selector", + "description": "The selector to use for the component." + }, + "module": { + "type": "string", + "description": "Allows specification of the declaring module.", + "alias": "m" + }, + "export": { + "type": "boolean", + "default": false, + "description": "Specifies if declaring module exports the component." + } + } +} diff --git a/src/lib/schematics/address-form/schema.ts b/src/lib/schematics/address-form/schema.ts new file mode 100644 index 000000000000..49a799dd1532 --- /dev/null +++ b/src/lib/schematics/address-form/schema.ts @@ -0,0 +1,3 @@ +import {Schema as ComponentSchema} from '@schematics/angular/component/schema'; + +export interface Schema extends ComponentSchema {} diff --git a/src/lib/schematics/collection.json b/src/lib/schematics/collection.json index d3ca687c794a..1024dff9c67c 100644 --- a/src/lib/schematics/collection.json +++ b/src/lib/schematics/collection.json @@ -28,7 +28,14 @@ "description": "Create a component with a responsive sidenav for navigation", "factory": "./nav/index", "schema": "./nav/schema.json", - "aliases": ["material-nav", "materialNav"] + "aliases": [ "material-nav", "materialNav ] + }, + // Creates a address form component + "addressForm": { + "description": "Create a component with a address form", + "factory": "./address-form/index", + "schema": "./address-form/schema.json", + "aliases": ["address-form"] } } }