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

package/navbar/_navbar-item_horizontal.scss

@@ -0,0 +1,97 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/list';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-navbar-item.kbq-horizontal {
+    position: relative;
+
+    flex-direction: row;
+
+    box-sizing: border-box;
+
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+
+    min-height: map.get($tokens, size-5xl);
+    min-width: map.get($tokens, size-5xl);
+
+    padding: map.get($tokens, size-s);
+
+    justify-content: center;
+
+    &:after {
+        top: map.get($tokens, size-s);
+        right: map.get($tokens, size-s);
+        bottom: map.get($tokens, size-s);
+        left: map.get($tokens, size-s);
+    }
+
+    & .kbq-navbar-item__title {
+        padding-left: map.get($tokens, size-xxs);
+        padding-right: map.get($tokens, size-xxs);
+    }
+
+    & .kbq-navbar-item__arrow-icon {
+        padding-left: map.get($tokens, size-xxs);
+    }
+
+    &.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed) {
+        padding: map.get($tokens, size-l) map.get($tokens, size-m);
+
+        &:after {
+            top: map.get($tokens, size-s);
+            right: 0;
+            bottom: map.get($tokens, size-s);
+            left: 0;
+        }
+
+        & > .kbq-icon {
+            padding-right: map.get($tokens, size-xxs);
+        }
+    }
+
+    &.kbq-navbar-bento {
+        min-width: 44px;
+
+        justify-content: center;
+
+        padding-right: map.get($tokens, size-xxs);
+
+        &:after {
+            top: map.get($tokens, size-s);
+            right: map.get($tokens, size-xxs);
+            bottom: map.get($tokens, size-s);
+            left: map.get($tokens, size-s);
+        }
+    }
+
+    &.kbq-navbar-item_collapsed {
+        justify-content: center;
+
+        padding: map.get($tokens, size-s);
+
+        & .kbq-navbar-item__container {
+            display: none;
+        }
+    }
+
+    .kbq-badge {
+        position: absolute;
+
+        z-index: 1;
+
+        top: map.get($tokens, size-xs);
+        right: map.get($tokens, size-xs);
+    }
+
+    &.kbq-navbar-item_has-nested {
+        padding: 0 map.get($tokens, size-m);
+    }
+}

package/navbar/_navbar-item_vertical.scss

@@ -0,0 +1,98 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-navbar-item.kbq-vertical {
+    align-items: flex-start;
+
+    & .kbq-navbar-item__container {
+        gap: map.get($tokens, size-m);;
+    }
+
+    &.kbq-expanded {
+        height: map.get($tokens, size-5xl);
+
+        padding: map.get($tokens, size-l) map.get($tokens, size-xl);
+
+        gap: map.get($tokens, size-m);
+
+        &:after {
+            top: map.get($tokens, size-xxs);
+            right: map.get($tokens, size-s);
+            bottom: map.get($tokens, size-xxs);
+            left: map.get($tokens, size-s);
+        }
+
+        &.kbq-navbar-bento {
+            position: absolute;
+
+            display: flex;
+
+            justify-content: center;
+            align-items: center;
+
+            top: map.get($tokens, size-xxs);
+            right: map.get($tokens, size-xxs);
+
+            z-index: 1;
+
+            padding: map.get($tokens, size-s);
+
+            height: map.get($tokens, size-5xl);
+            width: map.get($tokens, size-5xl);
+
+            &:after {
+                top: map.get($tokens, size-s);
+                right: map.get($tokens, size-s);
+                bottom: map.get($tokens, size-s);
+                left: map.get($tokens, size-s);
+            }
+        }
+
+        &.kbq-navbar-item_has-nested {
+            align-items: center;
+
+            padding: 0 map.get($tokens, size-m);
+        }
+    }
+
+    &.kbq-collapsed {
+        height: map.get($tokens, size-5xl);
+        width: map.get($tokens, size-5xl);
+
+        padding: map.get($tokens, size-l);
+
+        justify-content: center;
+
+        &:after {
+            top: map.get($tokens, size-s);
+            right: map.get($tokens, size-s);
+            bottom: map.get($tokens, size-s);
+            left: map.get($tokens, size-s);
+        }
+
+        & .kbq-badge {
+            position: absolute;
+
+            z-index: 1;
+
+            top: map.get($tokens, size-xs);
+            right: map.get($tokens, size-xs);
+        }
+
+        & .kbq-navbar-item__container {
+            display: none;
+        }
+    }
+
+    & > .kbq-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

package/navbar/_navbar-theme.scss

@@ -4,88 +4,96 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
+@mixin kbq-navbar-item($state) {
+    &:not(.kbq-navbar-item_has-nested) {
+        &:after {
+            display: block;
+            background: map.get($state, background);
+        }
+    }
+
+    .kbq-navbar-title {
+        color: map.get($state, text);
+    }
+
+    & > .kbq-icon {
+        color: map.get($state, icon-left) !important;
+    }
+
+    .kbq-navbar-item__arrow-icon {
+        color: map.get($state, icon-right) !important;
+    }
+}
+
+
 @mixin kbq-navbar-theme($theme) {
-    $background: map.get($theme, background);
-    $primary: map.get($theme, theme);
+    $line: map.get($theme, line);
+    $states-line: map.get(map.get($theme, states), line);
 
     $navbar: map.get(map.get($theme, components), navbar);
-    $navbar-item: map.get(map.get($theme, components), navbar-item);
+    $item: map.get($navbar, item);
+
 
     .kbq-navbar,
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
         background-color: map.get($navbar, background);
     }
 
-    .kbq-navbar-brand.kbq-hovered:not(.kbq-collapsed) {
-        background-color: map.get($navbar-item, state-hover);
-    }
-
-    .kbq-navbar-brand.kbq-vertical.kbq-collapsed {
-        & .kbq-navbar-logo:hover {
-            background-color: map.get($navbar-item, state-hover);
-        }
-    }
-
-    .kbq-navbar-title {
-        color: map.get($navbar-item, color);
+    .kbq-vertical-navbar .kbq-vertical-navbar__container {
+        border-right: 1px solid map.get($navbar, border);
     }
 
     .kbq-navbar-item,
     .kbq-navbar-brand,
     .kbq-navbar-toggle {
-        color: map.get($navbar-item, color);
+        cursor: pointer;
 
-        & > .kbq-icon {
-            color: map.get($navbar-item, icon-color);
-        }
+        @include kbq-navbar-item(map.get($item, default));
 
-        & .kbq-navbar-item__arrow-icon {
-            color: map.get($navbar-item, color);
+        &:hover:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
+            @include kbq-navbar-item(map.get($item, hover));
         }
 
-        &.kbq-active {
-            background: map.get($navbar-item, state-selected);
-        }
+        &.cdk-focused.cdk-keyboard-focused {
+            outline: none;
 
-        &:hover:not(.kbq-navbar-item_button) {
-            cursor: pointer;
+            &:after {
+                display: block;
+                box-shadow: inset 0 0 0 2px map.get($states-line, focus-theme)
+            };
+        }
 
-            & .kbq-navbar-item__overlay {
-                background-color: map.get($navbar-item, state-hover);
-            }
+        &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),
+        &.kbq-active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
+            @include kbq-navbar-item(map.get($item, selected));
         }
 
-        &:active:not(.kbq-navbar-item_button) {
-            & .kbq-navbar-item__overlay {
-                background: map.get($navbar-item, state-active);
-            }
+        &.kbq-navbar-focusable-item {
+            outline: none;
         }
 
-        &[disabled] {
+        &.kbq-disabled {
+            @include kbq-navbar-item(map.get($item, disabled));
+
             pointer-events: none;
             cursor: default;
-
-            .kbq-navbar-item__title,
-            .kbq-icon {
-                opacity: map.get($navbar-item, state-disabled-opacity);
-            }
         }
     }
 
-    .kbq-navbar-focusable-item {
-        outline: none;
+    .kbq-navbar-brand.kbq-vertical:hover {
+        .kbq-navbar-logo {
+            transform: scale(1.06);
+        }
+    }
 
-        /* stylelint-disable no-descending-specificity */
-        &.cdk-keyboard-focused .kbq-navbar-item__overlay {
-            box-shadow:
-                inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
-                inset 0 0 0 3px map.get($background, bg);
+    .kbq-navbar-brand.kbq-horizontal:hover {
+        .kbq-navbar-logo {
+            z-index: 1;
         }
-        /* stylelint-enable no-descending-specificity */
     }
 
     .kbq-navbar-divider {
-        background-color: map.get($navbar, divider-background);
+        background: map.get($line, contrast-fade);
     }
 }
 
@@ -102,22 +110,12 @@ button {
     $tokens: map.get($config, tokens);
 
     .kbq-navbar-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, navbar-font-title));
-    }
-
-    .kbq-navbar-subtitle {
-        @include kbq-typography-level-to-styles($config, extra-small-text);
+        @include kbq-typography-level-to-styles($config, 'text-normal-strong');
     }
 
     .kbq-navbar-brand {
         .kbq-navbar-title {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, navbar-brand-font-title));
-
-            &.kbq-navbar-title_small {
-                @include kbq-typography-level-to-styles($config, subheading);
-
-                white-space: unset;
-            }
+            @include kbq-typography-level-to-styles($config, map.get($tokens, navbar-font-title));
         }
     }
 }

package/navbar/navbar-brand.scss

@@ -14,7 +14,20 @@ $tokens: meta.module-variables(tokens) !default;
     position: relative;
 
     display: flex;
-    align-items: center;
+
+    border-radius: map.get($tokens, size-s);
+
+    &: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-navbar-title {
         cursor: pointer;
@@ -26,45 +39,92 @@ a.kbq-navbar-brand {
 }
 
 .kbq-navbar-brand.kbq-horizontal {
-    height: var(--kbq-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
+    padding: map.get($tokens, size-s) map.get($tokens, size-xs) map.get($tokens, size-s) map.get($tokens, size-xxs);
+
+    align-items: center;
 
-    padding-right: var(--kbq-navbar-brand-size-margin-right, map.get($tokens, navbar-brand-size-margin-right));
+    gap: map.get($tokens, size-s);
+
+    &:after {
+        top: map.get($tokens, size-xxs);
+        right: map.get($tokens, size-xxs);
+        bottom: map.get($tokens, size-xxs);
+        left: 0;
+    }
 
     & .kbq-navbar-title {
-        padding-left: var(--kbq-navbar-brand-size-padding, map.get($tokens, navbar-brand-size-padding));
-        padding-right: 0;
+        padding-right: map.get($tokens, size-m);
     }
 }
 
 .kbq-navbar-brand.kbq-vertical {
     & .kbq-navbar-logo {
-        flex-direction: column;
-        justify-content: center;
         align-items: center;
-
-        min-height: var(--kbq-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
-        min-width: var(
-            --kbq-vertical-navbar-size-states-collapsed-width,
-            map.get($tokens, vertical-navbar-size-states-collapsed-width)
-        );
     }
 
     & .kbq-navbar-title {
-        display: flex;
+        display: block;
         align-items: center;
 
-        height: var(--kbq-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+        padding-top: map.get($tokens, size-xxs);
+        padding-bottom: map.get($tokens, size-xxs);
+
+        height: map.get($tokens, size-3xl);
 
         padding-left: 0;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
     }
 
     &.kbq-expanded {
-        align-items: unset;
+        position: relative;
+
+        height: map.get($tokens, size-4xl);
+        width: map.get($tokens, size-4xl);
+
+        margin: map.get($tokens, size-l) map.get($tokens, size-l) map.get($tokens, size-4xl);
+
+        flex-direction: column;
+
+        &:after {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        & .kbq-navbar-logo {
+            min-height: map.get($tokens, size-4xl);
+
+            justify-content: center;
+        }
+
+        & .kbq-navbar-title {
+            position: absolute;
+
+            left: map.get($tokens, size-xxs);
+            bottom: - map.get($tokens, size-4xl);
+            max-width: 200px;
+        }
     }
 
     &.kbq-collapsed {
+        height: map.get($tokens, size-5xl);
+        width: map.get($tokens, size-5xl);
+
+        &:after {
+            top: map.get($tokens, size-xxs);
+            right: map.get($tokens, size-xxs);
+            bottom: map.get($tokens, size-xxs);
+            left: map.get($tokens, size-xxs);
+        }
+
         & .kbq-navbar-title {
             display: none;
         }
+
+        justify-content: center;
     }
 }

package/navbar/navbar-divider.scss

@@ -1,3 +1,12 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
 .kbq-navbar-divider {
     display: block;
 }
@@ -5,14 +14,14 @@
 .kbq-navbar-divider.kbq-vertical {
     height: 1px;
 
-    margin: 8px 12px;
+    margin: map.get($tokens, size-s) map.get($tokens, size-l);
 }
 
 .kbq-navbar-divider.kbq-horizontal {
     width: 1px;
 
-    height: 28px;
+    height: 12px;
 
-    margin-left: 8px;
-    margin-right: 8px;
+    margin-left: map.get($tokens, size-m);
+    margin-right: map.get($tokens, size-m);
 }

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

@@ -5,6 +5,7 @@ import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone,
 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 { Subject } from 'rxjs';
@@ -36,18 +37,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 KbqNavbarSubTitle implements AfterContentInit {
-    private elementRef;
-    readonly hovered: Subject<boolean>;
-    outerElementWidth: number;
-    get text(): string;
-    get isOverflown(): boolean;
-    constructor(elementRef: ElementRef);
-    getOuterElementWidth(): number;
-    ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarSubTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarSubTitle, "kbq-navbar-subtitle, [kbq-navbar-subtitle]", never, {}, {}, never, never, false, never>;
-}
 export declare class KbqNavbarBrand implements AfterContentInit, OnDestroy {
     private navbar;
     logo: KbqNavbarLogo;
@@ -72,6 +61,8 @@ export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterCo
     private ngZone;
     title: KbqNavbarTitle;
     button: KbqButton;
+    formField: KbqFormField;
+    get nestedElement(): KbqButton | KbqFormField;
     get tooltip(): KbqTooltipTrigger;
     private _tooltip;
     readonly onFocus: Subject<KbqNavbarFocusableItemEvent>;
@@ -92,7 +83,7 @@ export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterCo
     blur(): void;
     getLabel(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarFocusableItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarFocusableItem, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "button"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarFocusableItem, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "button", "formField"], never, false, never>;
 }
 export declare class KbqNavbarRectangleElement {
     elementRef: ElementRef;
@@ -119,7 +110,6 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger {
     private dropdownTrigger;
     private bento;
     title: KbqNavbarTitle;
-    subTitle: KbqNavbarSubTitle;
     icon: KbqIcon;
     collapsedText: string;
     get trigger(): string;
@@ -132,7 +122,6 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger {
     set collapsable(value: boolean);
     private _collapsable;
     get titleText(): string | null;
-    get subTitleText(): string | null;
     get disabled(): boolean;
     set disabled(value: boolean);
     get hasDropDownTrigger(): boolean;
@@ -146,7 +135,7 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger {
     onKeyDown($event: KeyboardEvent): void;
     private updateCollapsedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, null, null, null, null, null, null, { optional: true; }, { 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", "subTitle", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "kbq-navbar-subtitle, [kbq-navbar-subtitle]", "*"], false, never>;
+    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;
@@ -164,5 +153,5 @@ export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDest
     private getWindow;
     private windowToggleHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "mcCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
 }