@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-username.mjs

@@ -1,148 +1,246 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Pipe, Directive, input, booleanAttribute, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { InjectionToken, isDevMode, inject, Pipe, Directive, input, booleanAttribute, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { ruRULocaleData, kbqLocaleConfigurationOverrideProvider, kbqInjectLocaleConfiguration } from '@koobiq/components/core';
 import * as i1 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
 
 /**
- * Keys for formatting username parts in short (initial) or full form.
+ * Keys naming the profile field a format character stands for.
+ *
+ * The key identifies the *field* only. Whether it renders in full or as an initial is decided by the
+ * pipe that reads the format: `KbqUsernamePipe` abbreviates a key that is followed by {@link Dot},
+ * `KbqUsernameCustomPipe` abbreviates the lowercase keys. The two upper/lower pairs therefore exist so
+ * that a single mapping serves both rules.
  */
 var KbqUsernameFormatKey;
 (function (KbqUsernameFormatKey) {
-    /**
-     * Short form of the first name (e.g., "John" → "J")
-     */
+    /** First name, abbreviated by `KbqUsernameCustomPipe`. */
     KbqUsernameFormatKey["FirstNameShort"] = "f";
-    /**
-     * Full form of the first name (e.g., "John")
-     */
+    /** First name, rendered in full by `KbqUsernameCustomPipe`. */
     KbqUsernameFormatKey["FirstNameFull"] = "F";
-    /**
-     * Short form of the middle name (e.g., "Henry" → "H")
-     */
+    /** Middle name, abbreviated by `KbqUsernameCustomPipe`. */
     KbqUsernameFormatKey["MiddleNameShort"] = "m";
-    /**
-     * Full form of the middle name (e.g., "Henry")
-     */
+    /** Middle name, rendered in full by `KbqUsernameCustomPipe`. */
     KbqUsernameFormatKey["MiddleNameFull"] = "M";
-    /**
-     * Short form of the last name (e.g., "Doe" → "D")
-     */
+    /** Last name, abbreviated by `KbqUsernameCustomPipe`. */
     KbqUsernameFormatKey["LastNameShort"] = "l";
-    /**
-     * Full form of the last name (e.g., "Doe")
-     */
+    /** Last name, rendered in full by `KbqUsernameCustomPipe`. */
     KbqUsernameFormatKey["LastNameFull"] = "L";
+    /** Abbreviation mark. `KbqUsernamePipe` abbreviates the key it follows; never maps to a field. */
     KbqUsernameFormatKey["Dot"] = ".";
 })(KbqUsernameFormatKey || (KbqUsernameFormatKey = {}));
 
-/** Default name format: Last name full, first and middle as initials. */
+/**
+ * Default format of `KbqUsernameCustomPipe`: full last name, first and middle names as initials.
+ *
+ * Written in that pipe's own syntax — uppercase keys render the full value, lowercase ones an initial,
+ * and every other character is copied verbatim, which is where the spaces and the dots come from.
+ */
 const kbqDefaultFullNameFormatCustom = 'L f. m.';
-/** Default name format: Last name full, first and middle as initials. */
+/**
+ * Default format of `KbqUsernamePipe` and of the `kbq-username` component: full last name, first and
+ * middle names as initials.
+ *
+ * Written in that pipe's own syntax — a key followed by `.` renders an initial, any other key renders
+ * the full value, and the separating spaces are inserted by the pipe rather than by the format.
+ */
 const kbqDefaultFullNameFormat = 'lf.m.';
 /**
- * Throws an error when no profile field mapping is provided to the username pipe.
+ * Mapping of every format key onto a field of {@link KbqUserInfo}. Backs {@link KBQ_PROFILE_MAPPING}
+ * and is the fallback of both pipes, so a profile shaped like `KbqUserInfo` needs no mapping at all.
+ *
+ * Covers the uppercase keys as well, which is what makes `kbqDefaultFullNameFormatCustom` work out of
+ * the box; spread it to map extra fields without losing the defaults.
+ */
+const kbqDefaultProfileMapping = {
+    [KbqUsernameFormatKey.FirstNameShort]: 'firstName',
+    [KbqUsernameFormatKey.FirstNameFull]: 'firstName',
+    [KbqUsernameFormatKey.MiddleNameShort]: 'middleName',
+    [KbqUsernameFormatKey.MiddleNameFull]: 'middleName',
+    [KbqUsernameFormatKey.LastNameShort]: 'lastName',
+    [KbqUsernameFormatKey.LastNameFull]: 'lastName',
+    [KbqUsernameFormatKey.Dot]: undefined
+};
+/**
+ * Injection token for providing a global username format-to-profile mapping.
+ *
+ * Resolved where the `kbq-username` component or the pipe lives, so a component-level or route-level
+ * provider applies to that subtree. Outside a template, resolve it from your own injection context —
+ * `kbqInjectUsernameFormatter()` does exactly that.
+ */
+const KBQ_PROFILE_MAPPING = new InjectionToken('KBQ_PROFILE_MAPPING', { factory: () => kbqDefaultProfileMapping });
+/** Default localized strings of `kbq-username`. */
+const KBQ_USERNAME_DEFAULT_LOCALE_CONFIGURATION = ruRULocaleData.username;
+/** Localization configuration provider for `kbq-username`. */
+const KBQ_USERNAME_LOCALE_CONFIGURATION = new InjectionToken('KbqUsernameLocaleConfiguration', { factory: () => KBQ_USERNAME_DEFAULT_LOCALE_CONFIGURATION });
+/**
+ * Utility provider. Only the strings you pass are overridden; the rest keep following the active locale.
+ *
+ * Provides {@link KBQ_USERNAME_LOCALE_CONFIGURATION}.
+ */
+const kbqUsernameLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('username', configuration);
+/**
+ * Injection function that creates a reactive locale configuration signal for `kbq-username`.
+ *
  * @docs-private
  */
-function KbqMappingMissingError() {
-    return new Error('KbqUsernamePipe: profile field mapping is required but was not provided.');
+function kbqInjectUsernameLocaleConfiguration() {
+    return kbqInjectLocaleConfiguration('username', KBQ_USERNAME_LOCALE_CONFIGURATION);
 }
+
+/** Format keys that name a profile field. `Dot` is a mark rather than a field and is deliberately absent. */
+const fieldFormatKeys = new Set([
+    KbqUsernameFormatKey.FirstNameShort,
+    KbqUsernameFormatKey.FirstNameFull,
+    KbqUsernameFormatKey.MiddleNameShort,
+    KbqUsernameFormatKey.MiddleNameFull,
+    KbqUsernameFormatKey.LastNameShort,
+    KbqUsernameFormatKey.LastNameFull
+]);
+/** Keys already reported by `warnAboutUnmappedKey`; a pure pipe runs on every check. */
+const reportedUnmappedKeys = new Set();
 /**
- * Injection token for providing a global username format-to-profile mapping.
+ * A format key with no mapped field is emitted verbatim, which is indistinguishable from a separator
+ * and is how a wrong mapping ends up rendering a capital `L` where the surname should be.
+ */
+const warnAboutUnmappedKey = (letter) => {
+    if (!isDevMode() || !fieldFormatKeys.has(letter) || reportedUnmappedKeys.has(letter))
+        return;
+    reportedUnmappedKeys.add(letter);
+    // eslint-disable-next-line no-console
+    console.warn(`KbqUsernameCustomPipe: format key "${letter}" is not mapped to a profile field, so it is rendered ` +
+        'as literal text. Provide it through KBQ_PROFILE_MAPPING (see kbqDefaultProfileMapping).');
+};
+/** First character of a value, counted in code points so a surrogate pair survives as a single initial. */
+const firstCharacter = (value) => [...String(value)][0] ?? '';
+/** FIRST STRONG ISOLATE: opens a run whose base direction is taken from its own first strong character. */
+const firstStrongIsolate = '\u2068';
+/** POP DIRECTIONAL ISOLATE: closes the run opened by {@link firstStrongIsolate}. */
+const popDirectionalIsolate = '\u2069';
+/**
+ * Formats a profile the way `KbqUsernamePipe` and `kbq-username` do: a key followed by
+ * {@link KbqUsernameFormatKey.Dot} renders an initial, any other key renders the full value, and the
+ * parts are joined with single spaces — a character that is neither a mapped key nor `.` is dropped.
+ *
+ * Fields the profile does not carry are skipped one by one, so a partial profile still renders whatever
+ * it has.
+ *
+ * @param profile Profile to format. Anything that is not a record — null, a primitive, an array —
+ * formats as an empty string.
+ * @param format Format string, e.g. {@link kbqDefaultFullNameFormat}.
+ * @param mapping Format key to profile field mapping, e.g. {@link kbqDefaultProfileMapping}. Resolve it
+ * from your own injection context — `inject(KBQ_PROFILE_MAPPING)` — to honour a scoped override.
+ */
+function kbqFormatUsername(profile, format, mapping) {
+    if (!profile || typeof profile !== 'object' || Array.isArray(profile))
+        return '';
+    const letters = format.split('');
+    return letters
+        .reduce((parts, letter, index) => {
+        if (letter === KbqUsernameFormatKey.Dot)
+            return parts;
+        const field = mapping[letter];
+        const value = field === undefined ? undefined : profile[field];
+        if (!value)
+            return parts;
+        const isShort = letters[index + 1] === KbqUsernameFormatKey.Dot;
+        parts.push(isShort ? `${firstCharacter(value)}${KbqUsernameFormatKey.Dot}` : `${value}`);
+        return parts;
+    }, [])
+        .join(' ');
+}
+/**
+ * Formats a profile the way `KbqUsernameCustomPipe` does: a lowercase key renders an initial, an
+ * uppercase one the full value, and every character with no mapped field — the separators — is emitted
+ * verbatim, which is what lets the format carry its own punctuation.
+ *
+ * @param profile Profile to format. Anything that is not a record — null, a primitive, an array —
+ * formats as an empty string.
+ * @param format Format string, e.g. {@link kbqDefaultFullNameFormatCustom}.
+ * @param mapping Format key to profile field mapping, e.g. {@link kbqDefaultProfileMapping}. Resolve it
+ * from your own injection context — `inject(KBQ_PROFILE_MAPPING)` — to honour a scoped override.
  */
-const KBQ_PROFILE_MAPPING = new InjectionToken('KBQ_PROFILE_MAPPING', {
-    factory: () => ({
-        [KbqUsernameFormatKey.FirstNameShort]: 'firstName',
-        [KbqUsernameFormatKey.MiddleNameShort]: 'middleName',
-        [KbqUsernameFormatKey.LastNameShort]: 'lastName',
-        [KbqUsernameFormatKey.Dot]: undefined
+function kbqFormatUsernameCustom(profile, format, mapping) {
+    if (!profile || typeof profile !== 'object' || Array.isArray(profile))
+        return '';
+    return format
+        .split('')
+        .map((letter) => {
+        const field = mapping[letter];
+        if (!field) {
+            warnAboutUnmappedKey(letter);
+            return letter;
+        }
+        const value = profile[field];
+        if (!value)
+            return '';
+        return letter === letter.toLowerCase() ? firstCharacter(value) : `${value}`;
     })
-});
-
+        .join('')
+        .trim();
+}
+/**
+ * Formats a user profile into a name string.
+ *
+ * A key followed by `.` renders an initial and any other key renders the full value; the separating
+ * spaces are inserted by the pipe, so a character that is neither a mapped key nor `.` is dropped.
+ *
+ * {@link KbqUsernameCustomPipe} derives the form from the key's case instead, and keeps the format's own
+ * punctuation.
+ */
 class KbqUsernamePipe {
     constructor() {
-        this.mapping = inject(KBQ_PROFILE_MAPPING, { optional: true });
+        this.mapping = inject(KBQ_PROFILE_MAPPING) ?? kbqDefaultProfileMapping;
     }
     /** Builds a formatted name string from the user profile using the provided format and mapping. */
     transform(profile, format = kbqDefaultFullNameFormat, customMapping) {
-        const resolvedMapping = customMapping || this.mapping;
-        if (!resolvedMapping) {
-            throw KbqMappingMissingError();
-        }
-        if (!profile || typeof profile !== 'object')
-            return '';
-        let result = '';
-        const formatUnits = format.split('');
-        formatUnits.forEach((letter, index, array) => {
-            if (letter !== KbqUsernameFormatKey.Dot) {
-                const field = resolvedMapping[letter];
-                const fieldValue = profile[field];
-                if (fieldValue) {
-                    const isShort = array[index + 1] === KbqUsernameFormatKey.Dot;
-                    const resolvedFieldValue = isShort ? `${fieldValue[0]}${KbqUsernameFormatKey.Dot}` : fieldValue;
-                    result += ` ${resolvedFieldValue}`;
-                }
-            }
-        });
-        return result.trim();
+        return kbqFormatUsername(profile, format, customMapping || this.mapping);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernamePipe, isStandalone: true, name: "kbqUsername" }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernamePipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernamePipe, isStandalone: true, name: "kbqUsername" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernamePipe, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }, {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernamePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'kbqUsername',
-                    pure: true
+                    name: 'kbqUsername'
                 }]
         }] });
 /**
- * Pipe to format a user profile into a name string using a format pattern and field mapping.
- * Lowercase keys output initials; uppercase keys show full values.
+ * Formats a user profile into a name string.
+ *
+ * A lowercase key renders an initial and an uppercase one the full value; every character with no
+ * mapped field is emitted verbatim, so the format carries its own separators.
+ *
+ * {@link KbqUsernamePipe} derives the form from a following `.` instead.
  */
 class KbqUsernameCustomPipe {
     constructor() {
-        this.mapping = inject(KBQ_PROFILE_MAPPING, { optional: true });
+        this.mapping = inject(KBQ_PROFILE_MAPPING) ?? kbqDefaultProfileMapping;
     }
     /** Builds a formatted name string from the user profile using the provided format and mapping. */
     transform(profile, format = kbqDefaultFullNameFormatCustom, customMapping) {
-        const resolvedMapping = customMapping || this.mapping;
-        if (!resolvedMapping) {
-            throw KbqMappingMissingError();
-        }
-        if (!profile || typeof profile !== 'object')
-            return '';
-        let result = '';
-        const formatUnits = format.split('');
-        formatUnits.forEach((letter) => {
-            const field = resolvedMapping[letter];
-            if (!field) {
-                result += letter;
-                return;
-            }
-            const isShort = letter === letter.toLowerCase();
-            const fieldValue = profile[field] || '';
-            result += fieldValue && isShort ? fieldValue[0] : fieldValue;
-        });
-        return result.trim();
+        return kbqFormatUsernameCustom(profile, format, customMapping || this.mapping);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameCustomPipe, isStandalone: true, name: "kbqUsernameCustom" }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameCustomPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameCustomPipe, isStandalone: true, name: "kbqUsernameCustom" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameCustomPipe, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }, {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameCustomPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'kbqUsernameCustom',
-                    pure: true
+                    name: 'kbqUsernameCustom'
                 }]
         }] });
+/**
+ * Returns the formatter `kbq-username` renders with, bound to the `KBQ_PROFILE_MAPPING` visible at the
+ * call site. Use it wherever the displayed string is needed outside a template — a search filter, an
+ * option label — so that a scoped mapping applies to both paths.
+ *
+ * Must run in an injection context.
+ */
+function kbqInjectUsernameFormatter() {
+    const mapping = inject(KBQ_PROFILE_MAPPING) ?? kbqDefaultProfileMapping;
+    return (profile, format = kbqDefaultFullNameFormat) => kbqFormatUsername(profile, format, mapping);
+}
 /**
  * Builds a full username string from a pre-formatted name plus optional login and site,
  * mirroring the text rendered by `kbq-username`.
@@ -152,18 +250,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 function kbqBuildUsernameText(data, options) {
     const formatLogin = options?.formatLogin ?? ((login) => login);
     const formatSite = options?.formatSite ?? ((site) => `(${site})`);
+    const isolate = (segment) => options?.bidiIsolate ? `${firstStrongIsolate}${segment}${popDirectionalIsolate}` : segment;
     return [data.name, data.login && formatLogin(data.login), data.site && formatSite(data.site)]
-        .filter(Boolean)
+        .filter((segment) => !!segment)
+        .map(isolate)
         .join(' ');
 }
 
 const baseClass = 'kbq-username';
+/**
+ * Unabbreviated counterpart of a format: every key renders in full, so the abbreviation marks go.
+ *
+ * The case is left alone. `kbqFormatUsername` resolves a key through the mapping whatever its case, and
+ * upper-casing would miss every mapping typed `KbqFormatKeyToProfileMapping` — the shape the token is
+ * documented with, which by design carries the lowercase keys only.
+ */
+const expandFormat = (format) => format.replaceAll('.', '');
 /** Styles the primary part of the username (e.g. full name). */
 class KbqUsernamePrimary {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernamePrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqUsernamePrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqUsernamePrimary, isStandalone: true, selector: "[kbqUsernamePrimary]", host: { classAttribute: "kbq-username__primary" }, exportAs: ["kbqUsernamePrimary"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernamePrimary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernamePrimary, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernamePrimary]',
@@ -175,10 +283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }] });
 /** Styles the secondary part. */
 class KbqUsernameSecondary {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameSecondary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqUsernameSecondary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqUsernameSecondary, isStandalone: true, selector: "[kbqUsernameSecondary]", host: { classAttribute: "kbq-username__secondary" }, exportAs: ["kbqUsernameSecondary"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameSecondary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameSecondary, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernameSecondary]',
@@ -190,10 +298,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }] });
 /** Styles a secondary hint. */
 class KbqUsernameSecondaryHint {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameSecondaryHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqUsernameSecondaryHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqUsernameSecondaryHint, isStandalone: true, selector: "[kbqUsernameSecondaryHint]", host: { classAttribute: "kbq-username__secondary-hint" }, exportAs: ["kbqUsernameSecondaryHint"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameSecondaryHint, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameSecondaryHint, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernameSecondaryHint]',
@@ -205,10 +313,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }] });
 /** Custom content for `KbqUsername`, overrides default view. */
 class KbqUsernameCustomView {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameCustomView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqUsernameCustomView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", 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: "20.3.30", ngImport: i0, type: KbqUsernameCustomView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameCustomView, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-username-custom-view, [kbq-username-custom-view]',
@@ -226,54 +334,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  */
 class KbqUsername {
     constructor() {
+        /**
+         * Resolved at the component's own injector, so a mapping scoped to a route or a host component
+         * applies to what is rendered here.
+         */
+        this.mapping = inject(KBQ_PROFILE_MAPPING) ?? kbqDefaultProfileMapping;
         /** User profile data used for display. */
-        this.userInfo = input(...(ngDevMode ? [undefined, { debugName: "userInfo" }] : []));
+        this.userInfo = input(...(ngDevMode ? [undefined, { debugName: "userInfo" }] : /* istanbul ignore next */ []));
         /** Enables compact display mode */
-        this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.isCompact = input(false, { ...(ngDevMode ? { debugName: "isCompact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Format string for rendering the user's full name. */
-        this.fullNameFormat = input(kbqDefaultFullNameFormat, ...(ngDevMode ? [{ debugName: "fullNameFormat" }] : []));
+        this.fullNameFormat = input(kbqDefaultFullNameFormat, ...(ngDevMode ? [{ debugName: "fullNameFormat" }] : /* istanbul ignore next */ []));
         /**
-         * Display mode of the username.
-         * @default inline
+         * Display mode of the username. Defaults to `'inline'`.
          */
-        this.mode = input('inline', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.mode = input('inline', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /**
-         * Visual style of the username.
-         * @default default
+         * Visual style of the username. Defaults to `'default'`.
          */
-        this.type = input('default', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.type = input('default', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * Custom projected view for username rendering.
+         *
          * @docs-private
          */
-        this.customView = contentChild(KbqUsernameCustomView, ...(ngDevMode ? [{ debugName: "customView" }] : []));
+        this.customView = contentChild(KbqUsernameCustomView, ...(ngDevMode ? [{ debugName: "customView" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.hasFullName = computed(() => {
-            const userInfo = this.userInfo();
-            if (!userInfo)
-                return false;
-            return userInfo?.lastName && userInfo?.firstName;
-        }, ...(ngDevMode ? [{ debugName: "hasFullName" }] : []));
+        this.localeConfiguration = kbqInjectUsernameLocaleConfiguration();
+        /**
+         * Name as rendered, i.e. abbreviated according to `fullNameFormat`.
+         *
+         * @docs-private
+         */
+        this.formattedName = computed(() => kbqFormatUsername(this.userInfo(), this.fullNameFormat(), this.mapping), ...(ngDevMode ? [{ debugName: "formattedName" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the profile yields any name at all. A profile carrying only one of the name fields still
+         * has a name, and the formatter degrades to whatever it finds.
+         *
+         * @docs-private
+         */
+        this.hasName = computed(() => !!this.formattedName(), ...(ngDevMode ? [{ debugName: "hasName" }] : /* istanbul ignore next */ []));
+        /**
+         * Unabbreviated name, offered as the tooltip of the truncated primary part.
+         *
+         * @docs-private
+         */
+        this.expandedName = computed(() => kbqFormatUsername(this.userInfo(), expandFormat(this.fullNameFormat()), this.mapping), ...(ngDevMode ? [{ debugName: "expandedName" }] : /* istanbul ignore next */ []));
+        /**
+         * Tooltip of the secondary part: the login with the site hint it renders inline.
+         *
+         * @docs-private
+         */
+        this.secondaryTitle = computed(() => this.withSite(this.userInfo()?.login || ''), ...(ngDevMode ? [{ debugName: "secondaryTitle" }] : /* istanbul ignore next */ []));
+        /**
+         * Tooltip of the compact layout, whose single part carries the name — or the login when there is
+         * none — followed by the site.
+         *
+         * @docs-private
+         */
+        this.compactTitle = computed(() => this.withSite(this.hasName() ? this.expandedName() || this.formattedName() : this.userInfo()?.login || ''), ...(ngDevMode ? [{ debugName: "compactTitle" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the layout can clip its text. `kbq-truncate-line()` is applied to `stacked` and `inline`
+         * only, so in `text` mode nothing is ever clipped and the verdict `kbq-title` computes is known in
+         * advance. Attaching it there would cost a `MutationObserver` per part and a forced layout read on
+         * every resize and every content mutation, for a tooltip that could never show.
+         *
+         * @docs-private
+         */
+        this.canTruncate = computed(() => this.mode() !== 'text', ...(ngDevMode ? [{ debugName: "canTruncate" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.class = computed(() => {
             return [this.type(), this.mode()].map((modificator) => `${baseClass}_${modificator}`).join(' ');
-        }, ...(ngDevMode ? [{ debugName: "class" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    }
+    withSite(text) {
+        const site = this.userInfo()?.site;
+        return site ? `${text} (${site})`.trim() : text;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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    @if (!isCompact()) {\n        @if (hasName()) {\n            @if (canTruncate()) {\n                <span kbqUsernamePrimary dir=\"auto\" [kbq-title]=\"expandedName()\">{{ formattedName() }}</span>\n            } @else {\n                <span kbqUsernamePrimary dir=\"auto\">{{ formattedName() }}</span>\n            }\n        }\n\n        @if (profile.login) {\n            <!-- The two branches must stay in sync: `kbq-title` cannot be bound conditionally, and in\n            `text` mode there is no ellipsis for it to detect. -->\n            @if (canTruncate()) {\n                <span kbqUsernameSecondary [kbq-title]=\"secondaryTitle()\">\n                    {{ profile.login }}\n\n                    @if (profile.site) {\n                        <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                        <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                    }\n                </span>\n            } @else {\n                <span kbqUsernameSecondary>\n                    {{ profile.login }}\n\n                    @if (profile.site) {\n                        <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                        <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                    }\n                </span>\n            }\n        }\n    } @else {\n        @if (canTruncate()) {\n            <span kbqUsernamePrimary [kbq-title]=\"compactTitle()\">\n                @if (hasName()) {\n                    <span dir=\"auto\">{{ formattedName() }}</span>\n                } @else if (profile.login) {\n                    {{ profile.login }}\n                }\n\n                @if (profile.site) {\n                    <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                    <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n                }\n            </span>\n        } @else {\n            <span kbqUsernamePrimary>\n                @if (hasName()) {\n                    <span dir=\"auto\">{{ formattedName() }}</span>\n                } @else if (profile.login) {\n                    {{ profile.login }}\n                }\n\n                @if (profile.site) {\n                    <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                    <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n                }\n            </span>\n        }\n    }\n}\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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,.kbq-username.kbq-username_default .kbq-username__secondary-hint{--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__primary,.kbq-username .kbq-username__secondary,.kbq-username .kbq-username__secondary-hint{unicode-bidi:isolate}.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", "ignoreTooltipPointerEvents"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsername, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsername, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-username', imports: [
                         KbqTitleModule,
-                        KbqUsernamePipe,
                         KbqUsernamePrimary,
                         KbqUsernameSecondary,
                         KbqUsernameSecondaryHint
                     ], 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}@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"] }]
+                    }, exportAs: 'kbqUsername', template: "@let profile = userInfo();\n<ng-content select=\"kbq-username-custom-view,[kbq-username-custom-view]\" />\n\n@if (!customView() && profile) {\n    @if (!isCompact()) {\n        @if (hasName()) {\n            @if (canTruncate()) {\n                <span kbqUsernamePrimary dir=\"auto\" [kbq-title]=\"expandedName()\">{{ formattedName() }}</span>\n            } @else {\n                <span kbqUsernamePrimary dir=\"auto\">{{ formattedName() }}</span>\n            }\n        }\n\n        @if (profile.login) {\n            <!-- The two branches must stay in sync: `kbq-title` cannot be bound conditionally, and in\n            `text` mode there is no ellipsis for it to detect. -->\n            @if (canTruncate()) {\n                <span kbqUsernameSecondary [kbq-title]=\"secondaryTitle()\">\n                    {{ profile.login }}\n\n                    @if (profile.site) {\n                        <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                        <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                    }\n                </span>\n            } @else {\n                <span kbqUsernameSecondary>\n                    {{ profile.login }}\n\n                    @if (profile.site) {\n                        <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                        <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                    }\n                </span>\n            }\n        }\n    } @else {\n        @if (canTruncate()) {\n            <span kbqUsernamePrimary [kbq-title]=\"compactTitle()\">\n                @if (hasName()) {\n                    <span dir=\"auto\">{{ formattedName() }}</span>\n                } @else if (profile.login) {\n                    {{ profile.login }}\n                }\n\n                @if (profile.site) {\n                    <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                    <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n                }\n            </span>\n        } @else {\n            <span kbqUsernamePrimary>\n                @if (hasName()) {\n                    <span dir=\"auto\">{{ formattedName() }}</span>\n                } @else if (profile.login) {\n                    {{ profile.login }}\n                }\n\n                @if (profile.site) {\n                    <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                    <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n                }\n            </span>\n        }\n    }\n}\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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,.kbq-username.kbq-username_default .kbq-username__secondary-hint{--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__primary,.kbq-username .kbq-username__secondary,.kbq-username .kbq-username__secondary-hint{unicode-bidi:isolate}.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 = [
@@ -281,25 +432,29 @@ const COMPONENTS = [
     KbqUsernameCustomView,
     KbqUsernamePrimary,
     KbqUsernameSecondary,
+    KbqUsernameSecondaryHint,
     KbqUsernameCustomPipe,
     KbqUsernamePipe
 ];
+/** Exports every `kbq-username` building block: the component, the styling directives and both pipes. */
 class KbqUsernameModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername,
             KbqUsernameCustomView,
             KbqUsernamePrimary,
             KbqUsernameSecondary,
+            KbqUsernameSecondaryHint,
             KbqUsernameCustomPipe,
             KbqUsernamePipe], exports: [KbqUsername,
             KbqUsernameCustomView,
             KbqUsernamePrimary,
             KbqUsernameSecondary,
+            KbqUsernameSecondaryHint,
             KbqUsernameCustomPipe,
             KbqUsernamePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqUsernameModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqUsernameModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
@@ -311,5 +466,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_PROFILE_MAPPING, KbqMappingMissingError, KbqUsername, KbqUsernameCustomPipe, KbqUsernameCustomView, KbqUsernameFormatKey, KbqUsernameModule, KbqUsernamePipe, KbqUsernamePrimary, KbqUsernameSecondary, KbqUsernameSecondaryHint, kbqBuildUsernameText, kbqDefaultFullNameFormat, kbqDefaultFullNameFormatCustom };
+export { KBQ_PROFILE_MAPPING, KBQ_USERNAME_DEFAULT_LOCALE_CONFIGURATION, KBQ_USERNAME_LOCALE_CONFIGURATION, KbqUsername, KbqUsernameCustomPipe, KbqUsernameCustomView, KbqUsernameFormatKey, KbqUsernameModule, KbqUsernamePipe, KbqUsernamePrimary, KbqUsernameSecondary, KbqUsernameSecondaryHint, kbqBuildUsernameText, kbqDefaultFullNameFormat, kbqDefaultFullNameFormatCustom, kbqDefaultProfileMapping, kbqFormatUsername, kbqFormatUsernameCustom, kbqInjectUsernameFormatter, kbqInjectUsernameLocaleConfiguration, kbqUsernameLocaleConfigurationProvider };
 //# sourceMappingURL=koobiq-components-username.mjs.map