diff --git a/types/angular-material/angular-material-tests.ts b/types/angular-material/angular-material-tests.ts index f9195ec999..d1af7c8159 100644 --- a/types/angular-material/angular-material-tests.ts +++ b/types/angular-material/angular-material-tests.ts @@ -1,15 +1,12 @@ - - -var myApp = angular.module('testModule', ['ngMaterial']); +const myApp = angular.module('testModule', ['ngMaterial']); myApp.config(( $mdThemingProvider: ng.material.IThemingProvider, $mdIconProvider: ng.material.IIconProvider, $mdProgressCircularProvider: ng.material.IProgressCircularProvider) => { - $mdThemingProvider.alwaysWatchTheme(true); - var neonRedMap: ng.material.IPalette = $mdThemingProvider.extendPalette('red', { - '500': 'ff0000' + const neonRedMap: ng.material.IPalette = $mdThemingProvider.extendPalette('red', { + 500: 'ff0000' }); // Register the new color palette map with the name neonRed $mdThemingProvider.definePalette('neonRed', neonRedMap); @@ -21,12 +18,13 @@ myApp.config(( .warnPalette('red') .dark(true); - var browserColors: ng.material.IBrowserColors = { - theme: 'default', - palette: 'neonRed', - hue: '500' + const browserColors: ng.material.IBrowserColors = { + theme: 'default', + palette: 'neonRed', + hue: '500' }; - $mdThemingProvider.enableBrowserColor(browserColors); + const removeColors = $mdThemingProvider.enableBrowserColor(browserColors); + removeColors(); // Disable theming generation at runtime $mdThemingProvider.disableTheming(); @@ -41,44 +39,67 @@ myApp.config(( $mdProgressCircularProvider.configure({ progressSize: 100, strokeWidth: 20, - duration: 800 + duration: 800, + easeFn(t, b, c, d) { + t /= d; + return c * t * t + b; + }, + easeFnIndeterminate(t, b, c, d) { + return c * Math.pow(2, 10 * (t / d - 1)) + b; + } }); }); -myApp.controller('BottomSheetController', ($scope: ng.IScope, $mdBottomSheet: ng.material.IBottomSheetService) => { +myApp.controller('BottomSheetController', ($scope: ng.IScope, $mdBottomSheet: ng.material.IBottomSheetService, $q: ng.IQService) => { $scope['openBottomSheet'] = () => { $mdBottomSheet.show({ template: 'Hello!', clickOutsideToClose: true, disableBackdrop: true, disableParentScroll: false, - parent: () => {} }); + + const options: ng.material.IBottomSheetOptions = {}; + + options.resolve = { + nativePromise: () => Promise.resolve(), + angularPromise: () => $q.resolve(), + annotatedNativePromise: ['fakeService', (fake) => Promise.resolve()], + annotatedAngularPromise: ['fakeService', (fake) => $q.resolve()] + }; + + options.controller = 'TestController'; + options.controller = (function TestController(param: any) { }); + options.controller = (class { }); + options.controller = ['fakeService', function TestController(fake: any) { }]; + options.controller = ['fakeService', class { }]; + + options.parent = (scope, element) => new Element(); + options.parent = (scope, element) => angular.element(new Element()); + options.parent = '#container'; + options.parent = new Element(); + options.parent = angular.element(new Element()); }; $scope['hideBottomSheet'] = $mdBottomSheet.hide.bind($mdBottomSheet, 'hide'); $scope['cancelBottomSheet'] = $mdBottomSheet.cancel.bind($mdBottomSheet, 'cancel'); }); myApp.controller('ColorController', ($scope: ng.IScope, $mdColor: ng.material.IColorService) => { - var colorExpression : ng.material.IColorExpression; - var element : Element; - - colorExpression = { color: '#FFFFFF' } - - element = new Element(); + const colorExpression: ng.material.IColorExpression = { color: '#FFFFFF' }; + const element: Element = new Element(); $scope['applyThemeColors'] = () => { $mdColor.applyThemeColors(element, colorExpression); }; $scope['getThemeColor'] = () => { - $mdColor.getThemeColor('default-neonRed') + $mdColor.getThemeColor('default-neonRed'); }; $scope['hasTheme'] = () => { $mdColor.hasTheme(); }; }); -myApp.controller('DialogController', ($scope: ng.IScope, $mdDialog: ng.material.IDialogService) => { +myApp.controller('DialogController', ($scope: ng.IScope, $mdDialog: ng.material.IDialogService, $q: ng.IQService) => { $scope['openDialog'] = () => { $mdDialog.show({ template: 'Hello!' @@ -120,16 +141,56 @@ myApp.controller('DialogController', ($scope: ng.IScope, $mdDialog: ng.material. }; $scope['hideDialog'] = $mdDialog.hide.bind($mdDialog, 'hide'); $scope['cancelDialog'] = $mdDialog.cancel.bind($mdDialog, 'cancel'); + + const alertPreset: ng.material.IAlertDialog = $mdDialog.alert() + .resolve({ + nativePromise: () => Promise.resolve(), + angularPromise: () => $q.resolve(), + annotatedNativePromise: ['fakeService', (fake) => Promise.resolve()], + annotatedAngularPromise: ['fakeService', (fake) => $q.resolve()] + }) + .controller('TestController') + .controller(function TestController(param) { }) + .controller(class { }) + .controller(['fakeService', function TestController(fake) { }]) + .controller(['fakeService', class { }]) + ; + + const dialogOptions: ng.material.IDialogOptions = {}; + + dialogOptions.resolve = { + nativePromise: () => Promise.resolve(), + angularPromise: () => $q.resolve(), + annotatedNativePromise: ['fakeService', (fake) => Promise.resolve()], + annotatedAngularPromise: ['fakeService', (fake) => $q.resolve()] + }; + + dialogOptions.controller = 'TestController'; + dialogOptions.controller = (function TestController(param) { }); + dialogOptions.controller = (class { }); + dialogOptions.controller = ['fakeService', function TestController(fake) { }]; + dialogOptions.controller = ['fakeService', class { }]; + + $mdDialog.show({ + onShowing(scope, element) { }, + onComplete(scope, element) { }, + onRemoving(element, removePromise) { }, + }); + + $mdDialog.show({ + onShowing: (scope, element) => { }, + onComplete: (scope, element) => { }, + onRemoving: (element, removePromise) => { }, + }); }); class IconDirective implements ng.IDirective { - private $mdIcon: ng.material.IIcon; constructor($mdIcon: ng.material.IIcon) { this.$mdIcon = $mdIcon; } - public link($scope: ng.IScope, $elm: ng.IAugmentedJQuery) { + link($scope: ng.IScope, $elm: ng.IAugmentedJQuery) { this.$mdIcon('android').then((iconEl: Element) => $elm.append(iconEl)); this.$mdIcon('work:chair').then((iconEl: Element) => $elm.append(iconEl)); // Load and cache the external SVG using a URL @@ -150,7 +211,7 @@ myApp.controller('MediaController', ($scope: ng.IScope, $mdMedia: ng.material.IM }); myApp.controller('SidenavController', ($scope: ng.IScope, $mdSidenav: ng.material.ISidenavService) => { - var componentId = 'left'; + const componentId = 'left'; $scope['toggle'] = () => $mdSidenav(componentId).toggle(); $scope['open'] = () => $mdSidenav(componentId).open(); $scope['close'] = () => $mdSidenav(componentId).close(); @@ -165,41 +226,81 @@ myApp.controller('SidenavController', ($scope: ng.IScope, $mdSidenav: ng.materia instance.isLockedOpen(); }); - $scope['onClose'] = $mdSidenav(componentId).onClose(() => {}); + $scope['onClose'] = $mdSidenav(componentId).onClose(() => { }); }); -myApp.controller('ToastController', ($scope: ng.IScope, $mdToast: ng.material.IToastService) => { +myApp.controller('ToastController', ($scope: ng.IScope, $mdToast: ng.material.IToastService, $q: ng.IQService) => { $scope['openToast'] = () => { $mdToast.show($mdToast.simple().textContent('Hello!')); $mdToast.updateTextContent('New Content'); - } + }; $scope['customToast'] = () => { - var options = { + const options: ng.material.IToastOptions = { hideDelay: 3000, position: 'top right', - controller : 'ToastCtrl', - templateUrl : 'toast-template.html', - toastClass: 'my-class' + controller: 'ToastCtrl', + templateUrl: 'toast-template.html', + toastClass: 'my-class', + resolve: { + nativePromise: () => Promise.resolve(), + angularPromise: () => $q.resolve(), + annotatedNativePromise: ['fakeService', (fake) => Promise.resolve()], + annotatedAngularPromise: ['fakeService', (fake) => $q.resolve()] + } }; + options.controller = 'TestController'; + options.controller = (function TestController(param) { }); + options.controller = (class { }); + options.controller = ['fakeService', function TestController(fake) { }]; + options.controller = ['fakeService', class { }]; + $mdToast.show(options); - } + }; }); -myApp.controller('PanelController', ($scope: ng.IScope, $mdPanel: ng.material.IPanelService) => { +myApp.controller('PanelController', ($scope: ng.IScope, $mdPanel: ng.material.IPanelService, $q: ng.IQService) => { $scope['createPanel'] = () => { - var config = { + const config: ng.material.IPanelConfig = { id: 'myPanel', template: '

Hello!

', hasBackdrop: true, disableParentScroll: true, - zIndex: 150 + zIndex: 150, + resolve: { + nativePromise: () => Promise.resolve(), + angularPromise: () => $q.resolve(), + annotatedNativePromise: ['fakeService', (fake) => Promise.resolve()], + annotatedAngularPromise: ['fakeService', (fake) => $q.resolve()] + } }; - + + config.controller = 'TestController'; + config.controller = (function TestController(param) { }); + config.controller = (class { }); + config.controller = ['fakeService', function TestController(fake) { }]; + config.controller = ['fakeService', class { }]; + + config.onDomAdded = (paneRef) => Promise.resolve(); + config.onDomAdded = () => $q.reject(); + config.onDomAdded = () => { }; + + config.onOpenComplete = (paneRef) => Promise.resolve(); + config.onOpenComplete = () => $q.reject(); + config.onOpenComplete = () => { }; + + config.onRemoving = (paneRef) => Promise.resolve(); + config.onRemoving = () => $q.reject(); + config.onRemoving = () => { }; + + config.onDomRemoved = (paneRef) => Promise.resolve(); + config.onDomRemoved = () => $q.reject(); + config.onDomRemoved = () => { }; + $mdPanel.create(config); - var panelRef = $mdPanel.create(config); + let panelRef = $mdPanel.create(config); panelRef.open() .then((ref: ng.material.IPanelRef) => { ref.addClass('foo'); @@ -232,6 +333,6 @@ myApp.controller('PanelController', ($scope: ng.IScope, $mdPanel: ng.material.IP $scope['newPanelAnimation'] = () => { $mdPanel.newPanelAnimation().openFrom('.some-target'); - $mdPanel.newPanelAnimation().openFrom({top: 0, left: 0}); + $mdPanel.newPanelAnimation().openFrom({ top: 0, left: 0 }); }; }); diff --git a/types/angular-material/index.d.ts b/types/angular-material/index.d.ts index a8196269a4..5afc9a9153 100644 --- a/types/angular-material/index.d.ts +++ b/types/angular-material/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Angular Material (angular.material module) 1.1 +// Type definitions for angular-material 1.1 // Project: https://github.com/angular/material // Definitions by: Blake Bigelow , Peter Hajdu , Davide Donadello , Geert Jansen // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -9,21 +9,25 @@ declare var _: string; export = _; declare module 'angular' { - export namespace material { + namespace material { + interface ResolveObject { + [name: string]: Injectable<(...args: any[]) => PromiseLike>; + } + interface IBottomSheetOptions { templateUrl?: string; template?: string; scope?: angular.IScope; // default: new child scope preserveScope?: boolean; // default: false - controller?: string | Function; + controller?: string | Injectable; locals?: { [index: string]: any }; clickOutsideToClose?: boolean; bindToController?: boolean; // default: false disableBackdrop?: boolean; escapeToClose?: boolean; - resolve?: { [index: string]: () => angular.IPromise }; + resolve?: ResolveObject; controllerAs?: string; - parent?: Function | string | Object; // default: root node + parent?: ((scope: ng.IScope, element: JQuery) => Element | JQuery) | string | Element | JQuery; // default: root node disableParentScroll?: boolean; // default: true } @@ -49,16 +53,16 @@ declare module 'angular' { clickOutsideToClose(clickOutsideToClose?: boolean): T; // default: false escapeToClose(escapeToClose?: boolean): T; // default: true focusOnOpen(focusOnOpen?: boolean): T; // default: true - controller(controller?: string | Function): T; + controller(controller?: string | Injectable): T; locals(locals?: { [index: string]: any }): T; bindToController(bindToController?: boolean): T; // default: false - resolve(resolve?: { [index: string]: () => angular.IPromise }): T; + resolve(resolve?: ResolveObject): T; controllerAs(controllerAs?: string): T; parent(parent?: string | Element | JQuery): T; // default: root node - onComplete(onComplete?: Function): T; ariaLabel(ariaLabel: string): T; } + // tslint:disable-next-line no-empty-interface interface IAlertDialog extends IPresetDialog { } @@ -97,15 +101,15 @@ declare module 'angular' { clickOutsideToClose?: boolean; // default: false escapeToClose?: boolean; // default: true focusOnOpen?: boolean; // default: true - controller?: string | Function; + controller?: string | Injectable; locals?: { [index: string]: any }; bindToController?: boolean; // default: false - resolve?: { [index: string]: () => angular.IPromise } + resolve?: ResolveObject; controllerAs?: string; parent?: string | Element | JQuery; // default: root node - onShowing?: Function; - onComplete?: Function; - onRemoving?: Function; + onShowing?(scope: ng.IScope, element: JQuery): void; + onComplete?(scope: ng.IScope, element: JQuery): void; + onRemoving?(element: JQuery, removePromise: ng.IPromise): void; skipHide?: boolean; multiple?: boolean; fullscreen?: boolean; // default: false @@ -120,9 +124,7 @@ declare module 'angular' { cancel(response?: any): void; } - interface IIcon { - (id: string): angular.IPromise; // id is a unique ID or URL - } + type IIcon = (id: string) => angular.IPromise; // id is a unique ID or URL interface IIconProvider { icon(id: string, url: string, viewBoxSize?: number): IIconProvider; // viewBoxSize default: 24 @@ -132,9 +134,7 @@ declare module 'angular' { defaultFontSet(name: string): IIconProvider; } - interface IMedia { - (media: string): boolean; - } + type IMedia = (media: string) => boolean; interface ISidenavObject { toggle(): angular.IPromise; @@ -142,7 +142,7 @@ declare module 'angular' { close(): angular.IPromise; isOpen(): boolean; isLockedOpen(): boolean; - onClose(onClose: Function): void; + onClose(onClose: () => void): void; } interface ISidenavService { @@ -163,6 +163,7 @@ declare module 'angular' { toastClass(toastClass: string): T; } + // tslint:disable-next-line no-empty-interface interface ISimpleToastPreset extends IToastPreset { } @@ -175,10 +176,10 @@ declare module 'angular' { hideDelay?: number | false; // default (ms): 3000 position?: string; // any combination of 'bottom'/'left'/'top'/'right'/'fit'; default: 'bottom left' toastClass?: string; - controller?: string | Function; + controller?: string | Injectable; locals?: { [index: string]: any }; bindToController?: boolean; // default: false - resolve?: { [index: string]: () => angular.IPromise } + resolve?: ResolveObject; controllerAs?: string; parent?: string | Element | JQuery; // default: root node } @@ -263,19 +264,19 @@ declare module 'angular' { interface IThemeConfig { disableTheming: boolean; - generateOnDemand: boolean; + generateOnDemand: boolean; nonce: string; defaultTheme: string; alwaysWatchTheme: boolean; - registeredStyles: Array; + registeredStyles: string[]; } interface IThemingProvider { alwaysWatchTheme(alwaysWatch: boolean): void; definePalette(name: string, palette: IPalette): IThemingProvider; - enableBrowserColor(browserColors: IBrowserColors): Function; + enableBrowserColor(browserColors: IBrowserColors): () => void; extendPalette(name: string, palette: IPalette): IPalette; - registerStyles(styles: String): void; + registerStyles(styles: string): void; setDefaultTheme(theme: string): void; setNonce(nonce: string): void; theme(name: string, inheritFrom?: string): ITheme; @@ -328,11 +329,11 @@ declare module 'angular' { id?: string; template?: string; templateUrl?: string; - controller?: string | Function; + controller?: string | Injectable; controllerAs?: string; bindToController?: boolean; // default: true locals?: { [index: string]: any }; - resolve?: { [index: string]: () => angular.IPromise } + resolve?: ResolveObject; attachTo?: string | JQuery | Element; propagateContainerEvents?: boolean; panelClass?: string; @@ -346,10 +347,10 @@ declare module 'angular' { animation?: IPanelAnimation; hasBackdrop?: boolean; // default: false disableParentScroll?: boolean; // default: false - onDomAdded?: Function; - onOpenComplete?: Function; - onRemoving?: Function; - onDomRemoved?: Function; + onDomAdded?(...args: any[]): PromiseLike | void; + onOpenComplete?(...args: any[]): PromiseLike | void; + onRemoving?(...args: any[]): PromiseLike | void; + onDomRemoved?(...args: any[]): PromiseLike | void; origin?: string | JQuery | Element; onCloseSuccess?: ((panel: IPanelRef, closeReason: string) => any); } @@ -442,11 +443,11 @@ declare module 'angular' { progressSize?: number; strokeWidth?: number; duration?: number; - easeFn?: Function; + easeFn?(t: number, b: number, c: number, d: number): number; durationIndeterminate?: number; startIndeterminate?: number; endIndeterminate?: number; - easeFnIndeterminate?: Function; + easeFnIndeterminate?(t: number, b: number, c: number, d: number): number; } interface IProgressCircularProvider { diff --git a/types/angular-material/tslint.json b/types/angular-material/tslint.json new file mode 100644 index 0000000000..ffe2c812bd --- /dev/null +++ b/types/angular-material/tslint.json @@ -0,0 +1,7 @@ +{ + "extends": "../tslint.json", + "rules": { + "interface-name": false, + "max-line-length": false + } +} \ No newline at end of file