@koobiq/components 19.8.3 → 20.1.0

package/sidebar/index.d.ts

@@ -1 +1,93 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { OnDestroy, AfterContentInit } from '@angular/core';
+
+declare enum KbqSidebarAnimationState {
+    Opened = "opened",
+    Closed = "closed"
+}
+
+declare enum SidebarPositions {
+    Left = "left",
+    Right = "right"
+}
+interface KbqSidebarParams {
+    openedStateMinWidth: string;
+    openedStateWidth: string;
+    openedStateMaxWidth: string;
+    closedStateWidth: string;
+}
+declare class KbqSidebarOpened {
+    readonly minWidth: i0.InputSignal<string>;
+    readonly width: i0.InputSignal<string>;
+    readonly maxWidth: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebarOpened, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidebarOpened, "[kbq-sidebar-opened]", ["kbqSidebarOpened"], { "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KbqSidebarClosed {
+    readonly width: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebarClosed, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidebarClosed, "[kbq-sidebar-closed]", ["kbqSidebarClosed"], { "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KbqSidebar implements OnDestroy, AfterContentInit {
+    private ngZone;
+    private elementRef;
+    /**
+     * @docs-private
+     */
+    protected readonly document: Document;
+    private readonly renderer;
+    private readonly changeDetectorRef;
+    private readonly isBrowser;
+    get opened(): boolean;
+    set opened(value: boolean);
+    private _opened;
+    readonly position: i0.InputSignal<SidebarPositions>;
+    /**
+     * @docs-private
+     */
+    params: KbqSidebarParams;
+    readonly stateChanged: i0.OutputEmitterRef<boolean>;
+    /**
+     * @docs-private
+     */
+    readonly openedContent: i0.Signal<KbqSidebarOpened | undefined>;
+    /**
+     * @docs-private
+     */
+    readonly closedContent: i0.Signal<KbqSidebarClosed | undefined>;
+    /**
+     * @docs-private
+     */
+    get animationState(): KbqSidebarAnimationState;
+    /**
+     * @docs-private
+     */
+    internalState: boolean;
+    private unbindKeydownListener;
+    constructor();
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    toggle(): void;
+    /**
+     * @docs-private
+     */
+    onAnimationStart(): void;
+    /**
+     * @docs-private
+     */
+    onAnimationDone(): void;
+    private registerKeydownListener;
+    private unRegisterKeydownListener;
+    private handleKeydown;
+    private saveWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidebar, "kbq-sidebar", ["kbqSidebar"], { "opened": { "alias": "opened"; "required": false; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "stateChanged": "stateChanged"; }, ["openedContent", "closedContent"], ["[kbq-sidebar-opened]", "[kbq-sidebar-closed]"], true, never>;
+}
+
+declare class KbqSidebarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSidebarModule, never, [typeof KbqSidebarClosed, typeof KbqSidebarOpened, typeof KbqSidebar], [typeof KbqSidebarClosed, typeof KbqSidebarOpened, typeof KbqSidebar]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSidebarModule>;
+}
+
+export { KbqSidebar, KbqSidebarClosed, KbqSidebarModule, KbqSidebarOpened, SidebarPositions };

package/sidepanel/index.d.ts

@@ -1 +1,263 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injector, OnDestroy, EventEmitter, ComponentRef, EmbeddedViewRef, OnInit, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { AnimationEvent } from '@angular/animations';
+import * as i2 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, ComponentType } from '@angular/cdk/portal';
+import { Subject, Observable } from 'rxjs';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayRef } from '@angular/cdk/overlay';
+import * as i1 from '@koobiq/components/core';
+import { KbqOverflowShadowState } from '@koobiq/components/core';
+import * as i3 from '@koobiq/components/button';
+import * as i4 from '@koobiq/components/icon';
+import * as i5 from '@koobiq/components/title';
+import * as i6 from '@angular/cdk/a11y';
+
+/** Injection token that can be used to access the data that was passed in to a sidepanel. */
+declare const KBQ_SIDEPANEL_DATA: InjectionToken<any>;
+declare enum KbqSidepanelPosition {
+    Right = "right",
+    Left = "left",
+    Top = "top",
+    Bottom = "bottom"
+}
+declare enum KbqSidepanelSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+declare class KbqSidepanelConfig<D = any> {
+    /** ID for the sidepanel. If omitted, a unique one will be generated. */
+    id?: string;
+    /** Whether the focus trap is active. */
+    trapFocus?: boolean;
+    /** capture focus on initialization. This option sets cdkTrapFocusAutoCapture. */
+    trapFocusAutoCapture?: boolean;
+    /** Data being injected into the child component. */
+    data?: D | null;
+    position?: KbqSidepanelPosition;
+    size?: KbqSidepanelSize;
+    /** Whether the sidepanel has a backdrop. */
+    hasBackdrop?: boolean;
+    backdropClass?: string;
+    /** Whether the user can use escape or clicking outside to close the sidepanel. */
+    disableClose?: boolean;
+    /** Custom class for the overlay pane. */
+    overlayPanelClass?: string | string[];
+    /**
+     * Injector used for the instantiation of the component to be attached.
+     * Allows to pass a custom injector to provide a dependency injection hierarchy for the sidepanel content.
+     */
+    injector?: Injector;
+}
+
+declare enum KbqSidepanelAnimationState {
+    Void = "void",
+    Visible = "visible",
+    Hidden = "hidden",
+    Lower = "lower",
+    BottomPanel = "bottom-panel",
+    BecomingNormal = "becoming-normal"
+}
+
+declare const KBQ_SIDEPANEL_WITH_INDENT: InjectionToken<boolean>;
+declare class KbqSidepanelContainerComponent extends BasePortalOutlet implements OnDestroy {
+    private elementRef;
+    private changeDetectorRef;
+    sidepanelConfig: KbqSidepanelConfig<any>;
+    withIndent: boolean;
+    /** ID for the container DOM element. */
+    id: string;
+    /** The portal outlet inside of this container into which the content will be loaded. */
+    readonly portalOutlet: i0.Signal<CdkPortalOutlet>;
+    /** The state of the sidepanel animations. */
+    animationState: KbqSidepanelAnimationState;
+    /** @docs-private */
+    animationTransform: {
+        transformIn: string;
+        transformOut: string;
+        lower: string;
+        bottomPanel: string;
+        becomingNormal: string;
+    };
+    /** Emits whenever the state of the animation changes. */
+    animationStateChanged: EventEmitter<AnimationEvent>;
+    /** @docs-private */
+    get size(): string;
+    /** @docs-private */
+    get trapFocusAutoCapture(): boolean;
+    /** @docs-private */
+    get trapFocus(): boolean;
+    /** @docs-private */
+    protected readonly indentClickEmitter: Subject<MouseEvent>;
+    /** Whether the component has been destroyed. */
+    private destroyed;
+    ngOnDestroy(): void;
+    /**
+     * Gets an observable that emits when the indent has been clicked.
+     *
+     * @docs-private
+     */
+    indentClick(): Observable<MouseEvent>;
+    /** Attach a component portal as content to this sidepanel container. */
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    /** Attach a template portal as content to this sidepanel container. */
+    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    /** Begin animation of the sidepanel entrance into view. */
+    enter(): void;
+    /** Begin animation of the sidepanel exiting from view. */
+    exit(): void;
+    /** @docs-private */
+    onAnimation(event: AnimationEvent): void;
+    /** @docs-private */
+    setAnimationState(state: KbqSidepanelAnimationState): void;
+    private setAnimation;
+    private setPanelClass;
+    private validatePortalAttached;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidepanelContainerComponent, "kbq-sidepanel-container", never, {}, {}, never, never, true, never>;
+}
+
+declare class KbqSidepanelRef<T = any, R = any> {
+    readonly containerInstance: KbqSidepanelContainerComponent;
+    readonly overlayRef: OverlayRef;
+    readonly config: KbqSidepanelConfig;
+    readonly id: string;
+    /**
+     * Vertical scroll overflow state of the sidepanel body.
+     * Updated on scroll and used for visual adjustments.
+     */
+    bodyOverflow: i0.WritableSignal<KbqOverflowShadowState>;
+    /** Instance of the component making up the content of the sidepanel. */
+    instance: T;
+    /** Subject for notifying the user that the sidepanel has been closed and dismissed. */
+    private readonly afterClosed$;
+    /** Subject for notifying the user that the sidepanel starting closing. */
+    private readonly beforeClosed$;
+    /** Subject for notifying the user that the sidepanel has opened and appeared. */
+    private readonly afterOpened$;
+    /** Result to be passed down to the `afterDismissed` stream. */
+    private result;
+    constructor(containerInstance: KbqSidepanelContainerComponent, overlayRef: OverlayRef, config: KbqSidepanelConfig);
+    close(result?: R): void;
+    /** Gets an observable that is notified when the sidepanel is started closing. */
+    beforeClosed(): Observable<void>;
+    /** Gets an observable that is notified when the sidepanel is finished closing. */
+    afterClosed(): Observable<R | undefined>;
+    /** Gets an observable that is notified when the sidepanel has opened and appeared. */
+    afterOpened(): Observable<void>;
+}
+
+/**
+ * Button that will close the current sidepanel.
+ */
+declare class KbqSidepanelClose implements OnInit, OnChanges {
+    sidepanelRef: KbqSidepanelRef<any, any>;
+    private elementRef;
+    private sidepanelService;
+    sidepanelResult: any;
+    readonly kbqSidepanelClose: i0.InputSignal<any>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelClose, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelClose, "button[kbq-sidepanel-close], button[kbqSidepanelClose]", never, { "sidepanelResult": { "alias": "kbq-sidepanel-close"; "required": false; }; "kbqSidepanelClose": { "alias": "kbqSidepanelClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Header of a sidepanel.
+ */
+declare class KbqSidepanelHeader {
+    /** Add button for close sidepanel. Default false */
+    readonly closeable: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Enables text truncation. Default true */
+    readonly truncateText: i0.InputSignalWithTransform<boolean, unknown>;
+    /** @docs-private */
+    protected sidepanelRef: KbqSidepanelRef<any, any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidepanelHeader, "kbq-sidepanel-header", never, { "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; "truncateText": { "alias": "truncateText"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Scrollable content container of a sidepanel.
+ */
+declare class KbqSidepanelBody {
+    private readonly sidepanelRef;
+    private readonly overflowContainer;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelBody, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelBody, "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqOverflowShadowContainer; inputs: {}; outputs: {}; }]>;
+}
+/**
+ * Footer of a sidepanel.
+ */
+declare class KbqSidepanelFooter {
+    /** @docs-private */
+    protected sidepanelRef: KbqSidepanelRef<any, any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelFooter, "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Actions block of a sidepanel footer.
+ */
+declare class KbqSidepanelActions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelActions, "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", never, {}, {}, never, never, true, never>;
+}
+
+declare class KbqSidepanelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSidepanelModule, never, [typeof i1$1.OverlayModule, typeof i2.PortalModule, typeof i3.KbqButtonModule, typeof i4.KbqIconModule, typeof i5.KbqTitleModule, typeof i6.A11yModule, typeof KbqSidepanelContainerComponent, typeof KbqSidepanelClose, typeof KbqSidepanelHeader, typeof KbqSidepanelBody, typeof KbqSidepanelFooter, typeof KbqSidepanelActions], [typeof KbqSidepanelContainerComponent, typeof KbqSidepanelClose, typeof KbqSidepanelHeader, typeof KbqSidepanelBody, typeof KbqSidepanelFooter, typeof KbqSidepanelActions]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSidepanelModule>;
+}
+
+/** Injection token that can be used to specify default sidepanel options. */
+declare const KBQ_SIDEPANEL_DEFAULT_OPTIONS: InjectionToken<KbqSidepanelConfig<any>>;
+declare class KbqSidepanelService implements OnDestroy {
+    private overlay;
+    private injector;
+    private defaultOptions;
+    private parentSidepanelService;
+    private openedSidepanelsAtThisLevel;
+    /** Keeps track of the currently-open sidepanels. */
+    get openedSidepanels(): KbqSidepanelRef[];
+    ngOnDestroy(): void;
+    open<T, D = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, config?: KbqSidepanelConfig<D>): KbqSidepanelRef<T>;
+    /**
+     * Closes all of the currently-open sidepanels.
+     */
+    closeAll(): void;
+    /**
+     * Finds an open sidepanel by its id.
+     * @param id ID to use when looking up the sidepanel.
+     */
+    getSidepanelById(id: string): KbqSidepanelRef | undefined;
+    /**
+     * Attaches the sidepanel container component to the overlay.
+     */
+    private attachContainer;
+    /**
+     * Creates a custom injector to be used inside the sidepanel. This allows a component loaded inside
+     * of a sidepanel to close itself and, optionally, to return a value.
+     * @param config Config object that is used to construct the sidepanel.
+     * @param sidepanelRef Reference to the sidepanel.
+     * @param sidepanelContainer Sidepanel container element that wraps all of the contents.
+     * @returns The custom injector that can be used inside the sidepanel.
+     */
+    private createInjector;
+    /**
+     * Creates a new overlay and places it in the correct location.
+     * @param config The user-specified sidepanel config.
+     */
+    private createOverlay;
+    private closeSidepanels;
+    private getOpenedSidepanelsWithSamePosition;
+    private updateAnimationState;
+    /**
+     * Removes a sidepanel from the array of open sidepanels.
+     * @param sidepanelRef Sidepanel to be removed.
+     */
+    private removeOpenSidepanel;
+    private getLowerSidepanelsWithSamePosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqSidepanelService>;
+}
+
+export { KBQ_SIDEPANEL_DATA, KBQ_SIDEPANEL_DEFAULT_OPTIONS, KBQ_SIDEPANEL_WITH_INDENT, KbqSidepanelActions, KbqSidepanelBody, KbqSidepanelClose, KbqSidepanelConfig, KbqSidepanelContainerComponent, KbqSidepanelFooter, KbqSidepanelHeader, KbqSidepanelModule, KbqSidepanelPosition, KbqSidepanelRef, KbqSidepanelService, KbqSidepanelSize };

package/sidepanel/sidepanel.scss

@@ -192,10 +192,6 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
             @include common.kbq-truncate-line();
         }
     }
-
-    &.kbq-sidepanel-header_bottom-overflown {
-        box-shadow: var(--kbq-shadow-overflow-normal-bottom);
-    }
 }
 
 .kbq-sidepanel-title {
@@ -241,10 +237,6 @@ $indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
 
         gap: var(--kbq-sidepanel-size-footer-content-gap-horizontal);
     }
-
-    &.kbq-sidepanel-footer_top-overflown {
-        box-shadow: var(--kbq-shadow-overflow-normal-top);
-    }
 }
 
 @include kbq-sidepanel-theme();

package/skeleton/index.d.ts

@@ -1,2 +1,26 @@
-export * from './module';
-export * from './skeleton';
+import * as i0 from '@angular/core';
+import { OnDestroy } from '@angular/core';
+
+/**
+ * Directive representing a skeleton placeholder.
+ */
+declare class KbqSkeleton implements OnDestroy {
+    private readonly styleLoader;
+    private readonly element;
+    private readonly window;
+    /** Whether the skeleton is enabled. */
+    readonly enabled: i0.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    ngOnDestroy(): void;
+    private syncAnimation;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSkeleton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSkeleton, "kbq-skeleton, [kbqSkeleton]", ["kbqSkeleton"], { "enabled": { "alias": "kbqSkeleton"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class KbqSkeletonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSkeletonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSkeletonModule, never, [typeof KbqSkeleton], [typeof KbqSkeleton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSkeletonModule>;
+}
+
+export { KbqSkeleton, KbqSkeletonModule };

package/skeleton/skeleton.scss

@@ -52,5 +52,9 @@
             var(--kbq-skeleton-animation-wave-end) 100%
         );
         animation: wave var(--kbq-skeleton-animation-duration) ease-in var(--kbq-skeleton-animation-delay) infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
     }
 }

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

@@ -1,7 +1,7 @@
 @mixin kbq-split-button-theme() {
     .kbq-split-button {
         &:hover:has(.kbq-button_transparent) {
-            background: var(--kbq-states-background-transparent-hover, rgba(108, 115, 147, 0.08));
+            background: var(--kbq-states-background-transparent-hover);
         }
 
         & .kbq-split-button_item {
@@ -102,7 +102,7 @@
             }
 
             & .kbq-split-button_second:before {
-                background: rgba(138, 143, 168, 0.6);
+                background: var(--kbq-states-line-disabled);
             }
         }
 

package/split-button/index.d.ts

@@ -1 +1,46 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { AfterContentInit, QueryList } from '@angular/core';
+import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
+import { KbqColorDirective, KbqComponentColors, ThemePalette } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+
+declare class KbqSplitButton extends KbqColorDirective implements AfterContentInit {
+    private nativeElement;
+    /** @docs-private */
+    protected buttons: QueryList<KbqButton>;
+    /** @docs-private */
+    protected readonly dropdownTrigger: i0.Signal<KbqDropdownTrigger | undefined>;
+    /** Sets the width of the dropdown to the width of the trigger. Default is false */
+    readonly panelAutoWidth: i0.InputSignal<boolean>;
+    /** component style, will be set for nested buttons */
+    get kbqStyle(): string;
+    set kbqStyle(value: KbqButtonStyles | string);
+    private _kbqStyle;
+    /** component color, will be set for nested buttons */
+    get color(): KbqComponentColors | ThemePalette | string;
+    set color(value: KbqComponentColors | ThemePalette | string);
+    /** Whether the checkbox is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected _disabled: boolean;
+    get firstDisabled(): boolean;
+    get secondDisabled(): boolean;
+    constructor();
+    ngAfterContentInit(): void;
+    private updateClasses;
+    private updateColor;
+    private updateStyle;
+    private updateDisabledState;
+    private updateDropdownParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitButton, "kbq-split-button, [kbq-split-button]", never, { "panelAutoWidth": { "alias": "panelAutoWidth"; "required": false; "isSignal": true; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["dropdownTrigger", "buttons"], ["[kbq-button]", "[kbq-button]"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+declare class KbqSplitButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSplitButtonModule, never, [typeof KbqSplitButton], [typeof KbqSplitButton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSplitButtonModule>;
+}
+
+export { KbqSplitButton, KbqSplitButtonModule };

package/splitter/_splitter-theme.scss

@@ -6,7 +6,7 @@
 
         &:hover,
         &.kbq-gutter_dragged {
-            background-color: rgba(106, 115, 150, 0.08);
+            background-color: var(--kbq-states-background-transparent-hover);
         }
 
         &.kbq-gutter_vertical {
@@ -21,6 +21,6 @@
     }
 
     .kbq-gutter-ghost {
-        background: rgba(106, 115, 150, 0.16);
+        background: var(--kbq-states-background-transparent-active);
     }
 }

package/splitter/index.d.ts

@@ -1 +1,142 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { OnInit, AfterContentInit, OnDestroy, ElementRef, ChangeDetectorRef, AfterViewInit, QueryList } from '@angular/core';
+import * as i1 from '@koobiq/components/icon';
+
+interface IArea {
+    area: KbqSplitterAreaDirective;
+    index: number;
+    order: number;
+    initialSize: number;
+}
+interface IPoint {
+    x: number;
+    y: number;
+}
+declare enum Direction {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+declare class KbqGutterDirective implements OnInit {
+    private elementRef;
+    private renderer;
+    get direction(): Direction;
+    set direction(direction: Direction);
+    private _direction;
+    get order(): number;
+    set order(order: number);
+    private _order;
+    get size(): number;
+    set size(size: number);
+    private _size;
+    get isVertical(): boolean;
+    dragged: boolean;
+    ngOnInit(): void;
+    getPosition(): IPoint;
+    private setStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqGutterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqGutterDirective, "kbq-gutter", never, { "direction": { "alias": "direction"; "required": false; }; "order": { "alias": "order"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class KbqGutterGhostDirective {
+    private elementRef;
+    private renderer;
+    visible: boolean;
+    get x(): number;
+    set x(x: number);
+    private _x;
+    get y(): number;
+    set y(y: number);
+    private _y;
+    get direction(): Direction;
+    set direction(direction: Direction);
+    private _direction;
+    get size(): number;
+    set size(size: number);
+    private _size;
+    get isVertical(): boolean;
+    private updateDimensions;
+    private setStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqGutterGhostDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqGutterGhostDirective, "kbq-gutter-ghost", never, { "visible": { "alias": "visible"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class KbqSplitterComponent implements OnInit, AfterContentInit, OnDestroy {
+    elementRef: ElementRef<HTMLElement>;
+    changeDetectorRef: ChangeDetectorRef;
+    private ngZone;
+    private renderer;
+    readonly gutterPositionChange: i0.OutputEmitterRef<void>;
+    areas: IArea[];
+    readonly gutters: i0.Signal<readonly KbqGutterDirective[]>;
+    readonly ghost: i0.Signal<KbqGutterGhostDirective>;
+    areaRefs: QueryList<KbqSplitterAreaDirective>;
+    get isDragging(): boolean;
+    private _isDragging;
+    private readonly areaPositionDivider;
+    private readonly listeners;
+    private areasChangeSubscription;
+    get hideGutters(): boolean;
+    set hideGutters(value: boolean);
+    private _hideGutters;
+    get direction(): Direction;
+    set direction(direction: Direction);
+    private _direction;
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    private _disabled;
+    get useGhost(): boolean;
+    set useGhost(useGhost: boolean);
+    private _useGhost;
+    get gutterSize(): number;
+    set gutterSize(gutterSize: number);
+    private _gutterSize;
+    get resizing(): boolean;
+    private _resizing;
+    addArea(area: KbqSplitterAreaDirective): void;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    onMouseDown(event: MouseEvent, leftAreaIndex: number, rightAreaIndex: number): void;
+    removeArea(area: KbqSplitterAreaDirective): void;
+    isVertical(): boolean;
+    private mapAndOrderArea;
+    private updateGutter;
+    private onMouseMove;
+    private resizeAreas;
+    private onMouseUp;
+    private setStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitterComponent, "kbq-splitter", ["kbqSplitter"], { "hideGutters": { "alias": "hideGutters"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "useGhost": { "alias": "useGhost"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; }, { "gutterPositionChange": "gutterPositionChange"; }, ["areaRefs"], ["*"], true, never>;
+}
+declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestroy {
+    private elementRef;
+    private renderer;
+    private splitter;
+    readonly sizeChange: i0.OutputEmitterRef<number>;
+    private readonly window;
+    private readonly platform;
+    isResizing(): boolean;
+    disableFlex(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    setOrder(order: number): void;
+    setSize(size: number): void;
+    getSize(): number;
+    getPosition(): IPoint;
+    getMinSize(): number;
+    private isVertical;
+    private getMinSizeProperty;
+    private getOffsetSizeProperty;
+    private getSizeProperty;
+    private setStyle;
+    private removeStyle;
+    private emitSizeChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterAreaDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSplitterAreaDirective, "[kbq-splitter-area]", never, {}, { "sizeChange": "sizeChange"; }, never, never, true, never>;
+}
+
+declare class KbqSplitterModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSplitterModule, never, [typeof i1.KbqIconModule, typeof KbqGutterDirective, typeof KbqGutterGhostDirective, typeof KbqSplitterAreaDirective, typeof KbqSplitterComponent], [typeof KbqGutterDirective, typeof KbqSplitterAreaDirective, typeof KbqSplitterComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSplitterModule>;
+}
+
+export { Direction, KbqGutterDirective, KbqGutterGhostDirective, KbqSplitterAreaDirective, KbqSplitterComponent, KbqSplitterModule };

package/table/_table-theme.scss

@@ -16,7 +16,11 @@
                 & > td {
                     color: var(--kbq-foreground-contrast);
                 }
+            }
+        }
 
+        &:not(.kbq-table_disable-hover) > tbody {
+            & > tr {
                 &.kbq-hovered td,
                 &:hover td {
                     background-color: var(--kbq-states-background-transparent-hover);