UNPKG

mcs-ng-material

Version:

MCS NG-Meterial is based on mcs-web.

7 lines 16.8 kB
/*! * AngularJS Material Design * https://github.com/angular/material * @license MIT * v1.1.5-master-515959d */ !function(e,t,n){"use strict";function a(){function e(e,t){var a,s,i=e.canvas,r=n(e);for(a=0;a<r.length;a++)if(r[a]>=t){s=r[a];break}return Math.max(0,s-i.clientWidth)}function t(e,t){var s,i,r=e.canvas,o=a(e)-r.clientWidth,d=n(e);for(s=0;s<d.length,d[s]<=t+r.clientWidth;s++)i=d[s];return Math.min(o,i)}function n(e){var t,n,a=0,s=[];for(t=0;t<e.tabs.length;t++)n=e.tabs[t],s.push(a),a+=n.offsetWidth;return s}function a(e){var t,n,a=0;for(t=0;t<e.tabs.length;t++)n=e.tabs[t],a+=n.offsetWidth;return a}return{decreasePageOffset:e,increasePageOffset:t,getTabOffsets:n,getTotalTabsWidth:a}}function s(){function e(e,a,s,i){if(i){var r=i.getTabElementIndex(a),o=n(a,"md-tab-body").remove(),d=n(a,"md-tab-label").remove(),c=i.insertTab({scope:e,parent:e.$parent,index:r,element:a,template:o.html(),label:d.html()},r);e.select=e.select||t.noop,e.deselect=e.deselect||t.noop,e.$watch("active",function(e){e&&i.select(c.getIndex(),!0)}),e.$watch("disabled",function(){i.refreshIndex()}),e.$watch(function(){return i.getTabElementIndex(a)},function(e){c.index=e,i.updateTabOrder()}),e.$on("$destroy",function(){i.removeTab(c)})}}function n(e,n){for(var a=e[0].children,s=0,i=a.length;s<i;s++){var r=a[s];if(r.tagName===n.toUpperCase())return t.element(r)}return t.element()}return{require:"^?mdTabs",terminal:!0,compile:function(a,s){var i=n(a,"md-tab-label"),r=n(a,"md-tab-body");if(0===i.length&&(i=t.element("<md-tab-label></md-tab-label>"),s.label?i.text(s.label):i.append(a.contents()),0===r.length)){var o=a.contents().detach();r=t.element("<md-tab-body></md-tab-body>"),r.append(o)}return a.append(i),r.html()&&a.append(r),e},scope:{active:"=?mdActive",disabled:"=?ngDisabled",select:"&?mdOnSelect",deselect:"&?mdOnDeselect"}}}function i(){return{require:"^?mdTabs",link:function(e,t,n,a){a&&a.attachRipple(e,t)}}}function r(){return{terminal:!0}}function o(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 d(e,a,s,i,r,o,d,c,l,f,b,m){function u(){v("stretchTabs",I),Q("focusIndex",S,ue.selectedIndex||0),Q("offsetLeft",P,0),Q("hasContent",k,!1),Q("maxTabWidth",w,Z()),Q("shouldPaginate",y,!1),T("noInkBar",R),T("dynamicHeight",q),T("noPagination"),T("swipeContent"),T("noDisconnect"),T("autoselect"),T("noSelectClick"),T("centerTabs",C,!1),T("enableDisconnect"),ue.scope=e,ue.parent=e.$parent,ue.tabs=[],ue.lastSelectedIndex=null,ue.hasFocus=!1,ue.styleTabItemFocus=!1,ue.shouldCenterTabs=Y(),ue.tabContentPrefix="tab-content-",p()}function p(){ue.selectedIndex=ue.selectedIndex||0,h(),x(),g(),f(a),o.nextTick(function(){he=j(),oe(),ae(),de(),ue.tabs[ue.selectedIndex]&&ue.tabs[ue.selectedIndex].scope.select(),ve=!0,V()})}function h(){var e=c.$mdTabsTemplate,n=t.element(a[0].querySelector("md-tab-data"));n.html(e),l(n.contents())(ue.parent),delete c.$mdTabsTemplate}function g(){t.element(s).on("resize",F),e.$on("$destroy",$)}function x(){e.$watch("$mdTabsCtrl.selectedIndex",L)}function v(e,t){var n=c.$normalize("md-"+e);t&&Q(e,t),c.$observe(n,function(t){ue[e]=t})}function T(e,t){function n(t){ue[e]="false"!==t}var a=c.$normalize("md-"+e);t&&Q(e,t),c.hasOwnProperty(a)&&n(c[a]),c.$observe(a,n)}function $(){xe=!0,t.element(s).off("resize",F)}function I(e){var n=j();t.element(n.wrapper).toggleClass("md-stretch-tabs",U()),de()}function C(e){ue.shouldCenterTabs=Y()}function w(e,n){if(e!==n){var a=j();t.forEach(a.tabs,function(t){t.style.maxWidth=e+"px"}),t.forEach(a.dummies,function(t){t.style.maxWidth=e+"px"}),o.nextTick(ue.updateInkBarStyles)}}function y(e,t){e!==t&&(ue.maxTabWidth=Z(),ue.shouldCenterTabs=Y(),o.nextTick(function(){ue.maxTabWidth=Z(),ae(ue.selectedIndex)}))}function k(e){a[e?"removeClass":"addClass"]("md-no-tab-content")}function P(n){var a=j(),s=(ue.shouldCenterTabs||me()?"":"-")+n+"px";s=s.replace("--",""),t.element(a.paging).css(i.CSS.TRANSFORM,"translate3d("+s+", 0, 0)"),e.$broadcast("$mdTabsPaginationChanged")}function S(e,t){e!==t&&j().tabs[e]&&(ae(),ne())}function L(t,n){t!==n&&(ue.selectedIndex=J(t),ue.lastSelectedIndex=n,ue.updateInkBarStyles(),oe(),ae(t),e.$broadcast("$mdTabsChanged"),ue.tabs[n]&&ue.tabs[n].scope.deselect(),ue.tabs[t]&&ue.tabs[t].scope.select())}function W(e){var t=a[0].getElementsByTagName("md-tab");return Array.prototype.indexOf.call(t,e[0])}function O(){O.watcher||(O.watcher=e.$watch(function(){o.nextTick(function(){O.watcher&&a.prop("offsetParent")&&(O.watcher(),O.watcher=null,F())},!1)}))}function M(e){switch(e.keyCode){case i.KEY_CODE.LEFT_ARROW:e.preventDefault(),te(-1,!0);break;case i.KEY_CODE.RIGHT_ARROW:e.preventDefault(),te(1,!0);break;case i.KEY_CODE.SPACE:case i.KEY_CODE.ENTER:e.preventDefault(),pe||A(ue.focusIndex);break;case i.KEY_CODE.TAB:ue.focusIndex!==ue.selectedIndex&&(ue.focusIndex=ue.selectedIndex)}}function A(e,t){pe||(ue.focusIndex=ue.selectedIndex=e),t&&ue.noSelectClick||o.nextTick(function(){ue.tabs[e].element.triggerHandler("click")},!1)}function D(e){ue.shouldPaginate&&(e.preventDefault(),ue.offsetLeft=le(ue.offsetLeft-e.wheelDelta))}function E(){if(ue.canPageForward()){var e=m.increasePageOffset(j(),ue.offsetLeft);ue.offsetLeft=le(e)}}function B(){if(ue.canPageBack()){var e=m.decreasePageOffset(j(),ue.offsetLeft);ue.offsetLeft=le(e)}}function F(){ue.lastSelectedIndex=ue.selectedIndex,ue.offsetLeft=le(ue.offsetLeft),o.nextTick(function(){ue.updateInkBarStyles(),V()})}function R(e){t.element(j().inkBar).toggleClass("ng-hide",e)}function q(e){a.toggleClass("md-dynamic-height",e)}function _(e){if(!xe){var t=ue.selectedIndex,n=ue.tabs.splice(e.getIndex(),1)[0];re(),ue.selectedIndex===t&&(n.scope.deselect(),ue.tabs[ue.selectedIndex]&&ue.tabs[ue.selectedIndex].scope.select()),o.nextTick(function(){V(),ue.offsetLeft=le(ue.offsetLeft)})}}function H(e,n){var a=ve,s={getIndex:function(){return ue.tabs.indexOf(i)},isActive:function(){return this.getIndex()===ue.selectedIndex},isLeft:function(){return this.getIndex()<ue.selectedIndex},isRight:function(){return this.getIndex()>ue.selectedIndex},shouldRender:function(){return!ue.noDisconnect||this.isActive()},hasFocus:function(){return ue.styleTabItemFocus&&ue.hasFocus&&this.getIndex()===ue.focusIndex},id:o.nextUid(),hasContent:!(!e.template||!e.template.trim())},i=t.extend(s,e);return t.isDefined(n)?ue.tabs.splice(n,0,i):ue.tabs.push(i),se(),ie(),o.nextTick(function(){V(),be(i),a&&ue.autoselect&&o.nextTick(function(){o.nextTick(function(){A(ue.tabs.indexOf(i))})})}),i}function j(){var e={},t=a[0];return e.wrapper=t.querySelector("md-tabs-wrapper"),e.canvas=e.wrapper.querySelector("md-tabs-canvas"),e.paging=e.canvas.querySelector("md-pagination-wrapper"),e.inkBar=e.paging.querySelector("md-ink-bar"),e.nextButton=t.querySelector("md-next-button"),e.prevButton=t.querySelector("md-prev-button"),e.contents=t.querySelectorAll("md-tabs-content-wrapper > md-tab-content"),e.tabs=e.paging.querySelectorAll("md-tab-item"),e.dummies=e.canvas.querySelectorAll("md-dummy-tab"),e}function N(){return ue.offsetLeft>0}function z(){var e=j(),t=e.tabs[e.tabs.length-1];return me()?ue.offsetLeft<e.paging.offsetWidth-e.canvas.offsetWidth:t&&t.offsetLeft+t.offsetWidth>e.canvas.clientWidth+ue.offsetLeft}function K(){var e=ue.tabs[ue.focusIndex];return e&&e.id?"tab-item-"+e.id:null}function U(){switch(ue.stretchTabs){case"always":return!0;case"never":return!1;default:return!ue.shouldPaginate&&s.matchMedia("(max-width: 600px)").matches}}function Y(){return ue.centerTabs&&!ue.shouldPaginate}function G(){if(ue.noPagination||!ve)return!1;var e=a.prop("clientWidth");return t.forEach(j().tabs,function(t){e-=t.offsetWidth}),e<0}function J(e){if(e===-1)return-1;var t,n,a=Math.max(ue.tabs.length-e,e);for(t=0;t<=a;t++){if(n=ue.tabs[e+t],n&&n.scope.disabled!==!0)return n.getIndex();if(n=ue.tabs[e-t],n&&n.scope.disabled!==!0)return n.getIndex()}return e}function Q(e,t,n){Object.defineProperty(ue,e,{get:function(){return n},set:function(e){var a=n;n=e,t&&t(e,a)}})}function V(){ue.maxTabWidth=Z(),ue.shouldPaginate=G()}function X(e){var n=0;return t.forEach(e,function(e){n+=Math.max(e.offsetWidth,e.getBoundingClientRect().width)}),Math.ceil(n)}function Z(){var e=j(),t=e.canvas.clientWidth,n=264;return Math.max(0,Math.min(t-1,n))}function ee(){var e=ue.tabs[ue.selectedIndex],t=ue.tabs[ue.focusIndex];ue.tabs=ue.tabs.sort(function(e,t){return e.index-t.index}),ue.selectedIndex=ue.tabs.indexOf(e),ue.focusIndex=ue.tabs.indexOf(t)}function te(e,t){var n,a=t?"focusIndex":"selectedIndex",s=ue[a];for(n=s+e;ue.tabs[n]&&ue.tabs[n].scope.disabled;n+=e);n=(s+e+ue.tabs.length)%ue.tabs.length,ue.tabs[n]&&(ue[a]=n)}function ne(){ue.styleTabItemFocus="keyboard"===b.getLastInteractionType(),j().tabs[ue.focusIndex].focus()}function ae(e){var n=j();if(t.isNumber(e)||(e=ue.focusIndex),n.tabs[e]&&!ue.shouldCenterTabs){var a=n.tabs[e],s=a.offsetLeft,i=a.offsetWidth+s,r=32;if(0==e)return void(ue.offsetLeft=0);if(me()){var o=X(Array.prototype.slice.call(n.tabs,0,e)),d=X(Array.prototype.slice.call(n.tabs,0,e+1));ue.offsetLeft=Math.min(ue.offsetLeft,le(o)),ue.offsetLeft=Math.max(ue.offsetLeft,le(d-n.canvas.clientWidth))}else ue.offsetLeft=Math.max(ue.offsetLeft,le(i-n.canvas.clientWidth+r)),ue.offsetLeft=Math.min(ue.offsetLeft,le(s))}}function se(){ge.forEach(function(e){o.nextTick(e)}),ge=[]}function ie(){for(var e=!1,t=0;t<ue.tabs.length;t++)if(ue.tabs[t].hasContent){e=!0;break}ue.hasContent=e}function re(){ue.selectedIndex=J(ue.selectedIndex),ue.focusIndex=J(ue.focusIndex)}function oe(){if(!ue.dynamicHeight)return a.css("height","");if(!ue.tabs.length)return ge.push(oe);var e=j(),t=e.contents[ue.selectedIndex],s=t?t.offsetHeight:0,i=e.wrapper.offsetHeight,r=s+i,c=a.prop("clientHeight");if(c!==r){"bottom"===a.attr("md-align-tabs")&&(c-=i,r-=i,a.attr("md-border-bottom")!==n&&++c),pe=!0;var l={height:c+"px"},f={height:r+"px"};a.css(l),d(a,{from:l,to:f,easing:"cubic-bezier(0.35, 0, 0.25, 1)",duration:.5}).start().done(function(){a.css({transition:"none",height:""}),o.nextTick(function(){a.css("transition","")}),pe=!1})}}function de(){var e=j();if(!e.tabs[ue.selectedIndex])return void t.element(e.inkBar).css({left:"auto",right:"auto"});if(!ue.tabs.length)return ge.push(ue.updateInkBarStyles);if(!a.prop("offsetParent"))return O();var n=ue.selectedIndex,s=e.paging.offsetWidth,i=e.tabs[n],r=i.offsetLeft,d=s-r-i.offsetWidth;if(ue.shouldCenterTabs){var c=X(e.tabs);s>c&&o.nextTick(de,!1)}ce(),t.element(e.inkBar).css({left:r+"px",right:d+"px"})}function ce(){var e=j(),n=ue.selectedIndex,a=ue.lastSelectedIndex,s=t.element(e.inkBar);t.isNumber(a)&&s.toggleClass("md-left",n<a).toggleClass("md-right",n>a)}function le(e){var t=j();if(!t.tabs.length||!ue.shouldPaginate)return 0;var n=t.tabs[t.tabs.length-1],a=n.offsetLeft+n.offsetWidth;return me()?(e=Math.min(t.paging.offsetWidth-t.canvas.clientWidth,e),e=Math.max(0,e)):(e=Math.max(0,e),e=Math.min(a-t.canvas.clientWidth,e)),e}function fe(e,n){var a=j(),s={colorElement:t.element(a.inkBar)};r.attach(e,n,s)}function be(e){if(e.hasContent){var n=a[0].querySelectorAll('[md-tab-id="'+e.id+'"]');t.element(n).attr("aria-controls",ue.tabContentPrefix+e.id)}}function me(){return"rtl"==o.bidi()}var ue=this,pe=!1,he=j(),ge=[],xe=!1,ve=!1;ue.$onInit=u,ue.updatePagination=o.debounce(V,100),ue.redirectFocus=ne,ue.attachRipple=fe,ue.insertTab=H,ue.removeTab=_,ue.select=A,ue.scroll=D,ue.nextPage=E,ue.previousPage=B,ue.keydown=M,ue.canPageForward=z,ue.canPageBack=N,ue.refreshIndex=re,ue.incrementIndex=te,ue.getTabElementIndex=W,ue.updateInkBarStyles=o.debounce(de,100),ue.updateTabOrder=o.debounce(ee,100),ue.getFocusedTabId=K,1===t.version.major&&t.version.minor<=4&&this.$onInit()}function c(e){return{scope:{selectedIndex:"=?mdSelected"},template:function(t,n){return n.$mdTabsTemplate=t.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-src="'+e.mdTabsArrow+'"></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-src="'+e.mdTabsArrow+'"></md-icon> </md-next-button> <md-tabs-canvas ng-focus="$mdTabsCtrl.redirectFocus()" ng-class="{ \'md-paginated\': $mdTabsCtrl.shouldPaginate, \'md-center-tabs\': $mdTabsCtrl.shouldCenterTabs }" ng-keydown="$mdTabsCtrl.keydown($event)"> <md-pagination-wrapper ng-class="{ \'md-center-tabs\': $mdTabsCtrl.shouldCenterTabs }" md-tab-scroll="$mdTabsCtrl.scroll($event)" role="tablist"> <md-tab-item tabindex="{{ tab.isActive() ? 0 : -1 }}" class="md-tab" ng-repeat="tab in $mdTabsCtrl.tabs" role="tab" id="tab-item-{{::tab.id}}" md-tab-id="{{::tab.id}}"aria-selected="{{tab.isActive()}}" aria-disabled="{{tab.scope.disabled || \'false\'}}" ng-click="$mdTabsCtrl.select(tab.getIndex())" ng-focus="$mdTabsCtrl.hasFocus = true" ng-blur="$mdTabsCtrl.hasFocus = false" 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> <md-tabs-dummy-wrapper aria-hidden="true" class="md-visually-hidden md-dummy-wrapper"> <md-dummy-tab class="md-tab" tabindex="-1" ng-repeat="tab in $mdTabsCtrl.tabs" md-tabs-template="::tab.label" md-scope="::tab.parent"></md-dummy-tab> </md-tabs-dummy-wrapper> </md-tabs-canvas> </md-tabs-wrapper> <md-tabs-content-wrapper ng-show="$mdTabsCtrl.hasContent && $mdTabsCtrl.selectedIndex >= 0" class="_md"> <md-tab-content id="{{:: $mdTabsCtrl.tabContentPrefix + tab.id}}" class="_md" 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="tab.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 l(e,t){return{require:"^?mdTabs",link:function(n,a,s,i){if(i){var r,o,d=function(){i.updatePagination(),i.updateInkBarStyles()};if("MutationObserver"in t){var c={childList:!0,subtree:!0,characterData:!0};r=new MutationObserver(d),r.observe(a[0],c),o=r.disconnect.bind(r)}else{var l=e.debounce(d,15,null,!1);a.on("DOMSubtreeModified",l),o=a.off.bind(a,"DOMSubtreeModified",l)}n.$on("$destroy",function(){o()})}}}}function f(e,t){function n(n,a,s,i){function r(){n.$watch("connected",function(e){e===!1?o():d()}),n.$on("$destroy",d)}function o(){i.enableDisconnect&&t.disconnectScope(c)}function d(){i.enableDisconnect&&t.reconnectScope(c)}if(i){var c=i.enableDisconnect?n.compileScope.$new():n.compileScope;return a.html(n.template),e(a.contents())(c),t.nextTick(r)}}return{restrict:"A",link:n,scope:{template:"=mdTabsTemplate",connected:"=?mdConnectedIf",compileScope:"=mdScope"},require:"^?mdTabs"}}t.module("material.components.tabs",["material.core","material.components.icon"]),t.module("material.components.tabs").service("MdTabsPaginationService",a),t.module("material.components.tabs").directive("mdTab",s),t.module("material.components.tabs").directive("mdTabItem",i),t.module("material.components.tabs").directive("mdTabLabel",r),o.$inject=["$parse"],t.module("material.components.tabs").directive("mdTabScroll",o),d.$inject=["$scope","$element","$window","$mdConstant","$mdTabInkRipple","$mdUtil","$animateCss","$attrs","$compile","$mdTheming","$mdInteraction","MdTabsPaginationService"],t.module("material.components.tabs").controller("MdTabsController",d),c.$inject=["$$mdSvgRegistry"],t.module("material.components.tabs").directive("mdTabs",c),l.$inject=["$mdUtil","$window"],t.module("material.components.tabs").directive("mdTabsDummyWrapper",l),f.$inject=["$compile","$mdUtil"],t.module("material.components.tabs").directive("mdTabsTemplate",f)}(window,window.angular);