@koobiq/components 19.5.0 → 19.7.0

package/split-button/_split-button-theme.scss

@@ -6,7 +6,8 @@
 
         & .kbq-split-button_item {
             &.kbq-contrast.kbq-button_filled::before {
-                background: var(--kbq-foreground-on-contrast);
+                // @TODO (#DS-3002)
+                background: var(--kbq-line-on-contrast-fade, var(--kbq-foreground-on-contrast));
             }
 
             &.kbq-contrast.kbq-button_transparent,

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-tokens.scss

@@ -83,11 +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-line-warning);
+    --kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);
     --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-selected-text: var(--kbq-foreground-contrast);
+    --kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);
+    --kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);
     --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

@@ -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/title/title.directive.d.ts

@@ -5,7 +5,6 @@ import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
     private componentInstance?;
-    private readonly renderer;
     private readonly nativeElement;
     private contentObserver;
     set trigger(value: string);

package/toggle/toggle.component.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { TransitionCheckState } from '@koobiq/components/checkbox';
+import { KbqCheckboxClickAction, TransitionCheckState } from '@koobiq/components/checkbox';
 import { KbqCheckedState, KbqColorDirective } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 type ToggleLabelPositionType = 'left' | 'right';
@@ -48,7 +48,8 @@ export declare class KbqToggleComponent extends KbqColorDirective implements Aft
     readonly indeterminateChange: EventEmitter<boolean>;
     /** @docs-private */
     protected currentCheckState: TransitionCheckState;
-    protected clickAction: import("@koobiq/components/checkbox").KbqCheckboxClickAction | null;
+    /** Defines the behavior when a user clicks on the toggle. */
+    clickAction: KbqCheckboxClickAction;
     private uniqueId;
     constructor(focusMonitor: FocusMonitor, changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
@@ -68,7 +69,7 @@ export declare class KbqToggleComponent extends KbqColorDirective implements Aft
     private transitionCheckState;
     private emitChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToggleComponent, "kbq-toggle", ["kbqToggle"], { "big": { "alias": "big"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToggleComponent, "kbq-toggle", ["kbqToggle"], { "big": { "alias": "big"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "clickAction": { "alias": "clickAction"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, never>;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_indeterminate: unknown;
     static ngAcceptInputType_loading: unknown;

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 {

package/tooltip/tooltip-tokens.scss

@@ -13,13 +13,13 @@
     --kbq-tooltip-contrast-fade-off-shadow: var(--kbq-shadow-popup);
     --kbq-tooltip-theme-fade-off-background: var(--kbq-background-theme);
     --kbq-tooltip-theme-fade-off-text: var(--kbq-foreground-white);
-    --kbq-tooltip-theme-fade-off-shadow: var(--kbq-shadow-popup);
+    --kbq-tooltip-theme-fade-off-shadow: none;
     --kbq-tooltip-warning-fade-off-background: var(--kbq-background-warning);
-    --kbq-tooltip-warning-fade-off-text: var(--kbq-foreground-white);
-    --kbq-tooltip-warning-fade-off-shadow: var(--kbq-shadow-popup);
+    --kbq-tooltip-warning-fade-off-text: var(--kbq-foreground-contrast);
+    --kbq-tooltip-warning-fade-off-shadow: none;
     --kbq-tooltip-error-fade-off-background: var(--kbq-background-error);
     --kbq-tooltip-error-fade-off-text: var(--kbq-foreground-white);
-    --kbq-tooltip-error-fade-off-shadow: var(--kbq-shadow-popup);
+    --kbq-tooltip-error-fade-off-shadow: none;
 
     --kbq-tooltip-borderless-shadow: 0 2px 8px var(--kbq-shadow-key), 0 3px 8px var(--kbq-shadow-ambient);
 }

package/tooltip/tooltip.component.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnDestroy, TemplateRef, Type } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnDestroy, Renderer2, TemplateRef, Type, WritableSignal } from '@angular/core';
 import { KbqComponentColors, KbqParentPopup, KbqPopUp, KbqPopUpPlacementValues, KbqPopUpTrigger } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare enum TooltipModifier {
@@ -42,6 +42,23 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     protected scrollStrategy: () => ScrollStrategy;
     protected parentPopup: KbqParentPopup | null;
     protected focusMonitor: FocusMonitor;
+    /** @docs-private */
+    protected renderer: Renderer2;
+    /**
+     * Input for controlling the disabled state of a component.
+     *
+     * The input expects a component containing `disabledSignal` property, which is
+     * a writable signal emitting boolean values.
+     */
+    readonly forDisabledComponent: import("@angular/core").InputSignal<Record<"disabledSignal", WritableSignal<boolean>> | undefined>;
+    /**
+     * Determines whether pointer events should be ignored on tooltips.
+     *
+     * When set to `true`, tooltip elements will not receive pointer events,
+     * allowing interactions to pass through to underlying elements.
+     * Defaults to `true`.
+     */
+    readonly ignoreTooltipPointerEvents: import("@angular/core").InputSignal<boolean>;
     /**
      * Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger.
      * Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger
@@ -84,6 +101,7 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     protected originSelector: string;
     protected overlayConfig: OverlayConfig;
     protected modifier: TooltipModifier;
+    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     show(delay?: number): void;
@@ -104,7 +122,7 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     updateClassMap(newPlacement?: string): void;
     protected applyRelativeToPointer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "hideWithTimeout": { "alias": "hideWithTimeout"; "required": false; }; "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "forDisabledComponent": { "alias": "forDisabledComponent"; "required": false; "isSignal": true; }; "ignoreTooltipPointerEvents": { "alias": "ignoreTooltipPointerEvents"; "required": false; "isSignal": true; }; "hideWithTimeout": { "alias": "hideWithTimeout"; "required": false; }; "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
     static ngAcceptInputType_hideWithTimeout: unknown;
     static ngAcceptInputType_relativeToPointer: unknown;
     static ngAcceptInputType_arrow: unknown;

package/top-bar/top-bar.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/tokens';
+@use '../core/styles/common/overlay';
 
 @mixin _overflow-items-margins {
     padding: var(--kbq-size-border-width);
@@ -20,6 +21,8 @@
 }
 
 .kbq-top-bar {
+    z-index: overlay.$overlay-z-index;
+
     display: flex;
     align-items: center;
     justify-content: space-between;

package/tree/tree-option.scss

@@ -36,6 +36,13 @@
 
     gap: var(--kbq-tree-size-container-content-gap-horizontal);
 
+    & > *[kbqtreenodetoggle],
+    & > .kbq-tree-node-toggle,
+    & > .kbq-pseudo-checkbox {
+        margin-top: var(--kbq-size-3xs);
+        align-self: flex-start;
+    }
+
     & .kbq-option-text {
         @include common.kbq-line-wrapper-base();
         display: inline-block;