@koobiq/components 20.1.0 → 20.3.0

package/icon/index.d.ts

@@ -1,11 +1,32 @@
 import * as i0 from '@angular/core';
-import { AfterContentInit, OnChanges, ElementRef, ChangeDetectorRef, DestroyRef, SimpleChanges, AfterViewInit, OnDestroy, InjectionToken, Provider } from '@angular/core';
+import { InjectionToken, Provider, AfterContentInit, OnChanges, ElementRef, ChangeDetectorRef, DestroyRef, SimpleChanges, AfterViewInit, OnDestroy } from '@angular/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import * as _koobiq_components_core from '@koobiq/components/core';
-import { KbqColorDirective } from '@koobiq/components/core';
 import { Observable, ReplaySubject } from 'rxjs';
+import { KbqColorDirective } from '@koobiq/components/core';
 import { SafeResourceUrl, SafeHtml } from '@angular/platform-browser';
 
+/**
+ * Narrow contract that lets `KbqIcon` react to a host's error state (e.g. `autoColor`) without
+ * depending on the host's concrete class.
+ * @docs-private
+ */
+interface KbqIconErrorStateContext {
+    /** Whether the host is currently in an error state. */
+    readonly errorState: boolean;
+    /** Emits whenever the host's state changes, prompting `KbqIcon` to re-check `errorState`. */
+    readonly stateChanges: Observable<void>;
+}
+/**
+ * Injection token used by `KbqIcon` to look up its `KbqIconErrorStateContext`.
+ * @docs-private
+ */
+declare const KBQ_ICON_ERROR_STATE_CONTEXT: InjectionToken<KbqIconErrorStateContext>;
+/**
+ * Utility provider for `KBQ_ICON_ERROR_STATE_CONTEXT`, built from a factory that resolves the current host's `KbqIconErrorStateContext`.
+ * @docs-private
+ */
+declare const kbqIconErrorStateContextFactoryProvider: (factory: () => KbqIconErrorStateContext) => Provider;
+
 interface KbqIconOptions {
     viewBox?: string;
     withCredentials?: boolean;
@@ -56,7 +77,11 @@ declare class KbqIconRegistry {
 
 declare class KbqIcon extends KbqColorDirective implements AfterContentInit, OnChanges {
     readonly elementRef: ElementRef<HTMLElement>;
-    protected readonly formField: _koobiq_components_core.KbqFormFieldRef | null;
+    /**
+     * Host providing error state for `autoColor`, when the icon sits inside one (e.g. a form field).
+     * @docs-private
+     */
+    protected readonly errorStateContext: KbqIconErrorStateContext | null;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly registry: KbqIconRegistry | null;
     protected readonly destroyRef: DestroyRef;
@@ -83,9 +108,22 @@ declare class KbqIcon extends KbqColorDirective implements AfterContentInit, OnC
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "small": { "alias": "small"; "required": false; "isSignal": true; }; "autoColor": { "alias": "autoColor"; "required": false; }; "iconName": { "alias": "kbq-icon"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Size options for `KbqIconButton`.
+ * - `compact`: 16px icon with padding, 24×24px container.
+ * - `normal`: 24px icon, no padding.
+ */
+type KbqIconButtonSize = 'compact' | 'normal';
 declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy {
     protected readonly focusMonitor: FocusMonitor;
+    /** Size of the icon button. */
+    readonly size: i0.InputSignal<KbqIconButtonSize>;
+    /**
+     * @deprecated Use `size` input instead. Will be removed in the next major release (#DS-5338).
+     */
     readonly small: i0.InputSignal<boolean>;
+    /** @docs-private */
+    protected readonly isCompact: i0.Signal<boolean>;
     /** Name of an icon within a @koobiq/icons. */
     iconName: string;
     get tabindex(): any;
@@ -104,7 +142,7 @@ declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "small": { "alias": "small"; "required": false; "isSignal": true; }; "iconName": { "alias": "kbq-icon-button"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "small": { "alias": "small"; "required": false; "isSignal": true; }; "iconName": { "alias": "kbq-icon-button"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }
 
@@ -158,5 +196,5 @@ declare class KbqIconModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqIconModule>;
 }
 
-export { KBQ_ICONS_CONFIG, KBQ_ICON_RESOLVER, KbqIcon, KbqIconButton, KbqIconItem, KbqIconModule, KbqIconRegistry, kbqIconsDictProvider, kbqIconsProvider, kbqIconsResolverProvider };
-export type { KbqIconOptions, KbqIconResolver, KbqIconsConfig };
+export { KBQ_ICONS_CONFIG, KBQ_ICON_ERROR_STATE_CONTEXT, KBQ_ICON_RESOLVER, KbqIcon, KbqIconButton, KbqIconItem, KbqIconModule, KbqIconRegistry, kbqIconErrorStateContextFactoryProvider, kbqIconsDictProvider, kbqIconsProvider, kbqIconsResolverProvider };
+export type { KbqIconButtonSize, KbqIconErrorStateContext, KbqIconOptions, KbqIconResolver, KbqIconsConfig };

package/inline-edit/index.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef, TemplateRef } from '@angular/core';
-import { CdkConnectedOverlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
+import { ScrollStrategy, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { KbqConnectedOverlayOriginProvider, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqLabel, KbqFormField } from '@koobiq/components/form-field';
+import { KbqSelect } from '@koobiq/components/select';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i1 from '@angular/cdk/a11y';
 
@@ -37,11 +38,24 @@ declare class KbqInlineEditMenu {
  * This component is projecting edit/view mode templates and adds keyboard/pointer handlers.
  * Edit mode opens in a positioned overlay that matches the view mode width or can be customized.
  */
-declare class KbqInlineEdit {
+declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     private readonly overlay;
     private readonly document;
+    private readonly window;
     private readonly resizeObserver;
     protected readonly elementRef: ElementRef<HTMLElement>;
+    private readonly ngZone;
+    private readonly scrollDispatcher;
+    /**
+     * The validation tooltip is anchored inside the edit-mode overlay — an overlay inside another
+     * overlay. Its default `close()` scroll strategy would close it the moment either overlay's
+     * origin scrolls (including the programmatic scroll `showValidationTooltip()` uses to bring an
+     * invalid control into view), so it's overridden to `reposition()` here — passed directly as a
+     * per-instance override to this tooltip's `[kbqTooltipScrollStrategy]` input, rather than a DI
+     * override, so it doesn't leak into any `kbqTooltip` in projected content.
+     * @docs-private
+     */
+    protected readonly validationTooltipScrollStrategy: () => ScrollStrategy;
     /**
      * Whether to show save/cancel action buttons in edit mode.
      * @default false
@@ -94,6 +108,14 @@ declare class KbqInlineEdit {
     /** @docs-private */
     protected readonly formFieldRefList: _angular_core.Signal<readonly KbqFormField[]>;
     /** @docs-private */
+    protected readonly selectRef: _angular_core.Signal<KbqSelect | undefined>;
+    /**
+     * Whether edit mode contains a single-value select. When true, edit mode shows only the
+     * dropdown panel instead of a bordered field - see the "Select-style editor" example.
+     * @docs-private
+     */
+    protected readonly isSingleSelect: _angular_core.Signal<boolean>;
+    /** @docs-private */
     protected overlayOrigin: HTMLElement;
     /** @docs-private */
     protected readonly tooltipTrigger: _angular_core.Signal<KbqTooltipTrigger>;
@@ -126,15 +148,46 @@ declare class KbqInlineEdit {
     /** @docs-private */
     protected readonly colors: typeof KbqComponentColors;
     private initialValue;
+    /** Handle for an in-flight `showValidationTooltip()` scroll/settle request, if any. */
+    private validationTooltipScrollHandle;
     constructor();
     /** Manually switch mode */
     toggleMode(): void;
+    /**
+     * Implements `KbqConnectedOverlayOriginProvider`, letting a nested `KbqFormField`'s control
+     * anchor its overlay to this element instead of the form-field's own container.
+     * When no override is needed, the form-field falls back to its default.
+     * @docs-private
+     */
+    getConnectedOverlayOrigin(): ElementRef | undefined;
+    /** Saves the current value and returns to view mode, running the same validation as a normal save. */
+    commit(): void;
     /** @docs-private */
     protected onClick(event: Event): void;
     /** @docs-private */
     protected onAttach(): void;
     /** @docs-private */
     protected save($event?: Event): void;
+    /**
+     * Whether `overlayOrigin` is fully within the viewport and every registered `CdkScrollable`
+     * ancestor between it and the viewport. Ancestors without the `CdkScrollable` directive aren't
+     * visible to `ScrollDispatcher` and aren't checked — same limitation as the rest of overlay
+     * positioning.
+     */
+    private isOverlayOriginFullyVisible;
+    /**
+     * Shows the validation tooltip, scrolling the invalid control into view first if it isn't fully visible.
+     *
+     * `scrollIntoView({ behavior: 'smooth' })` finishes asynchronously — for a long scroll distance it can take
+     * a while — so showing the tooltip right away would anchor its overlay to a stale, pre-scroll position.
+     * `scrollend` reports when the scroll actually completes; the timeout is a fallback for browsers without
+     * `scrollend` support and cases where nothing ends up scrolling.
+     *
+     * TODO(DS-5420): "scroll an element into view, then act once settled" isn't inline-edit-specific — worth
+     * extracting into `packages/components/core` in a follow-up. Kept local to this fix for now.
+     */
+    private showValidationTooltip;
+    private showValidationTooltipIfStillInvalid;
     /** @docs-private */
     protected cancel(): void;
     /** @docs-private */
@@ -163,7 +216,7 @@ declare class KbqInlineEdit {
     private getInputNativeElement;
     private markAllAsTouched;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList", "selectRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }
 
 declare class KbqInlineEditModule {

package/inline-edit/inline-edit.scss

@@ -125,6 +125,12 @@
         }
     }
 
+    // Select-style editor: edit mode shows only the dropdown, not a bordered field, so the view
+    // text keeps showing through and just gets the "active" look instead.
+    &.kbq-inline-edit_select.kbq-inline-edit_edit {
+        --kbq-inline-edit-background: var(--kbq-states-background-transparent-active);
+    }
+
     &:hover,
     &.cdk-keyboard-focused,
     &.kbq-inline-edit_anchor-focused {
@@ -187,6 +193,10 @@
         padding: var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s);
     }
 
+    &.kbq-inline-edit__panel_select .kbq-inline-edit__control-container {
+        display: none;
+    }
+
     .kbq-inline-edit__control-container,
     .kbq-inline-edit__action-button {
         box-shadow: var(--kbq-shadow-popup);

package/input/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, EventEmitter, OnChanges, DoCheck, ElementRef, Provider, SimpleChanges, InjectionToken } from '@angular/core';
+import { OnDestroy, EventEmitter, OnChanges, DoCheck, ElementRef, SimpleChanges, Provider, InjectionToken } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { ControlValueAccessor, NgControl, NgForm, FormGroupDirective, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { KbqNumberInputLocaleConfig, CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
@@ -38,7 +38,11 @@ declare class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAc
     empty: boolean;
     required: boolean;
     errorState: boolean;
-    controlType?: string | undefined;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    controlType: string;
     /**
      * Allows input and pasting of integers only.
      */
@@ -114,6 +118,11 @@ declare class KbqInput implements KbqFormFieldControl<any>, OnChanges, OnDestroy
      * @docs-private
      */
     focused: boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    readonly autofilled: i0.Signal<boolean>;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -248,6 +257,11 @@ declare class KbqInputPassword implements KbqFormFieldControl<any>, OnChanges, O
      * @docs-private
      */
     focused: boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    readonly autofilled: i0.Signal<boolean>;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -306,6 +320,7 @@ declare class KbqInputPassword implements KbqFormFieldControl<any>, OnChanges, O
     ngDoCheck(): void;
     updateErrorState(): void;
     checkRules(): void;
+    /** Toggles the native input type between password and text. */
     toggleType(): void;
     /** Focuses the input. */
     focus(): void;

package/list/_list-theme.scss

@@ -1,27 +1,40 @@
 @use '../core/styles/common/tokens';
 
+/// Emits the five themed colors of a list option for a single visual state.
+///
+/// Every color falls back to the matching `default`-state token: a state that only redefines the
+/// background then keeps the base text/icon/caption colors instead of resolving to an undefined
+/// `var()` — which, for inherited properties such as `color`, silently degrades to `inherit`.
 @mixin _kbq-list-item($state-name) {
-    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background);
+    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background, transparent);
 
-    background: var(--kbq-list-#{$state-name}-container-background);
+    background: var(--kbq-list-#{$state-name}-container-background, transparent);
 
     .kbq-list-text {
-        color: var(--kbq-list-#{$state-name}-text-color);
+        color: var(--kbq-list-#{$state-name}-text-color, var(--kbq-list-default-text-color));
     }
 
     .kbq-icon.kbq-empty {
-        color: var(--kbq-list-#{$state-name}-icon-color);
+        color: var(--kbq-list-#{$state-name}-icon-color, var(--kbq-list-default-icon-color));
     }
 
     .kbq-option-action .kbq-icon.kbq-empty {
-        color: var(--kbq-list-#{$state-name}-icon-button-color);
+        color: var(--kbq-list-#{$state-name}-icon-button-color, var(--kbq-list-default-icon-button-color));
     }
 
     .kbq-list-option-caption {
-        color: var(--kbq-list-#{$state-name}-caption-color);
+        color: var(--kbq-list-#{$state-name}-caption-color, var(--kbq-list-default-caption-color));
     }
 }
 
+/// Emits the background-only `:active` treatment. The active states deliberately reuse the colors of
+/// the state they sit on top of (default / selected), so only the background token is redefined.
+@mixin _kbq-list-item-active($state-name) {
+    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background);
+
+    background: var(--kbq-list-#{$state-name}-container-background);
+}
+
 @mixin kbq-list-theme() {
     .kbq-list-option {
         @include _kbq-list-item(default);
@@ -34,7 +47,7 @@
 
         &.kbq-active:not(.kbq-disabled),
         &:active:not(.kbq-disabled) {
-            @include _kbq-list-item(states-active);
+            @include _kbq-list-item-active(states-active);
         }
 
         &.kbq-selected:not(.kbq-disabled) {
@@ -47,13 +60,19 @@
 
             &.kbq-active,
             &:active {
-                @include _kbq-list-item(states-selected-active);
+                @include _kbq-list-item-active(states-selected-active);
             }
         }
 
         &.kbq-disabled {
             @include _kbq-list-item(states-disabled);
         }
+
+        &.kbq-selected.kbq-disabled {
+            --kbq-option-background: var(--kbq-list-states-selected-container-background);
+
+            background: var(--kbq-list-states-selected-container-background);
+        }
     }
 
     .kbq-list-option.kbq-list-option_multiple {
@@ -67,9 +86,15 @@
 
             &.kbq-active,
             &:active {
-                @include _kbq-list-item(multiple-states-selected-active);
+                @include _kbq-list-item-active(multiple-states-selected-active);
             }
         }
+
+        &.kbq-selected.kbq-disabled {
+            --kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);
+
+            background: var(--kbq-list-multiple-states-selected-container-background);
+        }
     }
 
     .kbq-list-selection.cdk-keyboard-focused {
@@ -80,8 +105,11 @@
 }
 
 @mixin kbq-list-typography() {
+    // The drag preview sits in `<body>`, outside every `.kbq-list*` selector, so it has to be named
+    // here as well or it would fall back to the page's own type.
     .kbq-list-item,
-    .kbq-list-option {
+    .kbq-list-option,
+    .kbq-list-drag-preview_text {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
         .kbq-list-text {
@@ -89,5 +117,9 @@
                 @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
             }
         }
+
+        .kbq-list-drag-preview__caption {
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        }
     }
 }