Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@material/menu
Advanced tools
@material/menu - npm Package Compare versions
Comparing version 0.29.0 to 0.30.0
@@ -6,3 +6,3 @@ /*! | ||
| */ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.menu=t():(e.mdc=e.mdc||{},e.mdc.menu=t())}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=81)}({0:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r(this,e),this.adapter_=t}return i(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),i(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.a=o},1:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=n(0),o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;r(this,e),this.root_=t;for(var i=arguments.length,o=Array(i>2?i-2:0),a=2;a<i;a++)o[a-2]=arguments[a];this.initialize.apply(this,o),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return o(e,null,[{key:"attachTo",value:function(t){return new e(t,new i.a)}}]),o(e,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=void 0;"function"==typeof CustomEvent?r=new CustomEvent(e,{detail:t,bubbles:n}):(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,n,!1,t)),this.root_.dispatchEvent(r)}}]),e}();t.a=a},10:function(e,t,n){"use strict";function r(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(void 0===s||t){var n=e.document.createElement("div"),r="transform"in n.style?"transform":"webkitTransform";s=r}return s}function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;return Math.min(n,Math.max(t,e))}function o(e,t,n,r,i){return a(u(e,t,r),n,i)}function a(e,t,n){if(0===e||1===e)return e;var r=e*t,i=t+e*(n-t),o=n+e*(1-n);return r+=e*(i-r),i+=e*(o-i),r+e*(i-r)}function u(e,t,n){if(e<=0)return 0;if(e>=1)return 1;for(var r=e,i=0,o=1,u=0,s=0;s<8;s++){u=a(r,t,n);var c=(a(r+1e-6,t,n)-u)/1e-6;if(Math.abs(u-e)<1e-6)return r;if(Math.abs(c)<1e-6)break;u<e?i=r:o=r,r-=(u-e)/c}for(var l=0;Math.abs(u-e)>1e-6&&l<8;l++)u<e?(i=r,r=(r+o)/2):(o=r,r=(r+i)/2),u=a(r,t,n);return r}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"getTransformPropertyName",function(){return r}),n.d(t,"clamp",function(){return i}),n.d(t,"bezierProgress",function(){return o});var s=void 0},11:function(e,t,n){"use strict";n.d(t,"c",function(){return r}),n.d(t,"e",function(){return i}),n.d(t,"d",function(){return o}),n.d(t,"b",function(){return a}),n.d(t,"a",function(){return u});/** | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.menu=t():(e.mdc=e.mdc||{},e.mdc.menu=t())}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=93)}({0:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r(this,e),this.adapter_=t}return i(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),i(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.a=o},1:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=n(0),o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;r(this,e),this.root_=t;for(var i=arguments.length,o=Array(i>2?i-2:0),a=2;a<i;a++)o[a-2]=arguments[a];this.initialize.apply(this,o),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return o(e,null,[{key:"attachTo",value:function(t){return new e(t,new i.a)}}]),o(e,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=void 0;"function"==typeof CustomEvent?r=new CustomEvent(e,{detail:t,bubbles:n}):(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,n,!1,t)),this.root_.dispatchEvent(r)}}]),e}();t.a=a},12:function(e,t,n){"use strict";n.d(t,"c",function(){return r}),n.d(t,"e",function(){return i}),n.d(t,"d",function(){return o}),n.d(t,"b",function(){return a}),n.d(t,"a",function(){return s});/** | ||
| * @license | ||
@@ -23,2 +23,3 @@ * Copyright 2016 Google Inc. All Rights Reserved. | ||
| */ | ||
| var r={ROOT:"mdc-simple-menu",OPEN:"mdc-simple-menu--open",ANIMATING_OPEN:"mdc-simple-menu--animating-open",ANIMATING_CLOSED:"mdc-simple-menu--animating-closed",LIST_ITEM:"mdc-list-item"},i={ITEMS_SELECTOR:".mdc-simple-menu__items",SELECTED_EVENT:"MDCSimpleMenu:selected",CANCEL_EVENT:"MDCSimpleMenu:cancel",ARIA_DISABLED_ATTR:"aria-disabled"},o={SELECTED_TRIGGER_DELAY:50,TRANSITION_OPEN_DURATION:120,TRANSITION_CLOSE_DURATION:75,MARGIN_TO_EDGE:32,ANCHOR_TO_MENU_WIDTH_RATIO:.67,OFFSET_TO_MENU_HEIGHT_RATIO:.1},a={BOTTOM:1,CENTER:2,RIGHT:4,FLIP_RTL:8},u={TOP_LEFT:0,TOP_RIGHT:a.RIGHT,BOTTOM_LEFT:a.BOTTOM,BOTTOM_RIGHT:a.BOTTOM|a.RIGHT,TOP_START:a.FLIP_RTL,TOP_END:a.FLIP_RTL|a.RIGHT,BOTTOM_START:a.BOTTOM|a.FLIP_RTL,BOTTOM_END:a.BOTTOM|a.RIGHT|a.FLIP_RTL}},13:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(10),i=n(15);n.d(t,"MDCSimpleMenu",function(){return i.d}),n.d(t,"MDCSimpleMenuFoundation",function(){return i.e}),n.d(t,"CornerBit",function(){return i.c}),n.d(t,"Corner",function(){return i.b}),n.d(t,"AnchorMargin",function(){return i.a}),n.d(t,"util",function(){return r})},15:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.d(t,"d",function(){return f});var a=n(1),u=n(10),s=n(16),c=n(11);n.d(t,"e",function(){return s.b}),n.d(t,"a",function(){return s.a}),n.d(t,"b",function(){return c.a}),n.d(t,"c",function(){return c.b});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=function(e){function t(){var e;r(this,t);for(var n=arguments.length,o=Array(n),a=0;a<n;a++)o[a]=arguments[a];var u=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));return u.previousFocus_,u}return o(t,e),l(t,[{key:"show",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.focusIndex,n=void 0===t?null:t;this.foundation_.open({focusIndex:n})}},{key:"hide",value:function(){this.foundation_.close()}},{key:"setAnchorCorner",value:function(e){this.foundation_.setAnchorCorner(e)}},{key:"setAnchorMargin",value:function(e){this.foundation_.setAnchorMargin(e)}},{key:"getDefaultFoundation",value:function(){var e=this;return new s.b({addClass:function(t){return e.root_.classList.add(t)},removeClass:function(t){return e.root_.classList.remove(t)},hasClass:function(t){return e.root_.classList.contains(t)},hasNecessaryDom:function(){return Boolean(e.itemsContainer_)},getAttributeForEventTarget:function(e,t){return e.getAttribute(t)},eventTargetHasClass:function(e,t){return e.classList.contains(t)},getInnerDimensions:function(){var t=e.itemsContainer_;return{width:t.offsetWidth,height:t.offsetHeight}},hasAnchor:function(){return e.root_.parentElement&&e.root_.parentElement.classList.contains("mdc-menu-anchor")},getAnchorDimensions:function(){return e.root_.parentElement.getBoundingClientRect()},getWindowDimensions:function(){return{width:window.innerWidth,height:window.innerHeight}},getNumberOfItems:function(){return e.items.length},registerInteractionHandler:function(t,n){return e.root_.addEventListener(t,n)},deregisterInteractionHandler:function(t,n){return e.root_.removeEventListener(t,n)},registerBodyClickHandler:function(e){return document.body.addEventListener("click",e)},deregisterBodyClickHandler:function(e){return document.body.removeEventListener("click",e)},getIndexForEventTarget:function(t){return e.items.indexOf(t)},notifySelected:function(t){return e.emit(s.b.strings.SELECTED_EVENT,{index:t.index,item:e.items[t.index]})},notifyCancel:function(){return e.emit(s.b.strings.CANCEL_EVENT,{})},saveFocus:function(){e.previousFocus_=document.activeElement},restoreFocus:function(){e.previousFocus_&&e.previousFocus_.focus()},isFocused:function(){return document.activeElement===e.root_},focus:function(){return e.root_.focus()},getFocusedItemIndex:function(){return e.items.indexOf(document.activeElement)},focusItemAtIndex:function(t){return e.items[t].focus()},isRtl:function(){return"rtl"===getComputedStyle(e.root_).getPropertyValue("direction")},setTransformOrigin:function(t){e.root_.style[Object(u.getTransformPropertyName)(window)+"-origin"]=t},setPosition:function(t){e.root_.style.left="left"in t?t.left:null,e.root_.style.right="right"in t?t.right:null,e.root_.style.top="top"in t?t.top:null,e.root_.style.bottom="bottom"in t?t.bottom:null},setMaxHeight:function(t){e.root_.style.maxHeight=t}})}},{key:"open",get:function(){return this.foundation_.isOpen()},set:function(e){e?this.foundation_.open():this.foundation_.close()}},{key:"itemsContainer_",get:function(){return this.root_.querySelector(s.b.strings.ITEMS_SELECTOR)}},{key:"items",get:function(){var e=this.itemsContainer_;return[].slice.call(e.querySelectorAll(".mdc-list-item[role]"))}}],[{key:"attachTo",value:function(e){return new t(e)}}]),t}(a.a)},16:function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.d(t,"b",function(){return d}),n.d(t,"a",function(){return f});var u=n(0),s=(n(17),n(11)),c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=void 0,d=function(e){function t(e){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,c(t.defaultAdapter,e)));return n.clickHandler_=function(e){return n.handlePossibleSelected_(e)},n.keydownHandler_=function(e){return n.handleKeyboardDown_(e)},n.keyupHandler_=function(e){return n.handleKeyboardUp_(e)},n.documentClickHandler_=function(e){return n.handleDocumentClick_(e)},n.isOpen_=!1,n.openAnimationEndTimerId_=0,n.closeAnimationEndTimerId_=0,n.selectedTriggerTimerId_=0,n.animationRequestId_=0,n.dimensions_,n.itemHeight_,n.anchorCorner_=s.a.TOP_START,n.anchorMargin_={top:0,right:0,bottom:0,left:0},n.measures_=null,n}return a(t,e),l(t,null,[{key:"cssClasses",get:function(){return s.c}},{key:"strings",get:function(){return s.e}},{key:"numbers",get:function(){return s.d}},{key:"Corner",get:function(){return s.a}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},hasClass:function(){return!1},hasNecessaryDom:function(){return!1},getAttributeForEventTarget:function(){},eventTargetHasClass:function(){},getInnerDimensions:function(){return{}},hasAnchor:function(){return!1},getAnchorDimensions:function(){return{}},getWindowDimensions:function(){return{}},getNumberOfItems:function(){return 0},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerBodyClickHandler:function(){},deregisterBodyClickHandler:function(){},getIndexForEventTarget:function(){return 0},notifySelected:function(){},notifyCancel:function(){},saveFocus:function(){},restoreFocus:function(){},isFocused:function(){return!1},focus:function(){},getFocusedItemIndex:function(){return-1},focusItemAtIndex:function(){},isRtl:function(){return!1},setTransformOrigin:function(){},setPosition:function(){},setMaxHeight:function(){}}}}]),l(t,[{key:"init",value:function(){var e=t.cssClasses,n=e.ROOT,r=e.OPEN;if(!this.adapter_.hasClass(n))throw new Error(n+" class required in root element.");if(!this.adapter_.hasNecessaryDom())throw new Error("Required DOM nodes missing in "+n+" component.");this.adapter_.hasClass(r)&&(this.isOpen_=!0),this.adapter_.registerInteractionHandler("click",this.clickHandler_),this.adapter_.registerInteractionHandler("keyup",this.keyupHandler_),this.adapter_.registerInteractionHandler("keydown",this.keydownHandler_)}},{key:"destroy",value:function(){clearTimeout(this.selectedTriggerTimerId_),clearTimeout(this.openAnimationEndTimerId_),clearTimeout(this.closeAnimationEndTimerId_),cancelAnimationFrame(this.animationRequestId_),this.adapter_.deregisterInteractionHandler("click",this.clickHandler_),this.adapter_.deregisterInteractionHandler("keyup",this.keyupHandler_),this.adapter_.deregisterInteractionHandler("keydown",this.keydownHandler_),this.adapter_.deregisterBodyClickHandler(this.documentClickHandler_)}},{key:"setAnchorCorner",value:function(e){this.anchorCorner_=e}},{key:"setAnchorMargin",value:function(e){this.anchorMargin_.top="number"==typeof e.top?e.top:0,this.anchorMargin_.right="number"==typeof e.right?e.right:0,this.anchorMargin_.bottom="number"==typeof e.bottom?e.bottom:0,this.anchorMargin_.left="number"==typeof e.left?e.left:0}},{key:"focusOnOpen_",value:function(e){null===e?(this.adapter_.focus(),this.adapter_.isFocused()||this.adapter_.focusItemAtIndex(0)):this.adapter_.focusItemAtIndex(e)}},{key:"handleDocumentClick_",value:function(e){for(var t=e.target;t&&t!==document.documentElement;){if(this.adapter_.eventTargetHasClass(t,s.c.LIST_ITEM))return;t=t.parentNode}this.adapter_.notifyCancel(),this.close(e)}},{key:"handleKeyboardDown_",value:function(e){if(e.altKey||e.ctrlKey||e.metaKey)return!0;var t=e.keyCode,n=e.key,r=e.shiftKey,i="Tab"===n||9===t,o="ArrowUp"===n||38===t,a="ArrowDown"===n||40===t,u="Space"===n||32===t,s=this.adapter_.getFocusedItemIndex(),c=this.adapter_.getNumberOfItems()-1;return r&&i&&0===s?(this.adapter_.focusItemAtIndex(c),e.preventDefault(),!1):!r&&i&&s===c?(this.adapter_.focusItemAtIndex(0),e.preventDefault(),!1):((o||a||u)&&e.preventDefault(),o?0===s||this.adapter_.isFocused()?this.adapter_.focusItemAtIndex(c):this.adapter_.focusItemAtIndex(s-1):a&&(s===c||this.adapter_.isFocused()?this.adapter_.focusItemAtIndex(0):this.adapter_.focusItemAtIndex(s+1)),!0)}},{key:"handleKeyboardUp_",value:function(e){if(e.altKey||e.ctrlKey||e.metaKey)return!0;var t=e.keyCode,n=e.key,r="Enter"===n||13===t,i="Space"===n||32===t,o="Escape"===n||27===t;return(r||i)&&this.handlePossibleSelected_(e),o&&(this.adapter_.notifyCancel(),this.close()),!0}},{key:"handlePossibleSelected_",value:function(e){var t=this;if("true"!==this.adapter_.getAttributeForEventTarget(e.target,s.e.ARIA_DISABLED_ATTR)){var n=this.adapter_.getIndexForEventTarget(e.target);n<0||this.selectedTriggerTimerId_||(this.selectedTriggerTimerId_=setTimeout(function(){t.selectedTriggerTimerId_=0,t.close(),t.adapter_.notifySelected({index:n})},s.d.SELECTED_TRIGGER_DELAY))}}},{key:"getAutoLayoutMeasurements_",value:function(){var e=this.adapter_.getAnchorDimensions(),t=this.adapter_.getWindowDimensions();return{viewport:t,viewportDistance:{top:e.top,right:t.width-e.right,left:e.left,bottom:t.height-e.bottom},anchorHeight:e.height,anchorWidth:e.width,menuHeight:this.dimensions_.height,menuWidth:this.dimensions_.width}}},{key:"getOriginCorner_",value:function(){var e=s.a.TOP_LEFT,t=this.measures_,n=t.viewportDistance,r=t.anchorHeight,i=t.anchorWidth,o=t.menuHeight,a=t.menuWidth,u=Boolean(this.anchorCorner_&s.b.BOTTOM),c=u?n.top+r+this.anchorMargin_.bottom:n.top+this.anchorMargin_.top,l=u?n.bottom-this.anchorMargin_.bottom:n.bottom+r-this.anchorMargin_.top,f=o-c,d=o-l;d>0&&f<d&&(e|=s.b.BOTTOM);var h=this.adapter_.isRtl(),_=Boolean(this.anchorCorner_&s.b.FLIP_RTL),m=Boolean(this.anchorCorner_&s.b.RIGHT),g=m&&!h||!m&&_&&h,p=g?n.left+i+this.anchorMargin_.right:n.left+this.anchorMargin_.left,v=g?n.right-this.anchorMargin_.right:n.right+i-this.anchorMargin_.left,y=a-p,T=a-v;return(y<0&&g&&h||m&&!g&&y<0||T>0&&y<T)&&(e|=s.b.RIGHT),e}},{key:"getHorizontalOriginOffset_",value:function(e){var t=this.measures_.anchorWidth,n=Boolean(e&s.b.RIGHT),r=Boolean(this.anchorCorner_&s.b.RIGHT),i=0;if(n){i=r?t-this.anchorMargin_.left:this.anchorMargin_.right}else{i=r?t-this.anchorMargin_.right:this.anchorMargin_.left}return i}},{key:"getVerticalOriginOffset_",value:function(e){var n=this.measures_,r=n.viewport,i=n.viewportDistance,o=n.anchorHeight,a=n.menuHeight,u=Boolean(e&s.b.BOTTOM),c=t.numbers.MARGIN_TO_EDGE,l=Boolean(this.anchorCorner_&s.b.BOTTOM),f=!l,d=0;return u?(d=l?o-this.anchorMargin_.top:-this.anchorMargin_.bottom,f&&a>i.top+o&&(d=-(Math.min(a,r.height-c)-(i.top+o)))):(d=l?o+this.anchorMargin_.bottom:this.anchorMargin_.top,f&&a>i.bottom+o&&(d=-(Math.min(a,r.height-c)-(i.bottom+o)))),d}},{key:"getMenuMaxHeight_",value:function(e){var t=0,n=this.measures_.viewportDistance,r=Boolean(e&s.b.BOTTOM);return this.anchorCorner_&s.b.BOTTOM&&(t=r?n.top+this.anchorMargin_.top:n.bottom-this.anchorMargin_.bottom),t}},{key:"autoPosition_",value:function(){var e;if(this.adapter_.hasAnchor()){this.measures_=this.getAutoLayoutMeasurements_();var t=this.getOriginCorner_(),n=this.getMenuMaxHeight_(t),i=t&s.b.BOTTOM?"bottom":"top",o=t&s.b.RIGHT?"right":"left",a=this.getHorizontalOriginOffset_(t),u=this.getVerticalOriginOffset_(t),c=(e={},r(e,o,a?a+"px":"0"),r(e,i,u?u+"px":"0"),e),l=this.measures_,f=l.anchorWidth,d=l.menuHeight;if(f/l.menuWidth>s.d.ANCHOR_TO_MENU_WIDTH_RATIO&&(o="center"),!(this.anchorCorner_&s.b.BOTTOM)&&Math.abs(u/d)>s.d.OFFSET_TO_MENU_HEIGHT_RATIO){var h=100*Math.abs(u/d),_=t&s.b.BOTTOM?100-h:h;i=Math.round(100*_)/100+"%"}this.adapter_.setTransformOrigin(o+" "+i),this.adapter_.setPosition(c),this.adapter_.setMaxHeight(n?n+"px":""),this.measures_=null}}},{key:"open",value:function(){var e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.focusIndex,i=void 0===r?null:r;this.adapter_.saveFocus(),this.adapter_.addClass(t.cssClasses.ANIMATING_OPEN),this.animationRequestId_=requestAnimationFrame(function(){e.dimensions_=e.adapter_.getInnerDimensions(),e.autoPosition_(),e.adapter_.addClass(t.cssClasses.OPEN),e.focusOnOpen_(i),e.adapter_.registerBodyClickHandler(e.documentClickHandler_),e.openAnimationEndTimerId_=setTimeout(function(){e.openAnimationEndTimerId_=0,e.adapter_.removeClass(t.cssClasses.ANIMATING_OPEN)},s.d.TRANSITION_OPEN_DURATION)}),this.isOpen_=!0}},{key:"close",value:function(){var e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;!!n&&"true"===this.adapter_.getAttributeForEventTarget(n.target,s.e.ARIA_DISABLED_ATTR)||(this.adapter_.deregisterBodyClickHandler(this.documentClickHandler_),this.adapter_.addClass(t.cssClasses.ANIMATING_CLOSED),requestAnimationFrame(function(){e.adapter_.removeClass(t.cssClasses.OPEN),e.closeAnimationEndTimerId_=setTimeout(function(){e.closeAnimationEndTimerId_=0,e.adapter_.removeClass(t.cssClasses.ANIMATING_CLOSED)},s.d.TRANSITION_CLOSE_DURATION)}),this.isOpen_=!1,this.adapter_.restoreFocus())}},{key:"isOpen",value:function(){return this.isOpen_}}]),t}(u.a)},17:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();!function(){function e(){r(this,e)}i(e,[{key:"addClass",value:function(e){}},{key:"removeClass",value:function(e){}},{key:"hasClass",value:function(e){}},{key:"hasNecessaryDom",value:function(){}},{key:"getAttributeForEventTarget",value:function(e,t){}},{key:"eventTargetHasClass",value:function(e,t){}},{key:"getInnerDimensions",value:function(){}},{key:"hasAnchor",value:function(){}},{key:"getAnchorDimensions",value:function(){}},{key:"getWindowDimensions",value:function(){}},{key:"getNumberOfItems",value:function(){}},{key:"registerInteractionHandler",value:function(e,t){}},{key:"deregisterInteractionHandler",value:function(e,t){}},{key:"registerBodyClickHandler",value:function(e){}},{key:"deregisterBodyClickHandler",value:function(e){}},{key:"getIndexForEventTarget",value:function(e){}},{key:"notifySelected",value:function(e){}},{key:"notifyCancel",value:function(){}},{key:"saveFocus",value:function(){}},{key:"restoreFocus",value:function(){}},{key:"isFocused",value:function(){}},{key:"focus",value:function(){}},{key:"getFocusedItemIndex",value:function(){}},{key:"focusItemAtIndex",value:function(e){}},{key:"isRtl",value:function(){}},{key:"setTransformOrigin",value:function(e){}},{key:"setPosition",value:function(e){}},{key:"setMaxHeight",value:function(e){}}])}()},81:function(e,t,n){e.exports=n(13)}})}); | ||
| var r={ROOT:"mdc-menu",OPEN:"mdc-menu--open",ANIMATING_OPEN:"mdc-menu--animating-open",ANIMATING_CLOSED:"mdc-menu--animating-closed",SELECTED_LIST_ITEM:"mdc-list-item--selected"},i={ITEMS_SELECTOR:".mdc-menu__items",SELECTED_EVENT:"MDCMenu:selected",CANCEL_EVENT:"MDCMenu:cancel",ARIA_DISABLED_ATTR:"aria-disabled"},o={SELECTED_TRIGGER_DELAY:50,TRANSITION_OPEN_DURATION:120,TRANSITION_CLOSE_DURATION:75,MARGIN_TO_EDGE:32,ANCHOR_TO_MENU_WIDTH_RATIO:.67,OFFSET_TO_MENU_HEIGHT_RATIO:.1},a={BOTTOM:1,CENTER:2,RIGHT:4,FLIP_RTL:8},s={TOP_LEFT:0,TOP_RIGHT:a.RIGHT,BOTTOM_LEFT:a.BOTTOM,BOTTOM_RIGHT:a.BOTTOM|a.RIGHT,TOP_START:a.FLIP_RTL,TOP_END:a.FLIP_RTL|a.RIGHT,BOTTOM_START:a.BOTTOM|a.FLIP_RTL,BOTTOM_END:a.BOTTOM|a.RIGHT|a.FLIP_RTL}},14:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"MDCMenu",function(){return d});var a=n(1),s=n(18),u=n(19),c=n(12);n.d(t,"MDCMenuFoundation",function(){return u.b}),n.d(t,"AnchorMargin",function(){return u.a}),n.d(t,"Corner",function(){return c.a}),n.d(t,"CornerBit",function(){return c.b});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),d=function(e){function t(){var e;r(this,t);for(var n=arguments.length,o=Array(n),a=0;a<n;a++)o[a]=arguments[a];var s=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));return s.previousFocus_,s}return o(t,e),l(t,[{key:"show",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.focusIndex,n=void 0===t?null:t;this.foundation_.open({focusIndex:n})}},{key:"hide",value:function(){this.foundation_.close()}},{key:"setAnchorCorner",value:function(e){this.foundation_.setAnchorCorner(e)}},{key:"setAnchorMargin",value:function(e){this.foundation_.setAnchorMargin(e)}},{key:"getOptionByIndex",value:function(e){return e<this.items.length?this.items[e]:null}},{key:"getDefaultFoundation",value:function(){var e=this;return new u.b({addClass:function(t){return e.root_.classList.add(t)},removeClass:function(t){return e.root_.classList.remove(t)},hasClass:function(t){return e.root_.classList.contains(t)},hasNecessaryDom:function(){return Boolean(e.itemsContainer_)},getAttributeForEventTarget:function(e,t){return e.getAttribute(t)},getInnerDimensions:function(){var t=e.itemsContainer_;return{width:t.offsetWidth,height:t.offsetHeight}},hasAnchor:function(){return e.root_.parentElement&&e.root_.parentElement.classList.contains("mdc-menu-anchor")},getAnchorDimensions:function(){return e.root_.parentElement.getBoundingClientRect()},getWindowDimensions:function(){return{width:window.innerWidth,height:window.innerHeight}},getNumberOfItems:function(){return e.items.length},registerInteractionHandler:function(t,n){return e.root_.addEventListener(t,n)},deregisterInteractionHandler:function(t,n){return e.root_.removeEventListener(t,n)},registerBodyClickHandler:function(e){return document.body.addEventListener("click",e)},deregisterBodyClickHandler:function(e){return document.body.removeEventListener("click",e)},getIndexForEventTarget:function(t){return e.items.indexOf(t)},notifySelected:function(t){return e.emit(u.b.strings.SELECTED_EVENT,{index:t.index,item:e.items[t.index]})},notifyCancel:function(){return e.emit(u.b.strings.CANCEL_EVENT,{})},saveFocus:function(){e.previousFocus_=document.activeElement},restoreFocus:function(){e.previousFocus_&&e.previousFocus_.focus()},isFocused:function(){return document.activeElement===e.root_},focus:function(){return e.root_.focus()},getFocusedItemIndex:function(){return e.items.indexOf(document.activeElement)},focusItemAtIndex:function(t){return e.items[t].focus()},isRtl:function(){return"rtl"===getComputedStyle(e.root_).getPropertyValue("direction")},setTransformOrigin:function(t){e.root_.style[Object(s.a)(window)+"-origin"]=t},setPosition:function(t){e.root_.style.left="left"in t?t.left:null,e.root_.style.right="right"in t?t.right:null,e.root_.style.top="top"in t?t.top:null,e.root_.style.bottom="bottom"in t?t.bottom:null},setMaxHeight:function(t){e.root_.style.maxHeight=t},setAttrForOptionAtIndex:function(t,n,r){return e.items[t].setAttribute(n,r)},rmAttrForOptionAtIndex:function(t,n){return e.items[t].removeAttribute(n)},addClassForOptionAtIndex:function(t,n){return e.items[t].classList.add(n)},rmClassForOptionAtIndex:function(t,n){return e.items[t].classList.remove(n)}})}},{key:"open",get:function(){return this.foundation_.isOpen()},set:function(e){e?this.foundation_.open():this.foundation_.close()}},{key:"itemsContainer_",get:function(){return this.root_.querySelector(u.b.strings.ITEMS_SELECTOR)}},{key:"items",get:function(){var e=this.itemsContainer_;return[].slice.call(e.querySelectorAll(".mdc-list-item[role]"))}},{key:"selectedItemIndex",set:function(e){this.foundation_.setSelectedIndex(e)},get:function(){return this.foundation_.getSelectedIndex()}},{key:"rememberSelection",set:function(e){this.foundation_.setRememberSelection(e)}},{key:"quickOpen",set:function(e){this.foundation_.setQuickOpen(e)}}],[{key:"attachTo",value:function(e){return new t(e)}}]),t}(a.a)},18:function(e,t,n){"use strict";function r(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(void 0===i||t){var n=e.document.createElement("div"),r="transform"in n.style?"transform":"webkitTransform";i=r}return i}n.d(t,"a",function(){return r});var i=void 0},19:function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.d(t,"b",function(){return f}),n.d(t,"a",function(){return d});var s=n(0),u=(n(20),n(12)),c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),d=void 0,f=function(e){function t(e){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,c(t.defaultAdapter,e)));return n.clickHandler_=function(e){return n.handlePossibleSelected_(e)},n.keydownHandler_=function(e){return n.handleKeyboardDown_(e)},n.keyupHandler_=function(e){return n.handleKeyboardUp_(e)},n.documentClickHandler_=function(e){return n.handleDocumentClick_(e)},n.isOpen_=!1,n.openAnimationEndTimerId_=0,n.closeAnimationEndTimerId_=0,n.selectedTriggerTimerId_=0,n.animationRequestId_=0,n.dimensions_,n.itemHeight_,n.anchorCorner_=u.a.TOP_START,n.anchorMargin_={top:0,right:0,bottom:0,left:0},n.measures_=null,n.selectedIndex_=-1,n.rememberSelection_=!1,n.quickOpen_=!1,n.keyDownWithinMenu_=!1,n}return a(t,e),l(t,null,[{key:"cssClasses",get:function(){return u.c}},{key:"strings",get:function(){return u.e}},{key:"numbers",get:function(){return u.d}},{key:"Corner",get:function(){return u.a}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},hasClass:function(){return!1},hasNecessaryDom:function(){return!1},getAttributeForEventTarget:function(){},getInnerDimensions:function(){return{}},hasAnchor:function(){return!1},getAnchorDimensions:function(){return{}},getWindowDimensions:function(){return{}},getNumberOfItems:function(){return 0},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerBodyClickHandler:function(){},deregisterBodyClickHandler:function(){},getIndexForEventTarget:function(){return 0},notifySelected:function(){},notifyCancel:function(){},saveFocus:function(){},restoreFocus:function(){},isFocused:function(){return!1},focus:function(){},getFocusedItemIndex:function(){return-1},focusItemAtIndex:function(){},isRtl:function(){return!1},setTransformOrigin:function(){},setPosition:function(){},setMaxHeight:function(){},setAttrForOptionAtIndex:function(){},rmAttrForOptionAtIndex:function(){},addClassForOptionAtIndex:function(){},rmClassForOptionAtIndex:function(){}}}}]),l(t,[{key:"init",value:function(){var e=t.cssClasses,n=e.ROOT,r=e.OPEN;if(!this.adapter_.hasClass(n))throw new Error(n+" class required in root element.");if(!this.adapter_.hasNecessaryDom())throw new Error("Required DOM nodes missing in "+n+" component.");this.adapter_.hasClass(r)&&(this.isOpen_=!0),this.adapter_.registerInteractionHandler("click",this.clickHandler_),this.adapter_.registerInteractionHandler("keyup",this.keyupHandler_),this.adapter_.registerInteractionHandler("keydown",this.keydownHandler_)}},{key:"destroy",value:function(){clearTimeout(this.selectedTriggerTimerId_),clearTimeout(this.openAnimationEndTimerId_),clearTimeout(this.closeAnimationEndTimerId_),cancelAnimationFrame(this.animationRequestId_),this.adapter_.deregisterInteractionHandler("click",this.clickHandler_),this.adapter_.deregisterInteractionHandler("keyup",this.keyupHandler_),this.adapter_.deregisterInteractionHandler("keydown",this.keydownHandler_),this.adapter_.deregisterBodyClickHandler(this.documentClickHandler_)}},{key:"setAnchorCorner",value:function(e){this.anchorCorner_=e}},{key:"setAnchorMargin",value:function(e){this.anchorMargin_.top="number"==typeof e.top?e.top:0,this.anchorMargin_.right="number"==typeof e.right?e.right:0,this.anchorMargin_.bottom="number"==typeof e.bottom?e.bottom:0,this.anchorMargin_.left="number"==typeof e.left?e.left:0}},{key:"setRememberSelection",value:function(e){this.rememberSelection_=e,this.setSelectedIndex(-1)}},{key:"setQuickOpen",value:function(e){this.quickOpen_=e}},{key:"focusOnOpen_",value:function(e){if(null===e){if(this.rememberSelection_&&this.selectedIndex_>=0)return void this.adapter_.focusItemAtIndex(this.selectedIndex_);this.adapter_.focus(),this.adapter_.isFocused()||this.adapter_.focusItemAtIndex(0)}else this.adapter_.focusItemAtIndex(e)}},{key:"handleDocumentClick_",value:function(e){for(var t=e.target;t&&t!==document.documentElement;){if(-1!==this.adapter_.getIndexForEventTarget(t))return;t=t.parentNode}this.adapter_.notifyCancel(),this.close(e)}},{key:"handleKeyboardDown_",value:function(e){if(e.altKey||e.ctrlKey||e.metaKey)return!0;var t=e.keyCode,n=e.key,r=e.shiftKey,i="Tab"===n||9===t,o="ArrowUp"===n||38===t,a="ArrowDown"===n||40===t,s="Space"===n||32===t,u="Enter"===n||13===t;this.keyDownWithinMenu_=u||s;var c=this.adapter_.getFocusedItemIndex(),l=this.adapter_.getNumberOfItems()-1;return r&&i&&0===c?(this.adapter_.focusItemAtIndex(l),e.preventDefault(),!1):!r&&i&&c===l?(this.adapter_.focusItemAtIndex(0),e.preventDefault(),!1):((o||a||s)&&e.preventDefault(),o?0===c||this.adapter_.isFocused()?this.adapter_.focusItemAtIndex(l):this.adapter_.focusItemAtIndex(c-1):a&&(c===l||this.adapter_.isFocused()?this.adapter_.focusItemAtIndex(0):this.adapter_.focusItemAtIndex(c+1)),!0)}},{key:"handleKeyboardUp_",value:function(e){if(e.altKey||e.ctrlKey||e.metaKey)return!0;var t=e.keyCode,n=e.key,r="Enter"===n||13===t,i="Space"===n||32===t,o="Escape"===n||27===t;return(r||i)&&(this.keyDownWithinMenu_&&this.handlePossibleSelected_(e),this.keyDownWithinMenu_=!1),o&&(this.adapter_.notifyCancel(),this.close()),!0}},{key:"handlePossibleSelected_",value:function(e){var t=this;if("true"!==this.adapter_.getAttributeForEventTarget(e.target,u.e.ARIA_DISABLED_ATTR)){var n=this.adapter_.getIndexForEventTarget(e.target);n<0||this.selectedTriggerTimerId_||(this.selectedTriggerTimerId_=setTimeout(function(){t.selectedTriggerTimerId_=0,t.close(),t.rememberSelection_&&t.setSelectedIndex(n),t.adapter_.notifySelected({index:n})},u.d.SELECTED_TRIGGER_DELAY))}}},{key:"getAutoLayoutMeasurements_",value:function(){var e=this.adapter_.getAnchorDimensions(),t=this.adapter_.getWindowDimensions();return{viewport:t,viewportDistance:{top:e.top,right:t.width-e.right,left:e.left,bottom:t.height-e.bottom},anchorHeight:e.height,anchorWidth:e.width,menuHeight:this.dimensions_.height,menuWidth:this.dimensions_.width}}},{key:"getOriginCorner_",value:function(){var e=u.a.TOP_LEFT,t=this.measures_,n=t.viewportDistance,r=t.anchorHeight,i=t.anchorWidth,o=t.menuHeight,a=t.menuWidth,s=Boolean(this.anchorCorner_&u.b.BOTTOM),c=s?n.top+r+this.anchorMargin_.bottom:n.top+this.anchorMargin_.top,l=s?n.bottom-this.anchorMargin_.bottom:n.bottom+r-this.anchorMargin_.top,d=o-c,f=o-l;f>0&&d<f&&(e|=u.b.BOTTOM);var h=this.adapter_.isRtl(),_=Boolean(this.anchorCorner_&u.b.FLIP_RTL),m=Boolean(this.anchorCorner_&u.b.RIGHT),p=m&&!h||!m&&_&&h,g=p?n.left+i+this.anchorMargin_.right:n.left+this.anchorMargin_.left,y=p?n.right-this.anchorMargin_.right:n.right+i-this.anchorMargin_.left,v=a-g,T=a-y;return(v<0&&p&&h||m&&!p&&v<0||T>0&&v<T)&&(e|=u.b.RIGHT),e}},{key:"getHorizontalOriginOffset_",value:function(e){var t=this.measures_.anchorWidth,n=Boolean(e&u.b.RIGHT),r=Boolean(this.anchorCorner_&u.b.RIGHT),i=0;if(n){i=r?t-this.anchorMargin_.left:this.anchorMargin_.right}else{i=r?t-this.anchorMargin_.right:this.anchorMargin_.left}return i}},{key:"getVerticalOriginOffset_",value:function(e){var n=this.measures_,r=n.viewport,i=n.viewportDistance,o=n.anchorHeight,a=n.menuHeight,s=Boolean(e&u.b.BOTTOM),c=t.numbers.MARGIN_TO_EDGE,l=Boolean(this.anchorCorner_&u.b.BOTTOM),d=!l,f=0;return s?(f=l?o-this.anchorMargin_.top:-this.anchorMargin_.bottom,d&&a>i.top+o&&(f=-(Math.min(a,r.height-c)-(i.top+o)))):(f=l?o+this.anchorMargin_.bottom:this.anchorMargin_.top,d&&a>i.bottom+o&&(f=-(Math.min(a,r.height-c)-(i.bottom+o)))),f}},{key:"getMenuMaxHeight_",value:function(e){var t=0,n=this.measures_.viewportDistance,r=Boolean(e&u.b.BOTTOM);return this.anchorCorner_&u.b.BOTTOM&&(t=r?n.top+this.anchorMargin_.top:n.bottom-this.anchorMargin_.bottom),t}},{key:"autoPosition_",value:function(){var e;if(this.adapter_.hasAnchor()){this.measures_=this.getAutoLayoutMeasurements_();var t=this.getOriginCorner_(),n=this.getMenuMaxHeight_(t),i=t&u.b.BOTTOM?"bottom":"top",o=t&u.b.RIGHT?"right":"left",a=this.getHorizontalOriginOffset_(t),s=this.getVerticalOriginOffset_(t),c=(e={},r(e,o,a?a+"px":"0"),r(e,i,s?s+"px":"0"),e),l=this.measures_,d=l.anchorWidth,f=l.menuHeight;if(d/l.menuWidth>u.d.ANCHOR_TO_MENU_WIDTH_RATIO&&(o="center"),!(this.anchorCorner_&u.b.BOTTOM)&&Math.abs(s/f)>u.d.OFFSET_TO_MENU_HEIGHT_RATIO){var h=100*Math.abs(s/f),_=t&u.b.BOTTOM?100-h:h;i=Math.round(100*_)/100+"%"}this.adapter_.setTransformOrigin(o+" "+i),this.adapter_.setPosition(c),this.adapter_.setMaxHeight(n?n+"px":""),this.measures_=null}}},{key:"open",value:function(){var e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.focusIndex,i=void 0===r?null:r;this.adapter_.saveFocus(),this.quickOpen_||this.adapter_.addClass(t.cssClasses.ANIMATING_OPEN),this.animationRequestId_=requestAnimationFrame(function(){e.dimensions_=e.adapter_.getInnerDimensions(),e.autoPosition_(),e.adapter_.addClass(t.cssClasses.OPEN),e.focusOnOpen_(i),e.adapter_.registerBodyClickHandler(e.documentClickHandler_),e.quickOpen_||(e.openAnimationEndTimerId_=setTimeout(function(){e.openAnimationEndTimerId_=0,e.adapter_.removeClass(t.cssClasses.ANIMATING_OPEN)},u.d.TRANSITION_OPEN_DURATION))}),this.isOpen_=!0}},{key:"close",value:function(){var e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;!!n&&"true"===this.adapter_.getAttributeForEventTarget(n.target,u.e.ARIA_DISABLED_ATTR)||(this.adapter_.deregisterBodyClickHandler(this.documentClickHandler_),this.quickOpen_||this.adapter_.addClass(t.cssClasses.ANIMATING_CLOSED),requestAnimationFrame(function(){e.adapter_.removeClass(t.cssClasses.OPEN),e.quickOpen_||(e.closeAnimationEndTimerId_=setTimeout(function(){e.closeAnimationEndTimerId_=0,e.adapter_.removeClass(t.cssClasses.ANIMATING_CLOSED)},u.d.TRANSITION_CLOSE_DURATION))}),this.isOpen_=!1,this.adapter_.restoreFocus())}},{key:"isOpen",value:function(){return this.isOpen_}},{key:"getSelectedIndex",value:function(){return this.selectedIndex_}},{key:"setSelectedIndex",value:function(e){if(e!==this.selectedIndex_){var t=this.selectedIndex_;t>=0&&(this.adapter_.rmAttrForOptionAtIndex(t,"aria-selected"),this.adapter_.rmClassForOptionAtIndex(t,u.c.SELECTED_LIST_ITEM)),this.selectedIndex_=e>=0&&e<this.adapter_.getNumberOfItems()?e:-1,this.selectedIndex_>=0&&(this.adapter_.setAttrForOptionAtIndex(this.selectedIndex_,"aria-selected","true"),this.adapter_.addClassForOptionAtIndex(this.selectedIndex_,u.c.SELECTED_LIST_ITEM))}}}]),t}(s.a)},20:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();!function(){function e(){r(this,e)}i(e,[{key:"addClass",value:function(e){}},{key:"removeClass",value:function(e){}},{key:"hasClass",value:function(e){}},{key:"hasNecessaryDom",value:function(){}},{key:"getAttributeForEventTarget",value:function(e,t){}},{key:"getInnerDimensions",value:function(){}},{key:"hasAnchor",value:function(){}},{key:"getAnchorDimensions",value:function(){}},{key:"getWindowDimensions",value:function(){}},{key:"getNumberOfItems",value:function(){}},{key:"registerInteractionHandler",value:function(e,t){}},{key:"deregisterInteractionHandler",value:function(e,t){}},{key:"registerBodyClickHandler",value:function(e){}},{key:"deregisterBodyClickHandler",value:function(e){}},{key:"getIndexForEventTarget",value:function(e){}},{key:"notifySelected",value:function(e){}},{key:"notifyCancel",value:function(){}},{key:"saveFocus",value:function(){}},{key:"restoreFocus",value:function(){}},{key:"isFocused",value:function(){}},{key:"focus",value:function(){}},{key:"getFocusedItemIndex",value:function(){}},{key:"focusItemAtIndex",value:function(e){}},{key:"isRtl",value:function(){}},{key:"setTransformOrigin",value:function(e){}},{key:"setPosition",value:function(e){}},{key:"setMaxHeight",value:function(e){}},{key:"setAttrForOptionAtIndex",value:function(e,t,n){}},{key:"rmAttrForOptionAtIndex",value:function(e,t){}},{key:"addClassForOptionAtIndex",value:function(e,t){}},{key:"rmClassForOptionAtIndex",value:function(e,t){}}])}()},93:function(e,t,n){e.exports=n(14)}})}); | ||
| //# sourceMappingURL=mdc.menu.min.js.map |
181
index.js
@@ -18,4 +18,179 @@ /** | ||
| import * as util from './util'; | ||
| import {MDCSimpleMenu, MDCSimpleMenuFoundation, CornerBit, Corner, AnchorMargin} from './simple'; | ||
| export {MDCSimpleMenu, MDCSimpleMenuFoundation, CornerBit, Corner, AnchorMargin, util}; | ||
| import MDCComponent from '@material/base/component'; | ||
| import {getTransformPropertyName} from './util'; | ||
| import {MDCMenuFoundation, AnchorMargin} from './foundation'; | ||
| import {Corner, CornerBit} from './constants'; | ||
| /** | ||
| * @extends MDCComponent<!MDCMenuFoundation> | ||
| */ | ||
| class MDCMenu extends MDCComponent { | ||
| /** @param {...?} args */ | ||
| constructor(...args) { | ||
| super(...args); | ||
| /** @private {!Element} */ | ||
| this.previousFocus_; | ||
| } | ||
| /** | ||
| * @param {!Element} root | ||
| * @return {!MDCMenu} | ||
| */ | ||
| static attachTo(root) { | ||
| return new MDCMenu(root); | ||
| } | ||
| /** @return {boolean} */ | ||
| get open() { | ||
| return this.foundation_.isOpen(); | ||
| } | ||
| /** @param {boolean} value */ | ||
| set open(value) { | ||
| if (value) { | ||
| this.foundation_.open(); | ||
| } else { | ||
| this.foundation_.close(); | ||
| } | ||
| } | ||
| /** @param {{focusIndex: ?number}=} options */ | ||
| show({focusIndex = null} = {}) { | ||
| this.foundation_.open({focusIndex: focusIndex}); | ||
| } | ||
| hide() { | ||
| this.foundation_.close(); | ||
| } | ||
| /** | ||
| * @param {Corner} corner Default anchor corner alignment of top-left | ||
| * menu corner. | ||
| */ | ||
| setAnchorCorner(corner) { | ||
| this.foundation_.setAnchorCorner(corner); | ||
| } | ||
| /** | ||
| * @param {AnchorMargin} margin | ||
| */ | ||
| setAnchorMargin(margin) { | ||
| this.foundation_.setAnchorMargin(margin); | ||
| } | ||
| /** | ||
| * Return the item container element inside the component. | ||
| * @return {?Element} | ||
| */ | ||
| get itemsContainer_() { | ||
| return this.root_.querySelector(MDCMenuFoundation.strings.ITEMS_SELECTOR); | ||
| } | ||
| /** | ||
| * Return the items within the menu. Note that this only contains the set of elements within | ||
| * the items container that are proper list items, and not supplemental / presentational DOM | ||
| * elements. | ||
| * @return {!Array<!Element>} | ||
| */ | ||
| get items() { | ||
| const {itemsContainer_: itemsContainer} = this; | ||
| return [].slice.call(itemsContainer.querySelectorAll('.mdc-list-item[role]')); | ||
| } | ||
| /** | ||
| * Return the item within the menu that is selected. | ||
| * @param {number} index | ||
| * @return {?Element} | ||
| */ | ||
| getOptionByIndex(index) { | ||
| const items = this.items; | ||
| if (index < items.length) { | ||
| return this.items[index]; | ||
| } else { | ||
| return null; | ||
| } | ||
| } | ||
| /** @param {number} index */ | ||
| set selectedItemIndex(index) { | ||
| this.foundation_.setSelectedIndex(index); | ||
| } | ||
| /** @return {number} */ | ||
| get selectedItemIndex() { | ||
| return this.foundation_.getSelectedIndex(); | ||
| } | ||
| /** @param {!boolean} rememberSelection */ | ||
| set rememberSelection(rememberSelection) { | ||
| this.foundation_.setRememberSelection(rememberSelection); | ||
| } | ||
| /** @param {boolean} quickOpen */ | ||
| set quickOpen(quickOpen) { | ||
| this.foundation_.setQuickOpen(quickOpen); | ||
| } | ||
| /** @return {!MDCMenuFoundation} */ | ||
| getDefaultFoundation() { | ||
| return new MDCMenuFoundation({ | ||
| addClass: (className) => this.root_.classList.add(className), | ||
| removeClass: (className) => this.root_.classList.remove(className), | ||
| hasClass: (className) => this.root_.classList.contains(className), | ||
| hasNecessaryDom: () => Boolean(this.itemsContainer_), | ||
| getAttributeForEventTarget: (target, attributeName) => target.getAttribute(attributeName), | ||
| getInnerDimensions: () => { | ||
| const {itemsContainer_: itemsContainer} = this; | ||
| return {width: itemsContainer.offsetWidth, height: itemsContainer.offsetHeight}; | ||
| }, | ||
| hasAnchor: () => this.root_.parentElement && this.root_.parentElement.classList.contains('mdc-menu-anchor'), | ||
| getAnchorDimensions: () => this.root_.parentElement.getBoundingClientRect(), | ||
| getWindowDimensions: () => { | ||
| return {width: window.innerWidth, height: window.innerHeight}; | ||
| }, | ||
| getNumberOfItems: () => this.items.length, | ||
| registerInteractionHandler: (type, handler) => this.root_.addEventListener(type, handler), | ||
| deregisterInteractionHandler: (type, handler) => this.root_.removeEventListener(type, handler), | ||
| registerBodyClickHandler: (handler) => document.body.addEventListener('click', handler), | ||
| deregisterBodyClickHandler: (handler) => document.body.removeEventListener('click', handler), | ||
| getIndexForEventTarget: (target) => this.items.indexOf(target), | ||
| notifySelected: (evtData) => this.emit(MDCMenuFoundation.strings.SELECTED_EVENT, { | ||
| index: evtData.index, | ||
| item: this.items[evtData.index], | ||
| }), | ||
| notifyCancel: () => this.emit(MDCMenuFoundation.strings.CANCEL_EVENT, {}), | ||
| saveFocus: () => { | ||
| this.previousFocus_ = document.activeElement; | ||
| }, | ||
| restoreFocus: () => { | ||
| if (this.previousFocus_) { | ||
| this.previousFocus_.focus(); | ||
| } | ||
| }, | ||
| isFocused: () => document.activeElement === this.root_, | ||
| focus: () => this.root_.focus(), | ||
| getFocusedItemIndex: () => this.items.indexOf(document.activeElement), | ||
| focusItemAtIndex: (index) => this.items[index].focus(), | ||
| isRtl: () => getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl', | ||
| setTransformOrigin: (origin) => { | ||
| this.root_.style[`${getTransformPropertyName(window)}-origin`] = origin; | ||
| }, | ||
| setPosition: (position) => { | ||
| this.root_.style.left = 'left' in position ? position.left : null; | ||
| this.root_.style.right = 'right' in position ? position.right : null; | ||
| this.root_.style.top = 'top' in position ? position.top : null; | ||
| this.root_.style.bottom = 'bottom' in position ? position.bottom : null; | ||
| }, | ||
| setMaxHeight: (height) => { | ||
| this.root_.style.maxHeight = height; | ||
| }, | ||
| setAttrForOptionAtIndex: (index, attr, value) => this.items[index].setAttribute(attr, value), | ||
| rmAttrForOptionAtIndex: (index, attr) => this.items[index].removeAttribute(attr), | ||
| addClassForOptionAtIndex: (index, className) => this.items[index].classList.add(className), | ||
| rmClassForOptionAtIndex: (index, className) => this.items[index].classList.remove(className), | ||
| }); | ||
| } | ||
| } | ||
| export {MDCMenuFoundation, MDCMenu, AnchorMargin, Corner, CornerBit}; |
| { | ||
| "name": "@material/menu", | ||
| "version": "0.29.0", | ||
| "version": "0.30.0", | ||
| "description": "The Material Components for the web menu component", | ||
@@ -20,5 +20,5 @@ "license": "Apache-2.0", | ||
| "@material/elevation": "^0.28.0", | ||
| "@material/theme": "^0.29.0", | ||
| "@material/theme": "^0.30.0", | ||
| "@material/typography": "^0.28.0" | ||
| } | ||
| } |
356
README.md
@@ -14,3 +14,3 @@ <!--docs: | ||
| <a class="article__asset-link" | ||
| href="https://material-components-web.appspot.com/simple-menu.html"> | ||
| href="https://material-components-web.appspot.com/menu.html"> | ||
| <img src="{{ site.rootpath }}/images/mdc_web_screenshots/menus.png" width="178" alt="Menus screenshot"> | ||
@@ -22,3 +22,3 @@ </a> | ||
| [Material Design menu specification](https://material.io/guidelines/components/menus.html). | ||
| It implements simple menus. Menus require JavaScript to work correctly, but the open and closed states are correct on | ||
| Menus require JavaScript to work correctly, but the open and closed states are correct on | ||
| first render. | ||
@@ -33,3 +33,3 @@ | ||
| <li class="icon-list-item icon-list-item--link"> | ||
| <a href="https://material-components-web.appspot.com/simple-menu.html">Demo</a> | ||
| <a href="https://material-components-web.appspot.com/menu.html">Demo</a> | ||
| </li> | ||
@@ -44,9 +44,11 @@ </ul> | ||
| ## Simple menu usage | ||
| ## Usage | ||
| A simple menu is usually closed, appearing when opened. It is appropriate for any display size. | ||
| ### HTML Structure | ||
| A menu is usually closed, appearing when opened. It is appropriate for any display size. | ||
| ```html | ||
| <div class="mdc-simple-menu" tabindex="-1"> | ||
| <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true"> | ||
| <div class="mdc-menu" tabindex="-1"> | ||
| <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true"> | ||
| <li class="mdc-list-item" role="menuitem" tabindex="0"> | ||
@@ -61,18 +63,9 @@ A Menu Item | ||
| ``` | ||
| > Note: adding a `tabindex` of `0` to the menu items places them in the tab order. | ||
| Adding a `tabindex` of `-1` to the root element makes it programmatically focusable, without | ||
| placing it in the tab order. This allows the menu to be focused on open, so that the next Tab | ||
| keypress moves to the first menu item. If you would like the first menu item to be automatically | ||
| focused instead, remove `tabindex="-1"` from the root element. | ||
| ```js | ||
| let menu = new mdc.menu.MDCSimpleMenu(document.querySelector('.mdc-simple-menu')); | ||
| // Add event listener to some button to toggle the menu on and off. | ||
| document.querySelector('.some-button').addEventListener('click', () => menu.open = !menu.open); | ||
| ``` | ||
| #### Opened Menu | ||
| You can start the menu in its open state by adding the `mdc-simple-menu--open` class to your HTML: | ||
| The menu can be configured to start in the opened state by adding the `mdc-menu--open` class to the element. | ||
| ```html | ||
| <div class="mdc-simple-menu mdc-simple-menu--open"> | ||
| <div class="mdc-menu mdc-menu--open"> | ||
| ... | ||
@@ -82,16 +75,9 @@ </div> | ||
| ### Positioning the menu | ||
| #### Anchor To Parent | ||
| The menu can either be positioned manually, or automatically, by anchoring it to an element. | ||
| The menu can be positioned to automatically anchor to a parent element when opened. | ||
| #### Automatic Positioning | ||
| The menu understands the concept of an anchor, which it can use to determine how to position itself, and which corner | ||
| to open from. | ||
| The anchor can either be a visible element that the menu is a child of: | ||
| ```html | ||
| <div class="toolbar mdc-menu-anchor"> | ||
| <div class="mdc-simple-menu"> | ||
| <div id="toolbar" class="toolbar mdc-menu-anchor"> | ||
| <div class="mdc-menu"> | ||
| ... | ||
@@ -102,28 +88,10 @@ </div> | ||
| or a wrapper element that contains the actual visible element to attach to: | ||
| #### Anchor To Element Within Wrapper | ||
| ```html | ||
| <div class="mdc-menu-anchor"> | ||
| <button>Open Menu</button> | ||
| <div class="mdc-simple-menu"> | ||
| ... | ||
| </div> | ||
| </div> | ||
| ``` | ||
| The menu can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class. | ||
| > Note: `overflow: visible` and `position: relative` will be set on the element with `mdc-menu-anchor` to ensure that | ||
| the menu is positioned and displayed correctly. | ||
| The menu will check if its parent element has the `mdc-menu-anchor` class set, and if so, it will automatically position | ||
| itself relative to this anchor element. Unless anchor corner is specified, menu will open from the top left | ||
| (top right in RTL) corner of the anchor by default, but will choose an appropriate different corner if close | ||
| to the edge of the screen. | ||
| #### Manual Positioning | ||
| The menu is `position: absolute` by default, and must be positioned by the user when doing manual positioning. | ||
| ```html | ||
| <div class="container"> | ||
| <div class="mdc-simple-menu" style="top:0; left: 0;"> | ||
| <div id="demo-menu" class="mdc-menu-anchor"> | ||
| <button id="menu-button">Open Menu</button> | ||
| <div class="mdc-menu"> | ||
| ... | ||
@@ -134,15 +102,10 @@ </div> | ||
| The menu will open from the top left by default (top right in RTL). Depending on how you've positioned your button, you | ||
| may want to change the point it opens from. | ||
| To override the opening point, you can style `transform-origin` directly. | ||
| #### Disabled menu items | ||
| When used in components such as MDC Menu, `mdc-list-item`'s can be disabled. | ||
| To disable a list item, set `aria-disabled` to `"true"`, and set `tabindex` to `"-1"`. | ||
| When used in components such as MDC Menu, list items can be disabled. | ||
| To disable a list item, set `aria-disabled` property to `"true"`, and set `tabindex` to `"-1"`. | ||
| ```html | ||
| <div class="mdc-simple-menu" tabindex="-1"> | ||
| <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true"> | ||
| <div class="mdc-menu" tabindex="-1"> | ||
| <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true"> | ||
| <li class="mdc-list-item" role="menuitem" tabindex="0"> | ||
@@ -158,196 +121,103 @@ A Menu Item | ||
| ### Using the JS Component | ||
| ### CSS Classes | ||
| MDC Simple Menu ships with a Component / Foundation combo which allows for frameworks to richly integrate the | ||
| correct menu behaviors into idiomatic components. | ||
| CSS Class | Description | ||
| --- | --- | ||
| `mdc-menu` | Mandatory | ||
| `mdc-menu--animating-open` | Indicates the menu is currently animating open. This class is removed once the animation completes. | ||
| `mdc-menu--open` | Indicates the menu is currently open, or is currently animating open. | ||
| `mdc-menu--animating-closed` | Indicates the menu is currently animating closed. This class is removed once the animation completes. | ||
| The component has a read-write property, `open`, which keeps track of the visual state of the component. | ||
| ### JS Examples | ||
| ```js | ||
| // Analyse current state. | ||
| console.log('The menu is ' + (menu.open ? 'open' : 'closed')); | ||
| // Open menu. | ||
| menu.open = true; | ||
| // Close menu. | ||
| menu.open = false; | ||
| // Instantiation | ||
| var menuEl = document.querySelector('#toolbar'); | ||
| var menu = new mdc.menu.MDCMenu(menuEl); | ||
| var menuButtonEl = document.querySelector('#menu-button'); | ||
| // Toggle menu open | ||
| menuButtonEl.addEventListener('click', function() { | ||
| menu.open = !menu.open; | ||
| }); | ||
| // Listen for selected item | ||
| menuEl.addEventListener('MDCMenu:selected', function(evt) { | ||
| var detail = evt.detail; | ||
| }); | ||
| // Set Anchor Corner to Bottom End | ||
| menu.setAnchorCorner(Corner.BOTTOM_END); | ||
| // Turn off menu open animations | ||
| menu.quickOpen = false; | ||
| ``` | ||
| It also has two lower level methods, which control the menu directly, by showing (opening) and | ||
| hiding (closing) it: | ||
| ### `MDCMenu` | ||
| ```js | ||
| // Show (open) menu. | ||
| menu.show(); | ||
| // Hide (close) menu. | ||
| menu.hide(); | ||
| // Show (open) menu, and focus the menu item at index 1. | ||
| menu.show({focusIndex: 1}); | ||
| ``` | ||
| See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. | ||
| You can still use the `open` getter property even if showing and hiding directly: | ||
| Property | Value Type | Description | ||
| --- | --- | --- | ||
| `open` | Boolean | Proxies to the foundation's `isOpen`/(`open`, `close`) methods. | ||
| `items` | Array<Element> | Proxies to the foundation's container to query for all `.mdc-list-item[role]` elements. | ||
| `itemsContainer` | Element | Queries the foundation's root element for the `mdc-menu__items` container element. | ||
| `quickOpen` | Boolean | Proxies to the foundation's `setQuickOpen()` method. | ||
| ```js | ||
| menu.show(); | ||
| console.log(`Menu is ${menu.open ? 'open' : 'closed'}.`); | ||
| ``` | ||
| Method Signature | Description | ||
| --- | --- | ||
| `show({focusIndex: ?number}) => void` | Proxies to the foundation's `open()` method. An optional config parameter allows the caller to specify which item should receive focus after the menu opens. | ||
| `hide() => void` | Proxies to the foundation's `close()` method. | ||
| `setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method. | ||
| `setAnchorMargin(AnchorMargin) => void` | Proxies to the foundation's `setAnchorMargin(AnchorMargin)` method. | ||
| `getDefaultFoundation() => MDCMenuFoundation` | Returns the foundation. | ||
| ### `MDCMenuAdapter` | ||
| #### Including in code | ||
| Method Signature | Description | ||
| --- | --- | ||
| `addClass(className: string) => void` | Adds a class to the root element. | ||
| `removeClass(className: string) => void` | Removes a class from the root element. | ||
| `hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class. | ||
| `hasNecessaryDom() => boolean` | Returns boolean indicating whether the necessary DOM is present (namely, the `mdc-menu__items` container). | ||
| `getAttributeForEventTarget(target: EventTarget, attributeName: string) => string` | Returns the value of a given attribute on an event target. | ||
| `getInnerDimensions() => {width: number, height: number}` | Returns an object with the items container width and height. | ||
| `hasAnchor: () => boolean` | Returns whether the menu has an anchor for positioning. | ||
| `getAnchorDimensions() => {width: number, height: number, top: number, right: number, bottom: number, left: number}` | Returns an object with the dimensions and position of the anchor (same semantics as `DOMRect`). | ||
| `getWindowDimensions() => {width: number, height: number}` | Returns an object with width and height of the page, in pixels. | ||
| `getNumberOfItems() => number` | Returns the number of _item_ elements inside the items container. In our vanilla component, we determine this by counting the number of list items whose `role` attribute corresponds to the correct child role of the role present on the menu list element. For example, if the list element has a role of `menu` this queries for all elements that have a role of `menuitem`. | ||
| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type`. | ||
| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type`. | ||
| `registerBodyClickHandler(handler: EventListener) => void` | Adds an event listener `handler` for event type `click`. | ||
| `deregisterBodyClickHandler(handler: EventListener) => void` | Removes an event listener `handler` for event type `click`. | ||
| `getIndexForEventTarget(target: EventTarget) => number` | Checks to see if the `target` of an event pertains to one of the menu items, and if so returns the index of that item. Returns -1 if the target is not one of the menu items. | ||
| `notifySelected(evtData: {index: number}) => void` | Dispatches an event notifying listeners that a menu item has been selected. The function should accept an `evtData` parameter containing an object with an `index` property representing the index of the selected item. Implementations may choose to supplement this data with additional data, such as the item itself. | ||
| `notifyCancel() => void` | Dispatches an event notifying listeners that the menu has been closed with no selection made. | ||
| `saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`. | ||
| `restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again. | ||
| `isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu is focused. | ||
| `focus() => void` | Focuses the root element of the menu. | ||
| `getFocusedItemIndex() => number` | Returns the index of the currently focused menu item (-1 if none). | ||
| `focusItemAtIndex(index: number) => void` | Focuses the menu item with the provided index. | ||
| `isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL. | ||
| `setTransformOrigin(value: string) => void` | Sets the transform origin for the menu element. | ||
| `setPosition(position: {top: string, right: string, bottom: string, left: string}) => void` | Sets the position of the menu element. | ||
| `setMaxHeight(value: string) => void` | Sets `max-height` style for the menu element. | ||
| ##### ES2015 | ||
| ### `MDCMenuFoundation` | ||
| ```javascript | ||
| import {MDCSimpleMenu, MDCSimpleMenuFoundation, util} from '@material/menu'; | ||
| ``` | ||
| Method Signature | Description | ||
| --- | --- | ||
| `setAnchorCorner(corder: Corner) => void` | Sets the corner that the menu will be anchored to. See [constants.js](https://github.com/material-components/material-components-web/blob/cc299230728ba5a994866ebd31aaaf1a0f4cc87f/packages/mdc-menu/constants.js#L73) | ||
| `setAnchorMargin(margin: AnchorMargin) => void` | Sets the distance from the anchor point that the menu should be shown. | ||
| `open({focusIndex: ?number}) => void` | Opens the menu. Optionally accepts an object with a `focusIndex` parameter to indicate which list item should receive focus when the menu is opened. | ||
| `close(evt: ?Event)` | Closes the menu. Optionally accepts the event to check if the target is disabled before closing the menu. | ||
| `isOpen() => boolean` | Returns a boolean indicating whether the menu is open. | ||
| `setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu should open and close without animation when the `open`/`close` methods are called. | ||
| ##### CommonJS | ||
| ### Events | ||
| ```javascript | ||
| const mdcMenu = require('mdc-menu'); | ||
| const MDCSimpleMenu = mdcMenu.MDCSimpleMenu; | ||
| const MDCSimpleMenuFoundation = mdcMenu.MDCSimpleMenuFoundation; | ||
| const util = mdcMenu.util; | ||
| ``` | ||
| ##### AMD | ||
| ```javascript | ||
| require(['path/to/mdc-menu'], mdcMenu => { | ||
| const MDCSimpleMenu = mdcMenu.MDCSimpleMenu; | ||
| const MDCSimpleMenuFoundation = mdcMenu.MDCSimpleMenuFoundation; | ||
| const util = mdcMenu.util; | ||
| }); | ||
| ``` | ||
| ##### Global | ||
| ```javascript | ||
| const MDCSimpleMenu = mdc.menu.MDCSimpleMenu; | ||
| const MDCSimpleMenuFoundation = mdc.menu.MDCSimpleMenuFoundation; | ||
| const util = mdc.menu.util; | ||
| ``` | ||
| #### Automatic Instantiation | ||
| If you do not care about retaining the component instance for the simple menu, simply call `attachTo()` and pass it a | ||
| DOM element. | ||
| ```javascript | ||
| mdc.MDCSimpleMenu.attachTo(document.querySelector('.mdc-simple-menu')); | ||
| ``` | ||
| #### Manual Instantiation | ||
| Simple menus can easily be initialized using their default constructors as well, similar to `attachTo`. | ||
| ```javascript | ||
| import {MDCSimpleMenu} from '@material/menu'; | ||
| const menu = new MDCSimpleMenu(document.querySelector('.mdc-simple-menu')); | ||
| ``` | ||
| #### Handling selection events | ||
| When a menu item is selected, the menu component will emit a `MDCSimpleMenu:selected` custom event | ||
| with the following `detail` data: | ||
| | property name | type | description | | ||
| | --- | --- | --- | | ||
| | `item` | `HTMLElement` | The DOM element for the selected item | | ||
| | `index` | `number` | The index of the selected item | | ||
| If the menu is closed with no selection made (for example, if the user hits `Escape` while it's open), a `MDCSimpleMenu:cancel` custom event is emitted instead, with no data attached. | ||
| ### Using the Foundation Class | ||
| MDC Simple Menu ships with an `MDCSimpleMenuFoundation` class that external frameworks and libraries can use to | ||
| integrate the component. As with all foundation classes, an adapter object must be provided. | ||
| The adapter for simple menu must provide the following functions, with correct signatures: | ||
| | Method Signature | Description | | ||
| | --- | --- | | ||
| | `addClass(className: string) => void` | Adds a class to the root element. | | ||
| | `removeClass(className: string) => void` | Removes a class from the root element. | | ||
| | `hasClass(className: string) => boolean` | Returns boolean indicating whether element has a given class. | | ||
| | `hasNecessaryDom() => boolean` | Returns boolean indicating whether the necessary DOM is present (namely, the `mdc-simple-menu__items` container). | | ||
| | `getAttributeForEventTarget(target: EventTarget, attributeName: string) => string` | Returns the value of a given attribute on an event target. | | ||
| | `eventTargetHasClass: (target: EventTarget, className: string) => boolean` | Returns true if the event target has a given class. | | ||
| | `getInnerDimensions() => {width: number, height: number}` | Returns an object with the items container width and height | | ||
| | `hasAnchor: () => boolean` | Returns whether the menu has an anchor for positioning. | | ||
| | `getAnchorDimensions() => { width: number, height: number, top: number, right: number, bottom: number, left: number }` | Returns an object with the dimensions and position of the anchor (same semantics as `DOMRect`). | | ||
| | `getWindowDimensions() => {width: number, height: number}` | Returns an object with width and height of the page, in pixels. | | ||
| | `getNumberOfItems() => numbers` | Returns the number of _item_ elements inside the items container. In our vanilla component, we determine this by counting the number of list items whose `role` attribute corresponds to the correct child role of the role present on the menu list element. For example, if the list element has a role of `menu` this queries for all elements that have a role of `menuitem`. | | ||
| | `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type`. | | ||
| | `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type`. | | ||
| | `registerBodyClickHandler(handler: EventListener) => void` | Adds an event listener `handler` for event type 'click'. | | ||
| | `deregisterBodyClickHandler(handler: EventListener) => void` | Removes an event listener `handler` for event type 'click'. | | ||
| | `getIndexForEventTarget(target: EventTarget) => number` | Checks to see if the `target` of an event pertains to one of the menu items, and if so returns the index of that item. Returns -1 if the target is not one of the menu items. The same notice for `index` applies here as above. | | ||
| | `notifySelected(evtData: {index: number}) => void` | Dispatches an event notifying listeners that a menu item has been selected. The function should accept an `evtData` parameter containing the an object with an `index` property representing the index of the selected item. Implementations may choose to supplement this data with additional data, such as the item itself. | | ||
| | `notifyCancel() => void` | Dispatches an event notifying listeners that the menu has been closed with no selection made. | | ||
| | `saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`. | | ||
| | `restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again. | | ||
| | `isFocused() => boolean` | Returns a boolean value indicating whether the root element of the simple menu is focused. | | ||
| | `focus() => void` | Focuses the root element of the simple menu. | | ||
| | `getFocusedItemIndex() => number` | Returns the index of the currently focused menu item (-1 if none). | | ||
| | `focusItemAtIndex(index: number) => void` | Focuses the menu item with the provided index. | | ||
| | `isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL. | | ||
| | `setTransformOrigin(value: string) => void` | Sets the transform origin for the menu element. | | ||
| | `setPosition(position: { top: string, right: string, bottom: string, left: string }) => void` | Sets the position of the menu element. | | ||
| | `setMaxHeight(value: string) => void` | Sets `max-height` style for the menu element. | | ||
| ### The full foundation API | ||
| #### MDCSimpleMenuFoundation.open({focusIndex: number} = {}) => void | ||
| Opens the menu. Takes an options object containing a `focusIndex` property that specifies the index of the menu item to be focused. If the options object or `focusIndex` is omitted, no menu item will be focused. | ||
| #### MDCSimpleMenuFoundation.close() => void | ||
| Closes the menu. | ||
| #### MDCSimpleMenuFoundation.isOpen() => boolean | ||
| Returns whether or not the menu is open. | ||
| #### MDCSimpleMenuFoundation.setAnchorCorner(Corner = Corner.TOP_START) => void | ||
| Specifies the anchor corner to which top start of the menu (top left in ltr, top right in rtl) should align given there | ||
| is enough space to show the full menu. | ||
| When menu display is constrained by viewport edge, `TOP` can be flipped to `BOTTOM`. Similarly `START` can flip to `END`. | ||
| Specifying `BOTTOM_START` and `BOTTOM_END` positions, indicates that the menu displayed either fully below or | ||
| above the anchor. In such cases maximum height of the menu is enforced. | ||
| When specifying `TOP_START` and `TOP_END` positions, the menu is allowed to be taller if it does not fit below | ||
| or above the anchor. | ||
| #### MDCSimpleMenuFoundation.setAnchorMargin({top: number, right: number, bottom: number, left: number}) => void | ||
| Specifies pixel margins that the menu should be offset from all four sides of an anchor. When menu overlaps an | ||
| anchor (default anchor corner) and menu is taller than would fit (not extending beyond viewport edges), margin is | ||
| ignored and menu allowed to display fully overlapping the anchor. In such cases menu is not strictly aligned to an | ||
| anchor corner, also maximum height of the menu in such cases is constrained by the viewport height. | ||
| ### The util API | ||
| External frameworks and libraries can use the following utility methods when integrating a component. | ||
| #### util.getTransformPropertyName(globalObj, forceRefresh = false) => String | ||
| Returns the name of the correct transform property to use on the current browser. | ||
| #### util.clamp(value, min = 0, max = 1) => Number | ||
| Clamps a value between the minimum and the maximum, returning the clamped value. | ||
| #### util.bezierProgress(time, x1, y1, x2, y2) => Number | ||
| Returns the easing value to apply at time t, for a given cubic bezier curve. | ||
| ``` | ||
| Control points P0 and P3 are assumed to be (0,0) and (1,1), respectively. | ||
| Parameters are as follows: | ||
| - time: The current time in the animation, scaled between 0 and 1. | ||
| - x1: The x value of control point P1. | ||
| - y1: The y value of control point P1. | ||
| - x2: The x value of control point P2. | ||
| - y2: The y value of control point P2. | ||
| ``` | ||
| Event Name | Data | Description | ||
| --- | --- | --- | ||
| `MDCMenu:selected` | `{detail: {item: HTMLElement, index: number}}` | Used to indicate when an element has been selected. This event also includes the item selected and the list index of that item. | ||
| `MDCMenu:cancel` | none | Event emitted when the menu is closed with no selection made (e.g. if the user hits `Esc` while it's open, or clicks somewhere else on the page). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by9.63%
3074
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-0.13%
156229
- Number of package files
- decreased by-14.29%
12
- Number of lines in readme file
- decreased by-37.68%
215
Dependency changes
+ Added@material/theme@0.30.0(transitive)
- Removed@material/theme@0.29.0(transitive)
Updated@material/theme@^0.30.0