UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines • 25.9 kB
var __awaiter=this&&this.__awaiter||function(t,e,a,i){function o(t){return t instanceof a?t:new a((function(e){e(t)}))}return new(a||(a=Promise))((function(a,r){function n(t){try{s(i.next(t))}catch(e){r(e)}}function c(t){try{s(i["throw"](t))}catch(e){r(e)}}function s(t){t.done?a(t.value):o(t.value).then(n,c)}s((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var a={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,o,r,n;return n={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function c(t){return function(e){return s([t,e])}}function s(n){if(i)throw new TypeError("Generator is already executing.");while(a)try{if(i=1,o&&(r=n[0]&2?o["return"]:n[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,n[1])).done)return r;if(o=0,r)n=[n[0]&2,r.value];switch(n[0]){case 0:case 1:r=n;break;case 4:a.label++;return{value:n[1],done:false};case 5:a.label++;o=n[1];n=[0];continue;case 7:n=a.ops.pop();a.trys.pop();continue;default:if(!(r=a.trys,r=r.length>0&&r[r.length-1])&&(n[0]===6||n[0]===2)){a=0;continue}if(n[0]===3&&(!r||n[1]>r[0]&&n[1]<r[3])){a.label=n[1];break}if(n[0]===6&&a.label<r[1]){a.label=r[1];r=n;break}if(r&&a.label<r[2]){a.label=r[2];a.ops.push(n);break}if(r[2])a.ops.pop();a.trys.pop();continue}n=e.call(t,a)}catch(c){n=[6,c];o=0}finally{i=r=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,f as forceUpdate,h,H as Host,g as getElement,c as createEvent}from"./index-8fd57462.js";import{g as getElementDir,f as focusElement,c as getSlotted}from"./dom-d9ba1da4.js";import{C as CSS_UTILITY}from"./resources-f0858a17.js";var CSS={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={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}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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{font-family:inherit;display:-ms-flexbox;display:flex;color:var(--calcite-ui-text-3);fill:var(--calcite-ui-text-3);background-color:var(--calcite-ui-foreground-1);margin:0;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;border:none;width:auto;cursor:pointer;text-align:unset;position:relative;font-size:var(--calcite-font-size--2);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}.button:hover,.button:focus{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-blue-1);outline-offset:-2px}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{min-width:1rem;min-height:1rem;margin:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;pointer-events:none}.button .text-container{color:inherit;line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;opacity:0;width:0;-webkit-transition:opacity 150ms ease-in-out, margin 150ms ease-in-out, width 150ms ease-in-out;transition:opacity 150ms ease-in-out, margin 150ms ease-in-out, width 150ms ease-in-out}.button .text-container--visible{-ms-flex:1 1 auto;flex:1 1 auto;opacity:1;width:auto}:host([scale=s]) .button{padding:var(--calcite-spacing-half) var(--calcite-spacing-half)}:host([scale=m]) .button{padding:var(--calcite-spacing) var(--calcite-spacing)}:host([scale=l]) .button{padding:var(--calcite-spacing-plus-quarter) var(--calcite-spacing-plus-quarter);font-size:0.9375rem;line-height:1.5}: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 var(--calcite-spacing-half) 0 0}.button--text-visible .text-container--visible{margin:0 var(--calcite-spacing-half) 0 0}.button--text-visible.calcite--rtl .icon-container{margin:0 0 0 var(--calcite-spacing-half)}.button--text-visible.calcite--rtl .text-container--visible{margin:0 0 0 var(--calcite-spacing-half)}: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:-webkit-box-shadow 150ms ease-in-out;transition:-webkit-box-shadow 150ms ease-in-out;transition:box-shadow 150ms ease-in-out;transition:box-shadow 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out}: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:0.5}:host([loading]) calcite-loader[inline]{color:var(--calcite-ui-border-5);margin-right:0}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:0.5;background-color:var(--calcite-ui-foreground-1)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{opacity:0.5;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:var(--calcite-spacing)}:host([indicator]) .button::after{content:"";border-radius:50%;width:var(--calcite-spacing-half);height:var(--calcite-spacing-half);border:var(--calcite-spacing-eighth) solid var(--calcite-ui-foreground-1);background-color:var(--calcite-ui-blue-1);position:absolute;bottom:var(--calcite-spacing-half);right:var(--calcite-spacing-half);z-index:1}:host([indicator][scale=s]) .button::after{bottom:var(--calcite-spacing-quarter);right:var(--calcite-spacing-quarter)}:host([indicator][scale=l]) .button::after{bottom:var(--calcite-spacing-half);right:var(--calcite-spacing-half)}:host([indicator]) .calcite--rtl::after{right:unset;left:var(--calcite-spacing-quarter)}:host([indicator]) .button--text-visible.calcite--rtl{padding-right:var(--calcite-spacing-three-quarters);padding-left:var(--calcite-spacing)}: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:unset;right:var(--calcite-spacing-half)}: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:unset;left:var(--calcite-spacing-half)}';var CalciteAction=function(){function t(t){var e=this;registerInstance(this,t);this.appearance="solid";this.active=false;this.compact=false;this.disabled=false;this.indicator=false;this.intlLoading=TEXT.loading;this.loading=false;this.scale="m";this.textEnabled=false;this.observer=new MutationObserver((function(){return forceUpdate(e)}))}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,a=e.text,i=e.textEnabled;var o=(t={},t[CSS.textContainer]=true,t[CSS.textContainerVisible]=i,t);return a?h("div",{class:o,key:"text-container"},a):null};t.prototype.renderIconContainer=function(){var t;var e;var a=this,i=a.loading,o=a.icon,r=a.scale,n=a.el,c=a.intlLoading;var s=r==="l"?"m":"s";var l=i?h("calcite-loader",{active:true,inline:true,label:c,scale:s}):null;var p=o?h("calcite-icon",{icon:o,scale:s}):null;var d=l||p;var u=d||((e=n.children)===null||e===void 0?void 0:e.length);var f=h("div",{class:(t={},t[CSS.slotContainer]=true,t[CSS.slotContainerHidden]=i,t)},h("slot",null));return u?h("div",{"aria-hidden":"true",class:CSS.iconContainer,key:"icon-container"},d,f):null};t.prototype.render=function(){var t;var e=this;var a=this,i=a.compact,o=a.disabled,r=a.loading,n=a.el,c=a.textEnabled,s=a.label,l=a.text;var p=s||l;var d=getElementDir(n)==="rtl";var u=(t={},t[CSS.button]=true,t[CSS.buttonTextVisible]=c,t[CSS.buttonCompact]=i,t[CSS_UTILITY.rtl]=d,t);return h(Host,null,h("button",{"aria-busy":r.toString(),"aria-disabled":o.toString(),"aria-label":p,class:u,disabled:o,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={chevronsLeft:"chevrons-left",chevronsRight:"chevrons-right"};function getCalcitePosition(t,e){var a;return t||((a=e.closest("calcite-shell-panel"))===null||a===void 0?void 0:a.position)||"start"}function toggleChildActionText(t){var e=t.parent,a=t.expanded;e.querySelectorAll("calcite-action").forEach((function(t){return t.textEnabled=a}))}var setTooltipReference=function(t){var e=t.tooltip,a=t.referenceElement,i=t.expanded,o=t.ref;if(e){e.referenceElement=!i&&a}if(o){o(a)}return a};var CalciteExpandToggle=function(t){var e=t.expanded,a=t.intlExpand,i=t.intlCollapse,o=t.toggle,r=t.el,n=t.position,c=t.tooltip,s=t.ref;var l=getElementDir(r)==="rtl";var p=e?i:a;var d=[ICONS.chevronsLeft,ICONS.chevronsRight];if(l){d.reverse()}var u=getCalcitePosition(n,r)==="end";var f=u?d[1]:d[0];var b=u?d[0]:d[1];var m=h("calcite-action",{icon:e?f:b,onClick:o,ref:function(t){return setTooltipReference({tooltip:c,referenceElement:t,expanded:e,ref:s})},text:p,textEnabled:e});return c?h("calcite-tooltip-manager",null,m):m};var CSS$1={actionGroupBottom:"action-group--bottom"};var SLOTS={bottomActions:"bottom-actions"};var TEXT$1={expand:"Expand",collapse:"Collapse"};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}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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;max-width:15vw;overflow-y:auto;pointer-events:auto}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-ui-border-2)}::slotted(calcite-action-group:last-child){border-bottom:none}.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.observer=new MutationObserver((function(){var t=e,a=t.el,i=t.expanded;toggleChildActionText({parent:a,expanded:i})}));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.calciteActionBarToggle.emit()};t.prototype.componentWillLoad=function(){var t=this,e=t.el,a=t.expandDisabled,i=t.expanded;if(!a){toggleChildActionText({parent:e,expanded:i})}this.observer.observe(e,{childList:true})};t.prototype.disconnectedCallback=function(){this.observer.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,a=t.expandDisabled,i=t.intlExpand,o=t.intlCollapse,r=t.el,n=t.position,c=t.toggleExpand,s=t.tooltipExpand;var l=i||TEXT$1.expand;var p=o||TEXT$1.collapse;var d=!a?h(CalciteExpandToggle,{el:r,expanded:e,intlCollapse:p,intlExpand:l,position:n,ref:this.setExpandToggleRef,toggle:c,tooltip:s}):null;return getSlotted(r,SLOTS.bottomActions)||d?h("calcite-action-group",{class:CSS$1.actionGroupBottom},h("slot",{name:SLOTS.bottomActions}),d):null};t.prototype.render=function(){return h(Host,null,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}();CalciteActionBar.style=calciteActionBarCss;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}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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:var(--calcite-spacing-half) 0}:host(:first-child){padding-top:0}::slotted(calcite-action){display:-ms-flexbox;display:flex;width:100%}";var CalciteActionGroup=function(){function t(t){registerInstance(this,t)}t.prototype.render=function(){return h(Host,null,h("slot",null))};return t}();CalciteActionGroup.style=calciteActionGroupCss;var CSS$2={actionGroupBottom:"action-group--bottom",container:"container"};var TEXT$2={expand:"Expand",collapse:"Collapse"};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}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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;-ms-flex-direction:row;flex-direction:row;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.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,a=t.expandDisabled,i=t.expanded;if(!a){toggleChildActionText({parent:e,expanded:i})}};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,a=t.expandDisabled,i=t.intlExpand,o=t.intlCollapse,r=t.el,n=t.position,c=t.toggleExpand,s=t.tooltipExpand;var l=i||TEXT$2.expand;var p=o||TEXT$2.collapse;var d=!a?h(CalciteExpandToggle,{el:r,expanded:e,intlCollapse:p,intlExpand:l,position:n,ref:this.setExpandToggleRef,toggle:c,tooltip:s}):null;return d?h("calcite-action-group",{class:CSS$2.actionGroupBottom},d):null};t.prototype.render=function(){var t;var e=getElementDir(this.el)==="rtl";var a=(t={},t[CSS$2.container]=true,t[CSS_UTILITY.rtl]=e,t);return h(Host,null,h("div",{class:a},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,CalciteActionPad as calcite_action_pad};