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

package/select/select.css

@@ -1 +0,0 @@
-.md-select-value,md-option{white-space:nowrap;text-overflow:ellipsis}md-select{display:inline-block;outline:0}.md-select-trigger{display:flex;justify-content:space-between;align-items:center;height:30px;min-width:112px;cursor:pointer;position:relative;box-sizing:border-box}[aria-disabled=true] .md-select-trigger{background-image:linear-gradient(to right,rgba(0,0,0,.26) 0,rgba(0,0,0,.26) 33%,transparent 0);background-size:4px 1px;background-repeat:repeat-x;border-bottom:transparent;background-position:0 bottom;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.md-select-placeholder{position:relative;padding:0 2px;transform-origin:left top}.md-select-placeholder.md-floating-placeholder{top:-22px;left:-2px;transform:scale(.75)}[dir=rtl] .md-select-placeholder{transform-origin:right top}[dir=rtl] .md-select-placeholder.md-floating-placeholder{left:2px}[aria-required=true] .md-select-placeholder::after{content:'*'}.md-select-value{position:absolute;overflow-x:hidden;left:0;top:6px}[dir=rtl] .md-select-value{left:auto;right:0}.md-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px}.md-select-panel{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;padding-top:0;padding-bottom:0;max-height:256px}@media screen and (-ms-high-contrast:active){.md-select-panel{outline:solid 1px}.md-option-ripple{opacity:.5}}md-option{overflow-x:hidden;display:flex;flex-direction:row;align-items:center;height:48px;padding:0 16px;font-size:16px;font-family:Roboto,"Helvetica Neue",sans-serif;text-align:start;text-decoration:none;position:relative;cursor:pointer;outline:0}md-option[disabled]{cursor:default}md-option md-icon{margin-right:16px}[dir=rtl] md-option md-icon{margin-left:16px}md-option[aria-disabled=true]{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.md-option-ripple{position:absolute;top:0;left:0;bottom:0;right:0}

package/select/select.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["select.css"],"names":[],"mappings":"AAAA,gEAAgE;AAChE;;;GAGG;AACH;;;;GAIG;AACH;EACE,sBAAsB;EACtB,cAAc,EAAE;;AAElB;EACE,cAAc;EACd,+BAA+B;EAC/B,oBAAoB;EACpB,aAAa;EACb,iBAAiB;EACjB,gBAAgB;EAChB,mBAAmB;EACnB,uBAAuB,EAAE;EACzB;IACE,6GAA6G;IAC7G,yBAAyB;IACzB,4BAA4B;IAC5B,2BAA2B;IAC3B,8BAA8B;IAC9B,gBAAgB;IAChB,0BAAkB;IAAlB,uBAAkB;IAAlB,sBAAkB;IAAlB,kBAAkB,EAAE;;AAExB;EACE,mBAAmB;EACnB,eAAe;EACf,2BAA2B,EAAE;EAC7B;IACE,WAAW;IACX,WAAW;IACX,uBAAuB,EAAE;EAC3B;IACE,4BAA4B,EAAE;IAC9B;MACE,UAAU,EAAE;EAChB;IACE,aAAa,EAAE;;AAEnB;EACE,mBAAmB;EACnB,oBAAoB;EACpB,mBAAmB;EACnB,wBAAwB;EACxB,QAAQ;EACR,SAAS,EAAE;EACX;IACE,WAAW;IACX,SAAS,EAAE;;AAEf;EACE,SAAS;EACT,UAAU;EACV,mCAAmC;EACnC,oCAAoC;EACpC,sBAAsB;EACtB,cAAc,EAAE;;AAElB;EACE,4HAA4H;EAC5H,iBAAiB;EACjB,iBAAiB;EACjB,eAAe;EACf,kCAAkC;EAClC,eAAe;EACf,kBAAkB;EAClB,kBAAkB,EAAE;EACpB;IACE;MACE,mBAAmB,EAAE,EAAE;;AAE7B;EACE,oBAAoB;EACpB,mBAAmB;EACnB,wBAAwB;EACxB,cAAc;EACd,oBAAoB;EACpB,oBAAoB;EACpB,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EAChB,kDAAkD;EAClD,kBAAkB;EAClB,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,cAAc,EAAE;EAChB;IACE,gBAAgB,EAAE;EACpB;IACE,mBAAmB,EAAE;IACrB;MACE,kBAAkB,EAAE;EACxB;IACE,gBAAgB;IAChB,0BAAkB;IAAlB,uBAAkB;IAAlB,sBAAkB;IAAlB,kBAAkB,EAAE;;AAExB;EACE,mBAAmB;EACnB,OAAO;EACP,QAAQ;EACR,UAAU;EACV,SAAS,EAAE;EACX;IACE;MACE,aAAa,EAAE,EAAE","file":"select.css","sourcesContent":["/** The mixins below are shared between md-menu and md-select */\n/**\n * This mixin adds the correct panel transform styles based\n * on the direction that the menu panel opens.\n */\n/**\n * Applies styles for users in high contrast mode. Note that this only applies\n * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`\n * attribute, however Chrome handles high contrast differently.\n */\nmd-select {\n  display: inline-block;\n  outline: none; }\n\n.md-select-trigger {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 30px;\n  min-width: 112px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box; }\n  [aria-disabled='true'] .md-select-trigger {\n    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);\n    background-size: 4px 1px;\n    background-repeat: repeat-x;\n    border-bottom: transparent;\n    background-position: 0 bottom;\n    cursor: default;\n    user-select: none; }\n\n.md-select-placeholder {\n  position: relative;\n  padding: 0 2px;\n  transform-origin: left top; }\n  .md-select-placeholder.md-floating-placeholder {\n    top: -22px;\n    left: -2px;\n    transform: scale(0.75); }\n  [dir='rtl'] .md-select-placeholder {\n    transform-origin: right top; }\n    [dir='rtl'] .md-select-placeholder.md-floating-placeholder {\n      left: 2px; }\n  [aria-required=true] .md-select-placeholder::after {\n    content: '*'; }\n\n.md-select-value {\n  position: absolute;\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  left: 0;\n  top: 6px; }\n  [dir='rtl'] .md-select-value {\n    left: auto;\n    right: 0; }\n\n.md-select-arrow {\n  width: 0;\n  height: 0;\n  border-left: 5px solid transparent;\n  border-right: 5px solid transparent;\n  border-top: 5px solid;\n  margin: 0 4px; }\n\n.md-select-panel {\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  min-width: 112px;\n  max-width: 280px;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  padding-top: 0;\n  padding-bottom: 0;\n  max-height: 256px; }\n  @media screen and (-ms-high-contrast: active) {\n    .md-select-panel {\n      outline: solid 1px; } }\n\nmd-option {\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n  padding: 0 16px;\n  font-size: 16px;\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  text-align: start;\n  text-decoration: none;\n  position: relative;\n  cursor: pointer;\n  outline: none; }\n  md-option[disabled] {\n    cursor: default; }\n  md-option md-icon {\n    margin-right: 16px; }\n    [dir='rtl'] md-option md-icon {\n      margin-left: 16px; }\n  md-option[aria-disabled='true'] {\n    cursor: default;\n    user-select: none; }\n\n.md-option-ripple {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0; }\n  @media screen and (-ms-high-contrast: active) {\n    .md-option-ripple {\n      opacity: 0.5; } }\n"]}

package/select/select.d.ts

@@ -1,258 +0,0 @@
-import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, QueryList, Renderer } from '@angular/core';
-import { MdOption } from './option';
-import { ListKeyManager } from '../core/a11y/list-key-manager';
-import { Dir } from '../core/rtl/dir';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { ConnectedOverlayDirective } from '../core/overlay/overlay-directives';
-import { ViewportRuler } from '../core/overlay/position/viewport-ruler';
-/**
- * The following style constants are necessary to save here in order
- * to properly calculate the alignment of the selected option over
- * the trigger element.
- */
-/** The fixed height of every option element. */
-export declare const SELECT_OPTION_HEIGHT: number;
-/** The max height of the select's overlay panel */
-export declare const SELECT_PANEL_MAX_HEIGHT: number;
-/** The max number of options visible at once in the select panel. */
-export declare const SELECT_MAX_OPTIONS_DISPLAYED: number;
-/** The fixed height of the select's trigger element. */
-export declare const SELECT_TRIGGER_HEIGHT: number;
-/**
- * Must adjust for the difference in height between the option and the trigger,
- * so the text will align on the y axis.
- * (SELECT_OPTION_HEIGHT (48) - SELECT_TRIGGER_HEIGHT (30)) / 2 = 9
- */
-export declare const SELECT_OPTION_HEIGHT_ADJUSTMENT: number;
-/** The panel's padding on the x-axis */
-export declare const SELECT_PANEL_PADDING_X: number;
-/**
- * The panel's padding on the y-axis. This padding indicates there are more
- * options available if you scroll.
- */
-export declare const SELECT_PANEL_PADDING_Y: number;
-/**
- * The select panel will only "fit" inside the viewport if it is positioned at
- * this value or more away from the viewport boundary.
- */
-export declare const SELECT_PANEL_VIEWPORT_PADDING: number;
-export declare class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestroy {
-    private _element;
-    private _renderer;
-    private _viewportRuler;
-    private _dir;
-    _control: NgControl;
-    /** Whether or not the overlay panel is open. */
-    private _panelOpen;
-    /** The currently selected option. */
-    private _selected;
-    /** Subscriptions to option events. */
-    private _subscriptions;
-    /** Subscription to changes in the option list. */
-    private _changeSubscription;
-    /** Subscription to tab events while overlay is focused. */
-    private _tabSubscription;
-    /** Whether filling out the select is required in the form.  */
-    private _required;
-    /** Whether the select is disabled.  */
-    private _disabled;
-    /** The scroll position of the overlay panel, calculated to center the selected option. */
-    private _scrollTop;
-    /** The placeholder displayed in the trigger of the select. */
-    private _placeholder;
-    /** The animation state of the placeholder. */
-    _placeholderState: string;
-    /**
-     * The width of the trigger. Must be saved to set the min width of the overlay panel
-     * and the width of the selected value.
-     */
-    _triggerWidth: number;
-    /**
-     * The width of the selected option's value. Must be set programmatically
-     * to ensure its overflow is clipped, as it's absolutely positioned.
-     */
-    _selectedValueWidth: number;
-    /** Manages keyboard events for options in the panel. */
-    _keyManager: ListKeyManager;
-    /** View -> model callback called when value changes */
-    _onChange: (value: any) => void;
-    /** View -> model callback called when select has been touched */
-    _onTouched: () => void;
-    /** The IDs of child options to be passed to the aria-owns attribute. */
-    _optionIds: string;
-    /** The value of the select panel's transform-origin property. */
-    _transformOrigin: string;
-    /**
-     * The x-offset of the overlay panel in relation to the trigger's top start corner.
-     * This must be adjusted to align the selected option text over the trigger text when
-     * the panel opens. Will change based on LTR or RTL text direction.
-     */
-    _offsetX: number;
-    /**
-     * The y-offset of the overlay panel in relation to the trigger's top start corner.
-     * This must be adjusted to align the selected option text over the trigger text.
-     * when the panel opens. Will change based on the y-position of the selected option.
-     */
-    _offsetY: number;
-    /**
-     * This position config ensures that the top "start" corner of the overlay
-     * is aligned with with the top "start" of the origin by default (overlapping
-     * the trigger completely). If the panel cannot fit below the trigger, it
-     * will fall back to a position above the trigger.
-     */
-    _positions: {
-        originX: string;
-        originY: string;
-        overlayX: string;
-        overlayY: string;
-    }[];
-    /** Trigger that opens the select. */
-    trigger: ElementRef;
-    /** Overlay pane containing the options. */
-    overlayDir: ConnectedOverlayDirective;
-    /** All of the defined select options. */
-    options: QueryList<MdOption>;
-    /** Placeholder to be shown if no value has been selected. */
-    placeholder: string;
-    /** Whether the component is disabled. */
-    disabled: any;
-    /** Whether the component is required. */
-    required: any;
-    /** Event emitted when the select has been opened. */
-    onOpen: EventEmitter<{}>;
-    /** Event emitted when the select has been closed. */
-    onClose: EventEmitter<{}>;
-    constructor(_element: ElementRef, _renderer: Renderer, _viewportRuler: ViewportRuler, _dir: Dir, _control: NgControl);
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
-    /** Toggles the overlay panel open or closed. */
-    toggle(): void;
-    /** Opens the overlay panel. */
-    open(): void;
-    /** Closes the overlay panel and focuses the host element. */
-    close(): void;
-    /**
-     * Sets the select's value. Part of the ControlValueAccessor interface
-     * required to integrate with Angular's core forms API.
-     *
-     * @param value New value to be written to the model.
-     */
-    writeValue(value: any): void;
-    /**
-     * Saves a callback function to be invoked when the select's value
-     * changes from user input. Part of the ControlValueAccessor interface
-     * required to integrate with Angular's core forms API.
-     *
-     * @param fn Callback to be triggered when the value changes.
-     */
-    registerOnChange(fn: (value: any) => void): void;
-    /**
-     * Saves a callback function to be invoked when the select is blurred
-     * by the user. Part of the ControlValueAccessor interface required
-     * to integrate with Angular's core forms API.
-     *
-     * @param fn Callback to be triggered when the component has been touched.
-     */
-    registerOnTouched(fn: () => {}): void;
-    /**
-     * Disables the select. Part of the ControlValueAccessor interface required
-     * to integrate with Angular's core forms API.
-     *
-     * @param isDisabled Sets whether the component is disabled.
-     */
-    setDisabledState(isDisabled: boolean): void;
-    /** Whether or not the overlay panel is open. */
-    readonly panelOpen: boolean;
-    /** The currently selected option. */
-    readonly selected: MdOption;
-    _isRtl(): boolean;
-    /** The width of the trigger element. This is necessary to match
-     * the overlay width to the trigger width.
-     */
-    _getWidth(): number;
-    /** Ensures the panel opens if activated by the keyboard. */
-    _handleKeydown(event: KeyboardEvent): void;
-    /**
-     * When the panel is finished animating, emits an event and focuses
-     * an option if the panel is open.
-     */
-    _onPanelDone(): void;
-    /**
-     * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
-     * "blur" to the panel when it opens, causing a false positive.
-     */
-    _onBlur(): void;
-    /** Returns the correct tabindex for the select depending on disabled state. */
-    _getTabIndex(): string;
-    /**
-     * Sets the scroll position of the scroll container. This must be called after
-     * the overlay pane is attached or the scroll container element will not yet be
-     * present in the DOM.
-     */
-    _setScrollTop(): void;
-    /**
-     * Sets the selected option based on a value. If no option can be
-     * found with the designated value, the select trigger is cleared.
-     */
-    private _setSelectionByValue(value);
-    /** Clears the select trigger and deselects every option in the list. */
-    private _clearSelection();
-    private _getTriggerRect();
-    /** Sets up a key manager to listen to keyboard events on the overlay panel. */
-    private _initKeyManager();
-    /** Drops current option subscriptions and IDs and resets from scratch. */
-    private _resetOptions();
-    /** Listens to selection events on each option. */
-    private _listenToOptions();
-    /** Unsubscribes from all option subscriptions. */
-    private _dropSubscriptions();
-    /** Records option IDs to pass to the aria-owns property. */
-    private _setOptionIds();
-    /** When a new option is selected, deselects the others and closes the panel. */
-    private _onSelect(option);
-    /** Deselect each option that doesn't match the current selection. */
-    private _updateOptions();
-    /**
-     * Must set the width of the selected option's value programmatically
-     * because it is absolutely positioned and otherwise will not clip
-     * overflow. The selection arrow is 9px wide, add 4px of padding = 13
-     */
-    private _setValueWidth();
-    /** Focuses the selected item. If no option is selected, it will focus
-     * the first item instead.
-     */
-    private _focusCorrectOption();
-    /** Focuses the host element when the panel closes. */
-    private _focusHost();
-    /** Gets the index of the provided option in the option list. */
-    private _getOptionIndex(option);
-    /** Calculates the scroll position and x- and y-offsets of the overlay panel. */
-    private _calculateOverlayPosition();
-    /**
-     * Calculates the scroll position of the select's overlay panel.
-     *
-     * Attempts to center the selected option in the panel. If the option is
-     * too high or too low in the panel to be scrolled to the center, it clamps the
-     * scroll position to the min or max scroll positions respectively.
-     */
-    _calculateOverlayScroll(selectedIndex: number, scrollBuffer: number, maxScroll: number): number;
-    /**
-     * Calculates the y-offset of the select's overlay panel in relation to the
-     * top start corner of the trigger. It has to be adjusted in order for the
-     * selected option to be aligned over the trigger when the panel opens.
-     */
-    private _calculateOverlayOffset(selectedIndex, scrollBuffer, maxScroll);
-    /**
-     * Checks that the attempted overlay position will fit within the viewport.
-     * If it will not fit, tries to adjust the scroll position and the associated
-     * y-offset so the panel can open fully on-screen. If it still won't fit,
-     * sets the offset back to 0 to allow the fallback position to take over.
-     */
-    private _checkOverlayWithinViewport(maxScroll);
-    /** Adjusts the overlay panel up to fit in the viewport. */
-    private _adjustPanelUp(panelHeightBottom, bottomSpaceAvailable);
-    /** Adjusts the overlay panel down to fit in the viewport. */
-    private _adjustPanelDown(panelHeightTop, topSpaceAvailable, maxScroll);
-    /** Sets the transform origin point based on the selected option. */
-    private _getOriginBasedOnOption();
-}

package/select/select.html

@@ -1 +0,0 @@
-<div class="md-select-trigger" cdk-overlay-origin (click)="toggle()" #origin="cdkOverlayOrigin" #trigger><span class="md-select-placeholder" [class.md-floating-placeholder]="this.selected" [@transformPlaceholder]="_placeholderState" [style.width.px]="_selectedValueWidth">{{ placeholder }} </span><span class="md-select-value" *ngIf="selected">{{ selected?.viewValue }} </span><span class="md-select-arrow"></span></div><template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()" backdropClass="cdk-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth" [offsetY]="_offsetY" [offsetX]="_offsetX" (attach)="_setScrollTop()"><div class="md-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()" (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin"><div class="md-select-content" [@fadeInContent]="'showing'"><ng-content></ng-content></div></div></template>