@koobiq/components 18.33.0 → 18.34.0

package/username/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Keys for formatting username parts in short (initial) or full form.
+ */
+export declare enum KbqUsernameFormatKey {
+    /**
+     * Short form of the first name (e.g., "John" → "J")
+     */
+    FirstNameShort = "f",
+    /**
+     * Full form of the first name (e.g., "John")
+     */
+    FirstNameFull = "F",
+    /**
+     * Short form of the middle name (e.g., "Henry" → "H")
+     */
+    MiddleNameShort = "m",
+    /**
+     * Full form of the middle name (e.g., "Henry")
+     */
+    MiddleNameFull = "M",
+    /**
+     * Short form of the last name (e.g., "Doe" → "D")
+     */
+    LastNameShort = "l",
+    /**
+     * Full form of the last name (e.g., "Doe")
+     */
+    LastNameFull = "L",
+    Dot = "."
+}
+/**
+ * Maps each format key to a property name in the user profile object.
+ * Allows flexible formatting regardless of profile field names.
+ */
+export type KbqFormatKeyToProfileMapping<T = any> = {
+    [key in Exclude<KbqUsernameFormatKey, KbqUsernameFormatKey.FirstNameFull | KbqUsernameFormatKey.MiddleNameFull | KbqUsernameFormatKey.LastNameFull>]: keyof T | undefined;
+};
+/**
+ * Maps each format key to a property name in the user profile object.
+ * Allows flexible formatting regardless of profile field names.
+ * @see KbqUsernameCustomPipe
+ */
+export type KbqFormatKeyToProfileMappingExtended<T = any> = {
+    [key in KbqUsernameFormatKey]: keyof T | undefined;
+};
+/**
+ * Layout mode for displaying a username and applying text-ellipsis.
+ *
+ * - `stacked`: Elements shown vertically.
+ * - `inline`: Elements shown in one line. Text ellipsis is applied to both parts.
+ * - `text`: Plain text, no layout styling. No text-ellipsis.
+ */
+export type KbqUsernameMode = 'stacked' | 'inline' | 'text';
+/**
+ * Visual style of the username.
+ *
+ * - `default`: standard styling with primary and secondary colors.
+ * - `error`: error colors (e.g., red).
+ * - `accented`: no color theming; emphasizes via typography only.
+ * - `inherit`: inherits parent styles, no theming. For example, useful when using inside links.
+ */
+export type KbqUsernameStyle = 'default' | 'error' | 'accented' | 'inherit';

package/username/username-tokens.scss

@@ -0,0 +1,6 @@
+: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);
+}

package/username/username.d.ts

@@ -0,0 +1,68 @@
+import { KbqUsernameMode, KbqUsernameStyle } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Basic user info
+ * @docs-private
+ */
+export type KbqUserInfo = {
+    firstName?: string;
+    lastName?: string;
+    middleName?: string;
+    login?: string;
+    site?: string;
+};
+/** Styles the primary part of the username (e.g. full name). */
+export declare class KbqUsernamePrimary {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernamePrimary, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernamePrimary, "[kbqUsernamePrimary]", ["kbqUsernamePrimary"], {}, {}, never, never, true, never>;
+}
+/** Styles the secondary part. */
+export declare class KbqUsernameSecondary {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameSecondary, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernameSecondary, "[kbqUsernameSecondary]", ["kbqUsernameSecondary"], {}, {}, never, never, true, never>;
+}
+/** Styles a secondary hint. */
+export declare class KbqUsernameSecondaryHint {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameSecondaryHint, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernameSecondaryHint, "[kbqUsernameSecondaryHint]", ["kbqUsernameSecondaryHint"], {}, {}, never, never, true, never>;
+}
+/** Custom content for `KbqUsername`, overrides default view. */
+export declare class KbqUsernameCustomView {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameCustomView, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernameCustomView, "kbq-username-custom-view, [kbq-username-custom-view]", ["kbqUsernameCustomView"], {}, {}, never, never, true, never>;
+}
+/**
+ * Displays a user's name based on profile data.
+ * Supports different display modes and visual styles.
+ * A custom view can be provided via `<kbq-username-custom-view>` for full control over the output.
+ * Accepts input profile data and optional formatting options.
+ */
+export declare class KbqUsername {
+    /** User profile data used for display. */
+    readonly userInfo: import("@angular/core").InputSignal<KbqUserInfo | undefined>;
+    /** Enables compact display mode */
+    readonly isCompact: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Format string for rendering the user's full name. */
+    readonly fullNameFormat: import("@angular/core").InputSignal<string>;
+    /**
+     * Display mode of the username.
+     * @default inline
+     */
+    readonly mode: import("@angular/core").InputSignal<KbqUsernameMode>;
+    /**
+     * Visual style of the username.
+     * @default default
+     */
+    readonly type: import("@angular/core").InputSignal<KbqUsernameStyle>;
+    /**
+     * Custom projected view for username rendering.
+     * @docs-private
+     */
+    protected readonly customView: import("@angular/core").Signal<KbqUsernameCustomView | undefined>;
+    /** @docs-private */
+    protected readonly hasFullName: import("@angular/core").Signal<string | false | undefined>;
+    /** @docs-private */
+    protected readonly class: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsername, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqUsername, "kbq-username", ["kbqUsername"], { "userInfo": { "alias": "userInfo"; "required": false; "isSignal": true; }; "isCompact": { "alias": "isCompact"; "required": false; "isSignal": true; }; "fullNameFormat": { "alias": "fullNameFormat"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, ["customView"], ["kbq-username-custom-view,[kbq-username-custom-view]"], true, never>;
+}

package/username/username.pipe.d.ts

@@ -0,0 +1,23 @@
+import { PipeTransform } from '@angular/core';
+import { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended } from './types';
+import * as i0 from "@angular/core";
+export declare class KbqUsernamePipe<T = unknown> implements PipeTransform {
+    private readonly mapping;
+    /** Builds a formatted name string from the user profile using the provided format and mapping. */
+    transform(profile: T, format?: string, customMapping?: KbqFormatKeyToProfileMapping): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernamePipe<any>, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqUsernamePipe<any>, "kbqUsername", true>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqUsernamePipe<any>>;
+}
+/**
+ * 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.
+ */
+export declare class KbqUsernameCustomPipe<T = unknown> implements PipeTransform {
+    private readonly mapping;
+    /** Builds a formatted name string from the user profile using the provided format and mapping. */
+    transform(profile: T, format?: string, customMapping?: KbqFormatKeyToProfileMappingExtended<T>): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameCustomPipe<any>, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqUsernameCustomPipe<any>, "kbqUsernameCustom", true>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqUsernameCustomPipe<any>>;
+}

package/username/username.scss

@@ -0,0 +1,107 @@
+@use '../core/styles/common';
+@use '../core/styles/common/tokens';
+
+// Targets the layout container: either the root or custom view if present.
+@mixin _kbq-username-content-wrapper {
+    &:not(:has(> .kbq-username__custom-view)),
+    & > .kbq-username__custom-view {
+        @content;
+    }
+}
+
+@mixin _kbq-username-theme() {
+    & {
+        color: var(--kbq-username-primary-color);
+
+        .kbq-username__secondary,
+        .kbq-username__secondary-hint {
+            color: var(--kbq-username-secondary-color);
+        }
+    }
+
+    &.kbq-username_default {
+        .kbq-username__secondary-hint,
+        .kbq-username__primary + .kbq-username__secondary {
+            --kbq-username-secondary-color: var(--kbq-foreground-contrast-secondary);
+        }
+    }
+
+    &.kbq-username_error {
+        --kbq-username-primary-color: var(--kbq-foreground-error);
+        --kbq-username-secondary-color: var(--kbq-foreground-error);
+    }
+
+    &.kbq-username_accented {
+        --kbq-username-primary-color: var(--kbq-foreground-contrast);
+        --kbq-username-secondary-color: var(--kbq-foreground-contrast);
+    }
+
+    &.kbq-username_inherit {
+        --kbq-username-primary-color: inherit;
+        --kbq-username-secondary-color: inherit;
+    }
+}
+
+@mixin _kbq-username-typography() {
+    & {
+        @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);
+    }
+
+    &.kbq-username_accented {
+        .kbq-username__primary {
+            @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal-strong);
+        }
+    }
+}
+
+.kbq-username {
+    @include _kbq-username-theme();
+    @include _kbq-username-typography();
+
+    &.kbq-username_stacked {
+        @include _kbq-username-content-wrapper {
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: flex-start;
+            align-items: normal;
+
+            gap: var(--kbq-username-vertical-gap);
+        }
+    }
+
+    &.kbq-username_inline:not(.kbq-username_inherit) {
+        @include _kbq-username-content-wrapper {
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: flex-start;
+            align-items: baseline;
+
+            .kbq-username__primary + .kbq-username__secondary {
+                @include common.rtl-prop(margin-left, margin-right, var(--kbq-username-horizontal-gap), 0);
+            }
+        }
+    }
+
+    &.kbq-username_text {
+        @include _kbq-username-content-wrapper {
+            display: inline;
+        }
+    }
+
+    &.kbq-username_stacked,
+    &.kbq-username_inline {
+        @include _kbq-username-content-wrapper {
+            .kbq-username__primary,
+            .kbq-username__secondary {
+                @include common.kbq-truncate-line();
+            }
+        }
+    }
+
+    &.kbq-username_inherit {
+        @include _kbq-username-content-wrapper {
+            font: inherit;
+            display: inherit;
+        }
+    }
+}