@koobiq/components 17.0.0-beta.1 → 17.0.0-rc.1

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,75 +82,6 @@ $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_has-nested {
-        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_has-nested .kbq-button {
     flex: 1;
 
@@ -148,17 +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;
     }
 }
 
-.kbq-navbar-item.kbq-navbar-item_form-field .kbq-navbar-item__overlay {
-    display: none;
-}
-

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,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.0.0-beta.1",
+    "version": "17.0.0-rc.1",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,14 +19,16 @@
     "peerDependencies": {
         "@angular/cdk": "^17.2.0",
         "@angular/forms": "^17.2.0",
-        "@koobiq/cdk": "^17.0.0-beta.1",
-        "@koobiq/angular-moment-adapter": "^17.0.0-beta.1",
-        "@koobiq/angular-luxon-adapter": "^17.0.0-beta.1",
-        "@mosaic-design/date-formatter": "^2.1.1",
+        "@koobiq/cdk": "^17.0.0-rc.1",
+        "@koobiq/angular-moment-adapter": "^17.0.0-rc.1",
+        "@koobiq/angular-luxon-adapter": "^17.0.0-rc.1",
+        "@koobiq/date-formatter": "^3.0.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "^3.0.0-beta.23",
-        "@koobiq/design-tokens": "^3.0.0-beta.23",
-        "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.6.2"
@@ -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.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);
         }
     }
 }