@angular/material 2.0.0-beta.0 → 2.0.0-beta.12

package/button/button.scss

@@ -1,105 +0,0 @@
-// TODO(jelbourn): Measure perf benefits for translate3d and will-change.
-// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
-
-@import 'button-base';
-@import '../core/a11y/a11y';
-
-// TODO(kara): Replace attribute selectors with class selectors when possible
-[md-button], [md-icon-button] {
-  @extend %md-button-base;
-
-  // Only flat buttons and icon buttons (not raised or fabs) have a hover style.
-  &:hover {
-    // Use the same visual treatment for hover as for focus.
-    .md-button-focus-overlay {
-      opacity: 1;
-    }
-  }
-
-  &[disabled]:hover {
-    &.md-primary, &.md-accent, &.md-warn, .md-button-focus-overlay {
-      background-color: transparent;
-    }
-  }
-}
-
-[md-raised-button] {
-  @extend %md-raised-button;
-}
-
-[md-fab] {
-  @include md-fab($md-fab-size, $md-fab-padding);
-}
-
-[md-mini-fab] {
-  @include md-fab($md-mini-fab-size, $md-mini-fab-padding);
-}
-
-[md-icon-button] {
-  padding: 0;
-
-  // Reset the min-width from the button base.
-  min-width: 0;
-
-  width: $md-icon-button-size;
-  height: $md-icon-button-size;
-
-  flex-shrink: 0;
-
-  line-height: $md-icon-button-size;
-  border-radius: $md-icon-button-border-radius;
-
-  i, md-icon {
-    line-height: $md-icon-button-line-height;
-  }
-}
-
-// The text and icon should be vertical aligned inside a button
-[md-button], [md-raised-button], [md-icon-button] {
-  .md-button-wrapper > * {
-    vertical-align: middle;
-  }
-}
-
-// The ripple container should match the bounds of the entire button.
-.md-button-ripple, .md-button-focus-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
-// element, however we use a proper DOM element in order to be able to disable the default
-// touch action. This makes the buttons more responsive on touch devices.
-.md-button-focus-overlay {
-  // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
-  // black, 12% opacity shade over the normal color (for both light and dark themes).
-  background-color: rgba(black, 0.12);
-  border-radius: inherit;
-  pointer-events: none;
-  opacity: 0;
-
-  @include cdk-high-contrast {
-    // Note that IE will render this in the same way, no
-    // matter whether the theme is light or dark. This helps
-    // with the readability of focused buttons.
-    background-color: rgba(white, 0.5);
-  }
-}
-
-// For round buttons, the ripple container should clip child ripples to a circle.
-.md-button-ripple-round {
-  border-radius: 50%;
-  // z-index needed to make clipping to border-radius work correctly.
-  // http://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti
-  z-index: 1;
-}
-
-// Add an outline to make it more visible in high contrast mode.
-@include cdk-high-contrast {
-  [md-button], [md-raised-button], [md-icon-button], [md-fab], [md-mini-fab] {
-    outline: solid 1px;
-  }
-}

package/button/index.js

@@ -1,3 +0,0 @@
-export * from './button';
-
-//# sourceMappingURL=index.js.map

package/button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC","file":"index.js","sourcesContent":["export * from './button';\n"]}

package/button-toggle/OVERVIEW.md

@@ -1,22 +0,0 @@
-`<md-button-toggle>` are on/off toggles with the appearance of a button. These toggles can be 
-configured to behave as either radio-buttons or checkboxes. While they can be standalone, they are 
-typically part of a `md-button-toggle-group`.
-
-
-<!-- example(button-toggle-overview) -->
-
-### Exclusive selection vs. multiple selection
-By default, `md-button-toggle-group` acts like a radio-button group- only one item can be selected.
-In this mode, the `value` of the `md-button-toggle-group` will reflect the value of the selected 
-button and `ngModel` is supported. 
-
-Adding the `multiple` attribute allows multiple items to be selected (checkbox behavior). In this
-mode the values of the the toggles are not used, the `md-button-toggle-group` does not have a value, 
-and `ngModel` is not supported.
-
-### Accessibility
-The button-toggles will present themselves as either checkboxes or radio-buttons based on the 
-presence of the `multiple` attribute. 
-
-### Orientation
-The button-toggles can be rendered in a vertical orientation by adding the `vertical` attribute.

package/button-toggle/README.md

@@ -1,139 +0,0 @@
-# md-button-toggle
-
-`MdButtonToggle` is a group of buttons that can be toggled.
-There are two modes, `multiple` and `exclusive`.
-When in 'exclusive' mode, only one button can be selected at a time (like radio buttons).
-When in 'multiple' mode, multiple buttons can be selected at once (like checkboxes).
-You can read more about button toggles in the
-[Material Design spec](https://material.google.com/components/buttons.html#buttons-toggle-buttons).
-
-## Usage
-
-### Basic Usage
-
-`md-button-toggle` can be used on its own and acts as a checkbox.
-
-```html
-<md-button-toggle>Bold</md-button-toggle>
-```
-
-Output:
-
-![Basic Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/basic-toggle.png)
-
-### Exclusive Selection
-
-`md-button-toggle` can be used in an exclusive selection group when surrounded by
-`md-button-toggle-group`. This styles all buttons within the group to appear as a single
-group of button toggles and allows only one button toggle to be selected at a time.
-
-```html
-<md-button-toggle-group name="alignment">
-    <md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle>
-    <md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle>
-    <md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle>
-    <md-button-toggle value="justify"><md-icon>format_align_justify</md-icon></md-button-toggle>
-</md-button-toggle-group>
-```
-
-Output:
-
-![Exclusive Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/exclusive-toggle.png)
-
-### Multiple Selection
-
-`md-button-toggle` can be used in a multiple selection group when surrounded by
-`md-button-toggle-group multiple`. This styles all buttons within the group to appear as a single
-group of button toggles. This component does not yet support `NgModel` when using `multiple` mode.
-
-```html
-<md-button-toggle-group multiple>
-    <md-button-toggle>Flour</md-button-toggle>
-    <md-button-toggle>Eggs</md-button-toggle>
-    <md-button-toggle>Sugar</md-button-toggle>
-    <md-button-toggle>Milk</md-button-toggle>
-</md-button-toggle-group>
-```
-
-Output:
-
-![Multiple Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/multi-toggle.png)
-
-## Dynamic Exclusive Selection
-
-`md-button-toggle`s can be used with `ngModel` to dynamically create groups and update the value for
-a group.
-
-```html
-<md-button-toggle-group name="pies" [(ngModel)]="favoritePie">
-    <md-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
-        {{pie}}
-    </md-button-toggle>
-</md-button-toggle-group>
-<p>Your favorite type of pie is: {{favoritePie}}</p>
-```
-
-### Disabled Button Toggle
-
-`md-button-toggle-group` and `md-button-toggle` can both be disabled by adding a `disabled`
-attribute to either one. Adding `disabled` to an exclusive group or a multiple group will disable
-the entire group. Adding `disabled` to a single toggle will disable that toggle.
-
-```html
-<md-button-toggle-group disabled>
-    <md-button-toggle value="one">One</md-button-toggle>
-    <md-button-toggle value="two">Two</md-button-toggle>
-    <md-button-toggle value="three">Three</md-button-toggle>
-</md-button-toggle-group>
-
-<md-button-toggle-group>
-    <md-button-toggle value="red" disabled>Red</md-button-toggle>
-    <md-button-toggle value="blue">Blue</md-button-toggle>
-</md-button-toggle-group>
-```
-
-Output:
-
-![Disabled Toggle Buttons Example](https://material.angularjs.org/material2_assets/button-toggle/disabled-toggles.png)
-
-## `<md-button-toggle>`
-
-### Bound Properties
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `id` | string | The unique ID of the toggle. IDs are generated by default when not specified. |
-| `name` | string | Optional, defaults to parent group name if one exists for exclusive selection toggles, otherwise null. This is used to differentiate between different groups. |
-| `value` | any | Value of the toggle. Only used when in a group to determine which are selected. |
-| `checked` | boolean | Optional, default = `false`. Whether or not the toggle is checked. |
-| `disabled` | boolean | Optional, default = `false`. Whether or not the toggle is disabled |
-
-### Events
-
-| Name | Description |
-| --- | --- |
-| `change` | Emitted when the `checked` value is changed. |
-
-## `<md-button-toggle-group>`
-
-### Bound Properties
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `name` | string | Optional, the name of the group. |
-| `disabled` | boolean | Optional, default = `false`. |
-| `value` | any | The current value for the group. Will be set to the value of the selected toggle or a list of values from the selected toggles. |
-| `selected` | `mdButtonToggle` | The current selected toggle or a list of the selected toggles. |
-| `vertical` | boolean | Whether the group should show the toggles vertically. Default is `false`. |
-
-### Attributes
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `multiple` | boolean | Optional, default = `false`. Whether or not the group allows multiple selection. |
-
-### Events
-
-| Name | Description |
-| --- | --- |
-| `change` | Emitted when the `value` of the group changes. |

package/button-toggle/_button-toggle-theme.scss

@@ -1,14 +0,0 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-
-
-@mixin md-button-toggle-theme($theme) {
-  $foreground: map-get($theme, foreground);
-
-  .md-button-toggle-checked .md-button-toggle-label-content {
-    background-color: md-color($md-grey, 300);
-  }
-  .md-button-toggle-disabled .md-button-toggle-label-content {
-    background-color: md-color($foreground, disabled);
-  }
-}

package/button-toggle/button-toggle.css

@@ -1 +0,0 @@
-md-button-toggle-group{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);position:relative;display:inline-flex;flex-direction:row;border-radius:2px;cursor:pointer;white-space:nowrap}.md-button-toggle-vertical{flex-direction:column}.md-button-toggle-vertical .md-button-toggle-label-content{display:block}.md-button-toggle-disabled .md-button-toggle-label-content{cursor:default}md-button-toggle{white-space:nowrap}.md-button-toggle-label-content{display:inline-block;line-height:36px;padding:0 16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.md-button-toggle-label-content>*{vertical-align:middle}

package/button-toggle/button-toggle.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["button-toggle.css"],"names":[],"mappings":"AAAA;EACE,0HAA0H;EAC1H,mBAAmB;EACnB,qBAAqB;EACrB,oBAAoB;EACpB,mBAAmB;EACnB,gBAAgB;EAChB,oBAAoB,EAAE;;AAExB;EACE,uBAAuB,EAAE;EACzB;IACE,eAAe,EAAE;;AAErB;EACE,gBAAgB,EAAE;;AAEpB;EACE,oBAAoB,EAAE;;AAExB;EACE,sBAAsB;EACtB,kBAAkB;EAClB,gBAAgB;EAChB,gBAAgB;EAChB,0BAAkB;EAAlB,uBAAkB;EAAlB,sBAAkB;EAAlB,kBAAkB,EAAE;;AAEtB;EACE,uBAAuB,EAAE","file":"button-toggle.css","sourcesContent":["md-button-toggle-group {\n  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  border-radius: 2px;\n  cursor: pointer;\n  white-space: nowrap; }\n\n.md-button-toggle-vertical {\n  flex-direction: column; }\n  .md-button-toggle-vertical .md-button-toggle-label-content {\n    display: block; }\n\n.md-button-toggle-disabled .md-button-toggle-label-content {\n  cursor: default; }\n\nmd-button-toggle {\n  white-space: nowrap; }\n\n.md-button-toggle-label-content {\n  display: inline-block;\n  line-height: 36px;\n  padding: 0 16px;\n  cursor: pointer;\n  user-select: none; }\n\n.md-button-toggle-label-content > * {\n  vertical-align: middle; }\n"]}

package/button-toggle/button-toggle.d.ts

@@ -1,136 +0,0 @@
-import { ModuleWithProviders, ElementRef, Renderer, OnInit, QueryList, AfterViewInit } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import { Observable } from 'rxjs/Observable';
-import { UniqueSelectionDispatcher } from '../core';
-/** Acceptable types for a button toggle. */
-export declare type ToggleType = 'checkbox' | 'radio';
-/**
- * Provider Expression that allows md-button-toggle-group to register as a ControlValueAccessor.
- * This allows it to support [(ngModel)].
- * @docs-private
- */
-export declare const MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any;
-/** Change event object emitted by MdButtonToggle. */
-export declare class MdButtonToggleChange {
-    source: MdButtonToggle;
-    value: any;
-}
-/** Exclusive selection button toggle group that behaves like a radio-button group. */
-export declare class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor {
-    /** The value for the button toggle group. Should match currently selected button toggle. */
-    private _value;
-    /** The HTML name attribute applied to toggles in this group. */
-    private _name;
-    /** Disables all toggles in the group. */
-    private _disabled;
-    /** Whether the button toggle group should be vertical. */
-    private _vertical;
-    /** The currently selected button toggle, should match the value. */
-    private _selected;
-    /** Whether the button toggle group is initialized or not. */
-    private _isInitialized;
-    /**
-     * The method to be called in order to update ngModel.
-     * Now `ngModel` binding is not supported in multiple selection mode.
-     */
-    private _controlValueAccessorChangeFn;
-    /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
-    onTouched: () => any;
-    /** Event emitted when the group's value changes. */
-    private _change;
-    readonly change: Observable<MdButtonToggleChange>;
-    /** Child button toggle buttons. */
-    _buttonToggles: QueryList<MdButtonToggle>;
-    ngAfterViewInit(): void;
-    /** `name` attribute for the underlying `input` element. */
-    name: string;
-    /** Whether the toggle group is disabled. */
-    disabled: boolean;
-    /** Whether the toggle group is vertical. */
-    vertical: boolean;
-    /** Value of the toggle group. */
-    value: any;
-    /** Whether the toggle group is selected. */
-    selected: MdButtonToggle;
-    private _updateButtonToggleNames();
-    private _updateSelectedButtonToggleFromValue();
-    /** Dispatch change event with current selection and group value. */
-    private _emitChangeEvent();
-    /**
-     * Sets the model value. Implemented as part of ControlValueAccessor.
-     * @param value Value to be set to the model.
-     */
-    writeValue(value: any): void;
-    /**
-     * Registers a callback that will be triggered when the value has changed.
-     * Implemented as part of ControlValueAccessor.
-     * @param fn On change callback function.
-     */
-    registerOnChange(fn: (value: any) => void): void;
-    /**
-     * Registers a callback that will be triggered when the control has been touched.
-     * Implemented as part of ControlValueAccessor.
-     * @param fn On touch callback function.
-     */
-    registerOnTouched(fn: any): void;
-}
-/** Multiple selection button-toggle group. `ngModel` is not supported in this mode. */
-export declare class MdButtonToggleGroupMultiple {
-    /** Disables all toggles in the group. */
-    private _disabled;
-    /** Whether the button toggle group should be vertical. */
-    private _vertical;
-    /** Whether the toggle group is disabled. */
-    disabled: boolean;
-    /** Whether the toggle group is vertical. */
-    vertical: boolean;
-}
-/** Single button inside of a toggle group. */
-export declare class MdButtonToggle implements OnInit {
-    buttonToggleDispatcher: UniqueSelectionDispatcher;
-    private _renderer;
-    /** Whether or not this button toggle is checked. */
-    private _checked;
-    /** Type of the button toggle. Either 'radio' or 'checkbox'. */
-    _type: ToggleType;
-    /** The unique ID for this button toggle. */
-    id: string;
-    /** HTML's 'name' attribute used to group radios for unique selection. */
-    name: string;
-    /** Whether or not this button toggle is disabled. */
-    private _disabled;
-    /** Value assigned to this button toggle. */
-    private _value;
-    /** Whether or not the button toggle is a single selection. */
-    private _isSingleSelector;
-    /** The parent button toggle group (exclusive selection). Optional. */
-    buttonToggleGroup: MdButtonToggleGroup;
-    /** The parent button toggle group (multiple selection). Optional. */
-    buttonToggleGroupMultiple: MdButtonToggleGroupMultiple;
-    /** Event emitted when the group value changes. */
-    private _change;
-    readonly change: Observable<MdButtonToggleChange>;
-    _inputElement: ElementRef;
-    constructor(toggleGroup: MdButtonToggleGroup, toggleGroupMultiple: MdButtonToggleGroupMultiple, buttonToggleDispatcher: UniqueSelectionDispatcher, _renderer: Renderer);
-    ngOnInit(): void;
-    /** Unique ID for the underlying `input` element. */
-    readonly inputId: string;
-    /** Whether the button is checked. */
-    checked: boolean;
-    /** MdButtonToggleGroup reads this to assign its own value. */
-    value: any;
-    /** Dispatch change event with current value. */
-    private _emitChangeEvent();
-    /** Whether the button is disabled. */
-    disabled: boolean;
-    /** Toggle the state of the current button toggle. */
-    private _toggle();
-    /** Checks the button toggle due to an interaction with the underlying native input. */
-    _onInputChange(event: Event): void;
-    _onInputClick(event: Event): void;
-    /** Focuses the button. */
-    focus(): void;
-}
-export declare class MdButtonToggleModule {
-    static forRoot(): ModuleWithProviders;
-}

package/button-toggle/button-toggle.html

@@ -1 +0,0 @@
-<label [attr.for]="inputId" class="md-button-toggle-label"><input #input class="md-button-toggle-input cdk-visually-hidden" [type]="_type" [id]="inputId" [checked]="checked" [disabled]="disabled" [name]="name" (change)="_onInputChange($event)" (click)="_onInputClick($event)"><div class="md-button-toggle-label-content"><ng-content></ng-content></div></label>