@sandlada/mdc/build/components/split-button/internal/base-split-button.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{property as e}from"../../../node_modules/@lit/reactive-element/decorators/property.js";import{state as t}from"../../../node_modules/@lit/reactive-element/decorators/state.js";import{query as n}from"../../../node_modules/@lit/reactive-element/decorators/query.js";import{queryAssignedElements as r}from"../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";import{queryAssignedNodes as i}from"../../../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js";import"../../../node_modules/lit/decorators.js";import{html as a,nothing as o}from"../../../node_modules/lit-html/lit-html.js";import{LitElement as s}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{classMap as c}from"../../../node_modules/lit-html/directives/class-map.js";import"../../../node_modules/lit/directives/class-map.js";import l from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{SPLIT_BUTTON_LEADING_INTERACTION_EVENT as u,SPLIT_BUTTON_TRAILING_INTERACTION_EVENT as d}from"../split-button.interface.js";import{SplitButtonStyles as f}from"./split-button.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Internal base class for `mdc-split-button` — a two-segment control.
*
* The split button renders two independent native `<button>` elements side by
* side inside a shared container: the leading button (primary action) and the
* trailing button (menu / related-action trigger). They share the container
* height and a pill-shaped corner-radius system and are joined across the small
* `between-space` seam, so they read as a single control, but each button paints
* its own background / outline and owns its own ripple, focus ring, elevation
* and disabled state.
*
* Both segments accept a label, an icon, or both:
* - leading button  — default slot (label) + `icon` slot
* - trailing button — `trailing-icon` slot + `trailing-label` slot
*
* Activation is reported through the `leading-button-interaction` and
* `trailing-button-interaction` composed events.
*/
var p=class extends s{static{this.styles=f}get isLeadingDisabled(){return this.disabled||this.leadingDisabled}get isTrailingDisabled(){return this.disabled||this.trailingDisabled}constructor(){super(),this.variant=`filled`,this.size=`small`,this.disabled=!1,this.leadingDisabled=!1,this.trailingDisabled=!1,this.expanded=!1,this.disableMorph=!1,this.disableRipple=!1,this.disableElevation=!1,this.disableFocusRing=!1,this.trailingAriaLabel=null,this.hasLeadingIcon=!1,this.hasLeadingLabel=!1,this.hasTrailingIcon=!1,this.hasTrailingLabel=!1,this.handleLeadingButtonClick=e=>{if(this.isLeadingDisabled){e.stopImmediatePropagation(),e.preventDefault();return}this.dispatchEvent(new Event(u,{bubbles:!0,composed:!0}))},this.handleTrailingButtonClick=e=>{if(this.isTrailingDisabled){e.stopImmediatePropagation(),e.preventDefault();return}this.dispatchEvent(new Event(d,{bubbles:!0,composed:!0}))},this.handleLeadingIconSlotChange=()=>{this.hasLeadingIcon=this.assignedLeadingIcons.length>0},this.handleLeadingLabelSlotChange=()=>{this.hasLeadingLabel=m(this.assignedLeadingLabelNodes)},this.handleTrailingIconSlotChange=()=>{this.hasTrailingIcon=this.assignedTrailingIcons.length>0},this.handleTrailingLabelSlotChange=()=>{this.hasTrailingLabel=m(this.assignedTrailingLabelNodes)}}getRenderClasses(){return{container:!0,[this.variant]:!0,[this.size]:!0,"disable-morph":this.disableMorph,disabled:this.disabled}}getLeadingButtonClasses(){return{"leading-button":!0,"has-icon":this.hasLeadingIcon,"has-label":this.hasLeadingLabel,disabled:this.isLeadingDisabled}}getTrailingButtonClasses(){return{"trailing-button":!0,"has-icon":this.hasTrailingIcon,"has-label":this.hasTrailingLabel,expanded:this.expanded,disabled:this.isTrailingDisabled}}render(){return a`<div class="${c(this.getRenderClasses())}" part="container">${this.renderLeadingButton()} ${this.renderTrailingButton()}</div>`}renderLeadingButton(){return a`<button class="${c(this.getLeadingButtonClasses())}" part="leading-button" type="button" ?disabled="${this.isLeadingDisabled}" aria-disabled="${this.isLeadingDisabled||o}" aria-label="${this.getAttribute(`aria-label`)||o}" @click="${this.handleLeadingButtonClick}">${this.renderLeadingOutline()} ${this.renderLeadingElevation()} ${this.renderLeadingBackground()} ${this.renderLeadingContent()} ${this.renderLeadingRipple()} ${this.renderLeadingFocusRing()} ${this.renderTouchTarget()}</button>`}renderLeadingOutline(){return this.variant===`outlined`?a`<span class="outline" aria-hidden="true"></span>`:a``}renderLeadingBackground(){return a`<span class="background" aria-hidden="true"></span>`}renderLeadingElevation(){return this.disableElevation?a`<mdc-elevation id="leading-elevation-part" ignore-global-config disabled="disabled"></mdc-elevation>`:a`<mdc-elevation id="leading-elevation-part"></mdc-elevation>`}renderLeadingContent(){return a`${this.renderLeadingIcon()} ${this.renderLeadingLabel()}`}renderLeadingIcon(){return a`<span class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleLeadingIconSlotChange}"></slot></span>`}renderLeadingLabel(){return a`<span class="label"><slot @slotchange="${this.handleLeadingLabelSlotChange}"></slot></span>`}renderLeadingRipple(){return this.disableRipple?a`<mdc-ripple id="leading-ripple-part" ignore-global-config disabled="disabled"></mdc-ripple>`:a`<mdc-ripple id="leading-ripple-part"></mdc-ripple>`}renderLeadingFocusRing(){return this.disableFocusRing?a`<mdc-focus-ring id="leading-focus-ring-part" ignore-global-config disabled="disabled"></mdc-focus-ring>`:a`<mdc-focus-ring id="leading-focus-ring-part"></mdc-focus-ring>`}renderTrailingButton(){return a`<button class="${c(this.getTrailingButtonClasses())}" part="trailing-button" type="button" ?disabled="${this.isTrailingDisabled}" aria-disabled="${this.isTrailingDisabled||o}" aria-haspopup="menu" aria-expanded="${this.expanded}" aria-label="${this.trailingAriaLabel||o}" @click="${this.handleTrailingButtonClick}">${this.renderTrailingOutline()} ${this.renderTrailingElevation()} ${this.renderTrailingBackground()} ${this.renderTrailingContent()} ${this.renderTrailingRipple()} ${this.renderTrailingFocusRing()} ${this.renderTouchTarget()}</button>`}renderTrailingOutline(){return this.variant===`outlined`?a`<span class="outline" aria-hidden="true"></span>`:a``}renderTrailingBackground(){return a`<span class="background" aria-hidden="true"></span>`}renderTrailingElevation(){return this.disableElevation?a`<mdc-elevation id="trailing-elevation-part" ignore-global-config disabled="disabled"></mdc-elevation>`:a`<mdc-elevation id="trailing-elevation-part"></mdc-elevation>`}renderTrailingContent(){return a`${this.renderTrailingIcon()} ${this.renderTrailingLabel()}`}renderTrailingIcon(){return a`<span class="icon" aria-hidden="true"><slot name="trailing-icon" @slotchange="${this.handleTrailingIconSlotChange}"></slot></span>`}renderTrailingLabel(){return a`<span class="label"><slot name="trailing-label" @slotchange="${this.handleTrailingLabelSlotChange}"></slot></span>`}renderTrailingRipple(){return this.disableRipple?a`<mdc-ripple id="trailing-ripple-part" ignore-global-config disabled="disabled"></mdc-ripple>`:a`<mdc-ripple id="trailing-ripple-part"></mdc-ripple>`}renderTrailingFocusRing(){return this.disableFocusRing?a`<mdc-focus-ring id="trailing-focus-ring-part" ignore-global-config disabled="disabled"></mdc-focus-ring>`:a`<mdc-focus-ring id="trailing-focus-ring-part"></mdc-focus-ring>`}renderTouchTarget(){return a`<span class="touch-target" aria-hidden="true"></span>`}focus(){(this.isLeadingDisabled?this.trailingButtonElement:this.leadingButtonElement)?.focus()}blur(){this.leadingButtonElement?.blur(),this.trailingButtonElement?.blur()}};l([e({type:String,reflect:!0})],p.prototype,`variant`,void 0),l([e({type:String,reflect:!0})],p.prototype,`size`,void 0),l([e({type:Boolean,reflect:!0})],p.prototype,`disabled`,void 0),l([e({type:Boolean,reflect:!0,attribute:`leading-disabled`})],p.prototype,`leadingDisabled`,void 0),l([e({type:Boolean,reflect:!0,attribute:`trailing-disabled`})],p.prototype,`trailingDisabled`,void 0),l([e({type:Boolean,reflect:!0})],p.prototype,`expanded`,void 0),l([e({type:Boolean,reflect:!0,attribute:`disable-morph`})],p.prototype,`disableMorph`,void 0),l([e({type:Boolean,reflect:!0,attribute:`disable-ripple`})],p.prototype,`disableRipple`,void 0),l([e({type:Boolean,reflect:!0,attribute:`disable-elevation`})],p.prototype,`disableElevation`,void 0),l([e({type:Boolean,reflect:!0,attribute:`disable-focus-ring`})],p.prototype,`disableFocusRing`,void 0),l([e({type:String,attribute:`trailing-aria-label`})],p.prototype,`trailingAriaLabel`,void 0),l([t()],p.prototype,`hasLeadingIcon`,void 0),l([t()],p.prototype,`hasLeadingLabel`,void 0),l([t()],p.prototype,`hasTrailingIcon`,void 0),l([t()],p.prototype,`hasTrailingLabel`,void 0),l([n(`.leading-button`)],p.prototype,`leadingButtonElement`,void 0),l([n(`.trailing-button`)],p.prototype,`trailingButtonElement`,void 0),l([r({slot:`icon`,flatten:!0})],p.prototype,`assignedLeadingIcons`,void 0),l([i({flatten:!0})],p.prototype,`assignedLeadingLabelNodes`,void 0),l([r({slot:`trailing-icon`,flatten:!0})],p.prototype,`assignedTrailingIcons`,void 0),l([i({slot:`trailing-label`,flatten:!0})],p.prototype,`assignedTrailingLabelNodes`,void 0);function m(e){for(let t of e)if(t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.wholeText.match(/\S/))return!0;return!1}export{p as BaseSplitButton};
//# sourceMappingURL=base-split-button.js.map