blob: cc6bc723cc60ffeca0640b3787aa0bc41877ec4a [file] [log] [blame]
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.0.0-master-19c11fd
*/
function MdTab(){function e(e,n,a,s){if(s){var d=s.getTabElementIndex(n),i=t(n,"md-tab-body").remove(),r=t(n,"md-tab-label").remove(),o=s.insertTab({scope:e,parent:e.$parent,index:d,element:n,template:i.html(),label:r.html()},d);e.select=e.select||angular.noop,e.deselect=e.deselect||angular.noop,e.$watch("active",function(e){e&&s.select(o.getIndex())}),e.$watch("disabled",function(){s.refreshIndex()}),e.$watch(function(){return s.getTabElementIndex(n)},function(e){o.index=e,s.updateTabOrder()}),e.$on("$destroy",function(){s.removeTab(o)})}}function t(e,t){for(var n=e[0].children,a=0,s=n.length;s>a;a++){var d=n[a];if(d.tagName===t.toUpperCase())return angular.element(d)}return angular.element()}return{require:"^?mdTabs",terminal:!0,compile:function(n,a){var s=t(n,"md-tab-label"),d=t(n,"md-tab-body");if(0==s.length&&(s=angular.element("<md-tab-label></md-tab-label>"),a.label?s.text(a.label):s.append(n.contents()),0==d.length)){var i=n.contents().detach();d=angular.element("<md-tab-body></md-tab-body>"),d.append(i)}return n.append(s),d.html()&&n.append(d),e},scope:{active:"=?mdActive",disabled:"=?ngDisabled",select:"&?mdOnSelect",deselect:"&?mdOnDeselect"}}}function MdTabItem(){return{require:"^?mdTabs",link:function(e,t,n,a){a&&a.attachRipple(e,t)}}}function MdTabLabel(){return{terminal:!0}}function MdTabScroll(e){return{restrict:"A",compile:function(t,n){var a=e(n.mdTabScroll,null,!0);return function(e,t){t.on("mousewheel",function(t){e.$apply(function(){a(e,{$event:t})})})}}}}function MdTabsController(e,t,n,a,s,d,i,r,o,c){function l(){ie.selectedIndex=ie.selectedIndex||0,m(),u(),b(),c(t),d.nextTick(function(){te(),V(),ne(),ie.tabs[ie.selectedIndex]&&ie.tabs[ie.selectedIndex].scope.select(),me=!0,K()})}function m(){var e=r.$mdTabsTemplate,t=angular.element(oe.data);t.html(e),o(t.contents())(ie.parent),delete r.$mdTabsTemplate}function b(){angular.element(n).on("resize",W),e.$on("$destroy",g)}function u(){e.$watch("$mdTabsCtrl.selectedIndex",w)}function f(e,t){var n=r.$normalize("md-"+e);t&&j(e,t),r.$observe(n,function(t){ie[e]=t})}function p(e,t){function n(t){ie[e]="false"!==t}var a=r.$normalize("md-"+e);t&&j(e,t),r.hasOwnProperty(a)&&n(r[a]),r.$observe(a,n)}function g(){le=!0,angular.element(n).off("resize",W)}function h(e){angular.element(oe.wrapper).toggleClass("md-stretch-tabs",H()),ne()}function T(e){ie.shouldCenterTabs=_()}function x(e,t){e!==t&&d.nextTick(ie.updateInkBarStyles)}function v(e,t){e!==t&&(ie.maxTabWidth=Y(),ie.shouldCenterTabs=_(),d.nextTick(function(){ie.maxTabWidth=Y(),V(ie.selectedIndex)}))}function $(e){t[e?"removeClass":"addClass"]("md-no-tab-content")}function C(t){var n=ie.shouldCenterTabs?"":"-"+t+"px";angular.element(oe.paging).css(a.CSS.TRANSFORM,"translate3d("+n+", 0, 0)"),e.$broadcast("$mdTabsPaginationChanged")}function I(e,t){e!==t&&oe.tabs[e]&&(V(),Q())}function w(t,n){t!==n&&(ie.selectedIndex=z(t),ie.lastSelectedIndex=n,ie.updateInkBarStyles(),te(),V(t),e.$broadcast("$mdTabsChanged"),ie.tabs[n]&&ie.tabs[n].scope.deselect(),ie.tabs[t]&&ie.tabs[t].scope.select())}function k(e){var n=t[0].getElementsByTagName("md-tab");return Array.prototype.indexOf.call(n,e[0])}function y(){y.watcher||(y.watcher=e.$watch(function(){d.nextTick(function(){y.watcher&&t.prop("offsetParent")&&(y.watcher(),y.watcher=null,W())},!1)}))}function P(e){switch(e.keyCode){case a.KEY_CODE.LEFT_ARROW:e.preventDefault(),J(-1,!0);break;case a.KEY_CODE.RIGHT_ARROW:e.preventDefault(),J(1,!0);break;case a.KEY_CODE.SPACE:case a.KEY_CODE.ENTER:e.preventDefault(),re||(ie.selectedIndex=ie.focusIndex)}ie.lastClick=!1}function L(e){re||(ie.focusIndex=ie.selectedIndex=e),ie.lastClick=!0,d.nextTick(function(){ie.tabs[e].element.triggerHandler("click")},!1)}function E(e){ie.shouldPaginate&&(e.preventDefault(),ie.offsetLeft=se(ie.offsetLeft-e.wheelDelta))}function M(){var e,t,n=oe.canvas.clientWidth,a=n+ie.offsetLeft;for(e=0;e<oe.tabs.length&&(t=oe.tabs[e],!(t.offsetLeft+t.offsetWidth>a));e++);ie.offsetLeft=se(t.offsetLeft)}function S(){var e,t;for(e=0;e<oe.tabs.length&&(t=oe.tabs[e],!(t.offsetLeft+t.offsetWidth>=ie.offsetLeft));e++);ie.offsetLeft=se(t.offsetLeft+t.offsetWidth-oe.canvas.clientWidth)}function W(){ie.lastSelectedIndex=ie.selectedIndex,ie.offsetLeft=se(ie.offsetLeft),d.nextTick(function(){ie.updateInkBarStyles(),K()})}function B(e){angular.element(oe.inkBar).toggleClass("ng-hide",e)}function D(e){t.toggleClass("md-dynamic-height",e)}function O(e){if(!le){var t=ie.selectedIndex,n=ie.tabs.splice(e.getIndex(),1)[0];ee(),ie.selectedIndex===t&&(n.scope.deselect(),ie.tabs[ie.selectedIndex]&&ie.tabs[ie.selectedIndex].scope.select()),d.nextTick(function(){K(),ie.offsetLeft=se(ie.offsetLeft)})}}function A(e,t){var n=me,a={getIndex:function(){return ie.tabs.indexOf(s)},isActive:function(){return this.getIndex()===ie.selectedIndex},isLeft:function(){return this.getIndex()<ie.selectedIndex},isRight:function(){return this.getIndex()>ie.selectedIndex},shouldRender:function(){return!ie.noDisconnect||this.isActive()},hasFocus:function(){return!ie.lastClick&&ie.hasFocus&&this.getIndex()===ie.focusIndex},id:d.nextUid()},s=angular.extend(a,e);return angular.isDefined(t)?ie.tabs.splice(t,0,s):ie.tabs.push(s),X(),Z(),d.nextTick(function(){K(),n&&ie.autoselect&&d.nextTick(function(){d.nextTick(function(){L(ie.tabs.indexOf(s))})})}),s}function N(){var e={};return e.wrapper=t[0].getElementsByTagName("md-tabs-wrapper")[0],e.data=t[0].getElementsByTagName("md-tab-data")[0],e.canvas=e.wrapper.getElementsByTagName("md-tabs-canvas")[0],e.paging=e.canvas.getElementsByTagName("md-pagination-wrapper")[0],e.tabs=e.paging.getElementsByTagName("md-tab-item"),e.dummies=e.canvas.getElementsByTagName("md-dummy-tab"),e.inkBar=e.paging.getElementsByTagName("md-ink-bar")[0],e.contentsWrapper=t[0].getElementsByTagName("md-tabs-content-wrapper")[0],e.contents=e.contentsWrapper.getElementsByTagName("md-tab-content"),e}function R(){return ie.offsetLeft>0}function F(){var e=oe.tabs[oe.tabs.length-1];return e&&e.offsetLeft+e.offsetWidth>oe.canvas.clientWidth+ie.offsetLeft}function H(){switch(ie.stretchTabs){case"always":return!0;case"never":return!1;default:return!ie.shouldPaginate&&n.matchMedia("(max-width: 600px)").matches}}function _(){return ie.centerTabs&&!ie.shouldPaginate}function q(){if(ie.noPagination||!me)return!1;var e=t.prop("clientWidth");return angular.forEach(N().dummies,function(t){e-=t.offsetWidth}),0>e}function z(e){if(-1===e)return-1;var t,n,a=Math.max(ie.tabs.length-e,e);for(t=0;a>=t;t++){if(n=ie.tabs[e+t],n&&n.scope.disabled!==!0)return n.getIndex();if(n=ie.tabs[e-t],n&&n.scope.disabled!==!0)return n.getIndex()}return e}function j(e,t,n){Object.defineProperty(ie,e,{get:function(){return n},set:function(e){var a=n;n=e,t&&t(e,a)}})}function K(){H()||U(),ie.maxTabWidth=Y(),ie.shouldPaginate=q()}function U(){var e=1;angular.forEach(N().dummies,function(t){e+=Math.ceil(t.offsetWidth)}),angular.element(oe.paging).css("width",e+"px")}function Y(){return t.prop("clientWidth")}function G(){var e=ie.tabs[ie.selectedIndex],t=ie.tabs[ie.focusIndex];ie.tabs=ie.tabs.sort(function(e,t){return e.index-t.index}),ie.selectedIndex=ie.tabs.indexOf(e),ie.focusIndex=ie.tabs.indexOf(t)}function J(e,t){var n,a=t?"focusIndex":"selectedIndex",s=ie[a];for(n=s+e;ie.tabs[n]&&ie.tabs[n].scope.disabled;n+=e);ie.tabs[n]&&(ie[a]=n)}function Q(){N().dummies[ie.focusIndex].focus()}function V(e){if(null==e&&(e=ie.focusIndex),oe.tabs[e]&&!ie.shouldCenterTabs){var t=oe.tabs[e],n=t.offsetLeft,a=t.offsetWidth+n;ie.offsetLeft=Math.max(ie.offsetLeft,se(a-oe.canvas.clientWidth+64)),ie.offsetLeft=Math.min(ie.offsetLeft,se(n))}}function X(){ce.forEach(function(e){d.nextTick(e)}),ce=[]}function Z(){var e=!1;angular.forEach(ie.tabs,function(t){t.template&&(e=!0)}),ie.hasContent=e}function ee(){ie.selectedIndex=z(ie.selectedIndex),ie.focusIndex=z(ie.focusIndex)}function te(){if(!ie.dynamicHeight)return t.css("height","");if(!ie.tabs.length)return ce.push(te);var e=oe.contents[ie.selectedIndex],n=e?e.offsetHeight:0,a=oe.wrapper.offsetHeight,s=n+a,r=t.prop("clientHeight");if(r!==s){"bottom"===t.attr("md-align-tabs")&&(r-=a,s-=a,void 0!==t.attr("md-border-bottom")&&++r),re=!0;var o={height:r+"px"},c={height:s+"px"};t.css(o),i(t,{from:o,to:c,easing:"cubic-bezier(0.35, 0, 0.25, 1)",duration:.5}).start().done(function(){t.css({transition:"none",height:""}),d.nextTick(function(){t.css("transition","")}),re=!1})}}function ne(){if(!oe.tabs[ie.selectedIndex])return void angular.element(oe.inkBar).css({left:"auto",right:"auto"});if(!ie.tabs.length)return ce.push(ie.updateInkBarStyles);if(!t.prop("offsetParent"))return y();var e,n=ie.selectedIndex,a=oe.paging.offsetWidth,s=oe.tabs[n],i=s.offsetLeft,r=a-i-s.offsetWidth;ie.shouldCenterTabs&&(e=Array.prototype.slice.call(oe.tabs).reduce(function(e,t){return e+t.offsetWidth},0),a>e&&d.nextTick(ne,!1)),ae(),angular.element(oe.inkBar).css({left:i+"px",right:r+"px"})}function ae(){var e=ie.selectedIndex,t=ie.lastSelectedIndex,n=angular.element(oe.inkBar);angular.isNumber(t)&&n.toggleClass("md-left",t>e).toggleClass("md-right",e>t)}function se(e){if(!oe.tabs.length||!ie.shouldPaginate)return 0;var t=oe.tabs[oe.tabs.length-1],n=t.offsetLeft+t.offsetWidth;return e=Math.max(0,e),e=Math.min(n-oe.canvas.clientWidth,e)}function de(e,t){var n={colorElement:angular.element(oe.inkBar)};s.attach(e,t,n)}var ie=this,re=!1,oe=N(),ce=[],le=!1,me=!1;f("stretchTabs",h),j("focusIndex",I,ie.selectedIndex||0),j("offsetLeft",C,0),j("hasContent",$,!1),j("maxTabWidth",x,Y()),j("shouldPaginate",v,!1),p("noInkBar",B),p("dynamicHeight",D),p("noPagination"),p("swipeContent"),p("noDisconnect"),p("autoselect"),p("centerTabs",T,!1),p("enableDisconnect"),ie.scope=e,ie.parent=e.$parent,ie.tabs=[],ie.lastSelectedIndex=null,ie.hasFocus=!1,ie.lastClick=!0,ie.shouldCenterTabs=_(),ie.updatePagination=d.debounce(K,100),ie.redirectFocus=Q,ie.attachRipple=de,ie.insertTab=A,ie.removeTab=O,ie.select=L,ie.scroll=E,ie.nextPage=M,ie.previousPage=S,ie.keydown=P,ie.canPageForward=F,ie.canPageBack=R,ie.refreshIndex=ee,ie.incrementIndex=J,ie.getTabElementIndex=k,ie.updateInkBarStyles=d.debounce(ne,100),ie.updateTabOrder=d.debounce(G,100),l()}function MdTabs(){return{scope:{selectedIndex:"=?mdSelected"},template:function(e,t){return t.$mdTabsTemplate=e.html(),'<md-tabs-wrapper> <md-tab-data></md-tab-data> <md-prev-button tabindex="-1" role="button" aria-label="Previous Page" aria-disabled="{{!$mdTabsCtrl.canPageBack()}}" ng-class="{ \'md-disabled\': !$mdTabsCtrl.canPageBack() }" ng-if="$mdTabsCtrl.shouldPaginate" ng-click="$mdTabsCtrl.previousPage()"> <md-icon md-svg-icon="md-tabs-arrow"></md-icon> </md-prev-button> <md-next-button tabindex="-1" role="button" aria-label="Next Page" aria-disabled="{{!$mdTabsCtrl.canPageForward()}}" ng-class="{ \'md-disabled\': !$mdTabsCtrl.canPageForward() }" ng-if="$mdTabsCtrl.shouldPaginate" ng-click="$mdTabsCtrl.nextPage()"> <md-icon md-svg-icon="md-tabs-arrow"></md-icon> </md-next-button> <md-tabs-canvas tabindex="{{ $mdTabsCtrl.hasFocus ? -1 : 0 }}" aria-activedescendant="tab-item-{{$mdTabsCtrl.tabs[$mdTabsCtrl.focusIndex].id}}" ng-focus="$mdTabsCtrl.redirectFocus()" ng-class="{ \'md-paginated\': $mdTabsCtrl.shouldPaginate, \'md-center-tabs\': $mdTabsCtrl.shouldCenterTabs }" ng-keydown="$mdTabsCtrl.keydown($event)" role="tablist"> <md-pagination-wrapper ng-class="{ \'md-center-tabs\': $mdTabsCtrl.shouldCenterTabs }" md-tab-scroll="$mdTabsCtrl.scroll($event)"> <md-tab-item tabindex="-1" class="md-tab" style="max-width: {{ $mdTabsCtrl.maxTabWidth + \'px\' }}" ng-repeat="tab in $mdTabsCtrl.tabs" role="tab" aria-controls="tab-content-{{::tab.id}}" aria-selected="{{tab.isActive()}}" aria-disabled="{{tab.scope.disabled || \'false\'}}" ng-click="$mdTabsCtrl.select(tab.getIndex())" ng-class="{ \'md-active\': tab.isActive(), \'md-focused\': tab.hasFocus(), \'md-disabled\': tab.scope.disabled }" ng-disabled="tab.scope.disabled" md-swipe-left="$mdTabsCtrl.nextPage()" md-swipe-right="$mdTabsCtrl.previousPage()" md-tabs-template="::tab.label" md-scope="::tab.parent"></md-tab-item> <md-ink-bar></md-ink-bar> </md-pagination-wrapper> <div class="md-visually-hidden md-dummy-wrapper"> <md-dummy-tab class="md-tab" tabindex="-1" id="tab-item-{{::tab.id}}" role="tab" aria-controls="tab-content-{{::tab.id}}" aria-selected="{{tab.isActive()}}" aria-disabled="{{tab.scope.disabled || \'false\'}}" ng-focus="$mdTabsCtrl.hasFocus = true" ng-blur="$mdTabsCtrl.hasFocus = false" ng-repeat="tab in $mdTabsCtrl.tabs" md-tabs-template="::tab.label" md-scope="::tab.parent"></md-dummy-tab> </div> </md-tabs-canvas> </md-tabs-wrapper> <md-tabs-content-wrapper ng-show="$mdTabsCtrl.hasContent && $mdTabsCtrl.selectedIndex >= 0"> <md-tab-content id="tab-content-{{::tab.id}}" role="tabpanel" aria-labelledby="tab-item-{{::tab.id}}" md-swipe-left="$mdTabsCtrl.swipeContent && $mdTabsCtrl.incrementIndex(1)" md-swipe-right="$mdTabsCtrl.swipeContent && $mdTabsCtrl.incrementIndex(-1)" ng-if="$mdTabsCtrl.hasContent" ng-repeat="(index, tab) in $mdTabsCtrl.tabs" ng-class="{ \'md-no-transition\': $mdTabsCtrl.lastSelectedIndex == null, \'md-active\': tab.isActive(), \'md-left\': tab.isLeft(), \'md-right\': tab.isRight(), \'md-no-scroll\': $mdTabsCtrl.dynamicHeight }"> <div md-tabs-template="::tab.template" md-connected-if="tab.isActive()" md-scope="::tab.parent" ng-if="$mdTabsCtrl.enableDisconnect || tab.shouldRender()"></div> </md-tab-content> </md-tabs-content-wrapper>'},controller:"MdTabsController",controllerAs:"$mdTabsCtrl",bindToController:!0}}function MdTabsTemplate(e,t){function n(n,a,s,d){function i(){n.$watch("connected",function(e){e===!1?r():o()}),n.$on("$destroy",o)}function r(){d.enableDisconnect&&t.disconnectScope(c)}function o(){d.enableDisconnect&&t.reconnectScope(c)}if(d){var c=d.enableDisconnect?n.compileScope.$new():n.compileScope;return a.html(n.template),e(a.contents())(c),a.on("DOMSubtreeModified",function(){d.updatePagination(),d.updateInkBarStyles()}),t.nextTick(i)}}return{restrict:"A",link:n,scope:{template:"=mdTabsTemplate",connected:"=?mdConnectedIf",compileScope:"=mdScope"},require:"^?mdTabs"}}goog.provide("ng.material.components.tabs"),goog.require("ng.material.components.icon"),goog.require("ng.material.core"),angular.module("material.components.tabs",["material.core","material.components.icon"]),angular.module("material.components.tabs").directive("mdTab",MdTab),angular.module("material.components.tabs").directive("mdTabItem",MdTabItem),angular.module("material.components.tabs").directive("mdTabLabel",MdTabLabel),angular.module("material.components.tabs").directive("mdTabScroll",MdTabScroll),MdTabScroll.$inject=["$parse"],angular.module("material.components.tabs").controller("MdTabsController",MdTabsController),MdTabsController.$inject=["$scope","$element","$window","$mdConstant","$mdTabInkRipple","$mdUtil","$animateCss","$attrs","$compile","$mdTheming"],angular.module("material.components.tabs").directive("mdTabs",MdTabs),angular.module("material.components.tabs").directive("mdTabsTemplate",MdTabsTemplate),MdTabsTemplate.$inject=["$compile","$mdUtil"],ng.material.components.tabs=angular.module("material.components.tabs");