feat(notched-outline): Add MDC Foundation methods (#836)

Change as per material-components-web v0.34.1. reference: material-components/material-components-web#2401
trimox · Apr 9, 2018 · 8b87e14 · 8b87e14
1 parent d4f6ad5
commit 8b87e14
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 31 deletions.
diff --git a/src/lib/notched-outline/notched-outline.ts b/src/lib/notched-outline/notched-outline.ts
@@ -50,18 +50,21 @@ export class MdcNotchedOutline implements OnInit, OnDestroy {
   private _mdcAdapter: MDCNotchedOutlineAdapter = {
     getWidth: () => this.elementRef.nativeElement.offsetWidth,
     getHeight: () => this.elementRef.nativeElement.offsetHeight,
-    setOutlinePathAttr: (value: string) => {
-      this._renderer.setAttribute(this.svgpath.nativeElement, 'd', value);
-    },
+    addClass: (className: string) => this._renderer.addClass(this._getHostElement(), className),
+    removeClass: (className: string) => this._renderer.removeClass(this._getHostElement(), className),
+    setOutlinePathAttr: (value: string) => this._renderer.setAttribute(this.svgpath.nativeElement, 'd', value),
     getIdleOutlineStyleValue: (propertyName: string) => {
-      return window.getComputedStyle(this.outlineIdle.elementRef.nativeElement).getPropertyValue(propertyName);
-    },
+      if (this.outlineIdle) {
+        return window.getComputedStyle(this.outlineIdle.elementRef.nativeElement).getPropertyValue(propertyName);
+      }
+    }
   };
 
-  foundation: {
+  _foundation: {
     init(): void,
     destroy(): void,
-    updateSvgPath(notchWidth: number, isRtl: boolean): void
+    notch(notchWidth: number, isRtl: boolean): void,
+    closeNotch(): void
   } = new MDCNotchedOutlineFoundation(this._mdcAdapter);
 
   constructor(
@@ -70,23 +73,25 @@ export class MdcNotchedOutline implements OnInit, OnDestroy {
     public elementRef: ElementRef) { }
 
   ngOnInit(): void {
-    this.foundation.init();
+    this._foundation.init();
   }
 
   ngOnDestroy(): void {
-    this.foundation.destroy();
+    this._foundation.destroy();
   }
 
-  destroy(): void {
-    this.foundation.destroy();
+  /**
+   * Updates outline selectors and SVG path to open notch.
+   */
+  notch(notchWidth: number, isRtl: boolean): void {
+    this._foundation.notch(notchWidth, isRtl);
   }
 
   /**
-   * Updates the SVG path of the focus outline element based on the given width of the
-   * label element and the RTL context.
+   * Updates the outline selectors to close notch and return it to idle state.
    */
-  updateSvgPath(notchWidth: number, isRtl: boolean): void {
-    this.foundation.updateSvgPath(notchWidth, isRtl);
+  closeNotch() {
+    this._foundation.closeNotch();
   }
 
   /** Retrieves the DOM element of the component host. */

diff --git a/src/lib/textfield/text-field.ts b/src/lib/textfield/text-field.ts
@@ -261,7 +261,8 @@ export class MdcTextField implements AfterContentInit, OnDestroy, ControlValueAc
     hasLabel: () => !!this.floatingLabel,
     getLabelWidth: () => this.floatingLabel.getWidth(),
     hasOutline: () => this.outline,
-    updateOutlinePath: (labelWidth: number, isRtl: boolean) => this.outlined.updateSvgPath(labelWidth, isRtl),
+    notchOutline: (notchWidth: number, isRtl: boolean) => this.outlined.notch(notchWidth, isRtl),
+    closeOutline: () => this.outlined.closeNotch(),
     registerValidationAttributeChangeHandler: (handler: MutationCallback) => {
       const attributeChanges = new MutationObserver(handler);
       return attributeChanges.observe(this.inputText.nativeElement, {
@@ -303,8 +304,10 @@ export class MdcTextField implements AfterContentInit, OnDestroy, ControlValueAc
     deactivateFocus(): void,
     isValid(): boolean,
     setHelperTextContent(content: string): void,
-    updateOutline(): void,
-    getValue(): any
+    notchOutline(openNotch: boolean): void,
+    getValue(): any,
+    shouldFloat: boolean,
+    shouldShake: boolean
   } = new MDCTextFieldFoundation(this._mdcAdapter);
 
   private _iconFoundation: {
@@ -348,7 +351,7 @@ export class MdcTextField implements AfterContentInit, OnDestroy, ControlValueAc
         this.updateIconState();
         if (this.outline && this.outlined) {
           this.outlined.outlineIdle = this.outlineIdle;
-          this._foundation.updateOutline();
+          this._foundation.notchOutline(this.shouldFloat());
         }
 
         this.writeValue(this._value);
@@ -374,17 +377,8 @@ export class MdcTextField implements AfterContentInit, OnDestroy, ControlValueAc
     this._changeDetectorRef.markForCheck();
   }
 
-  private _canFloatLabel(value: any): boolean {
-    if (value) {
-      if (value.length > 0) {
-        return true;
-      }
-    }
-    if (Number(value) || value === 0) {
-      return true;
-    }
-
-    return false;
+  shouldFloat(): boolean {
+    return this._foundation.shouldFloat;
   }
 
   registerOnChange(fn: (value: any) => any): void {
@@ -416,7 +410,7 @@ export class MdcTextField implements AfterContentInit, OnDestroy, ControlValueAc
   }
 
   isBadInput(): boolean {
-    const validity = (this._getHostElement() as HTMLInputElement).validity;
+    const validity = this.inputText.nativeElement.validity;
     return validity && validity.badInput;
   }
 

diff --git a/test/unit/textfield/textfield.test.ts b/test/unit/textfield/textfield.test.ts
@@ -131,6 +131,7 @@ describe('MdcTextField', () => {
       textFieldInstance.helperText.setValidation(true);
       fixture.detectChanges();
       expect(textFieldInstance.helperText.validation).toBe(true);
+      expect(textFieldInstance.isBadInput()).toBe(false);
     });
 
     it('#should set persistent to true', () => {
@@ -143,6 +144,7 @@ describe('MdcTextField', () => {
       testComponent.required = true;
       fixture.detectChanges();
       expect(textFieldInstance.required).toBe(true);
+      expect(textFieldInstance.isRequired()).toBe(true);
     });
 
     it('#should set style shake to true', () => {