fix(forms): remove nglForm prefix from input attributes

BREAKING CHANGE: renamed `nglForm*` attributes to just `*`

  Before:

  ```html
  <... [nglFormLabel]="..."></...>
  <... [nglFormError]="..."></...>
  <... [nglFormRequired]="..."></...>
  ```

  After:

  ```html
  <... [label]="..."></...>
  <... [error]="..."></...>
  <... [required]="..."></...>
  ```

Closes #217

Author: bekos

demo/components/demo/components/forms/API.md

@@ -1,8 +1,8 @@
 # `<ngl-form-element>`
 
 ### Input
-  * `nglFormLabel?: string | TemplateRef`: Input label.
-  * `nglFormError?: string`: Error message.
+  * `label?: string | TemplateRef`: Input label.
+  * `error?: string`: Error message.
 
 ### Content
 
@@ -13,9 +13,9 @@
 # `<fieldset[ngl-form-group], fieldset[ngl-form-group-alt]>`
 
 ### Input
-  * `nglFormLabel?: string`: Group label.
-  * `nglFormError?: string`: Error message.
-  * `nglFormRequired?: boolean = false`: Wheter it is required.
+  * `label?: string`: Group label.
+  * `error?: string`: Error message.
+  * `required?: boolean = false`: Wheter it is required.
 
 ### Content
 

demo/components/demo/components/forms/forms.html

@@ -1,46 +1,46 @@
-<ngl-form-element nglFormLabel="Required" style="display: inline-block;">
+<ngl-form-element label="Required" style="display: inline-block;">
   <input type="checkbox" [(ngModel)]="required" />
 </ngl-form-element>
-<ngl-form-element nglFormLabel="Error" style="display: inline-block;">
+<ngl-form-element label="Error" style="display: inline-block;">
   <input type="checkbox" [(ngModel)]="hasError" />
 </ngl-form-element>
 
-<ngl-form-element nglFormLabel="Input Label" [nglFormError]="hasError ? error : null" class="slds-m-top--small">
+<ngl-form-element label="Input Label" [error]="hasError ? error : null" class="slds-m-top--small">
   <input type="text" placeholder="My input" [required]="required">
 </ngl-form-element>
 
-<ngl-form-element [nglFormError]="hasError ? error : null" class="slds-m-top--small">
+<ngl-form-element [error]="hasError ? error : null" class="slds-m-top--small">
   <template nglFormLabel><i>Textarea Label</i> <span *ngIf="required">(<b>required</b>!)</span></template>
   <textarea placeholder="Placeholder Text" [required]="required"></textarea>
 </ngl-form-element>
 
-<ngl-form-element nglFormLabel="Select Label" [nglFormError]="hasError ? error : null" class="slds-m-top--small">
+<ngl-form-element label="Select Label" [error]="hasError ? error : null" class="slds-m-top--small">
   <select class="slds-select" [required]="required">
     <option>Option One</option>
     <option>Option Two</option>
     <option>Option Three</option>
   </select>
 </ngl-form-element>
 
-<ngl-form-element nglFormLabel="Checkbox Label" [nglFormError]="hasError ? error : null" class="slds-m-top--small">
+<ngl-form-element label="Checkbox Label" [error]="hasError ? error : null" class="slds-m-top--small">
   <input type="checkbox" [required]="required" />
 </ngl-form-element>
 
-<fieldset ngl-form-group nglFormLabel="Radio Group Label" [nglFormRequired]="required" [nglFormError]="hasError ? error : null" class="slds-m-top--small">
-  <label ngl-form-group-element nglFormLabel="Radio Label One"><input type="radio" /></label>
-  <label ngl-form-group-element nglFormLabel="Radio Label Two"><input type="radio" /></label>
+<fieldset ngl-form-group label="Radio Group Label" [required]="required" [error]="hasError ? error : null" class="slds-m-top--small">
+  <label ngl-form-group-element label="Radio Label One"><input type="radio" /></label>
+  <label ngl-form-group-element label="Radio Label Two"><input type="radio" /></label>
 </fieldset>
 
-<fieldset ngl-form-group-alt [nglFormRequired]="required" [nglFormError]="hasError ? error : null" class="slds-m-top--small">
+<fieldset ngl-form-group-alt [required]="required" [error]="hasError ? error : null" class="slds-m-top--small">
   <template nglFormLabel><i>Alternate Radio Group</i></template>
   <label ngl-form-group-element *ngFor="let day of days"><template nglFormLabel>{{day}}</template><input type="radio" /></label>
 </fieldset>
 
-<fieldset ngl-form-group nglFormLabel="Checkbox Group Label" [nglFormRequired]="required" [nglFormError]="hasError ? error : null" class="slds-m-top--small">
-  <label ngl-form-group-element nglFormLabel="Checkbox Label One"><input type="checkbox" /></label>
-  <label ngl-form-group-element nglFormLabel="Checkbox Label Two"><input type="checkbox" /></label>
+<fieldset ngl-form-group label="Checkbox Group Label" [required]="required" [error]="hasError ? error : null" class="slds-m-top--small">
+  <label ngl-form-group-element label="Checkbox Label One"><input type="checkbox" /></label>
+  <label ngl-form-group-element label="Checkbox Label Two"><input type="checkbox" /></label>
 </fieldset>
 
-<fieldset ngl-form-group-alt nglFormLabel="Alternate Checkbox Group" [nglFormRequired]="required" [nglFormError]="hasError ? error : null" class="slds-m-top--small">
-  <label ngl-form-group-element *ngFor="let day of days" [nglFormLabel]="day"><input type="checkbox" /></label>
+<fieldset ngl-form-group-alt label="Alternate Checkbox Group" [required]="required" [error]="hasError ? error : null" class="slds-m-top--small">
+  <label ngl-form-group-element *ngFor="let day of days" [label]="day"><input type="checkbox" /></label>
 </fieldset>

demo/components/demo/components/modals/modals.html

@@ -13,12 +13,12 @@
   </template>
 </ngl-modal>
 
-<ngl-form-element nglFormLabel="Empty header" class="slds-m-top--small">
+<ngl-form-element label="Empty header" class="slds-m-top--small">
   <input type="checkbox" [(ngModel)]="noHeader" />
 </ngl-form-element>
-<ngl-form-element nglFormLabel="Empty footer" class="slds-m-top--small">
+<ngl-form-element label="Empty footer" class="slds-m-top--small">
   <input type="checkbox" [(ngModel)]="noFooter" />
 </ngl-form-element>
-<ngl-form-element nglFormLabel="Directional footer" class="slds-m-top--small">
+<ngl-form-element label="Directional footer" class="slds-m-top--small">
   <input type="checkbox" [(ngModel)]="directional" [disabled]="noFooter" />
 </ngl-form-element>

src/forms/elements/checkbox.spec.ts

@@ -41,7 +41,7 @@ describe('`NglFormCheckbox`', () => {
 
 @Component({
   template: `
-    <ngl-form-element [nglFormLabel]="label">
+    <ngl-form-element [label]="label">
       <input type="checkbox" />
     </ngl-form-element>
   `,

src/forms/elements/element.ts

@@ -15,10 +15,10 @@ import {NglFormLabelTemplate, getFormLabel} from '../form-label';
 export class NglFormElement {
   @ContentChild(NglFormInput) contentEl: NglFormInput;
 
-  @Input('nglFormLabel') label: string;
+  @Input('label') labelStr: string;
   @ContentChild(NglFormLabelTemplate) labelTpl: NglFormLabelTemplate;
 
-  @Input('nglFormError') set setError(error: string) {
+  @Input('error') set setError(error: string) {
     this.error = error;
     if (this.contentEl) {
       this.setInputErrorId();
@@ -31,22 +31,29 @@ export class NglFormElement {
 
   required = false;
 
-  get _label(): TemplateRef<any> | string {
-    return getFormLabel(this.label, this.labelTpl);
-  }
+  _label: TemplateRef<any> | string;
 
   get isCheckbox() {
     return this.contentEl instanceof NglFormCheckbox;
   }
 
   constructor(public detector: ChangeDetectorRef) {}
 
+  ngOnChanges() {
+    this.setFormLabel();
+  }
+
   ngAfterContentInit() {
     this.contentEl.setup(this.uid);
     this.setInputErrorId();
+    this.setFormLabel();
   }
 
   private setInputErrorId() {
     this.contentEl.describedBy = this.error ? `error_${this.uid}` : null;
   }
+
+  private setFormLabel() {
+    this._label = getFormLabel(this.labelStr, this.labelTpl);
+  }
 };

src/forms/elements/input.spec.ts

@@ -52,7 +52,7 @@ describe('`NglFormInput`', () => {
   });
 
   it('should render error message', () => {
-    const fixture = createTestComponent(`<ngl-form-element [nglFormError]="error"><input type="text"></ngl-form-element>`);
+    const fixture = createTestComponent(`<ngl-form-element [error]="error"><input type="text"></ngl-form-element>`);
     const element = fixture.nativeElement.firstElementChild;
 
     expect(element).not.toHaveCssClass('slds-has-error');
@@ -77,7 +77,7 @@ describe('`NglFormInput`', () => {
 
 @Component({
   template: `
-    <ngl-form-element [nglFormLabel]="label">
+    <ngl-form-element [label]="label">
       <input type="text">
     </ngl-form-element>
   `,

src/forms/elements/select.spec.ts

@@ -55,7 +55,7 @@ describe('`NglFormSelect`', () => {
 
 @Component({
   template: `
-    <ngl-form-element [nglFormLabel]="label">
+    <ngl-form-element [label]="label">
       <select></select>
     </ngl-form-element>
   `,

src/forms/elements/textarea.spec.ts

@@ -55,7 +55,7 @@ describe('`NglFormTextarea`', () => {
 
 @Component({
   template: `
-    <ngl-form-element [nglFormLabel]="label">
+    <ngl-form-element [label]="label">
       <textarea></textarea>
     </ngl-form-element>
   `,

src/forms/groups/element.spec.ts

@@ -20,8 +20,8 @@ describe('`NglFormGroupElement`', () => {
 
   it('should render checkbox group correctly', () => {
     const fixture = createTestComponent(`<fieldset ngl-form-group>
-          <label ngl-form-group-element [nglFormLabel]="label"><input type="checkbox" /></label>
-          <label ngl-form-group-element nglFormLabel="Checkbox Label Two"><input type="checkbox" /></label>
+          <label ngl-form-group-element [label]="label"><input type="checkbox" /></label>
+          <label ngl-form-group-element label="Checkbox Label Two"><input type="checkbox" /></label>
         </fieldset>`);
     const labelEls = getLabelElements(fixture.nativeElement);
     expect(labelEls.map(e => e.textContent.trim())).toEqual(['Label One', 'Checkbox Label Two']);
@@ -37,8 +37,8 @@ describe('`NglFormGroupElement`', () => {
   it('should render radio group correctly', () => {
     const fixture = createTestComponent(`
       <fieldset ngl-form-group>
-        <label ngl-form-group-element [nglFormLabel]="label"><input type="radio" /></label>
-        <label ngl-form-group-element nglFormLabel="Radio Label Two"><input type="radio" /></label>
+        <label ngl-form-group-element [label]="label"><input type="radio" /></label>
+        <label ngl-form-group-element label="Radio Label Two"><input type="radio" /></label>
       </fieldset>`);
     const labelEls = getLabelElements(fixture.nativeElement);
     expect(labelEls.map(e => e.textContent.trim())).toEqual(['Label One', 'Radio Label Two']);

src/forms/groups/element.ts

@@ -11,15 +11,17 @@ import {NglFormLabelTemplate, getFormLabel} from '../form-label';
 export class NglFormGroupElement {
   @ContentChild(NglFormGroupCheckbox) contentEl: NglFormGroupCheckbox;
 
-  @Input('nglFormLabel') label: string;
+  @Input('label') labelStr: string;
   @ContentChild(NglFormLabelTemplate) labelTpl: NglFormLabelTemplate;
 
-  get _label(): TemplateRef<any> | string {
-    return getFormLabel(this.label, this.labelTpl);
-  }
+  _label: TemplateRef<any> | string;
 
   constructor(@Optional() private groupAlt: NglFormGroupAlternate, private element: ElementRef, private renderer: Renderer) {}
 
+  ngOnChanges() {
+    this.setFormLabel();
+  }
+
   ngAfterContentInit() {
     const { type } = this.contentEl;
 
@@ -30,5 +32,11 @@ export class NglFormGroupElement {
     } else {
       this.renderer.setElementClass(this.element.nativeElement, `slds-${type}`, true);
     }
+
+    this.setFormLabel();
+  }
+
+  private setFormLabel() {
+    this._label = getFormLabel(this.labelStr, this.labelTpl);
   }
 };