From 6f09cc3515cf3e4fb0bb5b6c3d45e0a81b72b7fb Mon Sep 17 00:00:00 2001 From: Matt Traynham Date: Mon, 9 Mar 2015 11:13:30 -0400 Subject: [PATCH] Angular Material type definitions --- angular-material/angular-material-tests.ts | 96 ++++++++++ angular-material/angular-material.d.ts | 195 +++++++++++++++++++++ 2 files changed, 291 insertions(+) create mode 100644 angular-material/angular-material-tests.ts create mode 100644 angular-material/angular-material.d.ts diff --git a/angular-material/angular-material-tests.ts b/angular-material/angular-material-tests.ts new file mode 100644 index 000000000..5518c985d --- /dev/null +++ b/angular-material/angular-material-tests.ts @@ -0,0 +1,96 @@ +/// + +var myApp = angular.module('testModule', ['ngMaterial']); + +myApp.config(( + $mdThemingProvider: ng.material.MDThemingProvider, + $mdIconProvider: ng.material.MDIconProvider) => { + + $mdThemingProvider.alwaysWatchTheme(true); + var neonRedMap: ng.material.MDPalette = $mdThemingProvider.extendPalette('red', { + '500': 'ff0000' + }); + // Register the new color palette map with the name neonRed + $mdThemingProvider.definePalette('neonRed', neonRedMap); + // Use that theme for the primary intentions + $mdThemingProvider.theme('default') + .primaryPalette('neonRed') + .accentPalette('blue') + .backgroundPalette('grey') + .warnPalette('red') + .dark(true); + + $mdIconProvider + .defaultIconSet('my/app/icons.svg') // Register a default set of SVG icons + .iconSet('social', 'my/app/social.svg') // Register a named icon set of SVGs + .icon('android', 'my/app/android.svg') // Register a specific icon (by name) + .icon('work:chair', 'my/app/chair.svg'); // Register icon in a specific set +}); + +app.controller('BottomSheetController', ($scope: ng.IScope, $mdBottomSheet: ng.material.MDBottomSheetService) => { + $scope['openBottomSheet'] = () => { + $mdBottomSheet.show({ + template: 'Hello!' + }); + }; + $scope['hideBottomSheet'] = $mdBottomSheet.hide.bind($mdBottomSheet, 'hide'); + $scope['cancelBottomSheet'] = $mdBottomSheet.cancel.bind($mdBottomSheet, 'cancel'); +}); + +app.controller('DialogController', ($scope: ng.IScope, $mdDialog: ng.material.MDDialogService) => { + $scope['openDialog'] = () => { + $mdDialog.show({ + template: 'Hello!' + }); + }; + $scope['alertDialog'] = () => { + $mdDialog.show($mdDialog.alert().content('Alert!')); + }; + $scope['confirmDialog'] = () => { + $mdDialog.show($mdDialog.confirm().content('Confirm!')); + }; + $scope['hideDialog'] = $mdDialog.hide.bind($mdDialog, 'hide'); + $scope['cancelDialog'] = $mdDialog.cancel.bind($mdDialog, 'cancel'); +}); + +class IconDirective implements ng.IDirective { + + private $mdIcon: ng.material.MDIcon; + constructor($mdIcon: ng.material.MDIcon) { + this.$mdIcon = $mdIcon; + } + + public 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 + this.$mdIcon('img/icons/android.svg').then((iconEl: Element) => { + $elm.append(iconEl); + }); + } +} +myApp.directive('icon-directive', ($mdIcon: ng.material.MDIcon) => new IconDirective($mdIcon)); + +app.controller('MediaController', ($scope: ng.IScope, $mdMedia: ng.material.MDMedia) => { + $scope.$watch(() => $mdMedia('lg'), (big: boolean) => { + $scope['bigScreen'] = big; + }); + $scope['screenIsSmall'] = $mdMedia('sm'); + $scope['customQuery'] = $mdMedia('(min-width: 1234px)'); + $scope['anotherCustom'] = $mdMedia('max-width: 300px'); +}); + +app.controller('SidenavController', ($scope: ng.IScope, $mdSidenav: ng.material.MDSidenavService) => { + var componentId = 'left'; + $scope['toggle'] = () => $mdSidenav(componentId).toggle(); + $scope['open'] = () => $mdSidenav(componentId).open(); + $scope['close'] = () => $mdSidenav(componentId).close(); + $scope['isOpen'] = $mdSidenav(componentId).isOpen(); + $scope['isLockedOpen'] = $mdSidenav(componentId).isLockedOpen(); +}); + +app.controller('ToastController', ($scope: ng.IScope, $mdToast: ng.material.MDToastService) => { + $scope['openToast'] = function($event) { + $mdToast.show($mdToast.simple().content('Hello!')); + }; +}); \ No newline at end of file diff --git a/angular-material/angular-material.d.ts b/angular-material/angular-material.d.ts new file mode 100644 index 000000000..c764f939b --- /dev/null +++ b/angular-material/angular-material.d.ts @@ -0,0 +1,195 @@ +// Type definitions for Angular Material 0.8.3+ (ng.material module) +// Project: https://github.com/angular/material +// Definitions by: Matt Traynham +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// +declare module ng.material { + + interface MDBottomSheetOptions { + templateUrl?: string; + template?: string; + controller?: any; + locals?: {[index: string]: any}; + targetEvent?: any; + resolve?: {[index: string]: ng.IPromise} + controllerAs?: string; + parent?: Element; + disableParentScroll?: boolean; + } + + interface MDBottomSheetService { + show(options: MDBottomSheetOptions): ng.IPromise; + hide(response?: any): void; + cancel(response?: any): void; + } + + interface MDPresetDialog { + title(title: string): T; + content(content: string): T; + ok(content: string): T; + theme(theme: string): T; + } + + interface MDAlertDialog extends MDPresetDialog { + } + + interface MDConfirmDialog extends MDPresetDialog { + cancel(reason?: string): MDConfirmDialog; + } + + interface MDDialogOptions { + templateUrl?: string; + template?: string; + domClickEvent?: any; + disableParentScroll?: boolean; + clickOutsideToClose?: boolean; + hasBackdrop?: boolean; + escapeToClose?: boolean; + controller?: any; + locals?: {[index: string]: any}; + bindToController?: boolean; + resolve?: {[index: string]: ng.IPromise} + controllerAs?: string; + parent?: Element; + onComplete?: Function; + } + + interface MDDialogService { + show(dialog: MDDialogOptions|MDPresetDialog): ng.IPromise; + confirm(): MDConfirmDialog; + alert(): MDAlertDialog; + hide(response?: any): void; + cancel(response?: any): void; + } + + interface MDIcon { + (path: string): ng.IPromise; + } + + interface MDIconProvider { + icon(id: string, url: string, iconSize?: string): MDIconProvider; + iconSet(id: string, url: string, iconSize?: string): MDIconProvider; + defaultIconSet(url: string, iconSize?: string): MDIconProvider; + defaultIconSize(iconSize: string): MDIconProvider; + } + + interface MDMedia { + (media: string): boolean; + } + + interface MDSidenavObject { + toggle(): void; + open(): void; + close(): void; + isOpen(): boolean; + isLockedOpen(): boolean; + } + + interface MDSidenavService { + (component: string): MDSidenavObject; + } + + interface MDToastPreset { + content(content: string): T; + action(action: string): T; + highlightAction(highlightAction: boolean): T; + capsule(capsule: boolean): T; + theme(theme: string): T; + hideDelay(delay: number): T; + } + + interface MDSimpleToastPreset extends MDToastPreset { + } + + interface MDToastOptions { + templateUrl?: string; + template?: string; + hideDelay?: number; + position?: string; + controller?: any; + locals?: {[index: string]: any}; + bindToController?: boolean; + resolve?: {[index: string]: ng.IPromise} + controllerAs?: string; + parent?: Element; + } + + interface MDToastService { + show(optionsOrPreset: MDToastOptions|MDToastPreset): ng.IPromise; + showSimple(): ng.IPromise; + simple(): MDSimpleToastPreset; + build(): MDToastPreset; + updateContent(): void; + hide(response?: any): void; + cancel(response?: any): void; + } + + interface MDPalette { + 0?: string; + 50?: string; + 100?: string; + 200?: string; + 300?: string; + 400?: string; + 500?: string; + 600?: string; + 700?: string; + 800?: string; + 900?: string; + A100?: string; + A200?: string; + A400?: string; + A700?: string; + contrastDefaultColor?: string; + contrastDarkColors?: string; + contrastStrongLightColors?: string; + } + + interface MDThemeHues { + default?: string; + 'hue-1'?: string; + 'hue-2'?: string; + 'hue-3'?: string; + } + + interface MDThemePalette { + name: string; + hues: MDThemeHues; + } + + interface MDThemeColors { + accent: MDThemePalette; + background: MDThemePalette; + primary: MDThemePalette; + warn: MDThemePalette; + } + + interface MDThemeGrayScalePalette { + 1: string; + 2: string; + 3: string; + 4: string; + name: string; + } + + interface MDTheme { + name: string; + colors: MDThemeColors; + foregroundPalette: MDThemeGrayScalePalette; + foregroundShadow: string; + accentPalette(name: string, hues?: MDThemeHues): MDTheme; + primaryPalette(name: string, hues?: MDThemeHues): MDTheme; + warnPalette(name: string, hues?: MDThemeHues): MDTheme; + backgroundPalette(name: string, hues?: MDThemeHues): MDTheme; + dark(isDark?: boolean): MDTheme; + } + + interface MDThemingProvider { + theme(name: string, inheritFrom?: string): MDTheme; + definePalette(name: string, palette: MDPalette): MDThemingProvider; + extendPalette(name: string, palette: MDPalette): MDPalette; + setDefaultTheme(theme: string): void; + alwaysWatchTheme(alwaysWatch: boolean): void; + } +}