@koobiq/components 18.34.0 → 18.36.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: "18.2.13", ngImport: i0, type: KbqUsernamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernamePipe, isStandalone: true, name: "kbqUsername" }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernamePipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernamePipe, isStandalone: true, name: "kbqUsername" }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernamePipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernamePipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -130,11 +130,11 @@ class KbqUsernameCustomPipe {
         });
         return result.trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameCustomPipe, isStandalone: true, name: "kbqUsernameCustom" }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameCustomPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameCustomPipe, isStandalone: true, name: "kbqUsernameCustom" }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameCustomPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameCustomPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameCustomPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -149,10 +149,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: KbqUsernamePrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: KbqUsernamePrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqUsernamePrimary, isStandalone: true, selector: "[kbqUsernamePrimary]", host: { classAttribute: "kbq-username__primary" }, exportAs: ["kbqUsernamePrimary"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernamePrimary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernamePrimary, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernamePrimary]',
@@ -165,10 +165,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 /** Styles the secondary part. */
 class KbqUsernameSecondary {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameSecondary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: KbqUsernameSecondary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqUsernameSecondary, isStandalone: true, selector: "[kbqUsernameSecondary]", host: { classAttribute: "kbq-username__secondary" }, exportAs: ["kbqUsernameSecondary"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameSecondary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameSecondary, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernameSecondary]',
@@ -181,10 +181,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 /** Styles a secondary hint. */
 class KbqUsernameSecondaryHint {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameSecondaryHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: KbqUsernameSecondaryHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqUsernameSecondaryHint, isStandalone: true, selector: "[kbqUsernameSecondaryHint]", host: { classAttribute: "kbq-username__secondary-hint" }, exportAs: ["kbqUsernameSecondaryHint"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameSecondaryHint, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameSecondaryHint, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernameSecondaryHint]',
@@ -197,10 +197,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 /** Custom content for `KbqUsername`, overrides default view. */
 class KbqUsernameCustomView {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameCustomView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: KbqUsernameCustomView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", 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: "18.2.13", ngImport: i0, type: KbqUsernameCustomView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameCustomView, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-username-custom-view, [kbq-username-custom-view]',
@@ -252,10 +252,10 @@ class KbqUsername {
             return [this.type(), this.mode()].map((modificator) => `${baseClass}_${modificator}`).join(' ');
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: "18.2.13", ngImport: i0, type: KbqUsername, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsername, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-username', standalone: true, exportAs: 'kbqUsername', imports: [
                         KbqTitleModule,
@@ -278,8 +278,8 @@ const COMPONENTS = [
     KbqUsernamePipe
 ];
 class KbqUsernameModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername,
             KbqUsernameCustomView,
             KbqUsernamePrimary,
             KbqUsernameSecondary,
@@ -290,9 +290,9 @@ class KbqUsernameModule {
             KbqUsernameSecondary,
             KbqUsernameCustomPipe,
             KbqUsernamePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqUsernameModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqUsernameModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,

package/file-upload/_file-upload-theme.scss

@@ -98,7 +98,7 @@
             background-color: var(--kbq-file-upload-multiple-default-container-background);
             border-color: var(--kbq-file-upload-multiple-default-container-border) !important;
 
-            .kbq-focused,
+            .kbq-focused:not(.kbq-list-option),
             .kbq-link.kbq-focused {
                 border: 2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color);
             }

package/file-upload/file-upload.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, InputSignal, Renderer2 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -30,7 +30,8 @@ export declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqInputFileL
 /** @deprecated use `FileValidators.isCorrectExtension` instead. Will be removed in next major release. */
 export declare const isCorrectExtension: (file: File, accept?: string[]) => boolean;
 /** @docs-private */
-export declare abstract class KbqFileUploadBase implements CanUpdateErrorState {
+export declare abstract class KbqFileUploadBase<T = KbqInputFileLabel> implements CanUpdateErrorState {
+    protected abstract localeConfig: InputSignal<Partial<T> | undefined>;
     /** Tracks whether the component is in an error state based on the control, parent form,
      * and `errorStateMatcher`, triggering visual updates and state changes if needed. */
     errorState: boolean;
@@ -59,8 +60,10 @@ export declare abstract class KbqFileUploadBase implements CanUpdateErrorState {
     /** @docs-private */
     protected readonly defaultErrorStateMatcher: ErrorStateMatcher;
     /** @docs-private */
-    protected readonly elementRef: ElementRef<any>;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     /** implemented as part of base class. Decided not use mixinErrorState, not to overcomplicate
      * @docs-private */
     updateErrorState(): void;
+    /** Merges base configuration with locale-specific overrides. */
+    protected buildConfig<T>(config: T): T;
 }

package/file-upload/multiple-file-upload.component.d.ts

@@ -40,6 +40,8 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     private _files;
     get files(): KbqFileItem[];
     set files(currentFileList: KbqFileItem[]);
+    /** Optional configuration to override default labels with localized text.*/
+    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqInputFileMultipleLabel> | undefined>;
     /** Emits an event containing updated file list.
      * public output will be renamed to filesChange in next major release (#DS-3700) */
     readonly filesChange: EventEmitter<KbqFileItem[]>;
@@ -104,6 +106,7 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     protected get fileSizeCellMaxWidth(): number;
     /** @docs-private */
     readonly configuration: KbqInputFileMultipleLabel | null;
+    private readonly focusMonitor;
     constructor();
     ngDoCheck(): void;
     ngAfterViewInit(): void;
@@ -134,5 +137,5 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     private initDefaultParams;
     private getCaptionText;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], false, never>;
 }

package/file-upload/single-file-upload.component.d.ts

@@ -32,6 +32,8 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      * @default true
      */
     showFileSize: boolean;
+    /** Optional configuration to override default labels with localized text.*/
+    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqInputFileLabel> | undefined>;
     /** Emits an event containing updated file.
      * public output will be renamed to fileChange in next major release (#DS-3700) */
     readonly fileChange: EventEmitter<KbqFileItem | null>;
@@ -63,6 +65,7 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     get invalid(): boolean;
     /** @docs-private */
     readonly configuration: KbqInputFileLabel | null;
+    private readonly focusMonitor;
     constructor();
     ngDoCheck(): void;
     ngAfterViewInit(): void;
@@ -93,6 +96,6 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     private initDefaultParams;
     private getCaptionText;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, never>;
     static ngAcceptInputType_showFileSize: unknown;
 }

package/filter-bar/_filter-bar-theme.scss

@@ -51,8 +51,8 @@
             }
 
             &.kbq-disabled {
-                color: var(--kbq-states-foreground-disable);
-                background: var(--kbq-states-background-disable);
+                color: var(--kbq-states-foreground-disabled);
+                background: var(--kbq-states-background-disabled);
 
                 @include _icon(var(--kbq-states-icon-disabled), var(--kbq-states-icon-disabled));
             }

package/filter-bar/filters.d.ts

@@ -34,6 +34,7 @@ export declare class KbqFilters implements OnInit {
     saveNewFilter: boolean;
     showFilterSavingError: boolean;
     filterSavingErrorText: string;
+    isSaving: boolean;
     filters: KbqFilter[];
     /** Event that is generated whenever the user selects a filter. */
     readonly onSelectFilter: EventEmitter<KbqFilter>;

package/filter-bar/pipes/base-pipe.d.ts

@@ -54,7 +54,7 @@ export declare class KbqPipeMinWidth {
     /** KbqFilterBar instance */
     protected readonly filterBar: KbqFilterBar | null;
     /** @docs-private */
-    protected readonly elementRef: ElementRef<any>;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     /** @docs-private */
     protected readonly changeDetectorRef: ChangeDetectorRef;
     /** @docs-private */

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

@@ -39,7 +39,7 @@
         margin-left: -1px;
         margin-right: 0;
 
-        height: 12px;
+        height: var(--kbq-size-l);
 
         align-self: center;
 
@@ -53,10 +53,10 @@
             content: '';
             position: absolute;
             left: 0;
-            top: 10px;
+            top: var(--kbq-size-s);
 
             width: 1px;
-            height: 12px;
+            height: var(--kbq-size-l);
 
             background: var(--kbq-line-contrast-less);
         }

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

@@ -95,6 +95,7 @@
 
                 & .kbq-date-period__time {
                     margin-left: -1px;
+                    max-width: 124px;
 
                     & .kbq-form-field__container {
                         border-top-left-radius: unset;

package/form-field/fieldset-tokens.scss

@@ -1,5 +1,5 @@
 .kbq-fieldset {
     --kbq-fieldset-legend-margin: var(--kbq-size-s);
-    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-m);
     --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
 }

package/form-field/form-field-tokens.scss

@@ -10,7 +10,7 @@
     --kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);
     --kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);
 
-    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-m);
     --kbq-form-field-hint-size-gap: var(--kbq-size-s);
 
     --kbq-form-field-size-container-vertical-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));

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

@@ -41,7 +41,7 @@ export declare class KbqFormField extends KbqColorDirective implements AfterCont
     /**
      * @docs-private
      */
-    readonly elementRef: ElementRef<any>;
+    readonly elementRef: ElementRef<HTMLElement>;
     /** Disables form field borders and shadows. */
     readonly noBorders: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     /**

package/form-field/form-field.scss

@@ -4,12 +4,8 @@
 @mixin kbq-form-field-hint-geometry {
     display: flex;
     flex-direction: column;
-    gap: var(--kbq-size-xxs);
+    gap: var(--kbq-size-s);
     margin-top: var(--kbq-form-field-hint-size-margin-top);
-
-    .kbq-password-hint:first-child {
-        margin-top: var(--kbq-size-s);
-    }
 }
 
 .kbq-form-field {
@@ -41,6 +37,11 @@
 
         padding-left: var(--kbq-form-field-size-container-left-padding);
         padding-right: var(--kbq-form-field-size-container-right-padding);
+
+        &:has(.kbq-textarea) {
+            --kbq-form-field-size-container-left-padding: 0;
+            --kbq-form-field-size-container-right-padding: 0;
+        }
     }
 
     .kbq-form-field:not(.kbq-form-field-type-textarea) {
@@ -55,7 +56,8 @@
         padding-left: var(--kbq-form-field-size-infix-left-padding);
 
         &:has(.kbq-select_multiple, .kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),
-        &:has(.kbq-tag-list) {
+        &:has(.kbq-tag-list),
+        &:has(.kbq-textarea) {
             padding-left: 0;
 
             max-width: 100%;
@@ -114,10 +116,6 @@
     .kbq-form-field__hint {
         @include kbq-form-field-hint-geometry();
     }
-
-    .kbq-password-hint {
-        margin-top: var(--kbq-form-field-hint-size-gap);
-    }
 }
 
 @include theme.kbq-form-field-theme();

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

@@ -5,7 +5,7 @@ import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
 /** Component which changes password visibility. */
 export declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewInit, OnDestroy, AfterContentInit {
-    protected readonly nativeElement: any;
+    protected readonly nativeElement: HTMLElement;
     protected readonly focusMonitor: FocusMonitor;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     private readonly formField;

package/icon/icon.component.d.ts

@@ -2,7 +2,7 @@ import { AfterContentInit, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { KbqColorDirective } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqIcon extends KbqColorDirective implements AfterContentInit {
-    readonly elementRef: ElementRef<any>;
+    readonly elementRef: ElementRef<HTMLElement>;
     protected readonly formField: import("@koobiq/components/core").KbqFormFieldRef | null;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     small: boolean;
@@ -11,7 +11,7 @@ export declare class KbqIcon extends KbqColorDirective implements AfterContentIn
     /** Name of an icon within a @koobiq/icons. */
     iconName: string;
     protected name: string;
-    getHostElement(): any;
+    getHostElement(): HTMLElement;
     updateMaxHeight(): void;
     ngAfterContentInit(): void;
     private updateState;

package/inline-edit/index.d.ts

@@ -0,0 +1,2 @@
+export * from './inline-edit';
+export * from './module';

package/inline-edit/inline-edit-tokens.scss

@@ -0,0 +1,8 @@
+:where(.kbq-inline-edit, .kbq-inline-edit__panel) {
+    --kbq-inline-edit-background: transparent;
+    --kbq-inline-edit-height: var(--kbq-size-3xl);
+    --kbq-inline-edit-padding-horizontal: var(--kbq-size-s);
+    --kbq-inline-edit-padding-vertical: 5px;
+    --kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);
+    --kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary);
+}

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

@@ -0,0 +1,136 @@
+import { CdkConnectedOverlay, CdkOverlayOrigin, ScrollStrategy } from '@angular/cdk/overlay';
+import { 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 "@koobiq/components/core";
+/** @docs-private */
+export declare class KbqFocusRegionItem {
+    readonly tabOut: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
+    protected isFocused: boolean;
+    protected onTabOut(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFocusRegionItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFocusRegionItem, "[kbqFocusRegionItem]", ["kbqFocusRegionItem"], {}, { "tabOut": "tabOut"; }, never, never, true, never>;
+}
+/** Directive for easy using styles of inline edit placeholder publicly. */
+export declare class KbqInlineEditPlaceholder {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEditPlaceholder, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInlineEditPlaceholder, "[kbqInlineEditPlaceholder]", ["kbqInlineEditPlaceholder"], {}, {}, never, never, true, never>;
+}
+/**
+ * This directive enhances element acting as dropdown trigger,
+ * visually indicating the active state with the `kbq-active` class.
+ * Also, it prevents click/keydown events from being propagated to disable mode toggling of parent component.
+ */
+export declare class KbqInlineEditMenu {
+    /** @docs-private */
+    protected readonly dropdownTrigger: KbqDropdownTrigger | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEditMenu, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInlineEditMenu, "[kbqInlineEditMenu]", ["kbqInlineEditMenu"], {}, {}, never, never, true, never>;
+}
+/**
+ * Customizable component that enables edit-in-place logic for specified control and it's view.
+ * This component is projecting edit/view mode templates and adds keyboard/pointer handlers.
+ * 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 kbqFocusMonitor;
+    private readonly overlay;
+    private readonly document;
+    /**
+     * Whether to show save/cancel action buttons in edit mode.
+     * @default false
+     */
+    readonly showActions: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to automatically show validation error tooltips on save attempts.
+     * @default true
+     */
+    readonly showTooltipOnError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Custom validation tooltip message. */
+    readonly validationTooltip: import("@angular/core").InputSignal<string | TemplateRef<any> | undefined>;
+    /**
+     * Disables the component, preventing interaction and mode switching. Only allows menu dropdown.
+     * @default false
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Custom width in pixels for the edit mode overlay. Auto-calculated if not set. */
+    readonly editModeWidth: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** User-defined tooltip placement */
+    readonly tooltipPlacement: import("@angular/core").InputSignal<PopUpPlacements | undefined>;
+    /** Handler function to retrieve the current value */
+    readonly getValueHandler: import("@angular/core").InputSignal<(() => unknown) | undefined>;
+    /** Handler function to update the value */
+    readonly setValueHandler: import("@angular/core").InputSignal<((value: any) => void) | undefined>;
+    /** 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">;
+    /** @docs-private */
+    protected readonly menu: import("@angular/core").Signal<KbqInlineEditMenu | undefined>;
+    /** @docs-private */
+    protected readonly label: import("@angular/core").Signal<KbqLabel | undefined>;
+    /** @docs-private */
+    protected readonly formFieldRef: import("@angular/core").Signal<KbqFormField | undefined>;
+    /** @docs-private */
+    protected readonly overlayOrigin: import("@angular/core").Signal<CdkOverlayOrigin>;
+    /** @docs-private */
+    protected readonly tooltipTrigger: import("@angular/core").Signal<KbqTooltipTrigger | undefined>;
+    /** @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">;
+    /** @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">;
+    /** @docs-private */
+    protected readonly className: import("@angular/core").Signal<string>;
+    /** @docs-private */
+    protected readonly isEditMode: import("@angular/core").Signal<boolean>;
+    /** @docs-private */
+    protected readonly tabIndex: import("@angular/core").Signal<0 | -1>;
+    /** @docs-private */
+    protected readonly placements: typeof PopUpPlacements;
+    /** @docs-private */
+    protected readonly colors: typeof KbqComponentColors;
+    private initialValue;
+    constructor();
+    /** @docs-private */
+    protected toggleMode(): void;
+    /** @docs-private */
+    protected onClick(event: Event): void;
+    /** @docs-private */
+    protected onAttach(): void;
+    /** @docs-private */
+    protected save($event?: Event): void;
+    /** @docs-private */
+    protected cancel(): void;
+    /** @docs-private */
+    protected onOverlayKeydown(event: KeyboardEvent): void;
+    /**
+     * Sets up Tab key listeners on region items.
+     * Single item: Tab moves to next edit.
+     * Multiple items: Shift+Tab on first or Tab on last moves to next edit.
+     */
+    private setOverlayKeydownListener;
+    private saveAndFocusNextInlineEdit;
+    private isInvalid;
+    private getValue;
+    private setValue;
+    private coerceControl;
+    private setOverlayWidth;
+    private openPanel;
+    private getInputNativeElement;
+    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; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.KbqFocusMonitor; inputs: {}; outputs: {}; }]>;
+}