@koobiq/components 16.0.0-beta.9 → 17.0.0-beta.2

package/navbar/navbar-item.scss

@@ -1,19 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/list';
 
+@use '../core/styles/tokens';
 
-$tokens: meta.module-variables(tokens) !default;
+@use 'navbar-item_vertical';
+@use 'navbar-item_horizontal';
 
-.kbq-navbar-title,
-.kbq-navbar-subtitle {
-    display: inline-block;
 
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
+$tokens: meta.module-variables(tokens) !default;
 
 .kbq-navbar-item {
     box-sizing: border-box;
@@ -23,14 +19,45 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    padding-left: var(--kbq-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
-    padding-right: var(--kbq-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
+    border-radius: var(
+        --kbq-navbar-item-size-content-border-radius,
+        map.get($tokens, navbar-item-size-content-border-radius)
+    );
+
+    & .kbq-icon {
+        min-width: map.get($tokens, size-l);
+        min-height: map.get($tokens, size-l);
+    }
 
-    .kbq-badge {
+    &:after {
         position: absolute;
+        content: '';
+
+        display: none;
+
+        border-radius: var(
+            --kbq-navbar-item-size-content-border-radius,
+            map.get($tokens, navbar-item-size-content-border-radius)
+        );
+    }
+
+    &.kbq-horizontal {
+        @extend navbar-item_horizontal !optional;
+    }
+
+    &.kbq-vertical {
+        @extend navbar-item_vertical !optional;
     }
 }
 
+.kbq-navbar-title {
+    display: inline-block;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
 .kbq-navbar-item__title {
     display: flex;
 
@@ -55,76 +82,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-.kbq-navbar-item.kbq-horizontal {
-    height: var(--kbq-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
-
-    & .kbq-icon {
-        min-width: 16px;
-        min-height: 16px;
-    }
-
-    & .kbq-navbar-item__title + .kbq-icon {
-        margin-left: var(--kbq-navbar-size-right-icon-margin, map.get($tokens, navbar-size-right-icon-margin))
-    }
-
-    & .kbq-icon + .kbq-navbar-item__container {
-        margin-left: var(--kbq-navbar-size-icon-margin, map.get($tokens, navbar-size-icon-margin))
-    }
-
-    &.kbq-navbar-item_collapsed .kbq-navbar-item__container {
-        display: none;
-    }
-
-    .kbq-badge {
-        top: 8px;
-        right: 8px;
-    }
-}
-
-.kbq-navbar-item.kbq-vertical {
-    height: var(--kbq-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
-
-    /* stylelint-disable no-descending-specificity */
-    & > .kbq-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        min-width: 24px;
-        min-height: 24px;
-    }
-
-    & .kbq-navbar-item__title,
-    & .kbq-icon + .kbq-navbar-item__title,
-    & .kbq-navbar-item__title + .kbq-icon {
-        padding-left: var(--kbq-vertical-navbar-size-icon-margin, map.get($tokens, vertical-navbar-size-icon-margin));
-    }
-
-    &.kbq-navbar-item_button {
-        padding-left: 12px;
-        padding-right: 12px;
-    }
-
-    &.kbq-expanded {
-        & .kbq-badge {
-            top: 16px;
-            right: 16px;
-        }
-    }
-
-    &.kbq-collapsed {
-        & .kbq-badge {
-            top: 4px;
-            right: 4px;
-        }
-
-        & .kbq-navbar-item__title {
-            display: none;
-        }
-    }
-}
-
-.kbq-navbar-item.kbq-navbar-item_button .kbq-button {
+.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button {
     flex: 1;
 
     & .kbq-button-wrapper {
@@ -148,12 +106,8 @@ a.kbq-navbar-title {
 .kbq-navbar-item,
 .kbq-navbar-brand,
 .kbq-navbar-toggle {
-    & .kbq-navbar-item__overlay {
-        position: absolute;
-        top: 0; right: 0; bottom: 0; left: 0;
-    }
-
     & [kbq-button] {
         z-index: 1;
     }
 }
+

package/navbar/navbar.component.d.ts

@@ -53,6 +53,9 @@ export declare class KbqNavbar extends KbqFocusableComponent implements AfterVie
     ngOnDestroy(): void;
     onKeyDown(event: KeyboardEvent): void;
     updateExpandedStateForItems: () => void;
+    private eventFromInput;
+    private cursorOnFirstPosition;
+    private cursorOnLastPosition;
     private collapseItems;
     private expandItems;
     private setItemsState;

package/navbar/navbar.module.d.ts

@@ -9,6 +9,6 @@ import * as i7 from "@koobiq/components/icon";
 import * as i8 from "@koobiq/components/tooltip";
 export declare class KbqNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNavbarModule, [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i2.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i2.KbqNavbarToggle, typeof i3.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarSubTitle, typeof i2.KbqNavbarBento], [typeof i4.CommonModule, typeof i5.A11yModule, typeof i6.PlatformModule, typeof i7.KbqIconModule, typeof i8.KbqToolTipModule], [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i2.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i2.KbqNavbarToggle, typeof i3.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarSubTitle, typeof i2.KbqNavbarBento]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNavbarModule, [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i2.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i2.KbqNavbarToggle, typeof i3.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarBento], [typeof i4.CommonModule, typeof i5.A11yModule, typeof i6.PlatformModule, typeof i7.KbqIconModule, typeof i8.KbqToolTipModule], [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i2.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i2.KbqNavbarToggle, typeof i3.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarBento]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqNavbarModule>;
 }

package/navbar/navbar.scss

@@ -1,5 +1,13 @@
-.kbq-navbar {
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
 
+
+.kbq-navbar {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -18,3 +26,7 @@
 
     position: relative;
 }
+
+.kbq-navbar .kbq-navbar-container + .kbq-navbar-container {
+    margin-left: map.get($tokens, size-xxl);
+}

package/navbar/vertical-navbar.scss

@@ -9,10 +9,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-vertical-navbar {
     position: relative;
 
-    min-width: var(
-        --kbq-vertical-navbar-size-states-collapsed-width,
-        map.get($tokens, vertical-navbar-size-states-collapsed-width)
-    );
+    min-width: 48px;
     height: 100%;
 
     & .kbq-navbar-container {
@@ -20,6 +17,10 @@ $tokens: meta.module-variables(tokens) !default;
         align-items: unset;
     }
 
+    & .kbq-navbar-container + .kbq-navbar-container {
+        padding-top: map.get($tokens, size-xxl);
+    }
+
     & .kbq-vertical-navbar__container {
         display: flex;
         flex-direction: column;
@@ -27,20 +28,12 @@ $tokens: meta.module-variables(tokens) !default;
         position: absolute;
         z-index: 998;
 
-        height: 100%;
-
         &.kbq-collapsed {
-            width: var(
-                --kbq-vertical-navbar-size-states-collapsed-width,
-                map.get($tokens, vertical-navbar-size-states-collapsed-width)
-            );
+            width: map.get($tokens, size-5xl);
         }
 
         &.kbq-expanded {
-            width: var(
-                --kbq-vertical-navbar-size-states-expanded-width,
-                map.get($tokens, vertical-navbar-size-states-expanded-width)
-            );
+            width: 240px;
         }
     }
 }

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@koobiq/components",
-    "version": "16.0.0-beta.9",
+    "version": "17.0.0-beta.2",
     "description": "koobiq",
     "repository": {
         "type": "git",
-        "url": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic.git"
+        "url": "https://github.com/koobiq/angular-components.git"
     },
     "keywords": [
         "angular",
@@ -13,23 +13,25 @@
     ],
     "license": "MIT",
     "bugs": {
-        "url": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic/-/issues"
+        "url": "https://github.com/koobiq/angular-components/issues"
     },
-    "homepage": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic/-/blob/master/README.md",
+    "homepage": "https://github.com/koobiq/angular-components/blob/master/README.md",
     "peerDependencies": {
-        "@angular/cdk": "^16.1.5",
-        "@angular/forms": "^16.1.5",
-        "@koobiq/cdk": "^16.0.0-beta.9",
-        "@koobiq/angular-moment-adapter": "^16.0.0-beta.9",
-        "@koobiq/angular-luxon-adapter": "^16.0.0-beta.9",
-        "@mosaic-design/date-formatter": "^2.1.1",
+        "@angular/cdk": "^17.2.0",
+        "@angular/forms": "^17.2.0",
+        "@koobiq/cdk": "^17.0.0-beta.2",
+        "@koobiq/angular-moment-adapter": "^17.0.0-beta.2",
+        "@koobiq/angular-luxon-adapter": "^17.0.0-beta.2",
+        "@koobiq/date-formatter": "^3.0.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "^3.0.0-beta.6",
-        "@koobiq/design-tokens": "^3.0.0-beta.6",
-        "marked": "^4.0.18"
+        "@koobiq/tokens-builder": "3.0.0-beta.31",
+        "@koobiq/design-tokens": "3.0.0-beta.31",
+        "marked": "^4.0.18",
+        "overlayscrollbars": "^2.2.0",
+        "ngx-highlightjs": "^10.0.0"
     },
     "dependencies": {
-        "tslib": "^2.4.0"
+        "tslib": "^2.6.2"
     },
     "ng-update": {
         "packageGroup": [
@@ -62,18 +64,18 @@
             "esm": "./esm2022/alert/koobiq-components-alert.mjs",
             "default": "./fesm2022/koobiq-components-alert.mjs"
         },
-        "./autocomplete": {
-            "types": "./autocomplete/index.d.ts",
-            "esm2022": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
-            "esm": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
-            "default": "./fesm2022/koobiq-components-autocomplete.mjs"
-        },
         "./badge": {
             "types": "./badge/index.d.ts",
             "esm2022": "./esm2022/badge/koobiq-components-badge.mjs",
             "esm": "./esm2022/badge/koobiq-components-badge.mjs",
             "default": "./fesm2022/koobiq-components-badge.mjs"
         },
+        "./autocomplete": {
+            "types": "./autocomplete/index.d.ts",
+            "esm2022": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
+            "esm": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
+            "default": "./fesm2022/koobiq-components-autocomplete.mjs"
+        },
         "./button": {
             "types": "./button/index.d.ts",
             "esm2022": "./esm2022/button/koobiq-components-button.mjs",
@@ -230,6 +232,12 @@
             "esm": "./esm2022/risk-level/koobiq-components-risk-level.mjs",
             "default": "./fesm2022/koobiq-components-risk-level.mjs"
         },
+        "./scrollbar": {
+            "types": "./scrollbar/index.d.ts",
+            "esm2022": "./esm2022/scrollbar/koobiq-components-scrollbar.mjs",
+            "esm": "./esm2022/scrollbar/koobiq-components-scrollbar.mjs",
+            "default": "./fesm2022/koobiq-components-scrollbar.mjs"
+        },
         "./select": {
             "types": "./select/index.d.ts",
             "esm2022": "./esm2022/select/koobiq-components-select.mjs",

package/popover/popover-confirm.component.d.ts

@@ -1,14 +1,12 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, ViewContainerRef } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { KbqPopoverComponent, KbqPopoverTrigger } from './popover.component';
 import * as i0 from "@angular/core";
 export declare const KBQ_POPOVER_CONFIRM_TEXT: InjectionToken<string>;
 export declare const KBQ_POPOVER_CONFIRM_BUTTON_TEXT: InjectionToken<string>;
 export declare class KbqPopoverConfirmComponent extends KbqPopoverComponent {
-    themePalette: typeof ThemePalette;
     onConfirm: Subject<void>;
     confirmButtonText: string;
     confirmText: string;

package/popover/popover.component.d.ts

@@ -53,6 +53,11 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     private _size;
     get customClass(): string;
     set customClass(value: string);
+    /**
+     * Controls the behavior of closing the component on scroll.
+     * The default value is `false`.
+     * Use CloseScrollStrategy as alternative
+     */
     get closeOnScroll(): boolean;
     set closeOnScroll(value: boolean);
     private _closeOnScroll;
@@ -69,7 +74,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     getOverlayHandleComponentType(): Type<KbqPopoverComponent>;
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
-    closingActions(): import("rxjs").Observable<void | import("@angular/cdk/scrolling").CdkScrollable | MouseEvent>;
+    closingActions(): import("rxjs").Observable<void | MouseEvent | import("@angular/cdk/scrolling").CdkScrollable>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, [null, null, null, null, null, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "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; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
 }

package/popover/popover.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/variables';
 @use '../core/pop-up/pop-up';
 @use '../core/styles/common';
 
@@ -24,11 +23,11 @@ $trigger-margin: 9px;
 
     box-sizing: border-box;
 
-    z-index: variables.$z-index-popover;
-
     list-style: none;
     white-space: pre-line;
 
+    z-index: 1;
+
     &.kbq-popover_small {
         max-width: var(--kbq-popover-size-container-width-small, map.get($tokens, popover-size-container-width-small));
     }
@@ -69,17 +68,13 @@ $trigger-margin: 9px;
 
     &.kbq-popover__container_with-header {
         .kbq-popover__content {
-            padding-top: var(
-                --kbq-popover-size-content-padding-vertical, map.get($tokens, popover-size-content-padding-vertical)
-            );
+            padding-top: map.get($tokens, size-s);
         }
     }
 
     &.kbq-popover__container_with-footer {
         .kbq-popover__content {
-            padding-bottom: var(
-                --kbq-popover-size-content-padding-vertical, map.get($tokens, popover-size-content-padding-vertical)
-            );
+            padding-bottom: map.get($tokens, size-s);
         }
     }
 }