@koobiq/components 17.0.0-rc.9 → 17.0.0

package/navbar/_navbar-item_horizontal.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-navbar-item.kbq-horizontal {
     position: relative;
 
@@ -16,18 +15,25 @@
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
-    min-height: kbq-css-variable(size-5xl);
-    min-width: kbq-css-variable(size-5xl);
+    min-height: kbq-css-variable(size-3xl);
+    min-width: kbq-css-variable(size-3xl);
 
-    padding: kbq-css-variable(size-s);
+    margin: kbq-css-variable(size-s);
 
     justify-content: center;
 
+    &:before {
+        top: calc(-1 * #{kbq-css-variable(size-s)});
+        left: calc(-1 * #{kbq-css-variable(size-s)});
+        right: calc(-1 * #{kbq-css-variable(size-s)});
+        bottom: calc(-1 * #{kbq-css-variable(size-s)});
+    }
+
     &:after {
-        top: kbq-css-variable(size-s);
-        right: kbq-css-variable(size-s);
-        bottom: kbq-css-variable(size-s);
-        left: kbq-css-variable(size-s);
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
     }
 
     & .kbq-navbar-item__title {
@@ -40,14 +46,14 @@
     }
 
     &.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed) {
+        margin-left: 0;
+        margin-right: 0;
         padding-right: kbq-css-variable(size-m);
         padding-left: kbq-css-variable(size-m);
-        // (total height 48 - grey hover 32) / 2
-        &:after {
-            top: kbq-css-variable(size-s);
-            right: 0;
-            bottom: kbq-css-variable(size-s);
+
+        &:before {
             left: 0;
+            right: 0;
         }
 
         & > .kbq-icon {
@@ -58,17 +64,12 @@
     }
 
     &.kbq-navbar-bento {
-        min-width: 44px;
-
         justify-content: center;
 
-        padding-right: kbq-css-variable(size-xxs);
+        margin-right: kbq-css-variable(size-xxs);
 
-        &:after {
-            top: kbq-css-variable(size-s);
-            right: kbq-css-variable(size-xxs);
-            bottom: kbq-css-variable(size-s);
-            left: kbq-css-variable(size-s);
+        &:before {
+            right: calc(-1 * #{kbq-css-variable(size-xxs)});
         }
     }
 
@@ -87,11 +88,17 @@
 
         z-index: 1;
 
-        top: kbq-css-variable(size-xs);
-        right: kbq-css-variable(size-xs);
+        top: -2px;
+        right: -2px;
     }
 
     &.kbq-navbar-item_has-nested {
-        padding: 0 kbq-css-variable(size-m);
+        margin-left: kbq-css-variable(size-m);
+        margin-right: kbq-css-variable(size-m);
+
+        &:before {
+            left: calc(-1 * #{kbq-css-variable(size-m)});
+            right: calc(-1 * #{kbq-css-variable(size-m)});
+        }
     }
 }

package/navbar/_navbar-item_vertical.scss

@@ -4,10 +4,7 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-navbar-item.kbq-vertical {
-    align-items: flex-start;
-
     & .kbq-navbar-item__container {
         gap: kbq-css-variable(size-m);
     }

package/navbar/_navbar-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-navbar-item($component, $state-name) {
     $state: map.get($component, $state-name);
 
@@ -28,7 +27,6 @@
     }
 }
 
-
 @mixin kbq-navbar-theme($theme) {
     $navbar: map.get($theme, components, navbar);
     $item: map.get($navbar, item);
@@ -58,10 +56,9 @@
 
             &:after {
                 display: block;
-                box-shadow: inset 0 0 0 2px kbq-css-variable(
-                    states-line-focus-theme, map.get($theme, states, line, focus-theme)
-                )
-            };
+                box-shadow: inset 0 0 0 2px
+                    kbq-css-variable(states-line-focus-theme, map.get($theme, states, line, focus-theme));
+            }
         }
 
         &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),

package/navbar/navbar-brand.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-navbar-logo {

package/navbar/navbar-divider.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-navbar-divider {
     display: block;
 }

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

@@ -103,7 +103,7 @@ export declare class KbqNavbarRectangleElement {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarRectangleElement, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarRectangleElement, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", never, {}, {}, ["button"], never, false, never>;
 }
-export declare class KbqNavbarItem extends KbqTooltipTrigger {
+export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterContentInit {
     rectangleElement: KbqNavbarRectangleElement;
     navbarFocusableItem: KbqNavbarFocusableItem;
     private changeDetectorRef;

package/navbar/navbar-item.scss

@@ -8,7 +8,6 @@
 @use 'navbar-item_vertical';
 @use 'navbar-item_horizontal';
 
-
 .kbq-navbar-item {
     box-sizing: border-box;
 
@@ -26,10 +25,17 @@
 
     & .kbq-button-icon {
         position: absolute;
+        padding-left: kbq-css-variable(size-xs);
+        padding-right: kbq-css-variable(size-xs);
         top: 50%;
         transform: translateY(-50%);
     }
 
+    &:before {
+        position: absolute;
+        content: '';
+    }
+
     &:after {
         position: absolute;
         content: '';
@@ -40,10 +46,12 @@
     }
 
     &.kbq-horizontal {
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
         @extend navbar-item_horizontal !optional;
     }
 
     &.kbq-vertical {
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
         @extend navbar-item_vertical !optional;
     }
 }
@@ -108,4 +116,3 @@ a.kbq-navbar-title {
         z-index: 1;
     }
 }
-

package/navbar/navbar.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-navbar {
     display: flex;
     flex-direction: row;

package/navbar/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './navbar.module';
-export * from './navbar.component';
 export * from './navbar-item.component';
+export * from './navbar.component';
+export * from './navbar.module';
 export * from './vertical-navbar.component';

package/navbar/vertical-navbar.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-vertical-navbar {
     position: relative;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.0.0-rc.9",
+    "version": "17.0.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,13 +19,13 @@
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.0.0-rc.9",
-        "@koobiq/angular-moment-adapter": "17.0.0-rc.9",
-        "@koobiq/angular-luxon-adapter": "17.0.0-rc.9",
+        "@koobiq/cdk": "17.0.0",
+        "@koobiq/angular-moment-adapter": "17.0.0",
+        "@koobiq/angular-luxon-adapter": "17.0.0",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.0.0-rc.11",
-        "@koobiq/design-tokens": "3.0.0-rc.11",
+        "@koobiq/tokens-builder": "3.0.0-rc.15",
+        "@koobiq/design-tokens": "3.0.0-rc.15",
         "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"
@@ -142,6 +142,12 @@
             "esm": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
             "default": "./fesm2022/koobiq-components-ellipsis-center.mjs"
         },
+        "./empty-state": {
+            "types": "./empty-state/index.d.ts",
+            "esm2022": "./esm2022/empty-state/koobiq-components-empty-state.mjs",
+            "esm": "./esm2022/empty-state/koobiq-components-empty-state.mjs",
+            "default": "./fesm2022/koobiq-components-empty-state.mjs"
+        },
         "./file-upload": {
             "types": "./file-upload/index.d.ts",
             "esm2022": "./esm2022/file-upload/koobiq-components-file-upload.mjs",

package/popover/README.md

@@ -2,32 +2,35 @@
 
 ## API
 
-| Property               | Description                                                                                                                                                                              | Type                  | Default |
-|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
-| kbqPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
-| kbqTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
-| kbqVisible              | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                             | boolean               | false   |
-| kbqPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
-| kbqPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
-| kbqPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
-| kbqPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
-| kbqPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
-| kbqVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+| Property           | Description                                                                                                                                                                           | Type                  | Default     |     |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | --- |
+| kbqPlacement       | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                          | string                | bottom      |     |
+| kbqTrigger         | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                    | string                | hover       |     |
+| kbqVisible         | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                                | boolean               | false       |     |
+| kbqPopoverHeader   | Содержимое шапки Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости.      | string                | ng-template | –   |
+| kbqPopoverContent  | Содержимое компонента Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости. | string                | ng-template | –   |
+| kbqPopoverFooter   | Содержимое подвала Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости.    | string                | ng-template | –   |
+| kbqPopoverDisabled | Флаг для запрета показа                                                                                                                                                               | boolean               | false       |     |
+| kbqPopoverClass    | Добавление своих классов                                                                                                                                                              | string                | string[]    | –   |
+| kbqVisibleChange   | Callback на изменение видимости компонента                                                                                                                                            | EventEmitter<boolean> | –           |     |
 
 ## Example
 
 <!-- cspell:ignore Э́йяфьядлайё̀кюдль, Эйяфьядлайёкюдль -->
+
 ```html
 <ng-template #customContent>
-    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика. Под этим ледником находится одноимённый вулкан конической формы.
+    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика.
+    Под этим ледником находится одноимённый вулкан конической формы.
 </ng-template>
- 
+
 <button
     kbqPopover
     [kbqTrigger]="'hover'"
     [kbqPlacement]="'top'"
     [kbqPopoverHeader]="'Это header'"
-    [kbqPopoverContent]="customContent">
+    [kbqPopoverContent]="customContent"
+>
     Найти Эйяфьядлайёкюдль
 </button>
 ```

package/popover/_popover-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-popover-theme($theme) {
     $popover: map.get(map.get($theme, components), popover);
 

package/popover/popover.component.d.ts

@@ -1,5 +1,5 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher, ScrollStrategy, OverlayConfig } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";

package/popover/popover.scss

@@ -7,10 +7,8 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-
 $arrow-size: 12px;
 $trigger-margin: 9px;
 
@@ -44,10 +42,8 @@ $trigger-margin: 9px;
 .kbq-popover__content {
     overflow-y: auto;
 
-    padding:
-        kbq-css-variable(popover-size-content-padding-top)
-        kbq-css-variable(popover-size-content-padding-horizontal)
-        kbq-css-variable(popover-size-content-padding-bottom);
+    padding: kbq-css-variable(popover-size-content-padding-top)
+        kbq-css-variable(popover-size-content-padding-horizontal) kbq-css-variable(popover-size-content-padding-bottom);
 }
 
 .kbq-popover__container {
@@ -79,11 +75,8 @@ $trigger-margin: 9px;
 
     overflow: hidden;
 
-    padding:
-        kbq-css-variable(popover-size-header-padding-top)
-        kbq-css-variable(popover-size-header-padding-horizontal)
-        kbq-css-variable(popover-size-header-padding-bottom)
-        kbq-css-variable(popover-size-header-padding-horizontal);
+    padding: kbq-css-variable(popover-size-header-padding-top) kbq-css-variable(popover-size-header-padding-horizontal)
+        kbq-css-variable(popover-size-header-padding-bottom) kbq-css-variable(popover-size-header-padding-horizontal);
 
     & .kbq-popover__header-text {
         @include common.kbq-truncate-line();
@@ -91,8 +84,7 @@ $trigger-margin: 9px;
 }
 
 .kbq-popover__footer {
-    padding:
-        kbq-css-variable(popover-size-footer-padding-vertical)
+    padding: kbq-css-variable(popover-size-footer-padding-vertical)
         kbq-css-variable(popover-size-footer-padding-horizontal);
 }
 

package/popover/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './popover.module';
-export * from './popover.component';
 export * from './popover-animations';
 export * from './popover-confirm.component';
+export * from './popover.component';
+export * from './popover.module';