@koobiq/components 19.4.1 → 19.6.0

package/inline-edit/inline-edit.d.ts

@@ -1,10 +1,12 @@
-import { CdkConnectedOverlay, CdkOverlayOrigin, ScrollStrategy } from '@angular/cdk/overlay';
-import { TemplateRef } from '@angular/core';
+import { CdkConnectedOverlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { ElementRef, TemplateRef } from '@angular/core';
 import { KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqFormField, KbqLabel } from '@koobiq/components/form-field';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+export type KbqInlineEditMode = 'view' | 'edit';
 /** @docs-private */
 export declare class KbqFocusRegionItem {
     readonly tabOut: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
@@ -35,10 +37,10 @@ export declare class KbqInlineEditMenu {
  * Edit mode opens in a positioned overlay that matches the view mode width or can be customized.
  */
 export declare class KbqInlineEdit {
-    private readonly elementRef;
-    private readonly focusMonitor;
     private readonly overlay;
     private readonly document;
+    private readonly resizeObserver;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     /**
      * Whether to show save/cancel action buttons in edit mode.
      * @default false
@@ -64,16 +66,22 @@ export declare class KbqInlineEdit {
     readonly getValueHandler: import("@angular/core").InputSignal<(() => unknown) | undefined>;
     /** Handler function to update the value */
     readonly setValueHandler: import("@angular/core").InputSignal<((value: any) => void) | undefined>;
+    /** Customizable function that checks if saving on enter available. */
+    readonly canSaveOnEnter: import("@angular/core").InputSignal<(event: KeyboardEvent) => boolean>;
     /**
-     * Customizable function that checks if saving on enter available.
+     * CSS selectors for elements in view mode that should handle clicks instead of opening edit mode.
+     * Override to replace or extend the default list.
+     *
+     * @example
+     * `<kbq-inline-edit [interactiveSelectors]="['a', 'kbq-tag', 'button']">`
      */
-    readonly canSaveOnEnter: import("@angular/core").InputSignal<(event: KeyboardEvent) => boolean>;
+    readonly interactiveSelectors: import("@angular/core").InputSignal<string[]>;
     /** Emitted when the inline edit is saved successfully. */
     protected readonly saved: import("@angular/core").OutputEmitterRef<void>;
     /** Emitted when the inline edit is canceled and changes are discarded. */
     protected readonly canceled: import("@angular/core").OutputEmitterRef<void>;
     /** Emitted when mode switched to edit/view */
-    protected readonly modeChange: import("@angular/core").OutputEmitterRef<"view" | "edit">;
+    protected readonly modeChange: import("@angular/core").OutputEmitterRef<KbqInlineEditMode>;
     /** @docs-private */
     protected readonly menu: import("@angular/core").Signal<KbqInlineEditMenu | undefined>;
     /** @docs-private */
@@ -81,21 +89,25 @@ export declare class KbqInlineEdit {
     /** @docs-private */
     protected readonly formFieldRef: import("@angular/core").Signal<KbqFormField | undefined>;
     /** @docs-private */
-    protected readonly overlayOrigin: import("@angular/core").Signal<CdkOverlayOrigin>;
+    protected readonly formFieldRefList: import("@angular/core").Signal<readonly KbqFormField[]>;
+    /** @docs-private */
+    protected overlayOrigin: HTMLElement;
     /** @docs-private */
     protected readonly tooltipTrigger: import("@angular/core").Signal<KbqTooltipTrigger | undefined>;
     /** @docs-private */
+    protected readonly viewContainer: import("@angular/core").Signal<ElementRef<HTMLElement>>;
+    /** @docs-private */
     protected readonly overlayDir: import("@angular/core").Signal<CdkConnectedOverlay | undefined>;
     /** @docs-private */
     protected readonly regionItems: import("@angular/core").Signal<readonly KbqFocusRegionItem[]>;
     /** @docs-private */
-    protected readonly mode: import("@angular/core").WritableSignal<"view" | "edit">;
+    protected readonly mode: import("@angular/core").WritableSignal<KbqInlineEditMode>;
     /** @docs-private */
     protected readonly overlayWidth: import("@angular/core").WritableSignal<string | number>;
     /** @docs-private */
     protected readonly scrollStrategy: import("@angular/core").WritableSignal<ScrollStrategy>;
     /** @docs-private */
-    readonly modeAsReadonly: import("@angular/core").Signal<"view" | "edit">;
+    readonly modeAsReadonly: import("@angular/core").Signal<KbqInlineEditMode>;
     /** @docs-private */
     protected readonly className: import("@angular/core").Signal<string>;
     /** @docs-private */
@@ -120,6 +132,13 @@ export declare class KbqInlineEdit {
     protected cancel(): void;
     /** @docs-private */
     protected onOverlayKeydown(event: KeyboardEvent): void;
+    /**
+     * Block propagation of overlay outside click.
+     * Used to prevent reopening when target is inline edit itself.
+     * @docs-private
+     */
+    protected onOverlayOutsideClick($event: Event): void;
+    private isInteractiveElement;
     /**
      * Sets up Tab key listeners on region items.
      * Single item: Tab moves to next edit.
@@ -134,6 +153,7 @@ export declare class KbqInlineEdit {
     private setOverlayWidth;
     private openPanel;
     private getInputNativeElement;
+    private markAllAsTouched;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }

package/inline-edit/inline-edit.scss

@@ -29,7 +29,8 @@
 
         .kbq-mask__fade {
             background: var(--kbq-mask-background, transparent);
-            mask-image: linear-gradient(90deg, transparent, var(--kbq-black-default));
+            // @TODO remove fallback (#DS-3002)
+            mask-image: linear-gradient(90deg, transparent, var(--kbq-plt-black, var(--kbq-black-default)));
         }
 
         .kbq-mask__container {
@@ -39,6 +40,17 @@
 }
 
 @mixin _inline-edit-theme {
+    background: var(--kbq-inline-edit-background);
+
+    &:focus-visible {
+        outline: none;
+    }
+
+    &.cdk-keyboard-focused {
+        box-shadow: inset 0 0 0.1px 1px var(--kbq-states-line-focus-theme);
+        border-color: var(--kbq-states-line-focus-theme);
+    }
+
     &.kbq-inline-edit_view {
         &:not(.kbq-inline-edit_disabled) {
             &:hover {
@@ -68,18 +80,8 @@
     }
 
     .kbq-inline-edit__focus_container {
-        background: var(--kbq-inline-edit-background);
-        border-color: var(--kbq-inline-edit-background);
-
-        &:focus-visible {
-            outline: none;
-        }
-
-        &.cdk-keyboard-focused {
-            $focused-color: var(--kbq-states-line-focus-theme);
-            outline: 1px solid $focused-color;
-            border-color: $focused-color;
-        }
+        display: flex;
+        flex-direction: column;
     }
 }
 
@@ -91,16 +93,18 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    box-sizing: border-box;
+
+    border: var(--kbq-size-border-width) solid transparent;
     border-radius: var(--kbq-size-border-radius);
     padding: var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);
     min-height: var(--kbq-inline-edit-height);
-    box-sizing: border-box;
 
     @include _inline-edit-theme();
     @include _inline-edit-typography();
 
     &:not(.kbq-inline-edit_with-label) {
-        --kbq-inline-edit-padding-horizontal: var(--kbq-size-m);
+        --kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width));
     }
 
     &.kbq-inline-edit_with-label {
@@ -120,6 +124,12 @@
 
     &.kbq-inline-edit_view {
         .kbq-inline-edit__view-container {
+            display: flex;
+            text-overflow: ellipsis;
+        }
+
+        .kbq-inline-edit__view-content {
+            display: inline-block;
             text-overflow: ellipsis;
         }
     }
@@ -137,14 +147,14 @@
 
     @include _mask(
         (
-            'top': 0,
-            'right': 0
+            'top': calc(var(--kbq-size-border-width) * -1),
+            'right': calc(var(--kbq-size-border-width) * -1)
         )
     );
 
     .kbq-inline-edit__menu-mask {
         opacity: 0;
-        height: 100%;
+        height: calc(100% + 2 * var(--kbq-size-border-width));
         justify-content: flex-end;
         border-top-right-radius: var(--kbq-size-border-radius);
         border-bottom-right-radius: var(--kbq-size-border-radius);
@@ -171,18 +181,6 @@
             z-index: 2;
         }
     }
-
-    .kbq-inline-edit__focus_container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: calc(100% - 2 * var(--kbq-size-border-width));
-        height: calc(100% - 2 * var(--kbq-size-border-width));
-        border: var(--kbq-size-border-width) solid transparent;
-        border-radius: var(--kbq-size-border-radius);
-        // set z-index to hide mask borders
-        z-index: 1;
-    }
 }
 
 .kbq-inline-edit__panel {

package/input/input-password.d.ts

@@ -10,6 +10,7 @@ export declare class KbqInputPassword implements KbqFormFieldControl<any>, OnCha
     parentForm: NgForm;
     parentFormGroup: FormGroupDirective;
     defaultErrorStateMatcher: ErrorStateMatcher;
+    private readonly useLegacyValidation;
     /** Whether the component is in an error state. */
     errorState: boolean;
     /** An object used to control when error messages are shown. */

package/input/input.d.ts

@@ -12,6 +12,7 @@ export declare class KbqInput implements KbqFormFieldControl<any>, OnChanges, On
     parentForm: NgForm;
     parentFormGroup: FormGroupDirective;
     defaultErrorStateMatcher: ErrorStateMatcher;
+    private readonly useLegacyValidation;
     /** Whether the component is in an error state. */
     errorState: boolean;
     /** An object used to control when error messages are shown. */

package/link/_link-theme.scss

@@ -16,9 +16,17 @@
 
     &.kbq-text-only,
     & .kbq-link__text {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-        border-bottom-color: transparent;
+        text-decoration-line: underline;
+        text-decoration-style: solid;
+        text-decoration-thickness: var(--kbq-link-underline-width);
+        text-decoration-color: transparent;
+        text-underline-offset: calc(var(--kbq-link-size-multiline-hit-area-gap) + var(--kbq-link-underline-width));
+    }
+
+    &.kbq-link_multiline {
+        padding-top: var(--kbq-link-size-multiline-hit-area-gap);
+        padding-bottom: var(--kbq-link-size-multiline-hit-area-gap);
+        box-decoration-break: clone;
     }
 
     &.kbq-text-with-icon .kbq-icon {
@@ -104,7 +112,7 @@
     &:not(.kbq-link_pseudo, .kbq-link_no-underline) {
         &.kbq-text-only:not(.kbq-text-with-dot),
         & .kbq-link__text {
-            border-bottom-color: var(--kbq-#{$base-path}-border-bottom);
+            text-decoration-color: var(--kbq-#{$base-path}-border-bottom);
         }
     }
 
@@ -130,7 +138,7 @@
             &.kbq-link_pseudo {
                 &.kbq-text-only:not(.kbq-text-with-dot),
                 & .kbq-link__text {
-                    border-bottom-color: var(--kbq-link-state-hover-border-bottom);
+                    text-decoration-color: var(--kbq-link-state-hover-border-bottom);
                 }
             }
         }
@@ -142,7 +150,7 @@
             &.kbq-link_pseudo {
                 &.kbq-text-only:not(.kbq-text-with-dot),
                 & .kbq-link__text {
-                    border-bottom-color: var(--kbq-link-state-active-border-bottom);
+                    text-decoration-color: var(--kbq-link-state-active-border-bottom);
                 }
             }
         }
@@ -163,7 +171,9 @@
         }
 
         &.cdk-keyboard-focused {
-            outline: var(--kbq-link-state-focused-outline) solid;
+            outline-style: solid;
+            outline-width: var(--kbq-link-size-state-focused-outline-width);
+            outline-color: var(--kbq-link-state-focused-outline);
         }
 
         &.kbq-disabled {
@@ -178,7 +188,7 @@
                 &.kbq-text-only,
                 &.kbq-text-with-icon .kbq-link__text,
                 &.kbq-text-with-dot .kbq-link__text {
-                    border-bottom: none;
+                    text-decoration: none;
                 }
 
                 &::after {

package/link/link-tokens.scss

@@ -1,22 +1,25 @@
 .kbq-link {
     --kbq-link-size-state-focused-outline-offset: 0px;
     --kbq-link-size-state-focused-outline-width: 2px;
+    --kbq-link-size-multiline-hit-area-gap: calc((1lh - 1em) / 2);
     --kbq-link-size-compact-content-padding: var(--kbq-size-xxs);
     --kbq-link-size-normal-content-padding: var(--kbq-size-xxs);
     --kbq-link-size-big-content-padding: var(--kbq-size-xxs);
+    --kbq-link-underline-width: 1px;
     /* THEME TOKENS */
     --kbq-link-text: var(--kbq-foreground-theme);
-    --kbq-link-border-bottom: var(--kbq-line-theme-less);
+    --kbq-link-border-bottom: var(--kbq-line-theme-fade);
     --kbq-link-state-visited-text: var(--kbq-foreground-visited);
-    --kbq-link-state-visited-border-bottom: var(--kbq-line-visited);
+    /* @TODO (#DS-3002) */
+    --kbq-link-state-visited-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
-    --kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited);
+    --kbq-link-state-visited-hover-border-bottomm: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
-    --kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited);
+    --kbq-link-state-visited-active-border-bottomm: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
-    --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-less);
+    --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-fade);
     --kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);
-    --kbq-link-state-active-border-bottom: var(--kbq-line-theme-less);
+    --kbq-link-state-active-border-bottom: var(--kbq-line-theme-fade);
     --kbq-link-state-focused-outline: var(--kbq-states-line-focus-theme);
     --kbq-link-state-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-link-state-disabled-border-bottom: var(--kbq-states-line-disabled);

package/link/link.component.d.ts

@@ -1,12 +1,11 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { AfterContentInit, AfterViewInit, DestroyRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare const baseURLRegex: RegExp;
 export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestroy {
     private elementRef;
     private focusMonitor;
-    private changeDetector;
     protected readonly renderer: Renderer2;
     protected readonly destroyRef: DestroyRef;
     protected readonly nativeElement: HTMLElement;
@@ -14,7 +13,8 @@ export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestr
     /** Whether the link is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
-    private _disabled;
+    /** @docs-private */
+    readonly disabledSignal: import("@angular/core").WritableSignal<boolean>;
     get tabIndex(): number;
     set tabIndex(value: number);
     private _tabIndex;
@@ -22,14 +22,17 @@ export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestr
     noUnderline: boolean;
     big: boolean;
     compact: boolean;
+    /** Whether the link has an increased hit area for multiline usage. */
+    multiline: boolean;
     useVisited: boolean;
     get hasIcon(): boolean;
     set print(value: any);
     private _print;
     printMode: boolean;
     printUrl: string;
+    private _disabled;
     icon: KbqIcon;
-    constructor(elementRef: ElementRef<HTMLAnchorElement>, focusMonitor: FocusMonitor, changeDetector: ChangeDetectorRef);
+    constructor(elementRef: ElementRef<HTMLAnchorElement>, focusMonitor: FocusMonitor);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(): void;
@@ -38,12 +41,13 @@ export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestr
     private updateClassModifierForIcons;
     private updatePrintUrl;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLink, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["kbqLink"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon", "icons"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["kbqLink"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon", "icons"], never, true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_pseudo: unknown;
     static ngAcceptInputType_noUnderline: unknown;
     static ngAcceptInputType_big: unknown;
     static ngAcceptInputType_compact: unknown;
+    static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_useVisited: unknown;
 }

package/loader-overlay/_loader-overlay-theme.scss

@@ -29,6 +29,18 @@
             color: var(--kbq-loader-overlay-transparent-caption-color);
         }
     }
+
+    .kbq-loader-overlay_card {
+        &.kbq-loader-overlay_filled,
+        &.kbq-loader-overlay_transparent {
+            background: color-mix(
+                in srgb,
+                var(--kbq-loader-overlay-card-overlay-background) /* color-mix only allows percentage value */
+                    calc(var(--kbq-opacity-overlay) * 100%),
+                transparent
+            );
+        }
+    }
 }
 
 @mixin kbq-loader-overlay-typography() {

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

@@ -15,4 +15,5 @@
     --kbq-loader-overlay-filled-overlay-background: var(--kbq-background-bg);
     --kbq-loader-overlay-filled-text-color: var(--kbq-foreground-contrast);
     --kbq-loader-overlay-filled-caption-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-loader-overlay-card-overlay-background: var(--kbq-background-card);
 }

package/loader-overlay/loader-overlay.component.d.ts

@@ -20,6 +20,11 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     caption: string;
     size: KbqDefaultSizes;
     transparent: boolean;
+    /**
+     * Uses a semi-transparent background to blend
+     * with the underlying card or modal surface. When enabled, overrides `transparent`.
+     */
+    card: boolean;
     private parent;
     get isExternalIndicator(): boolean;
     get isExternalText(): boolean;
@@ -37,5 +42,6 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     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; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], true, 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; }; "transparent": { "alias": "transparent"; "required": false; }; "card": { "alias": "card"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], true, never>;
+    static ngAcceptInputType_card: unknown;
 }

package/markdown/_markdown-theme.scss

@@ -30,7 +30,7 @@
         }
 
         .kbq-markdown__pre,
-        .kbq-markdown__code:not(.kbq-markdown__a .kbq-markdown__code) {
+        .kbq-markdown__code:not(.kbq-markdown__pre > .kbq-markdown__code, .kbq-markdown__a .kbq-markdown__code) {
             color: var(--kbq-markdown-code-text);
             background-color: var(--kbq-markdown-code-background);
         }
@@ -39,36 +39,8 @@
             background-color: var(--kbq-markdown-code-background);
         }
 
-        .kbq-markdown__a {
-            color: var(--kbq-markdown-link-text, var(--kbq-foreground-theme));
-            border-bottom-color: var(--kbq-markdown-link-border-bottom, var(--kbq-line-theme-less));
-
-            &:has(.kbq-markdown__code) {
-                display: inline;
-                border-bottom: none;
-            }
-
-            &:visited {
-                color: var(--kbq-markdown-link-state-visited-text, var(--kbq-foreground-visited));
-                border-bottom-color: var(--kbq-markdown-link-state-visited-border-bottom, var(--kbq-line-visited));
-            }
-
-            &:hover {
-                color: var(--kbq-markdown-link-state-hover-text, var(--kbq-states-foreground-theme-hover));
-                transition: color 0ms;
-                border-bottom-color: var(--kbq-markdown-link-state-hover-border-bottom, var(--kbq-line-theme-less));
-            }
-
-            &:active {
-                color: var(--kbq-markdown-link-state-active, var(--kbq-states-foreground-theme-active));
-            }
-
-            &:focus {
-                outline: var(--kbq-markdown-link-state-focused-outline, var(--kbq-link-state-focused-outline)) solid
-                    var(--kbq-markdown-link-size-state-focused-outline-width, var(--kbq-size-3xs));
-
-                outline-offset: var(--kbq-markdown-link-size-state-focused-outline-offset, 0);
-            }
+        .kbq-markdown__a:has(.kbq-markdown__code) {
+            text-decoration-line: none;
         }
 
         .kbq-markdown__img + em {

package/markdown/markdown-tokens.scss

@@ -41,9 +41,6 @@
     --kbq-markdown-code-size-multiline-padding: var(--kbq-size-m) var(--kbq-size-l);
     --kbq-markdown-code-size-border-radius: var(--kbq-size-border-radius);
     --kbq-markdown-code-size-border-width: var(--kbq-size-border-width);
-    --kbq-markdown-link-size-icon-margin: var(--kbq-link-size-normal-content-padding, var(--kbq-size-xxs));
-    --kbq-markdown-link-size-state-focused-outline-offset: var(--kbq-link-size-state-focused-outline-offset);
-    --kbq-markdown-link-size-state-focused-outline-width: var(--kbq-link-size-state-focused-outline-width);
     --kbq-markdown-image-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-image-size-margin-top: var(--kbq-size-m);
     --kbq-markdown-image-size-margin-bottom: var(--kbq-size-m);
@@ -71,14 +68,6 @@
     --kbq-markdown-code-text: var(--kbq-foreground-contrast);
     --kbq-markdown-code-background: var(--kbq-background-contrast-fade);
     --kbq-markdown-code-border: var(--kbq-line-contrast-less);
-    --kbq-markdown-link-text: var(--kbq-link-text);
-    --kbq-markdown-link-border-bottom: var(--kbq-link-border-bottom);
-    --kbq-markdown-link-state-visited-text: var(--kbq-link-state-visited-text);
-    --kbq-markdown-link-state-visited-border-bottom: var(--kbq-link-state-visited-border-bottom);
-    --kbq-markdown-link-state-hover-text: var(--kbq-link-state-hover-text);
-    --kbq-markdown-link-state-hover-border-bottom: var(--kbq-link-state-hover-border-bottom);
-    --kbq-markdown-link-state-active: var(--kbq-link-state-active-text);
-    --kbq-markdown-link-state-focused-outline: var(--kbq-link-state-focused-outline);
     --kbq-markdown-image-caption-text: var(--kbq-foreground-contrast-secondary);
     --kbq-markdown-hr-color: var(--kbq-line-contrast-less);
     --kbq-markdown-table-header: var(--kbq-foreground-contrast-secondary);

package/markdown/markdown.component.d.ts

@@ -1,26 +1,31 @@
-import { ChangeDetectorRef, InjectionToken, Provider } from '@angular/core';
+import { InjectionToken, OnDestroy, Provider } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { MarkedOptions } from 'marked';
 import { KbqMarkdownService } from './markdown.service';
 import * as i0 from "@angular/core";
 /** List of options for `marked` library. */
-export declare const KBQ_MARKDOWN_MARKED_OPTIONS: InjectionToken<MarkedOptions>;
+export declare const KBQ_MARKDOWN_MARKED_OPTIONS: InjectionToken<MarkedOptions<string, string>>;
 /** Utility provider for `KBQ_MARKDOWN_MARKED_OPTIONS`. */
 export declare const kbqMarkdownMarkedOptionsProvider: (options: MarkedOptions) => Provider;
 /** Component which allows to convert `Markdown` into `HTML` */
-export declare class KbqMarkdown {
+export declare class KbqMarkdown implements OnDestroy {
     private readonly markdownService;
-    private readonly cdr;
     private sanitizer;
     private readonly markedOptions?;
     private readonly contentWrapper;
+    private readonly outputWrapper;
+    protected resultHtml: import("@angular/core").WritableSignal<SafeHtml | null>;
     /** `Markdown` text. */
     get markdownText(): string | null;
     set markdownText(value: string | null);
     private _markdownText;
-    protected resultHtml: SafeHtml;
-    constructor(markdownService: KbqMarkdownService, cdr: ChangeDetectorRef, sanitizer: DomSanitizer, markedOptions?: MarkedOptions | undefined);
+    private readonly focusMonitor;
+    private readonly links;
+    constructor(markdownService: KbqMarkdownService, sanitizer: DomSanitizer, markedOptions?: MarkedOptions | undefined);
+    ngOnDestroy(): void;
     private getResultHTML;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdown, [null, null, null, { optional: true; }]>;
+    private startMonitoringLinks;
+    private stopMonitoringLinks;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdown, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqMarkdown, "kbq-markdown", never, { "markdownText": { "alias": "markdownText"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/markdown/markdown.scss

@@ -33,17 +33,6 @@
         }
     }
 
-    .kbq-markdown__a {
-        display: inline;
-
-        text-decoration: none;
-        cursor: pointer;
-
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-        transition: color ease-out 300ms;
-    }
-
     .kbq-markdown__p {
         margin-top: var(--kbq-markdown-p-size-margin-top);
         margin-bottom: var(--kbq-markdown-p-size-margin-bottom);

package/modal/modal-ref.class.d.ts

@@ -6,6 +6,7 @@ import { KbqModalComponent } from './modal.component';
  */
 export 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;