From 609014f0c49bf65ebc063cc5b321fceff01973d7 Mon Sep 17 00:00:00 2001 From: Michael Prentice Date: Thu, 18 Jun 2020 01:16:25 -0400 Subject: [PATCH] fix(panel): use existing _md-panel-offscreen class instead of inline styles - fix broken link to `setNonce()` docs in Theming Intro - improve `setNonce()` documentation - fix some invalid or inaccurate types, JSDoc, and comments - improve type safety and IDE support by using `@types/angular` more - fix dgeni complaining about dangling links - fix typos Fixes #11941 --- docs/content/Theming/01_introduction.md | 3 +- docs/content/performance/internet-explorer.md | 4 +- .../datepicker/js/dateLocaleProvider.js | 3 +- .../datepicker/js/datepickerDirective.js | 2 +- src/components/panel/panel.js | 184 +++++++++--------- src/components/panel/panel.spec.js | 2 +- src/core/services/compiler/compiler.js | 30 ++- src/core/services/theming/theming.js | 4 +- 8 files changed, 126 insertions(+), 106 deletions(-) diff --git a/docs/content/Theming/01_introduction.md b/docs/content/Theming/01_introduction.md index 9756b7163da..b8902b0f7e5 100644 --- a/docs/content/Theming/01_introduction.md +++ b/docs/content/Theming/01_introduction.md @@ -12,7 +12,8 @@ etc) you will need to either write CSS rules with custom selectors, or build a custom version of the `angular-material.css` file using Sass and custom variables. -> Note: The Material Theming system provides the +> Note: The Material Theming system provides the +> `$mdThemingProvider.setNonce()` method to meet the requirements of a CSP-policy enabled application. color palette diff --git a/docs/content/performance/internet-explorer.md b/docs/content/performance/internet-explorer.md index 2397d7a4f44..6e374fc9414 100644 --- a/docs/content/performance/internet-explorer.md +++ b/docs/content/performance/internet-explorer.md @@ -22,8 +22,8 @@ present a performance burden for Internet Explorer. When switching or modifying is not a requirement, the theming CSS can be exported to an external file which can be loaded statically. The following steps should be performed: -* Configure your theme as explained [here](Theming/03_configuring_a_theme) - - This step is only required when a custom theme is used +* Configure your theme as explained here + - If you are using a custom theme, don't forget this step * Run the application in Chrome * Open the Chrome DevTools * Execute the following javascript - This copies the theming CSS to the clipboard diff --git a/src/components/datepicker/js/dateLocaleProvider.js b/src/components/datepicker/js/dateLocaleProvider.js index 421d9745d11..21229c17a7d 100644 --- a/src/components/datepicker/js/dateLocaleProvider.js +++ b/src/components/datepicker/js/dateLocaleProvider.js @@ -10,7 +10,8 @@ * The `$mdDateLocaleProvider` is the provider that creates the `$mdDateLocale` service. * This provider that allows the user to specify messages, formatters, and parsers for date * internationalization. The `$mdDateLocale` service itself is consumed by AngularJS Material - * components that deal with dates (i.e. {@link api/directive/mdDatepicker mdDatepicker}). + * components that deal with dates + * (i.e. mdDatepicker). * * @property {Array} months Array of month names (in order). * @property {Array} shortMonths Array of abbreviated month names. diff --git a/src/components/datepicker/js/datepickerDirective.js b/src/components/datepicker/js/datepickerDirective.js index 935faf52e7f..4cc9c19bd31 100644 --- a/src/components/datepicker/js/datepickerDirective.js +++ b/src/components/datepicker/js/datepickerDirective.js @@ -59,7 +59,7 @@ * @description * `` is a component used to select a single date. * For information on how to configure internationalization for the date picker, - * see {@link api/service/$mdDateLocaleProvider $mdDateLocaleProvider}. + * see $mdDateLocaleProvider. * * This component supports * [ngMessages](https://docs.angularjs.org/api/ngMessages/directive/ngMessages). diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js index 71bd87962e4..aeb44e667d5 100644 --- a/src/components/panel/panel.js +++ b/src/components/panel/panel.js @@ -132,7 +132,7 @@ angular * * @param {string} name Preset name. * @param {!Object} preset Specific configuration object that can contain any - * and all of the parameters avaialble within the `$mdPanel.create` method. + * and all of the parameters available within the `$mdPanel.create` method. * However, parameters that pertain to id, position, animation, and user * interaction are not allowed and will be removed from the preset * configuration. @@ -154,9 +154,9 @@ angular * the screen. It can be used to implement tooltips, dialogs, pop-ups, etc. * * The following types, referenced below, have separate documentation: - * - MdPanelAnimation from `$mdPanel.newPanelAnimation()` - * - MdPanelPosition from `$mdPanel.newPanelPosition()` - * - MdPanelRef from the `$mdPanel.open()` Promise or + * - MdPanelAnimation from `$mdPanel.newPanelAnimation()` + * - MdPanelPosition from `$mdPanel.newPanelPosition()` + * - MdPanelRef from the `$mdPanel.open()` Promise or * injected in the panel's controller * * @usage @@ -232,7 +232,7 @@ angular * [$sce service](https://docs.angularjs.org/api/ng/service/$sce). * - `templateUrl` - `{string=}`: The URL that will be used as the content of * the panel. - * - `contentElement` - `{(string|!angular.JQLite|!Element)=}`: Pre-compiled + * - `contentElement` - `{(string|!JQLite|!Element)=}`: Pre-compiled * element to be used as the panel's content. * - `controller` - `{(function|string)=}`: The controller to associate with * the panel. The controller can inject a reference to the returned @@ -251,7 +251,7 @@ angular * be set to the created MdPanelRef instance. * - `resolve` - `{Object=}`: Similar to locals, except it takes promises as * values. The panel will not open until all of the promises resolve. - * - `attachTo` - `{(string|!angular.JQLite|!Element)=}`: The element to + * - `attachTo` - `{(string|!JQLite|!Element)=}`: The element to * attach the panel to. Defaults to appending to the root element of the * application. * - `propagateContainerEvents` - `{boolean=}`: Whether pointer or touch @@ -299,7 +299,7 @@ angular * close/hide() action is starting. * - `onDomRemoved` - `{function=}`: Callback function used to announce when * the panel is removed from the DOM. - * - `origin` - `{(string|!angular.JQLite|!Element)=}`: The element to focus + * - `origin` - `{(string|!JQLite|!Element)=}`: The element to focus * on when the panel closes. This is commonly the element which triggered * the opening of the panel. If you do not use `origin`, you need to control * the focus manually. @@ -324,7 +324,7 @@ angular * * @param {!Object=} config Specific configuration object that may contain * the properties defined in `$mdPanel.create`. - * @returns {!angular.$q.Promise} panelRef A promise that resolves + * @returns {!Q.IPromise} panelRef A promise that resolves * to an instance of the panel. */ @@ -399,10 +399,10 @@ angular * create. * - `isAttached` - `{boolean}`: Whether the panel is attached to the DOM. * Visibility to the user does not factor into isAttached. - * - `panelContainer` - `{angular.JQLite}`: The wrapper element containing the + * - `panelContainer` - `{JQLite}`: The wrapper element containing the * panel. This property is added in order to have access to the `addClass`, * `removeClass`, `toggleClass`, etc methods. - * - `panelEl` - `{angular.JQLite}`: The panel element. This property is added + * - `panelEl` - `{JQLite}`: The panel element. This property is added * in order to have access to the `addClass`, `removeClass`, `toggleClass`, * etc methods. */ @@ -413,7 +413,7 @@ angular * @description * Attaches and shows the panel. * - * @returns {!angular.$q.Promise} A promise that is resolved when the panel is + * @returns {!Q.IPromise} A promise that is resolved when the panel is * opened. */ @@ -425,7 +425,7 @@ angular * If you don't intend on using the panel again, call the {@link #destroy * destroy} method afterwards. * - * @returns {!angular.$q.Promise} A promise that is resolved when the panel is + * @returns {!Q.IPromise} A promise that is resolved when the panel is * closed. */ @@ -436,7 +436,7 @@ angular * Create the panel elements and attach them to the DOM. The panel will be * hidden by default. * - * @returns {!angular.$q.Promise} A promise that is resolved when the panel is + * @returns {!Q.IPromise} A promise that is resolved when the panel is * attached. */ @@ -447,7 +447,7 @@ angular * Removes the panel from the DOM. This will NOT hide the panel before removing * it. * - * @returns {!angular.$q.Promise} A promise that is resolved when the panel is + * @returns {!Q.IPromise} A promise that is resolved when the panel is * detached. */ @@ -457,7 +457,7 @@ angular * @description * Shows the panel. * - * @returns {!angular.$q.Promise} A promise that is resolved when the panel has + * @returns {!Q.IPromise} A promise that is resolved when the panel has * shown and animations are completed. */ @@ -467,7 +467,7 @@ angular * @description * Hides the panel. * - * @returns {!angular.$q.Promise} A promise that is resolved when the panel has + * @returns {!Q.IPromise} A promise that is resolved when the panel has * hidden and animations are completed. */ @@ -566,7 +566,7 @@ angular * * `CLOSE` - Gets called before the panel begins closing. * * @param {string} type Type of interceptor. - * @param {!angular.$q.Promise} callback Callback to be registered. + * @param {!Q.IPromise} callback Callback to be registered. * @returns {!MdPanelRef} */ @@ -577,7 +577,7 @@ angular * Removes a registered interceptor. * * @param {string} type Type of interceptor to be removed. - * @param {function(): !angular.$q.Promise} callback Interceptor to be removed. + * @param {function(): !Q.IPromise} callback Interceptor to be removed. * @returns {!MdPanelRef} */ @@ -661,7 +661,7 @@ angular * @description * Positions the panel relative to a specific element. * - * @param {string|!Element|!angular.JQLite} element Query selector, DOM element, + * @param {string|!Element|!JQLite} element Query selector, DOM element, * or angular element to position the panel with respect to. * @returns {!MdPanelPosition} */ @@ -1003,10 +1003,10 @@ function clearPresets() { * reference to the MdPanelService is returned where the needed arguments are * passed in including the MdPanelProvider `_presets`. * @param {!Object} _presets - * @param {!angular.JQLite} $rootElement + * @param {!JQLite} $rootElement * @param {!angular.Scope} $rootScope - * @param {!angular.$injector} $injector - * @param {!angular.$window} $window + * @param {!IInjectorService} $injector + * @param {!IWindowService} $window */ function $getProvider() { return [ @@ -1027,10 +1027,10 @@ function $getProvider() { /** * A service that is used for controlling/displaying panels on the screen. * @param {!Object} presets - * @param {!angular.JQLite} $rootElement + * @param {!JQLite} $rootElement * @param {!angular.Scope} $rootScope - * @param {!angular.$injector} $injector - * @param {!angular.$window} $window + * @param {!IInjectorService} $injector + * @param {!IWindowService} $window * @final @constructor @ngInject */ function MdPanelService(presets, $rootElement, $rootScope, $injector, $window) { @@ -1130,7 +1130,7 @@ function MdPanelService(presets, $rootElement, $rootScope, $injector, $window) { /** * Creates a panel with the specified options. - * @param {string=} preset Name of a preset configuration that can be used to + * @param {string|Object=} preset Name of a preset configuration that can be used to * extend the panel configuration. * @param {!Object=} config Configuration object for the panel. * @returns {!MdPanelRef} @@ -1190,7 +1190,7 @@ MdPanelService.prototype.create = function(preset, config) { * @param {string=} preset Name of a preset configuration that can be used to * extend the panel configuration. * @param {!Object=} config Configuration object for the panel. - * @returns {!angular.$q.Promise} The panel created from create. + * @returns {!Q.IPromise} The panel created from create. */ MdPanelService.prototype.open = function(preset, config) { var panelRef = this.create(preset, config); @@ -1321,7 +1321,7 @@ MdPanelService.prototype._wrapTemplate = function(origTemplate) { // height and width for positioning. return '' + '
' + - '
' + + '
' + '
' + template + '
' + '
' + '
'; @@ -1331,15 +1331,15 @@ MdPanelService.prototype._wrapTemplate = function(origTemplate) { /** * Wraps a content element in a `md-panel-outer-wrapper`, as well as * a `md-panel-inner-wrapper`, and positions it off-screen. Allows for - * proper control over positoning and animations. - * @param {!angular.JQLite} contentElement Element to be wrapped. - * @return {!angular.JQLite} Wrapper element. + * proper control over positioning and animations. + * @param {!JQLite} contentElement Element to be wrapped. + * @return {!JQLite} Wrapper element. * @private */ MdPanelService.prototype._wrapContentElement = function(contentElement) { var outerWrapper = angular.element( '
' + - '
' + + '
' + '
' ); @@ -1359,12 +1359,12 @@ MdPanelService.prototype._wrapContentElement = function(contentElement) { * A reference to a created panel. This reference contains a unique id for the * panel, along with properties/functions used to control the panel. * @param {!Object} config - * @param {!angular.$injector} $injector + * @param {!IInjectorService} $injector * @final @constructor */ function MdPanelRef(config, $injector) { // Injected variables. - /** @private @const {!angular.$q} */ + /** @private @const {!IQService} */ this._$q = $injector.get('$q'); /** @private @const {!angular.$mdCompiler} */ @@ -1379,7 +1379,7 @@ function MdPanelRef(config, $injector) { /** @private @const {!angular.$mdTheming} */ this._$mdTheming = $injector.get('$mdTheming'); - /** @private @const {!angular.Scope} */ + /** @private @const {!IRootScopeService} */ this._$rootScope = $injector.get('$rootScope'); /** @private @const {!angular.$animate} */ @@ -1388,10 +1388,10 @@ function MdPanelRef(config, $injector) { /** @private @const {!MdPanelRef} */ this._$mdPanel = $injector.get('$mdPanel'); - /** @private @const {!angular.$log} */ + /** @private @const {!ILogService} */ this._$log = $injector.get('$log'); - /** @private @const {!angular.$window} */ + /** @private @const {!IWindowService} */ this._$window = $injector.get('$window'); /** @private @const {!Function} */ @@ -1407,14 +1407,14 @@ function MdPanelRef(config, $injector) { /** @type {!Object} */ this.config = config; - /** @type {!angular.JQLite|undefined} */ - this.panelContainer; + /** @type {!JQLite|undefined} */ + this.panelContainer = undefined; - /** @type {!angular.JQLite|undefined} */ - this.panelEl; + /** @type {!JQLite|undefined} */ + this.panelEl = undefined; - /** @type {!angular.JQLite|undefined} */ - this.innerWrapper; + /** @type {!JQLite|undefined} */ + this.innerWrapper = undefined; /** * Whether the panel is attached. This is synchronous. When attach is called, @@ -1428,14 +1428,14 @@ function MdPanelRef(config, $injector) { /** @private {Array} */ this._removeListeners = []; - /** @private {!angular.JQLite|undefined} */ - this._topFocusTrap; + /** @private {!JQLite|undefined} */ + this._topFocusTrap = undefined; - /** @private {!angular.JQLite|undefined} */ - this._bottomFocusTrap; + /** @private {!JQLite|undefined} */ + this._bottomFocusTrap = undefined; /** @private {!$mdPanel|undefined} */ - this._backdropRef; + this._backdropRef = undefined; /** @private {Function?} */ this._restoreScroll = null; @@ -1450,7 +1450,7 @@ function MdPanelRef(config, $injector) { * Cleanup function, provided by `$mdCompiler` and assigned after the element * has been compiled. When `contentElement` is used, the function is used to * restore the element to it's proper place in the DOM. - * @private {!Function} + * @private {Function|null} */ this._compilerCleanup = null; @@ -1473,7 +1473,7 @@ MdPanelRef.interceptorTypes = { /** * Opens an already created and configured panel. If the panel is already * visible, does nothing. - * @returns {!angular.$q.Promise} A promise that is resolved when + * @returns {!Q.IPromise} A promise that is resolved when * the panel is opened and animations finish. */ MdPanelRef.prototype.open = function() { @@ -1503,7 +1503,7 @@ MdPanelRef.prototype.open = function() { /** * Closes the panel. * @param {string} closeReason The event type that triggered the close. - * @returns {!angular.$q.Promise} A promise that is resolved when + * @returns {!Q.IPromise} A promise that is resolved when * the panel is closed and animations finish. */ MdPanelRef.prototype.close = function(closeReason) { @@ -1528,7 +1528,7 @@ MdPanelRef.prototype.close = function(closeReason) { /** * Attaches the panel. The panel will be hidden afterwards. - * @returns {!angular.$q.Promise} A promise that is resolved when + * @returns {!Q.IPromise} A promise that is resolved when * the panel is attached. */ MdPanelRef.prototype.attach = function() { @@ -1560,7 +1560,7 @@ MdPanelRef.prototype.attach = function() { /** * Only detaches the panel. Will NOT hide the panel first. - * @returns {!angular.$q.Promise} A promise that is resolved when + * @returns {!Q.IPromise} A promise that is resolved when * the panel is detached. */ MdPanelRef.prototype.detach = function() { @@ -1637,7 +1637,7 @@ MdPanelRef.prototype.destroy = function() { /** * Shows the panel. - * @returns {!angular.$q.Promise} A promise that is resolved when + * @returns {!Q.IPromise} A promise that is resolved when * the panel has shown and animations finish. */ MdPanelRef.prototype.show = function() { @@ -1681,7 +1681,7 @@ MdPanelRef.prototype.show = function() { /** * Hides the panel. - * @returns {!angular.$q.Promise} A promise that is resolved when + * @returns {!Q.IPromise} A promise that is resolved when * the panel has hidden and animations finish. */ MdPanelRef.prototype.hide = function() { @@ -1832,7 +1832,7 @@ MdPanelRef.prototype.toggleClass = function(toggleClass, onElement) { * Compiles the panel, according to the passed in config and appends it to * the DOM. Helps normalize differences in the compilation process between * using a string template and a content element. - * @returns {!angular.$q.Promise} Promise that is resolved when + * @returns {!Q.IPromise} Promise that is resolved when * the element has been compiled and added to the DOM. * @private */ @@ -1880,7 +1880,7 @@ MdPanelRef.prototype._compile = function() { /** * Creates a panel and adds it to the dom. - * @returns {!angular.$q.Promise} A promise that is resolved when the panel is + * @returns {!Q.IPromise} A promise that is resolved when the panel is * created. * @private */ @@ -1936,7 +1936,7 @@ MdPanelRef.prototype._createPanel = function() { /** * Adds the styles for the panel, such as positioning and z-index. Also, * themes the panel element and panel container using `$mdTheming`. - * @returns {!angular.$q.Promise} + * @returns {!Q.IPromise} * @private */ MdPanelRef.prototype._addStyles = function() { @@ -1949,11 +1949,9 @@ MdPanelRef.prototype._addStyles = function() { // Theme the element and container. self._setTheming(); - // Remove offscreen class and add hidden class. + // Remove offscreen classes and add hidden class. self.panelEl.removeClass('_md-panel-offscreen'); - - // Remove left: -9999px and add hidden class. - self.innerWrapper.css('left', ''); + self.innerWrapper.removeClass('_md-panel-offscreen'); self.panelContainer.addClass(MD_PANEL_HIDDEN); resolve(self); @@ -2069,7 +2067,7 @@ MdPanelRef.prototype._focusOnOpen = function() { /** * Shows the backdrop. - * @returns {!angular.$q.Promise} A promise that is resolved when the backdrop + * @returns {!Q.IPromise} A promise that is resolved when the backdrop * is created and attached. * @private */ @@ -2290,7 +2288,7 @@ MdPanelRef.prototype.updateAnimation = function(animation) { /** * Animate the panel opening. - * @returns {!angular.$q.Promise} A promise that is resolved when the panel has + * @returns {!Q.IPromise} A promise that is resolved when the panel has * animated open. * @private */ @@ -2321,7 +2319,7 @@ MdPanelRef.prototype._animateOpen = function() { /** * Animate the panel closing. - * @returns {!angular.$q.Promise} A promise that is resolved when the panel has + * @returns {!Q.IPromise} A promise that is resolved when the panel has * animated closed. * @private */ @@ -2357,7 +2355,7 @@ MdPanelRef.prototype._animateClose = function() { * which will allow the action to continue when it gets resolved, or will * prevent an action if it is rejected. * @param {string} type Type of interceptor. - * @param {!angular.$q.Promise} callback Callback to be registered. + * @param {!Q.IPromise} callback Callback to be registered. * @returns {!MdPanelRef} */ MdPanelRef.prototype.registerInterceptor = function(type, callback) { @@ -2423,7 +2421,7 @@ MdPanelRef.prototype.removeAllInterceptors = function(type) { * reverse order. Works in a similar way to `$q.all`, except it * respects the order of the functions. * @param {string} type Type of interceptors to be invoked. - * @returns {!angular.$q.Promise} + * @returns {!Q.IPromise} * @private */ MdPanelRef.prototype._callInterceptors = function(type) { @@ -2550,11 +2548,11 @@ MdPanelRef.closeReasons = { * position: panelPosition * }); * - * @param {!angular.$injector} $injector + * @param {!IInjectorService} $injector * @final @constructor */ function MdPanelPosition($injector) { - /** @private @const {!angular.$window} */ + /** @private @const {!IWindowService} */ this._$window = $injector.get('$window'); /** @private {boolean} */ @@ -2566,8 +2564,8 @@ function MdPanelPosition($injector) { /** @private {boolean} */ this._absolute = false; - /** @private {!angular.JQLite} */ - this._relativeToEl; + /** @private {!JQLite} */ + this._relativeToEl = undefined; /** @private {string} */ this._top = ''; @@ -2591,7 +2589,7 @@ function MdPanelPosition($injector) { this._positions = []; /** @private {?{x:string, y:string}} */ - this._actualPosition; + this._actualPosition = undefined; } @@ -2785,7 +2783,7 @@ MdPanelPosition.prototype.center = function() { /** * Sets element for relative positioning. - * @param {string|!Element|!angular.JQLite} element Query selector, DOM element, + * @param {string|!Element|!JQLite} element Query selector, DOM element, * or angular element to set the panel relative to. * @returns {!MdPanelPosition} */ @@ -2898,8 +2896,8 @@ MdPanelPosition.prototype.getTransform = function() { /** * Sets the `transform` value for an element. - * @param {!angular.JQLite} el - * @returns {!angular.JQLite} + * @param {!JQLite} el + * @returns {!JQLite} * @private */ MdPanelPosition.prototype._setTransform = function(el) { @@ -2910,7 +2908,7 @@ MdPanelPosition.prototype._setTransform = function(el) { /** * True if the panel is completely on-screen with this positioning; false * otherwise. - * @param {!angular.JQLite} el + * @param {!JQLite} el * @return {boolean} * @private */ @@ -2967,7 +2965,7 @@ MdPanelPosition.prototype._reduceTranslateValues = /** * Sets the panel position based on the created panel element and best x/y * positioning. - * @param {!angular.JQLite} el + * @param {!JQLite} el * @private */ MdPanelPosition.prototype._setPanelPosition = function(el) { @@ -3003,7 +3001,7 @@ MdPanelPosition.prototype._setPanelPosition = function(el) { /** * Constrains a panel's position to the viewport. - * @param {!angular.JQLite} el + * @param {!JQLite} el * @private */ MdPanelPosition.prototype._constrainToViewport = function(el) { @@ -3075,7 +3073,7 @@ MdPanelPosition.prototype._bidi = function(position) { /** * Calculates the panel position based on the created panel element and the * provided positioning. - * @param {!angular.JQLite} el + * @param {!JQLite} el * @param {!{x:string, y:string}} position * @private */ @@ -3155,7 +3153,7 @@ MdPanelPosition.prototype._calculatePanelPosition = function(el, position) { * animation: panelAnimation * }); * - * @param {!angular.$injector} $injector + * @param {!IInjectorService} $injector * @final @constructor */ function MdPanelAnimation($injector) { @@ -3163,13 +3161,13 @@ function MdPanelAnimation($injector) { this._$mdUtil = $injector.get('$mdUtil'); /** - * @private {{element: !angular.JQLite|undefined, bounds: !DOMRect}| + * @private {{element: !JQLite|undefined, bounds: !DOMRect}| * undefined} */ this._openFrom; /** - * @private {{element: !angular.JQLite|undefined, bounds: !DOMRect}| + * @private {{element: !JQLite|undefined, bounds: !DOMRect}| * undefined} */ this._closeTo; @@ -3262,7 +3260,7 @@ MdPanelAnimation.prototype.duration = function(duration) { /** * Returns the element and bounds for the animation target. * @param {string|!Element|{top: number, left: number}} location - * @returns {{element: !angular.JQLite|undefined, bounds: !DOMRect}} + * @returns {{element: !JQLite|undefined, bounds: !DOMRect}} * @private */ MdPanelAnimation.prototype._getPanelAnimationTarget = function(location) { @@ -3301,8 +3299,8 @@ MdPanelAnimation.prototype.withAnimation = function(cssClass) { /** * Animate the panel open. - * @param {!angular.JQLite} panelEl - * @returns {!angular.$q.Promise} A promise that is resolved when the open + * @param {!JQLite} panelEl + * @returns {!Q.IPromise} A promise that is resolved when the open * animation is complete. */ MdPanelAnimation.prototype.animateOpen = function(panelEl) { @@ -3370,8 +3368,8 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl) { /** * Animate the panel close. - * @param {!angular.JQLite} panelEl - * @returns {!angular.$q.Promise} A promise that resolves when the close + * @param {!JQLite} panelEl + * @returns {!Q.IPromise} A promise that resolves when the close * animation is complete. */ MdPanelAnimation.prototype.animateClose = function(panelEl) { @@ -3438,7 +3436,7 @@ MdPanelAnimation.prototype.animateClose = function(panelEl) { /** * Set the height and width to match the panel if not provided. - * @param {!angular.JQLite} panelEl + * @param {!JQLite} panelEl * @private */ MdPanelAnimation.prototype._fixBounds = function(panelEl) { @@ -3462,8 +3460,8 @@ MdPanelAnimation.prototype._fixBounds = function(panelEl) { /** * Identify the bounding RECT for the target element. - * @param {!angular.JQLite} element - * @returns {{element: !angular.JQLite|undefined, bounds: !DOMRect}} + * @param {!JQLite} element + * @returns {{element: !JQLite|undefined, bounds: !DOMRect}} * @private */ MdPanelAnimation.prototype._getBoundingClientRect = function(element) { @@ -3483,8 +3481,8 @@ MdPanelAnimation.prototype._getBoundingClientRect = function(element) { /** * Returns the angular element associated with a css selector or element. - * @param el {string|!angular.JQLite|!Element} - * @returns {!angular.JQLite} + * @param el {string|!JQLite|!Element} + * @returns {!JQLite} */ function getElement(el) { var queryResult = angular.isString(el) ? @@ -3494,7 +3492,7 @@ function getElement(el) { /** * Gets the computed values for an element's translateX and translateY in px. - * @param {!angular.JQLite|!Element} el + * @param {!JQLite|!Element} el * @param {string} property * @return {{x: number, y: number}} */ diff --git a/src/components/panel/panel.spec.js b/src/components/panel/panel.spec.js index 0ad6bd23586..01819c2ceda 100644 --- a/src/components/panel/panel.spec.js +++ b/src/components/panel/panel.spec.js @@ -21,7 +21,7 @@ describe('$mdPanel', function() { var VIEWPORT_MARGIN = 8; /** - * @param {!angular.$injector} $injector + * @param {!IInjectorService} $injector * @ngInject */ var injectLocals = function($injector) { diff --git a/src/core/services/compiler/compiler.js b/src/core/services/compiler/compiler.js index e5b7bc45a58..0a54f95dc49 100644 --- a/src/core/services/compiler/compiler.js +++ b/src/core/services/compiler/compiler.js @@ -31,7 +31,10 @@ angular * will effect **bindings** in controllers created by AngularJS Material's services like * `$mdDialog`, `$mdPanel`, `$mdToast`, or `$mdBottomSheet`. * - * See [$mdCompilerProvider.respectPreAssignBindingsEnabled](#mdcompilerprovider-respectpreassignbindingsenabled-respected) + * See + * + * $mdCompilerProvider.respectPreAssignBindingsEnabled + * * for the details of how the different versions and settings of AngularJS affect this behavior. * * @usage @@ -271,19 +274,34 @@ function MdCompilerProvider($compileProvider) { */ function MdCompilerService($q, $templateRequest, $injector, $compile, $controller) { - /** @private @const {!angular.$q} */ + /** + * @private @const + * @type {!IQService} + */ this.$q = $q; - /** @private @const {!angular.$templateRequest} */ + /** + * @private @const + * @type {!ITemplateRequestService} + */ this.$templateRequest = $templateRequest; - /** @private @const {!angular.$injector} */ + /** + * @private @const + * @type {!IInjectorService} + */ this.$injector = $injector; - /** @private @const {!angular.$compile} */ + /** + * @private @const + * @type{!ICompileService} + */ this.$compile = $compile; - /** @private @const {!angular.$controller} */ + /** + * @private @const + * @type {!IControllerService} + */ this.$controller = $controller; } diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js index 57eda1addec..c3694e7dbd6 100644 --- a/src/core/services/theming/theming.js +++ b/src/core/services/theming/theming.js @@ -328,7 +328,9 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) { * @ngdoc method * @name $mdThemingProvider#setNonce * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags. - * Setting a value allows the use of CSP policy without using the unsafe-inline directive. + * Setting a value allows the use of CSP policy without using the `'unsafe-inline'` directive. + * The string must already be base64 encoded. You can use `btoa(string)` to do this encoding. + * In your CSP's `style-src`, you would then add an entry for `'nonce-nonceValue'`. */ setNonce: function(nonceValue) { themeConfig.nonce = nonceValue;