Koobiq

KbqTagInput

Directive that adds tag-specific behaviors to an input element inside ``. May be placed inside or outside of an ``.

Selector: input[kbqTagInputFor]

Exported as: kbqTagInput, kbqTagInputFor

Properties

Name	Description
@Input('kbqTagInputAddOnBlur') addOnBlur: boolean	Whether or not the tagEnd event will be emitted when the input is blurred.
@Input('kbqTagInputAddOnPaste') addOnPaste: boolean	Whether the tagEnd event will be emitted when the text pasted.
@Input() disabled: boolean	Whether the input is disabled.
@Input() distinct: boolean	A value indicating whether allow/prevent tags duplication
@Input() id: string	Unique id for the input.
@Input() placeholder: string	The input's placeholder text.
@Input('kbqTagInputSeparatorKeyCodes') separatorKeyCodes: number[]	The list of key codes that will trigger a tagEnd event. Defaults to `[ENTER]`.
@Input('kbqTagInputFor') tagList: KbqTagList	Register input for tag list
@Output('kbqTagInputTokenEnd') tagEnd: EventEmitter	Emitted when a tag is to be added.
autocompleteTrigger: KbqAutocompleteTrigger
empty: boolean	Whether the input is empty.
focused: boolean	Whether the control is focused.
hasDuplicates: boolean
ngControl: NgControl

Name

Description

@Input('kbqTagInputAddOnBlur')

addOnBlur: boolean

Whether or not the tagEnd event will be emitted when the input is blurred.

@Input('kbqTagInputAddOnPaste')

addOnPaste: boolean

Whether the tagEnd event will be emitted when the text pasted.

@Input()

disabled: boolean

Whether the input is disabled.

@Input()

distinct: boolean

A value indicating whether allow/prevent tags duplication

@Input()

id: string

Unique id for the input.

@Input()

placeholder: string

The input's placeholder text.

@Input('kbqTagInputSeparatorKeyCodes')

separatorKeyCodes: number[]

The list of key codes that will trigger a tagEnd event. Defaults to `[ENTER]`.

@Input('kbqTagInputFor')

tagList: KbqTagList

Register input for tag list

@Output('kbqTagInputTokenEnd')

tagEnd: EventEmitter

Emitted when a tag is to be added.

autocompleteTrigger: KbqAutocompleteTrigger

empty: boolean

Whether the input is empty.

focused: boolean

Whether the control is focused.

hasDuplicates: boolean

ngControl: NgControl

Methods

blur

Checks to see if the blur should emit the (tagEnd) event.

emitTagEnd

Checks to see if the (tagEnd) event needs to be emitted.

focus

Focuses the input.

onInput

onPaste

triggerValidation

KbqTagList

Selector: kbq-tag-list

Exported as: kbqTagList

Properties

Name	Description
@Input() disabled: boolean
@Input() draggable: boolean
@Input() editable: boolean	Whether the tags in the list are editable.
@Input() emitOnTagChanges: boolean	Whether to emit change events when tags are added/removed. Set to `false` to prevent the form control from being marked as dirty during programmatic updates.
@Input() errorStateMatcher: ErrorStateMatcher	An object used to control when error messages are shown.
@Input() placeholder: string
@Input() removable: boolean	Whether the tags in the list are removable.
@Input() required: boolean
@Input() selectable: boolean	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.
@Input() value: any
@Output('change') change: EventEmitter	Event emitted when the selected tag list value has been changed by the user.
@Output('dropped') dropped: EventEmitter	Emits when the user drops tag inside tag list container.
defaultErrorStateMatcher: ErrorStateMatcher
focused: boolean	Whether any tags or the kbqTagInput inside of this tag-list has focus.
ngControl: NgControl
parentForm: NgForm
parentFormGroup: FormGroupDirective
@Input() Deprecated compareWith: (o1: any, o2: any) => boolean	A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned.
@Input() Deprecated orientation: KbqOrientation	Orientation of the tag list.

Name

Description

@Input()

disabled: boolean

@Input()

draggable: boolean

@Input()

editable: boolean

Whether the tags in the list are editable.

@Input()

emitOnTagChanges: boolean

Whether to emit change events when tags are added/removed. Set to `false` to prevent the form control from being marked as dirty during programmatic updates.

@Input()

errorStateMatcher: ErrorStateMatcher

An object used to control when error messages are shown.

@Input()

placeholder: string

@Input()

removable: boolean

Whether the tags in the list are removable.

@Input()

required: boolean

@Input()

selectable: boolean

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.

@Input()

value: any

@Output('change')

change: EventEmitter

Event emitted when the selected tag list value has been changed by the user.

@Output('dropped')

dropped: EventEmitter

Emits when the user drops tag inside tag list container.

defaultErrorStateMatcher: ErrorStateMatcher

focused: boolean

Whether any tags or the kbqTagInput inside of this tag-list has focus.

ngControl: NgControl

parentForm: NgForm

parentFormGroup: FormGroupDirective

@Input()

Deprecated

compareWith: (o1: any, o2: any) => boolean

A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned.

@Input()

Deprecated

orientation: KbqOrientation

Orientation of the tag list.

Methods

blur

When blurred, mark the field as touched when focus moved outside the tag list.

focus

Focuses the tag list. If there is a tag input, focuses that instead.

markAsTouched

Mark the field as touched

KbqTagEditSubmit

Directive to add submit behavior for the editable tag.

Selector: [kbqTagEditSubmit]

Exported as: kbqTagEditSubmit

KbqTagEditInput

Directive to add input behavior for the editable tag.

Selector: [kbqTagEditInput]

Exported as: kbqTagEditInput

KbqTag

Selector: kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]

Exported as: kbqTag

Properties

Name	Description
@Input() disabled: boolean	Whether the tag is disabled.
@Input() editable: boolean	Whether the tag is editable.
@Input() preventEditSubmit: boolean	Whether the tag edits can't be submitted.
@Input() removable: boolean	Determines whether the tag is removable.
@Input() selectable: boolean	Whether the tag is selectable.
@Input() selected: boolean	Whether the tag is selected.
@Input() tabindex: any
@Input() value: any	The value of the tag. Defaults to the content inside `` tags.
@Output('destroyed') destroyed: EventEmitter	Emitted when the tag is destroyed.
@Output('editChange') editChange: EventEmitter	Emits event when the tag is edited.
@Output('removed') removed: EventEmitter	Emitted when a tag is to be removed.
@Output('selectionChange') selectionChange: EventEmitter	Emitted when the tag is selected or deselected.
avatar: KbqTagAvatar	The tag avatar
changeDetectorRef: ChangeDetectorRef
color: string
colorClassName: string	current class name of color
contentChildren: QueryList
removeIcon: KbqTagRemove	The tag's remove toggler.
trailingIcon: KbqTagTrailingIcon	The tag's trailing icon.

Name

Description

@Input()

disabled: boolean

Whether the tag is disabled.

@Input()

editable: boolean

Whether the tag is editable.

@Input()

preventEditSubmit: boolean

Whether the tag edits can't be submitted.

@Input()

removable: boolean

Determines whether the tag is removable.

@Input()

selectable: boolean

Whether the tag is selectable.

@Input()

selected: boolean

Whether the tag is selected.

@Input()

tabindex: any

@Input()

value: any

The value of the tag. Defaults to the content inside `` tags.

@Output('destroyed')

destroyed: EventEmitter

Emitted when the tag is destroyed.

@Output('editChange')

editChange: EventEmitter

Emits event when the tag is edited.

@Output('removed')

removed: EventEmitter

Emitted when a tag is to be removed.

@Output('selectionChange')

selectionChange: EventEmitter

Emitted when the tag is selected or deselected.

avatar: KbqTagAvatar

The tag avatar

changeDetectorRef: ChangeDetectorRef

color: string

colorClassName: string

current class name of color

contentChildren: QueryList

removeIcon: KbqTagRemove

The tag's remove toggler.

trailingIcon: KbqTagTrailingIcon

The tag's trailing icon.

Methods

deselect

Deselects the tag.

focus

Focuses the tag.

remove

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.

select

Selects the tag.

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

toggleSelected

Toggles the current selected state of the tag.

KbqTagRemove

Example: ` cancel ` 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.

Selector: [kbqTagRemove]

KbqTagEditChange

Event object emitted by KbqTag when the tag is edited.

Properties

Name	Description
reason: string
tag: KbqTag
type: "cancel" \| "start" \| "submit"

Name

Description

reason: string

tag: KbqTag

type: "cancel" | "start" | "submit"

KbqTagSelectionChange

Event object emitted by KbqTag when selected or deselected.

Properties

Name	Description
isUserInput: boolean
selected: boolean
source: KbqTag

Name

Description

isUserInput: boolean

selected: boolean

source: KbqTag

KbqTagListChange

Change event object that is emitted when the tag list value has changed.

Properties

Name	Description
source: KbqTagList
value: any

Name

Description

source: KbqTagList

value: any

KbqTagsDefaultOptions

Default options, for the chips module, that can be overridden.

Properties

Name	Description
addOnPaste: boolean
separatorKeyCodes: number[]	The list of key codes that will trigger a chipEnd event.
separators: { [key: number]: KbqTagSeparator; }

Name

Description

addOnPaste: boolean

separatorKeyCodes: number[]

The list of key codes that will trigger a chipEnd event.

separators: { [key: number]: KbqTagSeparator; }

KbqTagInputEvent

Represents an input event on a `kbqTagInput`.

Properties

Name	Description
input: HTMLInputElement	The native `` element that the event is being fired for.
value: string	The value of the input.

Name

Description

input: HTMLInputElement

The native `` element that the event is being fired for.

value: string

The value of the input.

KbqTagSeparator

Properties

Name	Description
key: string
symbol: RegExp

Name

Description

key: string

symbol: RegExp

KbqTagEvent

Event object emitted by KbqTag.

type KbqTagEvent = {
    tag: KbqTag;
};

KbqTagFocusEvent

Event object emitted when the KbqTag is focused.

type KbqTagFocusEvent = KbqTagEvent & {
    origin: FocusOrigin;
};

KbqTagListDroppedEvent

type KbqTagListDroppedEvent = Pick<CdkDragDrop<unknown>, 'event' | 'previousIndex' | 'currentIndex'> & {
    tag: KbqTag;
};

KBQ_TAGS_DEFAULT_OPTIONS

Injection token to be used to override the default options for the chips module.

const KBQ_TAGS_DEFAULT_OPTIONS: InjectionToken<KbqTagsDefaultOptions>;