@koobiq/components 18.35.0 → 18.37.0

package/filter-bar/pipes/base-pipe.d.ts

@@ -23,7 +23,11 @@ export declare abstract class KbqBasePipe<V> implements AfterViewInit {
     protected values: any;
     /** TemplateRef for selecting an option */
     protected valueTemplate?: TemplateRef<any> | string;
-    /** Whether the current platform is a Mac. */
+    /**
+     * Whether the current platform is a Mac.
+     *
+     * @docs-private
+     */
     isMac: boolean;
     /** Data for the pipe.
      *  @docs-private */
@@ -54,7 +58,7 @@ export declare class KbqPipeMinWidth {
     /** KbqFilterBar instance */
     protected readonly filterBar: KbqFilterBar | null;
     /** @docs-private */
-    protected readonly elementRef: ElementRef<any>;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     /** @docs-private */
     protected readonly changeDetectorRef: ChangeDetectorRef;
     /** @docs-private */

package/filter-bar/pipes/base-pipe.scss

@@ -39,7 +39,7 @@
         margin-left: -1px;
         margin-right: 0;
 
-        height: 12px;
+        height: var(--kbq-size-l);
 
         align-self: center;
 
@@ -53,10 +53,10 @@
             content: '';
             position: absolute;
             left: 0;
-            top: 10px;
+            top: var(--kbq-size-s);
 
             width: 1px;
-            height: 12px;
+            height: var(--kbq-size-l);
 
             background: var(--kbq-line-contrast-less);
         }

package/filter-bar/pipes/pipe-date.scss

@@ -87,14 +87,17 @@
                 display: flex;
 
                 & .kbq-date-period__date {
+                    min-width: 136px;
+
                     & .kbq-form-field__container {
                         border-top-right-radius: unset;
                         border-bottom-right-radius: unset;
                     }
                 }
 
-                & .kbq-date-period__time {
+                & .kbq-date-period__time.kbq-form-field-type-timepicker {
                     margin-left: -1px;
+                    width: unset;
 
                     & .kbq-form-field__container {
                         border-top-left-radius: unset;

package/filter-bar/pipes/pipe-title.d.ts

@@ -15,10 +15,12 @@ export declare class KbqPipeTitleDirective extends KbqTooltipTrigger implements
     private focusMonitorSubscription;
     private childContainer;
     private parentContainer;
+    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     handleElementEnter(): void;
     hideTooltip(): void;
+    private listenToMutationObserver;
     private createMutationObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeTitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPipeTitleDirective, "[kbqPipeTitle]", ["kbqPipeTitle"], { "viewValue": { "alias": "kbqPipeTitle"; "required": false; }; }, {}, ["parentContainer", "childContainer"], never, true, never>;

package/form-field/fieldset-tokens.scss

@@ -2,4 +2,5 @@
     --kbq-fieldset-legend-margin: var(--kbq-size-s);
     --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
     --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
+    --kbq-form-field-hint-size-gap: var(--kbq-size-xxs);
 }

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

@@ -11,7 +11,7 @@
     --kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);
 
     --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
-    --kbq-form-field-hint-size-gap: var(--kbq-size-s);
+    --kbq-form-field-hint-size-gap: var(--kbq-size-xxs);
 
     --kbq-form-field-size-container-vertical-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
     --kbq-form-field-size-container-left-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));

package/form-field/form-field.d.ts

@@ -41,7 +41,7 @@ export declare class KbqFormField extends KbqColorDirective implements AfterCont
     /**
      * @docs-private
      */
-    readonly elementRef: ElementRef<any>;
+    readonly elementRef: ElementRef<HTMLElement>;
     /** Disables form field borders and shadows. */
     readonly noBorders: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     /**

package/form-field/form-field.scss

@@ -4,11 +4,15 @@
 @mixin kbq-form-field-hint-geometry {
     display: flex;
     flex-direction: column;
-    gap: var(--kbq-size-xxs);
+    gap: var(--kbq-form-field-hint-size-gap);
     margin-top: var(--kbq-form-field-hint-size-margin-top);
 
-    .kbq-password-hint:first-child {
-        margin-top: var(--kbq-size-s);
+    &:has(.kbq-reactive-password-hint, .kbq-password-hint) {
+        --kbq-form-field-hint-size-gap: var(--kbq-size-s);
+    }
+
+    &:has(:is(.kbq-reactive-password-hint, .kbq-password-hint):first-child) {
+        --kbq-form-field-hint-size-margin-top: var(--kbq-size-m);
     }
 }
 
@@ -120,10 +124,6 @@
     .kbq-form-field__hint {
         @include kbq-form-field-hint-geometry();
     }
-
-    .kbq-password-hint {
-        margin-top: var(--kbq-form-field-hint-size-gap);
-    }
 }
 
 @include theme.kbq-form-field-theme();

package/form-field/password-toggle.d.ts

@@ -5,7 +5,7 @@ import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
 /** Component which changes password visibility. */
 export declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewInit, OnDestroy, AfterContentInit {
-    protected readonly nativeElement: any;
+    protected readonly nativeElement: HTMLElement;
     protected readonly focusMonitor: FocusMonitor;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     private readonly formField;

package/form-field/stepper.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs';
 import { KbqFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
 type KbqNumberInput = KbqFormFieldControl<unknown> & {
@@ -6,13 +7,37 @@ type KbqNumberInput = KbqFormFieldControl<unknown> & {
     stepDown: (step: number) => void;
     step: number;
 };
+/**
+ * Timeout duration when clicking the up/down arrow
+ * @docs-private
+ */
+export declare const KBQ_STEPPER_INITIAL_TIMEOUT = 300;
+/**
+ * Interval delay when clicking the up/down arrow
+ * @docs-private
+ */
+export declare const KBQ_STEPPER_INTERVAL_DELAY = 75;
 /** Component which allow to increment or decrement number value. */
 export declare class KbqStepper {
     private readonly formField;
+    private readonly document;
     /** Emitted when the stepper is incremented. */
     readonly stepUp: EventEmitter<void>;
     /** Emitted when the stepper is decremented. */
     readonly stepDown: EventEmitter<void>;
+    /** @docs-private */
+    protected readonly mouseUp: Subject<void>;
+    /**
+     * Timing observable simulating long press in native input-number.
+     * - Value increases/decreases by step immediately.
+     * - Brief pause (`300ms`)
+     * - Numbers start running upward/downward with selected speed
+     * (controlled by interval period)
+     * @see KBQ_STEPPER_INTERVAL_DELAY
+     * @see KBQ_STEPPER_INITIAL_TIMEOUT
+     * @docs-private
+     */
+    private readonly longPress;
     /**
      * Form field number control.
      *
@@ -23,14 +48,11 @@ export declare class KbqStepper {
      * @docs-private
      */
     connectTo(numberInput: KbqNumberInput): void;
-    /**
-     * @docs-private
-     */
+    /** @docs-private */
     onStepUp($event: MouseEvent): void;
-    /**
-     * @docs-private
-     */
+    /** @docs-private */
     onStepDown($event: MouseEvent): void;
+    private handleStep;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqStepper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqStepper, "kbq-stepper", ["kbqStepper"], {}, { "stepUp": "stepUp"; "stepDown": "stepDown"; }, never, never, true, never>;
 }

package/icon/icon.component.d.ts

@@ -2,7 +2,7 @@ import { AfterContentInit, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { KbqColorDirective } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqIcon extends KbqColorDirective implements AfterContentInit {
-    readonly elementRef: ElementRef<any>;
+    readonly elementRef: ElementRef<HTMLElement>;
     protected readonly formField: import("@koobiq/components/core").KbqFormFieldRef | null;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     small: boolean;
@@ -11,7 +11,7 @@ export declare class KbqIcon extends KbqColorDirective implements AfterContentIn
     /** Name of an icon within a @koobiq/icons. */
     iconName: string;
     protected name: string;
-    getHostElement(): any;
+    getHostElement(): HTMLElement;
     updateMaxHeight(): void;
     ngAfterContentInit(): void;
     private updateState;

package/inline-edit/index.d.ts

@@ -0,0 +1,2 @@
+export * from './inline-edit';
+export * from './module';

package/inline-edit/inline-edit-tokens.scss

@@ -0,0 +1,8 @@
+:where(.kbq-inline-edit, .kbq-inline-edit__panel) {
+    --kbq-inline-edit-background: transparent;
+    --kbq-inline-edit-height: var(--kbq-size-3xl);
+    --kbq-inline-edit-padding-horizontal: var(--kbq-size-s);
+    --kbq-inline-edit-padding-vertical: 5px;
+    --kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);
+    --kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary);
+}

package/inline-edit/inline-edit.d.ts

@@ -0,0 +1,140 @@
+import { CdkConnectedOverlay, CdkOverlayOrigin, ScrollStrategy } from '@angular/cdk/overlay';
+import { TemplateRef } from '@angular/core';
+import { KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqFormField, KbqLabel } from '@koobiq/components/form-field';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import * as i0 from "@angular/core";
+import * as i1 from "@koobiq/components/core";
+/** @docs-private */
+export declare class KbqFocusRegionItem {
+    readonly tabOut: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
+    protected isFocused: boolean;
+    protected onTabOut(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFocusRegionItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFocusRegionItem, "[kbqFocusRegionItem]", ["kbqFocusRegionItem"], {}, { "tabOut": "tabOut"; }, never, never, true, never>;
+}
+/** Directive for easy using styles of inline edit placeholder publicly. */
+export declare class KbqInlineEditPlaceholder {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEditPlaceholder, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInlineEditPlaceholder, "[kbqInlineEditPlaceholder]", ["kbqInlineEditPlaceholder"], {}, {}, never, never, true, never>;
+}
+/**
+ * This directive enhances element acting as dropdown trigger,
+ * visually indicating the active state with the `kbq-active` class.
+ * Also, it prevents click/keydown events from being propagated to disable mode toggling of parent component.
+ */
+export declare class KbqInlineEditMenu {
+    /** @docs-private */
+    protected readonly dropdownTrigger: KbqDropdownTrigger | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEditMenu, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInlineEditMenu, "[kbqInlineEditMenu]", ["kbqInlineEditMenu"], {}, {}, never, never, true, never>;
+}
+/**
+ * Customizable component that enables edit-in-place logic for specified control and it's view.
+ * 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.
+ */
+export declare class KbqInlineEdit {
+    private readonly elementRef;
+    private readonly kbqFocusMonitor;
+    private readonly overlay;
+    private readonly document;
+    /**
+     * Whether to show save/cancel action buttons in edit mode.
+     * @default false
+     */
+    readonly showActions: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to automatically show validation error tooltips on save attempts.
+     * @default true
+     */
+    readonly showTooltipOnError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Custom validation tooltip message. */
+    readonly validationTooltip: import("@angular/core").InputSignal<string | TemplateRef<any> | undefined>;
+    /**
+     * Disables the component, preventing interaction and mode switching. Only allows menu dropdown.
+     * @default false
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Custom width in pixels for the edit mode overlay. Auto-calculated if not set. */
+    readonly editModeWidth: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** User-defined tooltip placement */
+    readonly tooltipPlacement: import("@angular/core").InputSignal<PopUpPlacements | undefined>;
+    /** Handler function to retrieve the current value */
+    readonly getValueHandler: import("@angular/core").InputSignal<(() => unknown) | undefined>;
+    /** Handler function to update the value */
+    readonly setValueHandler: import("@angular/core").InputSignal<((value: any) => void) | undefined>;
+    /**
+     * Customizable function that checks if saving on enter available.
+     */
+    readonly canSaveOnEnter: import("@angular/core").InputSignal<(event: KeyboardEvent) => boolean>;
+    /** Emitted when the inline edit is saved successfully. */
+    protected readonly saved: import("@angular/core").OutputEmitterRef<void>;
+    /** Emitted when the inline edit is canceled and changes are discarded. */
+    protected readonly canceled: import("@angular/core").OutputEmitterRef<void>;
+    /** Emitted when mode switched to edit/view */
+    protected readonly modeChange: import("@angular/core").OutputEmitterRef<"view" | "edit">;
+    /** @docs-private */
+    protected readonly menu: import("@angular/core").Signal<KbqInlineEditMenu | undefined>;
+    /** @docs-private */
+    protected readonly label: import("@angular/core").Signal<KbqLabel | undefined>;
+    /** @docs-private */
+    protected readonly formFieldRef: import("@angular/core").Signal<KbqFormField | undefined>;
+    /** @docs-private */
+    protected readonly overlayOrigin: import("@angular/core").Signal<CdkOverlayOrigin>;
+    /** @docs-private */
+    protected readonly tooltipTrigger: import("@angular/core").Signal<KbqTooltipTrigger | undefined>;
+    /** @docs-private */
+    protected readonly overlayDir: import("@angular/core").Signal<CdkConnectedOverlay | undefined>;
+    /** @docs-private */
+    protected readonly regionItems: import("@angular/core").Signal<readonly KbqFocusRegionItem[]>;
+    /** @docs-private */
+    protected readonly mode: import("@angular/core").WritableSignal<"view" | "edit">;
+    /** @docs-private */
+    protected readonly overlayWidth: import("@angular/core").WritableSignal<string | number>;
+    /** @docs-private */
+    protected readonly scrollStrategy: import("@angular/core").WritableSignal<ScrollStrategy>;
+    /** @docs-private */
+    readonly modeAsReadonly: import("@angular/core").Signal<"view" | "edit">;
+    /** @docs-private */
+    protected readonly className: import("@angular/core").Signal<string>;
+    /** @docs-private */
+    protected readonly isEditMode: import("@angular/core").Signal<boolean>;
+    /** @docs-private */
+    protected readonly tabIndex: import("@angular/core").Signal<0 | -1>;
+    /** @docs-private */
+    protected readonly placements: typeof PopUpPlacements;
+    /** @docs-private */
+    protected readonly colors: typeof KbqComponentColors;
+    private initialValue;
+    constructor();
+    /** @docs-private */
+    protected toggleMode(): void;
+    /** @docs-private */
+    protected onClick(event: Event): void;
+    /** @docs-private */
+    protected onAttach(): void;
+    /** @docs-private */
+    protected save($event?: Event): void;
+    /** @docs-private */
+    protected cancel(): void;
+    /** @docs-private */
+    protected onOverlayKeydown(event: KeyboardEvent): void;
+    /**
+     * Sets up Tab key listeners on region items.
+     * Single item: Tab moves to next edit.
+     * Multiple items: Shift+Tab on first or Tab on last moves to next edit.
+     */
+    private setOverlayKeydownListener;
+    private saveAndFocusNextInlineEdit;
+    private isInvalid;
+    private getValue;
+    private setValue;
+    private coerceControl;
+    private setOverlayWidth;
+    private openPanel;
+    private getInputNativeElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
+    static ɵcmp: i0.ɵɵ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; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.KbqFocusMonitor; inputs: {}; outputs: {}; }]>;
+}

package/inline-edit/inline-edit.scss

@@ -0,0 +1,208 @@
+@use 'sass:map';
+
+@use '../core/styles/common/tokens';
+
+@mixin _mask($config) {
+    & {
+        position: relative;
+    }
+
+    .kbq-mask {
+        display: flex;
+        position: absolute;
+
+        @if (map.get($config, 'top')) {
+            top: map.get($config, 'top');
+        }
+
+        @if (map.get($config, 'right')) {
+            right: map.get($config, 'right');
+        }
+
+        @if (map.get($config, 'bottom')) {
+            bottom: map.get($config, 'bottom');
+        }
+
+        @if (map.get($config, 'left')) {
+            left: map.get($config, 'left');
+        }
+
+        .kbq-mask__fade {
+            background: var(--kbq-mask-background, transparent);
+            mask-image: linear-gradient(90deg, transparent, var(--kbq-black-default));
+        }
+
+        .kbq-mask__container {
+            background: var(--kbq-mask-background, transparent);
+        }
+    }
+}
+
+@mixin _inline-edit-theme {
+    &.kbq-inline-edit_view {
+        &:not(.kbq-inline-edit_disabled) {
+            &:hover {
+                --kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);
+                --kbq-mask-background: var(--kbq-states-background-contrast-less-hover);
+
+                cursor: pointer;
+            }
+
+            &:active,
+            &:has(.kbq-inline-edit__menu.kbq-active) {
+                --kbq-inline-edit-background: var(--kbq-states-background-transparent-active);
+                --kbq-mask-background: var(--kbq-states-background-contrast-less-active);
+            }
+        }
+
+        &.kbq-inline-edit_disabled {
+            &:hover,
+            &:has(.kbq-inline-edit__menu.kbq-active) {
+                --kbq-mask-background: var(--kbq-background-bg);
+            }
+        }
+    }
+
+    .kbq-label {
+        color: var(--kbq-inline-edit-label-color);
+    }
+
+    .kbq-inline-edit__focus_container {
+        background: var(--kbq-inline-edit-background);
+        border-color: var(--kbq-inline-edit-background);
+
+        &:focus-visible {
+            outline: none;
+        }
+
+        &.cdk-keyboard-focused {
+            $focused-color: var(--kbq-states-line-focus-theme);
+            outline: 1px solid $focused-color;
+            border-color: $focused-color;
+        }
+    }
+}
+
+@mixin _inline-edit-typography {
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+}
+
+.kbq-inline-edit {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: var(--kbq-size-border-radius);
+    padding: var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);
+    min-height: var(--kbq-inline-edit-height);
+    box-sizing: border-box;
+
+    @include _inline-edit-theme();
+    @include _inline-edit-typography();
+
+    &:not(.kbq-inline-edit_with-label) {
+        --kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width));
+    }
+
+    &.kbq-inline-edit_with-label {
+        padding-top: var(--kbq-inline-edit-padding-vertical);
+        padding-bottom: var(--kbq-inline-edit-padding-vertical);
+
+        &.kbq-inline-edit_edit {
+            .kbq-inline-edit__view-container {
+                position: relative;
+            }
+        }
+
+        .kbq-inline-edit__label {
+            margin-bottom: var(--kbq-size-3xs);
+        }
+    }
+
+    &.kbq-inline-edit_view {
+        .kbq-inline-edit__view-container {
+            text-overflow: ellipsis;
+        }
+    }
+
+    &:hover,
+    &.cdk-keyboard-focused {
+        .kbq-inline-edit__menu-mask {
+            opacity: 1;
+        }
+    }
+
+    .kbq-inline-edit__placeholder {
+        color: var(--kbq-foreground-contrast-secondary);
+    }
+
+    @include _mask(
+        (
+            'top': 0,
+            'right': 0
+        )
+    );
+
+    .kbq-inline-edit__menu-mask {
+        opacity: 0;
+        height: 100%;
+        justify-content: flex-end;
+        border-top-right-radius: var(--kbq-size-border-radius);
+        border-bottom-right-radius: var(--kbq-size-border-radius);
+
+        &:has(.kbq-inline-edit__menu.kbq-pressed, .kbq-inline-edit__menu.cdk-keyboard-focused) {
+            opacity: 1;
+        }
+
+        .kbq-inline-edit__menu-mask-fade {
+            width: 32px;
+        }
+
+        .kbq-inline-edit__menu-mask-container {
+            display: flex;
+            justify-content: flex-end;
+            min-width: 40px;
+            border-radius: inherit;
+        }
+
+        .kbq-inline-edit__menu {
+            display: inline-flex;
+            align-self: flex-start;
+            padding: var(--kbq-size-s);
+            z-index: 2;
+        }
+    }
+
+    .kbq-inline-edit__focus_container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(100% - 2 * var(--kbq-size-border-width));
+        height: calc(100% - 2 * var(--kbq-size-border-width));
+        border: var(--kbq-size-border-width) solid transparent;
+        border-radius: var(--kbq-size-border-radius);
+        // set z-index to hide mask borders
+        z-index: 1;
+    }
+}
+
+.kbq-inline-edit__panel {
+    width: 100%;
+
+    .kbq-inline-edit__control-container {
+        border-radius: var(--kbq-size-border-radius);
+    }
+
+    .kbq-inline-edit__action-buttons {
+        position: absolute;
+        left: calc(-1 * var(--kbq-inline-edit-padding-horizontal));
+        display: inline-flex;
+        flex-direction: row;
+        gap: var(--kbq-size-xxs);
+        padding: var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s);
+    }
+
+    .kbq-inline-edit__control-container,
+    .kbq-inline-edit__action-buttons > .kbq-button-icon {
+        box-shadow: var(--kbq-shadow-popup);
+    }
+}

package/inline-edit/module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./inline-edit";
+export declare class KbqInlineEditModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEditModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqInlineEditModule, never, [typeof i1.KbqInlineEdit, typeof i1.KbqInlineEditPlaceholder, typeof i1.KbqInlineEditMenu], [typeof i1.KbqInlineEdit, typeof i1.KbqInlineEditPlaceholder, typeof i1.KbqInlineEditMenu]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqInlineEditModule>;
+}

package/input/input-number.d.ts

@@ -62,7 +62,7 @@ export declare class KbqNumberInput implements KbqFormFieldControl<any>, Control
     private control;
     private config;
     private valueFromPaste;
-    constructor(elementRef: ElementRef, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService?: KbqLocaleService | undefined);
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService?: KbqLocaleService | undefined);
     ngOnDestroy(): void;
     onContainerClick(): void;
     focus(): void;

package/input/input-password.d.ts

@@ -5,7 +5,7 @@ import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqInputPassword implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, OnChanges, CanUpdateErrorState {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLInputElement>;
     ngControl: NgControl;
     parentForm: NgForm;
     parentFormGroup: FormGroupDirective;
@@ -71,7 +71,7 @@ export declare class KbqInputPassword implements KbqFormFieldControl<any>, OnCha
      */
     get empty(): boolean;
     private _inputValueAccessor;
-    constructor(elementRef: ElementRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
+    constructor(elementRef: ElementRef<HTMLInputElement>, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
     ngOnChanges(): void;
     ngOnDestroy(): void;
     ngDoCheck(): void;

package/input/input.d.ts

@@ -6,7 +6,7 @@ import { Subject } from 'rxjs';
 import { KbqNumberInput } from './input-number';
 import * as i0 from "@angular/core";
 export declare class KbqInput implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, OnChanges, CanUpdateErrorState {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLInputElement>;
     ngControl: NgControl;
     numberInput: KbqNumberInput;
     parentForm: NgForm;
@@ -71,7 +71,7 @@ export declare class KbqInput implements KbqFormFieldControl<any>, OnChanges, On
     get value(): string;
     set value(value: string);
     private inputValueAccessor;
-    constructor(elementRef: ElementRef, ngControl: NgControl, numberInput: KbqNumberInput, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
+    constructor(elementRef: ElementRef<HTMLInputElement>, ngControl: NgControl, numberInput: KbqNumberInput, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
     ngOnChanges(): void;
     ngOnDestroy(): void;
     ngDoCheck(): void;

package/input/input.module.d.ts

@@ -6,8 +6,9 @@ import * as i4 from "./input-number-validators";
 import * as i5 from "@angular/cdk/a11y";
 import * as i6 from "@angular/forms";
 import * as i7 from "@koobiq/components/icon";
+import * as i8 from "@koobiq/components/form-field";
 export declare class KbqInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqInputModule, [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator], [typeof i5.A11yModule, typeof i6.FormsModule, typeof i7.KbqIconModule], [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqInputModule, [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator], [typeof i5.A11yModule, typeof i6.FormsModule, typeof i7.KbqIconModule], [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator, typeof i8.KbqFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqInputModule>;
 }