diff --git a/README.md b/README.md index 9b8f1d599..568c75b04 100755 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ List of Definitions * [AmCharts](http://www.amcharts.com/) (by [Covobonomo](https://github.com/covobonomo/)) * [AngularJS](http://angularjs.org) (by [Diego Vilar](https://github.com/diegovilar)) ([wiki](https://github.com/borisyankov/DefinitelyTyped/wiki/AngularJS-Definitions-Usage-Notes)) * [AngularUI](http://angular-ui.github.io/) (by [Michel Salib](https://github.com/michelsalib)) +* [Angular UI Bootstrap](http://angular-ui.github.io/bootstrap) (by [Brian Surowiec](https://github.com/xt0rted)) * [AppFramework](http://app-framework-software.intel.com/) (by [Kyo Ago](https://github.com/kyo-ago)) * [Arbiter](http://arbiterjs.com/) (by [Arash Shakery](https://github.com/arash16)) * [async](https://github.com/caolan/async) (by [Boris Yankov](https://github.com/borisyankov)) diff --git a/angular-ui-bootstrap/angular-ui-bootstrap-tests.ts b/angular-ui-bootstrap/angular-ui-bootstrap-tests.ts new file mode 100644 index 000000000..5aadee3f3 --- /dev/null +++ b/angular-ui-bootstrap/angular-ui-bootstrap-tests.ts @@ -0,0 +1,215 @@ +/// + +var testApp = angular.module('testApp'); + +testApp.config(( + $accordionConfig: ng.ui.bootstrap.IAccordionConfig, + $buttonConfig: ng.ui.bootstrap.IButtonConfig, + $datepickerConfig: ng.ui.bootstrap.IDatepickerConfig, + $datepickerPopupConfig: ng.ui.bootstrap.IDatepickerPopupConfig, + $paginationConfig: ng.ui.bootstrap.IPaginationConfig, + $pagerConfig: ng.ui.bootstrap.IPagerConfig, + $progressConfig: ng.ui.bootstrap.IProgressConfig, + $ratingConfig: ng.ui.bootstrap.IRatingConfig, + $timepickerConfig: ng.ui.bootstrap.ITimepickerConfig, + $tooltipProvider: ng.ui.bootstrap.ITooltipProvider)=> { + + /** + * $accordionConfig tests + */ + $accordionConfig.closeOthers = false; + + + /** + * $buttonConfig tests + */ + $buttonConfig.activeClass = 'active-state'; + $buttonConfig.toggleEvent = 'dblclick'; + + + /** + * $datepickerConfig tests + */ + $datepickerConfig.dayFormat = 'd'; + $datepickerConfig.dayHeaderFormat = 'E'; + $datepickerConfig.dayTitleFormat = 'dd-MM-yyyy'; + $datepickerConfig.maxDate = '1389586124979'; + $datepickerConfig.minDate = '1389586124979'; + $datepickerConfig.monthFormat = 'M'; + $datepickerConfig.monthTitleFormat = 'yy'; + $datepickerConfig.showWeeks = false; + $datepickerConfig.startingDay = 1; + $datepickerConfig.yearFormat = 'y'; + $datepickerConfig.yearRange = 10; + + + /** + * $datepickerPopupConfig tests + */ + $datepickerPopupConfig.appendToBody = true; + $datepickerPopupConfig.currentText = 'Select Today'; + $datepickerPopupConfig.clearText = 'Reset Selection'; + $datepickerPopupConfig.closeOnDateSelection = false; + $datepickerPopupConfig.closeText = 'Finished'; + $datepickerPopupConfig.dateFormat = 'dd-MM-yyyy'; + $datepickerPopupConfig.showButtonBar = false; + $datepickerPopupConfig.toggleWeeksText = 'Show Weeks'; + + + /** + * $paginationConfig tests + */ + $paginationConfig.boundaryLinks = true; + $paginationConfig.directionLinks = false; + $paginationConfig.firstText = 'First Page'; + $paginationConfig.itemsPerPage = 25; + $paginationConfig.lastText = 'Last Page'; + $paginationConfig.nextText = 'Next Page'; + $paginationConfig.previousText = 'Previous Page'; + $paginationConfig.rotate = false; + + + /** + * $pagerConfig tests + */ + $pagerConfig.align = false; + $pagerConfig.itemsPerPage = 25; + $pagerConfig.nextText = 'Next Page'; + $pagerConfig.previousText = 'Previous Page'; + + + /** + * $progressConfig tests + */ + $progressConfig.animate = false; + $progressConfig.max = 200; + + + /** + * $ratingConfig tests + */ + $ratingConfig.max = 10; + $ratingConfig.stateOff = 'rating-state-off'; + $ratingConfig.stateOn = 'rating-state-on'; + + + /** + * $timepickerConfig tests + */ + $timepickerConfig.hourStep = 2; + $timepickerConfig.meridians = ['-AM-', '-PM-']; + $timepickerConfig.minuteStep = 5; + $timepickerConfig.mousewheel = false; + $timepickerConfig.readonlyInput = true; + $timepickerConfig.showMeridian = false; + + /** + * $tooltipProvider tests + */ + $tooltipProvider.options({ + placement: 'bottom', + animation: false, + popupDelay: 1000, + appendtoBody: true + }); + $tooltipProvider.setTriggers({ + 'customOpenTrigger': 'customCloseTrigger' + }); +}); + +testApp.controller('TestCtrl', ( + $scope: ng.IScope, + $log: ng.ILogService, + $modal: ng.ui.bootstrap.IModalService, + $position: ng.ui.bootstrap.IPositionService, + $transition: ng.ui.bootstrap.ITransitionService)=> { + + /** + * test the $modal instance + */ + var modalInstance = $modal.open({ + backdrop: 'static', + controller: 'ModalTestCtrl', + keyboard: true, + resolve: { + items: ()=> { + return [1, 2, 3, 4, 5]; + } + }, + scope: $scope, + template: "
i'm a template!
", + templateUrl: '/templates/modal.html', + windowClass: 'modal-test' + }); + + modalInstance.opened.then(()=> { + $log.log('modal opened'); + }); + + modalInstance.result.then(closeResult=> { + $log.log('modal closed', closeResult); + }, dismissResult=> { + $log.log('modal dismissed', dismissResult); + }); + + + /** + * test the $position service + */ + var elementLogger = (coordinates: ng.ui.bootstrap.IPositionCoordinates): void=> { + $log.log('height', coordinates.height); + $log.log('left', coordinates.left); + $log.log('top', coordinates.top); + $log.log('width', coordinates.width); + }; + var element = angular.element('
'); + elementLogger($position.position(element)); + elementLogger($position.offset(element)); + + + /** + * test the $transition service + */ + $log.log('animationEndEventName', $transition.animationEndEventName); + $log.log('transitionEndEventName', $transition.transitionEndEventName); + + var transitionElement = angular.element('
'); + $transition(transitionElement, 'transition-class', { animation: true }); + $transition(transitionElement, { height: '100px', width: '50px' }, { animation: true }); + $transition(transitionElement, ()=> {}, { animation: true }); +}); + + +testApp.controller('ModalTestCtrl', ( + $scope: IModalTestCtrlScope, + $log: ng.ILogService, + $modalInstance: ng.ui.bootstrap.IModalServiceInstance, + items: Array)=> { + + items.forEach(item=> { + $log.log(item); + }); + + $scope.close = ()=> { + if ($scope.useReason) { + $modalInstance.close('with reason'); + } else { + $modalInstance.close(); + } + }; + + $scope.dismiss = ()=> { + if ($scope.useReason) { + $modalInstance.dismiss('with reason'); + } else { + $modalInstance.dismiss(); + } + }; +}); + +interface IModalTestCtrlScope { + useReason: boolean; + + close(): void; + dismiss(): void; +} \ No newline at end of file diff --git a/angular-ui-bootstrap/angular-ui-bootstrap.d.ts b/angular-ui-bootstrap/angular-ui-bootstrap.d.ts new file mode 100644 index 000000000..d9c57cdc2 --- /dev/null +++ b/angular-ui-bootstrap/angular-ui-bootstrap.d.ts @@ -0,0 +1,575 @@ +// Type definitions for Angular UI Bootstrap 0.9.0 +// Project: https://github.com/angular-ui/bootstrap +// Definitions by: Brian Surowiec +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module ng.ui.bootstrap { + + interface IAccordionConfig { + /** + * Controls whether expanding an item will cause the other items to close. + * + * @default true + */ + closeOthers?: boolean; + } + + + interface IButtonConfig { + /** + * @default: 'active' + */ + activeClass?: string; + + /** + * @default: 'Click' + */ + toggleEvent?: string; + } + + + interface IDatepickerConfig { + /** + * Format of day in month. + * + * @default 'dd' + */ + dayFormat?: string; + + /** + * Format of month in year. + * + * @default 'MMM' + */ + monthFormat?: string; + + /** + * Format of year in year range. + * + * @default 'yyyy' + */ + yearFormat?: string; + + /** + * Format of day in week header. + * + * @default 'EEE' + */ + dayHeaderFormat?: string; + + /** + * Format of title when selecting day. + * + * @default 'MMM yyyy' + */ + dayTitleFormat?: string; + + /** + * Format of title when selecting month. + * + * @default 'yyyy' + */ + monthTitleFormat?: string; + + /** + * Whether to display week numbers. + * + * @default true + */ + showWeeks?: boolean; + + /** + * Starting day of the week from 0-6 where 0=Sunday and 6=Saturday. + * + * @default 0 + */ + startingDay?: number; + + /** + * Number of years displayed in year selection. + * + * @default 20 + */ + yearRange?: number; + + /** + * Defines the minimum available date. + * + * @default null + */ + minDate?: any; + + /** + * Defines the maximum available date. + * + * @default null + */ + maxDate?: any; + } + + interface IDatepickerPopupConfig { + /** + * The format for displayed dates. + * + * @default 'yyyy-MM-dd' + */ + dateFormat?: string; + + /** + * The text to display for the current day button. + * + * @default 'Today' + */ + currentText?: string; + + /** + * The text to display for the toggling week numbers button. + * + * @default 'Weeks' + */ + toggleWeeksText?: string; + + /** + * The text to display for the clear button. + * + * @default 'Clear' + */ + clearText?: string; + + /** + * The text to display for the close button. + * + * @default 'Done' + */ + closeText?: string; + + /** + * Whether to close calendar when a date is chosen. + * + * @default true + */ + closeOnDateSelection?: boolean; + + /** + * Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`. + * + * @default false + */ + appendToBody?: boolean; + + /** + * Whether to display a button bar underneath the datepicker. + * + * @default true + */ + showButtonBar?: boolean; + } + + + interface IModalService { + /** + * @param {IModalSettings} options + * @returns {IModalServiceInstance} + */ + open(options: IModalSettings): IModalServiceInstance; + } + + interface IModalServiceInstance { + /** + * a method that can be used to close a modal, passing a result + */ + close(result?: any): void; + + /** + * a method that can be used to dismiss a modal, passing a reason + */ + dismiss(reason?: any): void; + + /** + * a promise that is resolved when a modal is closed and rejected when a modal is dismissed + */ + result: ng.IPromise; + + /** + * a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables + */ + opened: ng.IPromise; + } + + interface IModalSettings { + /** + * a path to a template representing modal's content + */ + templateUrl?: string; + + /** + * inline template representing the modal's content + */ + template?: string; + + /** + * a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). + * Defaults to `$rootScope` + */ + scope?: any; + + /** + * a controller for a modal instance - it can initialize scope used by modal. + * A controller can be injected with `$modalInstance` + */ + controller?: any; + + /** + * members that will be resolved and passed to the controller as locals; it is equivalent of the `resolve` property for AngularJS routes + */ + resolve?: any; + + /** + * controls the presence of a backdrop + * Allowed values: + * - true (default) + * - false (no backdrop) + * - 'static' backdrop is present but modal window is not closed when clicking outside of the modal window + * + * @default true + */ + backdrop?: any; + + /** + * indicates whether the dialog should be closable by hitting the ESC key, defaults to true + */ + keyboard?: boolean; + + /** + * additional CSS class(es) to be added to a modal window template + */ + windowClass?: string; + } + + + interface IPaginationConfig { + /** + * Current page number. First page is 1. + */ + page?: number; + + /** + * Total number of items in all pages. + */ + totalItems?: number; + + /** + * Maximum number of items per page. A value less than one indicates all items on one page. + * + * @default 10 + */ + itemsPerPage?: number; + + /** + * Limit number for pagination size. + * + * @default: null + */ + maxSize?: number; + + /** + * An optional expression assigned the total number of pages to display. + * + * @default angular.noop + */ + numPages?: number; + + /** + * Whether to keep current page in the middle of the visible ones. + * + * @default true + */ + rotate?: boolean; + + /** + * An optional expression called when a page is selected having the page number as argument. + * + * @default null + */ + onSelectPage?(page: number): void; + + /** + * Whether to display Previous / Next buttons. + * + * @default true + */ + directionLinks?: boolean; + + /** + * Text for Previous button. + * + * @default 'Previous' + */ + previousText?: string; + + /** + * Text for Next button. + * + * @default 'Next' + */ + nextText?: string; + + /** + * Whether to display First / Last buttons. + * + * @default false + */ + boundaryLinks?: boolean; + + /** + * Text for First button. + * + * @default 'First' + */ + firstText?: string; + + /** + * Text for Last button. + * + * @default 'Last' + */ + lastText?: string; + } + + interface IPagerConfig { + /** + * Whether to align each link to the sides. + * + * @default true + */ + align?: boolean; + + /** + * Current page number. First page is 1. + */ + page?: number; + + /** + * Total number of items in all pages. + */ + totalItems?: number; + + /** + * Maximum number of items per page. A value less than one indicates all items on one page. + * + * @default 10 + */ + itemsPerPage?: number; + + /** + * An optional expression assigned the total number of pages to display. + * + * @default angular.noop + */ + numPages?: number; + + /** + * An optional expression called when a page is selected having the page number as argument. + * + * @default null + */ + onSelectPage?(page: number): void; + + /** + * Text for Previous button. + * + * @default '« Previous' + */ + previousText?: string; + + /** + * Text for Next button. + * + * @default 'Next »' + */ + nextText?: string; + } + + + interface IPositionCoordinates { + width?: number; + height?: number; + top?: number; + left?: number; + } + + interface IPositionService { + /** + * Provides a read-only equivalent of jQuery's position function. + */ + position(element: JQuery): IPositionCoordinates; + + /** + * Provides a read-only equivalent of jQuery's offset function. + */ + offset(element: JQuery): IPositionCoordinates; + } + + + interface IProgressConfig { + /** + * Whether bars use transitions to achieve the width change. + * + * @default: true + */ + animate?: boolean; + + /** + * A number that specifies the total value of bars that is required. + * + * @default: 100 + */ + max?: number; + } + + + interface IRatingConfig { + /** + * Changes the number of icons. + * + * @default: 5 + */ + max?: number; + + /** + * A variable used in the template to specify the state for selected icons. + * + * @default: null + */ + stateOn?: string; + + /** + * A variable used in the template to specify the state for unselected icons. + * + * @default: null + */ + stateOff?: string; + } + + + interface ITimepickerConfig { + /** + * Number of hours to increase or decrease when using a button. + * + * @default 1 + */ + hourStep?: number; + + /** + * Number of minutes to increase or decrease when using a button. + * + * @default 1 + */ + minuteStep?: number; + + /** + * Whether to display 12H or 24H mode. + * + * @default true + */ + showMeridian?: boolean; + + /** + * Meridian labels based on locale. To override you must supply an array like ['AM', 'PM']. + * + * @default null + */ + meridians?: Array; + + /** + * Whether the user can type inside the hours & minutes input. + * + * @default false + */ + readonlyInput?: boolean; + + /** + * Whether the user can scroll inside the hours & minutes input to increase or decrease it's values. + * + * @default true + */ + mousewheel?: boolean; + } + + + interface ITooltipOptions { + /** + * Where to place it? Defaults to 'top', but also accepts 'right', 'bottom', or 'left'. + * + * @default 'top' + */ + placement?: string; + + /** + * Should it fade in and out? + * + * @default true + */ + animation?: boolean; + + /** + * For how long should the user have to have the mouse over the element before the tooltip shows (in milliseconds)? + * + * @default 0 + */ + popupDelay?: number; + + /** + * Should the tooltip be appended to `$body` instead of the parent element? + * + * @default false + */ + appendtoBody?: boolean; + } + + interface ITooltipProvider { + /** + * Provide a set of defaults for certain tooltip and popover attributes. + */ + options(value: ITooltipOptions): void; + + /** + * Extends the default trigger mappings with mappings of your own. E.g. `{ 'openTrigger': 'closeTrigger' }`. + */ + setTriggers(triggers: Object): void; + } + + + interface ITransitionService { + /** + * The browser specific animation event name. + */ + animationEndEventName: string; + + /** + * The browser specific transition event name. + */ + transitionEndEventName: string; + + /** + * Provides a consistent interface to trigger CSS 3 transitions and to be informed when they complete. + * + * @param element The DOMElement that will be animated + * @param trigger The thing that will cause the transition to start: + * - As a string, it represents the css class to be added to the element. + * - As an object, it represents a hash of style attributes to be applied to the element. + * - As a function, it represents a function to be called that will cause the transition to occur. + * @param options Optional settings for the transition. + * + * @return A promise that is resolved when the transition finishes. + */ + (element: ng.IAugmentedJQuery, trigger: any, options?: ITransitionServiceOptions): ng.IPromise; + } + + interface ITransitionServiceOptions { + animation?: boolean; + } + +} \ No newline at end of file