import { KbqTagsModule } from '@koobiq/components/tags';@Component({ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', exportAs: 'kbqTag' }) class KbqTag extends KbqColorDirective implements IFocusableOption, KbqTitleTextRef { readonly editable = input<boolean | undefined>(); readonly preventEditSubmit = input<boolean>(false); readonly selected = input(false); value = input<NonNullable<unknown> | null | undefined>(); readonly selectable = input(false); readonly removable = input(true); tabindex = input<number | null | undefined>(); disabled = input<boolean | undefined>(); readonly color = input<T | null | undefined>(); readonly editChange = output<KbqTagEditChange>(); readonly selectionChange = output<KbqTagSelectionChange>(); readonly destroyed = output<KbqTagEvent>(); readonly removed = output<KbqTagEvent>(); changeDetectorRef: ChangeDetectorRef; readonly contentChildren: Signal<readonly KbqIcon[]>; readonly avatar: Signal<KbqTagAvatar | undefined>; readonly trailingIcon: Signal<KbqTagTrailingIcon | undefined>; readonly removeIcon: Signal<any>; get canRemove(): boolean; get colorClassName(): string; select(): void; deselect(): void; toggleSelected(isUserInput?: boolean): boolean; focus(): void; remove(): void; setDefaultColor(color: T): void; }
editableboolean | undefined Whether the tag is editable.
preventEditSubmitboolean Whether the tag edits can't be submitted.
selectedSignal<boolean> Whether the tag is selected.
valueNonNullable<unknown> | null | undefined The value of the tag. Defaults to the content inside <kbq-tag> tags.
selectableSignal<boolean> Whether the tag is selectable.
removableSignal<boolean> Determines whether the tag is removable.
tabindexnumber | null | undefined Tab order of the tag.
disabledboolean | undefined Whether the tag is disabled.
localeOverridesKbqPartialLocaleData | undefined Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.
colorT | null | undefined Color of the component. A value set in code holds until the input changes, and the default color is used while both are unset or falsy.
editChangeKbqTagEditChange Emits event when the tag is edited.
selectionChangeKbqTagSelectionChange Emitted when the tag is selected or deselected.
destroyedKbqTagEvent Emitted when the tag is destroyed and leaving the DOM.
removedKbqTagEvent Emitted when a tag is to be removed. Fires on programmatic and UI removal (click or keyboard).
avatarSignal<KbqTagAvatar | undefined> The tag avatar
trailingIconSignal<KbqTagTrailingIcon | undefined> The tag's trailing icon.
removeIconSignal<any> The tag's remove toggler.
canRemoveboolean Whether the user may remove this tag through the controls the tag itself offers — the remove
control and the Delete key. A disabled tag offers neither.
This is the affordance, not the channel: remove() stays open so the list can still clear a
disabled tag when clearPredicate asks for it.
colorClassNamestring current class name of color
select()void Selects the tag.
deselect()void Deselects the tag.
toggleSelected()boolean Toggles the current selected state of the tag.
focus()void Focuses the tag.
remove()void Allows for programmatic removal of the tag. Called by the KbqTagList when the DELETE or BACKSPACE keys are pressed.
Informs any listeners of the removal request. Does not remove the tag from the DOM.
setDefaultColor()void this color will be used as a default value. For example [color]="'' | false | undefined | null".
@Component({ selector: 'kbq-tag-list', exportAs: 'kbqTagList' }) class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccessor, CanUpdateErrorState { draggable = input<boolean | undefined>(); readonly selectable = input<boolean>(true); readonly editable = input<boolean>(false); readonly clearPredicate = input<(tag: KbqTag) => boolean>( (tag) => !tag.disabled ); readonly removable = input<boolean>(true); readonly errorStateMatcher = input<ErrorStateMatcher>(); readonly dropped = output<KbqTagListDroppedEvent>(); readonly change = output<KbqTagListChange>(); defaultErrorStateMatcher: ErrorStateMatcher; parentForm: NgForm | null; parentFormGroup: FormGroupDirective | null; ngControl: NgControl; readonly focused: Signal<boolean>; notifyPendingTagChange(): void; focus(): void; blur(): void; markAsTouched(): void; }
draggableboolean | undefined Whether the tags in the list can be reordered by dragging.
selectableboolean Whether or not this tag list is selectable. When a tag list is not selectable, the selected states for all the tags inside the tag list are always ignored.
editableboolean Whether the tags in the list are editable.
clearPredicate(tag: KbqTag) => boolean Decides which tags the projected KbqCleaner removes: return true to clear the tag, false to
keep it. Disabled tags are kept by default. Bind a stable reference — a new function on every change
detection re-runs the predicate over every tag.
A tag the list does not allow to be removed is never offered, whatever the predicate answers.
removableboolean Whether the tags in the list are removable.
errorStateMatcherErrorStateMatcher An object used to control when error messages are shown.
droppedKbqTagListDroppedEvent Emits when the user drops tag inside tag list container.
changeKbqTagListChange Event emitted when the selected tag list value has been changed by the user.
focusedSignal<boolean> Whether any tags or the kbqTagInput inside of this tag-list has focus.
notifyPendingTagChange()void Notifies that the next tags.changes emission is UI-initiated.
focus()void Focuses the tag list. If there is a tag input, focuses that instead.
blur()void When blurred, mark the field as touched when focus moved outside the tag list.
markAsTouched()void Mark the field as touched
Directive to add input behavior for the editable tag.
@Directive({ selector: '[kbqTagEditInput]', exportAs: 'kbqTagEditInput' }) class KbqTagEditInput {}
Directive to add submit behavior for the editable tag.
@Directive({ selector: '[kbqTagEditSubmit]', exportAs: 'kbqTagEditSubmit' }) class KbqTagEditSubmit {}
Directive that adds tag-specific behaviors to an input element inside <kbq-form-field>.
May be placed inside or outside of an <kbq-tag-list>.
@Directive({ selector: 'input[kbqTagInputFor]', exportAs: 'kbqTagInput, kbqTagInputFor' }) class KbqTagInput implements KbqTagTextControl { readonly separatorKeyCodes = input<number[]>( this.defaultOptions.separatorKeyCodes, { alias: 'kbqTagInputSeparatorKeyCodes' } ); readonly distinct = input<boolean>(false); readonly placeholder = input<string>(''); readonly id = input<string>( inject(_IdGenerator).getId('kbq-tag-list-input-') ); readonly tagList = input<KbqTagList | undefined>(undefined, { alias: 'kbqTagInputFor' }); readonly addOnBlur = input<boolean>(true, { alias: 'kbqTagInputAddOnBlur' }); readonly addOnPaste = input<boolean>( this.defaultOptions.addOnPaste ?? true, { alias: 'kbqTagInputAddOnPaste' } ); disabled = input<boolean | undefined>(); readonly tagEnd = output<KbqTagInputEvent>({ alias: 'kbqTagInputTokenEnd' }); readonly autofilled: Signal<boolean>; readonly empty: Signal<boolean>; focus(): void; }
kbqTagInputSeparatorKeyCodesnumber[] The list of key codes that will trigger a tagEnd event.
Defaults to [ENTER].
distinctboolean A value indicating whether allow/prevent tags duplication
placeholderstring The input's placeholder text.
idstring Unique id for the input.
kbqTagInputForKbqTagList | undefined Register input for tag list.
kbqTagInputAddOnBlurboolean Whether or not the tagEnd event will be emitted when the input is blurred.
kbqTagInputAddOnPasteboolean Whether the tagEnd event will be emitted when the text pasted. Defaults to addOnPaste of
KBQ_TAGS_DEFAULT_OPTIONS, or true.
disabledboolean | undefined Whether the input is disabled.
kbqTagInputTokenEndKbqTagInputEvent Emitted when a tag is to be added.
autofilledSignal<boolean> Whether the control's value was filled in by the browser.
emptySignal<boolean> Whether the input is empty.
focus()void Focuses the input.
Marks content to be projected into the prefix (leading) slot of a tag.
@Directive({ selector: '[kbqTagPrefix]' }) class KbqTagPrefix {}
Example:
<kbq-tag>
<kbq-icon kbqTagRemove>cancel</kbq-icon>
</kbq-tag>
You may use a custom icon, but you may need to override the kbq-tag-remove positioning
styles to properly center the icon within the tag.
@Directive({ selector: '[kbqTagRemove]' }) class KbqTagRemove { readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' }); }
aria-labelstring | undefined Accessible name of the button. Defaults to the localized "Remove".
Marks content to be projected into the suffix (trailing) slot of a tag.
@Directive({ selector: '[kbqTagSuffix]' }) class KbqTagSuffix {}
Event object emitted by KbqTag when the tag is edited.
class KbqTagEditChange { readonly tag: KbqTag; readonly type: "start" | "cancel" | "submit"; readonly reason: string; constructor( tag: KbqTag, type: "start" | "cancel" | "submit", reason: string ); }
Change event object that is emitted when the tag list value has changed.
class KbqTagListChange { source: KbqTagList; value: any; constructor(source: KbqTagList, value: any); }
Event object emitted by KbqTag when selected or deselected.
class KbqTagSelectionChange { source: KbqTag; selected: boolean; isUserInput: boolean; constructor( source: KbqTag, selected: boolean, isUserInput?: boolean ); }
Event object emitted by KbqTag.
type KbqTagEvent = { tag: KbqTag; };
Event object emitted when the KbqTag is focused.
type KbqTagFocusEvent = KbqTagEvent & { origin: FocusOrigin; };
Represents an input event on a kbqTagInput.
interface KbqTagInputEvent { input: HTMLInputElement; value: string; }
inputHTMLInputElement The native <input> element that the event is being fired for.
valuestring The value of the input.
type KbqTagListDroppedEvent = Pick<CdkDragDrop<unknown>, 'event' | 'previousIndex' | 'currentIndex'> & { tag: KbqTag; };
Default options for the tags module that can be overridden.
interface KbqTagsDefaultOptions { separatorKeyCodes: number[]; separators?: KbqTagSeparator[]; addOnPaste?: boolean; }
separatorKeyCodesnumber[] The list of key codes that will trigger a tagEnd event.
separatorsKbqTagSeparator[] Custom separator definitions to use instead of the built-in defaults.
addOnPasteboolean Whether the tagEnd event will be emitted when text is pasted.
Defines a character or pattern that ends a tag, and the contexts in which it applies.
interface KbqTagSeparator { symbol: RegExp; key?: string; keyCode?: number; appliesTo?: KbqTagSeparatorContext[]; }
symbolRegExp Regular expression used to match/split this separator in text.
keystring KeyboardEvent.key that triggers this separator while typing.
Omit for separators with no single-keystroke equivalent (e.g. a run of whitespace) —
those are implicitly paste-only, since they can never match a keydown.
keyCodenumber Numeric key code gating whether this separator is enabled, set via kbqTagInputSeparatorKeyCodes.
Omit together with key for separators that should always be active regardless of that input.
appliesToKbqTagSeparatorContext[] Contexts this separator applies to. Defaults to ['input', 'paste'].
Contexts a KbqTagSeparator can be active in.
type KbqTagSeparatorContext = 'input' | 'paste';Injection token to be used to override the default options.
const KBQ_TAGS_DEFAULT_OPTIONS: InjectionToken<KbqTagsDefaultOptions>;Utility provider for KBQ_TAGS_DEFAULT_OPTIONS.
const kbqTagsDefaultOptionsProvider: ( options: Partial<KbqTagsDefaultOptions> ) => Provider;