diff --git a/src/lib/notched-outline/notched-outline.ts b/src/lib/notched-outline/notched-outline.ts index afbe1a938..1619ac174 100644 --- 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 index 6641be003..18f9e37ec 100644 --- 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 index a50111b18..eb41f8682 100644 --- 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', () => {