@koobiq/components 18.34.0 → 18.36.0

package/tags/tag-list.component.d.ts

@@ -1,21 +1,26 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
-import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
+import { CanUpdateErrorState, ErrorStateMatcher, KbqOrientation } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Observable, Subject } from 'rxjs';
 import { KbqTagTextControl } from './tag-text-control';
-import { KbqTag, KbqTagEvent, KbqTagSelectionChange } from './tag.component';
+import { KbqTag, KbqTagEditChange, KbqTagEvent, KbqTagSelectionChange } from './tag.component';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/drag-drop";
 /** Change event object that is emitted when the tag list value has changed. */
 export declare class KbqTagListChange {
     source: KbqTagList;
     value: any;
     constructor(source: KbqTagList, value: any);
 }
-export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy, CanUpdateErrorState {
+export type KbqTagListDroppedEvent = Pick<CdkDragDrop<unknown>, 'event' | 'previousIndex' | 'currentIndex'> & {
+    tag: KbqTag;
+};
+export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccessor, AfterContentInit, DoCheck, OnDestroy, CanUpdateErrorState, AfterViewInit {
     protected elementRef: ElementRef<HTMLElement>;
     private changeDetectorRef;
     defaultErrorStateMatcher: ErrorStateMatcher;
@@ -23,6 +28,14 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     parentForm: NgForm;
     parentFormGroup: FormGroupDirective;
     ngControl: NgControl;
+    private readonly dropList;
+    private readonly destroyRef;
+    private readonly focusMonitor;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
     readonly controlType: string;
     /**
      * Emits whenever the component state changes and should cause the parent
@@ -38,25 +51,37 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     get tagBlurChanges(): Observable<KbqTagEvent>;
     /** Combined stream of all of the child tags' remove change events. */
     get tagRemoveChanges(): Observable<KbqTagEvent>;
-    /** The array of selected tags inside tag list. */
+    /** Combined stream of all of the child tags' edit change events. */
+    get tagEditChanges(): Observable<KbqTagEditChange>;
+    /**
+     * The array of selected tags inside tag list.
+     *
+     * @docs-private
+     */
     get selected(): KbqTag[] | KbqTag;
+    /** @docs-private */
     get canShowCleaner(): boolean;
-    /** Whether the user should be allowed to select multiple tags. */
-    get multiple(): boolean;
-    set multiple(value: boolean);
+    /**
+     * Whether the user should be allowed to select multiple tags.
+     *
+     * NOTE! Component does not support dynamic multiple attribute changes.
+     */
+    multiple: 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.
+     *
+     * @deprecated Unused. Will be removed in next major release.
      */
-    get compareWith(): (o1: any, o2: any) => boolean;
-    set compareWith(fn: (o1: any, o2: any) => boolean);
+    compareWith: (o1: any, o2: any) => boolean;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
     get value(): any;
     set value(value: any);
+    private _value;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -68,12 +93,14 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      */
     get required(): boolean;
     set required(value: boolean);
+    private _required;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
     get placeholder(): string;
     set placeholder(value: string);
+    private _placeholder;
     /** Whether any tags or the kbqTagInput inside of this tag-list has focus. */
     get focused(): boolean;
     /**
@@ -92,12 +119,25 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      */
     get disabled(): boolean;
     set disabled(value: boolean);
+    private _disabled;
+    get draggable(): boolean;
+    set draggable(value: boolean);
+    private _draggable;
+    /**
+     * Emits when the user drops tag inside tag list container.
+     */
+    readonly dropped: EventEmitter<KbqTagListDroppedEvent>;
     /**
      * 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.
      */
-    get selectable(): boolean;
-    set selectable(value: boolean);
+    selectable: boolean;
+    /** Whether the tags in the list are editable. */
+    editable: boolean;
+    /** Whether the tags in the list are removable. */
+    get removable(): boolean;
+    set removable(value: boolean);
+    private _removable;
     get tabIndex(): number;
     set tabIndex(value: number);
     private _tabIndex;
@@ -107,34 +147,55 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      * @docs-private
      */
     readonly valueChange: EventEmitter<any>;
+    /** @docs-private */
     uid: string;
     /**
      * User defined tab index.
      * When it is not null, use user defined tab index. Otherwise use tabIndex
+     *
+     * @docs-private
      */
     userTabIndex: number | null;
+    /** @docs-private */
     keyManager: FocusKeyManager<KbqTag>;
+    /**
+     * @docs-private
+     *
+     * @deprecated Unused. Will be removed in next major release.
+     */
     selectionModel: SelectionModel<KbqTag>;
+    /**
+     * @docs-private
+     *
+     * @deprecated Unused. Will be removed in next major release.
+     */
     tagChanges: EventEmitter<any>;
     /** An object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
-    /** Orientation of the tag list. */
-    orientation: 'horizontal' | 'vertical';
+    /**
+     * Orientation of the tag list.
+     *
+     * @deprecated Unused. Will be removed in next major release.
+     */
+    orientation: KbqOrientation;
     /** Event emitted when the selected tag list value has been changed by the user. */
     readonly change: EventEmitter<KbqTagListChange>;
+    /** @docs-private */
     cleaner: KbqCleaner;
-    /** The tag components contained within this tag list. */
+    /**
+     * The tag components contained within this tag list.
+     *
+     * @docs-private
+     */
     tags: QueryList<KbqTag>;
-    /** Whether the component is in an error state. */
+    /**
+     * Whether the component is in an error state.
+     *
+     * @docs-private
+     */
     errorState: boolean;
-    private _value;
-    private _required;
-    private _placeholder;
-    private _disabled;
-    private _selectable;
     /** The tag input to add more tags */
     private tagInput;
-    private _multiple;
     /**
      * When a tag is destroyed, we store the index of the destroyed tag until the tags
      * query list notifies about the update. This is necessary because we cannot determine an
@@ -149,23 +210,44 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private tagSelectionSubscription;
     /** Subscription to remove changes in tags. */
     private tagRemoveSubscription;
-    private readonly destroyRef;
+    /** Subscription to edit changes in tags. */
+    private tagEditSubscription;
     constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, defaultErrorStateMatcher: ErrorStateMatcher, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl);
-    ngOnInit(): void;
     ngDoCheck(): void;
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /** @docs-private */
     updateErrorState(): void;
+    /** @docs-private */
     onTouched: () => void;
+    /** @docs-private */
     onChange: (value: any) => void;
-    /** Associates an HTML input element with this tag list. */
+    /**
+     * Associates an HTML input element with this tag list.
+     *
+     * @docs-private
+     */
     registerInput(inputElement: KbqTagTextControl): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
     writeValue(value: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
     registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
     registerOnTouched(fn: () => void): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
     setDisabledState(isDisabled: boolean): void;
     /**
      * Implemented as part of KbqFormFieldControl.
+     *
      * @docs-private
      */
     onContainerClick(event: MouseEvent): void;
@@ -178,23 +260,33 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     focusInput(): void;
     /**
      * Pass events to the keyboard manager. Available here for tests.
+     *
+     * @docs-private
      */
     keydown(event: KeyboardEvent): void;
-    setSelectionByValue(value: any, isUserInput?: boolean): void;
+    /**
+     * @docs-private
+     *
+     * @deprecated Unused. Will be removed in next major release.
+     */
+    setSelectionByValue(_value: any, _isUserInput?: boolean): void;
     /** When blurred, mark the field as touched when focus moved outside the tag list. */
     blur(): void;
     /** Mark the field as touched */
     markAsTouched(): void;
     /**
      * Check the tab index as you should not be allowed to focus an empty list.
+     *
+     * @docs-private
      */
     protected updateTabIndex(): void;
     /**
      * If the amount of tags changed, we need to update the
      * key manager state and focus the next closest tag.
+     *
+     * @docs-private
      */
     protected updateFocusForDestroyedTags(): void;
-    private _compareWith;
     /**
      * Utility to ensure all indexes are valid.
      *
@@ -203,24 +295,20 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      */
     private isValidIndex;
     private isInputEmpty;
+    private isTagElement;
+    private selectAll;
     /**
-     * Finds and selects the tag based on its value.
-     * @returns Tag that has the corresponding value.
-     */
-    private selectValue;
-    private initializeSelection;
-    /**
-     * Deselects every tag in the list.
-     * @param skip Tag that should not be deselected.
+     * Unselects all tags in the list.
+     *
+     * @docs-private
      */
-    private clearSelection;
+    unselectAll(): void;
     /**
-     * Sorts the model values, ensuring that they keep the same
-     * order that they have in the panel.
+     * Removes all selected tags from the list.
+     *
+     * @docs-private
      */
-    private sortValues;
-    /** Emits change event to set the model value. */
-    private propagateChanges;
+    removeSelected(): void;
     private propagateTagsChanges;
     private resetTags;
     private dropSubscriptions;
@@ -229,15 +317,23 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     /** Listens to user-generated selection events on each tag. */
     private listenToTagsFocus;
     private listenToTagsRemoved;
+    private listenToTagsEdit;
     /** Checks whether an event comes from inside a tag element. */
     private originatesFromTag;
     /** Checks whether any of the tags is focused. */
     private hasFocusedTag;
-    /** Syncs the list's disabled state with the individual tags. */
-    private syncTagsDisabledState;
+    private syncTagsRemovableState;
     /** Revalidate control. */
     private revalidate;
-    private propagateSelectableToChildren;
+    private setupDropListInitialProperties;
+    private syncDropListDisabledState;
+    private setupFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagList, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "dropped": "dropped"; "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, [{ directive: typeof i1.CdkDropList; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_draggable: unknown;
+    static ngAcceptInputType_selectable: unknown;
+    static ngAcceptInputType_editable: unknown;
+    static ngAcceptInputType_removable: unknown;
 }

package/tags/tag-list.scss

@@ -3,12 +3,17 @@
 .kbq-tag-list {
     display: flex;
     flex-direction: row;
+    min-height: var(--kbq-size-xxl);
 
     box-sizing: border-box;
 
     &:focus-visible {
         outline: none;
     }
+
+    &.cdk-drop-list-dragging .cdk-drag {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
 }
 
 .kbq-tag-input {
@@ -24,6 +29,11 @@
     padding-bottom: var(--kbq-tag-size-padding-vertical);
     padding-left: 4px;
     padding-right: unset;
+
+    &.kbq-input {
+        padding: unset;
+        min-height: unset;
+    }
 }
 
 .kbq-tags-list__list-container {
@@ -67,3 +77,9 @@
         );
     }
 }
+
+// We should apply `cursor: grabbing` to the body, not to the dragged element itself.
+// Reason: https://github.com/angular/components/blob/18.2.14/src/cdk/drag-drop/resets.scss#L14-L15
+body:has(.kbq-tag-list.cdk-drop-list-dragging) {
+    cursor: grabbing;
+}

package/tags/tag-tokens.scss

@@ -21,6 +21,10 @@
     --kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);
     --kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);
     --kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);
+    --kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);
+    --kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);
+    --kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);
+    --kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);
     --kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);
@@ -38,6 +42,10 @@
     --kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);
     --kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);
     --kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);
+    --kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);
+    --kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);
+    --kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);
+    --kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);
     --kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);
@@ -55,6 +63,10 @@
     --kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);
     --kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);
     --kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);
+    --kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);
+    --kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);
+    --kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);
+    --kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);
     --kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);
@@ -71,7 +83,11 @@
     --kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);
     --kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);
     --kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);
-    --kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);
+    --kbq-tag-warning-fade-states-focus-outline: var(--kbq-line-warning);
+    --kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);
+    --kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-white);
+    --kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-white);
+    --kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-white);
     --kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);

package/tags/tag.component.d.ts

@@ -1,12 +1,24 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqColorDirective, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
+import * as i1 from "@koobiq/components/core";
+import * as i2 from "@angular/cdk/drag-drop";
 export interface KbqTagEvent {
     tag: KbqTag;
 }
+/**
+ * Event object emitted by KbqTag when the tag is edited.
+ */
+export declare class KbqTagEditChange {
+    readonly tag: KbqTag;
+    readonly type: 'start' | 'submit' | 'cancel';
+    readonly reason: string;
+    constructor(tag: KbqTag, type: 'start' | 'submit' | 'cancel', reason: string);
+}
 /** Event object emitted by KbqTag when selected or deselected. */
 export declare class KbqTagSelectionChange {
     source: KbqTag;
@@ -14,6 +26,12 @@ export declare class KbqTagSelectionChange {
     isUserInput: boolean;
     constructor(source: KbqTag, selected: boolean, isUserInput?: boolean);
 }
+/** @docs-private */
+export type KbqDragData = {
+    tag: KbqTag;
+    hasFocus: boolean;
+    focusOrigin: FocusOrigin;
+};
 /**
  * Dummy directive to add CSS class to tag avatar.
  * @docs-private
@@ -30,20 +48,73 @@ export declare class KbqTagTrailingIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagTrailingIcon, "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit {
-    elementRef: ElementRef;
+/**
+ * Directive to add submit behavior for the editable tag.
+ */
+export declare class KbqTagEditSubmit {
+    /** @docs-private */
+    protected readonly tag: KbqTag;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagEditSubmit, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagEditSubmit, "[kbqTagEditSubmit]", ["kbqTagEditSubmit"], {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to add input behavior for the editable tag.
+ */
+export declare class KbqTagEditInput {
+    private readonly tag;
+    /** @docs-private */
+    protected handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagEditInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagEditInput, "[kbqTagEditInput]", ["kbqTagEditInput"], {}, {}, never, never, true, [{ directive: typeof i1.KbqFieldSizingContent; inputs: {}; outputs: {}; }]>;
+}
+export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit, AfterViewInit {
     changeDetectorRef: ChangeDetectorRef;
-    private _ngZone;
-    /** Emits when the tag is focused. */
+    private readonly focusMonitor;
+    private readonly tagList;
+    private readonly drag;
+    private readonly destroyRef;
+    /** @docs-private */
+    readonly elementRef: ElementRef<HTMLElement>;
+    /**
+     * Emits when the tag is focused.
+     *
+     * @docs-private
+     */
     readonly onFocus: Subject<KbqTagEvent>;
-    /** Emits when the tag is blurred. */
+    /**
+     * Emits when the tag is blurred.
+     *
+     * @docs-private
+     */
     readonly onBlur: Subject<KbqTagEvent>;
-    nativeElement: HTMLElement;
-    /** Whether the tag has focus. */
+    /** @docs-private */
+    readonly nativeElement: HTMLElement;
+    /**
+     * Whether the tag has focus.
+     *
+     * @docs-private
+     */
     hasFocus: boolean;
-    /** Whether the tag list is selectable */
-    tagListSelectable: boolean;
-    textElement: ElementRef;
+    private focusOrigin;
+    /** Whether the tag is editable. */
+    get editable(): boolean;
+    set editable(value: boolean);
+    private _editable;
+    /** Whether the tag edits can't be submitted. */
+    preventEditSubmit: boolean;
+    private readonly editInputElementRef;
+    /**
+     * Emits event when the tag is edited.
+     */
+    readonly editChange: EventEmitter<KbqTagEditChange>;
+    /**
+     * @docs-private
+     */
+    protected readonly editing: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * @docs-private
+     */
+    readonly textElement: ElementRef<HTMLSpanElement>;
     contentChildren: QueryList<KbqIcon>;
     /** The tag avatar */
     avatar: KbqTagAvatar;
@@ -75,7 +146,7 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     set selectable(value: boolean);
     private _selectable;
     /**
-     * Determines whether or not the tag displays the remove styling and emits (removed) events.
+     * Determines whether the tag is removable.
      */
     get removable(): boolean;
     set removable(value: boolean);
@@ -83,19 +154,45 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     get tabindex(): any;
     set tabindex(value: any);
     private _tabindex;
-    get disabled(): any;
-    set disabled(value: any);
+    /**
+     * Whether the tag is disabled.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
     private _disabled;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone);
+    /**
+     * Whether the tag is draggable.
+     *
+     * @docs-private
+     */
+    protected get draggable(): boolean;
+    constructor(changeDetectorRef: ChangeDetectorRef);
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** @docs-private */
     addClassModificatorForIcons(): void;
+    /** @docs-private */
     addHostClassName(): void;
-    ngOnDestroy(): void;
+    /**
+     * Selects the tag.
+     */
     select(): void;
+    /**
+     * Deselects the tag.
+     */
     deselect(): void;
+    /**
+     * Selects the tag and emits event with isUserInput flag.
+     *
+     * @docs-private
+     */
     selectViaInteraction(): void;
+    /**
+     * Toggles the current selected state of the tag.
+     */
     toggleSelected(isUserInput?: boolean): boolean;
-    /** Allows for programmatic focusing of the tag. */
+    /** Focuses the tag. */
     focus(): void;
     /**
      * Allows for programmatic removal of the tag. Called by the KbqTagList when the DELETE or
@@ -104,12 +201,39 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
      * Informs any listeners of the removal request. Does not remove the tag from the DOM.
      */
     remove(): void;
-    handleMousedown(event: Event): void;
+    /** @docs-private */
+    handleMousedown(event: MouseEvent): void;
+    /** @docs-private */
     handleKeydown(event: KeyboardEvent): void;
+    /** @docs-private */
     blur(): void;
-    private dispatchSelectionChange;
+    /** @docs-private */
+    protected handleDblClick(event: MouseEvent): void;
+    private startEditing;
+    /** @docs-private */
+    cancelEditing(reason: string): void;
+    /** @docs-private */
+    submitEditing(reason: string): void;
+    /**
+     * Sets the selected state of the tag.
+     *
+     * @docs-private
+     */
+    setSelectedState(selected: boolean, options?: Partial<{
+        isUserInput: boolean;
+        emitEvent: boolean;
+    }>): void;
+    private setupDragInitialProperties;
+    private syncDragDisabledState;
+    private setupFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove])", "*", "[kbqTagRemove]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "editable": { "alias": "editable"; "required": false; }; "preventEditSubmit": { "alias": "preventEditSubmit"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "editChange": "editChange"; "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["editInputElementRef", "avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])", "[kbqTagEditInput]", "*", "[kbqTagEditSubmit]", "[kbqTagRemove]"], false, [{ directive: typeof i1.KbqHovered; inputs: {}; outputs: {}; }, { directive: typeof i2.CdkDrag; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_editable: unknown;
+    static ngAcceptInputType_preventEditSubmit: unknown;
+    static ngAcceptInputType_selected: unknown;
+    static ngAcceptInputType_selectable: unknown;
+    static ngAcceptInputType_removable: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
 /**
  *
@@ -125,8 +249,13 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
 export declare class KbqTagRemove {
     protected parentTag: KbqTag;
     constructor(parentTag: KbqTag);
-    focus($event: any): void;
-    /** Calls the parent tag's public `remove()` method if applicable. */
+    /** @docs-private */
+    focus(event: FocusEvent): void;
+    /**
+     * Calls the parent tag's public `remove()` method if applicable.
+     *
+     * @docs-private
+     */
     handleClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagRemove, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagRemove, "[kbqTagRemove]", never, {}, {}, never, never, false, never>;