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,
749 lines (744 loc) • 43.2 kB
JavaScript
export * from 'primeng/types/inputtags';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, forwardRef, inject, input, booleanAttribute, numberAttribute, output, contentChild, viewChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { TimesCircle } from '@primeicons/angular/times-circle';
import { uuid, cn, resolveFieldData, focus } from '@primeuix/utils';
import { SharedModule } from 'primeng/api';
import { AutoComplete } from 'primeng/autocomplete';
import { PARENT_INSTANCE } from 'primeng/basecomponent';
import { BaseInput } from 'primeng/baseinput';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { Chip } from 'primeng/chip';
import { style } from '@primeuix/styles/inputtags';
import { BaseStyle } from 'primeng/base';
const inlineStyles = {
root: { position: 'relative' }
};
const classes = {
root: ({ instance }) => [
'p-inputtags p-component p-inputwrapper',
{
'p-invalid': instance.invalid(),
'p-focus': instance.focused(),
'p-inputwrapper-filled': instance.$filled(),
'p-inputwrapper-focus': instance.focused() && !instance.$disabled(),
'p-inputtags-fluid': instance.hasFluid,
'p-disabled': instance.$disabled(),
'p-variant-filled': instance.$variant() === 'filled'
}
],
item: ({ instance, i }) => [
'p-inputtags-item',
{
'p-focus': instance.focusedItemIndex() === i
}
],
pcChip: 'p-inputtags-item',
pcInputText: 'p-inputtags-input'
};
class InputTagsStyle extends BaseStyle {
name = 'inputtags';
style = style;
classes = classes;
inlineStyles = inlineStyles;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputTagsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputTagsStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputTagsStyle, decorators: [{
type: Injectable
}] });
/**
*
* InputTags is used to enter multiple tags.
*
* [Live Demo](https://www.primeng.org/inputtags)
*
* @module inputtagsstyle
*
*/
var InputTagsClasses;
(function (InputTagsClasses) {
InputTagsClasses["root"] = "p-inputtags";
InputTagsClasses["item"] = "p-inputtags-item";
InputTagsClasses["pcInputText"] = "p-inputtags-input";
})(InputTagsClasses || (InputTagsClasses = {}));
const INPUTTAGS_INSTANCE = new InjectionToken('INPUTTAGS_INSTANCE');
const INPUTTAGS_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputTags),
multi: true
};
/**
* InputTags is used to enter multiple tags with optional typeahead suggestions.
* @group Components
*/
class InputTags extends BaseInput {
componentName = 'InputTags';
$pcInputTags = inject(INPUTTAGS_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
/**
* Advisory information to display on input.
* @group Props
*/
placeholder = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
/**
* Maximum number of tags allowed.
* @group Props
*/
max = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
/**
* Delimiter character or regex to split input into tags.
* @group Props
*/
delimiter = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "delimiter" }] : /* istanbul ignore next */ []));
/**
* Whether to allow duplicate tags.
* @defaultValue false
* @group Props
*/
allowDuplicate = input(false, { ...(ngDevMode ? { debugName: "allowDuplicate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether to add a tag when the input loses focus.
* @defaultValue false
* @group Props
*/
addOnBlur = input(false, { ...(ngDevMode ? { debugName: "addOnBlur" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether to add a tag on tab key press.
* @defaultValue false
* @group Props
*/
addOnTab = input(false, { ...(ngDevMode ? { debugName: "addOnTab" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether to add tags on paste event.
* @defaultValue false
* @group Props
*/
addOnPaste = input(false, { ...(ngDevMode ? { debugName: "addOnPaste" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "tabindex" }] : /* istanbul ignore next */ []));
/**
* Whether typeahead mode is active.
* @defaultValue false
* @group Props
*/
typeahead = input(false, { ...(ngDevMode ? { debugName: "typeahead" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* An array of suggestions to display in the dropdown.
* @group Props
*/
suggestions = input([], /* @ts-ignore */
...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
/**
* Property name or getter function for option label.
* @group Props
*/
optionLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "optionLabel" }] : /* istanbul ignore next */ []));
/**
* Property name or getter function for option value.
* @group Props
*/
optionValue = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "optionValue" }] : /* istanbul ignore next */ []));
/**
* Property name or getter function for disabled state.
* @group Props
*/
optionDisabled = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
/**
* Field name for option group label.
* @defaultValue 'label'
* @group Props
*/
optionGroupLabel = input('label', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "optionGroupLabel" }] : /* istanbul ignore next */ []));
/**
* Field name for option group children.
* @defaultValue 'items'
* @group Props
*/
optionGroupChildren = input('items', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "optionGroupChildren" }] : /* istanbul ignore next */ []));
/**
* Whether to display options as grouped.
* @defaultValue false
* @group Props
*/
group = input(false, { ...(ngDevMode ? { debugName: "group" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Delay in ms between keystrokes before triggering search.
* @defaultValue 300
* @group Props
*/
delay = input(300, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Minimum number of characters to initiate a search.
* @defaultValue 1
* @group Props
*/
minQueryLength = input(1, { ...(ngDevMode ? { debugName: "minQueryLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Whether to trigger search when input receives focus.
* @defaultValue false
* @group Props
*/
completeOnFocus = input(false, { ...(ngDevMode ? { debugName: "completeOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Maximum height of the suggestions panel.
* @defaultValue '200px'
* @group Props
*/
scrollHeight = input('200px', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
/**
* Target element to attach the overlay.
* @defaultValue 'body'
* @group Props
*/
appendTo = input('body', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
/**
* Configuration for the overlay element.
* @group Props
*/
overlayOptions = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "overlayOptions" }] : /* istanbul ignore next */ []));
/**
* Animation options for the overlay.
* @group Props
*/
motionOptions = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "motionOptions" }] : /* istanbul ignore next */ []));
/**
* Inline style of the overlay panel.
* @group Props
*/
panelStyle = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "panelStyle" }] : /* istanbul ignore next */ []));
/**
* CSS class of the overlay panel.
* @group Props
*/
panelStyleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "panelStyleClass" }] : /* istanbul ignore next */ []));
/**
* Inline style of the input field.
* @group Props
*/
inputStyle = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
/**
* CSS class of the input field.
* @group Props
*/
inputStyleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "inputStyleClass" }] : /* istanbul ignore next */ []));
/**
* Whether to auto-focus first option when overlay shows.
* @defaultValue false
* @group Props
*/
autoOptionFocus = input(false, { ...(ngDevMode ? { debugName: "autoOptionFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether hover focuses an option.
* @defaultValue true
* @group Props
*/
focusOnHover = input(true, { ...(ngDevMode ? { debugName: "focusOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
onAdd = output();
onRemove = output();
onFocus = output();
onBlur = output();
/**
* Callback to invoke to search for suggestions.
* @param {InputTagsCompleteEvent} event - Custom complete event.
* @group Emits
*/
completeMethod = output();
/**
* Callback to invoke when a suggestion is selected.
* @param {InputTagsSelectEvent} event - Custom select event.
* @group Emits
*/
onSelect = output();
/**
* Callback to invoke when the overlay is shown.
* @group Emits
*/
onShow = output();
/**
* Callback to invoke when the overlay is hidden.
* @group Emits
*/
onHide = output();
itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
removeIconTemplate = contentChild('removeicon', { ...(ngDevMode ? { debugName: "removeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
optionTemplate = contentChild('option', { ...(ngDevMode ? { debugName: "optionTemplate" } : /* istanbul ignore next */ {}), descendants: false });
groupTemplate = contentChild('group', { ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), descendants: false });
headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
autoCompleteRef = viewChild('ac', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "autoCompleteRef" }] : /* istanbul ignore next */ []));
focused = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
focusedItemIndex = signal(-1, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : /* istanbul ignore next */ []));
_componentStyle = inject(InputTagsStyle);
_internalId = uuid('pn_id_');
$id = computed(() => this._internalId, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$id" }] : /* istanbul ignore next */ []));
_placeholder = computed(() => this.placeholder(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_placeholder" }] : /* istanbul ignore next */ []));
focusedItemId = computed(() => (this.focusedItemIndex() !== -1 ? `${this.$id()}_item_${this.focusedItemIndex()}` : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focusedItemId" }] : /* istanbul ignore next */ []));
$appendTo = computed(() => this.appendTo() ?? this.config?.overlayAppendTo(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
$inputStyleClass = computed(() => cn(this.cx('pcInputText'), this.inputStyleClass()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$inputStyleClass" }] : /* istanbul ignore next */ []));
_removeItemBound = this.removeItem.bind(this);
_pasteListener = null;
onAfterViewInit() {
this.bindPasteListener();
}
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
onDestroy() {
this.unbindPasteListener();
}
writeControlValue(value, setModelValue) {
setModelValue?.(value || []);
}
getItemLabel(item) {
const optLabel = this.optionLabel();
if (optLabel && typeof item === 'object') {
return typeof optLabel === 'function' ? optLabel(item) : resolveFieldData(item, optLabel);
}
return typeof item === 'object' ? JSON.stringify(item) : String(item);
}
addItem(event, value) {
const trimmed = value.trim();
if (!trimmed)
return;
if (this.max() != null && (this.modelValue()?.length ?? 0) >= this.max())
return;
if (!this.allowDuplicate() && this.modelValue()?.includes(trimmed))
return;
const newValue = [...(this.modelValue() || []), trimmed];
this._updateModel(newValue);
this.onAdd.emit({ originalEvent: event, value: trimmed });
this.clearAcInput();
}
removeItem(event, index) {
if (this.$disabled())
return;
const current = this.modelValue() || [];
const removed = current[index];
const newValue = current.filter((_, i) => i !== index);
this._updateModel(newValue);
this.onRemove.emit({ originalEvent: event, value: removed, index });
setTimeout(() => this.autoCompleteRef()?.overlayViewChild()?.alignOverlay());
}
onContainerClick(event) {
if (this.$disabled())
return;
const target = event.target;
if (target.closest?.('[data-p-focused]'))
return;
this.focusAcInput();
}
onContainerKeyDown(event) {
if (this.$disabled())
return;
switch (event.code) {
case 'ArrowLeft':
this.onArrowLeftInContainer(event);
break;
case 'ArrowRight':
this.onArrowRightInContainer(event);
break;
case 'Backspace':
this.onBackspaceInContainer(event);
break;
}
}
onAcSearch(event) {
this.completeMethod.emit({ originalEvent: event.originalEvent, query: event.query });
}
onAcSelect(event) {
const option = event.value;
const optValue = this.optionValue();
const value = optValue ? (typeof optValue === 'function' ? optValue(option) : resolveFieldData(option, optValue)) : option;
if (this.max() != null && (this.modelValue()?.length ?? 0) >= this.max()) {
this.clearAcInput();
return;
}
const newModelValue = [...(this.modelValue() || []), value];
this._updateModel(newModelValue);
this.onAdd.emit({ originalEvent: event.originalEvent, value });
this.onSelect.emit({ originalEvent: event.originalEvent, value: option });
// Clear the AC's internal value and input after selection
setTimeout(() => {
const ac = this.autoCompleteRef();
if (ac) {
ac.writeValue(null);
if (ac.inputEL()?.nativeElement) {
ac.inputEL().nativeElement.value = '';
}
}
});
}
onAcKeyDown(event) {
const ac = this.autoCompleteRef();
const inputValue = ac?.inputEL()?.nativeElement?.value || '';
switch (event.code) {
case 'Enter':
case 'NumpadEnter':
// If AC overlay is open and an option is focused, AC handles it via onSelect
if (ac?.overlayVisible() && ac?.focusedOptionIndex() !== -1) {
return;
}
// Otherwise add free text tag
if (inputValue) {
this.addItem(event, inputValue);
event.preventDefault();
event.stopPropagation();
}
break;
case 'Backspace':
if (!inputValue && this.modelValue()?.length > 0) {
this.removeItem(event, this.modelValue().length - 1);
event.stopPropagation();
}
break;
case 'Tab':
if (this.addOnTab() && inputValue) {
this.addItem(event, inputValue);
}
break;
default:
this.handleDelimiter(event);
break;
}
}
onInputFocus(event) {
if (this.$disabled())
return;
this.focused.set(true);
this.focusedItemIndex.set(-1);
this.onFocus.emit(event);
}
onInputBlur(event) {
if (this.addOnBlur()) {
const inputValue = this.autoCompleteRef()?.inputEL()?.nativeElement?.value || '';
if (inputValue) {
this.addItem(event, inputValue);
}
}
this.focused.set(false);
this.onModelTouched();
this.onBlur.emit(event);
}
handleDelimiter(event) {
const delimiter = this.delimiter();
if (!delimiter)
return;
const isMatch = typeof delimiter === 'string' ? event.key === delimiter : event.key.match(delimiter);
if (!isMatch)
return;
event.preventDefault();
const inputValue = this.autoCompleteRef()?.inputEL()?.nativeElement?.value || '';
if (inputValue) {
this.addItem(event, inputValue);
}
}
onArrowLeftInContainer(_event) {
const current = this.focusedItemIndex();
const length = this.modelValue()?.length ?? 0;
if (length === 0)
return;
if (current <= 0) {
this.focusedItemIndex.set(length - 1);
}
else {
this.focusedItemIndex.set(current - 1);
}
}
onArrowRightInContainer(_event) {
const current = this.focusedItemIndex();
const length = this.modelValue()?.length ?? 0;
if (length === 0)
return;
if (current >= length - 1) {
this.focusedItemIndex.set(-1);
this.focusAcInput();
}
else {
this.focusedItemIndex.set(current + 1);
}
}
onBackspaceInContainer(event) {
const current = this.focusedItemIndex();
if (current !== -1) {
this.removeItem(event, current);
const length = this.modelValue()?.length ?? 0;
if (length === 0) {
this.focusedItemIndex.set(-1);
this.focusAcInput();
}
else if (current >= length) {
this.focusedItemIndex.set(length - 1);
}
}
}
clearAcInput() {
const ac = this.autoCompleteRef();
if (ac?.inputEL()?.nativeElement) {
ac.inputEL().nativeElement.value = '';
}
}
focusAcInput() {
focus(this.autoCompleteRef()?.inputEL()?.nativeElement);
}
bindPasteListener() {
const inputEl = this.autoCompleteRef()?.inputEL()?.nativeElement;
if (inputEl) {
this._pasteListener = (event) => this.onInputPaste(event);
inputEl.addEventListener('paste', this._pasteListener);
}
}
unbindPasteListener() {
const inputEl = this.autoCompleteRef()?.inputEL()?.nativeElement;
if (inputEl && this._pasteListener) {
inputEl.removeEventListener('paste', this._pasteListener);
this._pasteListener = null;
}
}
onInputPaste(event) {
if (!this.addOnPaste())
return;
const pastedData = event.clipboardData?.getData('Text');
if (!pastedData)
return;
const delimiter = this.delimiter();
if (delimiter) {
pastedData.split(delimiter).forEach((v) => this.addItem(event, v));
}
else {
this.addItem(event, pastedData);
}
this.clearAcInput();
event.preventDefault();
}
_updateModel(value) {
this.writeModelValue(value);
this.onModelChange(value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputTags, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: InputTags, isStandalone: true, selector: "p-inputtags, p-input-tags", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, delimiter: { classPropertyName: "delimiter", publicName: "delimiter", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicate: { classPropertyName: "allowDuplicate", publicName: "allowDuplicate", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, addOnTab: { classPropertyName: "addOnTab", publicName: "addOnTab", isSignal: true, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "addOnPaste", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", 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 }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: true, isRequired: false, transformFunction: null }, completeOnFocus: { classPropertyName: "completeOnFocus", publicName: "completeOnFocus", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: true, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAdd: "onAdd", onRemove: "onRemove", onFocus: "onFocus", onBlur: "onBlur", completeMethod: "completeMethod", onSelect: "onSelect", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "click": "onContainerClick($event)", "keydown": "onContainerKeyDown($event)" }, properties: { "class": "cx('root')", "style": "sx('root')", "attr.role": "'listbox'", "attr.aria-orientation": "'horizontal'", "attr.aria-activedescendant": "focusedItemId()" } }, providers: [INPUTTAGS_VALUE_ACCESSOR, InputTagsStyle, { provide: INPUTTAGS_INSTANCE, useExisting: InputTags }, { provide: PARENT_INSTANCE, useExisting: InputTags }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "removeIconTemplate", first: true, predicate: ["removeicon"], isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }], viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: ["ac"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
(item of modelValue(); track i + '_' + item; let i = $index) {
(!itemTemplate()) {
<p-chip [class]="cx('item', { i })" [pt]="ptm('pcChip')" [label]="getItemLabel(item)" [removable]="true" (onRemove)="removeItem($event, i)" [unstyled]="unstyled()">
<ng-template #removeicon>
(!removeIconTemplate()) {
<span [pBind]="ptm('chipIcon')" [class]="cx('chipIcon')">
<svg data-p-icon="times-circle" [class]="cx('chipIcon')" [attr.aria-hidden]="true" />
</span>
} {
<span [pBind]="ptm('chipIcon')" [attr.aria-hidden]="true">
<ng-container [ngTemplateOutlet]="removeIconTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: i }"></ng-container>
</span>
}
</ng-template>
</p-chip>
} {
<ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: i, onRemove: _removeItemBound }"></ng-container>
}
}
<p-autocomplete
#ac
[typeahead]="typeahead()"
[suggestions]="suggestions()"
[optionLabel]="optionLabel()"
[optionValue]="optionValue()"
[optionDisabled]="optionDisabled()"
[optionGroupLabel]="optionGroupLabel()"
[optionGroupChildren]="optionGroupChildren()"
[group]="group()"
[delay]="delay()"
[minQueryLength]="minQueryLength()"
[completeOnFocus]="completeOnFocus()"
[scrollHeight]="scrollHeight()"
[appendTo]="$appendTo()"
[overlayOptions]="overlayOptions()"
[motionOptions]="motionOptions()"
[panelStyle]="panelStyle()"
[panelStyleClass]="panelStyleClass()"
[autoOptionFocus]="autoOptionFocus()"
[focusOnHover]="focusOnHover()"
[placeholder]="_placeholder()"
[tabindex]="tabindex()"
[disabled]="$disabled()"
[name]="name()"
[inputStyle]="inputStyle()"
[inputStyleClass]="$inputStyleClass()"
[pt]="ptm('pcAutoComplete')"
(completeMethod)="onAcSearch($event)"
(onSelect)="onAcSelect($event)"
(onFocus)="onInputFocus($event)"
(onBlur)="onInputBlur($event)"
(onShow)="onShow.emit()"
(onHide)="onHide.emit()"
(onInputKeydown)="onAcKeyDown($event)"
>
(optionTemplate()) {
<ng-template #item let-item let-index="index">
<ng-container [ngTemplateOutlet]="optionTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-container>
</ng-template>
}
(groupTemplate()) {
<ng-template #group let-group>
<ng-container [ngTemplateOutlet]="groupTemplate()!" [ngTemplateOutletContext]="{ $implicit: group }"></ng-container>
</ng-template>
}
(headerTemplate()) {
<ng-template #header>
<ng-container [ngTemplateOutlet]="headerTemplate()!"></ng-container>
</ng-template>
}
(footerTemplate()) {
<ng-template #footer>
<ng-container [ngTemplateOutlet]="footerTemplate()!"></ng-container>
</ng-template>
}
</p-autocomplete>
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: TimesCircle, selector: "svg[data-p-icon=\"times-circle\"]" }, { kind: "component", type: AutoComplete, selector: "p-autocomplete, p-auto-complete", inputs: ["minQueryLength", "delay", "panelStyle", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputTags, decorators: [{
type: Component,
args: [{
selector: 'p-inputtags, p-input-tags',
standalone: true,
imports: [NgTemplateOutlet, SharedModule, Bind, Chip, TimesCircle, AutoComplete],
template: `
(item of modelValue(); track i + '_' + item; let i = $index) {
(!itemTemplate()) {
<p-chip [class]="cx('item', { i })" [pt]="ptm('pcChip')" [label]="getItemLabel(item)" [removable]="true" (onRemove)="removeItem($event, i)" [unstyled]="unstyled()">
<ng-template #removeicon>
(!removeIconTemplate()) {
<span [pBind]="ptm('chipIcon')" [class]="cx('chipIcon')">
<svg data-p-icon="times-circle" [class]="cx('chipIcon')" [attr.aria-hidden]="true" />
</span>
} {
<span [pBind]="ptm('chipIcon')" [attr.aria-hidden]="true">
<ng-container [ngTemplateOutlet]="removeIconTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: i }"></ng-container>
</span>
}
</ng-template>
</p-chip>
} {
<ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: i, onRemove: _removeItemBound }"></ng-container>
}
}
<p-autocomplete
#ac
[typeahead]="typeahead()"
[suggestions]="suggestions()"
[optionLabel]="optionLabel()"
[optionValue]="optionValue()"
[optionDisabled]="optionDisabled()"
[optionGroupLabel]="optionGroupLabel()"
[optionGroupChildren]="optionGroupChildren()"
[group]="group()"
[delay]="delay()"
[minQueryLength]="minQueryLength()"
[completeOnFocus]="completeOnFocus()"
[scrollHeight]="scrollHeight()"
[appendTo]="$appendTo()"
[overlayOptions]="overlayOptions()"
[motionOptions]="motionOptions()"
[panelStyle]="panelStyle()"
[panelStyleClass]="panelStyleClass()"
[autoOptionFocus]="autoOptionFocus()"
[focusOnHover]="focusOnHover()"
[placeholder]="_placeholder()"
[tabindex]="tabindex()"
[disabled]="$disabled()"
[name]="name()"
[inputStyle]="inputStyle()"
[inputStyleClass]="$inputStyleClass()"
[pt]="ptm('pcAutoComplete')"
(completeMethod)="onAcSearch($event)"
(onSelect)="onAcSelect($event)"
(onFocus)="onInputFocus($event)"
(onBlur)="onInputBlur($event)"
(onShow)="onShow.emit()"
(onHide)="onHide.emit()"
(onInputKeydown)="onAcKeyDown($event)"
>
(optionTemplate()) {
<ng-template #item let-item let-index="index">
<ng-container [ngTemplateOutlet]="optionTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-container>
</ng-template>
}
(groupTemplate()) {
<ng-template #group let-group>
<ng-container [ngTemplateOutlet]="groupTemplate()!" [ngTemplateOutletContext]="{ $implicit: group }"></ng-container>
</ng-template>
}
(headerTemplate()) {
<ng-template #header>
<ng-container [ngTemplateOutlet]="headerTemplate()!"></ng-container>
</ng-template>
}
(footerTemplate()) {
<ng-template #footer>
<ng-container [ngTemplateOutlet]="footerTemplate()!"></ng-container>
</ng-template>
}
</p-autocomplete>
`,
providers: [INPUTTAGS_VALUE_ACCESSOR, InputTagsStyle, { provide: INPUTTAGS_INSTANCE, useExisting: InputTags }, { provide: PARENT_INSTANCE, useExisting: InputTags }],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': "cx('root')",
'[style]': "sx('root')",
'[attr.role]': "'listbox'",
'[attr.aria-orientation]': "'horizontal'",
'[attr.aria-activedescendant]': 'focusedItemId()',
'(click)': 'onContainerClick($event)',
'(keydown)': 'onContainerKeyDown($event)'
},
hostDirectives: [Bind]
}]
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], delimiter: [{ type: i0.Input, args: [{ isSignal: true, alias: "delimiter", required: false }] }], allowDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicate", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], addOnTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnTab", required: false }] }], addOnPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnPaste", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", 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 }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], completeOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "completeOnFocus", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], overlayOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], panelStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyleClass", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], autoOptionFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOptionFocus", required: false }] }], focusOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnHover", required: false }] }], onAdd: [{ type: i0.Output, args: ["onAdd"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], completeMethod: [{ type: i0.Output, args: ["completeMethod"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], removeIconTemplate: [{ type: i0.ContentChild, args: ['removeicon', { ...{ descendants: false }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: ['option', { ...{ descendants: false }, isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: ['group', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], autoCompleteRef: [{ type: i0.ViewChild, args: ['ac', { isSignal: true }] }] } });
class InputTagsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: InputTagsModule, imports: [InputTags, SharedModule], exports: [InputTags, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputTagsModule, imports: [InputTags, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputTagsModule, decorators: [{
type: NgModule,
args: [{
imports: [InputTags, SharedModule],
exports: [InputTags, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { INPUTTAGS_VALUE_ACCESSOR, InputTags, InputTagsClasses, InputTagsModule, InputTagsStyle };
//# sourceMappingURL=primeng-inputtags.mjs.map