diff --git a/src/components/button/button.ts b/src/components/button/button.ts index fbc43bf5791e..0ac746786e5e 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -47,6 +47,7 @@ export class MdButton { this._updateColor(value); } + /** @internal */ setMousedown() { // We only *show* the focus style when focus has come to the button via the keyboard. // The Material Design spec is silent on this topic, and without doing this, the @@ -68,10 +69,12 @@ export class MdButton { } } + /** @internal */ setKeyboardFocus() { this.isKeyboardFocused = !this.isMouseDown; } + /** @internal */ removeKeyboardFocus() { this.isKeyboardFocused = false; } @@ -118,6 +121,7 @@ export class MdAnchor extends MdButton { this._disabled = (value != null && value != false) ? true : null; } + /** @internal */ haltDisabledEvents(event: Event) { // A disabled button shouldn't apply any actions if (this.disabled) { diff --git a/src/components/grid-list/grid-list.ts b/src/components/grid-list/grid-list.ts index dc612c3f3d23..474456161c45 100644 --- a/src/components/grid-list/grid-list.ts +++ b/src/components/grid-list/grid-list.ts @@ -35,26 +35,29 @@ const MD_FIT_MODE = 'fit'; }) export class MdGridList implements OnInit, AfterContentChecked { /** Number of columns being rendered. */ - _cols: number; + private _cols: number; - /** Row height value passed in by user. This can be one of three types: + /** + * Row height value passed in by user. This can be one of three types: * - Number value (ex: "100px"): sets a fixed row height to that value * - Ratio value (ex: "4:3"): sets the row height based on width:height ratio * - "Fit" mode (ex: "fit"): sets the row height to total height divided by number of rows - * */ - _rowHeight: string; + */ + private _rowHeight: string; /** The amount of space between tiles. This will be something like '5px' or '2em'. */ - _gutter: string = '1px'; + private _gutter: string = '1px'; /** Sets position and size styles for a tile */ - _tileStyler: TileStyler; + private _tileStyler: TileStyler; /** Query list of tiles that are being rendered. */ - @ContentChildren(MdGridTile) _tiles: QueryList; + @ContentChildren(MdGridTile) private _tiles: QueryList; - constructor(private _renderer: Renderer, private _element: ElementRef, - private _dir: Dir) {} + constructor( + private _renderer: Renderer, + private _element: ElementRef, + private _dir: Dir) {} @Input() get cols() { @@ -81,13 +84,17 @@ export class MdGridList implements OnInit, AfterContentChecked { this._setTileStyler(); } + /** @internal */ ngOnInit() { this._checkCols(); this._checkRowHeight(); } - /** The layout calculation is fairly cheap if nothing changes, so there's little cost - * to run it frequently. */ + /** + * The layout calculation is fairly cheap if nothing changes, so there's little cost + * to run it frequently. + * @internal + */ ngAfterContentChecked() { this._layoutTiles(); } @@ -131,8 +138,9 @@ export class MdGridList implements OnInit, AfterContentChecked { this.setListStyle(this._tileStyler.getComputedHeight()); } - /** Sets style on the main grid-list element, given the style name and value. - * @internal + /** + * Sets style on the main grid-list element, given the style name and value. + * @internal */ setListStyle(style: [string, string]): void { if (style) { @@ -141,14 +149,16 @@ export class MdGridList implements OnInit, AfterContentChecked { } } -/** Converts values into strings. Falsy values become empty strings. +/** + * Converts values into strings. Falsy values become empty strings. * @internal */ export function coerceToString(value: string | number): string { return `${value || ''}`; } -/** Converts a value that might be a string into a number. +/** + * Converts a value that might be a string into a number. * @internal */ export function coerceToNumber(value: string | number): number { diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index 982b9db75778..046d721dd89c 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -80,8 +80,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { constructor( private _element: ElementRef, private _renderer: Renderer, - private _mdIconRegistry: MdIconRegistry) { - } + private _mdIconRegistry: MdIconRegistry) { } /** * Splits an svgIcon binding value into its icon set and icon name components. @@ -112,6 +111,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { } } + /** @internal */ ngOnChanges(changes: { [propertyName: string]: SimpleChange }) { const changedInputs = Object.keys(changes); // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations. @@ -133,6 +133,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { this._updateAriaLabel(); } + /** @internal */ ngOnInit() { // Update font classes because ngOnChanges won't be called if none of the inputs are present, // e.g. arrow. In this case we need to add a CSS class for the default font. @@ -141,6 +142,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { } } + /** @internal */ ngAfterViewChecked() { // Update aria label here because it may depend on the projected text content. // (e.g. home should use 'home'). diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 104f63931e87..db41ff5135f7 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -24,11 +24,10 @@ import {MdError} from '../../core/errors/error'; const noop = () => {}; -const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider( - NG_VALUE_ACCESSOR, { - useExisting: forwardRef(() => MdInput), - multi: true - }); +const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, { + useExisting: forwardRef(() => MdInput), + multi: true +}); // Invalid input type. Using one of these will throw an MdInputUnsupportedTypeError. const MD_INPUT_INVALID_INPUT_TYPE = [ @@ -71,9 +70,7 @@ export class MdInputDuplicatedHintError extends MdError { export class MdPlaceholder {} -/** - * The hint directive, used to tag content as hint labels (going under the input). - */ +/** The hint directive, used to tag content as hint labels (going under the input). */ @Directive({ selector: 'md-hint', host: { @@ -201,6 +198,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange this._onTouchedCallback = fn; } + /** @internal */ ngAfterContentInit() { this._validateConstraints(); @@ -210,6 +208,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange }); } + /** @internal */ ngOnChanges(changes: {[key: string]: SimpleChange}) { this._validateConstraints(); } diff --git a/src/components/list/list.ts b/src/components/list/list.ts index d70990fcbe6f..78272b41119a 100644 --- a/src/components/list/list.ts +++ b/src/components/list/list.ts @@ -38,6 +38,7 @@ export class MdListAvatar {} export class MdListItem implements AfterContentInit { @ContentChildren(MdLine) _lines: QueryList; + /** @internal */ ngAfterContentInit() { this._setLineClass(this._lines.length); @@ -47,25 +48,25 @@ export class MdListItem implements AfterContentInit { } @ContentChild(MdListAvatar) - set _hasAvatar(avatar: MdListAvatar) { + private set _hasAvatar(avatar: MdListAvatar) { this._setClass('md-list-avatar', avatar != null); } constructor(private _renderer: Renderer, private _element: ElementRef) {} - _setLineClass(count: number): void { + private _setLineClass(count: number): void { this._resetClasses(); if (count === 2 || count === 3) { this._setClass(`md-${count}-line`, true); } } - _resetClasses(): void { + private _resetClasses(): void { this._setClass('md-2-line', false); this._setClass('md-3-line', false); } - _setClass(className: string, bool: boolean): void { + private _setClass(className: string, bool: boolean): void { this._renderer.setElementClass(this._element.nativeElement, className, bool); } } diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index 0f5efc0c93df..de3efc36498e 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -25,37 +25,31 @@ import { changeDetection: ChangeDetectionStrategy.OnPush, }) export class MdProgressBar { - /** - * Value of the progressbar. - * - * Defaults to zero. Mirrored to aria-valuenow. - */ + /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */ private _value: number = 0; + @Input() @HostBinding('attr.aria-valuenow') get value() { return this._value; } + set value(v: number) { - this._value = MdProgressBar.clamp(v || 0); + this._value = clamp(v || 0); } - - /** - * Buffer value of the progress bar. - * - * Defaults to zero. - */ + /** Buffer value of the progress bar. Defaults to zero. */ private _bufferValue: number = 0; + @Input() get bufferValue() { return this._bufferValue; } + set bufferValue(v: number) { - this._bufferValue = MdProgressBar.clamp(v || 0); + this._bufferValue = clamp(v || 0); } - /** * Mode of the progress bar. * @@ -67,18 +61,19 @@ export class MdProgressBar { @HostBinding('attr.mode') mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate'; - - - /** Gets the current transform value for the progress bar's primary indicator. */ + /** + * Gets the current transform value for the progress bar's primary indicator. + * @internal + */ primaryTransform() { let scale = this.value / 100; return `scaleX(${scale})`; } - /** * Gets the current transform value for the progress bar's buffer indicator. Only used if the * progress mode is set to buffer, otherwise returns an undefined, causing no transformation. + * @internal */ bufferTransform() { if (this.mode == 'buffer') { @@ -86,10 +81,9 @@ export class MdProgressBar { return `scaleX(${scale})`; } } +} - - /** Clamps a value to be between two numbers, by default 0 and 100. */ - static clamp(v: number, min = 0, max = 100) { - return Math.max(min, Math.min(max, v)); - } +/** Clamps a value to be between two numbers, by default 0 and 100. */ +function clamp(v: number, min = 0, max = 100) { + return Math.max(min, Math.min(max, v)); } diff --git a/src/components/sidenav/sidenav.ts b/src/components/sidenav/sidenav.ts index 9007cd2b5c71..25e8454f17d1 100644 --- a/src/components/sidenav/sidenav.ts +++ b/src/components/sidenav/sidenav.ts @@ -5,7 +5,6 @@ import { ElementRef, Host, HostBinding, - HostListener, Input, Optional, Output, @@ -20,9 +19,7 @@ import {PromiseCompleter} from '../../core/async/promise-completer'; import {MdError} from '../../core/errors/error'; -/** - * Exception thrown when two MdSidenav are matching the same side. - */ +/** Exception thrown when two MdSidenav are matching the same side. */ export class MdDuplicatedSidenavError extends MdError { constructor(align: string) { super(`A sidenav was already declared for 'align="${align}"'`); @@ -40,6 +37,9 @@ export class MdDuplicatedSidenavError extends MdError { @Component({ selector: 'md-sidenav', template: '', + host: { + '(transitionend)': 'onTransitionEnd($event)', + }, changeDetection: ChangeDetectionStrategy.OnPush, }) export class MdSidenav { @@ -143,13 +143,12 @@ export class MdSidenav { * When transition has finished, set the internal state for classes and emit the proper event. * The event passed is actually of type TransitionEvent, but that type is not available in * Android so we use any. - * @param e The event. - * @private + * @internal */ - @HostListener('transitionend', ['$event']) onTransitionEnd(e: any) { - if (e.target == this._elementRef.nativeElement + onTransitionEnd(transitionEvent: TransitionEvent) { + if (transitionEvent.target == this._elementRef.nativeElement // Simpler version to check for prefixes. - && e.propertyName.endsWith('transform')) { + && transitionEvent.propertyName.endsWith('transform')) { this._transition = false; if (this._opened) { if (this._openPromise != null) { @@ -204,9 +203,9 @@ export class MdSidenav { /** * This is public because we need it from MdSidenavLayout, but it's undocumented and should * not be used outside. - * @private + * @internal */ - public get _width() { + get width() { if (this._elementRef.nativeElement) { return this._elementRef.nativeElement.offsetWidth; } @@ -248,6 +247,19 @@ export class MdSidenavLayout implements AfterContentInit { get start() { return this._start; } get end() { return this._end; } + /** The sidenav at the start/end alignment, independent of direction. */ + private _start: MdSidenav; + private _end: MdSidenav; + + /** + * The sidenav at the left/right. When direction changes, these will change as well. + * They're used as aliases for the above to set the left/right style properly. + * In LTR, _left == _start and _right == _end. + * In RTL, _left == _end and _right == _start. + */ + private _left: MdSidenav; + private _right: MdSidenav; + constructor(@Optional() @Host() private _dir: Dir, private _element: ElementRef, private _renderer: Renderer) { // If a `Dir` directive exists up the tree, listen direction changes and update the left/right @@ -257,6 +269,7 @@ export class MdSidenavLayout implements AfterContentInit { } } + /** @internal */ ngAfterContentInit() { // On changes, assert on consistency. this._sidenavs.changes.subscribe(() => this._validateDrawers()); @@ -268,38 +281,20 @@ export class MdSidenavLayout implements AfterContentInit { * Subscribes to sidenav events in order to set a class on the main layout element when the sidenav * is open and the backdrop is visible. This ensures any overflow on the layout element is properly * hidden. - * */ + * @internal + */ private _watchSidenavToggle(sidenav: MdSidenav): void { if (!sidenav || sidenav.mode === 'side') { return; } sidenav.onOpen.subscribe(() => this._setLayoutClass(sidenav, true)); sidenav.onClose.subscribe(() => this._setLayoutClass(sidenav, false)); } - /* - * Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. - * */ + /* Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. */ private _setLayoutClass(sidenav: MdSidenav, bool: boolean): void { this._renderer.setElementClass(this._element.nativeElement, 'md-sidenav-opened', bool); } - - /** The sidenav at the start/end alignment, independent of direction. */ - private _start: MdSidenav; - private _end: MdSidenav; - - /** - * The sidenav at the left/right. When direction changes, these will change as well. - * They're used as aliases for the above to set the left/right style properly. - * In LTR, _left == _start and _right == _end. - * In RTL, _left == _end and _right == _start. - */ - private _left: MdSidenav; - private _right: MdSidenav; - - /** - * Validate the state of the sidenav children components. - * @private - */ + /** Validate the state of the sidenav children components. */ private _validateDrawers() { this._start = this._end = null; @@ -330,6 +325,7 @@ export class MdSidenavLayout implements AfterContentInit { } } + /** @internal */ closeModalSidenav() { if (this._start != null && this._start.mode != 'side') { this._start.close(); @@ -339,6 +335,7 @@ export class MdSidenavLayout implements AfterContentInit { } } + /** @internal */ isShowingBackdrop(): boolean { return (this._isSidenavOpen(this._start) && this._start.mode != 'side') || (this._isSidenavOpen(this._end) && this._end.mode != 'side'); @@ -355,21 +352,25 @@ export class MdSidenavLayout implements AfterContentInit { * @param mode */ private _getSidenavEffectiveWidth(sidenav: MdSidenav, mode: string): number { - return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav._width : 0; + return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav.width : 0; } + /** @internal */ getMarginLeft() { return this._getSidenavEffectiveWidth(this._left, 'side'); } + /** @internal */ getMarginRight() { return this._getSidenavEffectiveWidth(this._right, 'side'); } + /** @internal */ getPositionLeft() { return this._getSidenavEffectiveWidth(this._left, 'push'); } + /** @internal */ getPositionRight() { return this._getSidenavEffectiveWidth(this._right, 'push'); } diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts index 2638a0066be8..9f78b786f5cc 100644 --- a/src/components/toolbar/toolbar.ts +++ b/src/components/toolbar/toolbar.ts @@ -27,13 +27,13 @@ export class MdToolbar { this._updateColor(value); } - _updateColor(newColor: string) { + private _updateColor(newColor: string) { this._setElementColor(this._color, false); this._setElementColor(newColor, true); this._color = newColor; } - _setElementColor(color: string, isAdd: boolean) { + private _setElementColor(color: string, isAdd: boolean) { if (color != null && color != '') { this.renderer.setElementClass(this.elementRef.nativeElement, `md-${color}`, isAdd); }