| 1 |
- 'use strict';var mdc=function(exports){'use strict';class MDCFoundation{static get cssClasses(){return{}}static get strings(){return{}}static get numbers(){return{}}static get defaultAdapter(){return{}}constructor(adapter={}){this.adapter_=adapter}init(){}destroy(){}}class MDCComponent{static attachTo(root){return new MDCComponent(root,new MDCFoundation())}constructor(root,foundation=undefined,...args){this.root_=root;this.initialize(...args);this.foundation_=foundation===undefined?this.getDefaultFoundation():foundation;this.foundation_.init();this.initialSyncWithDOM()}initialize(){}getDefaultFoundation(){throw new Error('Subclasses must override getDefaultFoundation to return a properly configured '+'foundation class')}initialSyncWithDOM(){}destroy(){this.foundation_.destroy()}listen(evtType,handler){this.root_.addEventListener(evtType,handler)}unlisten(evtType,handler){this.root_.removeEventListener(evtType,handler)}emit(evtType,evtData,shouldBubble=false){let evt;if(typeof CustomEvent==='function'){evt=new CustomEvent(evtType,{detail:evtData,bubbles:shouldBubble})}else{evt=document.createEvent('CustomEvent');evt.initCustomEvent(evtType,shouldBubble,false,evtData)}this.root_.dispatchEvent(evt)}}const cssClasses={ROOT:'mdc-ripple-upgraded',UNBOUNDED:'mdc-ripple-upgraded--unbounded',BG_FOCUSED:'mdc-ripple-upgraded--background-focused',FG_ACTIVATION:'mdc-ripple-upgraded--foreground-activation',FG_DEACTIVATION:'mdc-ripple-upgraded--foreground-deactivation'};const strings={VAR_LEFT:'--mdc-ripple-left',VAR_TOP:'--mdc-ripple-top',VAR_FG_SIZE:'--mdc-ripple-fg-size',VAR_FG_SCALE:'--mdc-ripple-fg-scale',VAR_FG_TRANSLATE_START:'--mdc-ripple-fg-translate-start',VAR_FG_TRANSLATE_END:'--mdc-ripple-fg-translate-end'};const numbers={PADDING:10,INITIAL_ORIGIN_SCALE:0.6,DEACTIVATION_TIMEOUT_MS:225,FG_DEACTIVATION_MS:150,TAP_DELAY_MS:300};let supportsCssVariables_;let supportsPassive_;function detectEdgePseudoVarBug(windowObj){const document=windowObj.document;const node=document.createElement('div');node.className='mdc-ripple-surface--test-edge-var-bug';document.body.appendChild(node);const computedStyle=windowObj.getComputedStyle(node);const hasPseudoVarBug=computedStyle!==null&&computedStyle.borderTopStyle==='solid';node.remove();return hasPseudoVarBug}function supportsCssVariables(windowObj,forceRefresh=false){let supportsCssVariables=supportsCssVariables_;if(typeof supportsCssVariables_==='boolean'&&!forceRefresh){return supportsCssVariables}const supportsFunctionPresent=windowObj.CSS&&typeof windowObj.CSS.supports==='function';if(!supportsFunctionPresent){return}const explicitlySupportsCssVars=windowObj.CSS.supports('--css-vars','yes');const weAreFeatureDetectingSafari10plus=windowObj.CSS.supports('(--css-vars: yes)')&&windowObj.CSS.supports('color','#00000000');if(explicitlySupportsCssVars||weAreFeatureDetectingSafari10plus){supportsCssVariables=!detectEdgePseudoVarBug(windowObj)}else{supportsCssVariables=false}if(!forceRefresh){supportsCssVariables_=supportsCssVariables}return supportsCssVariables}function applyPassive(globalObj=window,forceRefresh=false){if(supportsPassive_===undefined||forceRefresh){let isSupported=false;try{globalObj.document.addEventListener('test',null,{get passive(){isSupported=true}})}catch(e){}supportsPassive_=isSupported}return supportsPassive_?{passive:true}:false}function getMatchesProperty(HTMLElementPrototype){return['webkitMatchesSelector','msMatchesSelector','matches'].filter(p=>p in HTMLElementPrototype).pop()}function getNormalizedEventCoords(ev,pageOffset,clientRect){const{x,y}=pageOffset;const documentX=x+clientRect.left;const documentY=y+clientRect.top;let normalizedX;let normalizedY;if(ev.type==='touchstart'){normalizedX=ev.changedTouches[0].pageX-documentX;normalizedY=ev.changedTouches[0].pageY-documentY}else{normalizedX=ev.pageX-documentX;normalizedY=ev.pageY-documentY}return{x:normalizedX,y:normalizedY}}const ACTIVATION_EVENT_TYPES=['touchstart','pointerdown','mousedown','keydown'];const POINTER_DEACTIVATION_EVENT_TYPES=['touchend','pointerup','mouseup'];let activatedTargets=[];class MDCRippleFoundation extends MDCFoundation{static get cssClasses(){return cssClasses}static get strings(){return strings}static get numbers(){return numbers}static get defaultAdapter(){return{browserSupportsCssVars:()=>{},isUnbounded:()=>{},isSurfaceActive:()=>{},isSurfaceDisabled:()=>{},addClass:()=>{},removeClass:()=>{},containsEventTarget:()=>{},registerInteractionHandler:()=>{},deregisterInteractionHandler:()=>{},registerDocumentInteractionHandler:()=>{},deregisterDocumentInteractionHandler:()=>{},registerResizeHandler:()=>{},deregisterResizeHandler:()=>{},updateCssVariable:()=>{},computeBoundingRect:()=>{},getWindowPageOffset:()=>{}}}constructor(adapter){super(Object.assign(MDCRippleFoundation.defaultAdapter,adapter));this.layoutFrame_=0;this.frame_={width:0,height:0};this.activationState_=this.defaultActivationState_();this.initialSize_=0;this.maxRadius_=0;this.activateHandler_=e=>this.activate_(e);this.deactivateHandler_=e=>this.deactivate_(e);this.focusHandler_=()=>this.handleFocus();this.blurHandler_=()=>this.handleBlur();this.resizeHandler_=()=>this.layout();this.unboundedCoords_={left:0,top:0};this.fgScale_=0;this.activationTimer_=0;this.fgDeactivationRemovalTimer_=0;this.activationAnimationHasEnded_=false;this.activationTimerCallback_=()=>{this.activationAnimationHasEnded_=true;this.runDeactivationUXLogicIfReady_()};this.previousActivationEvent_=null}isSupported_(){return this.adapter_.browserSupportsCssVars()}defaultActivationState_(){return{isActivated:false,hasDeactivationUXRun:false,wasActivatedByPointer:false,wasElementMadeActive:false,activationEvent:null,isProgrammatic:false}}init(){if(!this.isSupported_()){return}this.registerRootHandlers_();const{ROOT,UNBOUNDED}=MDCRippleFoundation.cssClasses;requestAnimationFrame(()=>{this.adapter_.addClass(ROOT);if(this.adapter_.isUnbounded()){this.adapter_.addClass(UNBOUNDED);this.layoutInternal_()}})}destroy(){if(!this.isSupported_()){return}if(this.activationTimer_){clearTimeout(this.activationTimer_);this.activationTimer_=0;const{FG_ACTIVATION}=MDCRippleFoundation.cssClasses;this.adapter_.removeClass(FG_ACTIVATION)}this.deregisterRootHandlers_();this.deregisterDeactivationHandlers_();const{ROOT,UNBOUNDED}=MDCRippleFoundation.cssClasses;requestAnimationFrame(()=>{this.adapter_.removeClass(ROOT);this.adapter_.removeClass(UNBOUNDED);this.removeCssVars_()})}registerRootHandlers_(){ACTIVATION_EVENT_TYPES.forEach(type=>{this.adapter_.registerInteractionHandler(type,this.activateHandler_)});this.adapter_.registerInteractionHandler('focus',this.focusHandler_);this.adapter_.registerInteractionHandler('blur',this.blurHandler_);if(this.adapter_.isUnbounded()){this.adapter_.registerResizeHandler(this.resizeHandler_)}}registerDeactivationHandlers_(e){if(e.type==='keydown'){this.adapter_.registerInteractionHandler('keyup',this.deactivateHandler_)}else{POINTER_DEACTIVATION_EVENT_TYPES.forEach(type=>{this.adapter_.registerDocumentInteractionHandler(type,this.deactivateHandler_)})}}deregisterRootHandlers_(){ACTIVATION_EVENT_TYPES.forEach(type=>{this.adapter_.deregisterInteractionHandler(type,this.activateHandler_)});this.adapter_.deregisterInteractionHandler('focus',this.focusHandler_);this.adapter_.deregisterInteractionHandler('blur',this.blurHandler_);if(this.adapter_.isUnbounded()){this.adapter_.deregisterResizeHandler(this.resizeHandler_)}}deregisterDeactivationHandlers_(){this.adapter_.deregisterInteractionHandler('keyup',this.deactivateHandler_);POINTER_DEACTIVATION_EVENT_TYPES.forEach(type=>{this.adapter_.deregisterDocumentInteractionHandler(type,this.deactivateHandler_)})}removeCssVars_(){const{strings:strings$$1}=MDCRippleFoundation;Object.keys(strings$$1).forEach(k=>{if(k.indexOf('VAR_')===0){this.adapter_.updateCssVariable(strings$$1[k],null)}})}activate_(e){if(this.adapter_.isSurfaceDisabled()){return}const activationState=this.activationState_;if(activationState.isActivated){return}const previousActivationEvent=this.previousActivationEvent_;const isSameInteraction=previousActivationEvent&&e&&previousActivationEvent.type!==e.type;if(isSameInteraction){return}activationState.isActivated=true;activationState.isProgrammatic=e===null;activationState.activationEvent=e;activationState.wasActivatedByPointer=activationState.isProgrammatic?false:e.type==='mousedown'||e.type==='touchstart'||e.type==='pointerdown';const hasActivatedChild=e&&activatedTargets.length>0&&activatedTargets.some(target=>this.adapter_.containsEventTarget(target));if(hasActivatedChild){this.resetActivationState_();return}if(e){activatedTargets.push(e.target);this.registerDeactivationHandlers_(e)}activationState.wasElementMadeActive=this.checkElementMadeActive_(e);if(activationState.wasElementMadeActive){this.animateActivation_()}requestAnimationFrame(()=>{activatedTargets=[];if(!activationState.wasElementMadeActive&&(e.key===' '||e.keyCode===32)){activationState.wasElementMadeActive=this.checkElementMadeActive_(e);if(activationState.wasElementMadeActive){this.animateActivation_()}}if(!activationState.wasElementMadeActive){this.activationState_=this.defaultActivationState_()}})}checkElementMadeActive_(e){return e&&e.type==='keydown'?this.adapter_.isSurfaceActive():true}activate(event=null){this.activate_(event)}animateActivation_(){const{VAR_FG_TRANSLATE_START,VAR_FG_TRANSLATE_END}=MDCRippleFoundation.strings;const{FG_DEACTIVATION,FG_ACTIVATION}=MDCRippleFoundation.cssClasses;const{DEACTIVATION_TIMEOUT_MS}=MDCRippleFoundation.numbers;this.layoutInternal_();let translateStart='';let translateEnd='';if(!this.adapter_.isUnbounded()){const{startPoint,endPoint}=this.getFgTranslationCoordinates_();translateStart=`${startPoint.x}px, ${startPoint.y}px`;translateEnd=`${endPoint.x}px, ${endPoint.y}px`}this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START,translateStart);this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END,translateEnd);clearTimeout(this.activationTimer_);clearTimeout(this.fgDeactivationRemovalTimer_);this.rmBoundedActivationClasses_();this.adapter_.removeClass(FG_DEACTIVATION);this.adapter_.computeBoundingRect();this.adapter_.addClass(FG_ACTIVATION);this.activationTimer_=setTimeout(()=>this.activationTimerCallback_(),DEACTIVATION_TIMEOUT_MS)}getFgTranslationCoordinates_(){const{activationEvent,wasActivatedByPointer}=this.activationState_;let startPoint;if(wasActivatedByPointer){startPoint=getNormalizedEventCoords(activationEvent,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect())}else{startPoint={x:this.frame_.width/2,y:this.frame_.height/2}}startPoint={x:startPoint.x-this.initialSize_/2,y:startPoint.y-this.initialSize_/2};const endPoint={x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2};return{startPoint,endPoint}}runDeactivationUXLogicIfReady_(){const{FG_DEACTIVATION}=MDCRippleFoundation.cssClasses;const{hasDeactivationUXRun,isActivated}=this.activationState_;const activationHasEnded=hasDeactivationUXRun||!isActivated;if(activationHasEnded&&this.activationAnimationHasEnded_){this.rmBoundedActivationClasses_();this.adapter_.addClass(FG_DEACTIVATION);this.fgDeactivationRemovalTimer_=setTimeout(()=>{this.adapter_.removeClass(FG_DEACTIVATION)},numbers.FG_DEACTIVATION_MS)}}rmBoundedActivationClasses_(){const{FG_ACTIVATION}=MDCRippleFoundation.cssClasses;this.adapter_.removeClass(FG_ACTIVATION);this.activationAnimationHasEnded_=false;this.adapter_.computeBoundingRect()}resetActivationState_(){this.previousActivationEvent_=this.activationState_.activationEvent;this.activationState_=this.defaultActivationState_();setTimeout(()=>this.previousActivationEvent_=null,MDCRippleFoundation.numbers.TAP_DELAY_MS)}deactivate_(e){const activationState=this.activationState_;if(!activationState.isActivated){return}const state=Object.assign({},activationState);if(activationState.isProgrammatic){const evtObject=null;requestAnimationFrame(()=>this.animateDeactivation_(evtObject,state));this.resetActivationState_()}else{this.deregisterDeactivationHandlers_();requestAnimationFrame(()=>{this.activationState_.hasDeactivationUXRun=true;this.animateDeactivation_(e,state);this.resetActivationState_()})}}deactivate(event=null){this.deactivate_(event)}animateDeactivation_(e,{wasActivatedByPointer,wasElementMadeActive}){if(wasActivatedByPointer||wasElementMadeActive){this.runDeactivationUXLogicIfReady_()}}layout(){if(this.layoutFrame_){cancelAnimationFrame(this.layoutFrame_)}this.layoutFrame_=requestAnimationFrame(()=>{this.layoutInternal_();this.layoutFrame_=0})}layoutInternal_(){this.frame_=this.adapter_.computeBoundingRect();const maxDim=Math.max(this.frame_.height,this.frame_.width);const getBoundedRadius=()=>{const hypotenuse=Math.sqrt(Math.pow(this.frame_.width,2)+Math.pow(this.frame_.height,2));return hypotenuse+MDCRippleFoundation.numbers.PADDING};this.maxRadius_=this.adapter_.isUnbounded()?maxDim:getBoundedRadius();this.initialSize_=maxDim*MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE;this.fgScale_=this.maxRadius_/this.initialSize_;this.updateLayoutCssVars_()}updateLayoutCssVars_(){const{VAR_FG_SIZE,VAR_LEFT,VAR_TOP,VAR_FG_SCALE}=MDCRippleFoundation.strings;this.adapter_.updateCssVariable(VAR_FG_SIZE,`${this.initialSize_}px`);this.adapter_.updateCssVariable(VAR_FG_SCALE,this.fgScale_);if(this.adapter_.isUnbounded()){this.unboundedCoords_={left:Math.round(this.frame_.width/2-this.initialSize_/2),top:Math.round(this.frame_.height/2-this.initialSize_/2)};this.adapter_.updateCssVariable(VAR_LEFT,`${this.unboundedCoords_.left}px`);this.adapter_.updateCssVariable(VAR_TOP,`${this.unboundedCoords_.top}px`)}}setUnbounded(unbounded){const{UNBOUNDED}=MDCRippleFoundation.cssClasses;if(unbounded){this.adapter_.addClass(UNBOUNDED)}else{this.adapter_.removeClass(UNBOUNDED)}}handleFocus(){requestAnimationFrame(()=>this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED))}handleBlur(){requestAnimationFrame(()=>this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED))}}class MDCRipple extends MDCComponent{constructor(...args){super(...args);this.disabled=false;this.unbounded_}static attachTo(root,{isUnbounded=undefined}={}){const ripple=new MDCRipple(root);if(isUnbounded!==undefined){ripple.unbounded=isUnbounded}return ripple}static createAdapter(instance){const MATCHES=getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:()=>supportsCssVariables(window),isUnbounded:()=>instance.unbounded,isSurfaceActive:()=>instance.root_[MATCHES](':active'),isSurfaceDisabled:()=>instance.disabled,addClass:className=>instance.root_.classList.add(className),removeClass:className=>instance.root_.classList.remove(className),containsEventTarget:target=>instance.root_.contains(target),registerInteractionHandler:(evtType,handler)=>instance.root_.addEventListener(evtType,handler,applyPassive()),deregisterInteractionHandler:(evtType,handler)=>instance.root_.removeEventListener(evtType,handler,applyPassive()),registerDocumentInteractionHandler:(evtType,handler)=>document.documentElement.addEventListener(evtType,handler,applyPassive()),deregisterDocumentInteractionHandler:(evtType,handler)=>document.documentElement.removeEventListener(evtType,handler,applyPassive()),registerResizeHandler:handler=>window.addEventListener('resize',handler),deregisterResizeHandler:handler=>window.removeEventListener('resize',handler),updateCssVariable:(varName,value)=>instance.root_.style.setProperty(varName,value),computeBoundingRect:()=>instance.root_.getBoundingClientRect(),getWindowPageOffset:()=>({x:window.pageXOffset,y:window.pageYOffset})}}get unbounded(){return this.unbounded_}set unbounded(unbounded){this.unbounded_=Boolean(unbounded);this.setUnbounded_()}setUnbounded_(){this.foundation_.setUnbounded(this.unbounded_)}activate(){this.foundation_.activate()}deactivate(){this.foundation_.deactivate()}layout(){this.foundation_.layout()}getDefaultFoundation(){return new MDCRippleFoundation(MDCRipple.createAdapter(this))}initialSyncWithDOM(){this.unbounded='mdcRippleIsUnbounded'in this.root_.dataset}}class RippleCapableSurface{}RippleCapableSurface.prototype.root_;RippleCapableSurface.prototype.unbounded;RippleCapableSurface.prototype.disabled;const cssClasses$1={ACTIVE:'mdc-tab--active'};const strings$1={SELECTED_EVENT:'MDCTab:selected'};class MDCTabFoundation extends MDCFoundation{static get cssClasses(){return cssClasses$1}static get strings(){return strings$1}static get defaultAdapter(){return{addClass:()=>{},removeClass:()=>{},registerInteractionHandler:()=>{},deregisterInteractionHandler:()=>{},getOffsetWidth:()=>0,getOffsetLeft:()=>0,notifySelected:()=>{}}}constructor(adapter={}){super(Object.assign(MDCTabFoundation.defaultAdapter,adapter));this.computedWidth_=0;this.computedLeft_=0;this.isActive_=false;this.preventDefaultOnClick_=false;this.clickHandler_=evt=>{if(this.preventDefaultOnClick_){evt.preventDefault()}this.adapter_.notifySelected()};this.keydownHandler_=evt=>{if(evt.key&&evt.key==='Enter'||evt.keyCode===13){this.adapter_.notifySelected()}}}init(){this.adapter_.registerInteractionHandler('click',this.clickHandler_);this.adapter_.registerInteractionHandler('keydown',this.keydownHandler_)}destroy(){this.adapter_.deregisterInteractionHandler('click',this.clickHandler_);this.adapter_.deregisterInteractionHandler('keydown',this.keydownHandler_)}getComputedWidth(){return this.computedWidth_}getComputedLeft(){return this.computedLeft_}isActive(){return this.isActive_}setActive(isActive){this.isActive_=isActive;if(this.isActive_){this.adapter_.addClass(cssClasses$1.ACTIVE)}else{this.adapter_.removeClass(cssClasses$1.ACTIVE)}}preventsDefaultOnClick(){return this.preventDefaultOnClick_}setPreventDefaultOnClick(preventDefaultOnClick){this.preventDefaultOnClick_=preventDefaultOnClick}measureSelf(){this.computedWidth_=this.adapter_.getOffsetWidth();this.computedLeft_=this.adapter_.getOffsetLeft()}}class MDCTab extends MDCComponent{static attachTo(root){return new MDCTab(root)}get computedWidth(){return this.foundation_.getComputedWidth()}get computedLeft(){return this.foundation_.getComputedLeft()}get isActive(){return this.foundation_.isActive()}set isActive(isActive){this.foundation_.setActive(isActive)}get preventDefaultOnClick(){return this.foundation_.preventsDefaultOnClick()}set preventDefaultOnClick(preventDefaultOnClick){this.foundation_.setPreventDefaultOnClick(preventDefaultOnClick)}constructor(...args){super(...args);this.ripple_=MDCRipple.attachTo(this.root_)}destroy(){this.ripple_.destroy();super.destroy()}getDefaultFoundation(){return new MDCTabFoundation({addClass:className=>this.root_.classList.add(className),removeClass:className=>this.root_.classList.remove(className),registerInteractionHandler:(type,handler)=>this.root_.addEventListener(type,handler),deregisterInteractionHandler:(type,handler)=>this.root_.removeEventListener(type,handler),getOffsetWidth:()=>this.root_.offsetWidth,getOffsetLeft:()=>this.root_.offsetLeft,notifySelected:()=>this.emit(MDCTabFoundation.strings.SELECTED_EVENT,{tab:this},true)})}initialSyncWithDOM(){this.isActive=this.root_.classList.contains(cssClasses$1.ACTIVE)}measureSelf(){this.foundation_.measureSelf()}}const eventTypeMap={'animationstart':{noPrefix:'animationstart',webkitPrefix:'webkitAnimationStart',styleProperty:'animation'},'animationend':{noPrefix:'animationend',webkitPrefix:'webkitAnimationEnd',styleProperty:'animation'},'animationiteration':{noPrefix:'animationiteration',webkitPrefix:'webkitAnimationIteration',styleProperty:'animation'},'transitionend':{noPrefix:'transitionend',webkitPrefix:'webkitTransitionEnd',styleProperty:'transition'}};const cssPropertyMap={'animation':{noPrefix:'animation',webkitPrefix:'-webkit-animation'},'transform':{noPrefix:'transform',webkitPrefix:'-webkit-transform'},'transition':{noPrefix:'transition',webkitPrefix:'-webkit-transition'}};function hasProperShape(windowObj){return windowObj['document']!==undefined&&typeof windowObj['document']['createElement']==='function'}function eventFoundInMaps(eventType){return eventType in eventTypeMap||eventType in cssPropertyMap}function getJavaScriptEventName(eventType,map,el){return map[eventType].styleProperty in el.style?map[eventType].noPrefix:map[eventType].webkitPrefix}function getAnimationName(windowObj,eventType){if(!hasProperShape(windowObj)||!eventFoundInMaps(eventType)){return eventType}const map=eventType in eventTypeMap?eventTypeMap:cssPropertyMap;const el=windowObj['document']['createElement']('div');let eventName='';if(map===eventTypeMap){eventName=getJavaScriptEventName(eventType,map,el)}else{eventName=map[eventType].noPrefix in el.style?map[eventType].noPrefix:map[eventType].webkitPrefix}return eventName}function getCorrectPropertyName(windowObj,eventType){return getAnimationName(windowObj,eventType)}const cssClasses$2={UPGRADED:'mdc-tab-bar-upgraded'};const strings$2={TAB_SELECTOR:'.mdc-tab',INDICATOR_SELECTOR:'.mdc-tab-bar__indicator',CHANGE_EVENT:'MDCTabBar:change'};class MDCTabBarFoundation extends MDCFoundation{static get cssClasses(){return cssClasses$2}static get strings(){return strings$2}static get defaultAdapter(){return{addClass:()=>{},removeClass:()=>{},bindOnMDCTabSelectedEvent:()=>{},unbindOnMDCTabSelectedEvent:()=>{},registerResizeHandler:()=>{},deregisterResizeHandler:()=>{},getOffsetWidth:()=>0,setStyleForIndicator:()=>{},getOffsetWidthForIndicator:()=>0,notifyChange:()=>{},getNumberOfTabs:()=>0,isTabActiveAtIndex:()=>false,setTabActiveAtIndex:()=>{},isDefaultPreventedOnClickForTabAtIndex:()=>false,setPreventDefaultOnClickForTabAtIndex:()=>{},measureTabAtIndex:()=>{},getComputedWidthForTabAtIndex:()=>0,getComputedLeftForTabAtIndex:()=>0}}constructor(adapter){super(Object.assign(MDCTabBarFoundation.defaultAdapter,adapter));this.isIndicatorShown_=false;this.computedWidth_=0;this.computedLeft_=0;this.activeTabIndex_=0;this.layoutFrame_=0;this.resizeHandler_=()=>this.layout()}init(){this.adapter_.addClass(cssClasses$2.UPGRADED);this.adapter_.bindOnMDCTabSelectedEvent();this.adapter_.registerResizeHandler(this.resizeHandler_);const activeTabIndex=this.findActiveTabIndex_();if(activeTabIndex>=0){this.activeTabIndex_=activeTabIndex}this.layout()}destroy(){this.adapter_.removeClass(cssClasses$2.UPGRADED);this.adapter_.unbindOnMDCTabSelectedEvent();this.adapter_.deregisterResizeHandler(this.resizeHandler_)}layoutInternal_(){this.forEachTabIndex_(index=>this.adapter_.measureTabAtIndex(index));this.computedWidth_=this.adapter_.getOffsetWidth();this.layoutIndicator_()}layoutIndicator_(){const isIndicatorFirstRender=!this.isIndicatorShown_;if(isIndicatorFirstRender){this.adapter_.setStyleForIndicator('transition','none')}const translateAmtForActiveTabLeft=this.adapter_.getComputedLeftForTabAtIndex(this.activeTabIndex_);const scaleAmtForActiveTabWidth=this.adapter_.getComputedWidthForTabAtIndex(this.activeTabIndex_)/this.adapter_.getOffsetWidth();const transformValue=`translateX(${translateAmtForActiveTabLeft}px) scale(${scaleAmtForActiveTabWidth}, 1)`;this.adapter_.setStyleForIndicator(getCorrectPropertyName(window,'transform'),transformValue);if(isIndicatorFirstRender){this.adapter_.getOffsetWidthForIndicator();this.adapter_.setStyleForIndicator('transition','');this.adapter_.setStyleForIndicator('visibility','visible');this.isIndicatorShown_=true}}findActiveTabIndex_(){let activeTabIndex=-1;this.forEachTabIndex_(index=>{if(this.adapter_.isTabActiveAtIndex(index)){activeTabIndex=index;return true}});return activeTabIndex}forEachTabIndex_(iterator){const numTabs=this.adapter_.getNumberOfTabs();for(let index=0;index<numTabs;index++){const shouldBreak=iterator(index);if(shouldBreak){break}}}layout(){if(this.layoutFrame_){cancelAnimationFrame(this.layoutFrame_)}this.layoutFrame_=requestAnimationFrame(()=>{this.layoutInternal_();this.layoutFrame_=0})}switchToTabAtIndex(index,shouldNotify){if(index===this.activeTabIndex_){return}if(index<0||index>=this.adapter_.getNumberOfTabs()){throw new Error(`Out of bounds index specified for tab: ${index}`)}const prevActiveTabIndex=this.activeTabIndex_;this.activeTabIndex_=index;requestAnimationFrame(()=>{if(prevActiveTabIndex>=0){this.adapter_.setTabActiveAtIndex(prevActiveTabIndex,false)}this.adapter_.setTabActiveAtIndex(this.activeTabIndex_,true);this.layoutIndicator_();if(shouldNotify){this.adapter_.notifyChange({activeTabIndex:this.activeTabIndex_})}})}getActiveTabIndex(){return this.findActiveTabIndex_()}}class MDCTabBar extends MDCComponent{static attachTo(root){return new MDCTabBar(root)}get tabs(){return this.tabs_}get activeTab(){const activeIndex=this.foundation_.getActiveTabIndex();return this.tabs[activeIndex]}set activeTab(tab){this.setActiveTab_(tab,false)}get activeTabIndex(){return this.foundation_.getActiveTabIndex()}set activeTabIndex(index){this.setActiveTabIndex_(index,false)}initialize(tabFactory=el=>new MDCTab(el)){this.indicator_=this.root_.querySelector(MDCTabBarFoundation.strings.INDICATOR_SELECTOR);this.tabs_=this.gatherTabs_(tabFactory);this.tabSelectedHandler_=({detail})=>{const{tab}=detail;this.setActiveTab_(tab,true)}}getDefaultFoundation(){return new MDCTabBarFoundation({addClass:className=>this.root_.classList.add(className),removeClass:className=>this.root_.classList.remove(className),bindOnMDCTabSelectedEvent:()=>this.listen(MDCTabFoundation.strings.SELECTED_EVENT,this.tabSelectedHandler_),unbindOnMDCTabSelectedEvent:()=>this.unlisten(MDCTabFoundation.strings.SELECTED_EVENT,this.tabSelectedHandler_),registerResizeHandler:handler=>window.addEventListener('resize',handler),deregisterResizeHandler:handler=>window.removeEventListener('resize',handler),getOffsetWidth:()=>this.root_.offsetWidth,setStyleForIndicator:(propertyName,value)=>this.indicator_.style.setProperty(propertyName,value),getOffsetWidthForIndicator:()=>this.indicator_.offsetWidth,notifyChange:evtData=>this.emit(MDCTabBarFoundation.strings.CHANGE_EVENT,evtData),getNumberOfTabs:()=>this.tabs.length,isTabActiveAtIndex:index=>this.tabs[index].isActive,setTabActiveAtIndex:(index,isActive)=>{this.tabs[index].isActive=isActive},isDefaultPreventedOnClickForTabAtIndex:index=>this.tabs[index].preventDefaultOnClick,setPreventDefaultOnClickForTabAtIndex:(index,preventDefaultOnClick)=>{this.tabs[index].preventDefaultOnClick=preventDefaultOnClick},measureTabAtIndex:index=>this.tabs[index].measureSelf(),getComputedWidthForTabAtIndex:index=>this.tabs[index].computedWidth,getComputedLeftForTabAtIndex:index=>this.tabs[index].computedLeft})}gatherTabs_(tabFactory){const tabElements=[].slice.call(this.root_.querySelectorAll(MDCTabBarFoundation.strings.TAB_SELECTOR));return tabElements.map(el=>tabFactory(el))}setActiveTabIndex_(activeTabIndex,notifyChange){this.foundation_.switchToTabAtIndex(activeTabIndex,notifyChange)}layout(){this.foundation_.layout()}setActiveTab_(activeTab,notifyChange){const indexOfTab=this.tabs.indexOf(activeTab);if(indexOfTab<0){throw new Error('Invalid tab component given as activeTab: Tab not found within this component\'s tab list')}this.setActiveTabIndex_(indexOfTab,notifyChange)}}const strings$4={ARIA_CONTROLS:'aria-controls',INPUT_SELECTOR:'.mdc-text-field__input',LABEL_SELECTOR:'.mdc-floating-label',ICON_SELECTOR:'.mdc-text-field__icon',OUTLINE_SELECTOR:'.mdc-notched-outline',LINE_RIPPLE_SELECTOR:'.mdc-line-ripple'};const cssClasses$4={ROOT:'mdc-text-field',UPGRADED:'mdc-text-field--upgraded',DISABLED:'mdc-text-field--disabled',DENSE:'mdc-text-field--dense',FOCUSED:'mdc-text-field--focused',INVALID:'mdc-text-field--invalid',BOX:'mdc-text-field--box',OUTLINED:'mdc-text-field--outlined'};const numbers$1={LABEL_SCALE:0.75,DENSE_LABEL_SCALE:0.923};const VALIDATION_ATTR_WHITELIST=['pattern','min','max','required','step','minlength','maxlength'];const strings$5={ARIA_HIDDEN:'aria-hidden',ROLE:'role'};const cssClasses$5={HELPER_TEXT_PERSISTENT:'mdc-text-field-helper-text--persistent',HELPER_TEXT_VALIDATION_MSG:'mdc-text-field-helper-text--validation-msg'};class MDCTextFieldHelperTextFoundation extends MDCFoundation{static get cssClasses(){return cssClasses$5}static get strings(){return strings$5}static get defaultAdapter(){return{addClass:()=>{},removeClass:()=>{},hasClass:()=>{},setAttr:()=>{},removeAttr:()=>{},setContent:()=>{}}}constructor(adapter){super(Object.assign(MDCTextFieldHelperTextFoundation.defaultAdapter,adapter))}setContent(content){this.adapter_.setContent(content)}setPersistent(isPersistent){if(isPersistent){this.adapter_.addClass(cssClasses$5.HELPER_TEXT_PERSISTENT)}else{this.adapter_.removeClass(cssClasses$5.HELPER_TEXT_PERSISTENT)}}setValidation(isValidation){if(isValidation){this.adapter_.addClass(cssClasses$5.HELPER_TEXT_VALIDATION_MSG)}else{this.adapter_.removeClass(cssClasses$5.HELPER_TEXT_VALIDATION_MSG)}}showToScreenReader(){this.adapter_.removeAttr(strings$5.ARIA_HIDDEN)}setValidity(inputIsValid){const helperTextIsPersistent=this.adapter_.hasClass(cssClasses$5.HELPER_TEXT_PERSISTENT);const helperTextIsValidationMsg=this.adapter_.hasClass(cssClasses$5.HELPER_TEXT_VALIDATION_MSG);const validationMsgNeedsDisplay=helperTextIsValidationMsg&&!inputIsValid;if(validationMsgNeedsDisplay){this.adapter_.setAttr(strings$5.ROLE,'alert')}else{this.adapter_.removeAttr(strings$5.ROLE)}if(!helperTextIsPersistent&&!validationMsgNeedsDisplay){this.hide_()}}hide_(){this.adapter_.setAttr(strings$5.ARIA_HIDDEN,'true')}}const strings$6={ICON_EVENT:'MDCTextField:icon',ICON_ROLE:'button'};class MDCTextFieldIconFoundation extends MDCFoundation{static get strings(){return strings$6}static get defaultAdapter(){return{getAttr:()=>{},setAttr:()=>{},removeAttr:()=>{},setContent:()=>{},registerInteractionHandler:()=>{},deregisterInteractionHandler:()=>{},notifyIconAction:()=>{}}}constructor(adapter){super(Object.assign(MDCTextFieldIconFoundation.defaultAdapter,adapter));this.savedTabIndex_=null;this.interactionHandler_=evt=>this.handleInteraction(evt)}init(){this.savedTabIndex_=this.adapter_.getAttr('tabindex');['click','keydown'].forEach(evtType=>{this.adapter_.registerInteractionHandler(evtType,this.interactionHandler_)})}destroy(){['click','keydown'].forEach(evtType=>{this.adapter_.deregisterInteractionHandler(evtType,this.interactionHandler_)})}setDisabled(disabled){if(!this.savedTabIndex_){return}if(disabled){this.adapter_.setAttr('tabindex','-1');this.adapter_.removeAttr('role')}else{this.adapter_.setAttr('tabindex',this.savedTabIndex_);this.adapter_.setAttr('role',strings$6.ICON_ROLE)}}setAriaLabel(label){this.adapter_.setAttr('aria-label',label)}setContent(content){this.adapter_.setContent(content)}handleInteraction(evt){if(evt.type==='click'||evt.key==='Enter'||evt.keyCode===13){this.adapter_.notifyIconAction()}}}class MDCTextFieldFoundation extends MDCFoundation{static get cssClasses(){return cssClasses$4}static get strings(){return strings$4}static get numbers(){return numbers$1}get shouldShake(){return!this.isValid()&&!this.isFocused_}get shouldFloat(){return this.isFocused_||!!this.getValue()||this.isBadInput_()}static get defaultAdapter(){return{addClass:()=>{},removeClass:()=>{},hasClass:()=>{},registerTextFieldInteractionHandler:()=>{},deregisterTextFieldInteractionHandler:()=>{},registerInputInteractionHandler:()=>{},deregisterInputInteractionHandler:()=>{},registerValidationAttributeChangeHandler:()=>{},deregisterValidationAttributeChangeHandler:()=>{},getNativeInput:()=>{},isFocused:()=>{},isRtl:()=>{},activateLineRipple:()=>{},deactivateLineRipple:()=>{},setLineRippleTransformOrigin:()=>{},shakeLabel:()=>{},floatLabel:()=>{},hasLabel:()=>{},getLabelWidth:()=>{},hasOutline:()=>{},notchOutline:()=>{},closeOutline:()=>{}}}constructor(adapter,foundationMap={}){super(Object.assign(MDCTextFieldFoundation.defaultAdapter,adapter));this.helperText_=foundationMap.helperText;this.icon_=foundationMap.icon;this.isFocused_=false;this.receivedUserInput_=false;this.useCustomValidityChecking_=false;this.isValid_=true;this.inputFocusHandler_=()=>this.activateFocus();this.inputBlurHandler_=()=>this.deactivateFocus();this.inputInputHandler_=()=>this.autoCompleteFocus();this.setPointerXOffset_=evt=>this.setTransformOrigin(evt);this.textFieldInteractionHandler_=()=>this.handleTextFieldInteraction();this.validationAttributeChangeHandler_=attributesList=>this.handleValidationAttributeChange(attributesList);this.validationObserver_}init(){this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);if(this.adapter_.hasLabel()&&(this.getValue()||this.isBadInput_())){this.adapter_.floatLabel(this.shouldFloat);this.notchOutline(this.shouldFloat)}if(this.adapter_.isFocused()){this.inputFocusHandler_()}this.adapter_.registerInputInteractionHandler('focus',this.inputFocusHandler_);this.adapter_.registerInputInteractionHandler('blur',this.inputBlurHandler_);this.adapter_.registerInputInteractionHandler('input',this.inputInputHandler_);['mousedown','touchstart'].forEach(evtType=>{this.adapter_.registerInputInteractionHandler(evtType,this.setPointerXOffset_)});['click','keydown'].forEach(evtType=>{this.adapter_.registerTextFieldInteractionHandler(evtType,this.textFieldInteractionHandler_)});this.validationObserver_=this.adapter_.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler_)}destroy(){this.adapter_.removeClass(MDCTextFieldFoundation.cssClasses.UPGRADED);this.adapter_.deregisterInputInteractionHandler('focus',this.inputFocusHandler_);this.adapter_.deregisterInputInteractionHandler('blur',this.inputBlurHandler_);this.adapter_.deregisterInputInteractionHandler('input',this.inputInputHandler_);['mousedown','touchstart'].forEach(evtType=>{this.adapter_.deregisterInputInteractionHandler(evtType,this.setPointerXOffset_)});['click','keydown'].forEach(evtType=>{this.adapter_.deregisterTextFieldInteractionHandler(evtType,this.textFieldInteractionHandler_)});this.adapter_.deregisterValidationAttributeChangeHandler(this.validationObserver_)}handleTextFieldInteraction(){if(this.adapter_.getNativeInput().disabled){return}this.receivedUserInput_=true}handleValidationAttributeChange(attributesList){attributesList.some(attributeName=>{if(VALIDATION_ATTR_WHITELIST.indexOf(attributeName)>-1){this.styleValidity_(true);return true}})}notchOutline(openNotch){if(!this.adapter_.hasOutline()||!this.adapter_.hasLabel()){return}if(openNotch){const isDense=this.adapter_.hasClass(cssClasses$4.DENSE);const labelScale=isDense?numbers$1.DENSE_LABEL_SCALE:numbers$1.LABEL_SCALE;const labelWidth=this.adapter_.getLabelWidth()*labelScale;const isRtl=this.adapter_.isRtl();this.adapter_.notchOutline(labelWidth,isRtl)}else{this.adapter_.closeOutline()}}activateFocus(){this.isFocused_=true;this.styleFocused_(this.isFocused_);this.adapter_.activateLineRipple();this.notchOutline(this.shouldFloat);if(this.adapter_.hasLabel()){this.adapter_.shakeLabel(this.shouldShake);this.adapter_.floatLabel(this.shouldFloat)}if(this.helperText_){this.helperText_.showToScreenReader()}}setTransformOrigin(evt){const targetClientRect=evt.target.getBoundingClientRect();const evtCoords={x:evt.clientX,y:evt.clientY};const normalizedX=evtCoords.x-targetClientRect.left;this.adapter_.setLineRippleTransformOrigin(normalizedX)}autoCompleteFocus(){if(!this.receivedUserInput_){this.activateFocus()}}deactivateFocus(){this.isFocused_=false;this.adapter_.deactivateLineRipple();const input=this.getNativeInput_();const shouldRemoveLabelFloat=!input.value&&!this.isBadInput_();const isValid=this.isValid();this.styleValidity_(isValid);this.styleFocused_(this.isFocused_);if(this.adapter_.hasLabel()){this.adapter_.shakeLabel(this.shouldShake);this.adapter_.floatLabel(this.shouldFloat);this.notchOutline(this.shouldFloat)}if(shouldRemoveLabelFloat){this.receivedUserInput_=false}}getValue(){return this.getNativeInput_().value}setValue(value){this.getNativeInput_().value=value;const isValid=this.isValid();this.styleValidity_(isValid);if(this.adapter_.hasLabel()){this.adapter_.shakeLabel(this.shouldShake);this.adapter_.floatLabel(this.shouldFloat);this.notchOutline(this.shouldFloat)}}isValid(){return this.useCustomValidityChecking_?this.isValid_:this.isNativeInputValid_()}setValid(isValid){this.useCustomValidityChecking_=true;this.isValid_=isValid;isValid=this.isValid();this.styleValidity_(isValid);if(this.adapter_.hasLabel()){this.adapter_.shakeLabel(this.shouldShake)}}isDisabled(){return this.getNativeInput_().disabled}setDisabled(disabled){this.getNativeInput_().disabled=disabled;this.styleDisabled_(disabled)}setHelperTextContent(content){if(this.helperText_){this.helperText_.setContent(content)}}setIconAriaLabel(label){if(this.icon_){this.icon_.setAriaLabel(label)}}setIconContent(content){if(this.icon_){this.icon_.setContent(content)}}isBadInput_(){return this.getNativeInput_().validity.badInput}isNativeInputValid_(){return this.getNativeInput_().validity.valid}styleValidity_(isValid){const{INVALID}=MDCTextFieldFoundation.cssClasses;if(isValid){this.adapter_.removeClass(INVALID)}else{this.adapter_.addClass(INVALID)}if(this.helperText_){this.helperText_.setValidity(isValid)}}styleFocused_(isFocused){const{FOCUSED}=MDCTextFieldFoundation.cssClasses;if(isFocused){this.adapter_.addClass(FOCUSED)}else{this.adapter_.removeClass(FOCUSED)}}styleDisabled_(isDisabled){const{DISABLED,INVALID}=MDCTextFieldFoundation.cssClasses;if(isDisabled){this.adapter_.addClass(DISABLED);this.adapter_.removeClass(INVALID)}else{this.adapter_.removeClass(DISABLED)}if(this.icon_){this.icon_.setDisabled(isDisabled)}}getNativeInput_(){return this.adapter_.getNativeInput()||{value:'',disabled:false,validity:{badInput:false,valid:true}}}}const cssClasses$6={LINE_RIPPLE_ACTIVE:'mdc-line-ripple--active',LINE_RIPPLE_DEACTIVATING:'mdc-line-ripple--deactivating'};class MDCLineRippleFoundation extends MDCFoundation{static get cssClasses(){return cssClasses$6}static get defaultAdapter(){return{addClass:()=>{},removeClass:()=>{},hasClass:()=>{},setStyle:()=>{},registerEventHandler:()=>{},deregisterEventHandler:()=>{}}}constructor(adapter={}){super(Object.assign(MDCLineRippleFoundation.defaultAdapter,adapter));this.transitionEndHandler_=evt=>this.handleTransitionEnd(evt)}init(){this.adapter_.registerEventHandler('transitionend',this.transitionEndHandler_)}destroy(){this.adapter_.deregisterEventHandler('transitionend',this.transitionEndHandler_)}activate(){this.adapter_.removeClass(cssClasses$6.LINE_RIPPLE_DEACTIVATING);this.adapter_.addClass(cssClasses$6.LINE_RIPPLE_ACTIVE)}setRippleCenter(xCoordinate){this.adapter_.setStyle('transform-origin',`${xCoordinate}px center`)}deactivate(){this.adapter_.addClass(cssClasses$6.LINE_RIPPLE_DEACTIVATING)}handleTransitionEnd(evt){const isDeactivating=this.adapter_.hasClass(cssClasses$6.LINE_RIPPLE_DEACTIVATING);if(evt.propertyName==='opacity'){if(isDeactivating){this.adapter_.removeClass(cssClasses$6.LINE_RIPPLE_ACTIVE);this.adapter_.removeClass(cssClasses$6.LINE_RIPPLE_DEACTIVATING)}}}}class MDCLineRipple extends MDCComponent{static attachTo(root){return new MDCLineRipple(root)}activate(){this.foundation_.activate()}deactivate(){this.foundation_.deactivate()}setRippleCenter(xCoordinate){this.foundation_.setRippleCenter(xCoordinate)}getDefaultFoundation(){return new MDCLineRippleFoundation(Object.assign({addClass:className=>this.root_.classList.add(className),removeClass:className=>this.root_.classList.remove(className),hasClass:className=>this.root_.classList.contains(className),setStyle:(propertyName,value)=>this.root_.style[propertyName]=value,registerEventHandler:(evtType,handler)=>this.root_.addEventListener(evtType,handler),deregisterEventHandler:(evtType,handler)=>this.root_.removeEventListener(evtType,handler)}))}}class MDCTextFieldHelperText extends MDCComponent{static attachTo(root){return new MDCTextFieldHelperText(root)}get foundation(){return this.foundation_}getDefaultFoundation(){return new MDCTextFieldHelperTextFoundation(Object.assign({addClass:className=>this.root_.classList.add(className),removeClass:className=>this.root_.classList.remove(className),hasClass:className=>this.root_.classList.contains(className),setAttr:(attr,value)=>this.root_.setAttribute(attr,value),removeAttr:attr=>this.root_.removeAttribute(attr),setContent:content=>{this.root_.textContent=content}}))}}class MDCTextFieldIcon extends MDCComponent{static attachTo(root){return new MDCTextFieldIcon(root)}get foundation(){return this.foundation_}getDefaultFoundation(){return new MDCTextFieldIconFoundation(Object.assign({getAttr:attr=>this.root_.getAttribute(attr),setAttr:(attr,value)=>this.root_.setAttribute(attr,value),removeAttr:attr=>this.root_.removeAttribute(attr),setContent:content=>{this.root_.textContent=content},registerInteractionHandler:(evtType,handler)=>this.root_.addEventListener(evtType,handler),deregisterInteractionHandler:(evtType,handler)=>this.root_.removeEventListener(evtType,handler),notifyIconAction:()=>this.emit(MDCTextFieldIconFoundation.strings.ICON_EVENT,{},true)}))}}const cssClasses$7={LABEL_FLOAT_ABOVE:'mdc-floating-label--float-above',LABEL_SHAKE:'mdc-floating-label--shake'};class MDCFloatingLabelFoundation extends MDCFoundation{static get cssClasses(){return cssClasses$7}static get defaultAdapter(){return{addClass:()=>{},removeClass:()=>{},getWidth:()=>{},registerInteractionHandler:()=>{},deregisterInteractionHandler:()=>{}}}constructor(adapter){super(Object.assign(MDCFloatingLabelFoundation.defaultAdapter,adapter));this.shakeAnimationEndHandler_=()=>this.handleShakeAnimationEnd_()}init(){this.adapter_.registerInteractionHandler('animationend',this.shakeAnimationEndHandler_)}destroy(){this.adapter_.deregisterInteractionHandler('animationend',this.shakeAnimationEndHandler_)}getWidth(){return this.adapter_.getWidth()}shake(shouldShake){const{LABEL_SHAKE}=MDCFloatingLabelFoundation.cssClasses;if(shouldShake){this.adapter_.addClass(LABEL_SHAKE)}else{this.adapter_.removeClass(LABEL_SHAKE)}}float(shouldFloat){const{LABEL_FLOAT_ABOVE,LABEL_SHAKE}=MDCFloatingLabelFoundation.cssClasses;if(shouldFloat){this.adapter_.addClass(LABEL_FLOAT_ABOVE)}else{this.adapter_.removeClass(LABEL_FLOAT_ABOVE);this.adapter_.removeClass(LABEL_SHAKE)}}handleShakeAnimationEnd_(){const{LABEL_SHAKE}=MDCFloatingLabelFoundation.cssClasses;this.adapter_.removeClass(LABEL_SHAKE)}}class MDCFloatingLabel extends MDCComponent{static attachTo(root){return new MDCFloatingLabel(root)}shake(shouldShake){this.foundation_.shake(shouldShake)}float(shouldFloat){this.foundation_.float(shouldFloat)}getWidth(){return this.foundation_.getWidth()}getDefaultFoundation(){return new MDCFloatingLabelFoundation({addClass:className=>this.root_.classList.add(className),removeClass:className=>this.root_.classList.remove(className),getWidth:()=>this.root_.offsetWidth,registerInteractionHandler:(evtType,handler)=>this.root_.addEventListener(evtType,handler),deregisterInteractionHandler:(evtType,handler)=>this.root_.removeEventListener(evtType,handler)})}}const strings$7={PATH_SELECTOR:'.mdc-notched-outline__path',IDLE_OUTLINE_SELECTOR:'.mdc-notched-outline__idle'};const cssClasses$8={OUTLINE_NOTCHED:'mdc-notched-outline--notched'};class MDCNotchedOutlineFoundation extends MDCFoundation{static get strings(){return strings$7}static get cssClasses(){return cssClasses$8}static get defaultAdapter(){return{getWidth:()=>{},getHeight:()=>{},addClass:()=>{},removeClass:()=>{},setOutlinePathAttr:()=>{},getIdleOutlineStyleValue:()=>{}}}constructor(adapter){super(Object.assign(MDCNotchedOutlineFoundation.defaultAdapter,adapter))}notch(notchWidth,isRtl=false){const{OUTLINE_NOTCHED}=MDCNotchedOutlineFoundation.cssClasses;this.adapter_.addClass(OUTLINE_NOTCHED);this.updateSvgPath_(notchWidth,isRtl)}closeNotch(){const{OUTLINE_NOTCHED}=MDCNotchedOutlineFoundation.cssClasses;this.adapter_.removeClass(OUTLINE_NOTCHED)}updateSvgPath_(notchWidth,isRtl){const radiusStyleValue=this.adapter_.getIdleOutlineStyleValue('border-radius')||this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');const radius=parseFloat(radiusStyleValue);const width=this.adapter_.getWidth();const height=this.adapter_.getHeight();const cornerWidth=radius+1.2;const leadingStrokeLength=Math.abs(11-cornerWidth);const paddedNotchWidth=notchWidth+8;const pathMiddle='a'+radius+','+radius+' 0 0 1 '+radius+','+radius+'v'+(height-2*cornerWidth)+'a'+radius+','+radius+' 0 0 1 '+-radius+','+radius+'h'+(-width+2*cornerWidth)+'a'+radius+','+radius+' 0 0 1 '+-radius+','+-radius+'v'+(-height+2*cornerWidth)+'a'+radius+','+radius+' 0 0 1 '+radius+','+-radius;let path;if(!isRtl){path='M'+(cornerWidth+leadingStrokeLength+paddedNotchWidth)+','+1+'h'+(width-2*cornerWidth-paddedNotchWidth-leadingStrokeLength)+pathMiddle+'h'+leadingStrokeLength}else{path='M'+(width-cornerWidth-leadingStrokeLength)+','+1+'h'+leadingStrokeLength+pathMiddle+'h'+(width-2*cornerWidth-paddedNotchWidth-leadingStrokeLength)}this.adapter_.setOutlinePathAttr(path)}}class MDCNotchedOutline extends MDCComponent{static attachTo(root){return new MDCNotchedOutline(root)}notch(notchWidth,isRtl){this.foundation_.notch(notchWidth,isRtl)}closeNotch(){this.foundation_.closeNotch()}getDefaultFoundation(){return new MDCNotchedOutlineFoundation({getWidth:()=>this.root_.offsetWidth,getHeight:()=>this.root_.offsetHeight,addClass:className=>this.root_.classList.add(className),removeClass:className=>this.root_.classList.remove(className),setOutlinePathAttr:value=>{const path=this.root_.querySelector(strings$7.PATH_SELECTOR);path.setAttribute('d',value)},getIdleOutlineStyleValue:propertyName=>{const idleOutlineElement=this.root_.parentNode.querySelector(strings$7.IDLE_OUTLINE_SELECTOR);return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName)}})}}class MDCTextField extends MDCComponent{constructor(...args){super(...args);this.input_;this.ripple;this.lineRipple_;this.helperText_;this.icon_;this.label_;this.outline_}static attachTo(root){return new MDCTextField(root)}initialize(rippleFactory=(el,foundation)=>new MDCRipple(el,foundation),lineRippleFactory=el=>new MDCLineRipple(el),helperTextFactory=el=>new MDCTextFieldHelperText(el),iconFactory=el=>new MDCTextFieldIcon(el),labelFactory=el=>new MDCFloatingLabel(el),outlineFactory=el=>new MDCNotchedOutline(el)){this.input_=this.root_.querySelector(strings$4.INPUT_SELECTOR);const labelElement=this.root_.querySelector(strings$4.LABEL_SELECTOR);if(labelElement){this.label_=labelFactory(labelElement)}const lineRippleElement=this.root_.querySelector(strings$4.LINE_RIPPLE_SELECTOR);if(lineRippleElement){this.lineRipple_=lineRippleFactory(lineRippleElement)}const outlineElement=this.root_.querySelector(strings$4.OUTLINE_SELECTOR);if(outlineElement){this.outline_=outlineFactory(outlineElement)}if(this.input_.hasAttribute(strings$4.ARIA_CONTROLS)){const helperTextElement=document.getElementById(this.input_.getAttribute(strings$4.ARIA_CONTROLS));if(helperTextElement){this.helperText_=helperTextFactory(helperTextElement)}}const iconElement=this.root_.querySelector(strings$4.ICON_SELECTOR);if(iconElement){this.icon_=iconFactory(iconElement)}this.ripple=null;if(this.root_.classList.contains(cssClasses$4.BOX)){const MATCHES=getMatchesProperty(HTMLElement.prototype);const adapter=Object.assign(MDCRipple.createAdapter(this),{isSurfaceActive:()=>this.input_[MATCHES](':active'),registerInteractionHandler:(type,handler)=>this.input_.addEventListener(type,handler),deregisterInteractionHandler:(type,handler)=>this.input_.removeEventListener(type,handler)});const foundation=new MDCRippleFoundation(adapter);this.ripple=rippleFactory(this.root_,foundation)}}destroy(){if(this.ripple){this.ripple.destroy()}if(this.lineRipple_){this.lineRipple_.destroy()}if(this.helperText_){this.helperText_.destroy()}if(this.icon_){this.icon_.destroy()}if(this.label_){this.label_.destroy()}if(this.outline_){this.outline_.destroy()}super.destroy()}initialSyncWithDom(){this.disabled=this.input_.disabled}get value(){return this.foundation_.getValue()}set value(value){this.foundation_.setValue(value)}get disabled(){return this.foundation_.isDisabled()}set disabled(disabled){this.foundation_.setDisabled(disabled)}get valid(){return this.foundation_.isValid()}set valid(valid){this.foundation_.setValid(valid)}get required(){return this.input_.required}set required(required){this.input_.required=required}get pattern(){return this.input_.pattern}set pattern(pattern){this.input_.pattern=pattern}get minLength(){return this.input_.minLength}set minLength(minLength){this.input_.minLength=minLength}get maxLength(){return this.input_.maxLength}set maxLength(maxLength){if(maxLength<0){this.input_.removeAttribute('maxLength')}else{this.input_.maxLength=maxLength}}get min(){return this.input_.min}set min(min){this.input_.min=min}get max(){return this.input_.max}set max(max){this.input_.max=max}get step(){return this.input_.step}set step(step){this.input_.step=step}set helperTextContent(content){this.foundation_.setHelperTextContent(content)}set iconAriaLabel(label){this.foundation_.setIconAriaLabel(label)}set iconContent(content){this.foundation_.setIconContent(content)}layout(){const openNotch=this.foundation_.shouldFloat;this.foundation_.notchOutline(openNotch)}getDefaultFoundation(){return new MDCTextFieldFoundation(Object.assign({addClass:className=>this.root_.classList.add(className),removeClass:className=>this.root_.classList.remove(className),hasClass:className=>this.root_.classList.contains(className),registerTextFieldInteractionHandler:(evtType,handler)=>this.root_.addEventListener(evtType,handler),deregisterTextFieldInteractionHandler:(evtType,handler)=>this.root_.removeEventListener(evtType,handler),registerValidationAttributeChangeHandler:handler=>{const getAttributesList=mutationsList=>mutationsList.map(mutation=>mutation.attributeName);const observer=new MutationObserver(mutationsList=>handler(getAttributesList(mutationsList)));const targetNode=this.root_.querySelector(strings$4.INPUT_SELECTOR);const config={attributes:true};observer.observe(targetNode,config);return observer},deregisterValidationAttributeChangeHandler:observer=>observer.disconnect(),isFocused:()=>{return document.activeElement===this.root_.querySelector(strings$4.INPUT_SELECTOR)},isRtl:()=>window.getComputedStyle(this.root_).getPropertyValue('direction')==='rtl'},this.getInputAdapterMethods_(),this.getLabelAdapterMethods_(),this.getLineRippleAdapterMethods_(),this.getOutlineAdapterMethods_()),this.getFoundationMap_())}getLabelAdapterMethods_(){return{shakeLabel:shouldShake=>this.label_.shake(shouldShake),floatLabel:shouldFloat=>this.label_.float(shouldFloat),hasLabel:()=>!!this.label_,getLabelWidth:()=>this.label_.getWidth()}}getLineRippleAdapterMethods_(){return{activateLineRipple:()=>{if(this.lineRipple_){this.lineRipple_.activate()}},deactivateLineRipple:()=>{if(this.lineRipple_){this.lineRipple_.deactivate()}},setLineRippleTransformOrigin:normalizedX=>{if(this.lineRipple_){this.lineRipple_.setRippleCenter(normalizedX)}}}}getOutlineAdapterMethods_(){return{notchOutline:(labelWidth,isRtl)=>this.outline_.notch(labelWidth,isRtl),closeOutline:()=>this.outline_.closeNotch(),hasOutline:()=>!!this.outline_}}getInputAdapterMethods_(){return{registerInputInteractionHandler:(evtType,handler)=>this.input_.addEventListener(evtType,handler),deregisterInputInteractionHandler:(evtType,handler)=>this.input_.removeEventListener(evtType,handler),getNativeInput:()=>this.input_}}getFoundationMap_(){return{helperText:this.helperText_?this.helperText_.foundation:undefined,icon:this.icon_?this.icon_.foundation:undefined}}}let ripple={MDCRipple};let tabs={MDCTabBar};let textfield={MDCTextField};exports.ripple=ripple;exports.tabs=tabs;exports.textfield=textfield;return exports}({});
|
