UNPKG

@angular-mdc/web

Version:
22 lines (20 loc) 8.8 kB
/** * @license * Copyright (c) Dominic Carretto * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular-mdc/web/icon"),require("@angular-mdc/web/tab-indicator"),require("@angular/cdk/coercion"),require("rxjs"),require("rxjs/operators"),require("@angular-mdc/web/base"),require("@angular-mdc/web/ripple"),require("@material/tab"),require("@material/ripple")):"function"==typeof define&&define.amd?define("@angular-mdc/web/tab",["exports","@angular/core","@angular/common","@angular-mdc/web/icon","@angular-mdc/web/tab-indicator","@angular/cdk/coercion","rxjs","rxjs/operators","@angular-mdc/web/base","@angular-mdc/web/ripple","@material/tab","@material/ripple"],e):e(((t=t||self).ng=t.ng||{},t.ng.web=t.ng.web||{},t.ng.web.tab={}),t.ng.core,t.ng.common,t.ng.web.icon,t.ng.web.tabIndicator,t.ng.cdk.coercion,t.rxjs,t.rxjs.operators,t.ng.web.base,t.ng.web.ripple,t.mdc.tab,t.mdc.ripple)}(this,(function(t,e,n,o,r,i,c,a,s,u,d,p){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */var l=function(t,e){return(l=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var f=function(){return(f=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)},b=new e.InjectionToken("MDC_TAB_BAR_PARENT_COMPONENT"),m=0,g=function(){function t(t){this.elementRef=t}return t.decorators=[{type:e.Directive,args:[{selector:"mdc-tab-label, [mdcTabLabel]",host:{class:"mdc-tab__text-label"}}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t}(),_=function(){function t(t){this.elementRef=t}return t.decorators=[{type:e.Directive,args:[{selector:"mdc-tab-icon, [mdcTabIcon]",host:{class:"mdc-tab__icon"}}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t}(),y=function(t){function n(n,o,r,i,a){var s=t.call(this,i)||this;return s._ngZone=n,s._changeDetectorRef=o,s._ripple=r,s.elementRef=i,s._parent=a,s._destroy=new c.Subject,s._uniqueId="mdc-tab-"+ ++m,s.id=s._uniqueId,s._stacked=!1,s._fixed=!1,s._disabled=!1,s._focusOnActivate=!0,s.interacted=new e.EventEmitter,s._root=s.elementRef.nativeElement,s}return function(t,e){function n(){this.constructor=t}l(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(n,t),Object.defineProperty(n.prototype,"stacked",{get:function(){return this._stacked},set:function(t){var e=i.coerceBooleanProperty(t);e!==this._stacked&&(this._stacked=e)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"fixed",{get:function(){return this._fixed},set:function(t){var e=i.coerceBooleanProperty(t);e!==this._fixed&&(this._fixed=e,this._changeDetectorRef.detectChanges())},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"disabled",{get:function(){return this._disabled},set:function(t){this._disabled=i.coerceBooleanProperty(t)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"focusOnActivate",{get:function(){return this._focusOnActivate},set:function(t){var e=i.coerceBooleanProperty(t);e!==this._focusOnActivate&&(this._focusOnActivate=e,this._foundation.setFocusOnActivate(this._focusOnActivate))},enumerable:!0,configurable:!0}),n.prototype.getDefaultFoundation=function(){var t=this,e={setAttr:function(e,n){return t._getHostElement().setAttribute(e,n)},addClass:function(e){return t._getHostElement().classList.add(e)},removeClass:function(e){return t._getHostElement().classList.remove(e)},hasClass:function(e){return t._getHostElement().classList.contains(e)},activateIndicator:function(e){return t.tabIndicator.activate(e)},deactivateIndicator:function(){return t.tabIndicator.deactivate()},notifyInteracted:function(){return t.interacted.emit({detail:{tabId:t.id,tab:t}})},getOffsetLeft:function(){return t._getHostElement().offsetLeft},getOffsetWidth:function(){return t._getHostElement().offsetWidth},getContentOffsetLeft:function(){return t.content.nativeElement.offsetLeft},getContentOffsetWidth:function(){return t.content.nativeElement.offsetWidth},focus:function(){return t._getHostElement().focus()}};return new d.MDCTabFoundation(e)},n.prototype.ngOnInit=function(){this._foundation.init(),this._loadListeners()},n.prototype.ngAfterViewInit=function(){this._ripple=this._createRipple(),this._ripple.init()},n.prototype.ngOnDestroy=function(){this._destroy.next(),this._destroy.complete(),this._ripple.destroy()},Object.defineProperty(n.prototype,"active",{get:function(){return this._foundation.isActive()},enumerable:!0,configurable:!0}),n.prototype.activate=function(t){this._foundation.activate(t)},n.prototype.deactivate=function(){this._foundation.deactivate()},n.prototype.computeIndicatorClientRect=function(){return this.tabIndicator.computeContentClientRect()},n.prototype.computeDimensions=function(){return this._foundation.computeDimensions()},n.prototype.getTabBarParent=function(){return this._parent},n.prototype.focus=function(){this._getHostElement().focus()},n.prototype._createRipple=function(){var t=this.rippleSurface.nativeElement,e=f(f({},u.MdcRipple.createAdapter(this)),{addClass:function(e){return t.classList.add(e)},removeClass:function(e){return t.classList.remove(e)},updateCssVariable:function(e,n){return t.style.setProperty(e,n)}});return new u.MdcRipple(this.elementRef,new p.MDCRippleFoundation(e))},n.prototype._loadListeners=function(){var t=this;this._ngZone.runOutsideAngular((function(){return c.fromEvent(t._getHostElement(),"click").pipe(a.takeUntil(t._destroy)).subscribe((function(){return t._ngZone.run((function(){t.active||t._disabled||t._foundation.handleClick()}))}))}))},n.prototype._getHostElement=function(){return this.elementRef.nativeElement},n.decorators=[{type:e.Component,args:[{selector:"[mdcTab], mdc-tab",exportAs:"mdcTab",host:{"[id]":"id",role:"tab",class:"mdc-tab","[class.mdc-tab--stacked]":"stacked","[class.mdc-tab--min-width]":"fixed","[class.ngx-mdc-tab--disabled]":"disabled"},template:'\n <div #content class="mdc-tab__content">\n <mdc-icon class="mdc-tab__icon" *ngIf="icon">{{icon}}</mdc-icon>\n <ng-content select="mdc-icon"></ng-content>\n <span class="mdc-tab__text-label" *ngIf="label">{{label}}</span>\n <ng-content></ng-content>\n <ng-container *ngIf="fixed">\n <ng-container *ngTemplateOutlet="indicator"></ng-container>\n </ng-container>\n </div>\n <ng-container *ngIf="!fixed">\n <ng-container *ngTemplateOutlet="indicator"></ng-container>\n </ng-container>\n <ng-template #indicator><mdc-tab-indicator></mdc-tab-indicator></ng-template>\n <div #ripplesurface class="mdc-tab__ripple"></div>\n ',changeDetection:e.ChangeDetectionStrategy.OnPush,encapsulation:e.ViewEncapsulation.None,providers:[u.MdcRipple]}]}],n.ctorParameters=function(){return[{type:e.NgZone},{type:e.ChangeDetectorRef},{type:u.MdcRipple},{type:e.ElementRef},{type:void 0,decorators:[{type:e.Optional},{type:e.Inject,args:[b]}]}]},n.propDecorators={id:[{type:e.Input}],label:[{type:e.Input}],icon:[{type:e.Input}],stacked:[{type:e.Input}],fixed:[{type:e.Input}],disabled:[{type:e.Input}],focusOnActivate:[{type:e.Input}],interacted:[{type:e.Output}],content:[{type:e.ViewChild,args:["content",{static:!1}]}],rippleSurface:[{type:e.ViewChild,args:["ripplesurface",{static:!1}]}],tabIndicator:[{type:e.ViewChild,args:[r.MdcTabIndicator,{static:!1}]}]},n}(s.MDCComponent),h=[y,_,g],v=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,r.MdcTabIndicatorModule,o.MdcIconModule],exports:h,declarations:h}]}],t}();t.MDC_TAB_BAR_PARENT_COMPONENT=b,t.MdcTab=y,t.MdcTabIcon=_,t.MdcTabLabel=g,t.MdcTabModule=v,Object.defineProperty(t,"__esModule",{value:!0})}));