primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-splitbutton.mjs

@@ -12,78 +12,31 @@ import { Ripple } from 'primeng/ripple';
 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 theme = ({ dt }) => `
-.p-splitbutton {
-    display: inline-flex;
-    position: relative;
-    border-radius: ${dt('splitbutton.border.radius')};
-}
-
-.p-splitbutton-button.p-button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-right: 0 none;
-}
-
-.p-splitbutton-button.p-button:focus-visible,
-.p-splitbutton-dropdown.p-button:focus-visible {
-    z-index: 1;
-}
-
-.p-splitbutton-button.p-button:not(:disabled):hover,
-.p-splitbutton-button.p-button:not(:disabled):active {
-    border-right: 0 none;
-}
-
-.p-splitbutton-dropdown.p-button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-}
-
-.p-splitbutton .p-menu {
-    min-width: 100%;
-}
-
-.p-splitbutton-fluid {
-    display: flex;
-}
-
-.p-splitbutton-rounded .p-splitbutton-dropdown {
-    border-start-end-radius: ${dt('splitbutton.rounded.border.radius')};
-    border-end-end-radius: ${dt('splitbutton.rounded.border.radius')};
-}
-
-.p-splitbutton-rounded > .p-splitbutton-button {
-    border-start-start-radius: ${dt('splitbutton.rounded.border.radius')};
-    border-end-start-radius: ${dt('splitbutton.rounded.border.radius')};
-}
-
-.p-splitbutton-raised {
-    box-shadow: ${dt('splitbutton.raised.shadow')};
-}
-`;
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance }) => [
         'p-splitbutton p-component',
         {
-            'p-splitbutton-raised': props.raised,
-            'p-splitbutton-rounded': props.rounded,
-            'p-splitbutton-fluid': props.fluid
+            'p-splitbutton-raised': instance.raised,
+            'p-splitbutton-rounded': instance.rounded,
+            'p-splitbutton-outlined': instance.outlined,
+            'p-splitbutton-text': instance.text,
+            [`p-splitbutton-${instance.size === 'small' ? 'sm' : 'lg'}`]: instance.size
         }
     ],
     pcButton: 'p-splitbutton-button',
-    pcDropdown: 'p-splitbutton-dropdown'
+    pcDropdown: 'p-splitbutton-dropdown p-button-icon-only'
 };
 class SplitButtonStyle extends BaseStyle {
     name = 'splitbutton';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SplitButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SplitButtonStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitButtonStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SplitButtonStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitButtonStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -181,13 +134,9 @@ class SplitButton extends BaseComponent {
      * @group Props
      */
     tooltipOptions;
-    /**
-     * Inline style of the element.
-     * @group Props
-     */
-    style;
     /**
      * Class of the element.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -293,7 +242,6 @@ class SplitButton extends BaseComponent {
      * @group Emits
      */
     onDropdownClick = new EventEmitter();
-    containerViewChild;
     buttonViewChild;
     menu;
     /**
@@ -332,24 +280,13 @@ class SplitButton extends BaseComponent {
             }
         });
     }
-    get containerClass() {
-        const cls = {
-            'p-splitbutton p-component': true,
-            'p-splitbutton-raised': this.raised,
-            'p-splitbutton-rounded': this.rounded,
-            'p-splitbutton-outlined': this.outlined,
-            'p-splitbutton-text': this.text,
-            [`p-splitbutton-${this.size === 'small' ? 'sm' : 'lg'}`]: this.size
-        };
-        return { ...cls };
-    }
     onDefaultButtonClick(event) {
         this.onClick.emit(event);
         this.menu.hide();
     }
     onDropdownButtonClick(event) {
         this.onDropdownClick.emit(event);
-        this.menu?.toggle({ currentTarget: this.containerViewChild?.nativeElement, relativeAlign: this.appendTo == null });
+        this.menu?.toggle({ currentTarget: this.el?.nativeElement, relativeAlign: this.appendTo == null });
     }
     onDropdownButtonKeydown(event) {
         if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
@@ -365,189 +302,188 @@ class SplitButton extends BaseComponent {
         this.isExpanded.set(true);
         this.onMenuShow.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SplitButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: SplitButton, isStandalone: true, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: { model: "model", severity: "severity", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], size: "size", plain: ["plain", "plain", booleanAttribute], icon: "icon", iconPos: "iconPos", label: "label", tooltip: "tooltip", tooltipOptions: "tooltipOptions", style: "style", styleClass: "styleClass", menuStyle: "menuStyle", menuStyleClass: "menuStyleClass", dropdownIcon: "dropdownIcon", appendTo: "appendTo", dir: "dir", expandAriaLabel: "expandAriaLabel", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", buttonProps: "buttonProps", menuButtonProps: "menuButtonProps", autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], menuButtonDisabled: ["menuButtonDisabled", "menuButtonDisabled", booleanAttribute], buttonDisabled: ["buttonDisabled", "buttonDisabled", booleanAttribute] }, outputs: { onClick: "onClick", onMenuHide: "onMenuHide", onMenuShow: "onMenuShow", onDropdownClick: "onDropdownClick" }, providers: [SplitButtonStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "buttonViewChild", first: true, predicate: ["defaultbtn"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div #container [ngClass]="containerClass" [class]="styleClass" [ngStyle]="style">
-            <ng-container *ngIf="contentTemplate || _contentTemplate; else defaultButton">
-                <button
-                    class="p-splitbutton-button"
-                    type="button"
-                    pButton
-                    pRipple
-                    [severity]="severity"
-                    [text]="text"
-                    [outlined]="outlined"
-                    [size]="size"
-                    [icon]="icon"
-                    [iconPos]="iconPos"
-                    (click)="onDefaultButtonClick($event)"
-                    [disabled]="disabled"
-                    [attr.tabindex]="tabindex"
-                    [attr.aria-label]="buttonProps?.['ariaLabel'] || label"
-                    [pAutoFocus]="autofocus"
-                    [pTooltip]="tooltip"
-                    [tooltipOptions]="tooltipOptions"
-                >
-                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-                </button>
-            </ng-container>
-            <ng-template #defaultButton>
-                <button
-                    #defaultbtn
-                    class="p-splitbutton-button"
-                    type="button"
-                    pButton
-                    pRipple
-                    [severity]="severity"
-                    [text]="text"
-                    [outlined]="outlined"
-                    [size]="size"
-                    [icon]="icon"
-                    [iconPos]="iconPos"
-                    [label]="label"
-                    (click)="onDefaultButtonClick($event)"
-                    [disabled]="buttonDisabled"
-                    [attr.tabindex]="tabindex"
-                    [attr.aria-label]="buttonProps?.['ariaLabel']"
-                    [pAutoFocus]="autofocus"
-                    [pTooltip]="tooltip"
-                    [tooltipOptions]="tooltipOptions"
-                ></button>
-            </ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: SplitButton, isStandalone: true, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: { model: "model", severity: "severity", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], size: "size", plain: ["plain", "plain", booleanAttribute], icon: "icon", iconPos: "iconPos", label: "label", tooltip: "tooltip", tooltipOptions: "tooltipOptions", styleClass: "styleClass", menuStyle: "menuStyle", menuStyleClass: "menuStyleClass", dropdownIcon: "dropdownIcon", appendTo: "appendTo", dir: "dir", expandAriaLabel: "expandAriaLabel", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", buttonProps: "buttonProps", menuButtonProps: "menuButtonProps", autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], menuButtonDisabled: ["menuButtonDisabled", "menuButtonDisabled", booleanAttribute], buttonDisabled: ["buttonDisabled", "buttonDisabled", booleanAttribute] }, outputs: { onClick: "onClick", onMenuHide: "onMenuHide", onMenuShow: "onMenuShow", onDropdownClick: "onDropdownClick" }, host: { properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [SplitButtonStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "buttonViewChild", first: true, predicate: ["defaultbtn"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-container *ngIf="contentTemplate || _contentTemplate; else defaultButton">
             <button
+                [class]="cx('pcButton')"
                 type="button"
                 pButton
                 pRipple
-                [size]="size"
                 [severity]="severity"
                 [text]="text"
                 [outlined]="outlined"
-                class="p-splitbutton-dropdown p-button-icon-only"
-                (click)="onDropdownButtonClick($event)"
-                (keydown)="onDropdownButtonKeydown($event)"
-                [disabled]="menuButtonDisabled"
-                [attr.aria-label]="menuButtonProps?.['ariaLabel'] || expandAriaLabel"
-                [attr.aria-haspopup]="menuButtonProps?.['ariaHasPopup'] || true"
-                [attr.aria-expanded]="menuButtonProps?.['ariaExpanded'] || isExpanded()"
-                [attr.aria-controls]="menuButtonProps?.['ariaControls'] || ariaId"
+                [size]="size"
+                [icon]="icon"
+                [iconPos]="iconPos"
+                (click)="onDefaultButtonClick($event)"
+                [disabled]="disabled"
+                [attr.tabindex]="tabindex"
+                [attr.aria-label]="buttonProps?.['ariaLabel'] || label"
+                [pAutoFocus]="autofocus"
+                [pTooltip]="tooltip"
+                [tooltipOptions]="tooltipOptions"
             >
-                <span *ngIf="dropdownIcon" [class]="dropdownIcon"></span>
-                <ng-container *ngIf="!dropdownIcon">
-                    <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
-                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
-                </ng-container>
+                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
             </button>
-            <p-tieredMenu
-                [id]="ariaId"
-                #menu
-                [popup]="true"
-                [model]="model"
-                [style]="menuStyle"
-                [styleClass]="menuStyleClass"
-                [appendTo]="appendTo"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-                (onHide)="onHide()"
-                (onShow)="onShow()"
-            ></p-tieredMenu>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        </ng-container>
+        <ng-template #defaultButton>
+            <button
+                #defaultbtn
+                [class]="cx('pcButton')"
+                type="button"
+                pButton
+                pRipple
+                [severity]="severity"
+                [text]="text"
+                [outlined]="outlined"
+                [size]="size"
+                [icon]="icon"
+                [iconPos]="iconPos"
+                [label]="label"
+                (click)="onDefaultButtonClick($event)"
+                [disabled]="buttonDisabled"
+                [attr.tabindex]="tabindex"
+                [attr.aria-label]="buttonProps?.['ariaLabel']"
+                [pAutoFocus]="autofocus"
+                [pTooltip]="tooltip"
+                [tooltipOptions]="tooltipOptions"
+            ></button>
+        </ng-template>
+        <button
+            type="button"
+            pButton
+            pRipple
+            [size]="size"
+            [severity]="severity"
+            [text]="text"
+            [outlined]="outlined"
+            [class]="cx('pcDropdown')"
+            (click)="onDropdownButtonClick($event)"
+            (keydown)="onDropdownButtonKeydown($event)"
+            [disabled]="menuButtonDisabled"
+            [attr.aria-label]="menuButtonProps?.['ariaLabel'] || expandAriaLabel"
+            [attr.aria-haspopup]="menuButtonProps?.['ariaHasPopup'] || true"
+            [attr.aria-expanded]="menuButtonProps?.['ariaExpanded'] || isExpanded()"
+            [attr.aria-controls]="menuButtonProps?.['ariaControls'] || ariaId"
+        >
+            <span *ngIf="dropdownIcon" [class]="dropdownIcon"></span>
+            <ng-container *ngIf="!dropdownIcon">
+                <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
+                <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+        <p-tieredmenu
+            [id]="ariaId"
+            #menu
+            [popup]="true"
+            [model]="model"
+            [style]="menuStyle"
+            [styleClass]="menuStyleClass"
+            [appendTo]="appendTo"
+            [showTransitionOptions]="showTransitionOptions"
+            [hideTransitionOptions]="hideTransitionOptions"
+            (onHide)="onHide()"
+            (onShow)="onShow()"
+        ></p-tieredmenu>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { 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", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SplitButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-splitbutton, p-splitButton, p-split-button',
                     standalone: true,
                     imports: [CommonModule, ButtonDirective, TieredMenu, AutoFocus, ChevronDownIcon, Ripple, TooltipModule, SharedModule],
                     template: `
-        <div #container [ngClass]="containerClass" [class]="styleClass" [ngStyle]="style">
-            <ng-container *ngIf="contentTemplate || _contentTemplate; else defaultButton">
-                <button
-                    class="p-splitbutton-button"
-                    type="button"
-                    pButton
-                    pRipple
-                    [severity]="severity"
-                    [text]="text"
-                    [outlined]="outlined"
-                    [size]="size"
-                    [icon]="icon"
-                    [iconPos]="iconPos"
-                    (click)="onDefaultButtonClick($event)"
-                    [disabled]="disabled"
-                    [attr.tabindex]="tabindex"
-                    [attr.aria-label]="buttonProps?.['ariaLabel'] || label"
-                    [pAutoFocus]="autofocus"
-                    [pTooltip]="tooltip"
-                    [tooltipOptions]="tooltipOptions"
-                >
-                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-                </button>
-            </ng-container>
-            <ng-template #defaultButton>
-                <button
-                    #defaultbtn
-                    class="p-splitbutton-button"
-                    type="button"
-                    pButton
-                    pRipple
-                    [severity]="severity"
-                    [text]="text"
-                    [outlined]="outlined"
-                    [size]="size"
-                    [icon]="icon"
-                    [iconPos]="iconPos"
-                    [label]="label"
-                    (click)="onDefaultButtonClick($event)"
-                    [disabled]="buttonDisabled"
-                    [attr.tabindex]="tabindex"
-                    [attr.aria-label]="buttonProps?.['ariaLabel']"
-                    [pAutoFocus]="autofocus"
-                    [pTooltip]="tooltip"
-                    [tooltipOptions]="tooltipOptions"
-                ></button>
-            </ng-template>
+        <ng-container *ngIf="contentTemplate || _contentTemplate; else defaultButton">
             <button
+                [class]="cx('pcButton')"
                 type="button"
                 pButton
                 pRipple
-                [size]="size"
                 [severity]="severity"
                 [text]="text"
                 [outlined]="outlined"
-                class="p-splitbutton-dropdown p-button-icon-only"
-                (click)="onDropdownButtonClick($event)"
-                (keydown)="onDropdownButtonKeydown($event)"
-                [disabled]="menuButtonDisabled"
-                [attr.aria-label]="menuButtonProps?.['ariaLabel'] || expandAriaLabel"
-                [attr.aria-haspopup]="menuButtonProps?.['ariaHasPopup'] || true"
-                [attr.aria-expanded]="menuButtonProps?.['ariaExpanded'] || isExpanded()"
-                [attr.aria-controls]="menuButtonProps?.['ariaControls'] || ariaId"
+                [size]="size"
+                [icon]="icon"
+                [iconPos]="iconPos"
+                (click)="onDefaultButtonClick($event)"
+                [disabled]="disabled"
+                [attr.tabindex]="tabindex"
+                [attr.aria-label]="buttonProps?.['ariaLabel'] || label"
+                [pAutoFocus]="autofocus"
+                [pTooltip]="tooltip"
+                [tooltipOptions]="tooltipOptions"
             >
-                <span *ngIf="dropdownIcon" [class]="dropdownIcon"></span>
-                <ng-container *ngIf="!dropdownIcon">
-                    <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
-                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
-                </ng-container>
+                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
             </button>
-            <p-tieredMenu
-                [id]="ariaId"
-                #menu
-                [popup]="true"
-                [model]="model"
-                [style]="menuStyle"
-                [styleClass]="menuStyleClass"
-                [appendTo]="appendTo"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-                (onHide)="onHide()"
-                (onShow)="onShow()"
-            ></p-tieredMenu>
-        </div>
+        </ng-container>
+        <ng-template #defaultButton>
+            <button
+                #defaultbtn
+                [class]="cx('pcButton')"
+                type="button"
+                pButton
+                pRipple
+                [severity]="severity"
+                [text]="text"
+                [outlined]="outlined"
+                [size]="size"
+                [icon]="icon"
+                [iconPos]="iconPos"
+                [label]="label"
+                (click)="onDefaultButtonClick($event)"
+                [disabled]="buttonDisabled"
+                [attr.tabindex]="tabindex"
+                [attr.aria-label]="buttonProps?.['ariaLabel']"
+                [pAutoFocus]="autofocus"
+                [pTooltip]="tooltip"
+                [tooltipOptions]="tooltipOptions"
+            ></button>
+        </ng-template>
+        <button
+            type="button"
+            pButton
+            pRipple
+            [size]="size"
+            [severity]="severity"
+            [text]="text"
+            [outlined]="outlined"
+            [class]="cx('pcDropdown')"
+            (click)="onDropdownButtonClick($event)"
+            (keydown)="onDropdownButtonKeydown($event)"
+            [disabled]="menuButtonDisabled"
+            [attr.aria-label]="menuButtonProps?.['ariaLabel'] || expandAriaLabel"
+            [attr.aria-haspopup]="menuButtonProps?.['ariaHasPopup'] || true"
+            [attr.aria-expanded]="menuButtonProps?.['ariaExpanded'] || isExpanded()"
+            [attr.aria-controls]="menuButtonProps?.['ariaControls'] || ariaId"
+        >
+            <span *ngIf="dropdownIcon" [class]="dropdownIcon"></span>
+            <ng-container *ngIf="!dropdownIcon">
+                <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
+                <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+        <p-tieredmenu
+            [id]="ariaId"
+            #menu
+            [popup]="true"
+            [model]="model"
+            [style]="menuStyle"
+            [styleClass]="menuStyleClass"
+            [appendTo]="appendTo"
+            [showTransitionOptions]="showTransitionOptions"
+            [hideTransitionOptions]="hideTransitionOptions"
+            (onHide)="onHide()"
+            (onShow)="onShow()"
+        ></p-tieredmenu>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [SplitButtonStyle],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
                 }]
         }], propDecorators: { model: [{
                 type: Input
@@ -580,8 +516,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], tooltipOptions: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], menuStyle: [{
@@ -627,9 +561,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Output
             }], onDropdownClick: [{
                 type: Output
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container']
             }], buttonViewChild: [{
                 type: ViewChild,
                 args: ['defaultbtn']
@@ -647,11 +578,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class SplitButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: SplitButtonModule, imports: [SplitButton, SharedModule], exports: [SplitButton, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SplitButtonModule, imports: [SplitButton, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SplitButtonModule, imports: [SplitButton, SharedModule], exports: [SplitButton, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitButtonModule, imports: [SplitButton, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SplitButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SplitButton, SharedModule],