@koobiq/components 20.0.0 → 20.1.0

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/index.d.ts

@@ -12,6 +12,8 @@ import { AnimationTriggerMetadata } from '@angular/animations';
 
 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>;
@@ -27,6 +29,13 @@ type KbqNotificationsGroup = {
     title: string;
     items: KbqNotificationItem[];
 };
+/** Payload emitted by `KbqNotificationCenterService.onDelete`. */
+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[];
+};
 declare class KbqNotificationCenterService {
     /** @docs-private */
     private readonly adapter;
@@ -40,12 +49,36 @@ 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>;
@@ -63,8 +96,16 @@ 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 */
@@ -72,6 +113,8 @@ 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>;
@@ -87,6 +130,7 @@ declare const KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION: {
     noNotifications: string;
     failedToLoadNotifications: string;
     repeat: string;
+    loadingMore: string;
 };
 /** Injection Token for providing configuration of notification-center */
 declare const KBQ_NOTIFICATION_CENTER_CONFIGURATION: InjectionToken<unknown>;
@@ -114,6 +158,11 @@ declare class KbqNotificationCenterComponent extends KbqPopUp implements AfterVi
     configuration: any;
     /** @docs-private */
     protected popoverMode: 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;
@@ -124,11 +173,44 @@ declare class KbqNotificationCenterComponent extends KbqPopUp implements AfterVi
     /** @docs-private */
     isTrapFocus: boolean;
     readonly switcher: i0.Signal<KbqButton>;
+    /** Scrollable list container; used to measure scroll position for infinite scroll. */
+    private readonly scrollContainer;
     get popoverHeight(): string;
     set popoverHeight(value: string);
     private _popoverHeight;
     constructor();
     ngAfterViewInit(): void;
+    /** Handles the list container scroll: feeds the scroll-to-bottom check that drives infinite scroll.
+     * Overflow shadows are handled declaratively by the `kbqOverflowShadow*` directives.
+     * @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;
+    /**
+     * Reveals the bottom "load more" spinner / error row when it first appears. Both rows are appended
+     * below the last item and can land outside the viewport (the next page is requested while the user
+     * is up to `scrolledToBottomOffset` px above the true bottom). Only a genuine false->true transition
+     * reveals the row: the BehaviorSubject's replayed current value is ignored (`pairwise` needs two
+     * emissions), so the panel always opens scrolled to the top — reopening it while a load-more error
+     * is still set never jumps to the bottom.
+     */
+    private subscribeToRevealLoadMoreRow;
+    /** Scrolls the list container to its bottom so a freshly-appended bottom row becomes visible. */
+    private scrollToBottom;
+    private focusScrollContainer;
     /** @docs-private */
     updateClassMap(placement: string, customClass: string, size: KbqPopUpSizeValues): void;
     /** @docs-private */
@@ -169,6 +251,8 @@ declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificati
     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);
@@ -216,8 +300,9 @@ declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificati
     /** @docs-private */
     closingActions(): rxjs.Observable<void | _angular_cdk_scrolling_module_d.CdkScrollable | 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;
 }
@@ -234,4 +319,4 @@ declare class KbqNotificationCenterModule {
 }
 
 export { KBQ_NOTIFICATION_CENTER_CONFIGURATION, KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqNotificationCenterAnimations, KbqNotificationCenterComponent, KbqNotificationCenterModule, KbqNotificationCenterService, KbqNotificationCenterTrigger, kbqNotificationCenterScrollStrategyFactory, maxUnreadItemsLength };
-export type { KbqNotificationItem };
+export type { KbqNotificationDeleteEvent, KbqNotificationItem };

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;
@@ -78,7 +78,8 @@
         display: none;
     }
 
-    &:hover .kbq-notification-center-sub-header__button {
+    &:hover .kbq-notification-center-sub-header__button,
+    &:focus-within .kbq-notification-center-sub-header__button {
         display: flex;
     }
 }
@@ -88,13 +89,50 @@
 
     border-radius: inherit;
 
-    padding-bottom: var(--kbq-size-m);
+    padding-bottom: var(--kbq-size-xl);
+
+    // Smoothly reveal the just-appended "load more" spinner / error row. The row is scrolled into
+    // view via KbqScrollbar.scrollTo(), which calls a behavior-less scroll on the overlayscrollbars
+    // viewport — so `scroll-behavior` on the viewport controls the animation. Disabled for users who
+    // prefer reduced motion.
+    & [data-overlayscrollbars-viewport] {
+        scroll-behavior: smooth;
+
+        @media (prefers-reduced-motion: reduce) {
+            scroll-behavior: auto;
+        }
+    }
 
     & .kbq-loader-overlay_parent {
         border-radius: inherit;
     }
 }
 
+.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-item.scss

@@ -13,7 +13,8 @@
     margin-left: var(--kbq-size-m);
     margin-right: var(--kbq-size-m);
 
-    &:hover {
+    &:hover,
+    &:focus-within {
         & .kbq-notification-item-time {
             visibility: hidden;
         }
@@ -46,7 +47,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/overflow-items/index.d.ts

@@ -75,6 +75,7 @@ declare class KbqOverflowItems {
     private readonly renderer;
     private readonly document;
     private readonly window;
+    private readonly platform;
     /**
      * `KbqOverflowItem` directive references.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "20.0.0",
+    "version": "20.1.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,8 +25,8 @@
         "@angular/cdk": ">=20.0.0",
         "@angular/core": ">=20.0.0",
         "@angular/forms": ">=20.0.0",
-        "@koobiq/angular-moment-adapter": "20.0.0",
-        "@koobiq/angular-luxon-adapter": "20.0.0",
+        "@koobiq/angular-moment-adapter": "20.1.0",
+        "@koobiq/angular-luxon-adapter": "20.1.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "^3.14.0"
@@ -153,6 +153,10 @@
             "types": "./filter-bar/index.d.ts",
             "default": "./fesm2022/koobiq-components-filter-bar.mjs"
         },
+        "./flag": {
+            "types": "./flag/index.d.ts",
+            "default": "./fesm2022/koobiq-components-flag.mjs"
+        },
         "./form-field": {
             "types": "./form-field/index.d.ts",
             "default": "./fesm2022/koobiq-components-form-field.mjs"