@koobiq/components 18.36.0 → 18.38.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

@@ -1,81 +1,78 @@
 @use '../core/styles/common/tokens' as *;
 
 .kbq-navbar-item.kbq-vertical {
+    height: 41px;
+
     & .kbq-navbar-item__container {
         gap: var(--kbq-size-m);
     }
 
-    &.kbq-expanded {
-        height: var(--kbq-size-5xl);
+    padding-right: var(--kbq-size-xl);
+    padding-left: var(--kbq-size-xl);
+
+    &:after {
+        top: 0;
+        right: var(--kbq-size-s);
+        bottom: 1px;
+        left: var(--kbq-size-s);
+    }
 
+    &.kbq-navbar-bento {
+        display: flex;
+
+        justify-content: start;
         align-items: center;
 
-        padding-right: var(--kbq-size-xl);
-        padding-left: var(--kbq-size-xl);
+        height: var(--kbq-size-5xl);
 
-        gap: var(--kbq-size-m);
+        padding-top: var(--kbq-size-s);
 
         &:after {
-            top: var(--kbq-size-xxs);
-            right: var(--kbq-size-s);
-            bottom: var(--kbq-size-xxs);
-            left: var(--kbq-size-s);
+            top: var(--kbq-size-s);
+            bottom: 0;
         }
+    }
 
-        &.kbq-navbar-bento {
-            position: absolute;
+    &.kbq-expanded {
+        align-items: center;
 
-            display: flex;
+        gap: var(--kbq-size-m);
 
-            justify-content: center;
+        &.kbq-navbar-item_has-nested {
             align-items: center;
 
-            top: var(--kbq-size-xxs);
-            right: var(--kbq-size-xxs);
-
-            z-index: 1;
-
-            padding: var(--kbq-size-s);
-
-            height: var(--kbq-size-5xl);
-            width: var(--kbq-size-5xl);
+            padding: 0 var(--kbq-size-m);
+        }
 
-            &:after {
-                top: var(--kbq-size-s);
-                right: var(--kbq-size-s);
-                bottom: var(--kbq-size-s);
-                left: var(--kbq-size-s);
-            }
+        &.kbq-navbar-bento .kbq-navbar-item__title {
+            margin-left: -8px;
+            opacity: 0;
         }
 
-        &.kbq-navbar-item_has-nested {
-            align-items: center;
+        &.kbq-navbar-bento:hover,
+        &.kbq-navbar-bento.cdk-keyboard-focused {
+            & .kbq-navbar-item__title {
+                margin-left: 0;
+                opacity: 1;
 
-            padding: 0 var(--kbq-size-m);
+                transition:
+                    opacity 150ms ease-out,
+                    margin-left 150ms ease-out;
+            }
         }
     }
 
     &.kbq-collapsed {
-        height: var(--kbq-size-5xl);
-        width: var(--kbq-size-5xl);
-
-        padding: var(--kbq-size-l);
+        width: var(--kbq-size-6xl);
 
         justify-content: center;
 
-        &:after {
-            top: var(--kbq-size-s);
-            right: var(--kbq-size-s);
-            bottom: var(--kbq-size-s);
-            left: var(--kbq-size-s);
-        }
-
         & .kbq-badge {
             position: absolute;
 
             z-index: 1;
 
-            top: var(--kbq-size-xs);
+            top: calc(-1 * var(--kbq-size-3xs));
             right: var(--kbq-size-xs);
         }
 
@@ -90,3 +87,7 @@
         align-items: center;
     }
 }
+
+button.kbq-navbar-item.kbq-vertical {
+    width: 100%;
+}

package/navbar/_navbar-theme.scss

@@ -21,24 +21,30 @@
     }
 }
 
+button {
+    &.kbq-navbar-item,
+    &.kbq-navbar-brand {
+        background: transparent;
+        border: none;
+    }
+}
+
 @mixin kbq-navbar-theme() {
-    .kbq-navbar,
-    .kbq-vertical-navbar .kbq-vertical-navbar__container {
+    .kbq-navbar {
         background-color: var(--kbq-navbar-background);
     }
 
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
+        background-color: var(--kbq-navbar-vertical-background);
         border-right: 1px solid var(--kbq-navbar-border);
     }
 
-    .kbq-navbar-item,
-    .kbq-navbar-brand,
-    .kbq-navbar-toggle {
+    .kbq-navbar-item {
         cursor: pointer;
 
         @include kbq-navbar-item(default);
 
-        &:hover:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
+        &:hover:not(.kbq-disabled) {
             @include kbq-navbar-item(states-hover);
         }
 
@@ -51,8 +57,8 @@
             }
         }
 
-        &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),
-        &.kbq-active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
+        &:active:not(.kbq-disabled),
+        &.kbq-active:not(.kbq-disabled) {
             @include kbq-navbar-item(states-selected);
         }
 
@@ -68,40 +74,13 @@
         }
     }
 
-    .kbq-navbar-brand.kbq-vertical:hover {
-        .kbq-navbar-logo {
-            transform: scale(1.06);
-        }
-    }
-
-    .kbq-navbar-brand.kbq-horizontal:hover {
-        .kbq-navbar-logo {
-            z-index: 1;
-        }
-    }
-
     .kbq-navbar-divider {
         background: var(--kbq-line-contrast-less);
     }
 }
 
-button {
-    &.kbq-navbar-item,
-    &.kbq-navbar-brand,
-    &.kbq-navbar-toggle {
-        background: transparent;
-        border: none;
-    }
-}
-
 @mixin kbq-navbar-typography() {
     .kbq-navbar-title {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
-
-    .kbq-navbar-brand {
-        .kbq-navbar-title {
-            @include kbq-typography-level-to-styles-css-variables(typography, navbar-title);
-        }
-    }
 }

package/navbar/navbar-brand.component.d.ts

@@ -0,0 +1,39 @@
+import { AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { KbqNavbarFocusableItem, KbqNavbarRectangleElement, KbqNavbarTitle } from './navbar-item.component';
+import * as i0 from "@angular/core";
+export declare class KbqNavbarBrand extends KbqTooltipTrigger implements AfterContentInit {
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    /** @docs-private */
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly rectangleElement: KbqNavbarRectangleElement;
+    /** @docs-private */
+    protected readonly navbarFocusableItem: KbqNavbarFocusableItem;
+    /** @docs-private */
+    title: KbqNavbarTitle;
+    /** alternative display of the brand name in two lines */
+    longTitle: boolean;
+    /** text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title. */
+    collapsedText: string;
+    get isLink(): boolean;
+    /** @docs-private */
+    get croppedText(): string;
+    /** @docs-private */
+    get hasCroppedText(): boolean;
+    /** @docs-private */
+    get titleText(): string | null;
+    /** @docs-private */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @docs-private */
+    get collapsed(): boolean;
+    set collapsed(value: boolean);
+    private _collapsed;
+    constructor();
+    ngAfterContentInit(): void;
+    private updateTooltip;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["kbqNavbarBrand"], { "longTitle": { "alias": "longTitle"; "required": false; }; "collapsedText": { "alias": "collapsedText"; "required": false; }; }, {}, ["title"], ["*"], false, never>;
+}

package/navbar/navbar-brand.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
+@use './navbar-theme';
 
 .kbq-navbar-logo {
     display: flex;
@@ -50,6 +51,18 @@ a.kbq-navbar-brand {
 }
 
 .kbq-navbar-brand.kbq-vertical {
+    flex-direction: row;
+    align-items: center;
+
+    padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);
+
+    &:after {
+        top: 0;
+        right: var(--kbq-size-s);
+        bottom: var(--kbq-size-s);
+        left: var(--kbq-size-s);
+    }
+
     & .kbq-navbar-logo {
         align-items: center;
     }
@@ -58,65 +71,85 @@ a.kbq-navbar-brand {
         display: block;
         align-items: center;
 
-        padding-top: var(--kbq-size-xxs);
-        padding-bottom: var(--kbq-size-xxs);
-
-        height: var(--kbq-size-3xl);
-
-        padding-left: 0;
-
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
+        padding-left: var(--kbq-size-s);
     }
 
     &.kbq-expanded {
-        position: relative;
-
-        height: var(--kbq-size-4xl);
-        width: var(--kbq-size-4xl);
-
-        margin: var(--kbq-size-l) var(--kbq-size-l) var(--kbq-size-4xl);
-
-        flex-direction: column;
-
-        &:after {
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+        & .kbq-navbar-title {
+            max-width: 200px;
         }
+    }
 
-        & .kbq-navbar-logo {
-            min-height: var(--kbq-size-4xl);
-
-            justify-content: center;
+    &.kbq-collapsed {
+        & .kbq-navbar-title {
+            display: none !important;
         }
+    }
 
-        & .kbq-navbar-title {
-            position: absolute;
+    &.kbq-navbar-brand_long-title .kbq-navbar-title {
+        display: -webkit-box;
 
-            left: var(--kbq-size-xxs);
-            top: var(--kbq-size-4xl);
-            max-width: 200px;
-        }
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        white-space: normal;
     }
+}
 
-    &.kbq-collapsed {
-        height: var(--kbq-size-5xl);
-        width: var(--kbq-size-5xl);
-
-        &:after {
-            top: var(--kbq-size-xxs);
-            right: var(--kbq-size-xxs);
-            bottom: var(--kbq-size-xxs);
-            left: var(--kbq-size-xxs);
+@mixin kbq-navbar-brand-theme() {
+    .kbq-navbar-brand {
+        @include navbar-theme.kbq-navbar-item(default);
+
+        &.kbq-navbar-brand_link {
+            cursor: pointer;
+
+            &:hover:not(.kbq-disabled) {
+                @include navbar-theme.kbq-navbar-item(states-hover);
+            }
+
+            &.cdk-focused.cdk-keyboard-focused {
+                outline: none;
+
+                &:after {
+                    display: block;
+                    box-shadow: inset 0 0 0 2px var(--kbq-states-line-focus-theme);
+                }
+            }
+
+            &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),
+            &.kbq-active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
+                @include navbar-theme.kbq-navbar-item(states-selected);
+            }
+
+            &.kbq-vertical:hover {
+                .kbq-navbar-logo {
+                    transform: scale(1.06);
+                }
+            }
+
+            &.kbq-horizontal:hover {
+                .kbq-navbar-logo {
+                    z-index: 1;
+                }
+            }
         }
 
+        &.kbq-navbar-focusable-item {
+            outline: none;
+        }
+    }
+}
+
+@mixin kbq-navbar-brand-typography() {
+    .kbq-navbar-brand {
         & .kbq-navbar-title {
-            display: none;
+            @include kbq-typography-level-to-styles-css-variables(typography, navbar-title);
         }
 
-        justify-content: center;
+        &.kbq-navbar-brand_long-title .kbq-navbar-title {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal-strong);
+        }
     }
 }
+
+@include kbq-navbar-brand-theme();
+@include kbq-navbar-brand-typography();

package/navbar/navbar-divider.scss

@@ -7,7 +7,7 @@
 .kbq-navbar-divider.kbq-vertical {
     height: 1px;
 
-    margin: var(--kbq-size-s) var(--kbq-size-l);
+    margin: var(--kbq-size-xs) var(--kbq-size-l);
 }
 
 .kbq-navbar-divider.kbq-horizontal {

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

@@ -1,13 +1,12 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqFormField } from '@koobiq/components/form-field';
 import { KbqIcon } from '@koobiq/components/icon';
-import { KbqTooltipTrigger, TooltipModifier } from '@koobiq/components/tooltip';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
-import { KbqVerticalNavbar } from './vertical-navbar.component';
 import * as i0 from "@angular/core";
 export interface KbqNavbarFocusableItemEvent {
     item: KbqNavbarFocusableItem;
@@ -36,18 +35,6 @@ export declare class KbqNavbarTitle implements AfterViewInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarTitle, "kbq-navbar-title, [kbq-navbar-title]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqNavbarBrand implements AfterContentInit {
-    private navbar;
-    logo: KbqNavbarLogo;
-    title: KbqNavbarTitle;
-    hovered: boolean;
-    get hasBento(): boolean;
-    private readonly destroyRef;
-    constructor(navbar: KbqVerticalNavbar);
-    ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["kbqNavbarBrand"], {}, {}, ["logo", "title"], ["*"], false, never>;
-}
 export declare class KbqNavbarDivider {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarDivider, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarDivider, "kbq-navbar-divider", never, {}, {}, never, never, false, never>;
@@ -112,7 +99,6 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     private changeDetectorRef;
     private dropdownTrigger;
     private bento;
-    private tooltip;
     title: KbqNavbarTitle;
     icon: KbqIcon;
     collapsedText: string;
@@ -132,29 +118,11 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     get showVerticalDropDownAngle(): boolean;
     get showHorizontalDropDownAngle(): boolean;
     get hasCroppedText(): boolean;
-    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento, tooltip: KbqTooltipTrigger);
+    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
     ngAfterContentInit(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "*"], false, never>;
 }
-export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
-    navbar: KbqVerticalNavbar;
-    private changeDetectorRef;
-    protected readonly document: Document;
-    private readonly window;
-    customIcon: KbqIcon;
-    get content(): string | TemplateRef<any>;
-    set content(content: string | TemplateRef<any>);
-    get disabled(): boolean;
-    protected modifier: TooltipModifier;
-    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef);
-    onKeydown($event: KeyboardEvent): void;
-    ngOnDestroy(): void;
-    toggle: () => void;
-    private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
-}

package/navbar/navbar-toggle.component.d.ts

@@ -0,0 +1,23 @@
+import { OnDestroy } from '@angular/core';
+import { KbqVerticalNavbar } from './vertical-navbar.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+import * as i2 from "@koobiq/components/tooltip";
+export declare class KbqNavbarToggle implements OnDestroy {
+    private readonly window;
+    private readonly ngZone;
+    private readonly changeDetectorRef;
+    private readonly tooltip;
+    /** @docs-private */
+    protected readonly navbar: KbqVerticalNavbar;
+    constructor();
+    ngOnDestroy(): void;
+    /** @docs-private */
+    keydownHandler($event: KeyboardEvent): void;
+    /** toggles the state of the navbar */
+    toggle(): void;
+    private updateTooltipContent;
+    private windowToggleHandler;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle, [kbq-navbar-toggle]", never, {}, {}, never, ["[kbq-icon]"], false, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }, { directive: typeof i2.KbqTooltipTrigger; inputs: {}; outputs: {}; }]>;
+}