@esri/calcite-components/dist/esm-es5/calcite-split-button.entry.js

Web Components for Esri's Calcite Design System.

import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-aa8afca4.js";import{g as getElementDir}from"./dom-466af3c7.js";import"./guid-09142681.js";var CSS={container:"split-button__container",dividerContainer:"split-button__divider-container",divider:"split-button__divider",widthAuto:"width-auto",widthHalf:"width-half",widthFull:"width-full"};var calciteSplitButtonCss="@-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 .split-button__container{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}:host .split-button__container>calcite-dropdown>calcite-button{height:100%}:host([appearance=solid]):host([color=blue]){--split-button-background:var(--calcite-ui-brand);--split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=solid]):host([color=red]){--split-button-background:var(--calcite-ui-danger);--split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=solid]):host([color=neutral]){--split-button-background:var(--calcite-ui-foreground-3);--split-button-divider:var(--calcite-ui-text-1)}:host([appearance=solid]):host([color=inverse]){--split-button-background:var(--calcite-ui-inverse);--split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=transparent]):host([color=blue]){--split-button-divider:var(--calcite-ui-brand)}:host([appearance=transparent]):host([color=red]){--split-button-divider:var(--calcite-ui-danger)}:host([appearance=transparent]):host([color=neutral]){--split-button-divider:var(--calcite-ui-text-1)}:host([appearance=transparent]):host([color=inverse]){--split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=clear]),:host([appearance=transparent]){--split-button-background:transparent}:host([appearance=outline]){--split-button-background:var(--calcite-ui-foreground-1)}:host([appearance=clear]):host([color=blue]),:host([appearance=outline]):host([color=blue]){--split-button-divider:var(--calcite-ui-brand)}:host([appearance=clear]):host([color=red]),:host([appearance=outline]):host([color=red]){--split-button-divider:var(--calcite-ui-danger)}:host([appearance=clear]):host([color=neutral]),:host([appearance=outline]):host([color=neutral]){--split-button-divider:var(--calcite-ui-foreground-3)}:host([appearance=clear]):host([color=inverse]),:host([appearance=outline]):host([color=inverse]){--split-button-divider:var(--calcite-ui-inverse)}.width-auto{width:auto}.width-half{width:50%}.width-full{width:100%}.split-button__divider-container{width:1px;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-webkit-transition:0.15s ease-in-out;transition:0.15s ease-in-out;background-color:var(--split-button-background)}.split-button__divider{width:1px;margin-top:0.25rem;margin-bottom:0.25rem;display:inline-block;background-color:var(--split-button-divider)}:host([appearance=outline]) .split-button__divider-container,:host([appearance=clear]) .split-button__divider-container{border-top:1px solid var(--split-button-divider);border-bottom:1px solid var(--split-button-divider)}:host([appearance=outline]):hover .split-button__divider-container,:host([appearance=clear]):hover .split-button__divider-container{background-color:var(--split-button-divider)}:host([appearance=outline]:hover) .split-button__divider-container,:host([appearance=clear]:hover) .split-button__divider-container{background-color:var(--split-button-divider)}:host([appearance=outline]:focus-within):host([color=blue]),:host([appearance=clear]:focus-within):host([color=blue]){--split-button-divider:var(--calcite-ui-brand-press)}:host([appearance=outline]:focus-within):host([color=red]),:host([appearance=clear]:focus-within):host([color=red]){--split-button-divider:var(--calcite-ui-danger-press)}:host([appearance=outline]:focus-within) .split-button__divider-container,:host([appearance=clear]:focus-within) .split-button__divider-container{background-color:var(--split-button-divider)}:host([disabled]) .split-button__divider-container{opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}";var CalciteSplitButton=function(){function t(t){var i=this;registerInstance(this,t);this.calciteSplitButtonPrimaryClick=createEvent(this,"calciteSplitButtonPrimaryClick",7);this.calciteSplitButtonSecondaryClick=createEvent(this,"calciteSplitButtonSecondaryClick",7);this.appearance="solid";this.color="blue";this.dropdownIconType="chevron";this.loading=false;this.scale="m";this.width="auto";this.calciteSplitButtonPrimaryClickHandler=function(t){return i.calciteSplitButtonPrimaryClick.emit(t)};this.calciteSplitButtonSecondaryClickHandler=function(t){return i.calciteSplitButtonSecondaryClick.emit(t)}}t.prototype.render=function(){var t;var i=getElementDir(this.el);var a=(t={},t[CSS.container]=true,t[CSS.widthAuto]=this.width==="auto",t[CSS.widthHalf]=this.width==="half",t[CSS.widthFull]=this.width==="full",t);var e=this.width==="auto"?"auto":"full";return h("div",{class:a,dir:i},h("calcite-button",{appearance:this.appearance,color:this.color,dir:i,disabled:this.disabled,"icon-end":this.primaryIconEnd?this.primaryIconEnd:null,"icon-start":this.primaryIconStart?this.primaryIconStart:null,iconFlipRtl:this.primaryIconFlipRtl?this.primaryIconFlipRtl:null,label:this.primaryLabel,loading:this.loading,onClick:this.calciteSplitButtonPrimaryClickHandler,scale:this.scale,splitChild:"primary",width:e},this.primaryText),h("div",{class:CSS.dividerContainer},h("div",{class:CSS.divider})),h("calcite-dropdown",{dir:i,onClick:this.calciteSplitButtonSecondaryClickHandler,placement:"bottom-trailing",scale:this.scale,width:this.scale},h("calcite-button",{appearance:this.appearance,color:this.color,dir:i,disabled:this.disabled,"icon-start":this.dropdownIcon,label:this.dropdownLabel,scale:this.scale,slot:"dropdown-trigger",splitChild:"secondary"}),h("slot",null)))};Object.defineProperty(t.prototype,"dropdownIcon",{get:function(){return this.dropdownIconType==="chevron"?"chevronDown":this.dropdownIconType==="caret"?"caretDown":this.dropdownIconType==="ellipsis"?"ellipsis":"handle-vertical"},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();CalciteSplitButton.style=calciteSplitButtonCss;export{CalciteSplitButton as calcite_split_button};