@koobiq/components 18.35.0 → 18.37.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 { KbqTag, KbqTagEditChange, KbqTagEvent, KbqTagFocusEvent, 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
@@ -30,35 +43,65 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      * @docs-private
      */
     readonly stateChanges: Subject<void>;
-    /** Combined stream of all of the child tags' selection change events. */
+    /**
+     * Combined stream of all of the child tags' selection change events.
+     *
+     * @docs-private
+     */
     get tagSelectionChanges(): Observable<KbqTagSelectionChange>;
-    /** Combined stream of all of the child tags' focus change events. */
-    get tagFocusChanges(): Observable<KbqTagEvent>;
-    /** Combined stream of all of the child tags' blur change events. */
+    /**
+     * Combined stream of all of the child tags' focus change events.
+     *
+     * @docs-private
+     */
+    get tagFocusChanges(): Observable<KbqTagFocusEvent>;
+    /**
+     * Combined stream of all of the child tags' blur change events.
+     *
+     * @docs-private
+     */
     get tagBlurChanges(): Observable<KbqTagEvent>;
-    /** Combined stream of all of the child tags' remove change events. */
+    /**
+     * Combined stream of all of the child tags' remove change events.
+     *
+     * @docs-private
+     */
     get tagRemoveChanges(): Observable<KbqTagEvent>;
-    /** Combined stream of all of the child tags' edit change events. */
+    /**
+     * Combined stream of all of the child tags' edit change events.
+     *
+     * @docs-private
+     */
     get tagEditChanges(): Observable<KbqTagEditChange>;
-    /** The array of selected tags inside tag list. */
-    get selected(): KbqTag[] | KbqTag;
+    /**
+     * The array of selected tags inside tag list.
+     *
+     * @docs-private
+     */
+    get selected(): KbqTag[];
+    /** @docs-private */
     get canShowCleaner(): boolean;
-    /** Whether the user should be allowed to select multiple tags. */
-    get multiple(): boolean;
-    set multiple(value: boolean);
+    /**
+     * @deprecated Unused. Will be removed in next major release.
+     *
+     * @docs-private
+     */
+    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 +113,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,15 +139,31 @@ 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;
-    get tabIndex(): number;
+    /** Whether the tags in the list are removable. */
+    get removable(): boolean;
+    set removable(value: boolean);
+    private _removable;
+    /**
+     * Tab index of the tag list. This property is ignored when the tag list contains a tag input or is disabled.
+     *
+     * @docs-private
+     */
+    get tabIndex(): number | null;
     set tabIndex(value: number);
     private _tabIndex;
     /**
@@ -111,34 +172,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,58 +231,88 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private tagFocusSubscription;
     /** Subscription to blur changes in the tags. */
     private tagBlurSubscription;
-    /** Subscription to selection changes in tags. */
-    private tagSelectionSubscription;
     /** Subscription to remove changes in tags. */
     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;
+    onContainerClick(): void;
     /**
-     * Focuses the first non-disabled tag in this tag list, or the associated input when there
-     * are no eligible tags.
+     * Focuses the tag list. If there is a tag input, focuses that instead.
      */
     focus(): void;
-    /** Attempt to focus an input if we have one. */
+    /**
+     * Focuses the tag input inside the tag list.
+     *
+     * @docs-private
+     */
     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.
      *
@@ -208,44 +320,43 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      * @returns True if the index is valid for our list of tags.
      */
     private isValidIndex;
+    private isInputElement;
     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;
     /** Listens to user-generated selection events on each tag. */
-    private listenToTagsSelection;
-    /** 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; }; "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

@@ -1,33 +1,41 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/input';
 
 .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 {
-    border: none;
-    outline: none;
-    background: transparent;
-
-    text-overflow: ellipsis;
-
-    min-height: unset;
+    @include input.kbq-reset-input();
 
     padding-top: var(--kbq-tag-size-padding-vertical);
     padding-bottom: var(--kbq-tag-size-padding-vertical);
-    padding-left: 4px;
+    padding-left: var(--kbq-size-xxs);
     padding-right: unset;
 
+    min-width: var(--kbq-size-3xl);
+    max-width: 100%;
+    flex-grow: 1;
+
     &.kbq-input {
-        padding: unset;
-        min-height: unset;
+        --kbq-input-size-padding-vertical: 0;
+        --kbq-form-field-size-border-radius: 0;
+
+        padding-left: var(--kbq-size-xxs);
+        min-height: unset !important;
+        width: auto;
     }
 }
 
@@ -43,10 +51,6 @@
     gap: var(--kbq-tag-list-size-content-gap);
 
     .kbq-tag-input {
-        max-width: 100%;
-
-        flex: 1 1 auto;
-
         // indicating tag list is empty
         &:first-child {
             padding-left: var(--kbq-size-s);
@@ -72,3 +76,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);