UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines • 37.7 kB
var __awaiter=this&&this.__awaiter||function(t,e,n,o){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,a){function r(t){try{l(o.next(t))}catch(e){a(e)}}function s(t){try{l(o["throw"](t))}catch(e){a(e)}}function l(t){t.done?n(t.value):i(t.value).then(r,s)}l((o=o.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:[]},o,i,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(e){return l([t,e])}}function l(r){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,i&&(a=r[0]&2?i["return"]:r[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,r[1])).done)return a;if(i=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++;i=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(s){r=[6,s];i=0}finally{o=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement,F as Fragment}from"./index-aa8afca4.js";import{g as getElementDir,C as CSS_UTILITY,b as getSlotted,f as focusElement}from"./dom-466af3c7.js";import{g as getRoundRobinIndex}from"./array-af19adb2.js";import{g as guid}from"./guid-09142681.js";var CSS$3={button:"button",buttonTextVisible:"button--text-visible",buttonCompact:"button--compact",iconContainer:"icon-container",slotContainer:"slot-container",slotContainerHidden:"slot-container--hidden",textContainer:"text-container",textContainerVisible:"text-container--visible"};var TEXT$3={loading:"Loading"};var calciteActionCss='@-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)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;background-color:transparent}:host([disabled]){pointer-events:none}.button{background-color:var(--calcite-ui-foreground-1);border-style:none;cursor:pointer;fill:var(--calcite-ui-text-3);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;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;margin:0;position:relative;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-3);font-family:inherit;width:auto;text-align:unset}.button:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);fill:var(--calcite-ui-text-1)}.button:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);fill:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none;min-width:1rem;min-height:1rem}.button .text-container{line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;width:0;opacity:0;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-property:margin;transition-property:margin;-webkit-transition-property:width;transition-property:width}.button .text-container--visible{-ms-flex:1 1 auto;flex:1 1 auto;opacity:1;width:auto}:host([scale=s]) .button{padding:0.5rem}:host([scale=m]) .button{padding:1rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([alignment=center]) .button{-ms-flex-pack:center;justify-content:center;width:100%}:host([alignment=end]) .button{-ms-flex-pack:end;justify-content:flex-end}:host([alignment=end]) .button .text-container--visible{-ms-flex:0 1 auto;flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0;padding-right:0}.slot-container{display:-ms-flexbox;display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}.button--text-visible .icon-container{margin:0;margin-right:0.5rem}.button--text-visible .text-container--visible{margin:0;margin-right:0.5rem}.button--text-visible.calcite--rtl .icon-container{margin:0;margin-left:0.5rem}.button--text-visible.calcite--rtl .text-container--visible{margin:0;margin-left:0.5rem}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{color:var(--calcite-ui-text-1);fill:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}:host([appearance=clear]) .button{background-color:transparent;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:transparent;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{color:var(--calcite-ui-text-1);fill:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:transparent}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-ui-foreground-1)}:host([loading]) .button .text-container,:host([loading]) .button:hover .text-container,:host([loading]) .button:focus .text-container{opacity:var(--calcite-ui-opacity-disabled)}:host([loading]) calcite-loader[inline]{margin-right:0;color:var(--calcite-ui-text-3)}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-ui-opacity-disabled);background-color:var(--calcite-ui-foreground-1)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{opacity:var(--calcite-ui-opacity-disabled);background-color:var(--calcite-ui-foreground-3)}:host([indicator]) .button--text-visible,:host([indicator][scale=s]) .button--text-visible,:host([indicator][scale=l]) .button--text-visible{padding-right:1rem}:host([indicator]) .button::after{content:"";position:absolute;border-width:2px;background-color:var(--calcite-ui-brand);border-radius:9999px;height:0.5rem;width:0.5rem;z-index:10;border-color:var(--calcite-ui-foreground-1);bottom:0.5rem;right:0.5rem}:host([indicator][scale=s]) .button::after{bottom:0.25rem;right:0.25rem}:host([indicator][scale=l]) .button::after{bottom:0.5rem;right:0.5rem}:host([indicator]) .calcite--rtl::after{right:auto;left:0.25rem}:host([indicator]) .button--text-visible.calcite--rtl{padding-right:0.75rem;padding-left:1rem}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-ui-foreground-1)}:host([indicator][active]) .button::after{border-color:var(--calcite-ui-foreground-3)}:host([indicator]) .button--text-visible::after,:host([indicator][scale=s]) .button--text-visible::after,:host([indicator][scale=l]) .button--text-visible::after{bottom:auto;right:0.5rem}:host([indicator]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=s]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=l]) .button--text-visible.calcite--rtl::after{right:auto;left:0.5rem}';var CalciteAction=function(){function t(t){var e=this;registerInstance(this,t);this.calciteActionClick=createEvent(this,"calciteActionClick",7);this.appearance="solid";this.active=false;this.compact=false;this.disabled=false;this.indicator=false;this.intlLoading=TEXT$3.loading;this.loading=false;this.scale="m";this.textEnabled=false;this.observer=new MutationObserver((function(){return forceUpdate(e)}));this.calciteActionClickHandler=function(){if(!e.disabled){e.calciteActionClick.emit()}}}t.prototype.connectedCallback=function(){this.observer.observe(this.el,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){this.observer.disconnect()};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.buttonEl.focus();return[2]}))}))};t.prototype.renderTextContainer=function(){var t;var e=this,n=e.text,o=e.textEnabled;var i=(t={},t[CSS$3.textContainer]=true,t[CSS$3.textContainerVisible]=o,t);return n?h("div",{class:i,key:"text-container"},n):null};t.prototype.renderIconContainer=function(){var t;var e;var n=this,o=n.loading,i=n.icon,a=n.scale,r=n.el,s=n.intlLoading;var l=a==="l"?"m":"s";var c=o?h("calcite-loader",{active:true,inline:true,label:s,scale:l}):null;var u=i?h("calcite-icon",{icon:i,scale:l}):null;var d=c||u;var p=d||((e=r.children)===null||e===void 0?void 0:e.length);var f=h("div",{class:(t={},t[CSS$3.slotContainer]=true,t[CSS$3.slotContainerHidden]=o,t)},h("slot",null));return p?h("div",{"aria-hidden":"true",class:CSS$3.iconContainer,key:"icon-container"},d,f):null};t.prototype.render=function(){var t;var e=this;var n=this,o=n.compact,i=n.disabled,a=n.loading,r=n.el,s=n.textEnabled,l=n.label,c=n.text;var u=l||c;var d=getElementDir(r)==="rtl";var p=(t={},t[CSS$3.button]=true,t[CSS$3.buttonTextVisible]=s,t[CSS$3.buttonCompact]=o,t[CSS_UTILITY.rtl]=d,t);return h(Host,{onClick:this.calciteActionClickHandler},h("button",{"aria-busy":a.toString(),"aria-disabled":i.toString(),"aria-label":u,class:p,disabled:i,ref:function(t){return e.buttonEl=t}},this.renderIconContainer(),this.renderTextContainer()))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();CalciteAction.style=calciteActionCss;var ICONS$1={chevronsLeft:"chevrons-left",chevronsRight:"chevrons-right"};function getCalcitePosition(t,e){var n;return t||((n=e.closest("calcite-shell-panel"))===null||n===void 0?void 0:n.position)||"start"}function toggleChildActionText(t){var e=t.parent,n=t.expanded;Array.from(e.querySelectorAll("calcite-action")).filter((function(t){return t.slot!=="menu-actions"})).forEach((function(t){return t.textEnabled=n}));e.querySelectorAll("calcite-action-group").forEach((function(t){return t.expanded=n}))}var setTooltipReference=function(t){var e=t.tooltip,n=t.referenceElement,o=t.expanded,i=t.ref;if(e){e.referenceElement=!o&&n}if(i){i(n)}return n};var CalciteExpandToggle=function(t){var e=t.expanded,n=t.intlExpand,o=t.intlCollapse,i=t.toggle,a=t.el,r=t.position,s=t.tooltip,l=t.ref;var c=getElementDir(a)==="rtl";var u=e?o:n;var d=[ICONS$1.chevronsLeft,ICONS$1.chevronsRight];if(c){d.reverse()}var p=getCalcitePosition(r,a)==="end";var f=p?d[1]:d[0];var m=p?d[0]:d[1];var b=h("calcite-action",{dir:c?"rtl":"ltr",icon:e?f:m,onClick:i,ref:function(t){return setTooltipReference({tooltip:s,referenceElement:t,expanded:e,ref:l})},text:u,textEnabled:e});return s?h("calcite-tooltip-manager",null,b):b};var CSS$2={actionGroupBottom:"action-group--bottom"};var SLOTS$3={bottomActions:"bottom-actions",expandTooltip:"expand-tooltip"};var TEXT$2={expand:"Expand",collapse:"Collapse"};var actionHeight=50;var groupMargin=18;var getMaxActionCount=function(t){var e=t.height,n=t.groupCount;return Math.floor((e-n*groupMargin)/actionHeight)};var getOverflowCount=function(t){var e=t.actionCount,n=t.height,o=t.groupCount;return Math.max(e-getMaxActionCount({height:n,groupCount:o}),0)};var overflowActions=function(t){var e=t.actionGroups,n=t.expanded,o=t.overflowCount;var i=o;e.reverse().forEach((function(t){var e=0;var o=Array.from(t.querySelectorAll("calcite-action")).reverse();o.forEach((function(t){t.removeAttribute("slot");t.textEnabled=n}));if(i>0){o.some((function(t){var n=o.filter((function(t){return!t.slot}));if(n.length>1&&o.length>2){t.textEnabled=true;t.setAttribute("slot","menu-actions");e++;if(e>1){i--}}return i<1}))}forceUpdate(t)}))};var calciteActionBarCss="@-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)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-ms-flex-item-align:stretch;align-self:stretch;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;pointer-events:auto;max-width:15vw}:host([overflow-actions-disabled]){overflow-y:auto}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-width:0;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2)}::slotted(calcite-action-group:last-child){border-bottom-width:0}.action-group--bottom{padding-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}";var CalciteActionBar=function(){function t(t){var e=this;registerInstance(this,t);this.calciteActionBarToggle=createEvent(this,"calciteActionBarToggle",7);this.expandDisabled=false;this.expanded=false;this.mutationObserver=new MutationObserver((function(){var t=e,n=t.el,o=t.expanded;toggleChildActionText({parent:n,expanded:o});e.resize(n.clientHeight)}));this.resizeObserver=new ResizeObserver((function(t){return e.resizeHandlerEntries(t)}));this.actionMenuOpenChangeHandler=function(t){if(t.detail){var n=t.composedPath();Array.from(e.el.querySelectorAll("calcite-action-group")).forEach((function(t){if(!n.includes(t)){t.menuOpen=false}}))}};this.resizeHandlerEntries=function(t){t.forEach(e.resizeHandler)};this.resizeHandler=function(t){var n=t.contentRect.height;e.resize(n)};this.resize=function(t){var n=e,o=n.el,i=n.expanded,a=n.expandDisabled,r=n.lastActionCount,s=n.lastGroupCount,l=n.lastResizeHeight,c=n.overflowActionsDisabled;if(typeof t!=="number"||c){return}var u=o.querySelectorAll("calcite-action");var d=a?u.length:u.length+1;var p=Array.from(o.querySelectorAll("calcite-action-group"));var f=getSlotted(o,SLOTS$3.bottomActions)||!a?p.length+1:p.length;if(l===t&&r===d&&s===f){return}e.lastActionCount=d;e.lastGroupCount=f;e.lastResizeHeight=t;var m=getOverflowCount({actionCount:d,height:t,groupCount:f});overflowActions({actionGroups:p,expanded:i,overflowCount:m})};this.toggleExpand=function(){e.expanded=!e.expanded};this.setExpandToggleRef=function(t){e.expandToggleEl=t}}t.prototype.expandHandler=function(t){if(!t){toggleChildActionText({parent:this.el,expanded:this.expanded})}this.resize(this.el.clientHeight)};t.prototype.expandedHandler=function(t){if(!this.expandDisabled){toggleChildActionText({parent:this.el,expanded:t})}this.calciteActionBarToggle.emit()};t.prototype.overflowDisabledHandler=function(t){t?this.resizeObserver.disconnect():this.resizeObserver.observe(this.el)};t.prototype.componentWillLoad=function(){var t=this,e=t.el,n=t.expandDisabled,o=t.expanded;if(!n){toggleChildActionText({parent:e,expanded:o})}this.mutationObserver.observe(e,{childList:true});if(!this.overflowActionsDisabled){this.resizeObserver.observe(e)}};t.prototype.componentDidLoad=function(){this.resize(this.el.clientHeight)};t.prototype.disconnectedCallback=function(){this.mutationObserver.disconnect();this.resizeObserver.disconnect()};t.prototype.setFocus=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(!(t==="expand-toggle"))return[3,2];return[4,focusElement(this.expandToggleEl)];case 1:e.sent();return[2];case 2:this.el.focus();return[2]}}))}))};t.prototype.renderBottomActionGroup=function(){var t=this,e=t.expanded,n=t.expandDisabled,o=t.intlExpand,i=t.intlCollapse,a=t.el,r=t.position,s=t.toggleExpand;var l=getSlotted(a,SLOTS$3.expandTooltip);var c=o||TEXT$2.expand;var u=i||TEXT$2.collapse;var d=!n?h(CalciteExpandToggle,{el:a,expanded:e,intlCollapse:u,intlExpand:c,position:r,ref:this.setExpandToggleRef,toggle:s,tooltip:l}):null;return getSlotted(a,SLOTS$3.bottomActions)||d?h("calcite-action-group",{class:CSS$2.actionGroupBottom},h("slot",{name:SLOTS$3.bottomActions}),h("slot",{name:SLOTS$3.expandTooltip}),d):null};t.prototype.render=function(){return h(Host,{onCalciteActionMenuOpenChange:this.actionMenuOpenChangeHandler},h("slot",null),this.renderBottomActionGroup())};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{expandDisabled:["expandHandler"],expanded:["expandedHandler"],overflowActionsDisabled:["overflowDisabledHandler"]}},enumerable:false,configurable:true});return t}();CalciteActionBar.style=calciteActionBarCss;var SLOTS$2={menuActions:"menu-actions",menuTooltip:"menu-tooltip"};var TEXT$1={more:"More"};var CSS$1={menuButton:"menu-button",menu:"menu"};var ICONS={menu:"ellipsis"};var SLOTS$1={tooltip:"tooltip"};var calciteActionGroupCss='@-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)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:0;padding-right:0;--columns:3}:host([columns="1"]){--columns:1}:host([columns="2"]){--columns:2}:host([columns="3"]){--columns:3}:host([columns="4"]){--columns:4}:host([columns="5"]){--columns:5}:host([columns="6"]){--columns:6}:host(:first-child){padding-top:0}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row}:host([layout=grid]){background-color:var(--calcite-ui-background);display:grid;grid-gap:1px;gap:1px;place-content:stretch;padding:1px;grid-template-columns:repeat(var(--columns), auto)}';var CalciteActionGroup=function(){function t(t){var e=this;registerInstance(this,t);this.expanded=false;this.layout="vertical";this.menuOpen=false;this.setMenuOpen=function(t){e.menuOpen=!!t.detail}}t.prototype.expandedHandler=function(){this.menuOpen=false};t.prototype.renderTooltip=function(){var t=this.el;var e=getSlotted(t,SLOTS$2.menuTooltip);return e?h("slot",{name:SLOTS$2.menuTooltip,slot:SLOTS$1.tooltip}):null};t.prototype.renderMenu=function(){var t=this,e=t.el,n=t.expanded,o=t.intlMore,i=t.menuOpen;var a=getSlotted(e,SLOTS$2.menuActions);return a?h("calcite-action-menu",{expanded:n,flipPlacements:["left","right"],label:o||TEXT$1.more,onCalciteActionMenuOpenChange:this.setMenuOpen,open:i,placement:"leading-start"},h("slot",{name:SLOTS$2.menuActions}),this.renderTooltip()):null};t.prototype.render=function(){return h(Fragment,null,h("slot",null),this.renderMenu())};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{expanded:["expandedHandler"]}},enumerable:false,configurable:true});return t}();CalciteActionGroup.style=calciteActionGroupCss;var calciteActionMenuCss="@-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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size-1)}::slotted(calcite-action){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;margin:0.125rem}::slotted(calcite-action[active]){outline:2px solid var(--calcite-ui-brand);outline-offset:2px;outline-offset:0px}.menu-button{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:0 1 auto;flex:0 1 auto;height:100%;position:relative}.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 MENU_ANIMATION_DELAY_MS=50;var CalciteActionMenu=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.scale="m";this.actionElements=[];this.mutationObserver=new MutationObserver((function(){return e.getActions()}));this.guid="calcite-action-menu-"+guid();this.menuId=this.guid+"-menu";this.menuButtonId=this.guid+"-menu-button";this.activeMenuItemIndex=-1;this.handleCalciteActionClick=function(){e.open=false;e.setFocus()};this.menuButtonClick=function(){e.toggleOpen()};this.setTooltipReferenceElement=function(){var t=e,n=t.el,o=t.expanded,i=t.menuButtonEl;var a=getSlotted(n,SLOTS$1.tooltip);var r=(a===null||a===void 0?void 0:a.tagName)==="SLOT"?a.assignedElements()[0]:a;if((r===null||r===void 0?void 0:r.tagName)==="CALCITE-TOOLTIP"){r.referenceElement=!o&&i}};this.setMenuButtonRef=function(t){e.menuButtonEl=t;e.setTooltipReferenceElement();forceUpdate(e)};this.updateAction=function(t,n){var o=e,i=o.guid,a=o.activeMenuItemIndex;var r=i+"-action-"+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=e.getAssignedElements().filter((function(t){return t.tagName==="CALCITE-ACTION"}));var o=n.length?n:Array.from(t.querySelectorAll("calcite-action"));e.updateActions(o);e.actionElements=o};this.menuButtonKeyUp=function(t){var n=t.key;var o=e.actionElements;if(!e.isValidKey(n,SUPPORTED_BUTTON_NAV_KEYS)){return}t.preventDefault();if(!o.length){return}e.toggleOpen(true);e.handleActionNavigation(n,o)};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 o=e,i=o.actionElements,a=o.activeMenuItemIndex;if(n==="Tab"){e.open=false;return}if(n===" "||n==="Enter"){t.preventDefault();var r=i[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 o=e.actionElements;if(n==="Escape"){e.toggleOpen(false);return}if(!e.isValidKey(n,SUPPORTED_MENU_NAV_KEYS)){return}t.preventDefault();if(!o.length){return}e.handleActionNavigation(n,o)};this.handleActionNavigation=function(t,n){var o=e.activeMenuItemIndex;if(t==="Home"){e.activeMenuItemIndex=0}if(t==="End"){e.activeMenuItemIndex=n.length-1}if(t==="ArrowUp"){e.activeMenuItemIndex=getRoundRobinIndex(Math.max(o-1,-1),n.length)}if(t==="ArrowDown"){e.activeMenuItemIndex=getRoundRobinIndex(o+1,n.length)}};this.toggleOpen=function(t){if(t===void 0){t=!e.open}e.open=t;clearTimeout(e.menuFocusTimeout);if(t){e.menuFocusTimeout=window.setTimeout((function(){return e.setFocus()}),MENU_ANIMATION_DELAY_MS)}else{e.setFocus()}}}t.prototype.connectedCallback=function(){this.mutationObserver.observe(this.el,{childList:true,subtree:true});this.getActions()};t.prototype.disconnectedCallback=function(){this.mutationObserver.disconnect()};t.prototype.expandedHandler=function(){this.open=false;this.setTooltipReferenceElement()};t.prototype.openHandler=function(t){this.activeMenuItemIndex=this.open?0:-1;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.el,n=t.menuButtonId,o=t.menuId,i=t.open,a=t.label,r=t.expanded,s=t.scale;var l=h("calcite-action",{active:i,"aria-controls":o,"aria-expanded":i.toString(),"aria-haspopup":"true",class:CSS$1.menuButton,icon:ICONS.menu,id:n,label:a,onClick:this.menuButtonClick,onKeyDown:this.menuButtonKeyDown,onKeyUp:this.menuButtonKeyUp,ref:this.setMenuButtonRef,scale:s,text:a,textEnabled:r});return getSlotted(e,SLOTS$1.tooltip)?h("calcite-tooltip-manager",null,l):l};t.prototype.renderMenuItems=function(){var t=this;var e=this,n=e.actionElements,o=e.activeMenuItemIndex,i=e.open,a=e.menuButtonId,r=e.menuId,s=e.menuButtonEl,l=e.label,c=e.placement,u=e.overlayPositioning;var d=n[o];var p=(d===null||d===void 0?void 0:d.id)||null;return h("calcite-popover",{disablePointer:true,label:l,offsetDistance:0,open:i,overlayPositioning:u,placement:c,referenceElement:s},h("div",{"aria-activedescendant":p,"aria-labelledby":a,class:CSS$1.menu,id:r,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$1.tooltip}))};t.prototype.getAssignedElements=function(){return Array.from(this.el.querySelectorAll("slot")).map((function(t){return t.assignedElements({flatten:true})})).reduce((function(t,e){return t.concat(e)}),[])};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}();CalciteActionMenu.style=calciteActionMenuCss;var CSS={actionGroupBottom:"action-group--bottom",container:"container"};var TEXT={expand:"Expand",collapse:"Collapse"};var SLOTS={expandTooltip:"expand-tooltip"};var calciteActionPadCss="@-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)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-webkit-animation:in 300ms ease-in-out;animation:in 300ms ease-in-out;border-radius:0.125rem}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-width:0;border-bottom-width:1px;border-color:var(--calcite-ui-border-3);border-style:solid;padding-bottom:0;padding-top:0}.container{-ms-flex-direction:column;flex-direction:column;display:-ms-inline-flexbox;display:inline-flex;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-ui-background);-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);max-width:15vw}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;padding-bottom:0}:host([layout=horizontal]) .container{-ms-flex-direction:row;flex-direction:row;max-width:unset}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-width:0;border-right-width:1px;padding:0}:host([layout=horizontal]) .container.calcite--rtl ::slotted(calcite-action-group){border-width:0;border-left-width:1px}::slotted(calcite-action-group:last-child){border-bottom-width:0}";var CalciteActionPad=function(){function t(t){var e=this;registerInstance(this,t);this.calciteActionPadToggle=createEvent(this,"calciteActionPadToggle",7);this.expandDisabled=false;this.expanded=false;this.layout="vertical";this.actionMenuOpenChangeHandler=function(t){if(t.detail){var n=t.composedPath();Array.from(e.el.querySelectorAll("calcite-action-group")).forEach((function(t){if(!n.includes(t)){t.menuOpen=false}}))}};this.toggleExpand=function(){e.expanded=!e.expanded};this.setExpandToggleRef=function(t){e.expandToggleEl=t}}t.prototype.expandHandler=function(t){if(!t){toggleChildActionText({parent:this.el,expanded:this.expanded})}};t.prototype.expandedHandler=function(t){if(!this.expandDisabled){toggleChildActionText({parent:this.el,expanded:t})}this.calciteActionPadToggle.emit()};t.prototype.componentWillLoad=function(){var t=this,e=t.el,n=t.expandDisabled,o=t.expanded;if(!n){toggleChildActionText({parent:e,expanded:o})}};t.prototype.setFocus=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(!(t==="expand-toggle"))return[3,2];return[4,focusElement(this.expandToggleEl)];case 1:e.sent();return[2];case 2:this.el.focus();return[2]}}))}))};t.prototype.renderBottomActionGroup=function(){var t=this,e=t.expanded,n=t.expandDisabled,o=t.intlExpand,i=t.intlCollapse,a=t.el,r=t.position,s=t.toggleExpand;var l=getSlotted(a,SLOTS.expandTooltip);var c=o||TEXT.expand;var u=i||TEXT.collapse;var d=!n?h(CalciteExpandToggle,{el:a,expanded:e,intlCollapse:u,intlExpand:c,position:r,ref:this.setExpandToggleRef,toggle:s,tooltip:l}):null;return d?h("calcite-action-group",{class:CSS.actionGroupBottom},h("slot",{name:SLOTS.expandTooltip}),d):null};t.prototype.render=function(){var t;var e=getElementDir(this.el)==="rtl";var n=(t={},t[CSS.container]=true,t[CSS_UTILITY.rtl]=e,t);return h(Host,{onCalciteActionMenuOpenChange:this.actionMenuOpenChangeHandler},h("div",{class:n},h("slot",null),this.renderBottomActionGroup()))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{expandDisabled:["expandHandler"],expanded:["expandedHandler"]}},enumerable:false,configurable:true});return t}();CalciteActionPad.style=calciteActionPadCss;export{CalciteAction as calcite_action,CalciteActionBar as calcite_action_bar,CalciteActionGroup as calcite_action_group,CalciteActionMenu as calcite_action_menu,CalciteActionPad as calcite_action_pad};