primeng
Version:
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,
393 lines (388 loc) • 21.8 kB
JavaScript
export * from 'primeng/types/selectbutton';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, forwardRef, input, booleanAttribute, numberAttribute, output, contentChild, computed, signal, inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { resolveFieldData, equals } from '@primeuix/utils';
import { SharedModule } from 'primeng/api';
import { PARENT_INSTANCE } from 'primeng/basecomponent';
import { BaseEditableHolder } from 'primeng/baseeditableholder';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { ToggleButton } from 'primeng/togglebutton';
import { style } from '@primeuix/styles/selectbutton';
import { BaseStyle } from 'primeng/base';
const classes = {
root: ({ instance }) => [
'p-selectbutton p-component',
{
'p-invalid': instance.invalid(),
'p-selectbutton-fluid': instance.fluid()
}
]
};
class SelectButtonStyle extends BaseStyle {
name = 'selectbutton';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectButtonStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectButtonStyle, decorators: [{
type: Injectable
}] });
/**
*
* SelectButton is used to choose single or multiple items from a list using buttons.
*
* [Live Demo](https://www.primeng.org/selectbutton/)
*
* @module selectbuttonstyle
*
*/
var SelectButtonClasses;
(function (SelectButtonClasses) {
/**
* Class name of the root element
*/
SelectButtonClasses["root"] = "p-selectbutton";
})(SelectButtonClasses || (SelectButtonClasses = {}));
const SELECTBUTTON_INSTANCE = new InjectionToken('SELECTBUTTON_INSTANCE');
const SELECTBUTTON_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectButton),
multi: true
};
/**
* SelectButton is used to choose single or multiple items from a list using buttons.
* @group Components
*/
class SelectButton extends BaseEditableHolder {
componentName = 'SelectButton';
/**
* An array of selectitems to display as the available options.
* @group Props
*/
options = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
/**
* Name of the label field of an option.
* @group Props
*/
optionLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "optionLabel" }] : /* istanbul ignore next */ []));
/**
* Name of the value field of an option.
* @group Props
*/
optionValue = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "optionValue" }] : /* istanbul ignore next */ []));
/**
* Name of the disabled field of an option.
* @group Props
*/
optionDisabled = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
/**
* Whether selection can be cleared.
* @group Props
*/
unselectable = input(false, { ...(ngDevMode ? { debugName: "unselectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* When specified, allows selecting multiple values.
* @group Props
*/
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether selection can not be cleared.
* @group Props
*/
allowEmpty = input(true, { ...(ngDevMode ? { debugName: "allowEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Style class of the component.
* @group Props
*/
styleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
/**
* A property to uniquely identify a value in options.
* @group Props
*/
dataKey = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "dataKey" }] : /* 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 });
/**
* Specifies the size of the component.
* @defaultValue undefined
* @group Props
*/
size = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
/**
* Spans 100% width of the container when enabled.
* @defaultValue undefined
* @group Props
*/
fluid = input(false, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Callback to invoke on input click.
* @param {SelectButtonOptionClickEvent} event - Custom click event.
* @group Emits
*/
onOptionClick = output();
/**
* Callback to invoke on selection change.
* @param {SelectButtonChangeEvent} event - Custom change event.
* @group Emits
*/
onChange = output();
/**
* Custom item template.
* @param {SelectButtonItemTemplateContext} context - item context.
* @see {@link SelectButtonItemTemplateContext}
* @group Templates
*/
itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
equalityKey = computed(() => (this.optionValue() ? null : this.dataKey()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "equalityKey" }] : /* istanbul ignore next */ []));
$allowEmpty = computed(() => (this.unselectable() ? false : this.allowEmpty()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$allowEmpty" }] : /* istanbul ignore next */ []));
dataP = computed(() => this.cn({
invalid: this.invalid()
}), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
value = signal(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
focusedIndex = signal(0, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
_componentStyle = inject(SelectButtonStyle);
$pcSelectButton = inject(SELECTBUTTON_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
getAllowEmpty() {
if (this.multiple()) {
return this.$allowEmpty() || this.value()?.length !== 1;
}
return this.$allowEmpty();
}
getOptionLabel(option) {
const optionLabel = this.optionLabel();
return optionLabel ? resolveFieldData(option, optionLabel) : option.label != undefined ? option.label : option;
}
getOptionValue(option) {
const optionValue = this.optionValue();
const optionLabel = this.optionLabel();
return optionValue ? resolveFieldData(option, optionValue) : optionLabel || option.value === undefined ? option : option.value;
}
isOptionDisabled(option) {
const optionDisabled = this.optionDisabled();
return optionDisabled ? resolveFieldData(option, optionDisabled) : option.disabled !== undefined ? option.disabled : false;
}
isButtonDisabled(option) {
return this.$disabled() || this.isOptionDisabled(option);
}
getItemContext(option, index) {
return { $implicit: option, index };
}
onOptionSelect(event, option, index) {
if (this.$disabled() || this.isOptionDisabled(option)) {
return;
}
let selected = this.isSelected(option);
if (selected && this.unselectable()) {
return;
}
let optionValue = this.getOptionValue(option);
let newValue;
if (this.multiple()) {
if (selected)
newValue = this.value().filter((val) => !equals(val, optionValue, this.equalityKey() || undefined));
else
newValue = this.value() ? [...this.value(), optionValue] : [optionValue];
}
else {
if (selected && !this.$allowEmpty()) {
return;
}
newValue = selected ? null : optionValue;
}
this.focusedIndex.set(index);
this.value.set(newValue);
this.writeModelValue(this.value());
this.onModelChange(this.value());
this.onChange.emit({
originalEvent: event.originalEvent,
value: this.value()
});
this.onOptionClick.emit({
originalEvent: event.originalEvent,
option: option,
index: index
});
}
changeTabIndexes(event, direction) {
let firstTabableChild;
let index;
for (let i = 0; i <= this.el.nativeElement.children.length - 1; i++) {
if (this.el.nativeElement.children[i].getAttribute('tabindex') === '0')
firstTabableChild = { elem: this.el.nativeElement.children[i], index: i };
}
if (!firstTabableChild)
return;
if (direction === 'prev') {
if (firstTabableChild.index === 0)
index = this.el.nativeElement.children.length - 1;
else
index = firstTabableChild.index - 1;
}
else {
if (firstTabableChild.index === this.el.nativeElement.children.length - 1)
index = 0;
else
index = firstTabableChild.index + 1;
}
this.focusedIndex.set(index);
this.el.nativeElement.children[index].focus();
}
onFocus(event, index) {
this.focusedIndex.set(index);
}
onBlur() {
this.onModelTouched();
}
removeOption(option) {
this.value.set(this.value().filter((val) => !equals(val, this.getOptionValue(option), this.dataKey())));
}
isSelected(option) {
let selected = false;
const optionValue = this.getOptionValue(option);
if (this.multiple()) {
if (this.value() && Array.isArray(this.value())) {
for (let val of this.value()) {
if (equals(val, optionValue, this.dataKey())) {
selected = true;
break;
}
}
}
}
else {
selected = equals(this.getOptionValue(option), this.value(), this.equalityKey() || undefined);
}
return selected;
}
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
* Writes the value to the control.
*/
writeControlValue(value, setModelValue) {
this.value.set(value);
setModelValue(this.value());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SelectButton, isStandalone: true, selector: "p-selectbutton, p-select-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, unselectable: { classPropertyName: "unselectable", publicName: "unselectable", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionClick: "onOptionClick", onChange: "onChange" }, host: { properties: { "class": "cx('root')", "attr.role": "\"group\"", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-p": "dataP()" } }, providers: [SELECTBUTTON_VALUE_ACCESSOR, SelectButtonStyle, { provide: SELECTBUTTON_INSTANCE, useExisting: SelectButton }, { provide: PARENT_INSTANCE, useExisting: SelectButton }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
(option of options(); track getOptionLabel(option); let i = $index) {
<p-togglebutton
[autofocus]="autofocus()"
[class]="styleClass()"
[ngModel]="isSelected(option)"
[onLabel]="getOptionLabel(option)"
[offLabel]="getOptionLabel(option)"
[ariaLabel]="getOptionLabel(option)"
[disabled]="isButtonDisabled(option)"
(onChange)="onOptionSelect($event, option, i)"
[allowEmpty]="getAllowEmpty()"
[size]="size()"
[fluid]="fluid()"
[pt]="ptm('pcToggleButton')"
[unstyled]="unstyled()"
>
(itemTemplate()) {
<ng-template #content>
<ng-container *ngTemplateOutlet="itemTemplate(); context: getItemContext(option, i)"></ng-container>
</ng-template>
}
</p-togglebutton>
}
`, isInline: true, dependencies: [{ kind: "component", type: ToggleButton, selector: "p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectButton, decorators: [{
type: Component,
args: [{
selector: 'p-selectbutton, p-select-button',
standalone: true,
imports: [ToggleButton, FormsModule, NgTemplateOutlet, SharedModule, BindModule],
template: `
(option of options(); track getOptionLabel(option); let i = $index) {
<p-togglebutton
[autofocus]="autofocus()"
[class]="styleClass()"
[ngModel]="isSelected(option)"
[onLabel]="getOptionLabel(option)"
[offLabel]="getOptionLabel(option)"
[ariaLabel]="getOptionLabel(option)"
[disabled]="isButtonDisabled(option)"
(onChange)="onOptionSelect($event, option, i)"
[allowEmpty]="getAllowEmpty()"
[size]="size()"
[fluid]="fluid()"
[pt]="ptm('pcToggleButton')"
[unstyled]="unstyled()"
>
(itemTemplate()) {
<ng-template #content>
<ng-container *ngTemplateOutlet="itemTemplate(); context: getItemContext(option, i)"></ng-container>
</ng-template>
}
</p-togglebutton>
}
`,
providers: [SELECTBUTTON_VALUE_ACCESSOR, SelectButtonStyle, { provide: SELECTBUTTON_INSTANCE, useExisting: SelectButton }, { provide: PARENT_INSTANCE, useExisting: SelectButton }],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': "cx('root')",
'[attr.role]': '"group"',
'[attr.aria-labelledby]': 'ariaLabelledBy()',
'[attr.data-p]': 'dataP()'
},
hostDirectives: [Bind]
}]
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], unselectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "unselectable", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], onOptionClick: [{ type: i0.Output, args: ["onOptionClick"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }] } });
class SelectButtonModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SelectButtonModule, imports: [SelectButton, SharedModule], exports: [SelectButton, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectButtonModule, imports: [SelectButton, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [SelectButton, SharedModule],
exports: [SelectButton, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SELECTBUTTON_VALUE_ACCESSOR, SelectButton, SelectButtonClasses, SelectButtonModule, SelectButtonStyle };
//# sourceMappingURL=primeng-selectbutton.mjs.map