@esri/calcite-components/dist/components/calcite-split-button/customElement.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit-html";
import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { c as componentFocusable } from "../../chunks/component.js";
import { h as focusFirstTabbable } from "../../chunks/dom.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
  container: "container",
  dividerContainer: "divider-container",
  divider: "divider"
};
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host([kind=brand]){--calcite-internal-split-button-background: var(--calcite-color-brand);--calcite-internal-split-button-divider: var(--calcite-color-foreground-1)}:host([kind=danger]){--calcite-internal-split-button-background: var(--calcite-color-status-danger);--calcite-internal-split-button-divider: var(--calcite-color-foreground-1)}:host([kind=neutral]){--calcite-internal-split-button-background: var(--calcite-color-foreground-3);--calcite-internal-split-button-divider: var(--calcite-color-text-1)}:host([kind=inverse]){--calcite-internal-split-button-background: var(--calcite-color-inverse);--calcite-internal-split-button-divider: var(--calcite-color-foreground-1)}:host([appearance=transparent]){--calcite-internal-split-button-background: transparent}:host([appearance=transparent]):host([kind=brand]){--calcite-internal-split-button-divider: var(--calcite-color-brand)}:host([appearance=transparent]):host([kind=danger]){--calcite-internal-split-button-divider: var(--calcite-color-status-danger)}:host([appearance=transparent]):host([kind=neutral]){--calcite-internal-split-button-divider: var(--calcite-color-text-1)}:host([appearance=transparent]):host([kind=inverse]){--calcite-internal-split-button-divider: var(--calcite-color-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline]):host([kind=danger]),:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline]):host([kind=inverse]){--calcite-internal-split-button-background: transparent}:host([appearance=outline-fill]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-split-button-background: var(--calcite-color-background)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-split-button-divider: var(--calcite-color-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-internal-split-button-divider: var(--calcite-color-status-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-split-button-divider: var(--calcite-color-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-split-button-divider: var(--calcite-color-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{display:flex;inline-size:1px;align-items:stretch;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-internal-split-button-background)}.divider{margin-block:.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-internal-split-button-divider)}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-internal-split-button-divider)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-internal-split-button-divider)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-internal-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-internal-split-button-divider: var(--calcite-color-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-internal-split-button-divider: var(--calcite-color-status-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-internal-split-button-divider)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]):host([appearance=outline-fill]) .divider-container{background-color:var(--calcite-color-background)}:host([disabled]):host([appearance=outline]) .divider-container{background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
class SplitButton extends LitElement {
  constructor() {
    super(...arguments);
    this.active = false;
    this.appearance = "solid";
    this.disabled = false;
    this.download = false;
    this.dropdownIconType = "chevron";
    this.kind = "brand";
    this.loading = false;
    this.overlayPositioning = "absolute";
    this.placement = "bottom-end";
    this.scale = "m";
    this.width = "auto";
    this.calciteSplitButtonPrimaryClick = createEvent({ cancelable: false });
    this.calciteSplitButtonSecondaryClick = createEvent({ cancelable: false });
  }
  static {
    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], dropdownIconType: [3, {}, { reflect: true }], dropdownLabel: [3, {}, { reflect: true }], flipPlacements: [0, {}, { attribute: false }], href: [3, {}, { reflect: true }], kind: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], primaryIconEnd: [3, {}, { reflect: true }], primaryIconFlipRtl: [3, {}, { reflect: true }], primaryIconStart: [3, {}, { reflect: true }], primaryLabel: [3, {}, { reflect: true }], primaryText: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
  }
  static {
    this.shadowRootOptions = { mode: "open", delegatesFocus: true };
  }
  static {
    this.styles = styles;
  }
  get dropdownIcon() {
    return this.dropdownIconType === "chevron" ? "chevronDown" : this.dropdownIconType === "caret" ? "caretDown" : this.dropdownIconType === "ellipsis" ? "ellipsis" : "handle-vertical";
  }
  async setFocus() {
    await componentFocusable(this);
    focusFirstTabbable(this.el);
  }
  updated() {
    updateHostInteraction(this);
  }
  calciteSplitButtonPrimaryClickHandler() {
    this.calciteSplitButtonPrimaryClick.emit();
  }
  calciteSplitButtonSecondaryClickHandler() {
    this.calciteSplitButtonSecondaryClick.emit();
  }
  render() {
    const buttonWidth = this.width === "auto" ? "auto" : "full";
    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}><calcite-button .appearance=${this.appearance} .disabled=${this.disabled} .download=${this.download} .href=${this.href} .iconEnd=${this.primaryIconEnd ? this.primaryIconEnd : null} .iconFlipRtl=${this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null} .iconStart=${this.primaryIconStart ? this.primaryIconStart : null} .kind=${this.kind} .label=${this.primaryLabel} .loading=${this.loading} @click=${this.calciteSplitButtonPrimaryClickHandler} .rel=${this.rel} .scale=${this.scale} split-child=primary .target=${this.target} type=button .width=${buttonWidth}>${this.primaryText}</calcite-button><div class=${safeClassMap(CSS.dividerContainer)}><div class=${safeClassMap(CSS.divider)}></div></div><calcite-dropdown .disabled=${this.disabled} .flipPlacements=${this.flipPlacements} @click=${this.calciteSplitButtonSecondaryClickHandler} .open=${this.active} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} .scale=${this.scale} .widthScale=${this.scale}><calcite-button .appearance=${this.appearance} .disabled=${this.disabled} .iconStart=${this.dropdownIcon} .kind=${this.kind} .label=${this.dropdownLabel} .scale=${this.scale} slot=trigger split-child=secondary type=button></calcite-button><slot></slot></calcite-dropdown></div>` });
  }
}
customElement("calcite-split-button", SplitButton);
export {
  SplitButton
};