@koobiq/components 18.36.0 → 18.37.0

package/list/list-selection.component.d.ts

@@ -23,10 +23,19 @@ export declare class KbqListSelectAllEvent<T> {
     options: T[];
     constructor(source: KbqListSelection, options: T[]);
 }
+/**
+ * Event class that occurs when copying an item from the KbqListSelection.
+ * Used to pass data about the copied item and copy context.
+ *
+ * @param source - instance of KbqListSelection
+ * @param option - instance of KbqListOption
+ * @param event - original keyboard event (optional) that triggered the copy
+ */
 export declare class KbqListCopyEvent<T> {
     source: KbqListSelection;
     option: T;
-    constructor(source: KbqListSelection, option: T);
+    event?: KeyboardEvent | undefined;
+    constructor(source: KbqListSelection, option: T, event?: KeyboardEvent | undefined);
 }
 export declare class KbqListSelection implements AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {
     private elementRef;
@@ -87,6 +96,7 @@ export declare class KbqListSelection implements AfterContentInit, AfterViewInit
     getSelectedOptionValues(): string[];
     toggleFocusedOption(): void;
     canDeselectLast(listOption: KbqListOption): boolean;
+    /** @docs-private */
     getHeight(): number;
     onTouched: () => void;
     removeOptionFromList(option: KbqListOption): void;
@@ -168,6 +178,7 @@ export declare class KbqListOption implements OnDestroy, OnInit, IFocusableOptio
     toggle(): void;
     getLabel(): any;
     setSelected(selected: boolean): void;
+    /** @docs-private */
     getHeight(): number;
     /** Handles click events on the list option. */
     handleClick($event: MouseEvent): void;

package/markdown/_markdown-theme.scss

@@ -1,5 +1,4 @@
 @use '../core/styles/common/tokens' as *;
-
 @use './markdown-tokens';
 
 @mixin kbq-markdown-theme() {

package/markdown/markdown.scss

@@ -1,15 +1,13 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
 
 .kbq-markdown {
     display: block;
 
-    .markdown-input {
+    .kbq-markdown__input {
         display: none;
     }
 
-    .markdown-output {
+    .kbq-markdown__output {
         flex: 1;
 
         & > :first-child {

package/modal/modal-tokens.scss

@@ -8,7 +8,8 @@
     --kbq-modal-size-header-padding-right: var(--kbq-size-6xl);
     --kbq-modal-size-close-button-margin-left: var(--kbq-size-s);
     --kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);
-    --kbq-modal-size-content-padding-top: 0;
+    // Added top padding to prevent the outline of the first focused field from being clipped
+    --kbq-modal-size-content-padding-top: 1px;
     --kbq-modal-size-content-padding-bottom: var(--kbq-size-s);
     --kbq-modal-size-content-padding-top-without-header: var(--kbq-size-xxl);
     --kbq-modal-size-content-padding-bottom-without-footer: var(--kbq-size-4xl);

package/modal/modal-util.d.ts

@@ -1,12 +1,15 @@
+/** @docs-private */
 export interface IClickPosition {
     x: number;
     y: number;
 }
+/** @docs-private */
 export declare class ModalUtil {
-    private document;
+    private document?;
     private lastPosition;
-    constructor(document: Document);
+    constructor(document?: Document | undefined);
     getLastClickPosition(): IClickPosition;
     listenDocumentClick(): void;
 }
+/** @docs-private */
 export declare const modalUtilObject: ModalUtil;

package/modal/modal.scss

@@ -1,9 +1,5 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
-
 @use './modal-confirm';
-
 @use './modal-theme' as *;
 
 .kbq-modal-container {
@@ -21,8 +17,11 @@
 
     list-style: none;
 
+    // DEPRECATED: Unused. Will be removed in next major release.
+    /* stylelint-disable */
     &.zoom-enter,
     &.zoom-appear {
+        /* stylelint-enable */
         animation-duration: 0.3s;
         // reset scale avoid mousePosition bug
         transform: none;

package/navbar/_navbar-item_vertical.scss

@@ -70,6 +70,16 @@
             left: var(--kbq-size-s);
         }
 
+        &.kbq-navbar-bento {
+            padding-top: var(--kbq-size-xl);
+            padding-bottom: var(--kbq-size-m);
+
+            &:after {
+                top: var(--kbq-size-m);
+                bottom: var(--kbq-size-xxs);
+            }
+        }
+
         & .kbq-badge {
             position: absolute;
 

package/navbar/navbar-brand.scss

@@ -76,7 +76,10 @@ a.kbq-navbar-brand {
         height: var(--kbq-size-4xl);
         width: var(--kbq-size-4xl);
 
-        margin: var(--kbq-size-l) var(--kbq-size-l) var(--kbq-size-4xl);
+        margin-top: var(--kbq-size-s);
+        margin-right: var(--kbq-size-l);
+        margin-left: var(--kbq-size-l);
+        margin-bottom: 60px;
 
         flex-direction: column;
 
@@ -97,7 +100,7 @@ a.kbq-navbar-brand {
             position: absolute;
 
             left: var(--kbq-size-xxs);
-            top: var(--kbq-size-4xl);
+            top: var(--kbq-size-6xl);
             max-width: 200px;
         }
     }

package/navbar/vertical-navbar.scss

@@ -13,6 +13,7 @@
 
     & .kbq-navbar-container + .kbq-navbar-container {
         padding-top: var(--kbq-size-xxl);
+        padding-bottom: var(--kbq-size-xxs);
     }
 
     & .kbq-vertical-navbar__container {

package/navbar-ic/navbar-ic-header.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, DestroyRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, DestroyRef } from '@angular/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { KbqNavbarIc } from './navbar-ic';
 import { KbqNavbarIcLogo, KbqNavbarIcTitle } from './navbar-ic-item';
@@ -7,6 +7,7 @@ export declare class KbqNavbarIcHeader extends KbqTooltipTrigger implements Afte
     protected readonly navbar: KbqNavbarIc;
     protected readonly nativeElement: HTMLElement;
     protected readonly destroyRef: DestroyRef;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
     logo: KbqNavbarIcLogo;
     title: KbqNavbarIcTitle;
     get titleText(): string;
@@ -14,5 +15,5 @@ export declare class KbqNavbarIcHeader extends KbqTooltipTrigger implements Afte
     constructor();
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarIcHeader, "kbq-navbar-ic-header, [kbq-navbar-ic-header]", ["kbqNavbarIcHeader"], {}, {}, ["logo", "title"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarIcHeader, "kbq-navbar-ic-header, [kbq-navbar-ic-header]", ["kbqNavbarIcHeader"], {}, {}, ["logo", "title"], ["[kbqNavbarIcLogo]", "[kbqNavbarIcTitle]", "*"], true, never>;
 }

package/navbar-ic/navbar-ic-header.scss

@@ -42,10 +42,6 @@
     &.kbq-navbar-ic-header_interactive {
         cursor: pointer;
     }
-
-    &.kbq-collapsed .kbq-navbar-ic-title {
-        display: none;
-    }
 }
 
 a.kbq-navbar-ic-header {

package/navbar-ic/navbar-ic-item.d.ts

@@ -78,6 +78,7 @@ export declare class KbqNavbarIcFocusableItem implements AfterContentInit, After
 }
 export declare class KbqNavbarIcItem extends KbqTooltipTrigger implements AfterContentInit {
     readonly rectangleElement: KbqRectangleItem;
+    readonly navbar: KbqNavbarIc;
     readonly navbarFocusableItem: KbqNavbarIcFocusableItem;
     private changeDetectorRef;
     private dropdownTrigger;

package/navbar-ic/navbar-ic-item.scss

@@ -23,10 +23,6 @@
             top: 0;
             right: 0;
         }
-
-        & .kbq-navbar-ic-item__title-container {
-            display: none;
-        }
     }
 
     & > .kbq-icon {

package/navbar-ic/navbar-ic.animation.d.ts

@@ -1,2 +1,3 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 export declare function toggleNavbarIcAnimation(): AnimationTriggerMetadata;
+export declare function toggleNavbarIcItemAnimation(): AnimationTriggerMetadata;

package/navbar-ic/navbar-ic.d.ts

@@ -8,6 +8,10 @@ export declare enum KbqExpandEvents {
     toggle = 0,
     hoverOrFocus = 1
 }
+/** minimum timeout to use KBQ_ENTER_DELAY */
+export declare const KBQ_MIN_TIMEOUT_FOR_ENTER_DELAY = 2000;
+/** delay before open navbar-ic */
+export declare const KBQ_ENTER_DELAY = 400;
 /** default configuration of navbar-ic */
 /** @docs-private */
 export declare const KBQ_NAVBAR_IC_DEFAULT_CONFIGURATION: {
@@ -58,6 +62,7 @@ export declare class KbqNavbarIc extends KbqFocusable implements AfterContentIni
     /** @docs-private */
     protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
     readonly externalConfiguration: unknown;
+    readonly state: BehaviorSubject<"expanded" | "collapsed" | null>;
     configuration: any;
     /** @docs-private */
     rectangleElements: import("@angular/core").Signal<readonly any[]>;
@@ -85,12 +90,14 @@ export declare class KbqNavbarIc extends KbqFocusable implements AfterContentIni
     get expandedByToggle(): boolean;
     get expandedByHoverOrFocus(): boolean;
     get currentWidth(): number;
+    private lastOpeningTime;
     constructor();
     /** @docs-private */
     ngAfterContentInit(): void;
     toggle(): void;
     /** @docs-private */
     onKeyDown(event: KeyboardEvent): void;
+    private getExpandDelay;
     protected updateTooltipForItems: () => void;
     protected updateExpandedStateForItems: () => void;
     protected updateItemExpandedState: (item: KbqNavbarIcItem) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.36.0",
+    "version": "18.37.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.36.0",
-        "@koobiq/angular-moment-adapter": "18.36.0",
-        "@koobiq/angular-luxon-adapter": "18.36.0",
+        "@koobiq/cdk": "18.37.0",
+        "@koobiq/angular-moment-adapter": "18.37.0",
+        "@koobiq/angular-luxon-adapter": "18.37.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",
@@ -100,18 +100,18 @@
             "esm": "./esm2022/badge/koobiq-components-badge.mjs",
             "default": "./fesm2022/koobiq-components-badge.mjs"
         },
-        "./button": {
-            "types": "./button/index.d.ts",
-            "esm2022": "./esm2022/button/koobiq-components-button.mjs",
-            "esm": "./esm2022/button/koobiq-components-button.mjs",
-            "default": "./fesm2022/koobiq-components-button.mjs"
-        },
         "./breadcrumbs": {
             "types": "./breadcrumbs/index.d.ts",
             "esm2022": "./esm2022/breadcrumbs/koobiq-components-breadcrumbs.mjs",
             "esm": "./esm2022/breadcrumbs/koobiq-components-breadcrumbs.mjs",
             "default": "./fesm2022/koobiq-components-breadcrumbs.mjs"
         },
+        "./button": {
+            "types": "./button/index.d.ts",
+            "esm2022": "./esm2022/button/koobiq-components-button.mjs",
+            "esm": "./esm2022/button/koobiq-components-button.mjs",
+            "default": "./fesm2022/koobiq-components-button.mjs"
+        },
         "./button-toggle": {
             "types": "./button-toggle/index.d.ts",
             "esm2022": "./esm2022/button-toggle/koobiq-components-button-toggle.mjs",
@@ -304,6 +304,12 @@
             "esm": "./esm2022/radio/koobiq-components-radio.mjs",
             "default": "./fesm2022/koobiq-components-radio.mjs"
         },
+        "./resizer": {
+            "types": "./resizer/index.d.ts",
+            "esm2022": "./esm2022/resizer/koobiq-components-resizer.mjs",
+            "esm": "./esm2022/resizer/koobiq-components-resizer.mjs",
+            "default": "./fesm2022/koobiq-components-resizer.mjs"
+        },
         "./risk-level": {
             "types": "./risk-level/index.d.ts",
             "esm2022": "./esm2022/risk-level/koobiq-components-risk-level.mjs",

package/popover/popover-tokens.scss

@@ -10,6 +10,7 @@
     --kbq-popover-size-header-padding-horizontal: var(--kbq-size-xxl);
     --kbq-popover-size-header-padding-top: var(--kbq-size-l);
     --kbq-popover-size-header-padding-bottom: var(--kbq-size-xs);
+    // Added top padding to prevent the outline of the first focused field from being clipped
     --kbq-popover-size-content-padding-top: var(--kbq-size-xxl);
     --kbq-popover-size-content-padding-bottom: var(--kbq-size-3xl);
     --kbq-popover-size-content-padding-horizontal: var(--kbq-size-xxl);

package/popover/popover.component.d.ts

@@ -71,6 +71,10 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     private _size;
     get customClass(): string;
     set customClass(value: string);
+    /** Context for popover templates (kbqPopoverHeader, kbqPopoverContent and kbqPopoverFooter). */
+    get context(): unknown;
+    set context(ctx: unknown);
+    private _context;
     get hasCloseButton(): boolean;
     set hasCloseButton(value: boolean);
     private _hasCloseButton;
@@ -104,7 +108,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
     private hideIfNotInViewPort;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "context": { "alias": "kbqPopoverContext"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
     static ngAcceptInputType_preventClose: unknown;
     static ngAcceptInputType_defaultPaddings: unknown;
     static ngAcceptInputType_arrow: unknown;

package/popover/popover.scss

@@ -6,7 +6,9 @@
 @use './popover-theme' as *;
 
 $arrow-size: 12px;
-$trigger-margin: 9px;
+
+$arrow-offset: calc(($arrow-size - 1px) / -2);
+$arrow-padding: 24px;
 
 .kbq-popover {
     position: relative;
@@ -130,9 +132,6 @@ $trigger-margin: 9px;
     transform: rotate(45deg);
 }
 
-$arrow-offset: calc(($arrow-size - 1px) / -2);
-$arrow-padding: calc(18px - $trigger-margin);
-
 @include pop-up.popup-arrow-positions(kbq-popover, $arrow-offset, $arrow-padding);
 
 .kbq-popover__close {