@koobiq/components 19.4.1 → 19.5.0

package/core/locales/locale-service.d.ts

@@ -140,6 +140,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {
@@ -350,6 +352,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {
@@ -556,6 +560,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {
@@ -768,6 +774,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {
@@ -976,6 +984,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {

package/core/locales/pt-BR.d.ts

@@ -94,6 +94,8 @@ export declare const ptBRLocaleData: {
     clampedText: {
         openText: string;
         closeText: string;
+        showMoreText: string;
+        moreText: string;
     };
     navbarIc: {
         toggle: {

package/core/locales/ru-RU.d.ts

@@ -95,6 +95,8 @@ export declare const ruRULocaleData: {
     clampedText: {
         openText: string;
         closeText: string;
+        showMoreText: string;
+        moreText: string;
     };
     navbarIc: {
         toggle: {

package/core/locales/tk-TM.d.ts

@@ -95,6 +95,8 @@ export declare const tkTMLocaleData: {
     clampedText: {
         openText: string;
         closeText: string;
+        showMoreText: string;
+        moreText: string;
     };
     navbarIc: {
         toggle: {

package/core/locales/types.d.ts

@@ -34,6 +34,8 @@ export type KbqNumberInputLocaleConfig = {
 export type KbqClampedTextLocaleConfig = {
     openText: string;
     closeText: string;
+    showMoreText: string;
+    moreText: string;
 };
 /** Locale configuration for `KbqTimeRange` */
 export type KbqTimeRangeLocaleConfig = {

package/core/option/_option-theme.scss

@@ -25,11 +25,6 @@
             @include kbq-option(states-hover);
         }
 
-        &.kbq-active:not(.kbq-disabled),
-        &:active:not(.kbq-disabled) {
-            @include kbq-option(states-active);
-        }
-
         &.kbq-selected:not(.kbq-disabled) {
             @include kbq-option(states-selected);
 
@@ -37,23 +32,18 @@
             &:hover {
                 @include kbq-option(states-selected-hover);
             }
-
-            &.kbq-active,
-            &:active {
-                @include kbq-option(states-selected-active);
-            }
         }
 
         &.kbq-disabled {
             @include kbq-option(states-disabled);
         }
 
-        &:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
+        &:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
 
-        &:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
+        &:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
@@ -63,18 +53,15 @@
         &.kbq-selected:not(.kbq-disabled) {
             @include kbq-option(multiple-states-selected);
 
+            &.kbq-hovered,
             &:hover {
                 @include kbq-option(multiple-states-selected-hover);
             }
-
-            &:active {
-                @include kbq-option(multiple-states-selected-active);
-            }
         }
     }
 
     .cdk-keyboard-focused {
-        .kbq-option.kbq-focused {
+        .kbq-option.kbq-active {
             border-color: var(--kbq-list-states-focused-focus-outline-color);
         }
     }

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/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;
@@ -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/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/_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.

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