primeng/fesm2022/primeng-splitbutton.mjs

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

export * from 'primeng/types/splitbutton';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, computed, numberAttribute, output, viewChild, ElementRef, contentChild, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { ChevronDown } from '@primeicons/angular/chevron-down';
import { uuid } from '@primeuix/utils';
import { AutoFocus } from 'primeng/autofocus';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ButtonDirective } from 'primeng/button';
import { TieredMenu } from 'primeng/tieredmenu';
import * as i2 from 'primeng/tooltip';
import { TooltipModule } from 'primeng/tooltip';
import { style } from '@primeuix/styles/splitbutton';
import { BaseStyle } from 'primeng/base';

const classes = {
    root: ({ instance }) => {
        const size = instance.size();
        return [
            'p-splitbutton p-component',
            {
                'p-splitbutton-raised': instance.raised(),
                'p-splitbutton-rounded': instance.rounded(),
                'p-splitbutton-outlined': instance.outlined(),
                'p-splitbutton-text': instance.text(),
                [`p-splitbutton-${size === 'small' ? 'sm' : 'lg'}`]: size
            }
        ];
    },
    pcButton: 'p-splitbutton-button',
    pcDropdown: 'p-splitbutton-dropdown p-button-icon-only'
};
class SplitButtonStyle extends BaseStyle {
    name = 'splitbutton';
    style = style;
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * SplitButton groups a set of commands in an overlay with a default command.
 *
 * [Live Demo](https://www.primeng.org/splitbutton/)
 *
 * @module splitbuttonstyle
 *
 */
var SplitButtonClasses;
(function (SplitButtonClasses) {
    /**
     * Class name of the root element
     */
    SplitButtonClasses["root"] = "p-splitbutton";
    /**
     * Class name of the button element
     */
    SplitButtonClasses["pcButton"] = "p-splitbutton-button";
    /**
     * Class name of the dropdown element
     */
    SplitButtonClasses["pcDropdown"] = "p-splitbutton-dropdown";
})(SplitButtonClasses || (SplitButtonClasses = {}));

const SPLITBUTTON_INSTANCE = new InjectionToken('SPLITBUTTON_INSTANCE');
/**
 * SplitButton groups a set of commands in an overlay with a default command.
 * @group Components
 */
class SplitButton extends BaseComponent {
    componentName = 'SplitButton';
    $pcSplitButton = inject(SPLITBUTTON_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    /**
     * MenuModel instance to define the overlay items.
     * @group Props
     */
    model_ = input(undefined, { ...(ngDevMode ? { debugName: "model_" } : /* istanbul ignore next */ {}), alias: 'model' });
    /**
     * Defines the style of the button.
     * @group Props
     */
    severity = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "severity" }] : /* istanbul ignore next */ []));
    /**
     * Add a shadow to indicate elevation.
     * @group Props
     */
    raised = input(false, { ...(ngDevMode ? { debugName: "raised" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Add a circular border radius to the button.
     * @group Props
     */
    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Add a textual class to the button without a background initially.
     * @group Props
     */
    text = input(false, { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Add a border class without a background initially.
     * @group Props
     */
    outlined = input(false, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Defines the size of the button.
     * @group Props
     */
    size = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
    /**
     * Add a plain textual class to the button without a background initially.
     * @group Props
     */
    plain = input(false, { ...(ngDevMode ? { debugName: "plain" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Name of the icon.
     * @group Props
     */
    icon = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
    /**
     * Position of the icon.
     * @group Props
     */
    iconPos = input('left', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
    /**
     * Text of the button.
     * @group Props
     */
    label = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
    /**
     * Tooltip for the main button.
     * @group Props
     */
    tooltip = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
    /**
     * Tooltip options for the main button.
     * @group Props
     */
    tooltipOptions = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "tooltipOptions" }] : /* istanbul ignore next */ []));
    /**
     * Inline style of the overlay menu.
     * @group Props
     */
    menuStyle = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "menuStyle" }] : /* istanbul ignore next */ []));
    /**
     * Style class of the overlay menu.
     * @group Props
     */
    menuStyleClass = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "menuStyleClass" }] : /* istanbul ignore next */ []));
    /**
     * Name of the dropdown icon.
     * @group Props
     */
    dropdownIcon = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "dropdownIcon" }] : /* istanbul ignore next */ []));
    /**
     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
     * @defaultValue 'body'
     * @group Props
     */
    appendTo = input('body', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
    /**
     * Indicates the direction of the element.
     * @group Props
     */
    dir = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "dir" }] : /* istanbul ignore next */ []));
    /**
     * Defines a string that labels the expand button for accessibility.
     * @group Props
     */
    expandAriaLabel = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
    /**
     * The motion options.
     * @group Props
     */
    motionOptions = input(undefined, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
    computedMotionOptions = computed(() => {
        return {
            ...this.ptm('motion'),
            ...this.motionOptions()
        };
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
    /**
     * Button Props
     */
    buttonProps = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "buttonProps" }] : /* istanbul ignore next */ []));
    /**
     * Menu Button Props
     */
    menuButtonProps = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "menuButtonProps" }] : /* istanbul ignore next */ []));
    /**
     * When present, it specifies that the component should automatically get focus on load.
     * @group Props
     */
    autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * When present, it specifies that the element should be disabled.
     * @group Props
     */
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Index of the element in tabbing order.
     * @group Props
     */
    tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    /**
     * When present, it specifies that the menu button element should be disabled.
     * @group Props
     */
    menuButtonDisabled = input(false, { ...(ngDevMode ? { debugName: "menuButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * When present, it specifies that the button element should be disabled.
     * @group Props
     */
    buttonDisabled = input(false, { ...(ngDevMode ? { debugName: "buttonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Callback to invoke when default command button is clicked.
     * @param {MouseEvent} event - Mouse event.
     * @group Emits
     */
    onClick = output();
    /**
     * Callback to invoke when overlay menu is hidden.
     * @group Emits
     */
    onMenuHide = output();
    /**
     * Callback to invoke when overlay menu is shown.
     * @group Emits
     */
    onMenuShow = output();
    /**
     * Callback to invoke when dropdown button is clicked.
     * @param {MouseEvent} event - Mouse event.
     * @group Emits
     */
    onDropdownClick = output();
    buttonViewChild = viewChild('defaultbtn', { ...(ngDevMode ? { debugName: "buttonViewChild" } : /* istanbul ignore next */ {}), read: ElementRef });
    menu = viewChild('menu', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
    /**
     * Custom content template.
     * @group Templates
     */
    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom dropdown icon template.
     * @group Templates
     **/
    dropdownIconTemplate = contentChild('dropdownicon', { ...(ngDevMode ? { debugName: "dropdownIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    ariaId = uuid('pn_id_');
    isExpanded = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
    _componentStyle = inject(SplitButtonStyle);
    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
    $buttonDisabled = computed(() => this.disabled() || this.buttonDisabled(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$buttonDisabled" }] : /* istanbul ignore next */ []));
    $menuButtonDisabled = computed(() => this.disabled() || this.menuButtonDisabled(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$menuButtonDisabled" }] : /* istanbul ignore next */ []));
    onDefaultButtonClick(event) {
        this.onClick.emit(event);
        this.menu()?.hide();
    }
    onDropdownButtonClick(event) {
        this.onDropdownClick.emit(event);
        this.menu()?.toggle({ currentTarget: this.el?.nativeElement, relativeAlign: this.$appendTo() == 'self' });
    }
    onDropdownButtonKeydown(event) {
        if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
            this.onDropdownButtonClick();
            event.preventDefault();
        }
    }
    onHide() {
        this.isExpanded.set(false);
        this.onMenuHide.emit();
    }
    onShow() {
        this.isExpanded.set(true);
        this.onMenuShow.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButton, isStandalone: true, selector: "p-splitbutton, p-split-button", inputs: { model_: { classPropertyName: "model_", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipOptions: { classPropertyName: "tooltipOptions", publicName: "tooltipOptions", isSignal: true, isRequired: false, transformFunction: null }, menuStyle: { classPropertyName: "menuStyle", publicName: "menuStyle", isSignal: true, isRequired: false, transformFunction: null }, menuStyleClass: { classPropertyName: "menuStyleClass", publicName: "menuStyleClass", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: true, isRequired: false, transformFunction: null }, menuButtonProps: { classPropertyName: "menuButtonProps", publicName: "menuButtonProps", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, menuButtonDisabled: { classPropertyName: "menuButtonDisabled", publicName: "menuButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "buttonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onMenuHide: "onMenuHide", onMenuShow: "onMenuShow", onDropdownClick: "onDropdownClick" }, host: { properties: { "class": "cx('root')", "attr.data-p-severity": "severity()" } }, providers: [SplitButtonStyle, { provide: SPLITBUTTON_INSTANCE, useExisting: SplitButton }, { provide: PARENT_INSTANCE, useExisting: SplitButton }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"], isSignal: true }], viewQueries: [{ propertyName: "buttonViewChild", first: true, predicate: ["defaultbtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        @if (contentTemplate()) {
            <button
                type="button"
                [pButton]="buttonProps()"
                [severity]="severity()"
                [text]="text()"
                [outlined]="outlined()"
                [size]="size()"
                [plain]="plain()"
                [disabled]="disabled()"
                [tabindex]="tabindex()"
                [class]="cx('pcButton')"
                [attr.aria-label]="label()"
                [pButtonPT]="ptm('pcButton')"
                [pButtonUnstyled]="unstyled()"
                [pAutoFocus]="autofocus()"
                [pTooltip]="tooltip()"
                [pTooltipUnstyled]="unstyled()"
                [tooltipOptions]="tooltipOptions()"
                (click)="onDefaultButtonClick($event)"
            >
                <ng-container *ngTemplateOutlet="contentTemplate()" />
            </button>
        } @else {
            <button
                #defaultbtn
                type="button"
                [pButton]="buttonProps()"
                [severity]="severity()"
                [text]="text()"
                [outlined]="outlined()"
                [size]="size()"
                [plain]="plain()"
                [disabled]="$buttonDisabled()"
                [tabindex]="tabindex()"
                [class]="cx('pcButton')"
                [attr.aria-label]="label()"
                [pButtonPT]="ptm('pcButton')"
                [pButtonUnstyled]="unstyled()"
                [pAutoFocus]="autofocus()"
                [pTooltip]="tooltip()"
                [pTooltipUnstyled]="unstyled()"
                [tooltipOptions]="tooltipOptions()"
                (click)="onDefaultButtonClick($event)"
            >
                @if (icon() && iconPos() !== 'right' && iconPos() !== 'bottom') {
                    <i [class]="icon()"></i>
                }
                {{ label() }}
                @if (icon() && (iconPos() === 'right' || iconPos() === 'bottom')) {
                    <i [class]="icon()"></i>
                }
            </button>
        }
        <button
            type="button"
            iconOnly
            [pButton]="menuButtonProps()"
            [severity]="severity()"
            [text]="text()"
            [outlined]="outlined()"
            [size]="size()"
            [plain]="plain()"
            [disabled]="$menuButtonDisabled()"
            [class]="cx('pcDropdown')"
            [attr.aria-label]="expandAriaLabel()"
            [attr.aria-haspopup]="true"
            [attr.aria-expanded]="isExpanded()"
            [attr.aria-controls]="ariaId"
            [pButtonPT]="ptm('pcDropdown')"
            [pButtonUnstyled]="unstyled()"
            (click)="onDropdownButtonClick($event)"
            (keydown)="onDropdownButtonKeydown($event)"
        >
            @if (dropdownIcon()) {
                <i [class]="dropdownIcon()"></i>
            } @else if (dropdownIconTemplate()) {
                <ng-container *ngTemplateOutlet="dropdownIconTemplate()" />
            } @else {
                <svg data-p-icon="chevron-down" [pBind]="ptm('pcDropdown')['icon']" />
            }
        </button>
        <p-tieredmenu
            [id]="ariaId"
            #menu
            [popup]="true"
            [model]="model_()"
            [style]="menuStyle()"
            [styleClass]="menuStyleClass()"
            [appendTo]="$appendTo()"
            [motionOptions]="computedMotionOptions()"
            (onHide)="onHide()"
            (onShow)="onShow()"
            [pt]="ptm('pcMenu')"
            [unstyled]="unstyled()"
        />
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TieredMenu, selector: "p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ChevronDown, selector: "svg[data-p-icon=\"chevron-down\"]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButton, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-splitbutton, p-split-button',
                    standalone: true,
                    imports: [NgTemplateOutlet, ButtonDirective, AutoFocus, TieredMenu, ChevronDown, TooltipModule, Bind],
                    template: `
        @if (contentTemplate()) {
            <button
                type="button"
                [pButton]="buttonProps()"
                [severity]="severity()"
                [text]="text()"
                [outlined]="outlined()"
                [size]="size()"
                [plain]="plain()"
                [disabled]="disabled()"
                [tabindex]="tabindex()"
                [class]="cx('pcButton')"
                [attr.aria-label]="label()"
                [pButtonPT]="ptm('pcButton')"
                [pButtonUnstyled]="unstyled()"
                [pAutoFocus]="autofocus()"
                [pTooltip]="tooltip()"
                [pTooltipUnstyled]="unstyled()"
                [tooltipOptions]="tooltipOptions()"
                (click)="onDefaultButtonClick($event)"
            >
                <ng-container *ngTemplateOutlet="contentTemplate()" />
            </button>
        } @else {
            <button
                #defaultbtn
                type="button"
                [pButton]="buttonProps()"
                [severity]="severity()"
                [text]="text()"
                [outlined]="outlined()"
                [size]="size()"
                [plain]="plain()"
                [disabled]="$buttonDisabled()"
                [tabindex]="tabindex()"
                [class]="cx('pcButton')"
                [attr.aria-label]="label()"
                [pButtonPT]="ptm('pcButton')"
                [pButtonUnstyled]="unstyled()"
                [pAutoFocus]="autofocus()"
                [pTooltip]="tooltip()"
                [pTooltipUnstyled]="unstyled()"
                [tooltipOptions]="tooltipOptions()"
                (click)="onDefaultButtonClick($event)"
            >
                @if (icon() && iconPos() !== 'right' && iconPos() !== 'bottom') {
                    <i [class]="icon()"></i>
                }
                {{ label() }}
                @if (icon() && (iconPos() === 'right' || iconPos() === 'bottom')) {
                    <i [class]="icon()"></i>
                }
            </button>
        }
        <button
            type="button"
            iconOnly
            [pButton]="menuButtonProps()"
            [severity]="severity()"
            [text]="text()"
            [outlined]="outlined()"
            [size]="size()"
            [plain]="plain()"
            [disabled]="$menuButtonDisabled()"
            [class]="cx('pcDropdown')"
            [attr.aria-label]="expandAriaLabel()"
            [attr.aria-haspopup]="true"
            [attr.aria-expanded]="isExpanded()"
            [attr.aria-controls]="ariaId"
            [pButtonPT]="ptm('pcDropdown')"
            [pButtonUnstyled]="unstyled()"
            (click)="onDropdownButtonClick($event)"
            (keydown)="onDropdownButtonKeydown($event)"
        >
            @if (dropdownIcon()) {
                <i [class]="dropdownIcon()"></i>
            } @else if (dropdownIconTemplate()) {
                <ng-container *ngTemplateOutlet="dropdownIconTemplate()" />
            } @else {
                <svg data-p-icon="chevron-down" [pBind]="ptm('pcDropdown')['icon']" />
            }
        </button>
        <p-tieredmenu
            [id]="ariaId"
            #menu
            [popup]="true"
            [model]="model_()"
            [style]="menuStyle()"
            [styleClass]="menuStyleClass()"
            [appendTo]="$appendTo()"
            [motionOptions]="computedMotionOptions()"
            (onHide)="onHide()"
            (onShow)="onShow()"
            [pt]="ptm('pcMenu')"
            [unstyled]="unstyled()"
        />
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    providers: [SplitButtonStyle, { provide: SPLITBUTTON_INSTANCE, useExisting: SplitButton }, { provide: PARENT_INSTANCE, useExisting: SplitButton }],
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[class]': "cx('root')",
                        '[attr.data-p-severity]': 'severity()'
                    },
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { model_: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], plain: [{ type: i0.Input, args: [{ isSignal: true, alias: "plain", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOptions", required: false }] }], menuStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuStyle", required: false }] }], menuStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuStyleClass", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], buttonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonProps", required: false }] }], menuButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButtonProps", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], menuButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButtonDisabled", required: false }] }], buttonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonDisabled", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onMenuHide: [{ type: i0.Output, args: ["onMenuHide"] }], onMenuShow: [{ type: i0.Output, args: ["onMenuShow"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], buttonViewChild: [{ type: i0.ViewChild, args: ['defaultbtn', { ...{ read: ElementRef }, isSignal: true }] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], dropdownIconTemplate: [{ type: i0.ContentChild, args: ['dropdownicon', { ...{ descendants: false }, isSignal: true }] }] } });
class SplitButtonModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonModule, imports: [SplitButton], exports: [SplitButton] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonModule, imports: [SplitButton] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SplitButton],
                    exports: [SplitButton]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { SplitButton, SplitButtonClasses, SplitButtonModule, SplitButtonStyle };
//# sourceMappingURL=primeng-splitbutton.mjs.map