*
*
@@ -1045,8 +1045,8 @@ var nextUniqueId = 0;
* Util
*/
angular
- .module('material.core')
- .factory('$mdUtil', UtilFactory);
+.module('material.core')
+.factory('$mdUtil', UtilFactory);
/**
* @ngInject
@@ -1160,7 +1160,7 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
// or a clientRect: a rect relative to the page
var offsetRect = isOffsetRect ?
offsetParent.getBoundingClientRect() :
- {left: 0, top: 0, width: 0, height: 0};
+ {left: 0, top: 0, width: 0, height: 0};
return {
left: nodeRect.left - offsetRect.left,
top: nodeRect.top - offsetRect.top,
@@ -1334,13 +1334,6 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
body.style.overflow = 'hidden';
}
- // This should be applied after the manipulation to the body, because
- // adding a scrollbar can potentially resize it, causing the measurement
- // to change.
- if (hasVerticalScrollbar) {
- documentElement.style.overflowY = 'scroll';
- }
-
return function restoreScroll() {
// Reset the inline style CSS to the previous.
body.style.cssText = prevBodyStyle;
@@ -1687,8 +1680,10 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
* nextTick() coalesces all calls within a single frame
* to minimize $digest thrashing
*
- * @param callback
- * @param digest
+ * @param {Function} callback function to be called after the tick
+ * @param {boolean} digest true to call $rootScope.$digest() after callback
+ * @param scope scope associated with callback. If the scope is destroyed, the callback will
+ * be skipped.
* @returns {*}
*/
nextTick: function(callback, digest, scope) {
@@ -1737,7 +1732,7 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
/**
* Processes a template and replaces the start/end symbols if the application has
- * overriden them.
+ * overridden them.
*
* @param template The template to process whose start/end tags may be replaced.
* @returns {*}
@@ -1894,6 +1889,19 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
return array.filter(function(value, index, self) {
return self.indexOf(value) === index;
});
+ },
+
+ /**
+ * Function to get innerHTML of SVG and Symbol elements in IE11
+ * @param {Element} element
+ * @returns {string} the innerHTML of the element passed in
+ */
+ getInnerHTML: function(element) {
+ var serializer = new XMLSerializer();
+
+ return Array.prototype.map.call(element.childNodes, function (child) {
+ return serializer.serializeToString(child);
+ }).join('');
}
};
@@ -1916,17 +1924,17 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
*/
angular.element.prototype.focus = angular.element.prototype.focus || function() {
- if (this.length) {
- this[0].focus();
- }
- return this;
- };
+ if (this.length) {
+ this[0].focus();
+ }
+ return this;
+};
angular.element.prototype.blur = angular.element.prototype.blur || function() {
- if (this.length) {
- this[0].blur();
- }
- return this;
- };
+ if (this.length) {
+ this[0].blur();
+ }
+ return this;
+};
})();
(function(){
@@ -2058,7 +2066,7 @@ function MdAriaService($$rAF, $log, $window, $interpolate) {
var content = getText(element);
var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;
- if ( !hasBinding && !content) {
+ if (!hasBinding && !content) {
expect(element, attrName, content);
}
}
@@ -4143,6 +4151,10 @@ function InterimElementProvider() {
function closeElement(interim) {
+ if (!interim) {
+ return $q.when(reason);
+ }
+
var hideAction = interim
.remove(reason, false, options || { })
.catch(function(reason) { return reason; })
@@ -5416,6 +5428,1609 @@ angular.module('material.core.meta', [])
(function(){
"use strict";
+angular.module('material.core.theming.palette', [])
+.constant('$mdColorPalette', {
+ 'red': {
+ '50': '#ffebee',
+ '100': '#ffcdd2',
+ '200': '#ef9a9a',
+ '300': '#e57373',
+ '400': '#ef5350',
+ '500': '#f44336',
+ '600': '#e53935',
+ '700': '#d32f2f',
+ '800': '#c62828',
+ '900': '#b71c1c',
+ 'A100': '#ff8a80',
+ 'A200': '#ff5252',
+ 'A400': '#ff1744',
+ 'A700': '#d50000',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 300 A100',
+ 'contrastStrongLightColors': '400 500 600 700 A200 A400 A700'
+ },
+ 'pink': {
+ '50': '#fce4ec',
+ '100': '#f8bbd0',
+ '200': '#f48fb1',
+ '300': '#f06292',
+ '400': '#ec407a',
+ '500': '#e91e63',
+ '600': '#d81b60',
+ '700': '#c2185b',
+ '800': '#ad1457',
+ '900': '#880e4f',
+ 'A100': '#ff80ab',
+ 'A200': '#ff4081',
+ 'A400': '#f50057',
+ 'A700': '#c51162',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100',
+ 'contrastStrongLightColors': '500 600 A200 A400 A700'
+ },
+ 'purple': {
+ '50': '#f3e5f5',
+ '100': '#e1bee7',
+ '200': '#ce93d8',
+ '300': '#ba68c8',
+ '400': '#ab47bc',
+ '500': '#9c27b0',
+ '600': '#8e24aa',
+ '700': '#7b1fa2',
+ '800': '#6a1b9a',
+ '900': '#4a148c',
+ 'A100': '#ea80fc',
+ 'A200': '#e040fb',
+ 'A400': '#d500f9',
+ 'A700': '#aa00ff',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100',
+ 'contrastStrongLightColors': '300 400 A200 A400 A700'
+ },
+ 'deep-purple': {
+ '50': '#ede7f6',
+ '100': '#d1c4e9',
+ '200': '#b39ddb',
+ '300': '#9575cd',
+ '400': '#7e57c2',
+ '500': '#673ab7',
+ '600': '#5e35b1',
+ '700': '#512da8',
+ '800': '#4527a0',
+ '900': '#311b92',
+ 'A100': '#b388ff',
+ 'A200': '#7c4dff',
+ 'A400': '#651fff',
+ 'A700': '#6200ea',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100',
+ 'contrastStrongLightColors': '300 400 A200'
+ },
+ 'indigo': {
+ '50': '#e8eaf6',
+ '100': '#c5cae9',
+ '200': '#9fa8da',
+ '300': '#7986cb',
+ '400': '#5c6bc0',
+ '500': '#3f51b5',
+ '600': '#3949ab',
+ '700': '#303f9f',
+ '800': '#283593',
+ '900': '#1a237e',
+ 'A100': '#8c9eff',
+ 'A200': '#536dfe',
+ 'A400': '#3d5afe',
+ 'A700': '#304ffe',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100',
+ 'contrastStrongLightColors': '300 400 A200 A400'
+ },
+ 'blue': {
+ '50': '#e3f2fd',
+ '100': '#bbdefb',
+ '200': '#90caf9',
+ '300': '#64b5f6',
+ '400': '#42a5f5',
+ '500': '#2196f3',
+ '600': '#1e88e5',
+ '700': '#1976d2',
+ '800': '#1565c0',
+ '900': '#0d47a1',
+ 'A100': '#82b1ff',
+ 'A200': '#448aff',
+ 'A400': '#2979ff',
+ 'A700': '#2962ff',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 300 400 A100',
+ 'contrastStrongLightColors': '500 600 700 A200 A400 A700'
+ },
+ 'light-blue': {
+ '50': '#e1f5fe',
+ '100': '#b3e5fc',
+ '200': '#81d4fa',
+ '300': '#4fc3f7',
+ '400': '#29b6f6',
+ '500': '#03a9f4',
+ '600': '#039be5',
+ '700': '#0288d1',
+ '800': '#0277bd',
+ '900': '#01579b',
+ 'A100': '#80d8ff',
+ 'A200': '#40c4ff',
+ 'A400': '#00b0ff',
+ 'A700': '#0091ea',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '600 700 800 900 A700',
+ 'contrastStrongLightColors': '600 700 800 A700'
+ },
+ 'cyan': {
+ '50': '#e0f7fa',
+ '100': '#b2ebf2',
+ '200': '#80deea',
+ '300': '#4dd0e1',
+ '400': '#26c6da',
+ '500': '#00bcd4',
+ '600': '#00acc1',
+ '700': '#0097a7',
+ '800': '#00838f',
+ '900': '#006064',
+ 'A100': '#84ffff',
+ 'A200': '#18ffff',
+ 'A400': '#00e5ff',
+ 'A700': '#00b8d4',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '700 800 900',
+ 'contrastStrongLightColors': '700 800 900'
+ },
+ 'teal': {
+ '50': '#e0f2f1',
+ '100': '#b2dfdb',
+ '200': '#80cbc4',
+ '300': '#4db6ac',
+ '400': '#26a69a',
+ '500': '#009688',
+ '600': '#00897b',
+ '700': '#00796b',
+ '800': '#00695c',
+ '900': '#004d40',
+ 'A100': '#a7ffeb',
+ 'A200': '#64ffda',
+ 'A400': '#1de9b6',
+ 'A700': '#00bfa5',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '500 600 700 800 900',
+ 'contrastStrongLightColors': '500 600 700'
+ },
+ 'green': {
+ '50': '#e8f5e9',
+ '100': '#c8e6c9',
+ '200': '#a5d6a7',
+ '300': '#81c784',
+ '400': '#66bb6a',
+ '500': '#4caf50',
+ '600': '#43a047',
+ '700': '#388e3c',
+ '800': '#2e7d32',
+ '900': '#1b5e20',
+ 'A100': '#b9f6ca',
+ 'A200': '#69f0ae',
+ 'A400': '#00e676',
+ 'A700': '#00c853',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '500 600 700 800 900',
+ 'contrastStrongLightColors': '500 600 700'
+ },
+ 'light-green': {
+ '50': '#f1f8e9',
+ '100': '#dcedc8',
+ '200': '#c5e1a5',
+ '300': '#aed581',
+ '400': '#9ccc65',
+ '500': '#8bc34a',
+ '600': '#7cb342',
+ '700': '#689f38',
+ '800': '#558b2f',
+ '900': '#33691e',
+ 'A100': '#ccff90',
+ 'A200': '#b2ff59',
+ 'A400': '#76ff03',
+ 'A700': '#64dd17',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '700 800 900',
+ 'contrastStrongLightColors': '700 800 900'
+ },
+ 'lime': {
+ '50': '#f9fbe7',
+ '100': '#f0f4c3',
+ '200': '#e6ee9c',
+ '300': '#dce775',
+ '400': '#d4e157',
+ '500': '#cddc39',
+ '600': '#c0ca33',
+ '700': '#afb42b',
+ '800': '#9e9d24',
+ '900': '#827717',
+ 'A100': '#f4ff81',
+ 'A200': '#eeff41',
+ 'A400': '#c6ff00',
+ 'A700': '#aeea00',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '900',
+ 'contrastStrongLightColors': '900'
+ },
+ 'yellow': {
+ '50': '#fffde7',
+ '100': '#fff9c4',
+ '200': '#fff59d',
+ '300': '#fff176',
+ '400': '#ffee58',
+ '500': '#ffeb3b',
+ '600': '#fdd835',
+ '700': '#fbc02d',
+ '800': '#f9a825',
+ '900': '#f57f17',
+ 'A100': '#ffff8d',
+ 'A200': '#ffff00',
+ 'A400': '#ffea00',
+ 'A700': '#ffd600',
+ 'contrastDefaultColor': 'dark'
+ },
+ 'amber': {
+ '50': '#fff8e1',
+ '100': '#ffecb3',
+ '200': '#ffe082',
+ '300': '#ffd54f',
+ '400': '#ffca28',
+ '500': '#ffc107',
+ '600': '#ffb300',
+ '700': '#ffa000',
+ '800': '#ff8f00',
+ '900': '#ff6f00',
+ 'A100': '#ffe57f',
+ 'A200': '#ffd740',
+ 'A400': '#ffc400',
+ 'A700': '#ffab00',
+ 'contrastDefaultColor': 'dark'
+ },
+ 'orange': {
+ '50': '#fff3e0',
+ '100': '#ffe0b2',
+ '200': '#ffcc80',
+ '300': '#ffb74d',
+ '400': '#ffa726',
+ '500': '#ff9800',
+ '600': '#fb8c00',
+ '700': '#f57c00',
+ '800': '#ef6c00',
+ '900': '#e65100',
+ 'A100': '#ffd180',
+ 'A200': '#ffab40',
+ 'A400': '#ff9100',
+ 'A700': '#ff6d00',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '800 900',
+ 'contrastStrongLightColors': '800 900'
+ },
+ 'deep-orange': {
+ '50': '#fbe9e7',
+ '100': '#ffccbc',
+ '200': '#ffab91',
+ '300': '#ff8a65',
+ '400': '#ff7043',
+ '500': '#ff5722',
+ '600': '#f4511e',
+ '700': '#e64a19',
+ '800': '#d84315',
+ '900': '#bf360c',
+ 'A100': '#ff9e80',
+ 'A200': '#ff6e40',
+ 'A400': '#ff3d00',
+ 'A700': '#dd2c00',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 300 400 A100 A200',
+ 'contrastStrongLightColors': '500 600 700 800 900 A400 A700'
+ },
+ 'brown': {
+ '50': '#efebe9',
+ '100': '#d7ccc8',
+ '200': '#bcaaa4',
+ '300': '#a1887f',
+ '400': '#8d6e63',
+ '500': '#795548',
+ '600': '#6d4c41',
+ '700': '#5d4037',
+ '800': '#4e342e',
+ '900': '#3e2723',
+ 'A100': '#d7ccc8',
+ 'A200': '#bcaaa4',
+ 'A400': '#8d6e63',
+ 'A700': '#5d4037',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100 A200',
+ 'contrastStrongLightColors': '300 400'
+ },
+ 'grey': {
+ '50': '#fafafa',
+ '100': '#f5f5f5',
+ '200': '#eeeeee',
+ '300': '#e0e0e0',
+ '400': '#bdbdbd',
+ '500': '#9e9e9e',
+ '600': '#757575',
+ '700': '#616161',
+ '800': '#424242',
+ '900': '#212121',
+ 'A100': '#ffffff',
+ 'A200': '#000000',
+ 'A400': '#303030',
+ 'A700': '#616161',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '600 700 800 900 A200 A400 A700'
+ },
+ 'blue-grey': {
+ '50': '#eceff1',
+ '100': '#cfd8dc',
+ '200': '#b0bec5',
+ '300': '#90a4ae',
+ '400': '#78909c',
+ '500': '#607d8b',
+ '600': '#546e7a',
+ '700': '#455a64',
+ '800': '#37474f',
+ '900': '#263238',
+ 'A100': '#cfd8dc',
+ 'A200': '#b0bec5',
+ 'A400': '#78909c',
+ 'A700': '#455a64',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 300 A100 A200',
+ 'contrastStrongLightColors': '400 500 700'
+ }
+});
+
+})();
+(function(){
+"use strict";
+
+(function(angular) {
+ 'use strict';
+/**
+ * @ngdoc module
+ * @name material.core.theming
+ * @description
+ * Theming
+ */
+detectDisabledThemes.$inject = ["$mdThemingProvider"];
+ThemingDirective.$inject = ["$mdTheming", "$interpolate", "$parse", "$mdUtil", "$q", "$log"];
+ThemableDirective.$inject = ["$mdTheming"];
+ThemingProvider.$inject = ["$mdColorPalette", "$$mdMetaProvider"];
+generateAllThemes.$inject = ["$injector", "$mdTheming"];
+angular.module('material.core.theming', ['material.core.theming.palette', 'material.core.meta'])
+ .directive('mdTheme', ThemingDirective)
+ .directive('mdThemable', ThemableDirective)
+ .directive('mdThemesDisabled', disableThemesDirective )
+ .provider('$mdTheming', ThemingProvider)
+ .config( detectDisabledThemes )
+ .run(generateAllThemes);
+
+/**
+ * Detect if the HTML or the BODY tags has a [md-themes-disabled] attribute
+ * If yes, then immediately disable all theme stylesheet generation and DOM injection
+ */
+/**
+ * @ngInject
+ */
+function detectDisabledThemes($mdThemingProvider) {
+ var isDisabled = !!document.querySelector('[md-themes-disabled]');
+ $mdThemingProvider.disableTheming(isDisabled);
+}
+
+/**
+ * @ngdoc service
+ * @name $mdThemingProvider
+ * @module material.core.theming
+ *
+ * @description Provider to configure the `$mdTheming` service.
+ *
+ * ### Default Theme
+ * The `$mdThemingProvider` uses by default the following theme configuration:
+ *
+ * - Primary Palette: `Blue`
+ * - Accent Palette: `Pink`
+ * - Warn Palette: `Deep-Orange`
+ * - Background Palette: `Grey`
+ *
+ * If you don't want to use the `md-theme` directive on the elements itself, you may want to overwrite
+ * the default theme.+ * This can be done by using the following markup. + * + *
+ * If you have an application, which changes its theme on runtime, you have to enable theme watching. + * + *
+ * You are able to register your own styles by using the following markup. + * + *
+ * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
+ * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary', + * 'accent', 'background' and 'warn'. Default is `primary`.
+ * `hue` - The hue from the selected palette. Default is `800`
+ * + *
+ * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
+ * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`, + * `accent`, `background`, and `warn`. Default is `primary`.
+ * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
+ * @returns {function} Function that removes the browser coloring when called. + */ + var enableBrowserColor = function (options) { + options = angular.isObject(options) ? options : {}; + + var theme = options.theme || 'default'; + var hue = options.hue || '800'; + + var palette = PALETTES[options.palette] || + PALETTES[THEMES[theme].colors[options.palette || 'primary'].name]; + + var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue]; + if (color.substr(0, 1) !== '#') color = '#' + color; + + return setBrowserColor(color); + }; + + return themingProvider = { + definePalette: definePalette, + extendPalette: extendPalette, + theme: registerTheme, + + /** + * return a read-only clone of the current theme configuration + */ + configuration : function() { + return angular.extend( { }, themeConfig, { + defaultTheme : defaultTheme, + alwaysWatchTheme : alwaysWatchTheme, + registeredStyles : [].concat(themeConfig.registeredStyles) + }); + }, + + /** + * @ngdoc method + * @name $mdThemingProvider#disableTheming + * @description + * An easier way to disable theming without having to use `.constant("$MD_THEME_CSS","");`. + * This disables all dynamic theme style sheet generations and injections. + * @param {boolean=} isDisabled Disable all dynamic theme style sheet generations and injections + * if `true` or `undefined`. + */ + disableTheming: function(isDisabled) { + themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled; + }, + + /** + * @ngdoc method + * @name $mdThemingProvider#registerStyles + * @param {string} styles The styles to be appended to AngularJS Material's built in theme CSS. + */ + registerStyles: function(styles) { + themeConfig.registeredStyles.push(styles); + }, + + /** + * @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. + */ + setNonce: function(nonceValue) { + themeConfig.nonce = nonceValue; + }, + + generateThemesOnDemand: function(onDemand) { + themeConfig.generateOnDemand = onDemand; + }, + + /** + * @ngdoc method + * @name $mdThemingProvider#setDefaultTheme + * @param {string} theme Default theme name to be applied to elements. Default value is `default`. + */ + setDefaultTheme: function(theme) { + defaultTheme = theme; + }, + + /** + * @ngdoc method + * @name $mdThemingProvider#alwaysWatchTheme + * @param {boolean} alwaysWatch Whether or not to always watch themes for changes and re-apply + * classes when they change. Default is `false`. Enabling can reduce performance. + */ + alwaysWatchTheme: function(alwaysWatch) { + alwaysWatchTheme = alwaysWatch; + }, + + enableBrowserColor: enableBrowserColor, + + $get: ThemingService, + _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES, + _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES, + _PALETTES: PALETTES, + _THEMES: THEMES, + _parseRules: parseRules, + _rgba: rgba + }; + + /** + * @ngdoc method + * @name $mdThemingProvider#definePalette + * @description + * In the event that you need to define a custom color palette, you can use this function to + * make it available to your theme for use in its intention groups.
+ * Note that you must specify all hues in the definition map. + * @param {string} name Name of palette being defined + * @param {object} map Palette definition that includes hue definitions and contrast colors: + * - `'50'` - `{string}`: HEX color + * - `'100'` - `{string}`: HEX color + * - `'200'` - `{string}`: HEX color + * - `'300'` - `{string}`: HEX color + * - `'400'` - `{string}`: HEX color + * - `'500'` - `{string}`: HEX color + * - `'600'` - `{string}`: HEX color + * - `'700'` - `{string}`: HEX color + * - `'800'` - `{string}`: HEX color + * - `'900'` - `{string}`: HEX color + * - `'A100'` - `{string}`: HEX color + * - `'A200'` - `{string}`: HEX color + * - `'A400'` - `{string}`: HEX color + * - `'A700'` - `{string}`: HEX color + * - `'contrastDefaultColor'` - `{string}`: `light` or `dark` + * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text). + * For example: `['50', '100', '200', '300', '400', 'A100']`. + * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text). + * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`. + */ + function definePalette(name, map) { + map = map || {}; + PALETTES[name] = checkPaletteValid(name, map); + return themingProvider; + } + + /** + * @ngdoc method + * @name $mdThemingProvider#extendPalette + * @description + * Sometimes it is easier to extend an existing color palette and then change a few properties, + * rather than defining a whole new palette. + * @param {string} name Name of palette being extended + * @param {object} map Palette definition that includes optional hue definitions and contrast colors: + * - `'50'` - `{string}`: HEX color + * - `'100'` - `{string}`: HEX color + * - `'200'` - `{string}`: HEX color + * - `'300'` - `{string}`: HEX color + * - `'400'` - `{string}`: HEX color + * - `'500'` - `{string}`: HEX color + * - `'600'` - `{string}`: HEX color + * - `'700'` - `{string}`: HEX color + * - `'800'` - `{string}`: HEX color + * - `'900'` - `{string}`: HEX color + * - `'A100'` - `{string}`: HEX color + * - `'A200'` - `{string}`: HEX color + * - `'A400'` - `{string}`: HEX color + * - `'A700'` - `{string}`: HEX color + * - `'contrastDefaultColor'` - `{string}`: `light` or `dark` + * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text). + * For example: `['50', '100', '200', '300', '400', 'A100']`. + * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text). + * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`. + * @returns {object} A new object which is a copy of the given palette, `name`, + * with variables from `map` overwritten. + */ + function extendPalette(name, map) { + return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map) ); + } + + // Make sure that palette has all required hues + function checkPaletteValid(name, map) { + var missingColors = VALID_HUE_VALUES.filter(function(field) { + return !map[field]; + }); + if (missingColors.length) { + throw new Error("Missing colors %1 in palette %2!" + .replace('%1', missingColors.join(', ')) + .replace('%2', name)); + } + + return map; + } + + /** + * @ngdoc method + * @name $mdThemingProvider#theme + * @description + * Register a theme (which is a collection of color palettes); i.e. `warn`, `accent`, + * `background`, and `primary`.
+ * Optionally inherit from an existing theme. + * @param {string} name Name of theme being registered + * @param {string=} inheritFrom Existing theme name to inherit from + */ + function registerTheme(name, inheritFrom) { + if (THEMES[name]) return THEMES[name]; + + inheritFrom = inheritFrom || 'default'; + + var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom; + var theme = new Theme(name); + + if (parentTheme) { + angular.forEach(parentTheme.colors, function(color, colorType) { + theme.colors[colorType] = { + name: color.name, + // Make sure a COPY of the hues is given to the child color, + // not the same reference. + hues: angular.extend({}, color.hues) + }; + }); + } + THEMES[name] = theme; + + return theme; + } + + function Theme(name) { + var self = this; + self.name = name; + self.colors = {}; + + self.dark = setDark; + setDark(false); + + function setDark(isDark) { + isDark = arguments.length === 0 ? true : !!isDark; + + // If no change, abort + if (isDark === self.isDark) return; + + self.isDark = isDark; + + self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND; + self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW; + + // Light and dark themes have different default hues. + // Go through each existing color type for this theme, and for every + // hue value that is still the default hue value from the previous light/dark setting, + // set it to the default hue value from the new light/dark setting. + var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES; + var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES; + angular.forEach(newDefaultHues, function(newDefaults, colorType) { + var color = self.colors[colorType]; + var oldDefaults = oldDefaultHues[colorType]; + if (color) { + for (var hueName in color.hues) { + if (color.hues[hueName] === oldDefaults[hueName]) { + color.hues[hueName] = newDefaults[hueName]; + } + } + } + }); + + return self; + } + + THEME_COLOR_TYPES.forEach(function(colorType) { + var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType]; + self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) { + var color = self.colors[colorType] = { + name: paletteName, + hues: angular.extend({}, defaultHues, hues) + }; + + Object.keys(color.hues).forEach(function(name) { + if (!defaultHues[name]) { + throw new Error("Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4" + .replace('%1', name) + .replace('%2', self.name) + .replace('%3', paletteName) + .replace('%4', Object.keys(defaultHues).join(', ')) + ); + } + }); + Object.keys(color.hues).map(function(key) { + return color.hues[key]; + }).forEach(function(hueValue) { + if (VALID_HUE_VALUES.indexOf(hueValue) == -1) { + throw new Error("Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5" + .replace('%1', hueValue) + .replace('%2', self.name) + .replace('%3', colorType) + .replace('%4', paletteName) + .replace('%5', VALID_HUE_VALUES.join(', ')) + ); + } + }); + return self; + }; + + self[colorType + 'Color'] = function() { + var args = Array.prototype.slice.call(arguments); + // eslint-disable-next-line no-console + console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been deprecated. ' + + 'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.'); + return self[colorType + 'Palette'].apply(self, args); + }; + }); + } + + /** + * @ngdoc service + * @name $mdTheming + * @module material.core.theming + * @description + * Service that makes an element apply theming related classes to itself. + * + * For more information on the hue objects, their default values, as well as valid hue values, please visit the custom hues section of Configuring a Theme. + * + *
+ * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. + * Default is `default` theme.
+ * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended + * defined palettes, or `primary`, `accent`, `background`, and `warn`. Default is `primary`. + *
+ * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
+ * @returns {function} Function that removes the browser coloring when called. + */ + + /** + * @ngdoc method + * @name $mdTheming#defineTheme + * @description + * Dynamically define a theme by using an options object that contains palette names. + * + * @param {string} name Theme name to define + * @param {object} options Theme definition options + * Options are:
+ * - `primary` - `{string}`: The name of the primary palette to use in the theme.
+ * - `primaryHues` - `{object=}`: Override hues for primary palette.
+ * - `accent` - `{string}`: The name of the accent palette to use in the theme.
+ * - `accentHues` - `{object=}`: Override hues for accent palette.
+ * - `warn` - `{string}`: The name of the warn palette to use in the theme.
+ * - `warnHues` - `{object=}`: Override hues for warn palette.
+ * - `background` - `{string}`: The name of the background palette to use in the theme.
+ * - `backgroundHues` - `{object=}`: Override hues for background palette.
+ * - `dark` - `{boolean}`: Indicates if it's a dark theme.
+ * @returns {Promise
- * This can be done by using the following markup. - * - *
- * If you have an application, which changes its theme on runtime, you have to enable theme watching. - * - *
- * You are able to register your own styles by using the following markup. - * - *
- * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
- * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary', - * 'accent', 'background' and 'warn'. Default is `primary`.
- * `hue` - The hue from the selected palette. Default is `800`
- * - *
- * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
- * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`, - * `accent`, `background`, and `warn`. Default is `primary`.
- * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
- * @returns {function} Function that removes the browser coloring when called. - */ - var enableBrowserColor = function (options) { - options = angular.isObject(options) ? options : {}; - - var theme = options.theme || 'default'; - var hue = options.hue || '800'; - - var palette = PALETTES[options.palette] || - PALETTES[THEMES[theme].colors[options.palette || 'primary'].name]; - - var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue]; - - return setBrowserColor(color); - }; - - return themingProvider = { - definePalette: definePalette, - extendPalette: extendPalette, - theme: registerTheme, - - /** - * return a read-only clone of the current theme configuration - */ - configuration : function() { - return angular.extend( { }, themeConfig, { - defaultTheme : defaultTheme, - alwaysWatchTheme : alwaysWatchTheme, - registeredStyles : [].concat(themeConfig.registeredStyles) - }); - }, - - /** - * @ngdoc method - * @name $mdThemingProvider#disableTheming - * @description - * An easier way to disable theming without having to use `.constant("$MD_THEME_CSS","");`. - * This disables all dynamic theme style sheet generations and injections. - * @param {boolean=} isDisabled Disable all dynamic theme style sheet generations and injections - * if `true` or `undefined`. - */ - disableTheming: function(isDisabled) { - themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled; - }, - - /** - * @ngdoc method - * @name $mdThemingProvider#registerStyles - * @param {string} styles The styles to be appended to AngularJS Material's built in theme CSS. - */ - registerStyles: function(styles) { - themeConfig.registeredStyles.push(styles); - }, - - /** - * @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. - */ - setNonce: function(nonceValue) { - themeConfig.nonce = nonceValue; - }, - - generateThemesOnDemand: function(onDemand) { - themeConfig.generateOnDemand = onDemand; - }, - - /** - * @ngdoc method - * @name $mdThemingProvider#setDefaultTheme - * @param {string} theme Default theme name to be applied to elements. Default value is `default`. - */ - setDefaultTheme: function(theme) { - defaultTheme = theme; - }, - - /** - * @ngdoc method - * @name $mdThemingProvider#alwaysWatchTheme - * @param {boolean} alwaysWatch Whether or not to always watch themes for changes and re-apply - * classes when they change. Default is `false`. Enabling can reduce performance. - */ - alwaysWatchTheme: function(alwaysWatch) { - alwaysWatchTheme = alwaysWatch; - }, - - enableBrowserColor: enableBrowserColor, - - $get: ThemingService, - _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES, - _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES, - _PALETTES: PALETTES, - _THEMES: THEMES, - _parseRules: parseRules, - _rgba: rgba - }; - - /** - * @ngdoc method - * @name $mdThemingProvider#definePalette - * @description - * In the event that you need to define a custom color palette, you can use this function to - * make it available to your theme for use in its intention groups.
- * Note that you must specify all hues in the definition map. - * @param {string} name Name of palette being defined - * @param {object} map Palette definition that includes hue definitions and contrast colors: - * - `'50'` - `{string}`: HEX color - * - `'100'` - `{string}`: HEX color - * - `'200'` - `{string}`: HEX color - * - `'300'` - `{string}`: HEX color - * - `'400'` - `{string}`: HEX color - * - `'500'` - `{string}`: HEX color - * - `'600'` - `{string}`: HEX color - * - `'700'` - `{string}`: HEX color - * - `'800'` - `{string}`: HEX color - * - `'900'` - `{string}`: HEX color - * - `'A100'` - `{string}`: HEX color - * - `'A200'` - `{string}`: HEX color - * - `'A400'` - `{string}`: HEX color - * - `'A700'` - `{string}`: HEX color - * - `'contrastDefaultColor'` - `{string}`: `light` or `dark` - * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text). - * For example: `['50', '100', '200', '300', '400', 'A100']`. - * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text). - * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`. - */ - function definePalette(name, map) { - map = map || {}; - PALETTES[name] = checkPaletteValid(name, map); - return themingProvider; - } - - /** - * @ngdoc method - * @name $mdThemingProvider#extendPalette - * @description - * Sometimes it is easier to extend an existing color palette and then change a few properties, - * rather than defining a whole new palette. - * @param {string} name Name of palette being extended - * @param {object} map Palette definition that includes optional hue definitions and contrast colors: - * - `'50'` - `{string}`: HEX color - * - `'100'` - `{string}`: HEX color - * - `'200'` - `{string}`: HEX color - * - `'300'` - `{string}`: HEX color - * - `'400'` - `{string}`: HEX color - * - `'500'` - `{string}`: HEX color - * - `'600'` - `{string}`: HEX color - * - `'700'` - `{string}`: HEX color - * - `'800'` - `{string}`: HEX color - * - `'900'` - `{string}`: HEX color - * - `'A100'` - `{string}`: HEX color - * - `'A200'` - `{string}`: HEX color - * - `'A400'` - `{string}`: HEX color - * - `'A700'` - `{string}`: HEX color - * - `'contrastDefaultColor'` - `{string}`: `light` or `dark` - * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text). - * For example: `['50', '100', '200', '300', '400', 'A100']`. - * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text). - * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`. - * @returns {object} A new object which is a copy of the given palette, `name`, - * with variables from `map` overwritten. - */ - function extendPalette(name, map) { - return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map) ); - } - - // Make sure that palette has all required hues - function checkPaletteValid(name, map) { - var missingColors = VALID_HUE_VALUES.filter(function(field) { - return !map[field]; - }); - if (missingColors.length) { - throw new Error("Missing colors %1 in palette %2!" - .replace('%1', missingColors.join(', ')) - .replace('%2', name)); - } - - return map; - } - - /** - * @ngdoc method - * @name $mdThemingProvider#theme - * @description - * Register a theme (which is a collection of color palettes); i.e. `warn`, `accent`, - * `background`, and `primary`.
- * Optionally inherit from an existing theme. - * @param {string} name Name of theme being registered - * @param {string=} inheritFrom Existing theme name to inherit from - */ - function registerTheme(name, inheritFrom) { - if (THEMES[name]) return THEMES[name]; - - inheritFrom = inheritFrom || 'default'; - - var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom; - var theme = new Theme(name); - - if (parentTheme) { - angular.forEach(parentTheme.colors, function(color, colorType) { - theme.colors[colorType] = { - name: color.name, - // Make sure a COPY of the hues is given to the child color, - // not the same reference. - hues: angular.extend({}, color.hues) - }; - }); - } - THEMES[name] = theme; - - return theme; - } - - function Theme(name) { - var self = this; - self.name = name; - self.colors = {}; - - self.dark = setDark; - setDark(false); - - function setDark(isDark) { - isDark = arguments.length === 0 ? true : !!isDark; - - // If no change, abort - if (isDark === self.isDark) return; - - self.isDark = isDark; - - self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND; - self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW; - - // Light and dark themes have different default hues. - // Go through each existing color type for this theme, and for every - // hue value that is still the default hue value from the previous light/dark setting, - // set it to the default hue value from the new light/dark setting. - var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES; - var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES; - angular.forEach(newDefaultHues, function(newDefaults, colorType) { - var color = self.colors[colorType]; - var oldDefaults = oldDefaultHues[colorType]; - if (color) { - for (var hueName in color.hues) { - if (color.hues[hueName] === oldDefaults[hueName]) { - color.hues[hueName] = newDefaults[hueName]; - } - } - } - }); - - return self; - } - - THEME_COLOR_TYPES.forEach(function(colorType) { - var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType]; - self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) { - var color = self.colors[colorType] = { - name: paletteName, - hues: angular.extend({}, defaultHues, hues) - }; - - Object.keys(color.hues).forEach(function(name) { - if (!defaultHues[name]) { - throw new Error("Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4" - .replace('%1', name) - .replace('%2', self.name) - .replace('%3', paletteName) - .replace('%4', Object.keys(defaultHues).join(', ')) - ); - } - }); - Object.keys(color.hues).map(function(key) { - return color.hues[key]; - }).forEach(function(hueValue) { - if (VALID_HUE_VALUES.indexOf(hueValue) == -1) { - throw new Error("Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5" - .replace('%1', hueValue) - .replace('%2', self.name) - .replace('%3', colorType) - .replace('%4', paletteName) - .replace('%5', VALID_HUE_VALUES.join(', ')) - ); - } - }); - return self; - }; - - self[colorType + 'Color'] = function() { - var args = Array.prototype.slice.call(arguments); - // eslint-disable-next-line no-console - console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been deprecated. ' + - 'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.'); - return self[colorType + 'Palette'].apply(self, args); - }; - }); - } - - /** - * @ngdoc service - * @name $mdTheming - * @module material.core.theming - * @description - * Service that makes an element apply theming related classes to itself. - * - *
- * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
- * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`, - * `accent`, `background`, and `warn`. Default is `primary`.
- * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
- * @returns {function} Function that removes the browser coloring when called. - */ - - /** - * @ngdoc method - * @name $mdTheming#defineTheme - * @description - * Dynamically define a theme by using an options object that contains palette names. - * - * @param {string} name Theme name to define - * @param {object} options Theme definition options - * Options are:
- * - `primary` - `{string}`: The name of the primary palette to use in the theme.
- * - `accent` - `{string}`: The name of the accent palette to use in the theme.
- * - `warn` - `{string}`: The name of the warn palette to use in the theme.
- * - `background` - `{string}`: The name of the background palette to use in the theme.
- * - `dark` - `{boolean}`: Indicates if it's a dark theme.
- * @returns {Promise