calcite-action-menu.entry.js 12 KB

123456
  1. var __awaiter=this&&this.__awaiter||function(t,e,n,i){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,a){function r(t){try{c(i.next(t))}catch(t){a(t)}}function l(t){try{c(i["throw"](t))}catch(t){a(t)}}function c(t){t.done?n(t.value):o(t.value).then(r,l)}c((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,o,a,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(t){return function(e){return c([t,e])}}function c(r){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,o&&(a=r[0]&2?o["return"]:r[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,r[1])).done)return a;if(o=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;o=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){n.label=r[1];break}if(r[0]===6&&n.label<a[1]){n.label=a[1];a=r;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(r);break}if(a[2])n.ops.pop();n.trys.pop();continue}r=e.call(t,n)}catch(t){r=[6,t];o=0}finally{i=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
  2. /*!
  3. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  4. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  5. * v1.0.0-beta.82
  6. */import{r as registerInstance,c as createEvent,h,F as Fragment,g as getElement}from"./index-8ece2564.js";import{C as CSS,I as ICONS,S as SLOTS}from"./resources-3c30f589.js";import{g as getSlotted,t as toAriaBoolean,f as focusElement}from"./dom-da697a3f.js";import{g as getRoundRobinIndex}from"./array-1655bbf7.js";import{g as guid}from"./guid-b4461004.js";import{c as createObserver}from"./observers-b198f831.js";import{c as connectConditionalSlotComponent,d as disconnectConditionalSlotComponent}from"./conditionalSlot-203be745.js";var actionMenuCss="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:-ms-flexbox;display:flex;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}::slotted(calcite-action[active]){outline:2px solid var(--calcite-ui-brand);outline-offset:0px}.default-trigger{position:relative;height:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;height:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}.menu{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}";var SUPPORTED_BUTTON_NAV_KEYS=["ArrowUp","ArrowDown"];var SUPPORTED_MENU_NAV_KEYS=["ArrowUp","ArrowDown","End","Home"];var ActionMenu=function(){function t(t){var e=this;registerInstance(this,t);this.calciteActionMenuOpenChange=createEvent(this,"calciteActionMenuOpenChange",7);this.expanded=false;this.open=false;this.overlayPositioning="absolute";this.placement="auto";this.actionElements=[];this.mutationObserver=createObserver("mutation",(function(){return e.getActions()}));this.guid="calcite-action-menu-".concat(guid());this.menuId="".concat(this.guid,"-menu");this.menuButtonId="".concat(this.guid,"-menu-button");this.activeMenuItemIndex=-1;this.connectMenuButtonEl=function(){var t=e,n=t.el,i=t.menuButtonId,o=t.menuId,a=t.open,r=t.label;var l=getSlotted(n,SLOTS.trigger)||e.defaultMenuButtonEl;if(e.menuButtonEl===l){return}e.disconnectMenuButtonEl();e.menuButtonEl=l;e.setTooltipReferenceElement();if(!l){return}l.active=a;l.setAttribute("aria-controls",o);l.setAttribute("aria-expanded",toAriaBoolean(a));l.setAttribute("aria-haspopup","true");if(!l.id){l.id=i}if(!l.label){l.label=r}if(!l.text){l.text=r}l.addEventListener("click",e.menuButtonClick);l.addEventListener("keydown",e.menuButtonKeyDown);l.addEventListener("keyup",e.menuButtonKeyUp)};this.disconnectMenuButtonEl=function(){var t=e.menuButtonEl;if(!t){return}t.removeEventListener("click",e.menuButtonClick);t.removeEventListener("keydown",e.menuButtonKeyDown);t.removeEventListener("keyup",e.menuButtonKeyUp)};this.setDefaultMenuButtonEl=function(t){e.defaultMenuButtonEl=t;e.connectMenuButtonEl()};this.handleCalciteActionClick=function(){e.open=false;e.setFocus()};this.menuButtonClick=function(){e.toggleOpen()};this.updateTooltip=function(t){var n=t.target.assignedElements({flatten:true}).filter((function(t){return t===null||t===void 0?void 0:t.matches("calcite-tooltip")}));e.tooltipEl=n[0];e.setTooltipReferenceElement()};this.setTooltipReferenceElement=function(){var t=e,n=t.tooltipEl,i=t.expanded,o=t.menuButtonEl;if(n){n.referenceElement=!i?o:null}};this.updateAction=function(t,n){var i=e,o=i.guid,a=i.activeMenuItemIndex;var r="".concat(o,"-action-").concat(n);t.tabIndex=-1;t.setAttribute("role","menuitem");if(!t.id){t.id=r}t.active=n===a};this.updateActions=function(t){t===null||t===void 0?void 0:t.forEach(e.updateAction)};this.getActions=function(){var t=e.el;var n=getSlotted(t,{all:true,matches:"calcite-action"});e.updateActions(n);e.actionElements=n;e.connectMenuButtonEl()};this.menuButtonKeyUp=function(t){var n=t.key;var i=e.actionElements;if(!e.isValidKey(n,SUPPORTED_BUTTON_NAV_KEYS)){return}t.preventDefault();if(!i.length){return}e.toggleOpen(true);e.handleActionNavigation(n,i)};this.menuButtonKeyDown=function(t){var n=t.key;if(!e.isValidKey(n,SUPPORTED_BUTTON_NAV_KEYS)){return}t.preventDefault()};this.menuActionsContainerKeyDown=function(t){var n=t.key;var i=e,o=i.actionElements,a=i.activeMenuItemIndex;if(n==="Tab"){e.open=false;return}if(n===" "||n==="Enter"){t.preventDefault();var r=o[a];r?r.click():e.toggleOpen(false);return}if(e.isValidKey(n,SUPPORTED_MENU_NAV_KEYS)){t.preventDefault()}};this.menuActionsContainerKeyUp=function(t){var n=t.key;var i=e.actionElements;if(n==="Escape"){e.toggleOpen(false);return}if(!e.isValidKey(n,SUPPORTED_MENU_NAV_KEYS)){return}t.preventDefault();if(!i.length){return}e.handleActionNavigation(n,i)};this.handleActionNavigation=function(t,n){var i=e.activeMenuItemIndex;if(t==="Home"){e.activeMenuItemIndex=0}if(t==="End"){e.activeMenuItemIndex=n.length-1}if(t==="ArrowUp"){e.activeMenuItemIndex=getRoundRobinIndex(Math.max(i-1,-1),n.length)}if(t==="ArrowDown"){e.activeMenuItemIndex=getRoundRobinIndex(i+1,n.length)}};this.toggleOpenEnd=function(){e.setFocus();e.el.removeEventListener("calcitePopoverOpen",e.toggleOpenEnd)};this.toggleOpen=function(t){if(t===void 0){t=!e.open}e.el.addEventListener("calcitePopoverOpen",e.toggleOpenEnd);e.open=t}}t.prototype.connectedCallback=function(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.observe(this.el,{childList:true,subtree:true});this.getActions();connectConditionalSlotComponent(this)};t.prototype.disconnectedCallback=function(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.disconnectMenuButtonEl();disconnectConditionalSlotComponent(this)};t.prototype.expandedHandler=function(){this.open=false;this.setTooltipReferenceElement()};t.prototype.openHandler=function(t){this.activeMenuItemIndex=this.open?0:-1;if(this.menuButtonEl){this.menuButtonEl.active=t}this.calciteActionMenuOpenChange.emit(t)};t.prototype.closeCalciteActionMenuOnClick=function(t){var e=t.composedPath();if(e.includes(this.el)){return}this.open=false};t.prototype.activeMenuItemIndexHandler=function(){this.updateActions(this.actionElements)};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){focusElement(this.open?this.menuEl:this.menuButtonEl);return[2]}))}))};t.prototype.renderMenuButton=function(){var t=this,e=t.label,n=t.scale;var i=h("slot",{name:SLOTS.trigger},h("calcite-action",{class:CSS.defaultTrigger,icon:ICONS.menu,ref:this.setDefaultMenuButtonEl,scale:n,text:e}));return i};t.prototype.renderMenuItems=function(){var t=this;var e=this,n=e.actionElements,i=e.activeMenuItemIndex,o=e.open,a=e.menuId,r=e.menuButtonEl,l=e.label,c=e.placement,s=e.overlayPositioning,u=e.flipPlacements;var m=n[i];var f=(m===null||m===void 0?void 0:m.id)||null;return h("calcite-popover",{disablePointer:true,flipPlacements:u,label:l,offsetDistance:0,open:o,overlayPositioning:s,placement:c,referenceElement:r},h("div",{"aria-activedescendant":f,"aria-labelledby":r===null||r===void 0?void 0:r.id,class:CSS.menu,id:a,onClick:this.handleCalciteActionClick,onKeyDown:this.menuActionsContainerKeyDown,onKeyUp:this.menuActionsContainerKeyUp,ref:function(e){return t.menuEl=e},role:"menu",tabIndex:-1},h("slot",null)))};t.prototype.render=function(){return h(Fragment,null,this.renderMenuButton(),this.renderMenuItems(),h("slot",{name:SLOTS.tooltip,onSlotchange:this.updateTooltip}))};t.prototype.isValidKey=function(t,e){return!!e.find((function(e){return e===t}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{expanded:["expandedHandler"],open:["openHandler"],activeMenuItemIndex:["activeMenuItemIndexHandler"]}},enumerable:false,configurable:true});return t}();ActionMenu.style=actionMenuCss;export{ActionMenu as calcite_action_menu};