diff options
Diffstat (limited to 'vnfmarket/common/thirdparty/angular-material/modules/js/navBar')
7 files changed, 692 insertions, 0 deletions
diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/bower.json b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/bower.json new file mode 100644 index 00000000..75959a57 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/bower.json @@ -0,0 +1,7 @@ +{ + "name": "angular-material-navBar", + "version": "1.1.2-master-a9ba340", + "dependencies": { + "angular-material-core": "1.1.2-master-a9ba340" + } +}
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar-default-theme.css b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar-default-theme.css new file mode 100644 index 00000000..10361703 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar-default-theme.css @@ -0,0 +1,16 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +md-nav-bar.md-THEME_NAME-theme .md-nav-bar { + background-color: transparent; + border-color: '{{foreground-4}}'; } + +md-nav-bar.md-THEME_NAME-theme .md-button._md-nav-button.md-unselected { + color: '{{foreground-2}}'; } + +md-nav-bar.md-THEME_NAME-theme md-nav-ink-bar { + color: '{{accent-color}}'; + background: '{{accent-color}}'; } diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar-default-theme.min.css b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar-default-theme.min.css new file mode 100644 index 00000000..e40bde96 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar-default-theme.min.css @@ -0,0 +1,6 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */md-nav-bar.md-THEME_NAME-theme .md-nav-bar{background-color:transparent;border-color:"{{foreground-4}}"}md-nav-bar.md-THEME_NAME-theme .md-button._md-nav-button.md-unselected{color:"{{foreground-2}}"}md-nav-bar.md-THEME_NAME-theme md-nav-ink-bar{color:"{{accent-color}}";background:"{{accent-color}}"}
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.css b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.css new file mode 100644 index 00000000..2406b9cd --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.css @@ -0,0 +1,61 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +/** Matches "md-tabs md-tabs-wrapper" style. */ +.md-nav-bar { + border-style: solid; + border-width: 0 0 1px; + height: 48px; + position: relative; } + +._md-nav-bar-list { + outline: none; + list-style: none; + margin: 0; + padding: 0; + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + flex-direction: row; } + +.md-nav-item:first-of-type { + margin-left: 8px; } + +.md-button._md-nav-button { + line-height: 24px; + margin: 0 4px; + padding: 12px 16px; + -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); + transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); } + .md-button._md-nav-button:focus { + outline: none; } + .md-button._md-nav-button:hover { + background-color: inherit; } + +md-nav-ink-bar { + bottom: 0; + height: 2px; + left: auto; + position: absolute; + right: auto; + background-color: black; } + md-nav-ink-bar._md-left { + -webkit-transition: left 0.125s cubic-bezier(0.35, 0, 0.25, 1), right 0.25s cubic-bezier(0.35, 0, 0.25, 1); + transition: left 0.125s cubic-bezier(0.35, 0, 0.25, 1), right 0.25s cubic-bezier(0.35, 0, 0.25, 1); } + md-nav-ink-bar._md-right { + -webkit-transition: left 0.25s cubic-bezier(0.35, 0, 0.25, 1), right 0.125s cubic-bezier(0.35, 0, 0.25, 1); + transition: left 0.25s cubic-bezier(0.35, 0, 0.25, 1), right 0.125s cubic-bezier(0.35, 0, 0.25, 1); } + md-nav-ink-bar.ng-animate { + -webkit-transition: none; + transition: none; } + +md-nav-extra-content { + min-height: 48px; + padding-right: 12px; } diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.js b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.js new file mode 100644 index 00000000..8a78d20b --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.js @@ -0,0 +1,589 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +(function( window, angular, undefined ){ +"use strict"; + +/** + * @ngdoc module + * @name material.components.navBar + */ + + +MdNavBarController['$inject'] = ["$element", "$scope", "$timeout", "$mdConstant"]; +MdNavItem['$inject'] = ["$mdAria", "$$rAF"]; +MdNavItemController['$inject'] = ["$element"]; +MdNavBar['$inject'] = ["$mdAria", "$mdTheming"]; +angular.module('material.components.navBar', ['material.core']) + .controller('MdNavBarController', MdNavBarController) + .directive('mdNavBar', MdNavBar) + .controller('MdNavItemController', MdNavItemController) + .directive('mdNavItem', MdNavItem); + + +/***************************************************************************** + * PUBLIC DOCUMENTATION * + *****************************************************************************/ +/** + * @ngdoc directive + * @name mdNavBar + * @module material.components.navBar + * + * @restrict E + * + * @description + * The `<md-nav-bar>` directive renders a list of material tabs that can be used + * for top-level page navigation. Unlike `<md-tabs>`, it has no concept of a tab + * body and no bar pagination. + * + * Because it deals with page navigation, certain routing concepts are built-in. + * Route changes via via ng-href, ui-sref, or ng-click events are supported. + * Alternatively, the user could simply watch currentNavItem for changes. + * + * Accessibility functionality is implemented as a site navigator with a + * listbox, according to + * https://www.w3.org/TR/wai-aria-practices/#Site_Navigator_Tabbed_Style + * + * @param {string=} mdSelectedNavItem The name of the current tab; this must + * match the name attribute of `<md-nav-item>` + * @param {boolean=} mdNoInkBar If set to true, the ink bar will be hidden. + * @param {string=} navBarAriaLabel An aria-label for the nav-bar + * + * @usage + * <hljs lang="html"> + * <md-nav-bar md-selected-nav-item="currentNavItem"> + * <md-nav-item md-nav-click="goto('page1')" name="page1"> + * Page One + * </md-nav-item> + * <md-nav-item md-nav-href="#page2" name="page3">Page Two</md-nav-item> + * <md-nav-item md-nav-sref="page3" name="page2">Page Three</md-nav-item> + * <md-nav-item + * md-nav-sref="app.page4" + * sref-opts="{reload: true, notify: true}" + * name="page4"> + * Page Four + * </md-nav-item> + * </md-nav-bar> + *</hljs> + * <hljs lang="js"> + * (function() { + * 'use strict'; + * + * $rootScope.$on('$routeChangeSuccess', function(event, current) { + * $scope.currentLink = getCurrentLinkFromRoute(current); + * }); + * }); + * </hljs> + */ + +/***************************************************************************** + * mdNavItem + *****************************************************************************/ +/** + * @ngdoc directive + * @name mdNavItem + * @module material.components.navBar + * + * @restrict E + * + * @description + * `<md-nav-item>` describes a page navigation link within the `<md-nav-bar>` + * component. It renders an md-button as the actual link. + * + * Exactly one of the mdNavClick, mdNavHref, mdNavSref attributes are required + * to be specified. + * + * @param {Function=} mdNavClick Function which will be called when the + * link is clicked to change the page. Renders as an `ng-click`. + * @param {string=} mdNavHref url to transition to when this link is clicked. + * Renders as an `ng-href`. + * @param {string=} mdNavSref Ui-router state to transition to when this link is + * clicked. Renders as a `ui-sref`. + * @param {!Object=} srefOpts Ui-router options that are passed to the + * `$state.go()` function. See the [Ui-router documentation for details] + * (https://ui-router.github.io/docs/latest/interfaces/transition.transitionoptions.html). + * @param {string=} name The name of this link. Used by the nav bar to know + * which link is currently selected. + * @param {string=} aria-label Adds alternative text for accessibility + * + * @usage + * See `<md-nav-bar>` for usage. + */ + + +/***************************************************************************** + * IMPLEMENTATION * + *****************************************************************************/ + +function MdNavBar($mdAria, $mdTheming) { + return { + restrict: 'E', + transclude: true, + controller: MdNavBarController, + controllerAs: 'ctrl', + bindToController: true, + scope: { + 'mdSelectedNavItem': '=?', + 'mdNoInkBar': '=?', + 'navBarAriaLabel': '@?', + }, + template: + '<div class="md-nav-bar">' + + '<nav role="navigation">' + + '<ul class="_md-nav-bar-list" ng-transclude role="listbox"' + + 'tabindex="0"' + + 'ng-focus="ctrl.onFocus()"' + + 'ng-keydown="ctrl.onKeydown($event)"' + + 'aria-label="{{ctrl.navBarAriaLabel}}">' + + '</ul>' + + '</nav>' + + '<md-nav-ink-bar ng-hide="ctrl.mdNoInkBar"></md-nav-ink-bar>' + + '</div>', + link: function(scope, element, attrs, ctrl) { + $mdTheming(element); + if (!ctrl.navBarAriaLabel) { + $mdAria.expectAsync(element, 'aria-label', angular.noop); + } + }, + }; +} + +/** + * Controller for the nav-bar component. + * + * Accessibility functionality is implemented as a site navigator with a + * listbox, according to + * https://www.w3.org/TR/wai-aria-practices/#Site_Navigator_Tabbed_Style + * @param {!angular.JQLite} $element + * @param {!angular.Scope} $scope + * @param {!angular.Timeout} $timeout + * @param {!Object} $mdConstant + * @constructor + * @final + * ngInject + */ +function MdNavBarController($element, $scope, $timeout, $mdConstant) { + // Injected variables + /** @private @const {!angular.Timeout} */ + this._$timeout = $timeout; + + /** @private @const {!angular.Scope} */ + this._$scope = $scope; + + /** @private @const {!Object} */ + this._$mdConstant = $mdConstant; + + // Data-bound variables. + /** @type {string} */ + this.mdSelectedNavItem; + + /** @type {string} */ + this.navBarAriaLabel; + + // State variables. + + /** @type {?angular.JQLite} */ + this._navBarEl = $element[0]; + + /** @type {?angular.JQLite} */ + this._inkbar; + + var self = this; + // need to wait for transcluded content to be available + var deregisterTabWatch = this._$scope.$watch(function() { + return self._navBarEl.querySelectorAll('._md-nav-button').length; + }, + function(newLength) { + if (newLength > 0) { + self._initTabs(); + deregisterTabWatch(); + } + }); +} + + + +/** + * Initializes the tab components once they exist. + * @private + */ +MdNavBarController.prototype._initTabs = function() { + this._inkbar = angular.element(this._navBarEl.querySelector('md-nav-ink-bar')); + + var self = this; + this._$timeout(function() { + self._updateTabs(self.mdSelectedNavItem, undefined); + }); + + this._$scope.$watch('ctrl.mdSelectedNavItem', function(newValue, oldValue) { + // Wait a digest before update tabs for products doing + // anything dynamic in the template. + self._$timeout(function() { + self._updateTabs(newValue, oldValue); + }); + }); +}; + +/** + * Set the current tab to be selected. + * @param {string|undefined} newValue New current tab name. + * @param {string|undefined} oldValue Previous tab name. + * @private + */ +MdNavBarController.prototype._updateTabs = function(newValue, oldValue) { + var self = this; + var tabs = this._getTabs(); + + // this._getTabs can return null if nav-bar has not yet been initialized + if(!tabs) + return; + + var oldIndex = -1; + var newIndex = -1; + var newTab = this._getTabByName(newValue); + var oldTab = this._getTabByName(oldValue); + + if (oldTab) { + oldTab.setSelected(false); + oldIndex = tabs.indexOf(oldTab); + } + + if (newTab) { + newTab.setSelected(true); + newIndex = tabs.indexOf(newTab); + } + + this._$timeout(function() { + self._updateInkBarStyles(newTab, newIndex, oldIndex); + }); +}; + +/** + * Repositions the ink bar to the selected tab. + * @private + */ +MdNavBarController.prototype._updateInkBarStyles = function(tab, newIndex, oldIndex) { + this._inkbar.toggleClass('_md-left', newIndex < oldIndex) + .toggleClass('_md-right', newIndex > oldIndex); + + this._inkbar.css({display: newIndex < 0 ? 'none' : ''}); + + if (tab) { + var tabEl = tab.getButtonEl(); + var left = tabEl.offsetLeft; + + this._inkbar.css({left: left + 'px', width: tabEl.offsetWidth + 'px'}); + } +}; + +/** + * Returns an array of the current tabs. + * @return {!Array<!NavItemController>} + * @private + */ +MdNavBarController.prototype._getTabs = function() { + var controllers = Array.prototype.slice.call( + this._navBarEl.querySelectorAll('.md-nav-item')) + .map(function(el) { + return angular.element(el).controller('mdNavItem') + }); + return controllers.indexOf(undefined) ? controllers : null; +}; + +/** + * Returns the tab with the specified name. + * @param {string} name The name of the tab, found in its name attribute. + * @return {!NavItemController|undefined} + * @private + */ +MdNavBarController.prototype._getTabByName = function(name) { + return this._findTab(function(tab) { + return tab.getName() == name; + }); +}; + +/** + * Returns the selected tab. + * @return {!NavItemController|undefined} + * @private + */ +MdNavBarController.prototype._getSelectedTab = function() { + return this._findTab(function(tab) { + return tab.isSelected(); + }); +}; + +/** + * Returns the focused tab. + * @return {!NavItemController|undefined} + */ +MdNavBarController.prototype.getFocusedTab = function() { + return this._findTab(function(tab) { + return tab.hasFocus(); + }); +}; + +/** + * Find a tab that matches the specified function. + * @private + */ +MdNavBarController.prototype._findTab = function(fn) { + var tabs = this._getTabs(); + for (var i = 0; i < tabs.length; i++) { + if (fn(tabs[i])) { + return tabs[i]; + } + } + + return null; +}; + +/** + * Direct focus to the selected tab when focus enters the nav bar. + */ +MdNavBarController.prototype.onFocus = function() { + var tab = this._getSelectedTab(); + if (tab) { + tab.setFocused(true); + } +}; + +/** + * Move focus from oldTab to newTab. + * @param {!NavItemController} oldTab + * @param {!NavItemController} newTab + * @private + */ +MdNavBarController.prototype._moveFocus = function(oldTab, newTab) { + oldTab.setFocused(false); + newTab.setFocused(true); +}; + +/** + * Responds to keypress events. + * @param {!Event} e + */ +MdNavBarController.prototype.onKeydown = function(e) { + var keyCodes = this._$mdConstant.KEY_CODE; + var tabs = this._getTabs(); + var focusedTab = this.getFocusedTab(); + if (!focusedTab) return; + + var focusedTabIndex = tabs.indexOf(focusedTab); + + // use arrow keys to navigate between tabs + switch (e.keyCode) { + case keyCodes.UP_ARROW: + case keyCodes.LEFT_ARROW: + if (focusedTabIndex > 0) { + this._moveFocus(focusedTab, tabs[focusedTabIndex - 1]); + } + break; + case keyCodes.DOWN_ARROW: + case keyCodes.RIGHT_ARROW: + if (focusedTabIndex < tabs.length - 1) { + this._moveFocus(focusedTab, tabs[focusedTabIndex + 1]); + } + break; + case keyCodes.SPACE: + case keyCodes.ENTER: + // timeout to avoid a "digest already in progress" console error + this._$timeout(function() { + focusedTab.getButtonEl().click(); + }); + break; + } +}; + +/** + * ngInject + */ +function MdNavItem($mdAria, $$rAF) { + return { + restrict: 'E', + require: ['mdNavItem', '^mdNavBar'], + controller: MdNavItemController, + bindToController: true, + controllerAs: 'ctrl', + replace: true, + transclude: true, + template: function(tElement, tAttrs) { + var hasNavClick = tAttrs.mdNavClick; + var hasNavHref = tAttrs.mdNavHref; + var hasNavSref = tAttrs.mdNavSref; + var hasSrefOpts = tAttrs.srefOpts; + var navigationAttribute; + var navigationOptions; + var buttonTemplate; + + // Cannot specify more than one nav attribute + if ((hasNavClick ? 1:0) + (hasNavHref ? 1:0) + (hasNavSref ? 1:0) > 1) { + throw Error( + 'Must not specify more than one of the md-nav-click, md-nav-href, ' + + 'or md-nav-sref attributes per nav-item directive.' + ); + } + + if (hasNavClick) { + navigationAttribute = 'ng-click="ctrl.mdNavClick()"'; + } else if (hasNavHref) { + navigationAttribute = 'ng-href="{{ctrl.mdNavHref}}"'; + } else if (hasNavSref) { + navigationAttribute = 'ui-sref="{{ctrl.mdNavSref}}"'; + } + + navigationOptions = hasSrefOpts ? 'ui-sref-opts="{{ctrl.srefOpts}}" ' : ''; + + if (navigationAttribute) { + buttonTemplate = '' + + '<md-button class="_md-nav-button md-accent" ' + + 'ng-class="ctrl.getNgClassMap()" ' + + 'ng-blur="ctrl.setFocused(false)" ' + + 'tabindex="-1" ' + + navigationOptions + + navigationAttribute + '>' + + '<span ng-transclude class="_md-nav-button-text"></span>' + + '</md-button>'; + } + + return '' + + '<li class="md-nav-item" ' + + 'role="option" ' + + 'aria-selected="{{ctrl.isSelected()}}">' + + (buttonTemplate || '') + + '</li>'; + }, + scope: { + 'mdNavClick': '&?', + 'mdNavHref': '@?', + 'mdNavSref': '@?', + 'srefOpts': '=?', + 'name': '@', + }, + link: function(scope, element, attrs, controllers) { + // When accessing the element's contents synchronously, they + // may not be defined yet because of transclusion. There is a higher + // chance that it will be accessible if we wait one frame. + $$rAF(function() { + var mdNavItem = controllers[0]; + var mdNavBar = controllers[1]; + var navButton = angular.element(element[0].querySelector('._md-nav-button')); + + if (!mdNavItem.name) { + mdNavItem.name = angular.element(element[0] + .querySelector('._md-nav-button-text')).text().trim(); + } + + navButton.on('click', function() { + mdNavBar.mdSelectedNavItem = mdNavItem.name; + scope.$apply(); + }); + + $mdAria.expectWithText(element, 'aria-label'); + }); + } + }; +} + +/** + * Controller for the nav-item component. + * @param {!angular.JQLite} $element + * @constructor + * @final + * ngInject + */ +function MdNavItemController($element) { + + /** @private @const {!angular.JQLite} */ + this._$element = $element; + + // Data-bound variables + + /** @const {?Function} */ + this.mdNavClick; + + /** @const {?string} */ + this.mdNavHref; + + /** @const {?string} */ + this.mdNavSref; + /** @const {?Object} */ + this.srefOpts; + /** @const {?string} */ + this.name; + + // State variables + /** @private {boolean} */ + this._selected = false; + + /** @private {boolean} */ + this._focused = false; +} + +/** + * Returns a map of class names and values for use by ng-class. + * @return {!Object<string,boolean>} + */ +MdNavItemController.prototype.getNgClassMap = function() { + return { + 'md-active': this._selected, + 'md-primary': this._selected, + 'md-unselected': !this._selected, + 'md-focused': this._focused, + }; +}; + +/** + * Get the name attribute of the tab. + * @return {string} + */ +MdNavItemController.prototype.getName = function() { + return this.name; +}; + +/** + * Get the button element associated with the tab. + * @return {!Element} + */ +MdNavItemController.prototype.getButtonEl = function() { + return this._$element[0].querySelector('._md-nav-button'); +}; + +/** + * Set the selected state of the tab. + * @param {boolean} isSelected + */ +MdNavItemController.prototype.setSelected = function(isSelected) { + this._selected = isSelected; +}; + +/** + * @return {boolean} + */ +MdNavItemController.prototype.isSelected = function() { + return this._selected; +}; + +/** + * Set the focused state of the tab. + * @param {boolean} isFocused + */ +MdNavItemController.prototype.setFocused = function(isFocused) { + this._focused = isFocused; + + if (isFocused) { + this.getButtonEl().focus(); + } +}; + +/** + * @return {boolean} + */ +MdNavItemController.prototype.hasFocus = function() { + return this._focused; +}; + +})(window, window.angular);
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.min.css b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.min.css new file mode 100644 index 00000000..3efe74e7 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.min.css @@ -0,0 +1,6 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */.md-nav-bar{border-style:solid;border-width:0 0 1px;height:48px;position:relative}._md-nav-bar-list{outline:none;list-style:none;margin:0;padding:0;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}.md-nav-item:first-of-type{margin-left:8px}.md-button._md-nav-button{line-height:24px;margin:0 4px;padding:12px 16px;-webkit-transition:background-color .35s cubic-bezier(.35,0,.25,1);transition:background-color .35s cubic-bezier(.35,0,.25,1)}.md-button._md-nav-button:focus{outline:none}.md-button._md-nav-button:hover{background-color:inherit}md-nav-ink-bar{bottom:0;height:2px;left:auto;position:absolute;right:auto;background-color:#000}md-nav-ink-bar._md-left{-webkit-transition:left .125s cubic-bezier(.35,0,.25,1),right .25s cubic-bezier(.35,0,.25,1);transition:left .125s cubic-bezier(.35,0,.25,1),right .25s cubic-bezier(.35,0,.25,1)}md-nav-ink-bar._md-right{-webkit-transition:left .25s cubic-bezier(.35,0,.25,1),right .125s cubic-bezier(.35,0,.25,1);transition:left .25s cubic-bezier(.35,0,.25,1),right .125s cubic-bezier(.35,0,.25,1)}md-nav-ink-bar.ng-animate{-webkit-transition:none;transition:none}md-nav-extra-content{min-height:48px;padding-right:12px}
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.min.js b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.min.js new file mode 100644 index 00000000..f31e6512 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/navBar/navBar.min.js @@ -0,0 +1,7 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */ +!function(t,e,n){"use strict";function r(t,n){return{restrict:"E",transclude:!0,controller:a,controllerAs:"ctrl",bindToController:!0,scope:{mdSelectedNavItem:"=?",mdNoInkBar:"=?",navBarAriaLabel:"@?"},template:'<div class="md-nav-bar"><nav role="navigation"><ul class="_md-nav-bar-list" ng-transclude role="listbox"tabindex="0"ng-focus="ctrl.onFocus()"ng-keydown="ctrl.onKeydown($event)"aria-label="{{ctrl.navBarAriaLabel}}"></ul></nav><md-nav-ink-bar ng-hide="ctrl.mdNoInkBar"></md-nav-ink-bar></div>',link:function(r,a,o,i){n(a),i.navBarAriaLabel||t.expectAsync(a,"aria-label",e.noop)}}}function a(t,e,n,r){this._$timeout=n,this._$scope=e,this._$mdConstant=r,this.mdSelectedNavItem,this.navBarAriaLabel,this._navBarEl=t[0],this._inkbar;var a=this,o=this._$scope.$watch(function(){return a._navBarEl.querySelectorAll("._md-nav-button").length},function(t){t>0&&(a._initTabs(),o())})}function o(t,n){return{restrict:"E",require:["mdNavItem","^mdNavBar"],controller:i,bindToController:!0,controllerAs:"ctrl",replace:!0,transclude:!0,template:function(t,e){var n,r,a,o=e.mdNavClick,i=e.mdNavHref,s=e.mdNavSref,c=e.srefOpts;if((o?1:0)+(i?1:0)+(s?1:0)>1)throw Error("Must not specify more than one of the md-nav-click, md-nav-href, or md-nav-sref attributes per nav-item directive.");return o?n='ng-click="ctrl.mdNavClick()"':i?n='ng-href="{{ctrl.mdNavHref}}"':s&&(n='ui-sref="{{ctrl.mdNavSref}}"'),r=c?'ui-sref-opts="{{ctrl.srefOpts}}" ':"",n&&(a='<md-button class="_md-nav-button md-accent" ng-class="ctrl.getNgClassMap()" ng-blur="ctrl.setFocused(false)" tabindex="-1" '+r+n+'><span ng-transclude class="_md-nav-button-text"></span></md-button>'),'<li class="md-nav-item" role="option" aria-selected="{{ctrl.isSelected()}}">'+(a||"")+"</li>"},scope:{mdNavClick:"&?",mdNavHref:"@?",mdNavSref:"@?",srefOpts:"=?",name:"@"},link:function(r,a,o,i){n(function(){var n=i[0],o=i[1],s=e.element(a[0].querySelector("._md-nav-button"));n.name||(n.name=e.element(a[0].querySelector("._md-nav-button-text")).text().trim()),s.on("click",function(){o.mdSelectedNavItem=n.name,r.$apply()}),t.expectWithText(a,"aria-label")})}}}function i(t){this._$element=t,this.mdNavClick,this.mdNavHref,this.mdNavSref,this.srefOpts,this.name,this._selected=!1,this._focused=!1}a.$inject=["$element","$scope","$timeout","$mdConstant"],o.$inject=["$mdAria","$$rAF"],i.$inject=["$element"],r.$inject=["$mdAria","$mdTheming"],e.module("material.components.navBar",["material.core"]).controller("MdNavBarController",a).directive("mdNavBar",r).controller("MdNavItemController",i).directive("mdNavItem",o),a.prototype._initTabs=function(){this._inkbar=e.element(this._navBarEl.querySelector("md-nav-ink-bar"));var t=this;this._$timeout(function(){t._updateTabs(t.mdSelectedNavItem,n)}),this._$scope.$watch("ctrl.mdSelectedNavItem",function(e,n){t._$timeout(function(){t._updateTabs(e,n)})})},a.prototype._updateTabs=function(t,e){var n=this,r=this._getTabs();if(r){var a=-1,o=-1,i=this._getTabByName(t),s=this._getTabByName(e);s&&(s.setSelected(!1),a=r.indexOf(s)),i&&(i.setSelected(!0),o=r.indexOf(i)),this._$timeout(function(){n._updateInkBarStyles(i,o,a)})}},a.prototype._updateInkBarStyles=function(t,e,n){if(this._inkbar.toggleClass("_md-left",e<n).toggleClass("_md-right",e>n),this._inkbar.css({display:e<0?"none":""}),t){var r=t.getButtonEl(),a=r.offsetLeft;this._inkbar.css({left:a+"px",width:r.offsetWidth+"px"})}},a.prototype._getTabs=function(){var t=Array.prototype.slice.call(this._navBarEl.querySelectorAll(".md-nav-item")).map(function(t){return e.element(t).controller("mdNavItem")});return t.indexOf(n)?t:null},a.prototype._getTabByName=function(t){return this._findTab(function(e){return e.getName()==t})},a.prototype._getSelectedTab=function(){return this._findTab(function(t){return t.isSelected()})},a.prototype.getFocusedTab=function(){return this._findTab(function(t){return t.hasFocus()})},a.prototype._findTab=function(t){for(var e=this._getTabs(),n=0;n<e.length;n++)if(t(e[n]))return e[n];return null},a.prototype.onFocus=function(){var t=this._getSelectedTab();t&&t.setFocused(!0)},a.prototype._moveFocus=function(t,e){t.setFocused(!1),e.setFocused(!0)},a.prototype.onKeydown=function(t){var e=this._$mdConstant.KEY_CODE,n=this._getTabs(),r=this.getFocusedTab();if(r){var a=n.indexOf(r);switch(t.keyCode){case e.UP_ARROW:case e.LEFT_ARROW:a>0&&this._moveFocus(r,n[a-1]);break;case e.DOWN_ARROW:case e.RIGHT_ARROW:a<n.length-1&&this._moveFocus(r,n[a+1]);break;case e.SPACE:case e.ENTER:this._$timeout(function(){r.getButtonEl().click()})}}},i.prototype.getNgClassMap=function(){return{"md-active":this._selected,"md-primary":this._selected,"md-unselected":!this._selected,"md-focused":this._focused}},i.prototype.getName=function(){return this.name},i.prototype.getButtonEl=function(){return this._$element[0].querySelector("._md-nav-button")},i.prototype.setSelected=function(t){this._selected=t},i.prototype.isSelected=function(){return this._selected},i.prototype.setFocused=function(t){this._focused=t,t&&this.getButtonEl().focus()},i.prototype.hasFocus=function(){return this._focused}}(window,window.angular);
\ No newline at end of file |