@koobiq/components 16.0.0-beta.8 → 17.0.0-beta.1

package/modal/modal.scss

@@ -43,6 +43,21 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-modal_large {
         width: var(--kbq-modal-size-large-width, map.get($tokens, modal-size-large-width));
     }
+
+    // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отстутствие футера
+    //&.kbq-modal_no-footer .kbq-modal-body {
+    //    padding-bottom: var(
+    //        --kbq-modal-size-content-padding-bottom-without-footer,
+    //        map.get($tokens, modal-size-content-padding-bottom-without-footer)
+    //    );
+    //}
+
+    & .kbq-modal-close {
+        position: absolute;
+
+        top: 16px;
+        right: 8px;
+    }
 }
 
 .kbq-modal-wrap {
@@ -78,6 +93,10 @@ $tokens: meta.module-variables(tokens) !default;
         var(--kbq-modal-size-header-padding-right, map.get($tokens, modal-size-header-padding-right))
         var(--kbq-modal-size-header-padding-vertical, map.get($tokens, modal-size-header-padding-vertical))
         var(--kbq-modal-size-header-padding-left, map.get($tokens, modal-size-header-padding-left));
+
+    & + .kbq-modal-body {
+        padding-top: var(--kbq-modal-size-content-padding-top, map.get($tokens, modal-size-content-padding-top));
+    }
 }
 
 .kbq-modal-title {
@@ -87,35 +106,33 @@ $tokens: meta.module-variables(tokens) !default;
     overflow: hidden;
 }
 
+/* stylelint-disable no-descending-specificity */
 .kbq-modal-body {
     display: block;
     overflow-y: auto;
 
     max-height: calc(100vh - 260px);
 
-    padding-right: var(
-        --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-    );
-
-    padding-left: var(
-        --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-    );
-
-    padding-bottom: var(
-        --kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom)
-    );
+    padding:
+        var(
+            --kbq-modal-size-content-padding-top-without-header,
+            map.get($tokens, modal-size-content-padding-top-without-header)
+        )
+        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal))
+        var(--kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom))
+        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal));
 
     word-wrap: break-word;
 }
+/* stylelint-enable no-descending-specificity */
 
-.kbq-modal-footer {
+.kbq-modal-footer,
+.kbq-confirm-footer {
     display: flex;
     align-items: center;
 
     padding:
-        var(--kbq-modal-size-footer-padding-top, map.get($tokens, modal-size-footer-padding-top))
-        var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontalt))
-        var(--kbq-modal-size-footer-padding-bottom, map.get($tokens, modal-size-footer-padding-bottom))
+        var(--kbq-modal-size-footer-padding-vertical, map.get($tokens, modal-size-footer-padding-vertical))
         var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
 
     gap: var(

package/navbar/_navbar-theme.scss

@@ -6,7 +6,6 @@
 
 @mixin kbq-navbar-theme($theme) {
     $background: map.get($theme, background);
-    $primary: map.get($theme, theme);
 
     $navbar: map.get(map.get($theme, components), navbar);
     $navbar-item: map.get(map.get($theme, components), navbar-item);
@@ -35,11 +34,13 @@
     .kbq-navbar-toggle {
         color: map.get($navbar-item, color);
 
-        & > .kbq-icon {
-            color: map.get($navbar-item, icon-color);
+        &.kbq-horizontal, &.kbq-vertical {
+            & > .kbq-icon {
+                color: map.get($navbar-item, icon-color);
+            }
         }
 
-        & .kbq-navbar-item__arrow-icon {
+        & .kbq-icon.kbq-navbar-item__arrow-icon {
             color: map.get($navbar-item, color);
         }
 
@@ -47,7 +48,7 @@
             background: map.get($navbar-item, state-selected);
         }
 
-        &:hover:not(.kbq-navbar-item_button) {
+        &:hover:not(.kbq-navbar-item_has-nested, .kbq-navbar-item_form-field) {
             cursor: pointer;
 
             & .kbq-navbar-item__overlay {
@@ -55,13 +56,13 @@
             }
         }
 
-        &:active:not(.kbq-navbar-item_button) {
+        &:active:not(.kbq-navbar-item_has-nested, .kbq-navbar-item_form-field) {
             & .kbq-navbar-item__overlay {
                 background: map.get($navbar-item, state-active);
             }
         }
 
-        &[disabled] {
+        &.kbq-disabled {
             pointer-events: none;
             cursor: default;
 

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';
@@ -72,6 +73,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 +95,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;
@@ -164,5 +167,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>;
 }

package/navbar/navbar-item.scss

@@ -100,7 +100,7 @@ $tokens: meta.module-variables(tokens) !default;
         padding-left: var(--kbq-vertical-navbar-size-icon-margin, map.get($tokens, vertical-navbar-size-icon-margin));
     }
 
-    &.kbq-navbar-item_button {
+    &.kbq-navbar-item_has-nested {
         padding-left: 12px;
         padding-right: 12px;
     }
@@ -124,7 +124,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-.kbq-navbar-item.kbq-navbar-item_button .kbq-button {
+.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button {
     flex: 1;
 
     & .kbq-button-wrapper {
@@ -157,3 +157,8 @@ a.kbq-navbar-title {
         z-index: 1;
     }
 }
+
+.kbq-navbar-item.kbq-navbar-item_form-field .kbq-navbar-item__overlay {
+    display: none;
+}
+

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/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@koobiq/components",
-    "version": "16.0.0-beta.8",
+    "version": "17.0.0-beta.1",
     "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,23 @@
     ],
     "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.8",
-        "@koobiq/angular-moment-adapter": "^16.0.0-beta.8",
-        "@koobiq/angular-luxon-adapter": "^16.0.0-beta.8",
+        "@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/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "^3.0.0-beta.6",
-        "@koobiq/design-tokens": "^3.0.0-beta.6",
+        "@koobiq/tokens-builder": "^3.0.0-beta.23",
+        "@koobiq/design-tokens": "^3.0.0-beta.23",
         "marked": "^4.0.18"
     },
     "dependencies": {
-        "tslib": "^2.4.0"
+        "tslib": "^2.6.2"
     },
     "ng-update": {
         "packageGroup": [
@@ -62,18 +62,18 @@
             "esm": "./esm2022/alert/koobiq-components-alert.mjs",
             "default": "./fesm2022/koobiq-components-alert.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"
         },
+        "./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"
+        },
         "./button": {
             "types": "./button/index.d.ts",
             "esm2022": "./esm2022/button/koobiq-components-button.mjs",
@@ -182,18 +182,18 @@
             "esm": "./esm2022/loader-overlay/koobiq-components-loader-overlay.mjs",
             "default": "./fesm2022/koobiq-components-loader-overlay.mjs"
         },
-        "./modal": {
-            "types": "./modal/index.d.ts",
-            "esm2022": "./esm2022/modal/koobiq-components-modal.mjs",
-            "esm": "./esm2022/modal/koobiq-components-modal.mjs",
-            "default": "./fesm2022/koobiq-components-modal.mjs"
-        },
         "./markdown": {
             "types": "./markdown/index.d.ts",
             "esm2022": "./esm2022/markdown/koobiq-components-markdown.mjs",
             "esm": "./esm2022/markdown/koobiq-components-markdown.mjs",
             "default": "./fesm2022/koobiq-components-markdown.mjs"
         },
+        "./modal": {
+            "types": "./modal/index.d.ts",
+            "esm2022": "./esm2022/modal/koobiq-components-modal.mjs",
+            "esm": "./esm2022/modal/koobiq-components-modal.mjs",
+            "default": "./fesm2022/koobiq-components-modal.mjs"
+        },
         "./navbar": {
             "types": "./navbar/index.d.ts",
             "esm2022": "./esm2022/navbar/koobiq-components-navbar.mjs",
@@ -254,18 +254,18 @@
             "esm": "./esm2022/splitter/koobiq-components-splitter.mjs",
             "default": "./fesm2022/koobiq-components-splitter.mjs"
         },
-        "./tabs": {
-            "types": "./tabs/index.d.ts",
-            "esm2022": "./esm2022/tabs/koobiq-components-tabs.mjs",
-            "esm": "./esm2022/tabs/koobiq-components-tabs.mjs",
-            "default": "./fesm2022/koobiq-components-tabs.mjs"
-        },
         "./table": {
             "types": "./table/index.d.ts",
             "esm2022": "./esm2022/table/koobiq-components-table.mjs",
             "esm": "./esm2022/table/koobiq-components-table.mjs",
             "default": "./fesm2022/koobiq-components-table.mjs"
         },
+        "./tabs": {
+            "types": "./tabs/index.d.ts",
+            "esm2022": "./esm2022/tabs/koobiq-components-tabs.mjs",
+            "esm": "./esm2022/tabs/koobiq-components-tabs.mjs",
+            "default": "./fesm2022/koobiq-components-tabs.mjs"
+        },
         "./tags": {
             "types": "./tags/index.d.ts",
             "esm2022": "./esm2022/tags/koobiq-components-tags.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>;
 }