@angular/material 2.0.0-alpha.9-3 → 2.0.0-beta.11

package/input/input.css

@@ -1,109 +0,0 @@
-md-input {
-  display: inline-block;
-  position: relative;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  text-align: left; }
-  [dir='rtl'] md-input {
-    text-align: right; }
-
-.md-input-wrapper {
-  margin: 16px 0; }
-
-.md-input-table {
-  display: inline-table;
-  flex-flow: column;
-  vertical-align: bottom;
-  width: 100%; }
-  .md-input-table > * {
-    display: table-cell; }
-
-.md-input-infix {
-  position: relative; }
-
-.md-input-element {
-  font: inherit;
-  background: transparent;
-  color: currentColor;
-  border: none;
-  outline: none;
-  padding: 0;
-  width: 100%; }
-  .md-input-element.md-end {
-    text-align: right; }
-    [dir='rtl'] .md-input-element.md-end {
-      text-align: left; }
-  .md-input-element:-moz-ui-invalid {
-    box-shadow: none; }
-  .md-input-element:-webkit-autofill + .md-input-placeholder {
-    display: block;
-    padding-bottom: 5px;
-    transform: translateY(-100%) scale(0.75);
-    width: 133.33333%; }
-
-.md-input-placeholder {
-  position: absolute;
-  left: 0;
-  top: 0;
-  font-size: 100%;
-  pointer-events: none;
-  z-index: 1;
-  width: 100%;
-  display: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  transform: translateY(0);
-  transform-origin: bottom left;
-  transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), scale 400ms cubic-bezier(0.25, 0.8, 0.25, 1), color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), width 400ms cubic-bezier(0.25, 0.8, 0.25, 1); }
-  .md-input-placeholder.md-empty {
-    display: block;
-    cursor: text; }
-  .md-input-placeholder.md-float:not(.md-empty), .md-input-placeholder.md-float.md-focused {
-    display: block;
-    padding-bottom: 5px;
-    transform: translateY(-100%) scale(0.75);
-    width: 133.33333%; }
-  [dir='rtl'] .md-input-placeholder {
-    transform-origin: bottom right; }
-
-.md-input-underline {
-  position: absolute;
-  height: 1px;
-  width: 100%;
-  margin-top: 4px;
-  border-top-width: 1px;
-  border-top-style: solid; }
-  .md-input-underline.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; }
-  .md-input-underline .md-input-ripple {
-    position: absolute;
-    height: 2px;
-    z-index: 1;
-    top: -1px;
-    width: 100%;
-    transform-origin: top;
-    opacity: 0;
-    transform: scaleY(0);
-    transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); }
-    .md-input-underline .md-input-ripple.md-focused {
-      opacity: 1;
-      transform: scaleY(1); }
-
-.md-hint {
-  position: absolute;
-  font-size: 75%;
-  bottom: -0.5em; }
-  .md-hint.md-right {
-    right: 0; }
-  [dir='rtl'] .md-hint {
-    right: 0;
-    left: auto; }
-    [dir='rtl'] .md-hint.md-right {
-      right: auto;
-      left: 0; }
-
-/*# sourceMappingURL=input.css.map */

package/input/input.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"input/input.css","sources":["input/input.scss","core/style/_variables.scss","core/typography/_typography.scss"],"sourcesContent":["@import '../core/style/variables';\n\n\n$md-input-floating-placeholder-scale-factor: 0.75 !default;\n\n// Gradient for showing the dashed line when the input is disabled.\n$md-input-underline-disabled-background-image:\n    linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);\n\n// Applies a floating placeholder above the input itself.\n@mixin md-input-placeholder-floating {\n  display: block;\n  padding-bottom: 5px;\n  transform: translateY(-100%) scale($md-input-floating-placeholder-scale-factor);\n  width: 100% / $md-input-floating-placeholder-scale-factor;\n}\n\nmd-input {\n  display: inline-block;\n  position: relative;\n  font-family: $md-font-family;\n\n  // To avoid problems with text-align.\n  text-align: left;\n\n  [dir='rtl'] & {\n    text-align: right;\n  }\n}\n\n// Global wrapper. We need to apply margin to the element for spacing, but\n// cannot apply it to the host element directly.\n.md-input-wrapper {\n  margin: 16px 0;\n}\n\n// We use a table layout to baseline align the prefix and suffix classes.\n// The underline is outside of it so it can cover all of the elements under\n// this table.\n// Flex does not respect the baseline. What we really want is akin to a table\n// as want an inline-block where elements don't wrap.\n.md-input-table {\n  display: inline-table;\n  flex-flow: column;\n  vertical-align: bottom;\n  width: 100%;\n\n  & > * {\n    display: table-cell;\n  }\n}\n\n.md-input-infix {\n  position: relative;\n}\n\n// The Input element proper.\n.md-input-element {\n  // Font needs to be inherited, because by default <input> has a system font.\n  font: inherit;\n\n  // The Material input should match whatever background it is above.\n  background: transparent;\n\n  // If background matches current background then so should the color for proper contrast\n  color: currentColor;\n\n  // By default, <input> has a padding, border, outline and a default width.\n  border: none;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  &.md-end {\n    text-align: right;\n\n    [dir='rtl'] & {\n      text-align: left;\n    }\n  }\n\n  // Undo the red box-shadow glow added by Firefox on invalid inputs.\n  // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid\n  &:-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  // Pseudo-class for Chrome and Safari auto-fill to move the placeholder to\n  // the floating position. This is necessary because these browsers do not actually\n  // fire any events when a form auto-fill is occurring.\n  // Once the autofill is committed, a change event happen and the regular md-input\n  // classes take over to fulfill this behaviour.\n  &:-webkit-autofill + .md-input-placeholder {\n    @include md-input-placeholder-floating;\n  }\n}\n\n// The placeholder label. This is invisible unless it is. The logic to show it is\n// basically `empty || (float && (!empty || focused))`. Float is dependent on the\n// `floatingPlaceholder` input.\n.md-input-placeholder {\n  // The placeholder is after the <input>, but needs to be aligned top-left of the\n  // infix <div>.\n  position: absolute;\n  left: 0;\n  top: 0;\n\n  font-size: 100%;\n  pointer-events: none;  // We shouldn't catch mouse events (let them through).\n  z-index: 1;\n\n  // Put ellipsis text overflow.\n  width: 100%;\n  display: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow-x: hidden;\n\n  transform: translateY(0);\n  transform-origin: bottom left;\n  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,\n              scale $swift-ease-out-duration $swift-ease-out-timing-function,\n              color $swift-ease-out-duration $swift-ease-out-timing-function,\n              width $swift-ease-out-duration $swift-ease-out-timing-function;\n\n  &.md-empty {\n    display: block;\n    cursor: text;\n  }\n\n  // Show the placeholder above the input when it's not empty, or focused.\n  &.md-float:not(.md-empty), &.md-float.md-focused {\n    @include md-input-placeholder-floating;\n  }\n\n  [dir='rtl'] & {\n    transform-origin: bottom right;\n  }\n}\n\n// The underline is what's shown under the input, its prefix and its suffix.\n// The ripple is the blue animation coming on top of it.\n.md-input-underline {\n  position: absolute;\n  height: 1px;\n  width: 100%;\n  margin-top: 4px;\n  border-top-width: 1px;\n  border-top-style: solid;\n\n  &.md-disabled {\n    border-top: 0;\n    background-image: $md-input-underline-disabled-background-image;\n    background-position: 0;\n    background-size: 4px 1px;\n    background-repeat: repeat-x;\n  }\n\n  .md-input-ripple {\n    position: absolute;\n    height: 2px;\n    z-index: 1;\n    top: -1px;\n    width: 100%;\n    transform-origin: top;\n    opacity: 0;\n    transform: scaleY(0);\n    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,\n                opacity $swift-ease-out-duration $swift-ease-out-timing-function;\n\n    &.md-focused {\n      opacity: 1;\n      transform: scaleY(1);\n    }\n  }\n}\n\n// The hint is shown below the underline. There can be more than one; one at the start\n// and one at the end.\n.md-hint {\n  position: absolute;\n  font-size: 75%;\n  bottom: -0.5em;\n\n  &.md-right {\n    right: 0;\n  }\n\n  [dir='rtl'] & {\n    right: 0;\n    left: auto;\n\n    &.md-right {\n      right: auto;\n      left: 0;\n    }\n  }\n}\n","@import '../typography/typography';\n\n\n// Typography\n$md-body-font-size-base: rem(1.4) !default;\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\n\n// Media queries\n$md-xsmall: 'max-width: 600px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n\n// Overlay z indices.\n$md-z-index-overlay: 1000;\n$md-z-index-overlay-container: 1;\n$md-z-index-overlay-backdrop: 1;\n\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$md-toggle-padding: 8px !default;\n// Width and height of input toggles\n$md-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n","// Implement the rem unit with SCSS so we don't have to actually set a font-size on\n// the user's body element.\n@function rem($multiplier) {\n  $font-size: 10px;\n  @return $multiplier * $font-size;\n}\n"],"mappings":"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","names":[],"sourceRoot":"/source/"}

package/input/input.d.ts

@@ -1,134 +0,0 @@
-import { AfterContentInit, SimpleChange, ElementRef, QueryList, OnChanges, ModuleWithProviders } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import { MdError } from '../core';
-import { Observable } from 'rxjs/Observable';
-export declare const MD_INPUT_CONTROL_VALUE_ACCESSOR: any;
-export declare class MdInputPlaceholderConflictError extends MdError {
-    constructor();
-}
-export declare class MdInputUnsupportedTypeError extends MdError {
-    constructor(type: string);
-}
-export declare class MdInputDuplicatedHintError extends MdError {
-    constructor(align: string);
-}
-/**
- * The placeholder directive. The content can declare this to implement more
- * complex placeholders.
- */
-export declare class MdPlaceholder {
-}
-/** The hint directive, used to tag content as hint labels (going under the input). */
-export declare class MdHint {
-    align: 'start' | 'end';
-}
-/**
- * Component that represents a text input. It encapsulates the <input> HTMLElement and
- * improve on its behaviour, along with styling it according to the Material Design.
- */
-export declare class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges {
-    private _focused;
-    private _value;
-    /** Callback registered via registerOnTouched (ControlValueAccessor) */
-    private _onTouchedCallback;
-    /** Callback registered via registerOnChange (ControlValueAccessor) */
-    private _onChangeCallback;
-    /**
-     * Aria related inputs.
-     */
-    ariaLabel: string;
-    ariaLabelledBy: string;
-    ariaDisabled: boolean;
-    ariaRequired: boolean;
-    ariaInvalid: boolean;
-    /**
-     * Content directives.
-     */
-    _placeholderChild: MdPlaceholder;
-    _hintChildren: QueryList<MdHint>;
-    /** Readonly properties. */
-    readonly focused: boolean;
-    readonly empty: boolean;
-    readonly characterCount: number;
-    readonly inputId: string;
-    /**
-     * Bindings.
-     */
-    align: 'start' | 'end';
-    dividerColor: 'primary' | 'accent' | 'warn';
-    floatingPlaceholder: boolean;
-    hintLabel: string;
-    autocomplete: string;
-    autocorrect: string;
-    autocapitalize: string;
-    autofocus: boolean;
-    disabled: boolean;
-    id: string;
-    list: string;
-    max: string | number;
-    maxlength: number;
-    min: string | number;
-    minlength: number;
-    placeholder: string;
-    readonly: boolean;
-    required: boolean;
-    spellcheck: boolean;
-    step: number;
-    tabindex: number;
-    type: string;
-    name: string;
-    private _blurEmitter;
-    private _focusEmitter;
-    readonly onBlur: Observable<FocusEvent>;
-    readonly onFocus: Observable<FocusEvent>;
-    value: any;
-    readonly _align: any;
-    _inputElement: ElementRef;
-    /** Set focus on input */
-    focus(): void;
-    _handleFocus(event: FocusEvent): void;
-    _handleBlur(event: FocusEvent): void;
-    _handleChange(event: Event): void;
-    _hasPlaceholder(): boolean;
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    writeValue(value: any): void;
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    registerOnChange(fn: any): void;
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * TODO: internal
-     */
-    registerOnTouched(fn: any): void;
-    /** TODO: internal */
-    ngAfterContentInit(): void;
-    /** TODO: internal */
-    ngOnChanges(changes: {
-        [key: string]: SimpleChange;
-    }): void;
-    /**
-     * Convert the value passed in to a value that is expected from the type of the md-input.
-     * This is normally performed by the *_VALUE_ACCESSOR in forms, but since the type is bound
-     * on our internal input it won't work locally.
-     * @private
-     */
-    private _convertValueForInputType(v);
-    /**
-     * Ensure that all constraints defined by the API are validated, or throw errors otherwise.
-     * Constraints for now:
-     *   - placeholder attribute and <md-placeholder> are mutually exclusive.
-     *   - type attribute is not one of the forbidden types (see constant at the top).
-     *   - Maximum one of each `<md-hint>` alignment specified, with the attribute being
-     *     considered as align="start".
-     * @private
-     */
-    private _validateConstraints();
-}
-export declare class MdInputModule {
-    static forRoot(): ModuleWithProviders;
-}

package/input/input.html

@@ -1,65 +0,0 @@
-<div class="md-input-wrapper">
-  <div class="md-input-table">
-    <div class="md-input-prefix"><ng-content select="[md-prefix]"></ng-content></div>
-
-    <div class="md-input-infix">
-      <input #input
-             aria-target
-             class="md-input-element"
-             [class.md-end]="align == 'end'"
-             [attr.aria-label]="ariaLabel"
-             [attr.aria-labelledby]="ariaLabelledBy"
-             [attr.aria-disabled]="ariaDisabled"
-             [attr.aria-required]="ariaRequired"
-             [attr.aria-invalid]="ariaInvalid"
-             [attr.autocomplete]="autocomplete"
-             [attr.autocorrect]="autocorrect"
-             [attr.autocapitalize]="autocapitalize"
-             [autofocus]="autofocus"
-             [disabled]="disabled"
-             [id]="inputId"
-             [attr.list]="list"
-             [attr.max]="max"
-             [attr.maxlength]="maxlength"
-             [attr.min]="min"
-             [attr.minlength]="minlength"
-             [readonly]="readonly"
-             [required]="required"
-             [spellcheck]="spellcheck"
-             [attr.step]="step"
-             [attr.tabindex]="tabindex"
-             [type]="type"
-             [attr.name]="name"
-             (focus)="_handleFocus($event)"
-             (blur)="_handleBlur($event)"
-             [(ngModel)]="value"
-             (change)="_handleChange($event)">
-
-      <label class="md-input-placeholder"
-             [attr.for]="inputId"
-             [class.md-empty]="empty"
-             [class.md-focused]="focused"
-             [class.md-float]="floatingPlaceholder"
-             [class.md-accent]="dividerColor == 'accent'"
-             [class.md-warn]="dividerColor == 'warn'"
-             *ngIf="_hasPlaceholder()">
-        <ng-content select="md-placeholder"></ng-content>
-        {{placeholder}}
-        <span class="md-placeholder-required" *ngIf="required">*</span>
-      </label>
-    </div>
-
-    <div class="md-input-suffix"><ng-content select="[md-suffix]"></ng-content></div>
-  </div>
-
-  <div class="md-input-underline"
-       [class.md-disabled]="disabled">
-    <span class="md-input-ripple"
-          [class.md-focused]="focused"
-          [class.md-accent]="dividerColor == 'accent'"
-          [class.md-warn]="dividerColor == 'warn'"></span>
-  </div>
-
-  <div *ngIf="hintLabel != ''" class="md-hint">{{hintLabel}}</div>
-  <ng-content select="md-hint"></ng-content>
-</div>