primeng
Version:
[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [ • 16.8 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, signal, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
import { PrimeTemplate } from 'primeng/api';
import * as i2 from 'primeng/button';
import { ButtonModule } from 'primeng/button';
import { ChevronDownIcon } from 'primeng/icons/chevrondown';
import * as i3 from 'primeng/tieredmenu';
import { TieredMenuModule } from 'primeng/tieredmenu';
import { UniqueComponentId } from 'primeng/utils';
/**
* SplitButton groups a set of commands in an overlay with a default command.
* @group Components
*/
class SplitButton {
/**
* MenuModel instance to define the overlay items.
* @group Props
*/
model;
/**
* Name of the icon.
* @group Props
*/
icon;
/**
* Position of the icon.
* @group Props
*/
iconPos = 'left';
/**
* Text of the button.
* @group Props
*/
label;
/**
* Inline style of the element.
* @group Props
*/
style;
/**
* Class of the element.
* @group Props
*/
styleClass;
/**
* Inline style of the overlay menu.
* @group Props
*/
menuStyle;
/**
* Style class of the overlay menu.
* @group Props
*/
menuStyleClass;
/**
* When present, it specifies that the element should be disabled.
* @group Props
*/
disabled;
/**
* Index of the element in tabbing order.
* @group Prop
*/
tabindex;
/**
* 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).
* @group Props
*/
appendTo;
/**
* Indicates the direction of the element.
* @group Props
*/
dir;
/**
* Defines a string that labels the expand button for accessibility.
* @group Props
*/
expandAriaLabel;
/**
* Transition options of the show animation.
* @group Props
*/
showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
/**
* Transition options of the hide animation.
* @group Props
*/
hideTransitionOptions = '.1s linear';
/**
* Button Props
*/
buttonProps;
/**
* Menu Button Props
*/
menuButtonProps;
/**
* Callback to invoke when default command button is clicked.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
onClick = new EventEmitter();
/**
* Callback to invoke when dropdown button is clicked.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
onDropdownClick = new EventEmitter();
containerViewChild;
buttonViewChild;
menu;
templates;
contentTemplate;
dropdownIconTemplate;
ariaId;
isExpanded = signal(false);
ngOnInit() {
this.ariaId = UniqueComponentId();
}
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'content':
this.contentTemplate = item.template;
break;
case 'dropdownicon':
this.dropdownIconTemplate = item.template;
break;
default:
this.contentTemplate = item.template;
break;
}
});
}
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.isExpanded.set(this.menu.visible);
}
onDropdownButtonKeydown(event) {
if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
this.onDropdownButtonClick();
event.preventDefault();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: SplitButton, selector: "p-splitButton", inputs: { model: "model", icon: "icon", iconPos: "iconPos", label: "label", style: "style", styleClass: "styleClass", menuStyle: "menuStyle", menuStyleClass: "menuStyleClass", disabled: "disabled", tabindex: "tabindex", appendTo: "appendTo", dir: "dir", expandAriaLabel: "expandAriaLabel", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", buttonProps: "buttonProps", menuButtonProps: "menuButtonProps" }, outputs: { onClick: "onClick", onDropdownClick: "onDropdownClick" }, host: { classAttribute: "p-element" }, queries: [{ 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 }], ngImport: i0, template: `
<div #container [ngClass]="'p-splitbutton p-component'" [ngStyle]="style" [class]="styleClass">
<ng-container *ngIf="contentTemplate; else defaultButton">
<button
class="p-splitbutton-defaultbutton"
type="button"
pButton
[icon]="icon"
[iconPos]="iconPos"
(click)="onDefaultButtonClick($event)"
[disabled]="disabled"
[attr.tabindex]="tabindex"
[attr.aria-label]="buttonProps?.['aria-label'] || label"
>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</button>
</ng-container>
<ng-template #defaultButton>
<button
#defaultbtn
class="p-splitbutton-defaultbutton"
type="button"
pButton
[icon]="icon"
[iconPos]="iconPos"
[label]="label"
(click)="onDefaultButtonClick($event)"
[disabled]="disabled"
[attr.tabindex]="tabindex"
[attr.aria-label]="buttonProps?.['aria-label']"
></button>
</ng-template>
<button
type="button"
pButton
class="p-splitbutton-menubutton p-button-icon-only"
(click)="onDropdownButtonClick($event)"
(keydown)="onDropdownButtonKeydown($event)"
[disabled]="disabled"
[attr.aria-label]="menuButtonProps?.['aria-label'] || expandAriaLabel"
[attr.aria-aria-haspopup]="menuButtonProps?.['aria-haspopup'] || true"
[attr.aria-expanded]="menuButtonProps?.['aria-expanded'] || isExpanded()"
[attr.aria-controls]="menuButtonProps?.['aria-controls'] || ariaId"
>
<ChevronDownIcon *ngIf="!dropdownIconTemplate" />
<ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
</button>
<p-tieredMenu
[id]="ariaId"
#menu
[popup]="true"
[model]="model"
[style]="menuStyle"
[styleClass]="menuStyleClass"
[appendTo]="appendTo"
[showTransitionOptions]="showTransitionOptions"
[hideTransitionOptions]="hideTransitionOptions"
></p-tieredMenu>
</div>
`, isInline: true, styles: ["@layer primeng{.p-splitbutton{display:inline-flex;position:relative}.p-splitbutton .p-splitbutton-defaultbutton,.p-splitbutton.p-button-rounded>.p-splitbutton-defaultbutton.p-button,.p-splitbutton.p-button-outlined>.p-splitbutton-defaultbutton.p-button{flex:1 1 auto;border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}.p-splitbutton-menubutton,.p-splitbutton.p-button-rounded>.p-splitbutton-menubutton.p-button,.p-splitbutton.p-button-outlined>.p-splitbutton-menubutton.p-button{display:flex;align-items:center;justify-content:center;border-top-left-radius:0;border-bottom-left-radius:0}.p-splitbutton .p-menu{min-width:100%}.p-fluid .p-splitbutton{display:flex}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.ButtonDirective; }), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i0.forwardRef(function () { return i3.TieredMenu; }), selector: "p-tieredMenu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SplitButton, decorators: [{
type: Component,
args: [{ selector: 'p-splitButton', template: `
<div #container [ngClass]="'p-splitbutton p-component'" [ngStyle]="style" [class]="styleClass">
<ng-container *ngIf="contentTemplate; else defaultButton">
<button
class="p-splitbutton-defaultbutton"
type="button"
pButton
[icon]="icon"
[iconPos]="iconPos"
(click)="onDefaultButtonClick($event)"
[disabled]="disabled"
[attr.tabindex]="tabindex"
[attr.aria-label]="buttonProps?.['aria-label'] || label"
>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</button>
</ng-container>
<ng-template #defaultButton>
<button
#defaultbtn
class="p-splitbutton-defaultbutton"
type="button"
pButton
[icon]="icon"
[iconPos]="iconPos"
[label]="label"
(click)="onDefaultButtonClick($event)"
[disabled]="disabled"
[attr.tabindex]="tabindex"
[attr.aria-label]="buttonProps?.['aria-label']"
></button>
</ng-template>
<button
type="button"
pButton
class="p-splitbutton-menubutton p-button-icon-only"
(click)="onDropdownButtonClick($event)"
(keydown)="onDropdownButtonKeydown($event)"
[disabled]="disabled"
[attr.aria-label]="menuButtonProps?.['aria-label'] || expandAriaLabel"
[attr.aria-aria-haspopup]="menuButtonProps?.['aria-haspopup'] || true"
[attr.aria-expanded]="menuButtonProps?.['aria-expanded'] || isExpanded()"
[attr.aria-controls]="menuButtonProps?.['aria-controls'] || ariaId"
>
<ChevronDownIcon *ngIf="!dropdownIconTemplate" />
<ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
</button>
<p-tieredMenu
[id]="ariaId"
#menu
[popup]="true"
[model]="model"
[style]="menuStyle"
[styleClass]="menuStyleClass"
[appendTo]="appendTo"
[showTransitionOptions]="showTransitionOptions"
[hideTransitionOptions]="hideTransitionOptions"
></p-tieredMenu>
</div>
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
class: 'p-element'
}, styles: ["@layer primeng{.p-splitbutton{display:inline-flex;position:relative}.p-splitbutton .p-splitbutton-defaultbutton,.p-splitbutton.p-button-rounded>.p-splitbutton-defaultbutton.p-button,.p-splitbutton.p-button-outlined>.p-splitbutton-defaultbutton.p-button{flex:1 1 auto;border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}.p-splitbutton-menubutton,.p-splitbutton.p-button-rounded>.p-splitbutton-menubutton.p-button,.p-splitbutton.p-button-outlined>.p-splitbutton-menubutton.p-button{display:flex;align-items:center;justify-content:center;border-top-left-radius:0;border-bottom-left-radius:0}.p-splitbutton .p-menu{min-width:100%}.p-fluid .p-splitbutton{display:flex}}\n"] }]
}], propDecorators: { model: [{
type: Input
}], icon: [{
type: Input
}], iconPos: [{
type: Input
}], label: [{
type: Input
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], menuStyle: [{
type: Input
}], menuStyleClass: [{
type: Input
}], disabled: [{
type: Input
}], tabindex: [{
type: Input
}], appendTo: [{
type: Input
}], dir: [{
type: Input
}], expandAriaLabel: [{
type: Input
}], showTransitionOptions: [{
type: Input
}], hideTransitionOptions: [{
type: Input
}], buttonProps: [{
type: Input
}], menuButtonProps: [{
type: Input
}], onClick: [{
type: Output
}], onDropdownClick: [{
type: Output
}], containerViewChild: [{
type: ViewChild,
args: ['container']
}], buttonViewChild: [{
type: ViewChild,
args: ['defaultbtn']
}], menu: [{
type: ViewChild,
args: ['menu']
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class SplitButtonModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: SplitButtonModule, declarations: [SplitButton], imports: [CommonModule, ButtonModule, TieredMenuModule, ChevronDownIcon], exports: [SplitButton, ButtonModule, TieredMenuModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SplitButtonModule, imports: [CommonModule, ButtonModule, TieredMenuModule, ChevronDownIcon, ButtonModule, TieredMenuModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SplitButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ButtonModule, TieredMenuModule, ChevronDownIcon],
exports: [SplitButton, ButtonModule, TieredMenuModule],
declarations: [SplitButton]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SplitButton, SplitButtonModule };
//# sourceMappingURL=primeng-splitbutton.mjs.map