@koobiq/components 20.0.0 → 20.1.0

package/fesm2022/koobiq-components-username.mjs

@@ -143,6 +143,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     pure: true
                 }]
         }] });
+/**
+ * Builds a full username string from a pre-formatted name plus optional login and site,
+ * mirroring the text rendered by `kbq-username`.
+ *
+ * Provide custom `formatLogin` / `formatSite` to tailor the output.
+ */
+function kbqBuildUsernameText(data, options) {
+    const formatLogin = options?.formatLogin ?? ((login) => login);
+    const formatSite = options?.formatSite ?? ((site) => `(${site})`);
+    return [data.name, data.login && formatLogin(data.login), data.site && formatSite(data.site)]
+        .filter(Boolean)
+        .join(' ');
+}
 
 const baseClass = 'kbq-username';
 /** Styles the primary part of the username (e.g. full name). */
@@ -247,7 +260,7 @@ class KbqUsername {
         }, ...(ngDevMode ? [{ debugName: "class" }] : []));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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_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:last-child:not(:first-child){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: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) .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) .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: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:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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) .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) .kbq-form-field__container{border-radius:0}.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: "directive", type: KbqUsernamePrimary, selector: "[kbqUsernamePrimary]", exportAs: ["kbqUsernamePrimary"] }, { kind: "directive", type: KbqUsernameSecondary, selector: "[kbqUsernameSecondary]", exportAs: ["kbqUsernameSecondary"] }, { kind: "directive", type: KbqUsernameSecondaryHint, selector: "[kbqUsernameSecondaryHint]", exportAs: ["kbqUsernameSecondaryHint"] }, { kind: "pipe", type: KbqUsernamePipe, name: "kbqUsername" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.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:last-child:not(:first-child){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: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) .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) .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: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:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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) .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) .kbq-form-field__container{border-radius:0}.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]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqUsernamePrimary, selector: "[kbqUsernamePrimary]", exportAs: ["kbqUsernamePrimary"] }, { kind: "directive", type: KbqUsernameSecondary, selector: "[kbqUsernameSecondary]", exportAs: ["kbqUsernameSecondary"] }, { kind: "directive", type: KbqUsernameSecondaryHint, selector: "[kbqUsernameSecondaryHint]", exportAs: ["kbqUsernameSecondaryHint"] }, { kind: "pipe", type: KbqUsernamePipe, name: "kbqUsername" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqUsername, decorators: [{
             type: Component,
@@ -260,7 +273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: baseClass,
                         '[class]': 'class()'
-                    }, exportAs: 'kbqUsername', 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_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:last-child:not(:first-child){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: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) .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) .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: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:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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) .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) .kbq-form-field__container{border-radius:0}.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"] }]
+                    }, exportAs: 'kbqUsername', 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}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.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:last-child:not(:first-child){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: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) .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) .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: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:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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) .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) .kbq-form-field__container{border-radius:0}.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"] }]
         }], propDecorators: { userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }], fullNameFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullNameFormat", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], customView: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqUsernameCustomView), { isSignal: true }] }] } });
 
 const COMPONENTS = [
@@ -298,5 +311,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_PROFILE_MAPPING, KbqMappingMissingError, KbqUsername, KbqUsernameCustomPipe, KbqUsernameCustomView, KbqUsernameFormatKey, KbqUsernameModule, KbqUsernamePipe, KbqUsernamePrimary, KbqUsernameSecondary, KbqUsernameSecondaryHint, kbqDefaultFullNameFormat, kbqDefaultFullNameFormatCustom };
+export { KBQ_PROFILE_MAPPING, KbqMappingMissingError, KbqUsername, KbqUsernameCustomPipe, KbqUsernameCustomView, KbqUsernameFormatKey, KbqUsernameModule, KbqUsernamePipe, KbqUsernamePrimary, KbqUsernameSecondary, KbqUsernameSecondaryHint, kbqBuildUsernameText, kbqDefaultFullNameFormat, kbqDefaultFullNameFormatCustom };
 //# sourceMappingURL=koobiq-components-username.mjs.map

package/fesm2022/koobiq-components-username.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-username.mjs","sources":["../../../packages/components/username/types.ts","../../../packages/components/username/constants.ts","../../../packages/components/username/username.pipe.ts","../../../packages/components/username/username.ts","../../../packages/components/username/username.html","../../../packages/components/username/module.ts","../../../packages/components/username/koobiq-components-username.ts"],"sourcesContent":["/**\n * Keys for formatting username parts in short (initial) or full form.\n */\nexport enum KbqUsernameFormatKey {\n    /**\n     * Short form of the first name (e.g., \"John\" → \"J\")\n     */\n    FirstNameShort = 'f',\n\n    /**\n     * Full form of the first name (e.g., \"John\")\n     */\n    FirstNameFull = 'F',\n\n    /**\n     * Short form of the middle name (e.g., \"Henry\" → \"H\")\n     */\n    MiddleNameShort = 'm',\n\n    /**\n     * Full form of the middle name (e.g., \"Henry\")\n     */\n    MiddleNameFull = 'M',\n\n    /**\n     * Short form of the last name (e.g., \"Doe\" → \"D\")\n     */\n    LastNameShort = 'l',\n\n    /**\n     * Full form of the last name (e.g., \"Doe\")\n     */\n    LastNameFull = 'L',\n    Dot = '.'\n}\n\n/**\n * Maps each format key to a property name in the user profile object.\n * Allows flexible formatting regardless of profile field names.\n */\nexport type KbqFormatKeyToProfileMapping<T = any> = {\n    [key in Exclude<\n        KbqUsernameFormatKey,\n        KbqUsernameFormatKey.FirstNameFull | KbqUsernameFormatKey.MiddleNameFull | KbqUsernameFormatKey.LastNameFull\n    >]: keyof T | undefined;\n};\n\n/**\n * Maps each format key to a property name in the user profile object.\n * Allows flexible formatting regardless of profile field names.\n * @see KbqUsernameCustomPipe\n */\nexport type KbqFormatKeyToProfileMappingExtended<T = any> = {\n    [key in KbqUsernameFormatKey]: keyof T | undefined;\n};\n\n/**\n * Layout mode for displaying a username and applying text-ellipsis.\n *\n * - `stacked`: Elements shown vertically.\n * - `inline`: Elements shown in one line. Text ellipsis is applied to both parts.\n * - `text`: Plain text, no layout styling. No text-ellipsis.\n */\nexport type KbqUsernameMode = 'stacked' | 'inline' | 'text';\n\n/**\n * Visual style of the username.\n *\n * - `default`: standard styling with primary and secondary colors.\n * - `error`: error colors (e.g., red).\n * - `accented`: no color theming; emphasizes via typography only.\n * - `inherit`: inherits parent styles, no theming. For example, useful when using inside links.\n */\nexport type KbqUsernameStyle = 'default' | 'error' | 'accented' | 'inherit';\n","import { InjectionToken } from '@angular/core';\nimport { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended, KbqUsernameFormatKey } from './types';\n\n/** Default name format: Last name full, first and middle as initials. */\nexport const kbqDefaultFullNameFormatCustom = 'L f. m.';\n/** Default name format: Last name full, first and middle as initials. */\nexport const kbqDefaultFullNameFormat = 'lf.m.';\n\n/**\n * Throws an error when no profile field mapping is provided to the username pipe.\n * @docs-private\n */\nexport function KbqMappingMissingError() {\n    return new Error('KbqUsernamePipe: profile field mapping is required but was not provided.');\n}\n\n/**\n * Injection token for providing a global username format-to-profile mapping.\n */\nexport const KBQ_PROFILE_MAPPING = new InjectionToken<\n    KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended\n>('KBQ_PROFILE_MAPPING', {\n    factory: () =>\n        ({\n            [KbqUsernameFormatKey.FirstNameShort]: 'firstName',\n            [KbqUsernameFormatKey.MiddleNameShort]: 'middleName',\n            [KbqUsernameFormatKey.LastNameShort]: 'lastName',\n            [KbqUsernameFormatKey.Dot]: undefined\n        }) satisfies KbqFormatKeyToProfileMapping<{ firstName: string; middleName: string; lastName: string }>\n});\n","import { inject, Injectable, Pipe, PipeTransform } from '@angular/core';\nimport {\n    KBQ_PROFILE_MAPPING,\n    kbqDefaultFullNameFormat,\n    kbqDefaultFullNameFormatCustom,\n    KbqMappingMissingError\n} from './constants';\nimport { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended, KbqUsernameFormatKey } from './types';\n\n@Injectable({ providedIn: 'root' })\n@Pipe({\n    name: 'kbqUsername',\n    pure: true\n})\nexport class KbqUsernamePipe<T = unknown> implements PipeTransform {\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING, { optional: true });\n\n    /** Builds a formatted name string from the user profile using the provided format and mapping. */\n    transform(profile: T, format = kbqDefaultFullNameFormat, customMapping?: KbqFormatKeyToProfileMapping): string {\n        const resolvedMapping = customMapping || this.mapping;\n\n        if (!resolvedMapping) {\n            throw KbqMappingMissingError();\n        }\n\n        if (!profile || typeof profile !== 'object') return '';\n\n        let result = '';\n\n        const formatUnits = format.split('');\n\n        formatUnits.forEach((letter: KbqUsernameFormatKey | string, index: number, array) => {\n            if (letter !== KbqUsernameFormatKey.Dot) {\n                const field: keyof T = resolvedMapping[letter];\n                const fieldValue = profile[field];\n\n                if (fieldValue) {\n                    const isShort = array[index + 1] === KbqUsernameFormatKey.Dot;\n                    const resolvedFieldValue = isShort ? `${fieldValue[0]}${KbqUsernameFormatKey.Dot}` : fieldValue;\n\n                    result += ` ${resolvedFieldValue}`;\n                }\n            }\n        });\n\n        return result.trim();\n    }\n}\n\n/**\n * Pipe to format a user profile into a name string using a format pattern and field mapping.\n * Lowercase keys output initials; uppercase keys show full values.\n */\n@Injectable({ providedIn: 'root' })\n@Pipe({\n    name: 'kbqUsernameCustom',\n    pure: true\n})\nexport class KbqUsernameCustomPipe<T = unknown> implements PipeTransform {\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING, { optional: true });\n\n    /** Builds a formatted name string from the user profile using the provided format and mapping. */\n    transform(\n        profile: T,\n        format = kbqDefaultFullNameFormatCustom,\n        customMapping?: KbqFormatKeyToProfileMappingExtended<T>\n    ): string {\n        const resolvedMapping = customMapping || this.mapping;\n\n        if (!resolvedMapping) {\n            throw KbqMappingMissingError();\n        }\n\n        if (!profile || typeof profile !== 'object') return '';\n\n        let result = '';\n\n        const formatUnits = format.split('');\n\n        formatUnits.forEach((letter: KbqUsernameFormatKey | string) => {\n            const field: keyof T | undefined = resolvedMapping[letter];\n\n            if (!field) {\n                result += letter;\n\n                return;\n            }\n\n            const isShort = letter === letter.toLowerCase();\n            const fieldValue = profile[field] || '';\n\n            result += fieldValue && isShort ? fieldValue[0] : fieldValue;\n        });\n\n        return result.trim();\n    }\n}\n","import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    Directive,\n    input,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqTitleModule } from '@koobiq/components/title';\nimport { kbqDefaultFullNameFormat } from './constants';\nimport { KbqUsernameMode, KbqUsernameStyle } from './types';\nimport { KbqUsernamePipe } from './username.pipe';\n\nconst baseClass = 'kbq-username';\n\n/**\n * Basic user info\n * @docs-private\n */\nexport type KbqUserInfo = {\n    firstName?: string;\n    lastName?: string;\n    middleName?: string;\n    login?: string;\n    site?: string;\n};\n\n/** Styles the primary part of the username (e.g. full name). */\n@Directive({\n    selector: '[kbqUsernamePrimary]',\n    host: {\n        class: `${baseClass}__primary`\n    },\n    exportAs: 'kbqUsernamePrimary'\n})\nexport class KbqUsernamePrimary {}\n\n/** Styles the secondary part. */\n@Directive({\n    selector: '[kbqUsernameSecondary]',\n    host: {\n        class: `${baseClass}__secondary`\n    },\n    exportAs: 'kbqUsernameSecondary'\n})\nexport class KbqUsernameSecondary {}\n\n/** Styles a secondary hint. */\n@Directive({\n    selector: '[kbqUsernameSecondaryHint]',\n    host: {\n        class: `${baseClass}__secondary-hint`\n    },\n    exportAs: 'kbqUsernameSecondaryHint'\n})\nexport class KbqUsernameSecondaryHint {}\n\n/** Custom content for `KbqUsername`, overrides default view. */\n@Directive({\n    selector: 'kbq-username-custom-view, [kbq-username-custom-view]',\n    host: {\n        class: `${baseClass}__custom-view`\n    },\n    exportAs: 'kbqUsernameCustomView'\n})\nexport class KbqUsernameCustomView {}\n\n/**\n * Displays a user's name based on profile data.\n * Supports different display modes and visual styles.\n * A custom view can be provided via `<kbq-username-custom-view>` for full control over the output.\n * Accepts input profile data and optional formatting options.\n */\n@Component({\n    selector: 'kbq-username',\n    imports: [\n        KbqTitleModule,\n        KbqUsernamePipe,\n        KbqUsernamePrimary,\n        KbqUsernameSecondary,\n        KbqUsernameSecondaryHint\n    ],\n    templateUrl: './username.html',\n    styleUrls: ['./username.scss', './username-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: baseClass,\n        '[class]': 'class()'\n    },\n    exportAs: 'kbqUsername'\n})\nexport class KbqUsername {\n    /** User profile data used for display. */\n    readonly userInfo = input<KbqUserInfo>();\n    /** Enables compact display mode */\n    readonly isCompact = input(false, { transform: booleanAttribute });\n    /** Format string for rendering the user's full name. */\n    readonly fullNameFormat = input<string>(kbqDefaultFullNameFormat);\n    /**\n     * Display mode of the username.\n     * @default inline\n     */\n    readonly mode = input<KbqUsernameMode>('inline');\n    /**\n     * Visual style of the username.\n     * @default default\n     */\n    readonly type = input<KbqUsernameStyle>('default');\n    /**\n     * Custom projected view for username rendering.\n     * @docs-private\n     */\n    protected readonly customView = contentChild(KbqUsernameCustomView);\n\n    /** @docs-private */\n    protected readonly hasFullName = computed(() => {\n        const userInfo = this.userInfo();\n\n        if (!userInfo) return false;\n\n        return userInfo?.lastName && userInfo?.firstName;\n    });\n\n    /** @docs-private */\n    protected readonly class = computed(() => {\n        return [this.type(), this.mode()].map((modificator) => `${baseClass}_${modificator}`).join(' ');\n    });\n}\n","@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","import { NgModule } from '@angular/core';\nimport { KbqUsername, KbqUsernameCustomView, KbqUsernamePrimary, KbqUsernameSecondary } from './username';\nimport { KbqUsernameCustomPipe, KbqUsernamePipe } from './username.pipe';\n\nconst COMPONENTS = [\n    KbqUsername,\n    KbqUsernameCustomView,\n    KbqUsernamePrimary,\n    KbqUsernameSecondary,\n    KbqUsernameCustomPipe,\n    KbqUsernamePipe\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    exports: COMPONENTS\n})\nexport class KbqUsernameModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-username.mjs","sources":["../../../packages/components/username/types.ts","../../../packages/components/username/constants.ts","../../../packages/components/username/username.pipe.ts","../../../packages/components/username/username.ts","../../../packages/components/username/username.html","../../../packages/components/username/module.ts","../../../packages/components/username/koobiq-components-username.ts"],"sourcesContent":["/**\n * Keys for formatting username parts in short (initial) or full form.\n */\nexport enum KbqUsernameFormatKey {\n    /**\n     * Short form of the first name (e.g., \"John\" → \"J\")\n     */\n    FirstNameShort = 'f',\n\n    /**\n     * Full form of the first name (e.g., \"John\")\n     */\n    FirstNameFull = 'F',\n\n    /**\n     * Short form of the middle name (e.g., \"Henry\" → \"H\")\n     */\n    MiddleNameShort = 'm',\n\n    /**\n     * Full form of the middle name (e.g., \"Henry\")\n     */\n    MiddleNameFull = 'M',\n\n    /**\n     * Short form of the last name (e.g., \"Doe\" → \"D\")\n     */\n    LastNameShort = 'l',\n\n    /**\n     * Full form of the last name (e.g., \"Doe\")\n     */\n    LastNameFull = 'L',\n    Dot = '.'\n}\n\n/**\n * Maps each format key to a property name in the user profile object.\n * Allows flexible formatting regardless of profile field names.\n */\nexport type KbqFormatKeyToProfileMapping<T = any> = {\n    [\n        key in Exclude<\n            KbqUsernameFormatKey,\n            KbqUsernameFormatKey.FirstNameFull | KbqUsernameFormatKey.MiddleNameFull | KbqUsernameFormatKey.LastNameFull\n        >\n    ]: keyof T | undefined;\n};\n\n/**\n * Maps each format key to a property name in the user profile object.\n * Allows flexible formatting regardless of profile field names.\n * @see KbqUsernameCustomPipe\n */\nexport type KbqFormatKeyToProfileMappingExtended<T = any> = {\n    [key in KbqUsernameFormatKey]: keyof T | undefined;\n};\n\n/**\n * Layout mode for displaying a username and applying text-ellipsis.\n *\n * - `stacked`: Elements shown vertically.\n * - `inline`: Elements shown in one line. Text ellipsis is applied to both parts.\n * - `text`: Plain text, no layout styling. No text-ellipsis.\n */\nexport type KbqUsernameMode = 'stacked' | 'inline' | 'text';\n\n/**\n * Visual style of the username.\n *\n * - `default`: standard styling with primary and secondary colors.\n * - `error`: error colors (e.g., red).\n * - `accented`: no color theming; emphasizes via typography only.\n * - `inherit`: inherits parent styles, no theming. For example, useful when using inside links.\n */\nexport type KbqUsernameStyle = 'default' | 'error' | 'accented' | 'inherit';\n","import { InjectionToken } from '@angular/core';\nimport { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended, KbqUsernameFormatKey } from './types';\n\n/** Default name format: Last name full, first and middle as initials. */\nexport const kbqDefaultFullNameFormatCustom = 'L f. m.';\n/** Default name format: Last name full, first and middle as initials. */\nexport const kbqDefaultFullNameFormat = 'lf.m.';\n\n/**\n * Throws an error when no profile field mapping is provided to the username pipe.\n * @docs-private\n */\nexport function KbqMappingMissingError() {\n    return new Error('KbqUsernamePipe: profile field mapping is required but was not provided.');\n}\n\n/**\n * Injection token for providing a global username format-to-profile mapping.\n */\nexport const KBQ_PROFILE_MAPPING = new InjectionToken<\n    KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended\n>('KBQ_PROFILE_MAPPING', {\n    factory: () =>\n        ({\n            [KbqUsernameFormatKey.FirstNameShort]: 'firstName',\n            [KbqUsernameFormatKey.MiddleNameShort]: 'middleName',\n            [KbqUsernameFormatKey.LastNameShort]: 'lastName',\n            [KbqUsernameFormatKey.Dot]: undefined\n        }) satisfies KbqFormatKeyToProfileMapping<{ firstName: string; middleName: string; lastName: string }>\n});\n","import { inject, Injectable, Pipe, PipeTransform } from '@angular/core';\nimport {\n    KBQ_PROFILE_MAPPING,\n    kbqDefaultFullNameFormat,\n    kbqDefaultFullNameFormatCustom,\n    KbqMappingMissingError\n} from './constants';\nimport { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended, KbqUsernameFormatKey } from './types';\nimport { KbqUserInfo } from './username';\n\n@Injectable({ providedIn: 'root' })\n@Pipe({\n    name: 'kbqUsername',\n    pure: true\n})\nexport class KbqUsernamePipe<T = unknown> implements PipeTransform {\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING, { optional: true });\n\n    /** Builds a formatted name string from the user profile using the provided format and mapping. */\n    transform(profile: T, format = kbqDefaultFullNameFormat, customMapping?: KbqFormatKeyToProfileMapping): string {\n        const resolvedMapping = customMapping || this.mapping;\n\n        if (!resolvedMapping) {\n            throw KbqMappingMissingError();\n        }\n\n        if (!profile || typeof profile !== 'object') return '';\n\n        let result = '';\n\n        const formatUnits = format.split('');\n\n        formatUnits.forEach((letter: KbqUsernameFormatKey | string, index: number, array) => {\n            if (letter !== KbqUsernameFormatKey.Dot) {\n                const field: keyof T = resolvedMapping[letter];\n                const fieldValue = profile[field];\n\n                if (fieldValue) {\n                    const isShort = array[index + 1] === KbqUsernameFormatKey.Dot;\n                    const resolvedFieldValue = isShort ? `${fieldValue[0]}${KbqUsernameFormatKey.Dot}` : fieldValue;\n\n                    result += ` ${resolvedFieldValue}`;\n                }\n            }\n        });\n\n        return result.trim();\n    }\n}\n\n/**\n * Pipe to format a user profile into a name string using a format pattern and field mapping.\n * Lowercase keys output initials; uppercase keys show full values.\n */\n@Injectable({ providedIn: 'root' })\n@Pipe({\n    name: 'kbqUsernameCustom',\n    pure: true\n})\nexport class KbqUsernameCustomPipe<T = unknown> implements PipeTransform {\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING, { optional: true });\n\n    /** Builds a formatted name string from the user profile using the provided format and mapping. */\n    transform(\n        profile: T,\n        format = kbqDefaultFullNameFormatCustom,\n        customMapping?: KbqFormatKeyToProfileMappingExtended<T>\n    ): string {\n        const resolvedMapping = customMapping || this.mapping;\n\n        if (!resolvedMapping) {\n            throw KbqMappingMissingError();\n        }\n\n        if (!profile || typeof profile !== 'object') return '';\n\n        let result = '';\n\n        const formatUnits = format.split('');\n\n        formatUnits.forEach((letter: KbqUsernameFormatKey | string) => {\n            const field: keyof T | undefined = resolvedMapping[letter];\n\n            if (!field) {\n                result += letter;\n\n                return;\n            }\n\n            const isShort = letter === letter.toLowerCase();\n            const fieldValue = profile[field] || '';\n\n            result += fieldValue && isShort ? fieldValue[0] : fieldValue;\n        });\n\n        return result.trim();\n    }\n}\n\nexport interface KbqUsernameTextOptions {\n    /** Formats the login segment. Defaults to identity. */\n    formatLogin?: (login: string) => string;\n    /**\n     * Formats the site segment.\n     * Defaults to wrapping in parentheses, matching kbq-username display.\n     */\n    formatSite?: (site: string) => string;\n}\n\n/**\n * Builds a full username string from a pre-formatted name plus optional login and site,\n * mirroring the text rendered by `kbq-username`.\n *\n * Provide custom `formatLogin` / `formatSite` to tailor the output.\n */\nexport function kbqBuildUsernameText(\n    data: { name: string } & Partial<Pick<KbqUserInfo, 'login' | 'site'>>,\n    options?: KbqUsernameTextOptions\n): string {\n    const formatLogin = options?.formatLogin ?? ((login) => login);\n    const formatSite = options?.formatSite ?? ((site) => `(${site})`);\n\n    return [data.name, data.login && formatLogin(data.login), data.site && formatSite(data.site)]\n        .filter(Boolean)\n        .join(' ');\n}\n","import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    Directive,\n    input,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqTitleModule } from '@koobiq/components/title';\nimport { kbqDefaultFullNameFormat } from './constants';\nimport { KbqUsernameMode, KbqUsernameStyle } from './types';\nimport { KbqUsernamePipe } from './username.pipe';\n\nconst baseClass = 'kbq-username';\n\n/**\n * Basic user info\n * @docs-private\n */\nexport type KbqUserInfo = {\n    firstName?: string;\n    lastName?: string;\n    middleName?: string;\n    login?: string;\n    site?: string;\n};\n\n/** Styles the primary part of the username (e.g. full name). */\n@Directive({\n    selector: '[kbqUsernamePrimary]',\n    host: {\n        class: `${baseClass}__primary`\n    },\n    exportAs: 'kbqUsernamePrimary'\n})\nexport class KbqUsernamePrimary {}\n\n/** Styles the secondary part. */\n@Directive({\n    selector: '[kbqUsernameSecondary]',\n    host: {\n        class: `${baseClass}__secondary`\n    },\n    exportAs: 'kbqUsernameSecondary'\n})\nexport class KbqUsernameSecondary {}\n\n/** Styles a secondary hint. */\n@Directive({\n    selector: '[kbqUsernameSecondaryHint]',\n    host: {\n        class: `${baseClass}__secondary-hint`\n    },\n    exportAs: 'kbqUsernameSecondaryHint'\n})\nexport class KbqUsernameSecondaryHint {}\n\n/** Custom content for `KbqUsername`, overrides default view. */\n@Directive({\n    selector: 'kbq-username-custom-view, [kbq-username-custom-view]',\n    host: {\n        class: `${baseClass}__custom-view`\n    },\n    exportAs: 'kbqUsernameCustomView'\n})\nexport class KbqUsernameCustomView {}\n\n/**\n * Displays a user's name based on profile data.\n * Supports different display modes and visual styles.\n * A custom view can be provided via `<kbq-username-custom-view>` for full control over the output.\n * Accepts input profile data and optional formatting options.\n */\n@Component({\n    selector: 'kbq-username',\n    imports: [\n        KbqTitleModule,\n        KbqUsernamePipe,\n        KbqUsernamePrimary,\n        KbqUsernameSecondary,\n        KbqUsernameSecondaryHint\n    ],\n    templateUrl: './username.html',\n    styleUrls: ['./username.scss', './username-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: baseClass,\n        '[class]': 'class()'\n    },\n    exportAs: 'kbqUsername'\n})\nexport class KbqUsername {\n    /** User profile data used for display. */\n    readonly userInfo = input<KbqUserInfo>();\n    /** Enables compact display mode */\n    readonly isCompact = input(false, { transform: booleanAttribute });\n    /** Format string for rendering the user's full name. */\n    readonly fullNameFormat = input<string>(kbqDefaultFullNameFormat);\n    /**\n     * Display mode of the username.\n     * @default inline\n     */\n    readonly mode = input<KbqUsernameMode>('inline');\n    /**\n     * Visual style of the username.\n     * @default default\n     */\n    readonly type = input<KbqUsernameStyle>('default');\n    /**\n     * Custom projected view for username rendering.\n     * @docs-private\n     */\n    protected readonly customView = contentChild(KbqUsernameCustomView);\n\n    /** @docs-private */\n    protected readonly hasFullName = computed(() => {\n        const userInfo = this.userInfo();\n\n        if (!userInfo) return false;\n\n        return userInfo?.lastName && userInfo?.firstName;\n    });\n\n    /** @docs-private */\n    protected readonly class = computed(() => {\n        return [this.type(), this.mode()].map((modificator) => `${baseClass}_${modificator}`).join(' ');\n    });\n}\n","@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","import { NgModule } from '@angular/core';\nimport { KbqUsername, KbqUsernameCustomView, KbqUsernamePrimary, KbqUsernameSecondary } from './username';\nimport { KbqUsernameCustomPipe, KbqUsernamePipe } from './username.pipe';\n\nconst COMPONENTS = [\n    KbqUsername,\n    KbqUsernameCustomView,\n    KbqUsernamePrimary,\n    KbqUsernameSecondary,\n    KbqUsernameCustomPipe,\n    KbqUsernamePipe\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    exports: COMPONENTS\n})\nexport class KbqUsernameModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/file-upload/file-upload-tokens.scss

@@ -83,6 +83,7 @@
     --kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-dropzone-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);
+    --kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);
     --kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);
     --kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);

package/file-upload/index.d.ts

@@ -245,9 +245,11 @@ declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase implement
     }> | undefined>;
     /** Optional configuration to override default labels with localized text.*/
     readonly localeConfig: _angular_core.InputSignal<Partial<KbqMultipleFileUploadLocaleConfig> | undefined>;
-    /** Emits an event containing updated file list.
-     * public output will be renamed to filesChange in next major release (#DS-3700) */
+    /** Emits an event containing an updated file list. */
     readonly filesChange: _angular_core.OutputEmitterRef<KbqFileItem[]>;
+    /** @deprecated Use `filesChange` instead.
+     * Will be removed in next major release (#DS-5229) */
+    readonly fileQueueChanged: _angular_core.OutputEmitterRef<KbqFileItem[]>;
     /**
      * Emits an event containing a chunk of files added to the file list.
      * Useful when handling added files, skipping filtering file list.
@@ -322,7 +324,7 @@ declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase implement
     private mapToFileItem;
     private onFileAdded;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "fullScreenDropZone": { "alias": "fullScreenDropZone"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "fullScreenDropZone": { "alias": "fullScreenDropZone"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "filesChange"; "fileQueueChanged": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof KbqFileList; inputs: {}; outputs: { "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
 }
 
 declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqFileUploadLocaleConfig['single'];
@@ -360,9 +362,11 @@ declare class KbqSingleFileUploadComponent extends KbqFileUploadBase implements
     }> | undefined>;
     /** Optional configuration to override default labels with localized text.*/
     readonly localeConfig: _angular_core.InputSignal<Partial<KbqBaseFileUploadLocaleConfig> | undefined>;
-    /** Emits an event containing updated file.
-     * public output will be renamed to fileChange in next major release (#DS-3700) */
+    /** Emits an event containing an updated file. */
     readonly fileChange: _angular_core.OutputEmitterRef<KbqFileItem | null>;
+    /** @deprecated Use `fileChange` instead.
+     * Will be removed in next major release (#DS-5229) */
+    readonly fileQueueChange: _angular_core.OutputEmitterRef<KbqFileItem | null>;
     /** @docs-private */
     protected readonly fileLoader: _angular_core.Signal<KbqFileLoader>;
     /** @docs-private */
@@ -422,7 +426,7 @@ declare class KbqSingleFileUploadComponent extends KbqFileUploadBase implements
     deleteItem(event?: MouseEvent, origin?: FocusOrigin): void;
     private mapToFileItem;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; "isSignal": true; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "fullScreenDropZone": { "alias": "fullScreenDropZone"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; }; outputs: {}; }, { directive: typeof KbqFileList; inputs: {}; outputs: { "listChange": "fileChange"; }; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; "isSignal": true; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "fullScreenDropZone": { "alias": "fullScreenDropZone"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileChange"; "fileQueueChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; }; outputs: {}; }, { directive: typeof KbqFileList; inputs: {}; outputs: {}; }]>;
 }
 
 /** Dropzone overlay content configuration. */
@@ -504,7 +508,6 @@ declare class KbqLocalDropzone extends KbqDrop {
     /** File upload component to connect dropped files to */
     readonly connectedTo: _angular_core.InputSignal<KbqMultipleFileUploadComponent | KbqSingleFileUploadComponent | undefined>;
     private readonly elementRef;
-    private readonly rects;
     private readonly overlay;
     private readonly viewContainerRef;
     private readonly injector;

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

@@ -6,6 +6,92 @@
     }
 }
 
+// Shared scroll height for the select/tree overlay panels rendered outside the bar.
+// Keeps the single magic value in one place (used by every select-family pipe panel).
+@mixin kbq-filter-bar-panel-content-max-height() {
+    max-height: 404px;
+}
+
+// Themable colour surfaces of a pipe. Kept out of the layout SCSS so every colour
+// lives behind a theme hook (they still resolve through the global semantic tokens).
+@mixin kbq-filter-bar-pipe-theme() {
+    .kbq-pipe {
+        .kbq-pipe__name {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
+
+        .kbq-pipe__separator {
+            color: var(--kbq-line-contrast-less);
+        }
+
+        .kbq-select:not(:hover, .kbq-active),
+        .kbq-tree-select:not(:hover, .kbq-active),
+        .kbq-button:not(:hover, .kbq-active, [disabled]) {
+            & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
+                background: var(--kbq-line-contrast-less);
+            }
+        }
+
+        &.kbq-pipe_disabled {
+            .kbq-pipe__name,
+            .kbq-pipe__value {
+                color: var(--kbq-states-foreground-disabled);
+            }
+        }
+    }
+
+    .kbq-pipe.kbq-pipe_removable,
+    .kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) {
+        .kbq-button.cdk-keyboard-focused::after {
+            background: var(--kbq-states-line-focus-theme);
+        }
+
+        .kbq-button-icon.cdk-keyboard-focused::after {
+            background: var(--kbq-states-line-focus-theme);
+        }
+    }
+
+    .kbq-pipe-tooltip__name {
+        color: var(--kbq-foreground-white-secondary);
+    }
+
+    .kbq-pipe-tooltip__value {
+        color: var(--kbq-foreground-white);
+    }
+}
+
+// Themable colour surfaces of a read-only pipe.
+@mixin kbq-filter-bar-readonly-theme() {
+    .kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) {
+        & .kbq-button-icon.kbq-button_filled:not(:hover),
+        & .kbq-button.kbq-button_filled,
+        & .kbq-button.kbq-button_filled:hover {
+            background: var(--kbq-states-background-disabled);
+        }
+
+        & .kbq-pipe__name,
+        & .kbq-pipe__value {
+            color: var(--kbq-states-foreground-disabled);
+        }
+    }
+}
+
+// Themable colour surfaces of the filters list (the changed-and-saved warning dot and the
+// separator drawn between the trigger and its action button).
+@mixin kbq-filter-bar-filters-theme() {
+    .kbq-filters {
+        .kbq-button_changed-saved-filter::before {
+            border-color: var(--kbq-background-bg);
+
+            background: var(--kbq-icon-warning);
+        }
+
+        .kbq-button:not(:hover, .kbq-active) + .kbq-button_action:not(:hover, .kbq-active)::after {
+            background: var(--kbq-line-contrast-less);
+        }
+    }
+}
+
 @mixin _icon($left-icon, $right-icon) {
     .kbq-icon.kbq-empty {
         color: $left-icon;

package/filter-bar/filter-bar-tokens.scss

@@ -0,0 +1,6 @@
+.kbq-filter-bar {
+    /* Maximum width of a pipe / filters trigger before its label truncates. */
+    --kbq-filter-bar-pipe-max-width: 320px;
+    /* Minimum width reserved for the refresher control. */
+    --kbq-filter-bar-refresher-min-width: 64px;
+}

package/filter-bar/filter-bar.scss

@@ -15,7 +15,7 @@
         gap: var(--kbq-size-s);
 
         .kbq-button > .kbq-icon {
-            margin-right: var(--kbq-size-xxs);
+            margin-inline-end: var(--kbq-size-xxs);
         }
 
         & > .kbq-icon {
@@ -27,17 +27,23 @@
         display: flex;
         flex-direction: row;
 
-        margin-left: var(--kbq-size-3xl);
+        margin-inline-start: var(--kbq-size-3xl);
     }
 }
 
 .kbq-pipe__popover {
+    // Token is declared on the overlay panel itself so it resolves outside `.kbq-filter-bar`.
+    --kbq-filter-bar-popover-width: 320px;
+
     .kbq-popover__container {
-        min-width: 320px;
-        max-width: 320px;
+        min-width: var(--kbq-filter-bar-popover-width);
+        max-width: var(--kbq-filter-bar-popover-width);
     }
 
     .kbq-popover__content {
+        // Load-bearing `!important`: the text pipe sets `[defaultPaddings]="false"` (no base
+        // `_default-paddings` padding), but the custom-pipe docs example reuses this panel class with
+        // default paddings, where the base rule ties this one — `!important` keeps this padding winning.
         padding: var(--kbq-size-m) var(--kbq-size-m) 1px !important;
     }
 

package/filter-bar/filter-refresher.scss

@@ -2,5 +2,5 @@
     display: flex;
     align-items: center;
 
-    min-width: 64px;
+    min-width: var(--kbq-filter-bar-refresher-min-width, 64px);
 }

package/filter-bar/filters.scss

@@ -5,7 +5,7 @@
     display: flex;
 
     > .kbq-button {
-        max-width: 320px;
+        max-width: var(--kbq-filter-bar-pipe-max-width, 320px);
 
         & .kbq-button-wrapper {
             width: 100%;
@@ -13,7 +13,7 @@
     }
 
     > .kbq-button .kbq-icon {
-        margin-right: var(--kbq-size-xxs);
+        margin-inline-end: var(--kbq-size-xxs);
     }
 
     & .kbq-filters__filter-name {
@@ -29,61 +29,63 @@
 
         height: var(--kbq-size-m) !important;
 
-        margin-left: calc(var(--kbq-size-s) + var(--kbq-size-xs)) !important;
-        margin-right: var(--kbq-size-xs) !important;
+        // `!important` is load-bearing: it overrides the divider's own higher-specificity
+        // `.kbq-divider_paddings` margin rule. Logical props keep the override RTL-safe.
+        margin-inline-start: calc(var(--kbq-size-s) + var(--kbq-size-xs)) !important;
+        margin-inline-end: var(--kbq-size-xs) !important;
     }
 
     & .kbq-filter-bar__arrow {
         align-self: center;
 
-        margin-left: var(--kbq-size-s);
+        margin-inline-start: var(--kbq-size-s);
     }
 
     .kbq-button.kbq-button_changed-filter {
-        border-bottom-right-radius: unset;
-        border-top-right-radius: unset;
+        border-end-end-radius: unset;
+        border-start-end-radius: unset;
     }
 
     .kbq-button-icon {
-        margin-left: -1px;
+        margin-inline-start: -1px;
 
-        border-bottom-left-radius: unset;
-        border-top-left-radius: unset;
+        border-end-start-radius: unset;
+        border-start-start-radius: unset;
     }
 
     .kbq-button_changed-saved-filter {
         &::before {
             content: '';
             position: absolute;
-            right: -4px;
+            inset-inline-end: -4px;
             top: -4px;
 
             width: var(--kbq-size-s);
             height: var(--kbq-size-s);
 
-            border: 2px solid var(--kbq-background-bg);
+            border-width: 2px;
+            border-style: solid;
             border-radius: var(--kbq-size-xs);
-
-            background: var(--kbq-icon-warning);
         }
     }
 
     .kbq-button:not(:hover, .kbq-active) + .kbq-button_action:not(:hover, .kbq-active)::after {
         content: '';
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 10px;
 
         width: 1px;
         height: var(--kbq-size-m);
-
-        background: var(--kbq-line-contrast-less);
     }
 }
 
 .kbq-filters__save-as-new-filter-popover {
+    // Token is declared on the overlay panel itself so it resolves outside `.kbq-filter-bar`.
+    --kbq-filter-bar-save-popover-width: 400px;
+
     & .kbq-popover__container {
-        width: 400px;
+        width: var(--kbq-filter-bar-save-popover-width);
     }
 
     & .kbq-popover__content {
@@ -92,5 +94,7 @@
 }
 
 .kbq-filters__dropdown .kbq-dropdown-item {
-    padding-right: var(--kbq-size-s);
+    padding-inline-end: var(--kbq-size-s);
 }
+
+@include kbq-filter-bar-filters-theme();