@koobiq/components 19.8.3 → 20.1.0

package/loader-overlay/index.d.ts

@@ -1 +1,57 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
+import { KbqDefaultSizes } from '@koobiq/components/core';
+import * as i1 from '@angular/cdk/a11y';
+import * as i2 from '@angular/cdk/platform';
+import * as i3 from '@koobiq/components/progress-spinner';
+
+declare class KbqLoaderOverlayIndicator {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayIndicator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLoaderOverlayIndicator, "[kbq-loader-overlay-indicator]", never, {}, {}, never, never, true, never>;
+}
+declare class KbqLoaderOverlayText {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayText, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLoaderOverlayText, "[kbq-loader-overlay-text]", never, {}, {}, never, never, true, never>;
+}
+declare class KbqLoaderOverlayCaption {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayCaption, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLoaderOverlayCaption, "[kbq-loader-overlay-caption]", never, {}, {}, never, never, true, never>;
+}
+declare class KbqLoaderOverlay implements OnInit, OnDestroy {
+    private elementRef;
+    private renderer;
+    text: string;
+    caption: string;
+    readonly size: i0.InputSignal<KbqDefaultSizes>;
+    readonly transparent: i0.InputSignal<boolean>;
+    /**
+     * Uses a semi-transparent background to blend
+     * with the underlying card or modal surface. When enabled, overrides `transparent`.
+     */
+    readonly card: i0.InputSignalWithTransform<boolean, unknown>;
+    private parent;
+    get isExternalIndicator(): boolean;
+    get isExternalText(): boolean;
+    get isExternalCaption(): boolean;
+    get isEmpty(): boolean;
+    get spinnerSize(): string;
+    /**
+     * @docs-private
+     */
+    protected get loaderSizeClass(): string;
+    externalIndicator: KbqLoaderOverlayIndicator | null;
+    externalText: KbqLoaderOverlayText | null;
+    externalCaption: KbqLoaderOverlayCaption | null;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], true, never>;
+}
+
+declare class KbqLoaderOverlayModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqLoaderOverlayModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.KbqProgressSpinnerModule, typeof KbqLoaderOverlay, typeof KbqLoaderOverlayIndicator, typeof KbqLoaderOverlayText, typeof KbqLoaderOverlayCaption], [typeof KbqLoaderOverlay, typeof KbqLoaderOverlayIndicator, typeof KbqLoaderOverlayText, typeof KbqLoaderOverlayCaption]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqLoaderOverlayModule>;
+}
+
+export { KbqLoaderOverlay, KbqLoaderOverlayCaption, KbqLoaderOverlayIndicator, KbqLoaderOverlayModule, KbqLoaderOverlayText };

package/loader-overlay/loader-overlay-tokens.scss

@@ -2,7 +2,7 @@
     --kbq-loader-overlay-size-big-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-big-loader-margin-bottom: var(--kbq-size-xxl);
     --kbq-loader-overlay-size-big-content-content-gap-vertical: var(--kbq-size-l);
-    --kbq-loader-overlay-size-normal-overlay-padding-horizontal: var(--kbq-sizeа-3xl);
+    --kbq-loader-overlay-size-normal-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-normal-loader-margin-bottom: var(--kbq-size-xxl);
     --kbq-loader-overlay-size-normal-content-content-gap-vertical: var(--kbq-size-xxs);
     --kbq-loader-overlay-size-compact-overlay-padding-horizontal: var(--kbq-size-3xl);

package/markdown/index.d.ts

@@ -1 +1,68 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { InjectionToken, Provider, OnDestroy } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { MarkedOptions } from 'marked';
+
+/** List of options for `marked` library. */
+declare const KBQ_MARKDOWN_MARKED_OPTIONS: InjectionToken<MarkedOptions<string, string>>;
+/** Utility provider for `KBQ_MARKDOWN_MARKED_OPTIONS`. */
+declare const kbqMarkdownMarkedOptionsProvider: (options: MarkedOptions) => Provider;
+/** Component which allows to convert `Markdown` into `HTML` */
+declare class KbqMarkdown implements OnDestroy {
+    private readonly markdownService;
+    private sanitizer;
+    private readonly markedOptions;
+    private readonly contentWrapper;
+    private readonly outputWrapper;
+    protected resultHtml: i0.WritableSignal<SafeHtml | null>;
+    /** `Markdown` text. */
+    get markdownText(): string | null;
+    set markdownText(value: string | null);
+    private _markdownText;
+    private readonly focusMonitor;
+    private readonly links;
+    constructor();
+    ngOnDestroy(): void;
+    private getResultHTML;
+    private startMonitoringLinks;
+    private stopMonitoringLinks;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdown, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMarkdown, "kbq-markdown", never, { "markdownText": { "alias": "markdownText"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class KbqMarkdownModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdownModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqMarkdownModule, never, [typeof KbqMarkdown], [typeof KbqMarkdown]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqMarkdownModule>;
+}
+
+/**
+ * Service for converting Markdown into HTML.
+ */
+declare class KbqMarkdownService {
+    /**
+     * Converts a given Markdown string into HTML.
+     * NOTE! Method does not sanitize the output HTML string.
+     *
+     * @param markdown - The Markdown string to be converted.
+     * @param options - Optional MarkedOptions to customize the parsing behavior.
+     * @returns The transformed HTML string.
+     */
+    parseToHtml(markdown: string, options?: MarkedOptions): string;
+    private transform;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdownService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqMarkdownService>;
+}
+
+/** @docs-private */
+declare const MARKDOWN_TAGS_TO_CLASS_ALIAS: string[];
+/**
+ * separating `th` and `p` to prevent it's conflict with `thead` and `pre`
+ *
+ * @docs-private
+ */
+declare const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS: string[];
+/** @docs-private */
+declare const CLASS_PREFIX: string;
+
+export { CLASS_PREFIX, KBQ_MARKDOWN_MARKED_OPTIONS, KbqMarkdown, KbqMarkdownModule, KbqMarkdownService, MARKDOWN_TAGS_TO_CLASS_ALIAS, MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS, kbqMarkdownMarkedOptionsProvider };

package/modal/_modal-animation.scss

@@ -40,13 +40,13 @@ $animation-duration-base: 0.3s;
 @mixin zoom-motion($className, $keyframeName, $duration: $animation-duration-base) {
     @include _make-motion($className, $keyframeName, $duration);
 
-    .#{className}-enter,
-    .#{className}-appear {
+    .#{$className}-enter,
+    .#{$className}-appear {
         transform: translate(0, -25%);
         animation-timing-function: $ease-out-circ;
     }
 
-    .#{className}-leave {
+    .#{$className}-leave {
         transform: translate(0, 0);
         animation-timing-function: $ease-in-out-circ;
     }
@@ -55,13 +55,13 @@ $animation-duration-base: 0.3s;
 @mixin fade-motion($className, $keyframeName) {
     @include _make-motion($className, $keyframeName);
 
-    .#{className}-enter,
-    .#{className}-appear {
+    .#{$className}-enter,
+    .#{$className}-appear {
         opacity: 0;
         animation-timing-function: ease-out;
     }
 
-    .#{className}-leave {
+    .#{$className}-leave {
         animation-timing-function: ease-out;
     }
 }

package/modal/_modal-theme.scss

@@ -19,12 +19,8 @@
             color: var(--kbq-modal-content-text-color);
         }
 
-        .kbq-modal-header.kbq-modal-body_top-overflow {
-            box-shadow: var(--kbq-shadow-overflow-normal-bottom);
-        }
-
-        .kbq-modal-footer.kbq-modal-body_bottom-overflow {
-            box-shadow: var(--kbq-shadow-overflow-normal-top);
+        .kbq-modal-caption {
+            color: var(--kbq-foreground-contrast-secondary);
         }
     }
 
@@ -38,6 +34,7 @@
         @include kbq-typography-level-to-styles-css-variables(typography, title);
     }
 
+    .kbq-modal-caption,
     .kbq-modal-body {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }

package/modal/index.d.ts

@@ -1 +1,313 @@
-export * from './public-api';
+import { Observable } from 'rxjs';
+import * as i0 from '@angular/core';
+import { TemplateRef, Type, EventEmitter, Injector, OnInit, OnChanges, AfterViewInit, OnDestroy, ElementRef, ViewContainerRef, SimpleChanges, ComponentRef, PipeTransform, InjectionToken } from '@angular/core';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayRef, Overlay } from '@angular/cdk/overlay';
+import { KbqComponentColors } from '@koobiq/components/core';
+import * as i2 from '@angular/cdk/a11y';
+import * as i3 from '@koobiq/components/button';
+import * as i4 from '@koobiq/components/icon';
+import * as i5 from '@koobiq/components/title';
+import * as i6 from '@angular/common';
+
+type OnClickCallback<T> = (instance: T) => (false | void | {}) | Promise<false | void | {}>;
+type ModalType = 'default' | 'confirm' | 'custom';
+type ConfirmType = 'confirm' | 'success' | 'warn';
+declare enum ModalSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+/**
+ * Duration when perform animations (ms)
+ * @docs-private
+ */
+declare const MODAL_ANIMATE_DURATION = 300;
+interface ModalOptions<C = any, R = any> {
+    kbqModalType?: ModalType;
+    kbqVisible?: boolean;
+    kbqWidth?: number | string;
+    kbqSize?: ModalSize;
+    kbqWrapClassName?: string;
+    kbqClassName?: string;
+    kbqStyle?: object;
+    kbqTitle?: string | TemplateRef<{}>;
+    kbqCaption?: string | TemplateRef<{}>;
+    kbqContent?: string | TemplateRef<{}> | Type<C>;
+    kbqComponent?: Type<C>;
+    kbqClosable?: boolean;
+    kbqMask?: boolean;
+    kbqMaskClosable?: boolean;
+    kbqMaskStyle?: object;
+    kbqBodyStyle?: object;
+    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<C>[];
+    kbqGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
+    kbqAfterOpen?: EventEmitter<void>;
+    kbqAfterClose?: EventEmitter<R>;
+    kbqCloseByESC?: boolean;
+    kbqRestoreFocus?: boolean;
+    kbqOkText?: string;
+    kbqOkType?: string;
+    kbqOkLoading?: boolean;
+    kbqOnOk?: EventEmitter<C> | OnClickCallback<C>;
+    kbqCancelText?: string;
+    kbqCancelLoading?: boolean;
+    kbqOnCancel?: EventEmitter<C> | OnClickCallback<C>;
+    /** Data being injected into the child component. */
+    data?: any;
+}
+interface IModalOptionsForService<T = any> extends ModalOptions<T> {
+    kbqOnOk?: OnClickCallback<T>;
+    kbqOnCancel?: OnClickCallback<T>;
+    /**
+     * The injector used to create the component that will be attached.
+     * If specified, it overrides the injector provided by `KbqModalService`.
+     */
+    injector?: Injector;
+}
+interface IModalButtonOptions<T = any> {
+    label: string;
+    type?: string;
+    shape?: string;
+    ghost?: boolean;
+    size?: string;
+    autoLoading?: boolean;
+    show?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
+    loading?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
+    disabled?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
+    autoFocus?: boolean;
+    kbqModalMainAction?: boolean;
+    onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<void | {}>;
+}
+
+type AnimationState = 'enter' | 'leave' | null;
+declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, ModalOptions {
+    private overlay;
+    private renderer;
+    private cfr;
+    private elementRef;
+    private viewContainer;
+    private modalControl;
+    private changeDetector;
+    private focusMonitor;
+    protected readonly document: Document;
+    componentColors: typeof KbqComponentColors;
+    kbqModalType: ModalType;
+    kbqComponent: Type<T>;
+    kbqContent: string | TemplateRef<{}> | Type<T>;
+    kbqFooter: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    get kbqVisible(): boolean;
+    set kbqVisible(value: boolean);
+    private _kbqVisible;
+    readonly kbqVisibleChange: i0.OutputEmitterRef<boolean>;
+    kbqWidth: number | string;
+    kbqSize: ModalSize;
+    kbqWrapClassName: string;
+    kbqClassName: string;
+    kbqStyle: object;
+    kbqTitle: string | TemplateRef<{}>;
+    kbqCaption: string | TemplateRef<{}>;
+    kbqCloseByESC: boolean;
+    get kbqClosable(): boolean;
+    set kbqClosable(value: boolean);
+    private _kbqClosable;
+    get kbqMask(): boolean;
+    set kbqMask(value: boolean);
+    private _kbqMask;
+    get kbqMaskClosable(): boolean;
+    set kbqMaskClosable(value: boolean);
+    private _kbqMaskClosable;
+    kbqMaskStyle: object;
+    kbqBodyStyle: object;
+    readonly kbqAfterOpen: EventEmitter<void>;
+    readonly kbqAfterClose: EventEmitter<R | undefined>;
+    /** Emitted before the modal begins its closing animation. */
+    readonly kbqBeforeClose: EventEmitter<R | undefined>;
+    kbqOkText: string;
+    kbqOkType: KbqComponentColors;
+    kbqRestoreFocus: boolean;
+    get kbqOkLoading(): boolean;
+    set kbqOkLoading(value: boolean);
+    private _kbqOkLoading;
+    readonly kbqOnOk: EventEmitter<T> | OnClickCallback<T>;
+    kbqCancelText: string;
+    get kbqCancelLoading(): boolean;
+    set kbqCancelLoading(value: boolean);
+    private _kbqCancelLoading;
+    readonly kbqOnCancel: EventEmitter<T> | OnClickCallback<T>;
+    readonly modalContainer: i0.Signal<ElementRef<any>>;
+    readonly bodyContainer: i0.Signal<ViewContainerRef>;
+    readonly autoFocusedButtons: i0.Signal<readonly ElementRef<any>[]>;
+    maskAnimationClassMap: object | null;
+    modalAnimationClassMap: object | null;
+    transformOrigin: string;
+    get afterOpen(): Observable<void>;
+    /** Observable alias for `kbqBeforeClose` */
+    get beforeClose(): Observable<R | undefined>;
+    get afterClose(): Observable<R | undefined>;
+    get okText(): string;
+    get cancelText(): string;
+    get hidden(): boolean;
+    private focusedElementBeforeOpen;
+    private previouslyFocusedElementOrigin;
+    private contentComponentRef;
+    private animationState;
+    private container;
+    kbqGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    open(): void;
+    close(result?: R): void;
+    destroy(result?: R): void;
+    markForCheck(): void;
+    triggerOk(): void;
+    triggerCancel(): void;
+    getInstance(): KbqModalComponent;
+    getContentComponentRef(): ComponentRef<T>;
+    getContentComponent(): T;
+    getElement(): HTMLElement;
+    getKbqFooter(): HTMLElement;
+    onClickMask($event: MouseEvent): void;
+    isModalType(type: ModalType): boolean;
+    onKeyDown(event: KeyboardEvent): void;
+    onClickCloseBtn(): void;
+    onClickOkCancel(type: 'ok' | 'cancel'): void;
+    handleCloseResult(triggerType: 'ok' | 'cancel', canClose: (doClose: boolean | void | {}) => boolean): void;
+    isNonEmptyString(value: {}): boolean;
+    isTemplateRef(value: {}): boolean;
+    isComponent(value: {}): boolean;
+    isModalButtons(value: {}): boolean;
+    getButtonCallableProp(options: IModalButtonOptions<T>, prop: string): {};
+    /** Returns the full set of classes for the modal container: base, custom class name, size and animation classes. */
+    protected getContainerClasses(): string;
+    onButtonClick(button: IModalButtonOptions<T>): void;
+    /**
+     * Sets mask animation classes for the given state, or clears them if state is null.
+     * @docs-private
+     */
+    animateMaskTo(state: AnimationState): void;
+    private handleVisibleStateChange;
+    private changeVisibleFromInside;
+    private changeAnimationState;
+    private animateTo;
+    private formatModalButtons;
+    /**
+     * Create a component dynamically but not attach to any View
+     * (this action will be executed when bodyContainer is ready)
+     * @param component Component class
+     */
+    private createDynamicComponent;
+    private updateTransformOrigin;
+    /**
+     * Take care of the body's overflow to decide the existence of scrollbar
+     * @param plusNum The number that the openModals.length will increase soon
+     */
+    private changeBodyOverflow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCaption": { "alias": "kbqCaption"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqBeforeClose": "kbqBeforeClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], true, never>;
+}
+
+/**
+ * API class that public to users to handle the modal instance.
+ * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
+ */
+declare abstract class KbqModalRef<C = any, R = unknown> {
+    abstract afterOpen: Observable<void>;
+    abstract beforeClose: Observable<R | undefined>;
+    abstract afterClose: Observable<R | undefined>;
+    abstract open(): void;
+    abstract close(result?: R): void;
+    abstract destroy(result?: R): void;
+    /**
+     * Trigger the kbqOnOk/kbqOnCancel by manual
+     */
+    abstract triggerOk(): void;
+    abstract triggerCancel(): void;
+    /**
+     * Return the component instance of kbqContent when specify kbqContent as a Component
+     * Note: this method may return undefined if the Component has not ready yet.
+     * (it only available after Modal's ngOnInit)
+     */
+    abstract getContentComponent(): C;
+    /**
+     * Get the dom element of this Modal
+     */
+    abstract getElement(): HTMLElement;
+    /**
+     * Get the instance of the Modal itself
+     */
+    abstract getInstance(): KbqModalComponent;
+    /**
+     * Call markForCheck for change detector
+     */
+    abstract markForCheck(): any;
+}
+
+declare class KbqModalTitle {
+    protected modal: KbqModalComponent<any, any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalTitle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalTitle, "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KbqModalBody {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalBody, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", never, {}, {}, never, never, true, never>;
+}
+declare class KbqModalFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalFooter, "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", never, {}, {}, never, never, true, never>;
+}
+declare class KbqModalMainAction {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalMainAction, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalMainAction, "[kbq-modal-main-action]", never, {}, {}, never, never, true, never>;
+}
+
+declare class CssUnitPipe implements PipeTransform {
+    transform(value: number | string, defaultUnit?: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CssUnitPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<CssUnitPipe, "toCssUnit", true>;
+}
+
+declare class KbqModalModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqModalModule, never, [typeof i1.OverlayModule, typeof i2.A11yModule, typeof i3.KbqButtonModule, typeof i4.KbqIconModule, typeof i5.KbqTitleModule, typeof i6.NgTemplateOutlet, typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalBody, typeof KbqModalFooter, typeof CssUnitPipe, typeof KbqModalMainAction], [typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalBody, typeof KbqModalFooter, typeof KbqModalMainAction]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqModalModule>;
+}
+
+/** Injection token that can be used to access the data that was passed in to a modal. */
+declare const KBQ_MODAL_DATA: InjectionToken<unknown>;
+/**
+ * A builder used for managing service creating modals
+ * @docs-private
+ */
+declare class ModalBuilderForService {
+    private readonly overlay;
+    readonly options: IModalOptionsForService;
+    private readonly injector;
+    private modalRef;
+    private overlayRef;
+    constructor(overlay: Overlay, options: IModalOptionsForService | undefined, injector: Injector);
+    getInstance(): KbqModalComponent | null;
+    destroyModal(): void;
+    private changeProps;
+    private createModal;
+}
+declare class KbqModalService {
+    private readonly overlay;
+    private readonly modalControl;
+    private injector;
+    get openModals(): KbqModalRef[];
+    get afterAllClose(): Observable<void>;
+    closeAll(): void;
+    create<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    confirm<C, R = unknown>(options?: IModalOptionsForService<C>, confirmType?: ConfirmType): KbqModalRef<C, R>;
+    open<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    success<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    delete<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqModalService>;
+}
+
+export { KBQ_MODAL_DATA, KbqModalBody, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, MODAL_ANIMATE_DURATION, ModalBuilderForService, ModalSize };
+export type { ConfirmType, IModalButtonOptions, IModalOptionsForService, ModalOptions, ModalType, OnClickCallback };

package/modal/modal.scss

@@ -102,6 +102,21 @@
     padding-bottom: var(--kbq-size-3xs);
 }
 
+.kbq-modal-header-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.kbq-modal-caption {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .kbq-modal-body {
     display: block;
     overflow-y: auto;