primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
466 lines (456 loc) • 19 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { resolveFieldData, equals } from '@primeuix/utils';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { ToggleButton } from 'primeng/togglebutton';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-selectbutton {
display: inline-flex;
user-select: none;
vertical-align: bottom;
outline-color: transparent;
border-radius: ${dt('selectbutton.border.radius')};
}
.p-selectbutton .p-togglebutton {
border-radius: 0;
border-width: 1px 1px 1px 0;
}
.p-selectbutton .p-togglebutton:focus-visible {
position: relative;
z-index: 1;
}
.p-selectbutton p-togglebutton:first-child .p-togglebutton {
border-left-width: 1px;
border-start-start-radius: ${dt('selectbutton.border.radius')};
border-end-start-radius: ${dt('selectbutton.border.radius')};
}
.p-selectbutton p-togglebutton:last-child .p-togglebutton{
border-start-end-radius: ${dt('selectbutton.border.radius')};
border-end-end-radius: ${dt('selectbutton.border.radius')};
}
.p-selectbutton.ng-invalid.ng-dirty {
outline: 1px solid ${dt('selectbutton.invalid.border.color')};
outline-offset: 0;
}
`;
const classes = {
root: ({ props }) => [
'p-selectbutton p-component',
{
'p-invalid': props.invalid
}
]
};
class SelectButtonStyle extends BaseStyle {
name = 'selectbutton';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵSelectButtonStyle_BaseFactory; return function SelectButtonStyle_Factory(__ngFactoryType__) { return (ɵSelectButtonStyle_BaseFactory || (ɵSelectButtonStyle_BaseFactory = i0.ɵɵgetInheritedFactory(SelectButtonStyle)))(__ngFactoryType__ || SelectButtonStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SelectButtonStyle, factory: SelectButtonStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectButtonStyle, [{
type: Injectable
}], null, null); })();
/**
*
* 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 _c0 = ["item"];
const _c1 = (a0, a1) => ({ $implicit: a0, index: a1 });
function SelectButton_For_1_Conditional_1_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function SelectButton_For_1_Conditional_1_ng_template_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, SelectButton_For_1_Conditional_1_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 3);
} if (rf & 2) {
const ctx_r5 = i0.ɵɵnextContext(2);
const option_r3 = ctx_r5.$implicit;
const ɵ$index_1_r4 = ctx_r5.$index;
const ctx_r4 = i0.ɵɵnextContext();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r4.itemTemplate || ctx_r4._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1, option_r3, ɵ$index_1_r4));
} }
function SelectButton_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, SelectButton_For_1_Conditional_1_ng_template_0_Template, 1, 5, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
} }
function SelectButton_For_1_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-toggleButton", 2);
i0.ɵɵlistener("onChange", function SelectButton_For_1_Template_p_toggleButton_onChange_0_listener($event) { const ctx_r1 = i0.ɵɵrestoreView(_r1); const option_r3 = ctx_r1.$implicit; const ɵ$index_1_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onOptionSelect($event, option_r3, ɵ$index_1_r4)); });
i0.ɵɵtemplate(1, SelectButton_For_1_Conditional_1_Template, 2, 0);
i0.ɵɵelementEnd();
} if (rf & 2) {
const option_r3 = ctx.$implicit;
const ctx_r4 = i0.ɵɵnextContext();
i0.ɵɵproperty("autofocus", ctx_r4.autofocus)("styleClass", ctx_r4.styleClass)("ngModel", ctx_r4.isSelected(option_r3))("onLabel", ctx_r4.getOptionLabel(option_r3))("offLabel", ctx_r4.getOptionLabel(option_r3))("disabled", ctx_r4.disabled || ctx_r4.isOptionDisabled(option_r3))("allowEmpty", ctx_r4.allowEmpty)("size", ctx_r4.size);
i0.ɵɵadvance();
i0.ɵɵconditional(ctx_r4.itemTemplate || ctx_r4._itemTemplate ? 1 : -1);
} }
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 BaseComponent {
/**
* An array of selectitems to display as the available options.
* @group Props
*/
options;
/**
* Name of the label field of an option.
* @group Props
*/
optionLabel;
/**
* Name of the value field of an option.
* @group Props
*/
optionValue;
/**
* Name of the disabled field of an option.
* @group Props
*/
optionDisabled;
/**
* Whether selection can be cleared.
* @group Props
*/
unselectable = false;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex = 0;
/**
* When specified, allows selecting multiple values.
* @group Props
*/
multiple;
/**
* Whether selection can not be cleared.
* @group Props
*/
allowEmpty = true;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy;
/**
* Defines the size of the component.
* @group Props
*/
size;
/**
* When present, it specifies that the element should be disabled.
* @group Props
*/
disabled;
/**
* A property to uniquely identify a value in options.
* @group Props
*/
dataKey;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus;
/**
* Callback to invoke on input click.
* @param {SelectButtonOptionClickEvent} event - Custom click event.
* @group Emits
*/
onOptionClick = new EventEmitter();
/**
* Callback to invoke on selection change.
* @param {SelectButtonChangeEvent} event - Custom change event.
* @group Emits
*/
onChange = new EventEmitter();
/**
* Template of an item in the list.
* @group Templates
*/
itemTemplate;
_itemTemplate;
get equalityKey() {
return this.optionValue ? null : this.dataKey;
}
value;
onModelChange = () => { };
onModelTouched = () => { };
focusedIndex = 0;
_componentStyle = inject(SelectButtonStyle);
getOptionLabel(option) {
return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option.label != undefined ? option.label : option;
}
getOptionValue(option) {
return this.optionValue ? resolveFieldData(option, this.optionValue) : this.optionLabel || option.value === undefined ? option : option.value;
}
isOptionDisabled(option) {
return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : option.disabled !== undefined ? option.disabled : false;
}
writeValue(value) {
this.value = value;
this.cd.markForCheck();
}
registerOnChange(fn) {
this.onModelChange = fn;
}
registerOnTouched(fn) {
this.onModelTouched = fn;
}
setDisabledState(val) {
this.disabled = val;
this.cd.markForCheck();
}
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));
else
newValue = this.value ? [...this.value, optionValue] : [optionValue];
}
else {
if (selected && !this.allowEmpty) {
return;
}
newValue = selected ? null : optionValue;
}
this.focusedIndex = index;
this.value = newValue;
this.onModelChange(this.value);
this.onChange.emit({
originalEvent: event,
value: this.value
});
this.onOptionClick.emit({
originalEvent: event,
option: option,
index: index
});
}
changeTabIndexes(event, direction) {
let firstTabableChild, 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 (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 = index;
this.el.nativeElement.children[index].focus();
}
onFocus(event, index) {
this.focusedIndex = index;
}
onBlur() {
this.onModelTouched();
}
removeOption(option) {
this.value = 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);
}
return selected;
}
templates;
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'item':
this._itemTemplate = item.template;
break;
}
});
}
static ɵfac = /*@__PURE__*/ (() => { let ɵSelectButton_BaseFactory; return function SelectButton_Factory(__ngFactoryType__) { return (ɵSelectButton_BaseFactory || (ɵSelectButton_BaseFactory = i0.ɵɵgetInheritedFactory(SelectButton)))(__ngFactoryType__ || SelectButton); }; })();
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectButton, selectors: [["p-selectButton"], ["p-selectbutton"], ["p-select-button"]], contentQueries: function SelectButton_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, _c0, 4);
i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
} }, hostVars: 10, hostBindings: function SelectButton_HostBindings(rf, ctx) { if (rf & 2) {
i0.ɵɵattribute("role", ctx.group)("aria-labelledby", ctx.ariaLabelledBy)("data-pc-section", "root")("data-pc-name", "selectbutton");
i0.ɵɵstyleMap(ctx.style);
i0.ɵɵclassProp("p-selectbutton", true)("p-component", true);
} }, inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", unselectable: [2, "unselectable", "unselectable", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], multiple: [2, "multiple", "multiple", booleanAttribute], allowEmpty: [2, "allowEmpty", "allowEmpty", booleanAttribute], style: "style", styleClass: "styleClass", ariaLabelledBy: "ariaLabelledBy", size: "size", disabled: [2, "disabled", "disabled", booleanAttribute], dataKey: "dataKey", autofocus: [2, "autofocus", "autofocus", booleanAttribute] }, outputs: { onOptionClick: "onOptionClick", onChange: "onChange" }, features: [i0.ɵɵProvidersFeature([SELECTBUTTON_VALUE_ACCESSOR, SelectButtonStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 0, consts: [["content", ""], [3, "autofocus", "styleClass", "ngModel", "onLabel", "offLabel", "disabled", "allowEmpty", "size"], [3, "onChange", "autofocus", "styleClass", "ngModel", "onLabel", "offLabel", "disabled", "allowEmpty", "size"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SelectButton_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵrepeaterCreate(0, SelectButton_For_1_Template, 2, 9, "p-toggleButton", 1, i0.ɵɵrepeaterTrackByIdentity);
} if (rf & 2) {
i0.ɵɵrepeater(ctx.options);
} }, dependencies: [ToggleButton, FormsModule, i1.NgControlStatus, i1.NgModel, CommonModule, i2.NgTemplateOutlet, SharedModule], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectButton, [{
type: Component,
args: [{
selector: 'p-selectButton, p-selectbutton, p-select-button',
standalone: true,
imports: [ToggleButton, FormsModule, CommonModule, SharedModule],
template: `
(option of options; track option; let i = $index) {
<p-toggleButton
[autofocus]="autofocus"
[styleClass]="styleClass"
[ngModel]="isSelected(option)"
[onLabel]="this.getOptionLabel(option)"
[offLabel]="this.getOptionLabel(option)"
[disabled]="disabled || isOptionDisabled(option)"
(onChange)="onOptionSelect($event, option, i)"
[allowEmpty]="allowEmpty"
[size]="size"
>
(itemTemplate || _itemTemplate) {
<ng-template #content>
<ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: option, index: i }"></ng-container>
</ng-template>
}
</p-toggleButton>
}
`,
providers: [SELECTBUTTON_VALUE_ACCESSOR, SelectButtonStyle],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class.p-selectbutton]': 'true',
'[class.p-component]': 'true',
'[style]': 'style',
'[attr.role]': 'group',
'[attr.aria-labelledby]': 'ariaLabelledBy',
'[attr.data-pc-section]': "'root'",
'[attr.data-pc-name]': "'selectbutton'"
}
}]
}], null, { options: [{
type: Input
}], optionLabel: [{
type: Input
}], optionValue: [{
type: Input
}], optionDisabled: [{
type: Input
}], unselectable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], tabindex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], multiple: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], allowEmpty: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}], size: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], dataKey: [{
type: Input
}], autofocus: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onOptionClick: [{
type: Output
}], onChange: [{
type: Output
}], itemTemplate: [{
type: ContentChild,
args: ['item', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectButton, { className: "SelectButton", filePath: "selectbutton.ts", lineNumber: 75 }); })();
class SelectButtonModule {
static ɵfac = function SelectButtonModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SelectButtonModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SelectButtonModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [SelectButton, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectButtonModule, [{
type: NgModule,
args: [{
imports: [SelectButton, SharedModule],
exports: [SelectButton, SharedModule]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SelectButtonModule, { 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