@koobiq/components 19.7.0 → 19.8.1

package/inline-edit/inline-edit.d.ts

@@ -62,6 +62,8 @@ export declare class KbqInlineEdit {
     readonly editModeWidth: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
     /** User-defined tooltip placement */
     readonly tooltipPlacement: import("@angular/core").InputSignal<PopUpPlacements | undefined>;
+    /** Classes to be passed to the inline edit panel. */
+    readonly overlayPanelClass: import("@angular/core").InputSignal<string | string[]>;
     /** Handler function to retrieve the current value */
     readonly getValueHandler: import("@angular/core").InputSignal<(() => unknown) | undefined>;
     /** Handler function to update the value */
@@ -155,5 +157,5 @@ export declare class KbqInlineEdit {
     private getInputNativeElement;
     private markAllAsTouched;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }

package/inline-edit/inline-edit.scss

@@ -78,11 +78,6 @@
     .kbq-label {
         color: var(--kbq-inline-edit-label-color);
     }
-
-    .kbq-inline-edit__focus_container {
-        display: flex;
-        flex-direction: column;
-    }
 }
 
 @mixin _inline-edit-typography {
@@ -123,13 +118,8 @@
     }
 
     &.kbq-inline-edit_view {
-        .kbq-inline-edit__view-container {
-            display: flex;
-            text-overflow: ellipsis;
-        }
-
+        .kbq-inline-edit__view-container,
         .kbq-inline-edit__view-content {
-            display: inline-block;
             text-overflow: ellipsis;
         }
     }

package/link/_link-theme.scss

@@ -29,8 +29,15 @@
         box-decoration-break: clone;
     }
 
-    &.kbq-text-with-icon .kbq-icon {
-        vertical-align: baseline;
+    &.kbq-text-with-icon {
+        .kbq-icon {
+            vertical-align: baseline;
+
+            &:has(> svg) {
+                vertical-align: middle;
+                line-height: 0;
+            }
+        }
     }
 
     &.kbq-text-with-icon .kbq-link__text {

package/navbar/_navbar-theme.scss

@@ -15,10 +15,6 @@
     & > .kbq-icon.kbq-empty {
         color: var(--kbq-navbar-item-#{$state-name}-content-icon-left) !important;
     }
-
-    .kbq-navbar-item__arrow-icon {
-        color: var(--kbq-navbar-item-#{$state-name}-content-icon-right) !important;
-    }
 }
 
 button {

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

@@ -16,7 +16,9 @@ export declare class KbqNavbarBrand extends KbqTooltipTrigger implements AfterCo
     /** alternative display of the brand name in two lines */
     longTitle: boolean;
     /** text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title. */
-    collapsedText: string;
+    get collapsedText(): string;
+    set collapsedText(value: string);
+    private _collapsedText;
     get isLink(): boolean;
     /** @docs-private */
     get croppedText(): string;

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

@@ -122,6 +122,7 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     get hasCroppedText(): boolean;
     constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
     ngAfterContentInit(): void;
+    updateDropdown(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;

package/navbar/navbar-item.scss

@@ -20,6 +20,15 @@
         min-height: var(--kbq-size-l);
     }
 
+    // Filled fade-contrast only: its background is a semi-transparent tint, so the
+    // navbar icon shows through. Composite the tint over an opaque bg-tertiary substrate.
+    // The outline variant is intentionally left untouched — it stays a clean transparent outline.
+    & .kbq-badge-filled.kbq-badge_fade-contrast {
+        background:
+            linear-gradient(var(--kbq-background-contrast-fade), var(--kbq-background-contrast-fade)),
+            var(--kbq-background-bg-tertiary);
+    }
+
     & .kbq-button-icon {
         position: absolute;
         padding-left: var(--kbq-size-xs);

package/navbar/navbar.component.d.ts

@@ -14,6 +14,7 @@ export declare class KbqFocusableComponent implements AfterContentInit, AfterVie
     get tabIndex(): any;
     set tabIndex(value: any);
     private _tabIndex;
+    private lastFocusOrigin;
     get optionFocusChanges(): Observable<KbqNavbarFocusableItemEvent>;
     get optionBlurChanges(): Observable<KbqNavbarFocusableItemEvent>;
     private readonly destroyRef;

package/notification-center/_notification-center-theme.scss

@@ -11,7 +11,8 @@
         }
     }
 
-    .kbq-notification-center-error-container {
+    .kbq-notification-center-error-container,
+    .kbq-notification-center-load-more-error {
         color: var(--kbq-foreground-error);
     }
 }

package/notification-center/notification-center.d.ts

@@ -14,6 +14,7 @@ export declare const KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION: {
     noNotifications: string;
     failedToLoadNotifications: string;
     repeat: string;
+    loadingMore: string;
 };
 /** Injection Token for providing configuration of notification-center */
 export declare const KBQ_NOTIFICATION_CENTER_CONFIGURATION: InjectionToken<unknown>;
@@ -46,6 +47,11 @@ export declare class KbqNotificationCenterComponent extends KbqPopUp implements
     protected isTopOverflow: boolean;
     /** @docs-private */
     protected isBottomOverflow: boolean;
+    /** Distance in pixels from the bottom of the list at which the next page is requested.
+     * @docs-private */
+    protected scrolledToBottomOffset: number;
+    /** Emits on every scroll of the list container; drives the scroll-to-bottom check. */
+    private readonly scroll$;
     /** localized data
      * @docs-private */
     get localeData(): any;
@@ -61,6 +67,25 @@ export declare class KbqNotificationCenterComponent extends KbqPopUp implements
     private _popoverHeight;
     constructor();
     ngAfterViewInit(): void;
+    /** Handles the list container scroll: updates overflow shadows and feeds the scroll-to-bottom check.
+     * @docs-private */
+    protected onContainerScroll(): void;
+    /** Retries loading the next page from the bottom error row.
+     * @docs-private */
+    protected retryLoadMore(): void;
+    /**
+     * Requests the next page (via `service.onNextPage`) once the list is scrolled to within
+     * `scrolledToBottomOffset` pixels of the bottom. Two triggers feed it: the user scrolling, and a
+     * page finishing loading. The latter keeps paging when a freshly loaded page is too short to
+     * overflow the viewport — otherwise no further scroll event would fire and pagination would
+     * stall. Suppressed while a load is in flight, errored, or when there is nothing more to load.
+     */
+    private subscribeToScrolledToBottom;
+    /** Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom. */
+    private isScrolledToBottom;
+    /** Emits `onNextPage` unless a load is already in flight, errored, or there is nothing more to load. */
+    private requestNextPage;
+    private focusScrollContainer;
     /** @docs-private */
     updateClassMap(placement: string, customClass: string, size: KbqPopUpSizeValues): void;
     /** @docs-private */
@@ -102,6 +127,8 @@ export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNot
     panelClass: string;
     /** Offset of popUp */
     offset: number | null;
+    /** Distance in pixels from the bottom of the list at which the next page is requested via `onNextPage`. */
+    scrolledToBottomOffset: number;
     /** Use popover or not */
     get popoverMode(): boolean;
     set popoverMode(value: boolean);
@@ -149,8 +176,9 @@ export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNot
     /** @docs-private */
     closingActions(): import("rxjs").Observable<void | import("@angular/cdk/scrolling-module.d-ud2XrbF8").C | MouseEvent>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNotificationCenterTrigger, "[kbqNotificationCenterTrigger]", ["kbqNotificationCenterTrigger"], { "placement": { "alias": "kbqNotificationCenterPlacement"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "kbqNotificationCenterPanelClass"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "popoverMode": { "alias": "popoverMode"; "required": false; }; "popoverHeight": { "alias": "popoverHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "stickToWindow": { "alias": "stickToWindow"; "required": false; }; "container": { "alias": "container"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNotificationCenterTrigger, "[kbqNotificationCenterTrigger]", ["kbqNotificationCenterTrigger"], { "placement": { "alias": "kbqNotificationCenterPlacement"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "kbqNotificationCenterPanelClass"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; }; "popoverMode": { "alias": "popoverMode"; "required": false; }; "popoverHeight": { "alias": "popoverHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "stickToWindow": { "alias": "stickToWindow"; "required": false; }; "container": { "alias": "container"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
     static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_scrolledToBottomOffset: unknown;
     static ngAcceptInputType_popoverMode: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/notification-center/notification-center.scss

@@ -36,7 +36,7 @@
 
     justify-content: space-between;
 
-    padding: var(--kbq-size-xl) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl);
+    padding: var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl);
 }
 
 .kbq-notification-center-title {
@@ -67,7 +67,7 @@
     display: flex;
     flex-direction: row;
 
-    padding: var(--kbq-size-s) var(--kbq-size-xxl);
+    padding: var(--kbq-size-s) var(--kbq-size-xl);
 
     & .kbq-notification-center-sub-header__button {
         position: absolute;
@@ -92,7 +92,7 @@
 
     border-radius: inherit;
 
-    padding-bottom: var(--kbq-size-m);
+    padding-bottom: var(--kbq-size-xl);
 
     & .kbq-loader-overlay_parent {
         border-radius: inherit;
@@ -103,6 +103,31 @@
     }
 }
 
+.kbq-notification-center-load-more {
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    padding: 26px 0;
+}
+
+.kbq-notification-center-load-more-error {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+
+    padding: var(--kbq-size-xxs) var(--kbq-size-xxl);
+
+    text-align: center;
+
+    & .kbq-button {
+        margin-top: var(--kbq-size-s);
+    }
+}
+
 .kbq-notification-center-empty-container,
 .kbq-notification-center-error-container {
     display: flex;

package/notification-center/notification-center.service.d.ts

@@ -4,6 +4,8 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface KbqNotificationItem extends Omit<KbqToastData, 'closeButton'> {
     id?: string;
+    /** Numeric id of the shown toast, set by `push()` and consumed by `hideToast()`. */
+    toastId?: number;
     title?: string | TemplateRef<unknown>;
     style?: string | KbqToastStyle;
     icon?: boolean | TemplateRef<unknown>;
@@ -19,6 +21,13 @@ type KbqNotificationsGroup = {
     title: string;
     items: KbqNotificationItem[];
 };
+/** Payload emitted by `KbqNotificationCenterService.onDelete`. */
+export type KbqNotificationDeleteEvent = {
+    /** What was removed: a single item, a whole date group, or all notifications. */
+    type: 'item' | 'group' | 'all';
+    /** The notification items that were removed. */
+    items: KbqNotificationItem[];
+};
 export declare class KbqNotificationCenterService {
     /** @docs-private */
     private readonly adapter;
@@ -32,12 +41,36 @@ export declare class KbqNotificationCenterService {
     readonly loadingMode: BehaviorSubject<boolean>;
     /** @docs-private */
     readonly errorMode: BehaviorSubject<boolean>;
+    /**
+     * Whether the bottom "load more" spinner is shown while the next page is being loaded.
+     * Note: this is the infinite-scroll indicator and is distinct from `loadingMode`,
+     * which renders the full-screen loader instead of the list.
+     */
+    readonly loadingMore: BehaviorSubject<boolean>;
+    /**
+     * Whether the bottom "load more" error row (with a retry button) is shown.
+     * Distinct from `errorMode`, which replaces the whole list with the full-screen error state.
+     */
+    readonly loadMoreErrorMode: BehaviorSubject<boolean>;
+    /**
+     * Whether there are more notifications to load. While `true`, scrolling to the bottom
+     * emits `onNextPage`; set it to `false` to stop further infinite-scroll requests.
+     */
+    readonly hasMore: BehaviorSubject<boolean>;
     /** @docs-private */
     readonly onRead: BehaviorSubject<KbqNotificationItem | null>;
     /** Triggers an event when the user presses the reload button. */
     readonly onReload: EventEmitter<void>;
+    /** Triggers an event when the list is scrolled to the bottom and the next page should be loaded. */
+    readonly onNextPage: EventEmitter<void>;
+    /** Triggers an event when an item, a group, or all notifications are removed. */
+    readonly onDelete: EventEmitter<KbqNotificationDeleteEvent>;
     private originalItems;
-    /** @docs-private */
+    /**
+     * Grouped notifications, always ordered from newest to oldest: day groups are sorted by date
+     * descending, and notifications within each day are sorted by date descending.
+     * @docs-private
+     */
     readonly groupedItems: Observable<KbqNotificationsGroup[]>;
     /** Emits an event whenever the changes. */
     readonly changes: Observable<boolean | KbqNotificationItem | KbqNotificationItem[] | null>;
@@ -55,8 +88,16 @@ export declare class KbqNotificationCenterService {
     setLoadingMode(value: boolean): void;
     /** Set error mode */
     setErrorMode(value: boolean): void;
+    /** Set the bottom "load more" spinner visibility. */
+    setLoadingMore(value: boolean): void;
+    /** Set the bottom "load more" error state visibility. */
+    setLoadMoreErrorMode(value: boolean): void;
+    /** Set whether there are more notifications to load via infinite scroll. */
+    setHasMore(value: boolean): void;
     /** Push new notification item in center */
     push(item: KbqNotificationItem): void;
+    /** Hides the toast that corresponds to the given notification item. */
+    hideToast(item: KbqNotificationItem): void;
     /** Remove notification item */
     remove(removedItem: KbqNotificationItem): void;
     /** Remove group of notification items */
@@ -64,6 +105,8 @@ export declare class KbqNotificationCenterService {
     /** Remove all notification items */
     removeAll(): void;
     private makeGroup;
+    /** Compares two notifications by date so the newest comes first. */
+    private compareByDateDesc;
     private setIds;
     private setReadState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterService, never>;

package/notification-center/notification-item.scss

@@ -46,7 +46,7 @@
     flex: 1;
 
     padding-top: var(--kbq-size-m);
-    padding-right: var(--kbq-size-l);
+    padding-right: var(--kbq-size-s);
     padding-bottom: var(--kbq-size-m);
 
     overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.7.0",
+    "version": "19.8.1",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,12 +25,12 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.7.0",
-        "@koobiq/angular-moment-adapter": "19.7.0",
-        "@koobiq/angular-luxon-adapter": "19.7.0",
+        "@koobiq/cdk": "19.8.1",
+        "@koobiq/angular-moment-adapter": "19.8.1",
+        "@koobiq/angular-luxon-adapter": "19.8.1",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
-        "@koobiq/design-tokens": "3.14.0"
+        "@koobiq/design-tokens": "^3.14.0"
     },
     "dependencies": {
         "tslib": "^2.6.2"

package/popover/popover.scss

@@ -23,7 +23,7 @@ $arrow-padding: 24px;
     z-index: 1;
 
     &.kbq-popover_small {
-        max-width: var(--kbq-popover-size-container-width-small);
+        width: var(--kbq-popover-size-container-width-small);
 
         & .kbq-popover__content_default-paddings.kbq-popover__content {
             padding: var(--kbq-size-l);
@@ -31,11 +31,11 @@ $arrow-padding: 24px;
     }
 
     &.kbq-popover_medium {
-        max-width: var(--kbq-popover-size-container-width-medium);
+        width: var(--kbq-popover-size-container-width-medium);
     }
 
     &.kbq-popover_large {
-        max-width: var(--kbq-popover-size-container-width-large);
+        width: var(--kbq-popover-size-container-width-large);
     }
 
     @include pop-up.popup-margins(kbq-popover, 8px);