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
931 lines (911 loc) • 37.6 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, ContentChildren, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import * as i3 from 'primeng/autofocus';
import { AutoFocusModule } from 'primeng/autofocus';
import { TimesIcon } from 'primeng/icons/times';
import { TimesCircleIcon } from 'primeng/icons/timescircle';
import { InputTextModule } from 'primeng/inputtext';
import { UniqueComponentId } from 'primeng/utils';
import { BaseStyle } from 'primeng/base';
import { BaseComponent } from 'primeng/basecomponent';
import * as i4 from 'primeng/chip';
import { ChipModule } from 'primeng/chip';
import * as i1 from 'primeng/config';
const theme = ({ dt }) => `
.p-inputchips {
display: inline-flex;
}
.p-inputchips-input {
margin: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
position: relative;
align-items: center;
flex-wrap: wrap;
padding: calc(${dt('inputchips.padding.y')} / 2) ${dt('inputchips.padding.x')};
gap: calc(${dt('inputchips.padding.y')} / 2);
color: ${dt('inputchips.color')};
background: ${dt('inputchips.background')};
border: 1px solid ${dt('inputchips.border.color')};
border-radius: ${dt('inputchips.border.radius')};
width: 100%;
transition: background ${dt('inputchips.transition.duration')}, color ${dt('inputchips.transition.duration')}, border-color ${dt('inputchips.transition.duration')}, outline-color ${dt('inputchips.transition.duration')}, box-shadow ${dt('inputchips.transition.duration')};
outline-color: transparent;
box-shadow: ${dt('inputchips.shadow')};
}
.p-inputchips:not(.p-disabled):hover .p-inputchips-input {
border-color: ${dt('inputchips.hover.border.color')};
}
.p-inputchips:not(.p-disabled).p-focus .p-inputchips-input {
border-color: ${dt('inputchips.focus.border.color')};
box-shadow: ${dt('inputchips.focus.ring.shadow')};
outline: ${dt('inputchips.focus.ring.width')} ${dt('inputchips.focus.ring.style')} ${dt('inputchips.focus.ring.color')};
outline-offset: ${dt('inputchips.focus.ring.offset')};
}
.p-inputchips.p-invalid .p-inputchips-input {
border-color: ${dt('inputchips.invalid.border.color')};
}
.p-variant-filled.p-inputchips-input {
background: ${dt('inputchips.filled.background')};
}
.p-inputchips:not(.p-disabled).p-focus .p-variant-filled.p-inputchips-input {
background: ${dt('inputchips.filled.focus.background')};
}
.p-inputchips.p-disabled .p-inputchips-input {
opacity: 1;
background: ${dt('inputchips.disabled.background')};
color: ${dt('inputchips.disabled.color')};
}
.p-inputchips-chip.p-chip {
padding-top: calc(${dt('inputchips.padding.y')} / 2);
padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
border-radius: ${dt('inputchips.chip.border.radius')};
transition: background ${dt('inputchips.transition.duration')}, color ${dt('inputchips.transition.duration')};
}
.p-inputchips-chip-item.p-focus .p-inputchips-chip {
background: ${dt('inputchips.chip.focus.background')};
color: ${dt('inputchips.chip.focus.color')};
}
.p-inputchips-input:has(.p-inputchips-chip) {
padding-left: calc(${dt('inputchips.padding.y')} / 2);
padding-right: calc(${dt('inputchips.padding.y')} / 2);
}
.p-inputchips-input-item {
flex: 1 1 auto;
display: inline-flex;
padding-top: calc(${dt('inputchips.padding.y')} / 2);
padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
}
.p-inputchips-input-item input {
border: 0 none;
outline: 0 none;
background: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
color: inherit;
}
.p-inputchips-input-item input::placeholder {
color: ${dt('inputchips.placeholder.color')};
}
/* For PrimeNG */
.p-chips-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
cursor: pointer;
right: ${dt('inputchips.padding.x')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputchips p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-focus': instance.focused,
'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
'p-inputwrapper-focus': instance.focused
}
],
input: ({ props, instance }) => [
'p-inputchips-input',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.config.inputStyle === 'filled' || instance.config.inputVariant === 'filled'
}
],
chipItem: ({ state, index }) => ['p-inputchips-chip-item', { 'p-focus': state.focusedIndex === index }],
pcChip: 'p-inputchips-chip',
chipIcon: 'p-inputchips-chip-icon',
inputItem: 'p-inputchips-input-item'
};
class ChipsStyle extends BaseStyle {
name = 'inputchips';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChipsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChipsStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChipsStyle, decorators: [{
type: Injectable
}] });
/**
*
* Chips is used to enter multiple values on an input field.
*
*
* @module chipsstyle
*
*/
var ChipsClasses;
(function (ChipsClasses) {
/**
* Class name of the root element
*/
ChipsClasses["root"] = "p-chip";
/**
* Class name of the image element
*/
ChipsClasses["image"] = "p-chip-image";
/**
* Class name of the icon element
*/
ChipsClasses["icon"] = "p-chip-icon";
/**
* Class name of the label element
*/
ChipsClasses["label"] = "p-chip-label";
/**
* Class name of the remove icon element
*/
ChipsClasses["removeIcon"] = "p-chip-remove-icon";
})(ChipsClasses || (ChipsClasses = {}));
const CHIPS_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Chips),
multi: true
};
/**
* Chips groups a collection of contents in tabs.
* @group Components
*/
class Chips extends BaseComponent {
el;
cd;
config;
/**
* Inline style of the element.
* @group Props
*/
style;
/**
* Style class of the element.
* @group Props
*/
styleClass;
/**
* When present, it specifies that the element should be disabled.
* @group Props
*/
disabled;
/**
* Name of the property to display on a chip.
* @group Props
*/
field;
/**
* Advisory information to display on input.
* @group Props
*/
placeholder;
/**
* Maximum number of entries allowed.
* @group Props
*/
max;
/**
* Maximum length of a chip.
* @group Props
*/
maxLength;
/**
* Defines a string that labels the input for accessibility.
* @group Props
*/
ariaLabel;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex;
/**
* Identifier of the focus input to match a label defined for the component.
* @group Props
*/
inputId;
/**
* Whether to allow duplicate values or not.
* @group Props
*/
allowDuplicate = true;
/**
* Defines whether duplication check should be case-sensitive
* @group Props
*/
caseSensitiveDuplication = true;
/**
* Inline style of the input field.
* @group Props
*/
inputStyle;
/**
* Style class of the input field.
* @group Props
*/
inputStyleClass;
/**
* Icon to display in chip remove action..
* @group Props
*/
chipIcon;
/**
* Whether to add an item on tab key press.
* @group Props
*/
addOnTab;
/**
* Whether to add an item when the input loses focus.
* @group Props
*/
addOnBlur;
/**
* Separator char to add an item when pressed in addition to the enter key.
* @group Props
*/
separator;
/**
* When enabled, a clear icon is displayed to clear the value.
* @group Props
*/
showClear = false;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus;
/**
* Specifies the input variant of the component.
* @group Props
*/
variant = 'outlined';
/**
* Callback to invoke on chip add.
* @param {ChipsAddEvent} event - Custom chip add event.
* @group Emits
*/
onAdd = new EventEmitter();
/**
* Callback to invoke on chip remove.
* @param {ChipsRemoveEvent} event - Custom chip remove event.
* @group Emits
*/
onRemove = new EventEmitter();
/**
* Callback to invoke on focus of input field.
* @param {Event} event - Browser event.
* @group Emits
*/
onFocus = new EventEmitter();
/**
* Callback to invoke on blur of input field.
* @param {Event} event - Browser event.
* @group Emits
*/
onBlur = new EventEmitter();
/**
* Callback to invoke on chip clicked.
* @param {ChipsClickEvent} event - Custom chip click event.
* @group Emits
*/
onChipClick = new EventEmitter();
/**
* Callback to invoke on chip contextmenu.
* @param {ChipsClickEvent} event - Custom chip contextmenu event.
* @group Emits
*/
onChipContextMenu = new EventEmitter();
/**
* Callback to invoke on clear token clicked.
* @group Emits
*/
onClear = new EventEmitter();
inputViewChild;
containerViewChild;
templates;
itemTemplate;
removeTokenIconTemplate;
clearIconTemplate;
value;
onModelChange = () => { };
onModelTouched = () => { };
valueChanged;
id = UniqueComponentId();
focused;
focusedIndex;
filled;
_componentStyle = inject(ChipsStyle);
get focusedOptionId() {
return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
}
get isMaxedOut() {
return this.max && this.value && this.max === this.value.length;
}
constructor(el, cd, config) {
super();
this.el = el;
this.cd = cd;
this.config = config;
console.log('Deprecated since v18. Use AutoComplete component instead with its typeahead property.');
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'item':
this.itemTemplate = item.template;
break;
case 'removetokenicon':
this.removeTokenIconTemplate = item.template;
break;
case 'clearicon':
this.clearIconTemplate = item.template;
break;
default:
this.itemTemplate = item.template;
break;
}
});
this.updateFilledState();
}
onWrapperClick() {
this.inputViewChild?.nativeElement.focus();
}
onContainerFocus() {
this.focused = true;
}
onContainerBlur() {
this.focusedIndex = -1;
this.focused = false;
}
onContainerKeyDown(event) {
switch (event.code) {
case 'ArrowLeft':
this.onArrowLeftKeyOn();
break;
case 'ArrowRight':
this.onArrowRightKeyOn();
break;
case 'Backspace':
this.onBackspaceKeyOn(event);
break;
case 'Space':
if (this.focusedIndex !== null && this.value && this.value.length > 0) {
this.onItemClick(event, this.value[this.focusedIndex]);
}
break;
default:
break;
}
}
onArrowLeftKeyOn() {
if (this.inputViewChild.nativeElement.value.length === 0 && this.value && this.value.length > 0) {
this.focusedIndex = this.focusedIndex === null ? this.value.length - 1 : this.focusedIndex - 1;
if (this.focusedIndex < 0)
this.focusedIndex = 0;
}
}
onArrowRightKeyOn() {
if (this.inputViewChild.nativeElement.value.length === 0 && this.value && this.value.length > 0) {
if (this.focusedIndex === this.value.length - 1) {
this.focusedIndex = null;
this.inputViewChild?.nativeElement.focus();
}
else {
this.focusedIndex++;
}
}
}
onBackspaceKeyOn(event) {
if (this.focusedIndex !== null) {
this.removeItem(event, this.focusedIndex);
}
}
onInput() {
this.updateFilledState();
this.focusedIndex = null;
}
onPaste(event) {
if (!this.disabled) {
if (this.separator) {
const pastedData = (event.clipboardData || this.document.defaultView['clipboardData']).getData('Text');
pastedData.split(this.separator).forEach((val) => {
this.addItem(event, val, true);
});
this.inputViewChild.nativeElement.value = '';
}
this.updateFilledState();
}
}
updateFilledState() {
if (!this.value || this.value.length === 0) {
this.filled = this.inputViewChild && this.inputViewChild.nativeElement && this.inputViewChild.nativeElement.value != '';
}
else {
this.filled = true;
}
}
onItemClick(event, item) {
this.onChipClick.emit({
originalEvent: event,
value: item
});
}
onItemContextMenu(event, item) {
this.onChipContextMenu.emit({
originalEvent: event,
value: item
});
}
writeValue(value) {
this.value = value;
this.updateMaxedOut();
this.updateFilledState();
this.cd.markForCheck();
}
registerOnChange(fn) {
this.onModelChange = fn;
}
registerOnTouched(fn) {
this.onModelTouched = fn;
}
setDisabledState(val) {
this.disabled = val;
this.cd.markForCheck();
}
resolveFieldData(data, field) {
if (data && field) {
if (field.indexOf('.') == -1) {
return data[field];
}
else {
let fields = field.split('.');
let value = data;
for (var i = 0, len = fields.length; i < len; ++i) {
value = value[fields[i]];
}
return value;
}
}
else {
return null;
}
}
onInputFocus(event) {
this.focused = true;
this.focusedIndex = null;
this.onFocus.emit(event);
}
onInputBlur(event) {
this.focused = false;
this.focusedIndex = null;
if (this.addOnBlur && this.inputViewChild.nativeElement.value) {
this.addItem(event, this.inputViewChild.nativeElement.value, false);
}
this.onModelTouched();
this.onBlur.emit(event);
}
removeItem(event, index) {
if (this.disabled) {
return;
}
let removedItem = this.value[index];
this.value = this.value.filter((val, i) => i != index);
this.focusedIndex = null;
this.inputViewChild.nativeElement.focus();
this.onModelChange(this.value);
this.onRemove.emit({
originalEvent: event,
value: removedItem
});
this.updateFilledState();
this.updateMaxedOut();
}
addItem(event, item, preventDefault) {
this.value = this.value || [];
if (item && item.trim().length) {
const newItemIsDuplicate = this.caseSensitiveDuplication ? this.value.includes(item) : this.value.some((val) => val.toLowerCase() === item.toLowerCase());
if ((this.allowDuplicate || !newItemIsDuplicate) && !this.isMaxedOut) {
this.value = [...this.value, item];
this.onModelChange(this.value);
this.onAdd.emit({
originalEvent: event,
value: item
});
}
}
this.updateFilledState();
this.updateMaxedOut();
this.inputViewChild.nativeElement.value = '';
if (preventDefault) {
event.preventDefault();
}
}
/**
* Callback to invoke on filter reset.
* @group Method
*/
clear() {
this.value = null;
this.updateFilledState();
this.onModelChange(this.value);
this.updateMaxedOut();
this.onClear.emit();
}
onKeyDown(event) {
const inputValue = event.target.value;
switch (event.code) {
case 'Backspace':
if (inputValue.length === 0 && this.value && this.value.length > 0) {
if (this.focusedIndex !== null) {
this.removeItem(event, this.focusedIndex);
}
else
this.removeItem(event, this.value.length - 1);
}
break;
case 'Enter':
case 'NumpadEnter':
if (inputValue && inputValue.trim().length && !this.isMaxedOut) {
this.addItem(event, inputValue, true);
}
break;
case 'Tab':
if (this.addOnTab && inputValue && inputValue.trim().length && !this.isMaxedOut) {
this.addItem(event, inputValue, true);
event.preventDefault();
}
break;
case 'ArrowLeft':
if (inputValue.length === 0 && this.value && this.value.length > 0) {
this.containerViewChild?.nativeElement.focus();
}
break;
case 'ArrowRight':
event.stopPropagation();
break;
default:
if (this.separator) {
if (this.separator === event.key || event.key.match(this.separator)) {
this.addItem(event, inputValue, true);
}
}
break;
}
}
updateMaxedOut() {
if (this.inputViewChild && this.inputViewChild.nativeElement) {
if (this.isMaxedOut) {
// Calling `blur` is necessary because firefox does not call `onfocus` events
// for disabled inputs, unlike chromium browsers.
this.inputViewChild.nativeElement.blur();
this.inputViewChild.nativeElement.disabled = true;
}
else {
if (this.disabled) {
this.inputViewChild.nativeElement.blur();
}
this.inputViewChild.nativeElement.disabled = this.disabled || false;
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: Chips, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNG }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: Chips, isStandalone: true, selector: "p-chips", inputs: { style: "style", styleClass: "styleClass", disabled: ["disabled", "disabled", booleanAttribute], field: "field", placeholder: "placeholder", max: ["max", "max", numberAttribute], maxLength: "maxLength", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", allowDuplicate: ["allowDuplicate", "allowDuplicate", booleanAttribute], caseSensitiveDuplication: ["caseSensitiveDuplication", "caseSensitiveDuplication", booleanAttribute], inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", chipIcon: "chipIcon", addOnTab: ["addOnTab", "addOnTab", booleanAttribute], addOnBlur: ["addOnBlur", "addOnBlur", booleanAttribute], separator: "separator", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], variant: "variant" }, outputs: { onAdd: "onAdd", onRemove: "onRemove", onFocus: "onFocus", onBlur: "onBlur", onChipClick: "onChipClick", onChipContextMenu: "onChipContextMenu", onClear: "onClear" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused", "class.p-chips-clearable": "showClear" }, classAttribute: "p-element p-inputwrapper" }, providers: [CHIPS_VALUE_ACCESSOR, ChipsStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["inputtext"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<div
[ngClass]="{
'p-inputchips p-component p-input-wrapper': true,
'p-disabled': disabled,
'p-focus': focused,
'p-inputwrapper-filled': (value && value.length) || (this.inputViewChild?.nativeElement.value && this.inputViewChild?.nativeElement.value.length),
'p-inputwrapper-focus': focused
}"
[ngStyle]="style"
[class]="styleClass"
[attr.data-pc-name]="'chips'"
[attr.data-pc-section]="'root'"
>
<ul
#container
class="p-inputchips-input"
tabindex="-1"
role="listbox"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.aria-label]="ariaLabel"
[attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
[attr.aria-orientation]="'horizontal'"
(click)="onWrapperClick()"
(focus)="onContainerFocus()"
(blur)="onContainerBlur()"
(keydown)="onContainerKeyDown($event)"
[attr.data-pc-section]="'container'"
>
<li
#token
*ngFor="let item of value; let i = index"
[attr.id]="id + '_chips_item_' + i"
role="option"
[attr.ariaLabel]="item"
[attr.aria-selected]="true"
[attr.aria-setsize]="value.length"
[attr.aria-posinset]="i + 1"
[attr.data-p-focused]="focusedIndex === i"
[ngClass]="{ 'p-inputchips-chip-item': true, 'p-focus': focusedIndex === i }"
(click)="onItemClick($event, item)"
(contextmenu)="onItemContextMenu($event, item)"
[attr.data-pc-section]="'token'"
>
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
<p-chip *ngIf="!itemTemplate" class="p-inputchips-chip" [label]="field ? resolveFieldData(item, field) : item" [removeIcon]="chipIcon" removable (onRemove)="removeItem($event, i)">
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
<ng-template #removeicon>
<ng-container *ngIf="!disabled">
<TimesCircleIcon [styleClass]="'p-chips-token-icon'" *ngIf="!removeTokenIconTemplate" (click)="removeItem($event, i)" [attr.data-pc-section]="'removeTokenIcon'" [attr.aria-hidden]="true" />
<span *ngIf="removeTokenIconTemplate" class="p-chips-token-icon" (click)="removeItem($event, i)" [attr.data-pc-section]="'removeTokenIcon'" [attr.aria-hidden]="true">
<ng-template *ngTemplateOutlet="removeTokenIconTemplate; context: { removeItem: removeItem.bind(this) }"></ng-template>
</span>
</ng-container>
</ng-template>
</p-chip>
</li>
<li class="p-inputchips-input-item" [ngClass]="{ 'p-chips-clearable': showClear && !disabled }" [attr.data-pc-section]="'inputToken'" role="option">
<input
#inputtext
type="text"
[attr.id]="inputId"
[attr.maxlength]="maxLength"
[attr.placeholder]="value && value.length ? null : placeholder"
[attr.tabindex]="tabindex"
(keydown)="onKeyDown($event)"
(input)="onInput()"
(paste)="onPaste($event)"
(focus)="onInputFocus($event)"
(blur)="onInputBlur($event)"
[disabled]="disabled || isMaxedOut"
[ngStyle]="inputStyle"
[class]="inputStyleClass"
pAutoFocus
[autofocus]="autofocus"
class="test"
/>
</li>
<li *ngIf="value != null && filled && !disabled && showClear">
<TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-chips-clear-icon'" (click)="clear()" />
<span *ngIf="clearIconTemplate" class="p-chips-clear-icon" (click)="clear()">
<ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
</span>
</li>
</ul>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: Chips, decorators: [{
type: Component,
args: [{
selector: 'p-chips',
standalone: true,
imports: [CommonModule, InputTextModule, SharedModule, AutoFocusModule, TimesCircleIcon, TimesIcon, ChipModule],
template: `
<div
[ngClass]="{
'p-inputchips p-component p-input-wrapper': true,
'p-disabled': disabled,
'p-focus': focused,
'p-inputwrapper-filled': (value && value.length) || (this.inputViewChild?.nativeElement.value && this.inputViewChild?.nativeElement.value.length),
'p-inputwrapper-focus': focused
}"
[ngStyle]="style"
[class]="styleClass"
[attr.data-pc-name]="'chips'"
[attr.data-pc-section]="'root'"
>
<ul
#container
class="p-inputchips-input"
tabindex="-1"
role="listbox"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.aria-label]="ariaLabel"
[attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
[attr.aria-orientation]="'horizontal'"
(click)="onWrapperClick()"
(focus)="onContainerFocus()"
(blur)="onContainerBlur()"
(keydown)="onContainerKeyDown($event)"
[attr.data-pc-section]="'container'"
>
<li
#token
*ngFor="let item of value; let i = index"
[attr.id]="id + '_chips_item_' + i"
role="option"
[attr.ariaLabel]="item"
[attr.aria-selected]="true"
[attr.aria-setsize]="value.length"
[attr.aria-posinset]="i + 1"
[attr.data-p-focused]="focusedIndex === i"
[ngClass]="{ 'p-inputchips-chip-item': true, 'p-focus': focusedIndex === i }"
(click)="onItemClick($event, item)"
(contextmenu)="onItemContextMenu($event, item)"
[attr.data-pc-section]="'token'"
>
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
<p-chip *ngIf="!itemTemplate" class="p-inputchips-chip" [label]="field ? resolveFieldData(item, field) : item" [removeIcon]="chipIcon" removable (onRemove)="removeItem($event, i)">
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
<ng-template #removeicon>
<ng-container *ngIf="!disabled">
<TimesCircleIcon [styleClass]="'p-chips-token-icon'" *ngIf="!removeTokenIconTemplate" (click)="removeItem($event, i)" [attr.data-pc-section]="'removeTokenIcon'" [attr.aria-hidden]="true" />
<span *ngIf="removeTokenIconTemplate" class="p-chips-token-icon" (click)="removeItem($event, i)" [attr.data-pc-section]="'removeTokenIcon'" [attr.aria-hidden]="true">
<ng-template *ngTemplateOutlet="removeTokenIconTemplate; context: { removeItem: removeItem.bind(this) }"></ng-template>
</span>
</ng-container>
</ng-template>
</p-chip>
</li>
<li class="p-inputchips-input-item" [ngClass]="{ 'p-chips-clearable': showClear && !disabled }" [attr.data-pc-section]="'inputToken'" role="option">
<input
#inputtext
type="text"
[attr.id]="inputId"
[attr.maxlength]="maxLength"
[attr.placeholder]="value && value.length ? null : placeholder"
[attr.tabindex]="tabindex"
(keydown)="onKeyDown($event)"
(input)="onInput()"
(paste)="onPaste($event)"
(focus)="onInputFocus($event)"
(blur)="onInputBlur($event)"
[disabled]="disabled || isMaxedOut"
[ngStyle]="inputStyle"
[class]="inputStyleClass"
pAutoFocus
[autofocus]="autofocus"
class="test"
/>
</li>
<li *ngIf="value != null && filled && !disabled && showClear">
<TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-chips-clear-icon'" (click)="clear()" />
<span *ngIf="clearIconTemplate" class="p-chips-clear-icon" (click)="clear()">
<ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
</span>
</li>
</ul>
</div>
`,
host: {
class: 'p-element p-inputwrapper',
'[class.p-inputwrapper-filled]': 'filled',
'[class.p-inputwrapper-focus]': 'focused',
'[class.p-chips-clearable]': 'showClear'
},
providers: [CHIPS_VALUE_ACCESSOR, ChipsStyle],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNG }], propDecorators: { style: [{
type: Input
}], styleClass: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], field: [{
type: Input
}], placeholder: [{
type: Input
}], max: [{
type: Input,
args: [{ transform: numberAttribute }]
}], maxLength: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}], tabindex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], inputId: [{
type: Input
}], allowDuplicate: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], caseSensitiveDuplication: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], inputStyle: [{
type: Input
}], inputStyleClass: [{
type: Input
}], chipIcon: [{
type: Input
}], addOnTab: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], addOnBlur: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], separator: [{
type: Input
}], showClear: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], autofocus: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], variant: [{
type: Input
}], onAdd: [{
type: Output
}], onRemove: [{
type: Output
}], onFocus: [{
type: Output
}], onBlur: [{
type: Output
}], onChipClick: [{
type: Output
}], onChipContextMenu: [{
type: Output
}], onClear: [{
type: Output
}], inputViewChild: [{
type: ViewChild,
args: ['inputtext']
}], containerViewChild: [{
type: ViewChild,
args: ['container']
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class ChipsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: ChipsModule, imports: [Chips, SharedModule], exports: [Chips, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChipsModule, imports: [Chips, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChipsModule, decorators: [{
type: NgModule,
args: [{
imports: [Chips, SharedModule],
exports: [Chips, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CHIPS_VALUE_ACCESSOR, Chips, ChipsModule };
//# sourceMappingURL=primeng-chips.mjs.map