@koobiq/components 18.35.0 → 18.36.0

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

@@ -0,0 +1,153 @@
+import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
+import { KbqButton } from '@koobiq/components/button';
+import { DateAdapter, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
+import { Subscription } from 'rxjs';
+import { KbqNotificationCenterService } from './notification-center.service';
+import * as i0 from "@angular/core";
+/**default configuration of notification-center */
+export declare const KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION: {
+    notifications: string;
+    remove: string;
+    doNotDisturb: string;
+    showPopUpNotifications: string;
+    noNotifications: string;
+    failedToLoadNotifications: string;
+    repeat: string;
+};
+/** Injection Token for providing configuration of notification-center */
+export declare const KBQ_NOTIFICATION_CENTER_CONFIGURATION: InjectionToken<unknown>;
+/** @docs-private */
+export declare const KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/** @docs-private */
+export declare function kbqNotificationCenterScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
+/** @docs-private */
+export declare const KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof kbqNotificationCenterScrollStrategyFactory;
+};
+/** @docs-private */
+export declare class KbqNotificationCenterComponent extends KbqPopUp implements AfterViewInit {
+    /** @docs-private */
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    /** @docs-private */
+    protected readonly dateAdapter: DateAdapter<any>;
+    /** @docs-private */
+    protected readonly service: KbqNotificationCenterService;
+    private scrollContainer;
+    readonly externalConfiguration: unknown;
+    configuration: any;
+    /** @docs-private */
+    protected popoverMode: boolean;
+    /** @docs-private */
+    protected isTopOverflow: boolean;
+    /** @docs-private */
+    protected isBottomOverflow: boolean;
+    /** localized data
+     * @docs-private */
+    get localeData(): any;
+    /** @docs-private */
+    prefix: string;
+    /** @docs-private */
+    trigger: KbqNotificationCenterTrigger;
+    /** @docs-private */
+    isTrapFocus: boolean;
+    switcher: KbqButton;
+    get popoverHeight(): string;
+    set popoverHeight(value: string);
+    private _popoverHeight;
+    constructor();
+    ngAfterViewInit(): void;
+    /** @docs-private */
+    updateClassMap(placement: string, customClass: string, size: PopUpSizes): void;
+    /** @docs-private */
+    updateTrapFocus(isTrapFocus: boolean): void;
+    /** @docs-private */
+    escapeHandler(): void;
+    protected checkOverflow: () => void;
+    private updateLocaleParams;
+    private initDefaultParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNotificationCenterComponent, "kbq-notification-center", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificationCenterComponent> implements AfterContentInit, OnInit {
+    /** @docs-private */
+    protected scrollStrategy: () => ScrollStrategy;
+    /** @docs-private */
+    protected readonly service: KbqNotificationCenterService;
+    /** @docs-private */
+    arrow: boolean;
+    /** @docs-private */
+    customClass: string;
+    /** @docs-private */
+    private hasBackdrop;
+    /** @docs-private */
+    private size;
+    /** @docs-private */
+    content: string | TemplateRef<any>;
+    /** @docs-private */
+    header: string | TemplateRef<any>;
+    /** @docs-private */
+    footer: string | TemplateRef<any>;
+    /** @docs-private */
+    private closeOnScroll;
+    /** Number of unread notifications */
+    get unreadItemsCounter(): import("rxjs").Observable<string>;
+    /** Placement of popUp */
+    placement: PopUpPlacements;
+    /** Class that will be used in the background */
+    backdropClass: string;
+    /** Class that will be used in the panel */
+    panelClass: string;
+    /** Offset of popUp */
+    offset: number | null;
+    /** Use popover or not */
+    get popoverMode(): boolean;
+    set popoverMode(value: boolean);
+    private _popoverMode;
+    /** Set height of popover. Default is calc(100vh - 48px). 48px - height of navbar */
+    get popoverHeight(): string;
+    set popoverHeight(value: string);
+    private _popoverHeight;
+    /** Whether the trigger is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @docs-private */
+    get hasClickTrigger(): boolean;
+    /** Emits a change event whenever the placement state changes. */
+    readonly placementChange: EventEmitter<any>;
+    /** Emits a change event whenever the visible state changes. */
+    readonly visibleChange: EventEmitter<boolean>;
+    /** @docs-private */
+    trigger: string;
+    /** @docs-private */
+    protected originSelector: string;
+    /** @docs-private */
+    protected get overlayConfig(): OverlayConfig;
+    /** @docs-private */
+    protected preventClosingByInnerScrollSubscription: Subscription;
+    constructor();
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    /** @docs-private */
+    updateData(): void;
+    /** Updates the current position.
+     *
+     * @docs-private */
+    updatePosition(reapplyPosition?: boolean): void;
+    /** @docs-private */
+    getOverlayHandleComponentType(): Type<KbqNotificationCenterComponent>;
+    /** @docs-private */
+    updateClassMap(newPlacement?: string): void;
+    /** @docs-private */
+    closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
+    private hideIfNotInViewPort;
+    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; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_popoverMode: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

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

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./notification-center";
+export declare class KbqNotificationCenterModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNotificationCenterModule, never, [typeof i1.KbqNotificationCenterComponent, typeof i1.KbqNotificationCenterTrigger], [typeof i1.KbqNotificationCenterComponent, typeof i1.KbqNotificationCenterTrigger]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqNotificationCenterModule>;
+}

package/notification-center/notification-center.scss

@@ -0,0 +1,126 @@
+@use './notification-center-theme' as *;
+
+.kbq-notification-center {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    width: 400px;
+    height: 100vh;
+
+    box-sizing: border-box;
+
+    z-index: 1;
+
+    &:not(.kbq-notification-center_popover) {
+        border-right: 1px solid;
+        border-left: 1px solid;
+    }
+
+    &.kbq-notification-center_popover {
+        margin-top: var(--kbq-size-xxs);
+        margin-bottom: var(--kbq-size-xxs);
+
+        border-radius: var(--kbq-size-xs);
+
+        height: calc(100vh - 48px);
+
+        box-shadow: var(--kbq-shadow-popup);
+    }
+}
+
+.kbq-notification-center-header {
+    display: flex;
+    flex-direction: row;
+
+    justify-content: space-between;
+
+    padding: var(--kbq-size-xl) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl);
+}
+
+.kbq-notification-center-title {
+    display: flex;
+    flex-direction: row;
+
+    align-items: center;
+
+    gap: var(--kbq-size-xxs);
+}
+
+.kbq-notification-center-toolbar {
+    display: flex;
+    flex-direction: row;
+
+    align-items: center;
+
+    & .kbq-divider.kbq-divider_vertical {
+        height: var(--kbq-size-m);
+    }
+}
+
+.kbq-notification-center-sub-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    display: flex;
+    flex-direction: row;
+
+    padding: var(--kbq-size-s) var(--kbq-size-xxl);
+
+    & .kbq-notification-center-sub-header__button {
+        position: absolute;
+
+        top: 0;
+        right: var(--kbq-size-xl);
+
+        display: none;
+    }
+
+    &:hover .kbq-notification-center-sub-header__button {
+        display: flex;
+    }
+
+    &:first-child.kbq-notification-center_top-overflow {
+        box-shadow: var(--kbq-shadow-overflow-normal-bottom);
+    }
+}
+
+.kbq-notification-center-container {
+    height: 100%;
+
+    border-radius: inherit;
+
+    padding-bottom: var(--kbq-size-m);
+
+    & .kbq-loader-overlay_parent {
+        border-radius: inherit;
+    }
+
+    &.kbq-notification-center_bottom-overflow {
+        box-shadow: var(--kbq-shadow-overflow-normal-bottom);
+    }
+}
+
+.kbq-notification-center-empty-container,
+.kbq-notification-center-error-container {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+
+    height: 100%;
+
+    & .kbq-icon {
+        margin-bottom: var(--kbq-size-xl);
+    }
+
+    & .kbq-button {
+        margin-top: var(--kbq-size-s);
+    }
+}
+
+@include kbq-notification-center-theme();
+@include kbq-notification-center-typography();

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

@@ -0,0 +1,72 @@
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { KbqToastData, KbqToastStyle } from '@koobiq/components/toast';
+import { BehaviorSubject, Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface KbqNotificationItem extends Omit<KbqToastData, 'closeButton'> {
+    id?: string;
+    title?: string | TemplateRef<unknown>;
+    style?: string | KbqToastStyle;
+    icon?: boolean | TemplateRef<unknown>;
+    iconClass?: string;
+    caption?: string | TemplateRef<unknown>;
+    content?: string | TemplateRef<unknown>;
+    actions?: TemplateRef<unknown>;
+    date: string;
+    read?: boolean;
+}
+export declare const maxUnreadItemsLength = 99;
+type KbqNotificationsGroup = {
+    title: string;
+    items: KbqNotificationItem[];
+};
+export declare class KbqNotificationCenterService {
+    /** @docs-private */
+    private readonly adapter;
+    /** @docs-private */
+    private readonly formatter;
+    /** @docs-private */
+    private readonly toastService;
+    /** @docs-private */
+    readonly silentMode: BehaviorSubject<boolean>;
+    /** @docs-private */
+    readonly loadingMode: BehaviorSubject<boolean>;
+    /** @docs-private */
+    readonly errorMode: BehaviorSubject<boolean>;
+    /** @docs-private */
+    readonly onRead: BehaviorSubject<KbqNotificationItem | null>;
+    /** Triggers an event when the user presses the reload button. */
+    readonly onReload: EventEmitter<void>;
+    private originalItems;
+    /** @docs-private */
+    readonly groupedItems: Observable<KbqNotificationsGroup[]>;
+    /** Emits an event whenever the changes. */
+    readonly changes: Observable<boolean | KbqNotificationItem | KbqNotificationItem[] | null>;
+    /** Notification items */
+    get items(): KbqNotificationItem[];
+    set items(values: KbqNotificationItem[]);
+    /** Number of unread notifications */
+    get unreadItemsCounter(): Observable<string>;
+    /** true if there are no notifications. */
+    get isEmpty(): boolean;
+    constructor();
+    /** Set silent mode */
+    setSilentMode(value: boolean): void;
+    /** Set loading mode */
+    setLoadingMode(value: boolean): void;
+    /** Set error mode */
+    setErrorMode(value: boolean): void;
+    /** Push new notification item in center */
+    push(item: KbqNotificationItem): void;
+    /** Remove notification item */
+    remove(removedItem: KbqNotificationItem): void;
+    /** Remove group of notification items */
+    removeGroup(group: KbqNotificationsGroup): void;
+    /** Remove all notification items */
+    removeAll(): void;
+    private makeGroup;
+    private setIds;
+    private setReadState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqNotificationCenterService>;
+}
+export {};

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

@@ -0,0 +1,27 @@
+import { KbqReadStateDirective, PopUpPlacements, ThemePalette } from '@koobiq/components/core';
+import { KbqNotificationCenterComponent } from './notification-center';
+import { KbqNotificationCenterService, KbqNotificationItem } from './notification-center.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@koobiq/components/core";
+/** @docs-private */
+export declare class KbqNotificationItemComponent {
+    private readonly adapter;
+    protected readonly service: KbqNotificationCenterService;
+    protected readonly readStateDirective: KbqReadStateDirective;
+    protected readonly center: KbqNotificationCenterComponent;
+    protected popUpPlacements: typeof PopUpPlacements;
+    themePalette: typeof ThemePalette;
+    id: number;
+    time: string;
+    $implicit: any;
+    get style(): {
+        [x: string]: boolean;
+    };
+    get data(): KbqNotificationItem;
+    set data(value: KbqNotificationItem);
+    private _data;
+    constructor();
+    isTemplateRef(value: any): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNotificationItemComponent, "kbq-notification-item", never, { "data": { "alias": "data"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.KbqReadStateDirective; inputs: {}; outputs: {}; }]>;
+}

package/notification-center/notification-item.scss

@@ -0,0 +1,157 @@
+@use '../core/styles/common/tokens' as *;
+
+.kbq-notification-item {
+    display: flex;
+    box-sizing: border-box;
+
+    position: relative;
+
+    border-radius: var(--kbq-size-s);
+
+    height: auto;
+
+    margin-left: var(--kbq-size-m);
+    margin-right: var(--kbq-size-m);
+
+    &:hover {
+        & .kbq-notification-item-time {
+            visibility: hidden;
+        }
+
+        & .kbq-notification-item__remove-button {
+            display: block;
+        }
+    }
+}
+
+.kbq-notification-item__icon-container {
+    flex-shrink: 0;
+
+    width: var(--kbq-size-l);
+    max-width: var(--kbq-size-l);
+
+    height: var(--kbq-size-l);
+    max-height: var(--kbq-size-l);
+
+    margin-right: var(--kbq-size-s);
+    padding-left: var(--kbq-size-m);
+
+    padding-top: 14px;
+}
+
+.kbq-notification-item__container {
+    display: flex;
+    flex-direction: column;
+
+    flex: 1;
+
+    padding-top: var(--kbq-size-m);
+    padding-right: var(--kbq-size-l);
+    padding-bottom: var(--kbq-size-m);
+
+    overflow: hidden;
+}
+
+.kbq-notification-item__title {
+    display: flex;
+    flex-direction: row;
+
+    justify-content: space-between;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    & > p {
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.kbq-notification-item__title_with-content {
+        margin-bottom: var(--kbq-size-xxs);
+    }
+}
+
+.kbq-notification-item-time {
+    display: flex;
+    flex-direction: row;
+
+    height: var(--kbq-size-xl);
+
+    align-items: center;
+
+    padding-left: 22px;
+
+    & .kbq-notification-item-time__value {
+        margin-right: var(--kbq-size-3xs);
+    }
+
+    &.kbq-notification-item-time_read .kbq-notification-item-time__state {
+        display: none;
+    }
+}
+
+.kbq-notification-item__text {
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+
+.kbq-notification-item__content {
+    display: flex;
+    flex-direction: column;
+
+    white-space: pre-wrap;
+}
+
+.kbq-notification-item__actions {
+    display: flex;
+
+    padding-top: var(--kbq-size-s);
+
+    gap: var(--kbq-size-m);
+}
+
+.kbq-notification-item__remove-button {
+    position: absolute;
+
+    top: var(--kbq-size-xs);
+    right: var(--kbq-size-s);
+
+    display: none;
+}
+
+@mixin _kbq-notification-item-theme() {
+    .kbq-notification-item {
+        background: var(--kbq-background-card);
+
+        .kbq-notification-item__title {
+            color: var(--kbq-foreground-contrast);
+        }
+
+        .kbq-notification-item__text {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
+
+        & .kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__value {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
+
+        &:hover {
+            background: var(--kbq-states-background-transparent-hover);
+        }
+    }
+}
+
+@mixin _kbq-notification-item-typography() {
+    .kbq-notification-item {
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+
+        & .kbq-notification-item-time {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        }
+    }
+}
+
+@include _kbq-notification-item-theme();
+@include _kbq-notification-item-typography();

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

@@ -0,0 +1,4 @@
+export * from './notification-center';
+export * from './notification-center-animations';
+export * from './notification-center.module';
+export * from './notification-center.service';

package/overflow-items/overflow-items.d.ts

@@ -1,3 +1,4 @@
+import { KbqOrientation } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /**
  * Manages the visibility of the element.
@@ -6,8 +7,11 @@ import * as i0 from "@angular/core";
  */
 export declare class ElementVisibilityManager {
     private readonly renderer;
-    private readonly elementRef;
     private readonly hiddenState;
+    /**
+     * @docs-private
+     */
+    readonly element: HTMLElement;
     /**
      * Whether the element is hidden.
      *
@@ -65,10 +69,11 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
  * Directive for managing the visibility of items that overflow the container.
  */
 export declare class KbqOverflowItems {
-    private readonly elementRef;
+    private readonly element;
     private readonly resizeObserver;
     private readonly renderer;
     private readonly document;
+    private readonly window;
     /**
      * `KbqOverflowItem` directive references.
      */
@@ -80,6 +85,11 @@ export declare class KbqOverflowItems {
     /**
      * Whether the overflow order should be reversed.
      *
+     * @example
+     * ```
+     * [0, 1, hidden, hidden] ---> [hidden, hidden, 2, 3]
+     * ```
+     *
      * @default false
      */
     readonly reverseOverflowOrder: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -103,6 +113,13 @@ export declare class KbqOverflowItems {
      * Set of hidden item IDs.
      */
     readonly hiddenItemIDs: import("@angular/core").Signal<ReadonlySet<unknown>>;
+    /**
+     * Defines the orientation of the overflow items.
+     *
+     * @default 'horizontal'
+     */
+    readonly orientation: import("@angular/core").InputSignal<KbqOrientation>;
+    private readonly orientationConfig;
     constructor();
     private setupObservers;
     /**
@@ -110,10 +127,6 @@ export declare class KbqOverflowItems {
      * If an item does not have an `order` defined, its index is used as a fallback.
      */
     private sortItemsByOrder;
-    /**
-     * Excludes items that have the `alwaysVisible` attribute.
-     */
-    private excludeAlwaysVisibleItems;
     /**
      * Manages the visibility of items based on the available space in the container and returns the hidden items.
      * Direction of hiding is determined by the `reverseOverflowOrder` attribute.
@@ -123,10 +136,11 @@ export declare class KbqOverflowItems {
      * This method sets the necessary styles for the directive.
      */
     private setStyles;
+    private hasOverflown;
     /**
-     * Determines if the given element has a scrollbar.
+     * @TODO Should be removed when `Array.prototype.findLast` is supported.
      */
-    private readonly hasScrollbar;
+    private findLast;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "additionalResizeObserverTargets": { "alias": "additionalResizeObserverTargets"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "additionalResizeObserverTargets": { "alias": "additionalResizeObserverTargets"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }