@koobiq/components 19.4.1 → 19.6.0

package/core/option/option.d.ts

@@ -1,4 +1,5 @@
 import { AfterViewChecked, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, OnDestroy, QueryList } from '@angular/core';
+import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
 import { Subject } from 'rxjs';
 import { KbqTitleTextRef } from '../title';
 import { KbqOptgroup } from './optgroup';
@@ -18,6 +19,7 @@ export interface KbqOptionParentComponent {
     multiple?: boolean;
     multiSelection?: boolean;
     withVirtualScroll?: boolean;
+    keyManager?: ActiveDescendantKeyManager<KbqOption>;
     setSelectedOptionsByClick: (option: KbqOption) => void;
 }
 /**
@@ -61,7 +63,7 @@ export declare class KbqVirtualOption extends KbqOptionBase {
 export declare class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDestroy, KbqTitleTextRef {
     private readonly elementRef;
     private readonly changeDetectorRef;
-    private readonly parent;
+    protected readonly parent: KbqOptionParentComponent;
     readonly group: KbqOptgroup;
     textElement: ElementRef;
     /** The form value of the option. */
@@ -133,6 +135,8 @@ export declare class KbqOption extends KbqOptionBase implements AfterViewChecked
     selectViaInteraction(): void;
     getTabIndex(): string;
     getHostElement(): HTMLElement;
+    /** @docs-private */
+    protected onMouseenter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOption, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqOption, "kbq-option", ["kbqOption"], { "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "userSelect": { "alias": "userSelect"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "viewValue": { "alias": "viewValue"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, ["kbq-pseudo-checkbox", "*"], true, never>;
     static ngAcceptInputType_selectable: unknown;

package/core/option/option.scss

@@ -6,6 +6,11 @@
     @include list.kbq-list-item-base();
     @include vendor-prefixes.user-select(none);
 
+    & > .kbq-pseudo-checkbox {
+        margin-top: var(--kbq-size-3xs);
+        align-self: baseline;
+    }
+
     border-radius: var(--kbq-option-border-radius);
 
     &:not(.kbq-disabled) {

package/core/pop-up/pop-up-trigger.d.ts

@@ -19,7 +19,12 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     protected readonly destroyRef: DestroyRef;
     protected readonly scrollable: CdkScrollable | null;
     protected abstract scrollStrategy: () => ScrollStrategy;
-    isOpen: boolean;
+    /** @docs-private */
+    protected externalNativeElement: HTMLElement;
+    private popUpChangeDetectorRef;
+    get isOpen(): boolean;
+    set isOpen(value: boolean);
+    private _isOpen;
     enterDelay: number;
     leaveDelay: number;
     triggerName: string;
@@ -66,7 +71,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     keydownHandler(event: KeyboardEvent): void;
     touchendHandler(): void;
     show(delay?: number): void;
-    hide: (delay?: number) => void;
+    hide(delay?: number): void;
     detach: () => void;
     /** Create the overlay config and position strategy */
     createOverlay(): OverlayRef;
@@ -77,6 +82,10 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     /** Updates the position of the current popover. */
     updatePosition(reapplyPosition?: boolean): void;
     focus(): void;
+    /** @docs-private */
+    getNativeElement(): HTMLElement;
+    /** @docs-private */
+    setExternalNativeElement(value: HTMLElement): void;
     /**
      * Returns a list of positions that are aligned with the element's dimensions and offsets.
      * @protected

package/core/select/common.d.ts

@@ -12,6 +12,10 @@ export declare class KbqSelectMatcher {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, { "useDefaultHandlers": { "alias": "useDefaultHandlers"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_useDefaultHandlers: unknown;
 }
+export declare class KbqSelectSearchEmptyResult {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
+}
 export declare class KbqSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, true, never>;
@@ -34,10 +38,6 @@ export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, [{ optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, never, never, true, never>;
 }
-export declare class KbqSelectSearchEmptyResult {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
-}
 /**
  * Abstract class representing a customizable select component with an overlay.
  *

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -24,8 +24,8 @@
     vertical-align: middle;
     flex-shrink: 0;
 
-    & .kbq-checkbox-checkmark,
-    & .kbq-checkbox-mixedmark {
+    .kbq-checkbox-checkmark,
+    .kbq-checkbox-mixedmark {
         display: none;
     }
 

package/core/styles/common/_groups-mixins.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+
+@mixin border-top-radius($radius) {
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+    border-bottom-right-radius: $radius;
+    border-top-right-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
+}
+
+@mixin group($item-selector: kbq-group-item) {
+    & {
+        display: flex;
+        flex-direction: row;
+
+        &_justified {
+            > #{$item-selector} {
+                width: 100%;
+            }
+        }
+
+        #{$item-selector} + #{$item-selector} {
+            margin-left: calc(-1 * #{var(--kbq-size-border-width)});
+        }
+
+        & > #{$item-selector}:first-child:not(:last-child) {
+            @include border-right-radius(0);
+        }
+
+        & > #{$item-selector}:last-child:not(:first-child) {
+            @include border-left-radius(0);
+        }
+
+        & > #{$item-selector}:not(:first-child):not(:last-child) {
+            border-radius: 0;
+        }
+    }
+}
+
+@mixin vertical-group($item-selector: kbq-group-item) {
+    & {
+        display: flex;
+        flex-direction: column;
+
+        > #{$item-selector} {
+            &:first-child:not(:last-child) {
+                @include border-bottom-radius(0);
+
+                border-top-right-radius: var(--kbq-size-border-radius);
+            }
+
+            &:last-child:not(:first-child) {
+                @include border-top-radius(0);
+
+                border-bottom-left-radius: var(--kbq-size-border-radius);
+            }
+
+            &:not(:first-child):not(:last-child) {
+                border-radius: 0;
+            }
+        }
+
+        #{$item-selector} + #{$item-selector} {
+            margin-top: calc(-1 * #{var(--kbq-size-border-width)});
+        }
+    }
+}

package/core/styles/common/_groups.scss

@@ -1,3 +1,5 @@
+@use './groups-mixins';
+
 @mixin border-top-radius($radius) {
     border-top: {
         right-radius: $radius;
@@ -27,38 +29,21 @@
 }
 
 .kbq-group {
-    display: flex;
-    flex-direction: row;
-
-    .kbq-group_justified {
-        > .kbq-group-item {
-            width: 100%;
-        }
-    }
-
-    .kbq-group-item + .kbq-group-item {
-        margin-left: calc(-1 * #{var(--kbq-size-border-width)});
-    }
+    @include groups-mixins.group();
 
     & > .kbq-group-item:first-child:not(:last-child) {
-        @include border-right-radius(0);
-
         > .kbq-form-field__container {
             @include border-right-radius(0);
         }
     }
 
     & > .kbq-group-item:last-child:not(:first-child) {
-        @include border-left-radius(0);
-
         > .kbq-form-field__container {
             @include border-left-radius(0);
         }
     }
 
     & > .kbq-group-item:not(:first-child):not(:last-child) {
-        border-radius: 0;
-
         > .kbq-form-field__container {
             border-radius: 0;
         }
@@ -66,40 +51,25 @@
 }
 
 .kbq-vertical-group {
-    display: flex;
-    flex-direction: column;
+    @include groups-mixins.vertical-group();
 
     > .kbq-group-item {
         &:first-child:not(:last-child) {
-            @include border-bottom-radius(0);
-
-            border-top-right-radius: var(--kbq-size-border-radius);
-
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
             }
         }
 
         &:last-child:not(:first-child) {
-            @include border-top-radius(0);
-
-            border-bottom-left-radius: var(--kbq-size-border-radius);
-
             > .kbq-form-field__container {
                 @include border-top-radius(0);
             }
         }
 
         &:not(:first-child):not(:last-child) {
-            border-radius: 0;
-
             > .kbq-form-field__container {
                 border-radius: 0;
             }
         }
     }
-
-    .kbq-group-item + .kbq-group-item {
-        margin-top: calc(-1 * #{var(--kbq-size-border-width)});
-    }
 }

package/core/styles/common/_overlay.scss

@@ -9,7 +9,7 @@ $overlay-backdrop-z-index: 1000 !default;
 $overlay-backdrop-color: rgba(0, 0, 0, 0.5) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
-$backdrop-animation-duration: 400ms !default;
+$backdrop-animation-duration: 300ms !default;
 $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
 /// Emits structural styles required for cdk/overlay to function.
@@ -75,6 +75,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         // todo перепроверить
         margin: 0;
         padding: 0;
+
+        &.cdk-overlay-pane_ignore-pointer-events {
+            pointer-events: none !important;
+        }
     }
 
     .cdk-overlay-backdrop {

package/core/styles/common/_select.scss

@@ -182,10 +182,14 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: center;
         box-sizing: border-box;
 
         position: relative;
 
+        margin-bottom: var(--kbq-size-3xl);
+        margin-top: var(--kbq-size-3xl);
+
         max-width: 100%;
         height: var(--kbq-option-size-height, var(--kbq-size-3xl));
 

package/core/styles/theming/scrollbar-tokens.scss

@@ -6,9 +6,9 @@
     --kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
     --kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
     /* THEME TOKENS */
-    --kbq-scrollbar-thumb-default-background: var(--kbq-palette-grey-50-a32);
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-palette-grey-50-a48);
-    --kbq-scrollbar-thumb-active-background: var(--kbq-palette-grey-20-a55);
+    --kbq-scrollbar-thumb-default-background: var(--kbq-semantic-contrast-a3, var(--kbq-palette-grey-50-a32));
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-contrast-a4, var(--kbq-palette-grey-50-a48));
+    --kbq-scrollbar-thumb-active-background: var(--kbq-semantic-contrast-a5, var(--kbq-palette-grey-20-a55));
     --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
     --kbq-scrollbar-track-default-border: transparent;
     --kbq-scrollbar-track-default-background: transparent;
@@ -19,7 +19,7 @@
 }
 
 :where(.kbq-dark .kbq-scrollbar) {
-    --kbq-scrollbar-thumb-default-background: var(--kbq-palette-grey-50-a48);
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-palette-grey-50-a60);
-    --kbq-scrollbar-thumb-active-background: var(--kbq-palette-grey-50-a80);
+    --kbq-scrollbar-thumb-default-background: var(--kbq-semantic-dark-contrast-a9, var(--kbq-palette-grey-50-a48));
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-dark-contrast-a10, var(--kbq-palette-grey-50-a60));
+    --kbq-scrollbar-thumb-active-background: var(--kbq-semantic-dark-contrast-a11, var(--kbq-palette-grey-50-a80));
 }

package/core/styles/visual/_layout.scss

@@ -2,8 +2,6 @@
 
 @use '../../styles/common/rtl';
 
-@use '../common/tokens' as *;
-
 /*
 *  Responsive attributes
 *

package/core/utils/utils.d.ts

@@ -5,6 +5,8 @@ export declare const isUndefined: (value: unknown) => value is undefined;
 export declare const isNull: (value: unknown) => value is null;
 /** Whether the value is HTMLElement. */
 export declare const isHtmlElement: (value: unknown) => value is HTMLElement;
+/** Whether the value is Element. */
+export declare const isElement: (value: unknown) => value is Element;
 /** Whether the value is HTMLElement or null. */
 export declare const isHtmlElementOrNull: (value: unknown) => value is HTMLElement | null;
 /**

package/datepicker/datepicker-input.directive.d.ts

@@ -49,6 +49,7 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     protected readonly formField: KbqFormField | null;
     /** @docs-private */
     protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    private readonly useLegacyValidation;
     /** @docs-private */
     protected readonly externalConfiguration: unknown;
     protected configuration: any;

package/dropdown/dropdown-trigger.directive.d.ts

@@ -33,6 +33,8 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private _dir;
     private changeDetectorRef;
     private focusMonitor?;
+    private readonly overlayContainer;
+    private readonly renderer;
     protected readonly isBrowser: boolean;
     private readonly window;
     lastDestroyReason: DropdownCloseReason;
@@ -67,6 +69,7 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private overlayRef;
     private closeSubscription;
     private hoverSubscription;
+    private classAddedToOverlayContainer;
     constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parent: KbqDropdown, dropdownItemInstance: KbqDropdownItem, _dir: Directionality, changeDetectorRef: ChangeDetectorRef, focusMonitor?: FocusMonitor | undefined);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
@@ -137,6 +140,8 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     /** Gets the portal that should be attached to the overlay. */
     private getPortal;
     private getWidth;
+    private addClassToOverlayContainer;
+    private removeClassFromOverlayContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownTrigger, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownTrigger, "[kbqDropdownTriggerFor]", ["kbqDropdownTrigger"], { "offsetX": { "alias": "offsetX"; "required": false; }; "offsetY": { "alias": "offsetY"; "required": false; }; "data": { "alias": "kbqDropdownTriggerData"; "required": false; }; "openByArrowDown": { "alias": "openByArrowDown"; "required": false; }; "restoreFocus": { "alias": "kbqDropdownTriggerRestoreFocus"; "required": false; }; "dropdown": { "alias": "kbqDropdownTriggerFor"; "required": false; }; }, { "dropdownOpened": "dropdownOpened"; "dropdownClosed": "dropdownClosed"; }, never, never, true, never>;
     static ngAcceptInputType_offsetX: unknown;

package/dropdown/dropdown.component.d.ts

@@ -15,6 +15,7 @@ export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel,
     private elementRef;
     private ngZone;
     private defaultOptions;
+    private search?;
     navigationWithWrap: boolean;
     /** Position of the dropdown in the X axis. */
     get xPosition(): DropdownPositionX;
@@ -121,5 +122,5 @@ export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel,
      */
     private updateDirectDescendants;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdown, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdown, "kbq-dropdown", ["kbqDropdown"], { "navigationWithWrap": { "alias": "navigationWithWrap"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTriggerY": { "alias": "overlapTriggerY"; "required": false; }; "overlapTriggerX": { "alias": "overlapTriggerX"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent", "items"], ["*", "[kbqDropdownStaticContent]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdown, "kbq-dropdown", ["kbqDropdown"], { "navigationWithWrap": { "alias": "navigationWithWrap"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTriggerY": { "alias": "overlapTriggerY"; "required": false; }; "overlapTriggerX": { "alias": "overlapTriggerX"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "closed": "closed"; }, ["search", "lazyContent", "items"], ["*", "[kbqDropdownStaticContent]"], true, never>;
 }

package/ellipsis-center/ellipsis-center.directive.d.ts

@@ -3,7 +3,6 @@ import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {
-    private renderer;
     private cdr;
     set kbqEllipsisCenter(value: string);
     minVisibleLength: number;