@koobiq/components 18.18.0 → 18.20.0

package/actions-panel/actions-panel-config.d.ts

@@ -0,0 +1,79 @@
+import { Direction } from '@angular/cdk/bidi';
+import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { ElementRef, InjectionToken, Injector, Provider } from '@angular/core';
+/** Injection token that can be used to specify default actions panel config. */
+export declare const KBQ_ACTIONS_PANEL_DEFAULT_CONFIG: InjectionToken<KbqActionsPanelConfig<unknown>>;
+/**
+ * Utility for providing default actions panel config.
+ *
+ * @see `KBQ_ACTIONS_PANEL_DEFAULT_CONFIG`
+ */
+export declare const kbqActionsPanelDefaultConfigProvider: <D>(config: KbqActionsPanelConfig<D>) => Provider;
+/**
+ * Configuration for opened actions panel.
+ * Based on cdk `DialogConfig`.
+ *
+ * @see `DialogConfig`
+ *
+ */
+export declare class KbqActionsPanelConfig<D = unknown> {
+    /**
+     * Injector used for the instantiation of the component to be attached.
+     */
+    injector?: Injector;
+    /**
+     * Data being injected into the child component.
+     *
+     * @see `KBQ_ACTIONS_PANEL_DATA`
+     */
+    data?: D | null;
+    /** Extra CSS classes to be added to the actions panel container. */
+    containerClass?: string | string[];
+    /**
+     * Whether the actions panel should be closed of when the user goes backwards/forwards in history.
+     * NOTE! This does not apply to router navigation.
+     *
+     * @default true
+     */
+    closeOnNavigation?: boolean;
+    /**
+     * Overlay container element in which the actions panel are rendered.
+     */
+    overlayContainer?: ElementRef<HTMLElement>;
+    /**
+     * Extra CSS classes to be added to the overlay panel.
+     */
+    overlayPanelClass?: string | string[];
+    /**
+     * Width of the actions panel.
+     */
+    width?: string;
+    /**
+     * Min-width of the actions panel.
+     * If a number is provided, assumes pixel units.
+     */
+    minWidth?: number | string;
+    /**
+     * Max-width of the actions panel.
+     * If a number is provided, assumes pixel units.
+     */
+    maxWidth?: number | string;
+    /**
+     * Direction of the text in the actions panel.
+     *
+     * @default 'ltr'
+     */
+    direction?: Direction;
+    /**
+     * Scroll strategy to be used for the actions panel.
+     *
+     * @default `RepositionScrollStrategy`
+     */
+    scrollStrategy?: (overlay: Overlay) => ScrollStrategy;
+    /**
+     * Whether the user can use ESC or click on close button to close the actions panel.
+     *
+     * @default false
+     */
+    disableClose?: boolean;
+}

package/actions-panel/actions-panel-container.d.ts

@@ -0,0 +1,90 @@
+import { AnimationEvent } from '@angular/animations';
+import { CdkDialogContainer } from '@angular/cdk/dialog';
+import { EventEmitter, InjectionToken, OnDestroy, Provider } from '@angular/core';
+import { KbqActionsPanelLocaleConfiguration } from '@koobiq/components/core';
+import { KbqActionsPanelConfig } from './actions-panel-config';
+import * as i0 from "@angular/core";
+/** Localization configuration provider. */
+export declare const KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION: InjectionToken<KbqActionsPanelLocaleConfiguration>;
+/** Utility provider for `KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION`. */
+export declare const kbqActionsPanelLocaleConfigurationProvider: (configuration: KbqActionsPanelLocaleConfiguration) => Provider;
+/**
+ * Internal component that wraps user-provided actions panel content.
+ *
+ * @docs-private
+ */
+export declare class KbqActionsPanelContainer extends CdkDialogContainer implements OnDestroy {
+    /**
+     * The state of the actions panel animations.
+     *
+     * @docs-private
+     */
+    protected animationState: 'void' | 'visible' | 'hidden';
+    /**
+     * Emits whenever the state of the animation changes.
+     *
+     * @docs-private
+     */
+    readonly animationStateChanged: EventEmitter<AnimationEvent>;
+    /** Whether the actions panel container has been destroyed. */
+    private destroyed;
+    /**
+     * Actions panel configuration.
+     *
+     * @docs-private
+     */
+    protected readonly config: KbqActionsPanelConfig<any>;
+    private readonly actionsPanel;
+    private readonly renderer;
+    private readonly localeService;
+    /**
+     * Actions panel locale configuration.
+     *
+     * @docs-private
+     */
+    protected readonly localeConfiguration: import("@angular/core").Signal<KbqActionsPanelLocaleConfiguration | undefined>;
+    ngOnDestroy(): void;
+    /**
+     * Close the actions panel.
+     *
+     * @docs-private
+     */
+    protected close(): void;
+    /**
+     * Start animation of the actions panel entrance into view.
+     *
+     * @docs-private
+     */
+    startOpenAnimation(): void;
+    /**
+     * Start animation of the actions panel exiting from view.
+     *
+     * @docs-private
+     */
+    startCloseAnimation(): void;
+    /**
+     * Handles animation done events.
+     *
+     * @docs-private
+     */
+    protected onAnimationDone(event: AnimationEvent): void;
+    /**
+     * Handles animation start events.
+     *
+     * @docs-private
+     */
+    protected onAnimationStart(event: AnimationEvent): void;
+    /**
+     * Handles escape key events.
+     *
+     * @docs-private
+     */
+    protected handleEscape(event: KeyboardEvent): void;
+    /**
+     * @docs-private
+     */
+    protected _contentAttached(): void;
+    private applyContainerClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionsPanelContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqActionsPanelContainer, "kbq-actions-panel-container", never, {}, {}, never, never, true, never>;
+}

package/actions-panel/actions-panel-container.scss

@@ -0,0 +1,33 @@
+.kbq-actions-panel-container {
+    background: var(--kbq-actions-panel-background-color);
+    color: var(--kbq-actions-panel-text-color);
+    box-shadow: var(--kbq-actions-panel-box-shadow);
+    height: var(--kbq-actions-panel-height);
+    padding: var(--kbq-actions-panel-padding);
+    margin: var(--kbq-actions-panel-margin);
+    border-radius: var(--kbq-actions-panel-border-radius);
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .kbq-actions-panel-container__content {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
+    .kbq-actions-panel-container__vertical-divider {
+        background-color: var(--kbq-actions-panel-vertical-divider-background-color);
+        height: var(--kbq-actions-panel-vertical-divider-height) !important;
+        margin: var(--kbq-actions-panel-vertical-divider-margin);
+    }
+}
+
+.kbq-actions-panel-overlay-container {
+    // Required for positioning the overlay inside the custom container
+    // See: KbqActionsPanelConfig.overlayContainer
+    position: relative;
+}

package/actions-panel/actions-panel-ref.d.ts

@@ -0,0 +1,31 @@
+import { DialogRef } from '@angular/cdk/dialog';
+import { Observable } from 'rxjs';
+import { KbqActionsPanelContainer } from './actions-panel-container';
+/**
+ * Reference to actions panel opened by `KbqActionsPanel` service.
+ */
+export declare class KbqActionsPanelRef<I = unknown, R = unknown> {
+    private readonly dialogRef;
+    /**
+     * Instance of the component into which the actions panel content is projected.
+     *
+     * @docs-private
+     */
+    containerInstance: KbqActionsPanelContainer;
+    /** Gets an observable that is notified when the actions panel is finished closing. */
+    get afterClosed(): Observable<R | undefined>;
+    /** Gets an observable that emits when keydown events are targeted on the overlay. */
+    get keydownEvents(): Observable<KeyboardEvent>;
+    /** Gets an observable that is notified when the actions panel has opened and appeared. */
+    get afterOpened(): Observable<void>;
+    private readonly _afterOpened;
+    /** Result to be passed down to the `afterClosed` stream. */
+    private result;
+    /** Handle to the timeout that's running as a fallback in case the close animation doesn't fire. */
+    private closeAnimationFallbackTimeout;
+    constructor(dialogRef: DialogRef<R, I>, containerInstance: KbqActionsPanelContainer);
+    /** Closes the actions panel. */
+    close(result?: R): void;
+    private handleAnimation;
+    private handleOverlayDetachments;
+}

package/actions-panel/actions-panel-tokens.scss

@@ -0,0 +1,13 @@
+.kbq-actions-panel-container {
+    --kbq-actions-panel-background-color: var(--kbq-background-contrast);
+    --kbq-actions-panel-text-color: var(--kbq-foreground-on-contrast);
+    --kbq-actions-panel-padding: var(--kbq-size-s);
+    --kbq-actions-panel-margin: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-l);
+    --kbq-actions-panel-border-radius: var(--kbq-size-l);
+    --kbq-actions-panel-box-shadow: var(--kbq-shadow-card);
+    --kbq-actions-panel-height: var(--kbq-size-5xl);
+    /** Divider */
+    --kbq-actions-panel-vertical-divider-background-color: var(--kbq-line-contrast-fade);
+    --kbq-actions-panel-vertical-divider-height: var(--kbq-size-m);
+    --kbq-actions-panel-vertical-divider-margin: 0 var(--kbq-size-s);
+}

package/actions-panel/actions-panel.d.ts

@@ -0,0 +1,144 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { Dialog, DialogConfig } from '@angular/cdk/dialog';
+import { ComponentType, Overlay, OverlayContainer, OverlayKeyboardDispatcher, OverlayOutsideClickDispatcher, OverlayPositionBuilder, ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { Location } from '@angular/common';
+import { ComponentFactoryResolver, InjectionToken, Injector, NgZone, OnDestroy, TemplateRef } from '@angular/core';
+import { KbqActionsPanelConfig } from './actions-panel-config';
+import { KbqActionsPanelRef } from './actions-panel-ref';
+import * as i0 from "@angular/core";
+/** Injection token that can be used to access the data that was passed in to actions panel. */
+export declare const KBQ_ACTIONS_PANEL_DATA: InjectionToken<unknown>;
+/**
+ * Context for actions panel template.
+ */
+export type KbqActionsPanelTemplateContext<T = unknown, D = unknown, R = unknown> = {
+    /**
+     * Data passed to actions panel.
+     *
+     * Example:
+     *
+     * ```html
+     * <ng-template #actionsPanel let-data>{{ data.KEY }}</ng-template>
+     * ````
+     */
+    $implicit?: D | null;
+    /**
+     * Data passed to actions panel.
+     *
+     * Example:
+     *
+     * ```html
+     * <ng-template #actionsPanel let-data="data">{{ data.KEY }}</ng-template>
+     * ````
+     */
+    data?: D | null;
+    /**
+     * Opened actions panel reference.
+     *
+     * Example:
+     *
+     * ```html
+     * <ng-template #actionsPanel let-actionsPanelRef="actionsPanelRef">
+     *   <button (click)="actionsPanelRef.close()">close</button>
+     * </ng-template>
+     * ````
+     */
+    actionsPanelRef: KbqActionsPanelRef<T, R>;
+};
+/**
+ * Selector for actions panel overlay.
+ *
+ * @docs-private
+ */
+export declare const KBQ_ACTIONS_PANEL_OVERLAY_SELECTOR = "kbq-actions-panel-overlay";
+/**
+ * Selector for custom actions panel overlay container.
+ *
+ * @docs-private
+ */
+export declare const KBQ_ACTIONS_PANEL_OVERLAY_CONTAINER_SELECTOR = "kbq-actions-panel-overlay-container";
+/**
+ * Actions panel overlay container.
+ *
+ * @docs-private
+ */
+export declare class KbqActionsPanelOverlayContainer extends OverlayContainer {
+    /**
+     * Set the overlay container element.
+     *
+     * @param containerElement The element into which the overlay will be rendered.
+     * @returns Current OverlayContainer instance.
+     */
+    setContainerElement(containerElement?: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionsPanelOverlayContainer, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqActionsPanelOverlayContainer>;
+}
+/**
+ * Actions panel overlay.
+ *
+ * @docs-private
+ */
+export declare class KbqActionsPanelOverlay extends Overlay {
+    private readonly overlayContainer;
+    constructor(scrollStrategies: ScrollStrategyOptions, overlayContainer: KbqActionsPanelOverlayContainer, componentFactoryResolver: ComponentFactoryResolver, positionBuilder: OverlayPositionBuilder, keyboardDispatcher: OverlayKeyboardDispatcher, injector: Injector, ngZone: NgZone, document: any, directionality: Directionality, location: Location, outsideClickDispatcher: OverlayOutsideClickDispatcher, animationsModuleType?: string);
+    /**
+     * Set the overlay container element.
+     *
+     * @param containerElement The element into which the overlay will be rendered.
+     * @returns Current Overlay instance.
+     */
+    setOverlayContainerElement(containerElement?: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionsPanelOverlay, [null, null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqActionsPanelOverlay>;
+}
+/**
+ * Actions panel dialog service.
+ *
+ * @docs-private
+ */
+export declare class KbqActionsPanelDialog extends Dialog {
+    private readonly overlay;
+    constructor(overlay: KbqActionsPanelOverlay, injector: Injector, defaultOptions: DialogConfig, parentDialog: Dialog, overlayContainer: KbqActionsPanelOverlayContainer, scrollStrategy: any);
+    /**
+     * Set the dialog overlay container element.
+     *
+     * @param containerElement The element into which the overlay will be rendered.
+     * @returns Current dialog instance.
+     */
+    setOverlayContainerElement(containerElement?: HTMLElement): this;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionsPanelDialog, [null, null, { optional: true; }, { optional: true; skipSelf: true; }, null, null]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqActionsPanelDialog>;
+}
+/**
+ * Service for opening actions panel.
+ */
+export declare class KbqActionsPanel implements OnDestroy {
+    private readonly injector;
+    private readonly overlay;
+    private readonly dialog;
+    private readonly defaultConfig;
+    /** The reference to the currently opened actions panel. */
+    private openedActionsPanelRef;
+    ngOnDestroy(): void;
+    /**
+     * Opens actions panel.
+     *
+     * @param componentOrTemplateRef Component to be opened into the actions panel.
+     * @param config Additional configuration options for the actions panel.
+     * @returns A reference to the opened actions panel.
+     */
+    open<T, D = unknown, R = unknown>(component: ComponentType<T>, config?: KbqActionsPanelConfig<D>): KbqActionsPanelRef<T, R>;
+    /**
+     * Opens actions panel.
+     *
+     * @param template TemplateRef to be used as the content.
+     * @param config Additional configuration options for the actions panel.
+     * @returns A reference to the opened actions panel.
+     */
+    open<T, D = unknown, R = unknown>(template: TemplateRef<T>, config?: KbqActionsPanelConfig<D>): KbqActionsPanelRef<T, R>;
+    /** Closes the currently opened actions panel. */
+    close<R>(result?: R): void;
+    private openDialog;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionsPanel, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqActionsPanel>;
+}

package/actions-panel/index.d.ts

@@ -0,0 +1,5 @@
+export * from './actions-panel';
+export * from './actions-panel-config';
+export * from './actions-panel-container';
+export * from './actions-panel-ref';
+export * from './module';

package/actions-panel/module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./actions-panel-container";
+export declare class KbqActionsPanelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionsPanelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqActionsPanelModule, never, [typeof i1.KbqActionsPanelContainer], [typeof i1.KbqActionsPanelContainer]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqActionsPanelModule>;
+}

package/core/animation/animation.d.ts

@@ -1,6 +1,32 @@
+/**
+ * @deprecated Will be removed in next major release. Use `KbqAnimationCurves` instead.
+ *
+ * @docs-private
+ */
 export declare enum AnimationCurves {
     StandardCurve = "cubic-bezier(0.4,0.0,0.2,1)",
     DecelerationCurve = "cubic-bezier(0.0,0.0,0.2,1)",
     AccelerationCurve = "cubic-bezier(0.4,0.0,1,1)",
     SharpCurve = "cubic-bezier(0.4,0.0,0.6,1)"
 }
+/**
+ * Koobiq components animation curves
+ *
+ * @docs-private
+ */
+export declare enum KbqAnimationCurves {
+    StandardCurve = "cubic-bezier(0.4,0.0,0.2,1)",
+    DecelerationCurve = "cubic-bezier(0.0,0.0,0.2,1)",
+    AccelerationCurve = "cubic-bezier(0.4,0.0,1,1)",
+    SharpCurve = "cubic-bezier(0.4,0.0,0.6,1)"
+}
+/**
+ * Koobiq components animation durations
+ *
+ * @docs-private
+ */
+export declare enum KbqAnimationDurations {
+    Complex = "250ms",
+    Entering = "150ms",
+    Exiting = "125ms"
+}

package/core/form-field/form-field-ref.d.ts

@@ -7,6 +7,10 @@ export interface KbqFormFieldRef {
      * @deprecated use `formField.control?.errorState` instead
      */
     shouldForward(str: string): boolean;
+    focus(): void;
+    /**
+     * @deprecated Use `focus` instead.
+     */
     focusViaKeyboard(): void;
 }
 /**

package/core/locales/en-US.d.ts

@@ -42,4 +42,49 @@ export declare const enUSLocaleData: {
     timezone: {
         searchPlaceholder: string;
     };
+    actionsPanel: {
+        closeTooltip: string;
+    };
+    filterBar: {
+        reset: {
+            buttonName: string;
+        };
+        search: {
+            tooltip: string;
+            placeholder: string;
+        };
+        filters: {
+            defaultName: string;
+            saveNewFilterTooltip: string;
+            searchPlaceholder: string;
+            searchEmptyResult: string;
+            saveAsNewFilter: string;
+            saveChanges: string;
+            saveAsNew: string;
+            change: string;
+            resetChanges: string;
+            remove: string;
+            name: string;
+            error: string;
+            errorHint: string;
+            saveButton: string;
+            cancelButton: string;
+        };
+        add: {
+            tooltip: string;
+        };
+        pipe: {
+            clearButtonTooltip: string;
+            removeButtonTooltip: string;
+            applyButton: string;
+            emptySearchResult: string;
+        };
+        datePipe: {
+            customPeriod: string;
+            customPeriodFrom: string;
+            customPeriodTo: string;
+            customPeriodErrorHint: string;
+            backToPeriodSelection: string;
+        };
+    };
 };

package/core/locales/es-LA.d.ts

@@ -41,4 +41,49 @@ export declare const esLALocaleData: {
     timezone: {
         searchPlaceholder: string;
     };
+    actionsPanel: {
+        closeTooltip: string;
+    };
+    filterBar: {
+        reset: {
+            buttonName: string;
+        };
+        search: {
+            tooltip: string;
+            placeholder: string;
+        };
+        filters: {
+            defaultName: string;
+            saveNewFilterTooltip: string;
+            searchPlaceholder: string;
+            searchEmptyResult: string;
+            saveAsNewFilter: string;
+            saveChanges: string;
+            saveAsNew: string;
+            change: string;
+            resetChanges: string;
+            remove: string;
+            name: string;
+            error: string;
+            errorHint: string;
+            saveButton: string;
+            cancelButton: string;
+        };
+        add: {
+            tooltip: string;
+        };
+        pipe: {
+            clearButtonTooltip: string;
+            removeButtonTooltip: string;
+            applyButton: string;
+            emptySearchResult: string;
+        };
+        datePipe: {
+            customPeriod: string;
+            customPeriodFrom: string;
+            customPeriodTo: string;
+            customPeriodErrorHint: string;
+            backToPeriodSelection: string;
+        };
+    };
 };

package/core/locales/fa-IR.d.ts

@@ -41,4 +41,49 @@ export declare const faIRLocaleData: {
     timezone: {
         searchPlaceholder: string;
     };
+    actionsPanel: {
+        closeTooltip: string;
+    };
+    filterBar: {
+        reset: {
+            buttonName: string;
+        };
+        search: {
+            tooltip: string;
+            placeholder: string;
+        };
+        filters: {
+            defaultName: string;
+            saveNewFilterTooltip: string;
+            searchPlaceholder: string;
+            searchEmptyResult: string;
+            saveAsNewFilter: string;
+            saveChanges: string;
+            saveAsNew: string;
+            change: string;
+            resetChanges: string;
+            remove: string;
+            name: string;
+            error: string;
+            errorHint: string;
+            saveButton: string;
+            cancelButton: string;
+        };
+        add: {
+            tooltip: string;
+        };
+        pipe: {
+            clearButtonTooltip: string;
+            removeButtonTooltip: string;
+            applyButton: string;
+            emptySearchResult: string;
+        };
+        datePipe: {
+            customPeriod: string;
+            customPeriodFrom: string;
+            customPeriodTo: string;
+            customPeriodErrorHint: string;
+            backToPeriodSelection: string;
+        };
+    };
 };