feat(): md-input

Author: hansl

ember-cli-build.js

@@ -33,7 +33,7 @@ module.exports = function(defaults) {
     componentCssTree,
     demoAppCssTree,
     demoCssTree,
-  ].concat(dartAppTree || []));
+  ].concat(dartAppTree || []), {overwrite: true});
 };
 
 /** Gets the Dart tree - Transpile Dart files and format them afterward. */

src/components/input/README.md

@@ -0,0 +1,3 @@
+# mdInput
+
+  

src/components/input/input.html

@@ -0,0 +1,19 @@
+<div class="md-wrapper" (click)="input.focus()">
+  <label>
+    <div [class.md-empty]="empty" [class.md-focused]="focused"
+         [class.md-float]="floatingPlaceholder" [class.md-accent]="dividerColor == 'accent'">
+      {{placeholder}}
+      <span *ngIf="required">*</span>
+    </div>
+
+    <input #input aria-target
+           [disabled]="disabled" [required]="required" [attr.maxlength]="maxLength" [attr.type]="type"
+           (focus)="onFocus()" (blur)="onBlur()"
+           [(ngModel)]="value">
+  </label>
+
+  <div class="md-underline" [class.md-disabled]="disabled">
+    <span [class.md-focused]="focused" [class.md-accent]="dividerColor == 'accent'"></span>
+  </div>
+  <div *ngIf="_hintLabel() != ''" class="md-hint" [class.md-right]="_rightAlignHintLabel()">{{_hintLabel()}}</div>
+</div>

src/components/input/input.scss

@@ -0,0 +1,136 @@
+@import 'default-theme';
+@import 'mixins';
+@import 'variables';
+
+
+//
+$md-input-label-color: md-color($md-foreground, hint-text);
+$md-input-floating-label-color: md-color($md-primary);
+$md-input-required-label-color: md-color($md-accent);
+$md-input-underline-color: md-color($md-foreground, hint-text);
+$md-input-underline-color-accent: md-color($md-accent);
+$md-input-underline-disabled-color: md-color($md-foreground, hint-text);
+$md-input-underline-focused-color: md-color($md-primary);
+
+
+:host {
+  display: inline-block;
+  position: relative;
+  font-family: $md-font-family;
+
+  .md-wrapper {
+    margin: 16px 0;
+  }
+
+  input {
+    font-size: 100%;
+    border: none;
+    outline: none;
+    // By default, <input> has a padding.
+    padding: 0;
+    z-index: 1;
+
+    // The input should take 100% width of the component.
+    width: 100%;
+  }
+
+  label > div {
+    position: absolute;
+    visibility: hidden;
+    font-size: 100%;
+    pointer-events: none;
+    color: $md-input-label-color;
+
+    width: 100%;
+
+    transform: translateY(0);
+    transform-origin: bottom left;
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+                scale $swift-ease-out-duration $swift-ease-out-timing-function,
+                color $swift-ease-out-duration $swift-ease-out-timing-function;
+
+    &.md-empty {
+      visibility: visible;
+      cursor: text;
+    }
+
+    &.md-float:not(.md-empty), &.md-float.md-focused {
+      visibility: visible;
+      padding-bottom: 5px;
+      transform: translateY(-100%) scale(0.75);
+
+      span {
+        color: $md-input-required-label-color;
+      }
+    }
+
+    &.md-focused {
+      color: $md-input-floating-label-color;
+
+      &.md-accent {
+        color: $md-input-underline-color-accent;
+      }
+    }
+  }
+
+  .md-underline {
+    position: absolute;
+    height: 1px;
+    width: 100%;
+    margin-top: 4px;
+    border-top: 1px solid $md-input-underline-color;
+
+    &.md-disabled {
+      border-top: 0;
+      background-image: linear-gradient(to right, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.26) 33%, transparent 0%);
+      background-position: 0;
+      background-size: 4px 1px;
+      background-repeat: repeat-x;
+    }
+
+    > span {
+      position: absolute;
+      height: 2px;
+      z-index: 1;
+      background-color: $md-input-underline-focused-color;
+      top: -1px;
+      width: 100%;
+      transform-origin: top;
+      opacity: 0;
+      transform: scaleY(0);
+      transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+                  opacity $swift-ease-out-duration $swift-ease-out-timing-function;
+
+      &.md-accent {
+        background-color: $md-input-underline-color-accent;
+      }
+
+      &.md-focused {
+        opacity: 1;
+        transform: scaleY(1);
+      }
+    }
+  }
+
+  .md-hint {
+    position: absolute;
+    font-size: 75%;
+    bottom: -0.5em;
+
+    &.md-right {
+      right: 0;
+    }
+  }
+}
+
+
+:host-context([dir="rtl"]) {
+  label {
+    transform-origin: bottom right;
+  }
+
+  .md-hint.md-right {
+    right: auto;
+    left: 0;
+  }
+}

src/components/input/input.ts

@@ -0,0 +1,110 @@
+import {
+  forwardRef,
+  Component,
+  Input,
+  Output,
+  Provider,
+} from 'angular2/core';
+import {EventEmitter} from 'angular2/src/facade/async';
+import {CONST_EXPR} from 'angular2/src/facade/lang';
+import {MdAriaTarget, MdAria} from '../../core/utilities/aria-directives';
+import {
+  NG_VALUE_ACCESSOR,
+  ControlValueAccessor
+} from 'angular2/src/common/forms/directives/control_value_accessor';
+import {BooleanFieldValue} from '../../core/annotations/field-value';
+import {OneOf} from '../../core/annotations/one-of';
+
+
+const MD_INPUT_CONTROL_VALUE_ACCESSOR = CONST_EXPR(new Provider(
+    NG_VALUE_ACCESSOR, {
+      useExisting: forwardRef(() => MdInput),
+      multi: true
+    }));
+
+
+/**
+ * <md-input> component.
+ */
+@Component({
+  selector: 'md-input',
+  templateUrl: 'components/input/input.html',
+  styleUrls: ['components/input/input.css'],
+  providers: [MdAria, MD_INPUT_CONTROL_VALUE_ACCESSOR],
+  directives: [MdAriaTarget],
+})
+export class MdInput implements ControlValueAccessor {
+  private _empty: boolean = true;
+  private _focused: boolean = false;
+  private _onTouched: () => void = () => {};
+  private _onChangeFn: (_: any) => void = (_: any) => {};
+  private _value: any = '';
+
+  get focused() { return this._focused; }
+  get empty() { return this._empty; }
+
+  @Input() @BooleanFieldValue() characterCounter: boolean = false;
+  @Input() @BooleanFieldValue() disabled: boolean = false;
+  @Input() @BooleanFieldValue() required: boolean = false;
+  @Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
+
+  @Input() @OneOf(['primary', 'accent']) dividerColor: string = 'primary';
+  @Input() hintLabel: string = '';
+  @Input() maxLength: number = -1;
+  @Input() placeholder: string;
+  @Input() type: string = 'text';
+
+  get value(): any { return this._value; };
+  @Input() set value(v: any) {
+    if (this._value !== v) {
+      this._value = v;
+      this._empty = v === undefined || v === null || (''+v == '');
+      this._onChangeFn(v);
+    }
+  }
+
+  @Output('change') change = new EventEmitter(false);
+
+  /** @override */
+  writeValue(value: any) {
+    if (this._value !== value) {
+      this._value = value;
+      this._empty = value === undefined || value === null || (''+value == '');
+    }
+  }
+
+  /** @override */
+  registerOnChange(fn: any) {
+    this._onChangeFn = fn;
+  }
+
+  /** @override */
+  registerOnTouched(fn: any) {
+    this._onTouched = fn;
+  }
+
+  onFocus() {
+    this._focused = true;
+  }
+  onBlur() {
+    this._focused = false;
+    this._onTouched();
+  }
+
+  private _rightAlignHintLabel(): boolean {
+    return this.characterCounter;
+  }
+
+  private _hintLabel(): string {
+    if (this.characterCounter) {
+      return String(this.value || '').length + (this.maxLength > 0 ? ' / ' + this.maxLength : '');
+    } else {
+      return this.hintLabel;
+    }
+  }
+}
+
+export const MD_INPUT_DIRECTIVES: any[] = CONST_EXPR([
+  MdInput,
+  MdAria,
+]);

src/core/annotations/field-value.dart

@@ -0,0 +1,6 @@
+/**
+ * Annotation for a @BooleanFieldValue() property.
+ */
+class BooleanFieldValue {
+  const BooleanFieldValue();
+}

src/core/annotations/field-value.spec.dart

@@ -0,0 +1 @@
+

src/core/annotations/field-value.spec.ts

@@ -0,0 +1,34 @@
+import {BooleanFieldValue} from './field-value';
+
+describe('BooleanFieldValue', () => {
+  it('should work for null values', () => {
+    let x = new BooleanFieldValueTest();
+
+    x.field = null;
+    expect(x.field).toBe(false);
+
+    x.field = undefined;
+    expect(x.field).toBe(false);
+  });
+
+  it('should work for string values', () => {
+    let x = new BooleanFieldValueTest();
+
+    (<any>x).field = 'hello';
+    expect(x.field).toBe(true);
+
+    (<any>x).field = 'true';
+    expect(x.field).toBe(true);
+
+    (<any>x).field = '';
+    expect(x.field).toBe(true);
+
+    (<any>x).field = 'false';
+    expect(x.field).toBe(false);
+  });
+});
+
+
+class BooleanFieldValueTest {
+  @BooleanFieldValue() field: boolean;
+}

src/core/annotations/field-value.ts

@@ -0,0 +1,38 @@
+import {isPresent} from 'angular2/src/facade/lang';
+
+
+declare var Symbol: any;
+
+
+/**
+ * Annotation Factory that allows HTML style boolean attributes. For example,
+ * a field declared like this:
+
+ * @Directive({ selector: 'component' }) class MyComponent {
+ *   @Input() @BooleanFieldValueFactory() myField: boolean;
+ * }
+ *
+ * You could set it up this way:
+ *   <component myField>
+ * or:
+ *   <component myField="">
+ */
+function booleanFieldValueFactory() {
+  return function booleanFieldValueMetadata(target: any, key: string): void {
+    const defaultValue = target[key];
+
+    // Use a fallback if Symbol isn't available.
+    const localKey = isPresent(Symbol) ? Symbol(key) : `__md_private_symbol_${key}`;
+    target[localKey] = defaultValue;
+
+    Object.defineProperty(target, key, {
+      get() { return this[localKey]; },
+      set(value: boolean) {
+        this[localKey] = isPresent(value) && value !== null && String(value) != 'false';
+      }
+    });
+  };
+}
+
+
+export { booleanFieldValueFactory as BooleanFieldValue };