@koobiq/components 18.25.0 → 18.26.0

package/file-upload/_file-upload-theme.scss

@@ -1,4 +1,4 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
 @mixin kbq-file-upload-theme() {
     .kbq-file-upload {
@@ -135,39 +135,39 @@
     .kbq-single-file-upload {
         & .file-item__text-wrapper,
         & .dropzone__text {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 
     .kbq-multiple-file-upload {
         .multiple__header {
-            @include kbq-typography-level-to-styles-css-variables(typography, subheading);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
         .multiple__caption {
             &,
             .kbq-link {
-                @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
             }
         }
 
         .kbq-file-multiple-uploaded__header {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
         .multiple__uploaded-item {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
         .kbq-file-upload {
             .kbq-list-item,
             .kbq-list-option {
-                @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
             }
         }
     }
 
     .kbq-file-upload__hint .kbq-hint .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

package/file-upload/file-upload.scss

@@ -1,4 +1,4 @@
-@use './file-upload-theme' as *;
+@use './file-upload-theme' as theme;
 
 .kbq-file-upload {
     box-sizing: border-box;
@@ -37,5 +37,5 @@
     }
 }
 
-@include kbq-file-upload-theme();
-@include kbq-file-upload-typography();
+@include theme.kbq-file-upload-theme();
+@include theme.kbq-file-upload-typography();

package/list/_list-theme.scss

@@ -1,6 +1,6 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
-@mixin kbq-list-item($state-name) {
+@mixin _kbq-list-item($state-name) {
     background: var(--kbq-list-#{$state-name}-container-background);
 
     .kbq-list-text {
@@ -22,32 +22,22 @@
 
 @mixin kbq-list-theme() {
     .kbq-list-option {
-        @include kbq-list-item(default);
+        @include _kbq-list-item(default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-list-item(states-hover);
+            @include _kbq-list-item(states-hover);
         }
 
         &.kbq-selected {
-            @include kbq-list-item(states-selected);
+            @include _kbq-list-item(states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-list-item(states-selected-hover);
+                @include _kbq-list-item(states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-list-item(states-disabled);
-        }
-
-        &:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        &:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
+            @include _kbq-list-item(states-disabled);
         }
     }
 
@@ -61,11 +51,11 @@
 @mixin kbq-list-typography() {
     .kbq-list-item,
     .kbq-list-option {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
         .kbq-list-text {
             .kbq-list-option-caption {
-                @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
             }
         }
     }

package/list/list.scss

@@ -1,7 +1,22 @@
 @use '../core/styles/common/list';
-@use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
-@use './list-theme' as *;
+@use './list-theme' as theme;
+
+@mixin _kbq-list-item-border-radius() {
+    $selectors: '.kbq-selected';
+
+    border-radius: var(--kbq-size-border-radius);
+
+    &:is(#{$selectors}):has(+ :is(#{$selectors})) {
+        border-bottom-left-radius: unset;
+        border-bottom-right-radius: unset;
+    }
+
+    &:is(#{$selectors}) + :is(#{$selectors}) {
+        border-top-left-radius: unset;
+        border-top-right-radius: unset;
+    }
+}
 
 .kbq-list,
 .kbq-list-selection {
@@ -13,8 +28,7 @@
 .kbq-list-option {
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-item-base();
-
-    border-radius: var(--kbq-size-border-radius);
+    @include _kbq-list-item-border-radius();
 
     &:not(.kbq-disabled) {
         cursor: pointer;
@@ -35,5 +49,5 @@
     }
 }
 
-@include kbq-list-theme();
-@include kbq-list-typography();
+@include theme.kbq-list-theme();
+@include theme.kbq-list-typography();

package/modal/modal-tokens.scss

@@ -5,7 +5,7 @@
     --kbq-modal-size-border-radius: var(--kbq-size-s);
     --kbq-modal-size-header-padding-vertical: var(--kbq-size-l);
     --kbq-modal-size-header-padding-left: var(--kbq-size-xxl);
-    --kbq-modal-size-header-padding-right: var(--kbq-size-5xl);
+    --kbq-modal-size-header-padding-right: var(--kbq-size-6xl);
     --kbq-modal-size-close-button-margin-left: var(--kbq-size-s);
     --kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);
     --kbq-modal-size-content-padding-top: 0;

package/modal/modal.scss

@@ -9,7 +9,7 @@
 
     position: relative;
 
-    top: 48px;
+    top: var(--kbq-size-5xl);
 
     border-radius: var(--kbq-modal-size-border-radius);
 
@@ -50,8 +50,8 @@
     & .kbq-modal-close {
         position: absolute;
 
-        top: 16px;
-        right: 8px;
+        top: var(--kbq-size-l);
+        right: var(--kbq-size-l);
     }
 }
 
@@ -95,6 +95,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+
+    padding-top: var(--kbq-size-3xs);
+    padding-bottom: var(--kbq-size-3xs);
 }
 
 .kbq-modal-body {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.25.0",
+    "version": "18.26.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.25.0",
-        "@koobiq/angular-moment-adapter": "18.25.0",
-        "@koobiq/angular-luxon-adapter": "18.25.0",
+        "@koobiq/cdk": "18.26.0",
+        "@koobiq/angular-moment-adapter": "18.26.0",
+        "@koobiq/angular-luxon-adapter": "18.26.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^9.4.0",
         "@koobiq/tokens-builder": "3.11.0",

package/popover/popover.component.d.ts

@@ -1,6 +1,6 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, TemplateRef, Type } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
@@ -38,7 +38,7 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 };
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
-export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit {
+export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit, OnInit {
     protected scrollStrategy: () => ScrollStrategy;
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
@@ -86,6 +86,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
+    ngOnInit(): void;
     ngAfterContentInit(): void;
     updateData(): void;
     /** Updates the position of the current popover. */
@@ -94,7 +95,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     defaultClosingActions(): import("rxjs").Observable<MouseEvent>[];
-    closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
+    closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
+    private hideIfNotInViewPort;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
     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; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
     static ngAcceptInputType_arrow: unknown;

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.25.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.25.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.26.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.26.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.4.0");

package/sidepanel/sidepanel-tokens.scss

@@ -3,14 +3,14 @@
     --kbq-sidepanel-size-medium-width: 640px;
     --kbq-sidepanel-size-large-width: 960px;
     --kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);
-    --kbq-sidepanel-size-header-padding-left: var(--kbq-size-3xl);
-    --kbq-sidepanel-size-header-padding-right: var(--kbq-size-m);
+    --kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);
+    --kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);
     --kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);
-    --kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-3xl);
+    --kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);
     --kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);
     --kbq-sidepanel-size-footer-padding-top: var(--kbq-size-s);
     --kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);
-    --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-3xl);
+    --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);
     --kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);
     /* THEME TOKENS */
     --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);

package/textarea/textarea-tokens.scss

@@ -1,6 +1,6 @@
 .kbq-textarea {
     --kbq-textarea-size-min-height: 64px;
     --kbq-textarea-size-max-height: 96px;
-    --kbq-textarea-size-padding-vertical: var(--kbq-size-xs);
+    --kbq-textarea-size-padding-vertical: 5px;
     --kbq-textarea-size-padding-horizontal: var(--kbq-size-m);
 }

package/top-bar/top-bar-tokens.scss

@@ -1,12 +1,13 @@
-.kbq-top-bar {
+:where(.kbq-top-bar) {
     --kbq-top-bar-position: sticky;
     --kbq-top-bar-background: var(--kbq-background-bg);
     --kbq-top-bar-spacer-min-width: 80px;
     --kbq-top-bar-padding-vertical: var(--kbq-size-xl);
     --kbq-top-bar-padding-horizontal: var(--kbq-size-xxl);
     --kbq-top-bar-border-radius: 0;
-    --kbq-top-bar-left-gap: 0;
-    --kbq-top-bar-right-gap: var(--kbq-size-s);
+    --kbq-top-bar-container-start-gap: 0;
+    --kbq-top-bar-container-start-basis: 0;
+    --kbq-top-bar-container-end-gap: var(--kbq-size-s);
     --kbq-top-bar-shadow-bottom: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-top-bar-shadow-transition: ease-out 300ms;
 }

package/top-bar/top-bar.d.ts

@@ -1,3 +1,4 @@
+import { KbqOverflowItems } from '@koobiq/components/overflow-items';
 import * as i0 from "@angular/core";
 export declare class KbqTopBarSpacer {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarSpacer, never>;
@@ -11,6 +12,12 @@ export declare class KbqTopBarContainer {
      * Conditionally applies a CSS class based on the value
      */
     placement: import("@angular/core").InputSignal<"start" | "end">;
+    /**
+     * Track if container has `KbqOverflowItems` directive assigned.
+     * Used to replace `gap` with `margin` so `KbqOverflowItems` will calculate correct width on resize.
+     * @docs-private
+     */
+    protected readonly overflowItems: KbqOverflowItems | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarContainer, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTopBarContainer, "[kbqTopBarContainer]", never, { "placement": { "alias": "placement"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/top-bar/top-bar.scss

@@ -14,17 +14,41 @@
 
     .kbq-top-bar-spacer {
         height: 100%;
-        flex: 1 0 var(--kbq-top-bar-spacer-min-width);
+        flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
     .kbq-top-bar-container__start {
         display: flex;
-        gap: var(--kbq-top-bar-left-gap);
+        gap: var(--kbq-top-bar-container-start-gap);
+        flex: 1 0 var(--kbq-top-bar-container-start-basis);
+        justify-content: flex-start;
+        min-width: 0;
     }
 
     .kbq-top-bar-container__end {
         display: flex;
-        gap: var(--kbq-top-bar-right-gap);
+        gap: var(--kbq-top-bar-container-end-gap);
+        justify-content: end;
+    }
+
+    .kbq-top-bar-container__with-overflow-items {
+        gap: unset;
+        padding: 1px;
+
+        > .kbq-overflow-item {
+            &:not(:last-of-type) {
+                margin-right: var(--kbq-top-bar-container-end-gap);
+            }
+
+            // apply margin if the last item needs to be alwaysVisible
+            &:last-of-type:is([aria-hidden='false']) + .kbq-overflow-items-result {
+                margin-left: var(--kbq-top-bar-container-end-gap);
+            }
+        }
+
+        .kbq-overflow-items-result:first-child {
+            margin-right: var(--kbq-top-bar-container-end-gap);
+        }
     }
 
     &.kbq-top-bar_with-shadow {