@koobiq/components 18.32.0 → 18.34.0

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;
+        }
+    }
+}