@koobiq/components 19.6.0 → 19.7.0

package/form-field/_form-field-theme.scss

@@ -47,9 +47,15 @@
             &:-webkit-autofill,
             &:-webkit-autofill:hover,
             &:-webkit-autofill:focus {
+                // set as transparent to not override container background-color;
+                --kbq-form-field-states-autofill-background: var(--kbq-background-transparent);
                 -webkit-box-shadow: inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);
                 -webkit-text-fill-color: var(--kbq-form-field-states-autofill-text);
                 caret-color: var(--kbq-form-field-states-autofill-text);
+
+                /* hide browser default autofill background, no matter what background color set */
+                transition: background-color 5000s ease-in-out;
+                background-color: var(--kbq-background-transparent) !important;
             }
         }
 
@@ -72,7 +78,8 @@
                     @include _kbq-form-field-state(states-focused);
 
                     & .kbq-form-field__container {
-                        box-shadow: inset 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
+                        box-shadow: inset 0 0 0.1px var(--kbq-form-field-size-focus-outline-width)
+                            var(--kbq-form-field-states-focused-focus-outline);
                     }
                 }
 
@@ -83,7 +90,8 @@
                     @include _kbq-form-field-state(states-error);
 
                     &.cdk-focused .kbq-form-field__container {
-                        box-shadow: inset 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
+                        box-shadow: inset 0 0 0.1px var(--kbq-form-field-size-focus-outline-width)
+                            var(--kbq-form-field-states-error-focused-focus-outline);
                     }
 
                     & .kbq-icon.kbq-empty {

package/form-field/form-field-tokens.scss

@@ -3,6 +3,7 @@
 
     --kbq-form-field-size-border-width: var(--kbq-size-border-width);
     --kbq-form-field-size-border-radius: var(--kbq-size-border-radius);
+    --kbq-form-field-size-focus-outline-width: 1px;
 
     --kbq-form-field-size-icon-size: var(--kbq-size-l);
     --kbq-form-field-size-icon-margin-left: var(--kbq-size-s);

package/form-field/form-field.scss

@@ -109,6 +109,25 @@
     &.cdk-focused,
     &.kbq-focused {
         z-index: 3;
+
+        .kbq-input {
+            &:-webkit-autofill,
+            &:-webkit-autofill:hover,
+            &:-webkit-autofill:focus {
+                min-height: calc(
+                    var(--kbq-form-field-size-height) - var(--kbq-form-field-size-border-width) *
+                        2 - var(--kbq-form-field-size-focus-outline-width) * 2
+                );
+
+                --kbq-input-size-padding-vertical: calc(
+                    var(--kbq-size-xs) - var(--kbq-form-field-size-border-width) - var(
+                            --kbq-form-field-size-focus-outline-width
+                        )
+                );
+
+                margin: var(--kbq-form-field-size-border-width) 0;
+            }
+        }
     }
 
     &.kbq-form-field_without-borders .kbq-form-field__container,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.6.0",
+    "version": "19.7.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,9 +25,9 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.6.0",
-        "@koobiq/angular-moment-adapter": "19.6.0",
-        "@koobiq/angular-luxon-adapter": "19.6.0",
+        "@koobiq/cdk": "19.7.0",
+        "@koobiq/angular-moment-adapter": "19.7.0",
+        "@koobiq/angular-luxon-adapter": "19.7.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "3.14.0"

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^19.2.19");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.6.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.6.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.7.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.7.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^11.5.0");

package/select/select-tokens.scss

@@ -1,8 +1,8 @@
 .kbq-select,
 .kbq-tree-select,
 .kbq-select__panel {
-    --kbq-select-size-single-padding-left: var(--kbq-form-field-size-infix-padding);
-    --kbq-select-size-single-padding-right: var(--kbq-form-field-size-suffix-padding);
+    --kbq-select-size-single-padding-left: 0;
+    --kbq-select-size-single-padding-right: 0;
     --kbq-select-size-single-padding-vertical: var(--kbq-size-xs);
     --kbq-select-size-single-content-gap: var(--kbq-size-xxs);
     --kbq-select-size-multiple-padding-left: 0;

package/select/select.component.d.ts

@@ -176,6 +176,15 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     searchEmpty: KbqSelectSearchEmptyResult;
     /** Template string for hidden items text. Supports {{ number }} placeholder. */
     hiddenItemsText: string;
+    /** Determines whether preselected values are displayed. */
+    showPreselectedValues: boolean;
+    /**
+     * Specifies the maximum number of trigger values allowed.
+     * This constant limits the size of the trigger values array to ensure performance
+     * and prevent excessive memory usage.
+     * A value of `0` indicates that there is no limit.
+     */
+    triggerValuesLimit: number;
     /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
     panelClass: string | string[] | Set<string> | {
         [key: string]: any;
@@ -570,7 +579,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     /** Removes the dropdown class from the overlay container when select closes. */
     private removeClassFromOverlayContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "searchEmpty", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "searchEmpty", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
     static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;

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

@@ -63,11 +63,17 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      */
     get tagBlurChanges(): Observable<KbqTagEvent>;
     /**
-     * Combined stream of all of the child tags' remove change events.
+     * Combined stream of all of the child tags' destroyed events.
      *
      * @docs-private
      */
     get tagRemoveChanges(): Observable<KbqTagEvent>;
+    /**
+     * Combined stream of all of the child tags' removal request events.
+     *
+     * @docs-private
+     */
+    protected get tagBeforeRemoveChanges(): Observable<KbqTagEvent>;
     /**
      * Combined stream of all of the child tags' edit change events.
      *
@@ -157,7 +163,8 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     editable: 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.
+     *
+     * @deprecated No longer needed. Will be removed in the next major release.
      */
     emitOnTagChanges: boolean;
     /** Whether the tags in the list are removable. */
@@ -227,20 +234,16 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     errorState: boolean;
     /** The tag input to add more tags */
     private tagInput;
+    /** True when the next `tags.changes` emission is triggered by a UI action, not programmatic update. */
+    private pendingUIChange;
     /**
      * 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
      * appropriate tag that should receive focus until the array of tags updated completely.
      */
     private lastDestroyedTagIndex;
-    /** Subscription to focus changes in the tags. */
-    private tagFocusSubscription;
-    /** Subscription to blur changes in the tags. */
-    private tagBlurSubscription;
-    /** Subscription to remove changes in tags. */
-    private tagRemoveSubscription;
-    /** Subscription to edit changes in tags. */
-    private tagEditSubscription;
+    /** Triggers unsubscription from all per-tags streams when tags are reset. */
+    private readonly tagsSubscriptions$;
     constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, defaultErrorStateMatcher: ErrorStateMatcher, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl);
     ngDoCheck(): void;
     ngAfterContentInit(): void;
@@ -252,6 +255,8 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     onTouched: () => void;
     /** @docs-private */
     onChange: (value: any) => void;
+    /** Notifies that the next `tags.changes` emission is UI-initiated. */
+    notifyPendingTagChange(): void;
     /**
      * Associates an HTML input element with this tag list.
      *
@@ -344,7 +349,6 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     removeSelected(): void;
     private propagateTagsChanges;
     private resetTags;
-    private dropSubscriptions;
     /** Listens to user-generated selection events on each tag. */
     private listenToTagsFocus;
     private listenToTagsRemoved;

package/tags/tag.component.d.ts

@@ -134,9 +134,12 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     removeIcon: KbqTagRemove;
     /** Emitted when the tag is selected or deselected. */
     readonly selectionChange: EventEmitter<KbqTagSelectionChange>;
-    /** Emitted when the tag is destroyed. */
+    /** Emitted when the tag is destroyed and leaving the DOM. */
     readonly destroyed: EventEmitter<KbqTagEvent>;
-    /** Emitted when a tag is to be removed. */
+    /**
+     * Emitted when a tag is to be removed.
+     * Fires on programmatic and UI removal (click or keyboard).
+     */
     readonly removed: EventEmitter<KbqTagEvent>;
     /** Whether the tag is selected. */
     get selected(): boolean;

package/timezone/timezone-option-tokens.scss

@@ -1,22 +1,12 @@
-@use '../list/list-tokens';
 @use '../core/option/option-tokens';
 
 .kbq-timezone-select__panel {
-    --kbq-select-size-single-padding-left: var(--kbq-size-m);
-    --kbq-select-size-single-padding-right: var(--kbq-size-xxs);
-    --kbq-select-size-single-padding-vertical: var(--kbq-size-xs);
-    --kbq-select-size-single-content-gap: var(--kbq-size-xxs);
-    --kbq-select-size-multiple-padding-left: var(--kbq-size-xxs);
-    --kbq-select-size-multiple-padding-right: var(--kbq-size-xxs);
-    --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
     --kbq-timezone-option-size-padding: var(--kbq-size-xxs) 10px;
     --kbq-timezone-option-size-column-gap: 16px;
     --kbq-timezone-option-size-height: auto;
     --kbq-timezone-option-size-max-height: 5em;
     --kbq-timezone-option-size-optgroup-label-padding: 12px 12px 4px 12px;
     /* THEME TOKENS */
-    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
-    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
     --kbq-timezone-option-text: var(--kbq-foreground-contrast);
     --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);

package/tooltip/_tooltip-theme.scss

@@ -4,7 +4,11 @@
     & .kbq-tooltip__inner {
         color: var(--kbq-tooltip-#{$style-name}-text);
 
-        background-color: var(--kbq-tooltip-#{$style-name}-background);
+        background-image: linear-gradient(
+            var(--kbq-tooltip-#{$style-name}-background),
+            var(--kbq-tooltip-#{$style-name}-background)
+        );
+        background-color: var(--kbq-background-bg);
     }
 
     & .kbq-tooltip__arrow {