@koobiq/components 19.4.1 → 19.5.0

package/fesm2022/koobiq-components-username.mjs

@@ -85,11 +85,11 @@ class KbqUsernamePipe {
         });
         return result.trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePipe, isStandalone: true, name: "kbqUsername" }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernamePipe, isStandalone: true, name: "kbqUsername" }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernamePipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernamePipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -129,11 +129,11 @@ class KbqUsernameCustomPipe {
         });
         return result.trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomPipe, isStandalone: true, name: "kbqUsernameCustom" }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameCustomPipe, isStandalone: true, name: "kbqUsernameCustom" }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameCustomPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameCustomPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -147,10 +147,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 const baseClass = 'kbq-username';
 /** Styles the primary part of the username (e.g. full name). */
 class KbqUsernamePrimary {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqUsernamePrimary, isStandalone: true, selector: "[kbqUsernamePrimary]", host: { classAttribute: "kbq-username__primary" }, exportAs: ["kbqUsernamePrimary"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernamePrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqUsernamePrimary, isStandalone: true, selector: "[kbqUsernamePrimary]", host: { classAttribute: "kbq-username__primary" }, exportAs: ["kbqUsernamePrimary"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePrimary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernamePrimary, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernamePrimary]',
@@ -162,10 +162,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 /** Styles the secondary part. */
 class KbqUsernameSecondary {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameSecondary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqUsernameSecondary, isStandalone: true, selector: "[kbqUsernameSecondary]", host: { classAttribute: "kbq-username__secondary" }, exportAs: ["kbqUsernameSecondary"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameSecondary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqUsernameSecondary, isStandalone: true, selector: "[kbqUsernameSecondary]", host: { classAttribute: "kbq-username__secondary" }, exportAs: ["kbqUsernameSecondary"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameSecondary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameSecondary, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernameSecondary]',
@@ -177,10 +177,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 /** Styles a secondary hint. */
 class KbqUsernameSecondaryHint {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameSecondaryHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqUsernameSecondaryHint, isStandalone: true, selector: "[kbqUsernameSecondaryHint]", host: { classAttribute: "kbq-username__secondary-hint" }, exportAs: ["kbqUsernameSecondaryHint"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameSecondaryHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqUsernameSecondaryHint, isStandalone: true, selector: "[kbqUsernameSecondaryHint]", host: { classAttribute: "kbq-username__secondary-hint" }, exportAs: ["kbqUsernameSecondaryHint"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameSecondaryHint, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameSecondaryHint, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernameSecondaryHint]',
@@ -192,10 +192,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 /** Custom content for `KbqUsername`, overrides default view. */
 class KbqUsernameCustomView {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqUsernameCustomView, isStandalone: true, selector: "kbq-username-custom-view, [kbq-username-custom-view]", host: { classAttribute: "kbq-username__custom-view" }, exportAs: ["kbqUsernameCustomView"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameCustomView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqUsernameCustomView, isStandalone: true, selector: "kbq-username-custom-view, [kbq-username-custom-view]", host: { classAttribute: "kbq-username__custom-view" }, exportAs: ["kbqUsernameCustomView"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameCustomView, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-username-custom-view, [kbq-username-custom-view]',
@@ -246,10 +246,10 @@ class KbqUsername {
             return [this.type(), this.mode()].map((modificator) => `${baseClass}_${modificator}`).join(' ');
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KbqUsername, isStandalone: true, selector: "kbq-username", inputs: { userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, fullNameFormat: { classPropertyName: "fullNameFormat", publicName: "fullNameFormat", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" }, classAttribute: "kbq-username" }, queries: [{ propertyName: "customView", first: true, predicate: KbqUsernameCustomView, descendants: true, isSignal: true }], exportAs: ["kbqUsername"], ngImport: i0, template: "@let profile = userInfo();\n<ng-content select=\"kbq-username-custom-view,[kbq-username-custom-view]\" />\n\n@if (!customView() && profile) {\n    @let fullName = profile | kbqUsername: fullNameFormat();\n\n    @if (!isCompact()) {\n        @if (hasFullName()) {\n            <span kbq-title kbqUsernamePrimary>{{ fullName }}</span>\n        }\n\n        @if (profile.login) {\n            <span kbq-title kbqUsernameSecondary>\n                {{ profile.login }}\n\n                @if (profile.site) {\n                    <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                }\n            </span>\n        }\n    } @else {\n        <span kbq-title kbqUsernamePrimary>\n            @if (hasFullName()) {\n                <span>{{ fullName }}</span>\n            }\n            @if (!hasFullName() && profile.login) {\n                {{ profile.login }}\n            }\n\n            @if (profile.site) {\n                <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n            }\n        </span>\n    }\n}\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-username{color:var(--kbq-username-primary-color)}.kbq-username .kbq-username__secondary,.kbq-username .kbq-username__secondary-hint{color:var(--kbq-username-secondary-color)}.kbq-username.kbq-username_default .kbq-username__secondary-hint,.kbq-username.kbq-username_default .kbq-username__primary+.kbq-username__secondary{--kbq-username-secondary-color: var(--kbq-foreground-contrast-secondary)}.kbq-username.kbq-username_error{--kbq-username-primary-color: var(--kbq-foreground-error);--kbq-username-secondary-color: var(--kbq-foreground-error)}.kbq-username.kbq-username_accented{--kbq-username-primary-color: var(--kbq-foreground-contrast);--kbq-username-secondary-color: var(--kbq-foreground-contrast)}.kbq-username.kbq-username_inherit{--kbq-username-primary-color: inherit;--kbq-username-secondary-color: inherit}.kbq-username{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-username.kbq-username_accented .kbq-username__primary{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_stacked>.kbq-username__custom-view{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:normal;gap:var(--kbq-username-vertical-gap)}.kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:baseline}.kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)) .kbq-username__primary+.kbq-username__secondary,.kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view .kbq-username__primary+.kbq-username__secondary{margin-left:var(--kbq-username-horizontal-gap)}[dir=rtl] .kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)) .kbq-username__primary+.kbq-username__secondary,[dir=rtl] .kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view .kbq-username__primary+.kbq-username__secondary{margin-left:0;margin-right:var(--kbq-username-horizontal-gap)}.kbq-username.kbq-username_text:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_text>.kbq-username__custom-view{display:inline}.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)) .kbq-username__primary,.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)) .kbq-username__secondary,.kbq-username.kbq-username_stacked>.kbq-username__custom-view .kbq-username__primary,.kbq-username.kbq-username_stacked>.kbq-username__custom-view .kbq-username__secondary,.kbq-username.kbq-username_inline:not(:has(>.kbq-username__custom-view)) .kbq-username__primary,.kbq-username.kbq-username_inline:not(:has(>.kbq-username__custom-view)) .kbq-username__secondary,.kbq-username.kbq-username_inline>.kbq-username__custom-view .kbq-username__primary,.kbq-username.kbq-username_inline>.kbq-username__custom-view .kbq-username__secondary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-username.kbq-username_inherit:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_inherit>.kbq-username__custom-view{font:inherit;display:inherit}\n", ":where(.kbq-username){--kbq-username-primary-color: var(--kbq-foreground-contrast);--kbq-username-secondary-color: inherit;--kbq-username-vertical-gap: var(--kbq-size-xxs);--kbq-username-horizontal-gap: var(--kbq-size-xxs)}\n"], dependencies: [{ kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i1.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "pipe", type: KbqUsernamePipe, name: "kbqUsername" }, { kind: "directive", type: KbqUsernamePrimary, selector: "[kbqUsernamePrimary]", exportAs: ["kbqUsernamePrimary"] }, { kind: "directive", type: KbqUsernameSecondary, selector: "[kbqUsernameSecondary]", exportAs: ["kbqUsernameSecondary"] }, { kind: "directive", type: KbqUsernameSecondaryHint, selector: "[kbqUsernameSecondaryHint]", exportAs: ["kbqUsernameSecondaryHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqUsername, isStandalone: true, selector: "kbq-username", inputs: { userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, fullNameFormat: { classPropertyName: "fullNameFormat", publicName: "fullNameFormat", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" }, classAttribute: "kbq-username" }, queries: [{ propertyName: "customView", first: true, predicate: KbqUsernameCustomView, descendants: true, isSignal: true }], exportAs: ["kbqUsername"], ngImport: i0, template: "@let profile = userInfo();\n<ng-content select=\"kbq-username-custom-view,[kbq-username-custom-view]\" />\n\n@if (!customView() && profile) {\n    @let fullName = profile | kbqUsername: fullNameFormat();\n\n    @if (!isCompact()) {\n        @if (hasFullName()) {\n            <span kbq-title kbqUsernamePrimary>{{ fullName }}</span>\n        }\n\n        @if (profile.login) {\n            <span kbq-title kbqUsernameSecondary>\n                {{ profile.login }}\n\n                @if (profile.site) {\n                    <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                }\n            </span>\n        }\n    } @else {\n        <span kbq-title kbqUsernamePrimary>\n            @if (hasFullName()) {\n                <span>{{ fullName }}</span>\n            }\n            @if (!hasFullName() && profile.login) {\n                {{ profile.login }}\n            }\n\n            @if (profile.site) {\n                <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n            }\n        </span>\n    }\n}\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-username{color:var(--kbq-username-primary-color)}.kbq-username .kbq-username__secondary,.kbq-username .kbq-username__secondary-hint{color:var(--kbq-username-secondary-color)}.kbq-username.kbq-username_default .kbq-username__secondary-hint,.kbq-username.kbq-username_default .kbq-username__primary+.kbq-username__secondary{--kbq-username-secondary-color: var(--kbq-foreground-contrast-secondary)}.kbq-username.kbq-username_error{--kbq-username-primary-color: var(--kbq-foreground-error);--kbq-username-secondary-color: var(--kbq-foreground-error)}.kbq-username.kbq-username_accented{--kbq-username-primary-color: var(--kbq-foreground-contrast);--kbq-username-secondary-color: var(--kbq-foreground-contrast)}.kbq-username.kbq-username_inherit{--kbq-username-primary-color: inherit;--kbq-username-secondary-color: inherit}.kbq-username{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-username.kbq-username_accented .kbq-username__primary{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_stacked>.kbq-username__custom-view{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:normal;gap:var(--kbq-username-vertical-gap)}.kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:baseline}.kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)) .kbq-username__primary+.kbq-username__secondary,.kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view .kbq-username__primary+.kbq-username__secondary{margin-left:var(--kbq-username-horizontal-gap)}[dir=rtl] .kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)) .kbq-username__primary+.kbq-username__secondary,[dir=rtl] .kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view .kbq-username__primary+.kbq-username__secondary{margin-left:0;margin-right:var(--kbq-username-horizontal-gap)}.kbq-username.kbq-username_text:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_text>.kbq-username__custom-view{display:inline}.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)) .kbq-username__primary,.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)) .kbq-username__secondary,.kbq-username.kbq-username_stacked>.kbq-username__custom-view .kbq-username__primary,.kbq-username.kbq-username_stacked>.kbq-username__custom-view .kbq-username__secondary,.kbq-username.kbq-username_inline:not(:has(>.kbq-username__custom-view)) .kbq-username__primary,.kbq-username.kbq-username_inline:not(:has(>.kbq-username__custom-view)) .kbq-username__secondary,.kbq-username.kbq-username_inline>.kbq-username__custom-view .kbq-username__primary,.kbq-username.kbq-username_inline>.kbq-username__custom-view .kbq-username__secondary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-username.kbq-username_inherit:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_inherit>.kbq-username__custom-view{font:inherit;display:inherit}\n", ":where(.kbq-username){--kbq-username-primary-color: var(--kbq-foreground-contrast);--kbq-username-secondary-color: inherit;--kbq-username-vertical-gap: var(--kbq-size-xxs);--kbq-username-horizontal-gap: var(--kbq-size-xxs)}\n"], dependencies: [{ kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i1.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "pipe", type: KbqUsernamePipe, name: "kbqUsername" }, { kind: "directive", type: KbqUsernamePrimary, selector: "[kbqUsernamePrimary]", exportAs: ["kbqUsernamePrimary"] }, { kind: "directive", type: KbqUsernameSecondary, selector: "[kbqUsernameSecondary]", exportAs: ["kbqUsernameSecondary"] }, { kind: "directive", type: KbqUsernameSecondaryHint, selector: "[kbqUsernameSecondaryHint]", exportAs: ["kbqUsernameSecondaryHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsername, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsername, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-username', exportAs: 'kbqUsername', imports: [
                         KbqTitleModule,
@@ -272,8 +272,8 @@ const COMPONENTS = [
     KbqUsernamePipe
 ];
 class KbqUsernameModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername,
             KbqUsernameCustomView,
             KbqUsernamePrimary,
             KbqUsernameSecondary,
@@ -284,9 +284,9 @@ class KbqUsernameModule {
             KbqUsernameSecondary,
             KbqUsernameCustomPipe,
             KbqUsernamePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqUsernameModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,

package/filter-bar/pipes/pipe-date.scss

@@ -37,9 +37,7 @@
         width: 320px;
 
         & .kbq-date-period__header {
-            padding-top: var(--kbq-size-xs);
-            padding-left: var(--kbq-size-xxs);
-            padding-right: var(--kbq-size-xxs);
+            padding: var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s);
 
             & .kbq-button {
                 width: 100%;
@@ -54,22 +52,12 @@
         & .kbq-date-period__content {
             display: grid;
             grid-auto-columns: minmax(min-content, 1fr);
-            grid-template-columns: min-content;
+            grid-template-columns: min-content minmax(min-content, 1fr);
 
             padding: 0;
 
             gap: var(--kbq-size-s);
 
-            & .kbq-date-period__content-header {
-                grid-column: 2 span;
-
-                padding-top: var(--kbq-size-s);
-                padding-left: var(--kbq-size-l);
-                padding-right: var(--kbq-size-l);
-
-                color: var(--kbq-foreground-contrast-secondary);
-            }
-
             & .kbq-form__label {
                 padding-left: var(--kbq-size-l);
             }
@@ -80,7 +68,7 @@
 
             & .kbq-date-period__date,
             & .kbq-date-period__time {
-                flex: 1;
+                width: auto;
             }
 
             & .kbq-form__row_with-time {

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

@@ -22,6 +22,8 @@ export declare function getKbqFormFieldYouCanNotUseCleanerInNumberInputError():
 export type KbqFormFieldDefaultOptions = Partial<{
     /** Disables form field borders and shadows. */
     noBorders: boolean;
+    /** Use when KbqFormField is in an overlay container. */
+    inOverlay: boolean;
 }>;
 /**
  * Injection token that can be used to configure the default options for all kbq-form-field's.
@@ -29,6 +31,8 @@ export type KbqFormFieldDefaultOptions = Partial<{
 export declare const KBQ_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken<Partial<{
     /** Disables form field borders and shadows. */
     noBorders: boolean;
+    /** Use when KbqFormField is in an overlay container. */
+    inOverlay: boolean;
 }>>;
 /** Utility provider for `KBQ_FORM_FIELD_DEFAULT_OPTIONS`. */
 export declare const kbqFormFieldDefaultOptionsProvider: (options: KbqFormFieldDefaultOptions) => Provider;
@@ -44,6 +48,8 @@ export declare class KbqFormField extends KbqColorDirective implements AfterCont
     readonly elementRef: ElementRef<HTMLElement>;
     /** Disables form field borders and shadows. */
     readonly noBorders: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Use when KbqFormField is in an overlay container. */
+    readonly inOverlay: import("@angular/core").ModelSignal<boolean | undefined>;
     /**
      * The form field control.
      *
@@ -248,7 +254,7 @@ export declare class KbqFormField extends KbqColorDirective implements AfterCont
     /** Initializes the KbqHint, KbqPasswordHint, KbqReactivePasswordHint and KbqError containers. */
     private initializeHint;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["kbqFormField"], { "noBorders": { "alias": "noBorders"; "required": false; "isSignal": true; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "label", "hint", "passwordHints", "suffix", "prefix", "reactivePasswordHint", "error"], ["kbq-label", "[kbqPrefix]", "*", "kbq-cleaner", "kbq-password-toggle, kbq-stepper, [kbqSuffix]", "kbq-error", "kbq-hint, kbq-password-hint, kbq-reactive-password-hint"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["kbqFormField"], { "noBorders": { "alias": "noBorders"; "required": false; "isSignal": true; }; "inOverlay": { "alias": "inOverlay"; "required": false; "isSignal": true; }; }, { "inOverlay": "inOverlayChange"; }, ["control", "stepper", "cleaner", "passwordToggle", "label", "hint", "passwordHints", "suffix", "prefix", "reactivePasswordHint", "error"], ["kbq-label", "[kbqPrefix]", "*", "kbq-cleaner", "kbq-password-toggle, kbq-stepper, [kbqSuffix]", "kbq-error", "kbq-hint, kbq-password-hint, kbq-reactive-password-hint"], true, never>;
 }
 /**
  * @docs-private

package/form-field/form-field.scss

@@ -97,6 +97,10 @@
         box-shadow: none !important;
     }
 
+    &.kbq-form-field_in-overlay .kbq-form-field__container {
+        background-color: var(--kbq-background-card) !important;
+    }
+
     & + .kbq-password-hint {
         margin-top: var(--kbq-size-m);
     }

package/icon/icon-button.scss

@@ -12,6 +12,10 @@
     &.kbq-icon-button_small {
         padding: var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding);
     }
+
+    &.kbq-disabled {
+        pointer-events: none;
+    }
 }
 
 button.kbq-icon-button {

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

@@ -39,6 +39,7 @@ export declare class KbqInlineEdit {
     private readonly focusMonitor;
     private readonly overlay;
     private readonly document;
+    private readonly resizeObserver;
     /**
      * Whether to show save/cancel action buttons in edit mode.
      * @default false

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);
                 }
             }
         }
@@ -178,7 +186,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,9 +1,11 @@
 .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);

package/link/link.component.d.ts

@@ -22,6 +22,8 @@ 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);
@@ -38,12 +40,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/markdown/markdown.component.d.ts

@@ -4,7 +4,7 @@ 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` */

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;

package/modal/modal.component.d.ts

@@ -7,11 +7,7 @@ import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
 import { IModalButtonOptions, ModalOptions, ModalSize, ModalType, OnClickCallback } from './modal.type';
 import * as i0 from "@angular/core";
-/**
- * Duration when perform animations (ms)
- * @docs-private
- */
-export declare const MODAL_ANIMATE_DURATION = 200;
+type AnimationState = 'enter' | 'leave' | null;
 export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, ModalOptions {
     private overlay;
     private renderer;
@@ -52,6 +48,8 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     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;
@@ -70,10 +68,12 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     modalBody: ElementRef;
     isTopOverflow: boolean;
     isBottomOverflow: boolean;
-    maskAnimationClassMap: object;
-    modalAnimationClassMap: object;
+    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;
@@ -113,6 +113,11 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     isModalButtons(value: {}): boolean;
     getButtonCallableProp(options: IModalButtonOptions<T>, prop: 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;
@@ -131,5 +136,6 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
      */
     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; }; "kbqComponentParams": { "alias": "kbqComponentParams"; "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; }; "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"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], true, 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; }; "kbqComponentParams": { "alias": "kbqComponentParams"; "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; }; "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>;
 }
+export {};

package/modal/modal.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/common/tokens' as *;
 @use './modal-confirm';
+@use './modal-animation';
 @use './modal-theme' as *;
 
 .kbq-modal-container {

package/modal/modal.type.d.ts

@@ -8,6 +8,11 @@ export declare enum ModalSize {
     Medium = "medium",
     Large = "large"
 }
+/**
+ * Duration when perform animations (ms)
+ * @docs-private
+ */
+export declare const MODAL_ANIMATE_DURATION = 300;
 export interface ModalOptions<C = any, R = any> {
     kbqModalType?: ModalType;
     kbqVisible?: boolean;

package/navbar/navbar-item.component.d.ts

@@ -101,7 +101,9 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     private bento;
     title: KbqNavbarTitle;
     icon: KbqIcon;
-    collapsedText: string;
+    get collapsedText(): string;
+    set collapsedText(value: string);
+    private _collapsedText;
     get trigger(): string;
     set trigger(value: string);
     set collapsed(value: boolean);

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

@@ -1,4 +1,4 @@
-import { KbqOrientation } from '@koobiq/components/core';
+import { KbqFlexWrap, KbqOrientation } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /**
  * Manages the visibility of the element.
@@ -119,6 +119,12 @@ export declare class KbqOverflowItems {
      * @default 'horizontal'
      */
     readonly orientation: import("@angular/core").InputSignal<KbqOrientation>;
+    /**
+     * Defines the wrap of the overflow items.
+     *
+     * @default 'nowrap'
+     */
+    readonly wrap: import("@angular/core").InputSignal<KbqFlexWrap>;
     private readonly orientationConfig;
     constructor();
     private setupObservers;
@@ -142,5 +148,5 @@ export declare class KbqOverflowItems {
      */
     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; }; "orientation": { "alias": "orientation"; "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; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.4.1",
+    "version": "19.5.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,9 +25,9 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.4.1",
-        "@koobiq/angular-moment-adapter": "19.4.1",
-        "@koobiq/angular-luxon-adapter": "19.4.1",
+        "@koobiq/cdk": "19.5.0",
+        "@koobiq/angular-moment-adapter": "19.5.0",
+        "@koobiq/angular-luxon-adapter": "19.5.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/tokens-builder": "3.11.0",