@koobiq/components 18.34.0 → 18.36.0

package/inline-edit/inline-edit.scss

@@ -0,0 +1,208 @@
+@use 'sass:map';
+
+@use '../core/styles/common/tokens';
+
+@mixin _mask($config) {
+    & {
+        position: relative;
+    }
+
+    .kbq-mask {
+        display: flex;
+        position: absolute;
+
+        @if (map.get($config, 'top')) {
+            top: map.get($config, 'top');
+        }
+
+        @if (map.get($config, 'right')) {
+            right: map.get($config, 'right');
+        }
+
+        @if (map.get($config, 'bottom')) {
+            bottom: map.get($config, 'bottom');
+        }
+
+        @if (map.get($config, 'left')) {
+            left: map.get($config, 'left');
+        }
+
+        .kbq-mask__fade {
+            background: var(--kbq-mask-background, transparent);
+            mask-image: linear-gradient(90deg, transparent, var(--kbq-black-default));
+        }
+
+        .kbq-mask__container {
+            background: var(--kbq-mask-background, transparent);
+        }
+    }
+}
+
+@mixin _inline-edit-theme {
+    &.kbq-inline-edit_view {
+        &:not(.kbq-inline-edit_disabled) {
+            &:hover {
+                --kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);
+                --kbq-mask-background: var(--kbq-states-background-contrast-less-hover);
+
+                cursor: pointer;
+            }
+
+            &:active,
+            &:has(.kbq-inline-edit__menu.kbq-active) {
+                --kbq-inline-edit-background: var(--kbq-states-background-transparent-active);
+                --kbq-mask-background: var(--kbq-states-background-contrast-less-active);
+            }
+        }
+
+        &.kbq-inline-edit_disabled {
+            &:hover,
+            &:has(.kbq-inline-edit__menu.kbq-active) {
+                --kbq-mask-background: var(--kbq-background-bg);
+            }
+        }
+    }
+
+    .kbq-label {
+        color: var(--kbq-inline-edit-label-color);
+    }
+
+    .kbq-inline-edit__focus_container {
+        background: var(--kbq-inline-edit-background);
+        border-color: var(--kbq-inline-edit-background);
+
+        &:focus-visible {
+            outline: none;
+        }
+
+        &.cdk-keyboard-focused {
+            $focused-color: var(--kbq-states-line-focus-theme);
+            outline: 1px solid $focused-color;
+            border-color: $focused-color;
+        }
+    }
+}
+
+@mixin _inline-edit-typography {
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+}
+
+.kbq-inline-edit {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: var(--kbq-size-border-radius);
+    padding: var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);
+    min-height: var(--kbq-inline-edit-height);
+    box-sizing: border-box;
+
+    @include _inline-edit-theme();
+    @include _inline-edit-typography();
+
+    &:not(.kbq-inline-edit_with-label) {
+        --kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width));
+    }
+
+    &.kbq-inline-edit_with-label {
+        padding-top: var(--kbq-inline-edit-padding-vertical);
+        padding-bottom: var(--kbq-inline-edit-padding-vertical);
+
+        &.kbq-inline-edit_edit {
+            .kbq-inline-edit__view-container {
+                position: relative;
+            }
+        }
+
+        .kbq-inline-edit__label {
+            margin-bottom: var(--kbq-size-3xs);
+        }
+    }
+
+    &.kbq-inline-edit_view {
+        .kbq-inline-edit__view-container {
+            text-overflow: ellipsis;
+        }
+    }
+
+    &:hover,
+    &.cdk-keyboard-focused {
+        .kbq-inline-edit__menu-mask {
+            opacity: 1;
+        }
+    }
+
+    .kbq-inline-edit__placeholder {
+        color: var(--kbq-foreground-contrast-secondary);
+    }
+
+    @include _mask(
+        (
+            'top': 0,
+            'right': 0
+        )
+    );
+
+    .kbq-inline-edit__menu-mask {
+        opacity: 0;
+        height: 100%;
+        justify-content: flex-end;
+        border-top-right-radius: var(--kbq-size-border-radius);
+        border-bottom-right-radius: var(--kbq-size-border-radius);
+
+        &:has(.kbq-inline-edit__menu.kbq-pressed, .kbq-inline-edit__menu.cdk-keyboard-focused) {
+            opacity: 1;
+        }
+
+        .kbq-inline-edit__menu-mask-fade {
+            width: 32px;
+        }
+
+        .kbq-inline-edit__menu-mask-container {
+            display: flex;
+            justify-content: flex-end;
+            min-width: 40px;
+            border-radius: inherit;
+        }
+
+        .kbq-inline-edit__menu {
+            display: inline-flex;
+            align-self: flex-start;
+            padding: var(--kbq-size-s);
+            z-index: 2;
+        }
+    }
+
+    .kbq-inline-edit__focus_container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(100% - 2 * var(--kbq-size-border-width));
+        height: calc(100% - 2 * var(--kbq-size-border-width));
+        border: var(--kbq-size-border-width) solid transparent;
+        border-radius: var(--kbq-size-border-radius);
+        // set z-index to hide mask borders
+        z-index: 1;
+    }
+}
+
+.kbq-inline-edit__panel {
+    width: 100%;
+
+    .kbq-inline-edit__control-container {
+        border-radius: var(--kbq-size-border-radius);
+    }
+
+    .kbq-inline-edit__action-buttons {
+        position: absolute;
+        left: calc(-1 * var(--kbq-inline-edit-padding-horizontal));
+        display: inline-flex;
+        flex-direction: row;
+        gap: var(--kbq-size-xxs);
+        padding: var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s);
+    }
+
+    .kbq-inline-edit__control-container,
+    .kbq-inline-edit__action-buttons > .kbq-button-icon {
+        box-shadow: var(--kbq-shadow-popup);
+    }
+}

package/inline-edit/module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./inline-edit";
+export declare class KbqInlineEditModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEditModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqInlineEditModule, never, [typeof i1.KbqInlineEdit, typeof i1.KbqInlineEditPlaceholder, typeof i1.KbqInlineEditMenu], [typeof i1.KbqInlineEdit, typeof i1.KbqInlineEditPlaceholder, typeof i1.KbqInlineEditMenu]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqInlineEditModule>;
+}

package/input/input-number.d.ts

@@ -62,7 +62,7 @@ export declare class KbqNumberInput implements KbqFormFieldControl<any>, Control
     private control;
     private config;
     private valueFromPaste;
-    constructor(elementRef: ElementRef, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService?: KbqLocaleService | undefined);
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService?: KbqLocaleService | undefined);
     ngOnDestroy(): void;
     onContainerClick(): void;
     focus(): void;

package/input/input-password.d.ts

@@ -5,7 +5,7 @@ import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqInputPassword implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, OnChanges, CanUpdateErrorState {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLInputElement>;
     ngControl: NgControl;
     parentForm: NgForm;
     parentFormGroup: FormGroupDirective;
@@ -71,7 +71,7 @@ export declare class KbqInputPassword implements KbqFormFieldControl<any>, OnCha
      */
     get empty(): boolean;
     private _inputValueAccessor;
-    constructor(elementRef: ElementRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
+    constructor(elementRef: ElementRef<HTMLInputElement>, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
     ngOnChanges(): void;
     ngOnDestroy(): void;
     ngDoCheck(): void;

package/input/input.d.ts

@@ -6,7 +6,7 @@ import { Subject } from 'rxjs';
 import { KbqNumberInput } from './input-number';
 import * as i0 from "@angular/core";
 export declare class KbqInput implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, OnChanges, CanUpdateErrorState {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLInputElement>;
     ngControl: NgControl;
     numberInput: KbqNumberInput;
     parentForm: NgForm;
@@ -71,7 +71,7 @@ export declare class KbqInput implements KbqFormFieldControl<any>, OnChanges, On
     get value(): string;
     set value(value: string);
     private inputValueAccessor;
-    constructor(elementRef: ElementRef, ngControl: NgControl, numberInput: KbqNumberInput, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
+    constructor(elementRef: ElementRef<HTMLInputElement>, ngControl: NgControl, numberInput: KbqNumberInput, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
     ngOnChanges(): void;
     ngOnDestroy(): void;
     ngDoCheck(): void;

package/link/link.component.d.ts

@@ -9,7 +9,7 @@ export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestr
     private changeDetector;
     protected readonly renderer: Renderer2;
     protected readonly destroyRef: DestroyRef;
-    protected readonly nativeElement: any;
+    protected readonly nativeElement: HTMLElement;
     icons: QueryList<ElementRef>;
     /** Whether the link is disabled. */
     get disabled(): boolean;
@@ -29,11 +29,11 @@ export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestr
     printMode: boolean;
     printUrl: string;
     icon: KbqIcon;
-    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, changeDetector: ChangeDetectorRef);
+    constructor(elementRef: ElementRef<HTMLAnchorElement>, focusMonitor: FocusMonitor, changeDetector: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(): void;
-    getHostElement(): any;
+    getHostElement(): HTMLAnchorElement;
     ngAfterContentInit(): void;
     private updateClassModifierForIcons;
     private updatePrintUrl;

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

@@ -68,7 +68,7 @@ export declare class KbqListSelection implements AfterContentInit, AfterViewInit
     private readonly destroyRef;
     private optionFocusSubscription;
     private optionBlurSubscription;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/loader-overlay/loader-overlay.component.d.ts

@@ -33,7 +33,7 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     externalIndicator: KbqLoaderOverlayIndicator | null;
     externalText: KbqLoaderOverlayText | null;
     externalCaption: KbqLoaderOverlayCaption | null;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, never>;

package/markdown/_markdown-theme.scss

@@ -5,7 +5,7 @@
 @mixin kbq-markdown-theme() {
     .kbq-markdown {
         color: var(--kbq-foreground-contrast);
-        background: var(--kbq-background-bg);
+        background: var(--kbq-markdown-bg);
 
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {

package/markdown/markdown-tokens.scss

@@ -1,4 +1,5 @@
 .kbq-markdown {
+    --kbq-markdown-bg: transparent;
     --kbq-markdown-h1-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-h1-size-margin-top: 0;
     --kbq-markdown-h1-size-margin-bottom: var(--kbq-size-l);

package/markdown/markdown.scss

@@ -11,6 +11,14 @@
 
     .markdown-output {
         flex: 1;
+
+        & > :first-child {
+            margin-top: 0;
+        }
+
+        & > :last-child {
+            margin-bottom: 0;
+        }
     }
 
     // h1, h2, h3, h4, h5, h6

package/modal/modal.component.d.ts

@@ -83,7 +83,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private contentComponentRef;
     private animationState;
     private container;
-    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor);
+    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef<HTMLElement>, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor);
     kbqGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;

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

@@ -23,7 +23,7 @@ export declare class KbqNavbarBento {
 }
 export declare class KbqNavbarTitle implements AfterViewInit {
     protected readonly isBrowser: boolean;
-    protected readonly nativeElement: any;
+    protected readonly nativeElement: HTMLElement;
     private readonly window;
     readonly hovered: Subject<boolean>;
     outerElementWidth: number;
@@ -88,8 +88,9 @@ export declare class KbqNavbarFocusableItem implements AfterContentInit, AfterVi
 }
 export declare class KbqNavbarRectangleElement {
     protected readonly isBrowser: boolean;
-    protected readonly nativeElement: any;
+    protected readonly nativeElement: HTMLElement;
     private readonly window;
+    private readonly changeDetectorRef;
     readonly state: Subject<void>;
     get horizontal(): boolean;
     set horizontal(value: boolean);

package/navbar/navbar.component.d.ts

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
 export type KbqNavbarContainerPositionType = 'left' | 'right';
 export declare class KbqFocusableComponent implements AfterContentInit, AfterViewInit, OnDestroy {
     protected readonly changeDetectorRef: ChangeDetectorRef;
-    protected readonly elementRef: ElementRef;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly focusMonitor: FocusMonitor;
     focusableItems: QueryList<KbqNavbarFocusableItem>;
     keyManager: FocusKeyManager<KbqNavbarFocusableItem>;
@@ -19,7 +19,7 @@ export declare class KbqFocusableComponent implements AfterContentInit, AfterVie
     private readonly destroyRef;
     private optionFocusSubscription;
     private optionBlurSubscription;
-    constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, focusMonitor: FocusMonitor);
+    constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -39,7 +39,7 @@ export declare class KbqNavbarContainer {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarContainer, "kbq-navbar-container", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqNavbar extends KbqFocusableComponent implements AfterViewInit, AfterContentInit, OnDestroy {
-    protected readonly elementRef: ElementRef;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly focusMonitor: FocusMonitor;
     rectangleElements: import("@angular/core").Signal<readonly any[]>;
@@ -50,7 +50,7 @@ export declare class KbqNavbar extends KbqFocusableComponent implements AfterVie
     private get totalItemsWidth();
     private get collapsableItems();
     private resizeSubscription;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

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

@@ -5,7 +5,7 @@ import { KbqNavbarBento, KbqNavbarItem } from './navbar-item.component';
 import { KbqFocusableComponent } from './navbar.component';
 import * as i0 from "@angular/core";
 export declare class KbqVerticalNavbar extends KbqFocusableComponent implements AfterContentInit {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLElement>;
     rectangleElements: import("@angular/core").Signal<readonly any[]>;
     items: QueryList<KbqNavbarItem>;
     bento: KbqNavbarBento;
@@ -14,7 +14,7 @@ export declare class KbqVerticalNavbar extends KbqFocusableComponent implements
     get expanded(): boolean;
     set expanded(value: boolean);
     private _expanded;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     toggle(): void;
     onKeyDown(event: KeyboardEvent): void;

package/navbar-ic/_navbar-ic-theme.scss

@@ -0,0 +1,81 @@
+@use '../core/styles/common/tokens';
+
+@mixin kbq-navbar-ic-item($state-name) {
+    & .kbq-navbar-ic-item__inner,
+    & .kbq-navbar-ic-header__inner {
+        background: var(--kbq-navbar-ic-item-#{$state-name}-content-background);
+    }
+
+    .kbq-navbar-ic-title {
+        color: var(--kbq-navbar-ic-item-#{$state-name}-content-text);
+    }
+
+    & > .kbq-icon.kbq-empty {
+        color: var(--kbq-navbar-ic-item-#{$state-name}-content-icon-left);
+    }
+
+    .kbq-navbar-ic-item__arrow-icon {
+        color: var(--kbq-navbar-ic-item-#{$state-name}-content-icon-right);
+    }
+}
+
+@mixin kbq-navbar-ic-theme() {
+    .kbq-navbar-ic .kbq-navbar-ic__top-layer {
+        background-color: var(--kbq-navbar-ic-background);
+        box-shadow: var(--kbq-navbar-ic-border);
+    }
+
+    .kbq-navbar-ic-item,
+    .kbq-navbar-ic-header.kbq-navbar-ic-header_interactive,
+    .kbq-navbar-ic-toggle {
+        cursor: pointer;
+
+        @include kbq-navbar-ic-item(default);
+
+        &:not(.kbq-disabled) {
+            &:hover {
+                @include kbq-navbar-ic-item(states-hover);
+            }
+
+            &.cdk-keyboard-focused {
+                outline: none;
+
+                & .kbq-navbar-ic-item__inner,
+                & .kbq-navbar-ic-header__inner {
+                    box-shadow: inset 0 0 0 2px var(--kbq-states-line-focus-theme);
+                }
+            }
+
+            &.kbq-active,
+            &:active {
+                @include kbq-navbar-ic-item(states-selected);
+            }
+        }
+
+        &.kbq-disabled {
+            @include kbq-navbar-ic-item(states-disabled);
+
+            pointer-events: none;
+            cursor: default;
+        }
+    }
+
+    .kbq-navbar-ic-divider {
+        background: var(--kbq-line-contrast-less);
+    }
+}
+
+@mixin kbq-navbar-ic-typography() {
+    .kbq-navbar-ic-title {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
+    }
+
+    .kbq-navbar-ic-header .kbq-navbar-ic-title {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big-strong);
+
+        &.kbq-navbar-ic-title_text-overflown {
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact-strong);
+            line-height: 12px;
+        }
+    }
+}

package/navbar-ic/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/navbar-ic/navbar-ic-divider.scss

@@ -0,0 +1,7 @@
+.kbq-navbar-ic-divider {
+    display: block;
+
+    height: 1px;
+
+    margin: var(--kbq-size-s) var(--kbq-size-l);
+}

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

@@ -0,0 +1,18 @@
+import { AfterContentInit, DestroyRef } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { KbqNavbarIc } from './navbar-ic';
+import { KbqNavbarIcLogo, KbqNavbarIcTitle } from './navbar-ic-item';
+import * as i0 from "@angular/core";
+export declare class KbqNavbarIcHeader extends KbqTooltipTrigger implements AfterContentInit {
+    protected readonly navbar: KbqNavbarIc;
+    protected readonly nativeElement: HTMLElement;
+    protected readonly destroyRef: DestroyRef;
+    logo: KbqNavbarIcLogo;
+    title: KbqNavbarIcTitle;
+    get titleText(): string;
+    get isLink(): boolean;
+    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>;
+}

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

@@ -0,0 +1,53 @@
+.kbq-navbar-ic-header {
+    display: block;
+
+    margin-top: var(--kbq-size-l);
+    margin-bottom: var(--kbq-size-l);
+
+    padding: var(--kbq-size-3xs) var(--kbq-size-m);
+
+    & .kbq-navbar-ic-header__inner {
+        display: flex;
+        flex-direction: row;
+
+        padding: var(--kbq-size-xs) var(--kbq-size-s);
+
+        gap: var(--kbq-size-s);
+
+        border-radius: var(--kbq-navbar-ic-item-size-content-border-radius);
+    }
+
+    & .kbq-navbar-ic-logo {
+        display: flex;
+        align-self: center;
+    }
+
+    & .kbq-navbar-ic-title {
+        display: block;
+        align-items: center;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &.kbq-navbar-ic-title_text-overflown {
+            display: -webkit-box;
+
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            white-space: normal;
+        }
+    }
+
+    &.kbq-navbar-ic-header_interactive {
+        cursor: pointer;
+    }
+
+    &.kbq-collapsed .kbq-navbar-ic-title {
+        display: none;
+    }
+}
+
+a.kbq-navbar-ic-header {
+    text-decoration: none;
+}