@koobiq/components 19.8.0 → 19.8.2

package/filter-bar/_filter-bar-theme.scss

@@ -21,10 +21,6 @@
 }
 
 @mixin kbq-button-changed-filter() {
-    .kbq-button-overlay {
-        display: none;
-    }
-
     .kbq-button,
     .kbq-button-icon {
         -webkit-font-smoothing: antialiased;

package/icon/icon-item-tokens.scss

@@ -10,7 +10,7 @@
     --kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);
     --kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);
     --kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);
-    --kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);
+    --kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-contrast);
     --kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);
     --kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);
     --kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);

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/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.8.0",
+    "version": "19.8.2",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -21,16 +21,16 @@
     },
     "homepage": "https://github.com/koobiq/angular-components#readme",
     "peerDependencies": {
-        "@angular/animations": "^19.0.0",
-        "@angular/cdk": "^19.0.0",
-        "@angular/core": "^19.0.0",
-        "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.8.0",
-        "@koobiq/angular-moment-adapter": "19.8.0",
-        "@koobiq/angular-luxon-adapter": "19.8.0",
+        "@angular/animations": ">=19.0.0",
+        "@angular/cdk": ">=19.0.0",
+        "@angular/core": ">=19.0.0",
+        "@angular/forms": ">=19.0.0",
+        "@koobiq/cdk": "19.8.2",
+        "@koobiq/angular-moment-adapter": "19.8.2",
+        "@koobiq/angular-luxon-adapter": "19.8.2",
         "@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"