@koobiq/components 19.5.0 → 19.6.0

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/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-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;