@koobiq/components 18.35.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, 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
@@ -40,25 +53,35 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     get tagRemoveChanges(): Observable<KbqTagEvent>;
     /** Combined stream of all of the child tags' edit change events. */
     get tagEditChanges(): Observable<KbqTagEditChange>;
-    /** The array of selected tags inside tag list. */
+    /**
+     * 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
@@ -70,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;
     /**
@@ -94,14 +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);
-    /** Whether the tag list is editable. */
+    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;
@@ -111,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
@@ -155,23 +212,42 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private tagRemoveSubscription;
     /** Subscription to edit changes in tags. */
     private tagEditSubscription;
-    private readonly destroyRef;
     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;
@@ -184,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.
      *
@@ -209,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;
@@ -240,12 +322,18 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     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; }; "editable": { "alias": "editable"; "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 {
@@ -72,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,10 +1,12 @@
-import { AfterContentInit, AfterViewInit, 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;
 }
@@ -24,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
@@ -61,27 +69,33 @@ export declare class KbqTagEditInput {
 }
 export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit, AfterViewInit {
     changeDetectorRef: ChangeDetectorRef;
-    private _ngZone;
     private readonly focusMonitor;
     private readonly tagList;
+    private readonly drag;
+    private readonly destroyRef;
     /** @docs-private */
     readonly elementRef: ElementRef<HTMLElement>;
-    /** Emits when the tag is focused. */
+    /**
+     * 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>;
     /** @docs-private */
     readonly nativeElement: HTMLElement;
-    /** Whether the tag has focus. */
-    hasFocus: boolean;
-    /** Whether the tag list is selectable */
-    tagListSelectable: boolean;
     /**
-     * Whether the tag list is editable.
+     * Whether the tag has focus.
      *
      * @docs-private
      */
-    private get tagListEditable();
+    hasFocus: boolean;
+    private focusOrigin;
     /** Whether the tag is editable. */
     get editable(): boolean;
     set editable(value: boolean);
@@ -132,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);
@@ -140,20 +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(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;
+    /**
+     * 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
@@ -163,7 +202,7 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
      */
     remove(): void;
     /** @docs-private */
-    handleMousedown(event: Event): void;
+    handleMousedown(event: MouseEvent): void;
     /** @docs-private */
     handleKeydown(event: KeyboardEvent): void;
     /** @docs-private */
@@ -175,11 +214,26 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     cancelEditing(reason: string): void;
     /** @docs-private */
     submitEditing(reason: string): void;
-    private dispatchSelectionChange;
+    /**
+     * 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"], { "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, 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;
 }
 /**
  *
@@ -195,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>;

package/tags/tag.scss

@@ -10,6 +10,7 @@
     display: inline-block;
 
     max-width: 100%;
+    height: var(--kbq-size-xxl);
 
     padding: var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);
 
@@ -67,6 +68,14 @@
     .kbq-tag-edit-submit {
         margin-right: var(--kbq-size-3xs);
     }
+
+    &.cdk-drag-placeholder {
+        opacity: var(--kbq-opacity-disabled);
+    }
+
+    &.cdk-drag-animating {
+        transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+    }
 }
 
 .kbq-tag__wrapper {

package/textarea/textarea.component.d.ts

@@ -8,7 +8,7 @@ export declare const KBQ_TEXTAREA_VALUE_ACCESSOR: InjectionToken<{
     value: any;
 }>;
 export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, OnChanges, OnDestroy, DoCheck, CanUpdateErrorState {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLTextAreaElement>;
     ngControl: NgControl;
     parentForm: NgForm;
     parentFormGroup: FormGroupDirective;
@@ -88,7 +88,7 @@ export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, On
     private lineHeight;
     private minHeight;
     private rowsCount;
-    constructor(elementRef: ElementRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any, parent: any, ngZone: NgZone);
+    constructor(elementRef: ElementRef<HTMLTextAreaElement>, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any, parent: any, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;

package/time-range/constants.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import { ValidatorFn } from '@angular/forms';
+import { KbqTimeRangeService } from './time-range.service';
+import { KbqTimeRangeType } from './types';
+/** Preset of selectable time ranges, provided by DI. */
+export declare const KBQ_DEFAULT_TIME_RANGE_TYPES: InjectionToken<KbqTimeRangeType[]>;
+export declare function createMissingDateImplError(componentName: string, provider: string): Error;
+export declare const rangeValidator: <T>(timeRangeService: KbqTimeRangeService<T>) => ValidatorFn;

package/time-range/index.d.ts

@@ -0,0 +1,7 @@
+export * from './constants';
+export * from './module';
+export * from './time-range';
+export * from './time-range-editor';
+export * from './time-range-title';
+export * from './time-range-title-as-form-field';
+export * from './types';

package/time-range/module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./time-range";
+import * as i2 from "./time-range-title";
+import * as i3 from "./time-range-editor";
+import * as i4 from "./time-range-title-as-form-field";
+export declare class KbqTimeRangeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimeRangeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimeRangeModule, never, [typeof i1.KbqTimeRange, typeof i2.KbqTimeRangeTitle, typeof i3.KbqTimeRangeEditor, typeof i4.KbqTimeRangeTitlePlaceholder, typeof i4.KbqTimeRangeTitleAsControl], [typeof i1.KbqTimeRange, typeof i2.KbqTimeRangeTitle, typeof i3.KbqTimeRangeEditor, typeof i4.KbqTimeRangeTitlePlaceholder, typeof i4.KbqTimeRangeTitleAsControl]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimeRangeModule>;
+}