@brickclay-org/ui 0.0.49 → 0.0.51

package/fesm2022/brickclay-org-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, Directive, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import moment from 'moment';
@@ -11,7 +11,7 @@ import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$2 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
-import { DIALOG_DATA as DIALOG_DATA$1, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
+import { DIALOG_DATA, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 
@@ -4336,8 +4336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  *   as before.
  *
  * • `INTERNAL_DIALOG_CONFIG` — Internal-only token used to pass our
- *   full `DialogConfig` (including animation fields) to the custom
- *   `DialogContainerComponent`.  Not part of the public API.
+ *   full `BkDialogConfig` (including animation fields) to the custom
+ *   `BkDialogContainerComponent`.  Not part of the public API.
  */
 // ──── Public ─────────────────────────────────────────────────────────────
 /**
@@ -4349,10 +4349,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  *
  * Usage inside a dialog component:
  * ```ts
- * constructor(@Inject(DIALOG_DATA) public data: MyDataType) {}
+ * constructor(@Inject(BK_DIALOG_DATA) public data: MyDataType) {}
  * ```
  */
-const DIALOG_DATA = DIALOG_DATA$1;
+const BK_DIALOG_DATA = DIALOG_DATA;
 /**
  * Optional token for providing global dialog defaults at the
  * application level.
@@ -4360,19 +4360,19 @@ const DIALOG_DATA = DIALOG_DATA$1;
  * Usage in `app.config.ts` or a module's `providers` array:
  * ```ts
  * providers: [
- *   { provide: DIALOG_GLOBAL_CONFIG, useValue: { animation: 'zoom', width: '600px' } }
+ *   { provide: BK_DIALOG_GLOBAL_CONFIG, useValue: { animation: 'zoom', width: '600px' } }
  * ]
  * ```
  */
-const DIALOG_GLOBAL_CONFIG = new InjectionToken('DIALOG_GLOBAL_CONFIG');
+const BK_DIALOG_GLOBAL_CONFIG = new InjectionToken('BK_DIALOG_GLOBAL_CONFIG');
 // ──── Internal ───────────────────────────────────────────────────────────
 /**
- * Internal token that carries our full `DialogConfig` (with animation
- * settings, position offsets, etc.) into the `DialogContainerComponent`.
+ * Internal token that carries our full `BkDialogConfig` (with animation
+ * settings, position offsets, etc.) into the `BkDialogContainerComponent`.
  *
  * @internal — not exported from the barrel; do not depend on it.
  */
-const INTERNAL_DIALOG_CONFIG = new InjectionToken('INTERNAL_DIALOG_CONFIG');
+const BK_INTERNAL_DIALOG_CONFIG = new InjectionToken('BK_INTERNAL_DIALOG_CONFIG');
 
 /**
  * Dialog Animations
@@ -4387,7 +4387,7 @@ const INTERNAL_DIALOG_CONFIG = new InjectionToken('INTERNAL_DIALOG_CONFIG');
  *  3. Future presets can be added without touching the component template.
  *
  * Each preset exports an `enter` and `leave` keyframe array plus a
- * recommended timing object. The DialogContainerComponent plays these
+ * recommended timing object. The BkDialogContainerComponent plays these
  * via `element.animate()`.
  */
 /**
@@ -4539,7 +4539,7 @@ function getDialogBackdropAnimation(enterDuration, leaveDuration) {
 }
 
 /**
- * DialogContainerComponent
+ * BkDialogContainerComponent
  *
  * Architecture Decision:
  * ─────────────────────
@@ -4559,19 +4559,19 @@ function getDialogBackdropAnimation(enterDuration, leaveDuration) {
  *   • Position-offset application via CSS margin.
  *
  * This component is **never** used directly — it is created internally
- * by `DialogService` via CDK's `Dialog.open()`.
+ * by `BkDialogService` via CDK's `Dialog.open()`.
  */
-class DialogContainerComponent extends CdkDialogContainer {
+class BkDialogContainerComponent extends CdkDialogContainer {
     /**
      * Our full config (including animation fields).
-     * Provided by DialogService via the INTERNAL_DIALOG_CONFIG token.
+     * Provided by BkDialogService via the INTERNAL_DIALOG_CONFIG token.
      */
-    _dialogConfig = inject(INTERNAL_DIALOG_CONFIG);
+    _dialogConfig = inject(BK_INTERNAL_DIALOG_CONFIG);
     // ──── Opened promise ─────────────────────────────────────────────────
     /**
      * Resolves when the enter animation finishes (or immediately for 'none').
-     * `DialogService` subscribes via `.then()` to emit `afterOpened` on the
-     * `DialogRef`.
+     * `BkDialogService` subscribes via `.then()` to emit `afterOpened` on the
+     * `BkDialogRef`.
      */
     _resolveOpened;
     opened = new Promise(resolve => {
@@ -4629,7 +4629,7 @@ class DialogContainerComponent extends CdkDialogContainer {
     }
     /**
      * Play the leave animation.  Returns a Promise that resolves when done.
-     * Called by `DialogRef._runCloseSequence()` before CDK tears down the
+     * Called by `BkDialogRef._runCloseSequence()` before CDK tears down the
      * overlay.
      */
     playLeaveAnimation() {
@@ -4681,10 +4681,10 @@ class DialogContainerComponent extends CdkDialogContainer {
         const pane = this._elementRef.nativeElement.closest('.cdk-overlay-pane');
         return pane?.parentElement?.querySelector('.cdk-overlay-backdrop') ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DialogContainerComponent, isStandalone: true, selector: "bk-dialog-container", host: { classAttribute: "bk-dialog-container" }, usesInheritance: true, ngImport: i0, template: "<!--\r\n  Dialog Container Template (CDK-based)\r\n\r\n  Architecture:\r\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  CDK Overlay manages the full overlay stack:\r\n\r\n  \u250C\u2500 .cdk-overlay-container (fixed, z-index managed by CDK) \u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n  \u2502  \u250C\u2500 .cdk-global-overlay-wrapper (flex-center) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\r\n  \u2502  \u2502  .cdk-overlay-backdrop (click \u2192 close, CDK transition)   \u2502 \u2502\r\n  \u2502  \u2502  \u250C\u2500 .cdk-overlay-pane (width/height from config) \u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  <bk-dialog-container>  \u2190 this component (panel)     \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502    <ng-template cdkPortalOutlet />  \u2190 user component  \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      <UserDialogComponent>                            \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <h2 bk-dialog-title>Title</h2>                 \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-content>Scrollable body</div>   \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-actions>Pinned buttons</div>    \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      </UserDialogComponent>                           \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  </bk-dialog-container>                               \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502\r\n  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\r\n  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n  The host element IS the visible panel (background, radius, shadow).\r\n  CDK Portal projects the caller's component as a direct child.\r\n\r\n  Directives (BkDialogTitle, BkDialogContent, BkDialogActions, BkDialogClose)\r\n  apply the corresponding CSS classes and add accessibility features.\r\n-->\r\n\r\n<ng-template cdkPortalOutlet />\r\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;max-height:inherit;background:var(--bk-dialog-panel-bg, #ffffff);border-radius:var(--bk-dialog-panel-radius, 8px);box-shadow:var( --bk-dialog-panel-shadow, 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) );outline:0;box-sizing:border-box;overflow:hidden;will-change:transform,opacity}:host ::ng-deep>:first-child{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}:host ::ng-deep .bk-dialog-content{flex:1 1 auto;overflow:auto;min-height:0;display:block;-webkit-overflow-scrolling:touch}:host ::ng-deep .bk-dialog-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-height:52px}:host ::ng-deep .bk-dialog-title{flex:0 0 auto;margin:0}:host ::ng-deep .bk-dialog-actions-align-start{justify-content:flex-start}:host ::ng-deep .bk-dialog-actions-align-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogContainerComponent, isStandalone: true, selector: "bk-dialog-container", host: { classAttribute: "bk-dialog-container" }, usesInheritance: true, ngImport: i0, template: "<!--\r\n  Dialog Container Template (CDK-based)\r\n\r\n  Architecture:\r\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  CDK Overlay manages the full overlay stack:\r\n\r\n  \u250C\u2500 .cdk-overlay-container (fixed, z-index managed by CDK) \u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n  \u2502  \u250C\u2500 .cdk-global-overlay-wrapper (flex-center) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\r\n  \u2502  \u2502  .cdk-overlay-backdrop (click \u2192 close, CDK transition)   \u2502 \u2502\r\n  \u2502  \u2502  \u250C\u2500 .cdk-overlay-pane (width/height from config) \u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  <bk-dialog-container>  \u2190 this component (panel)     \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502    <ng-template cdkPortalOutlet />  \u2190 user component  \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      <UserDialogComponent>                            \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <h2 bk-dialog-title>Title</h2>                 \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-content>Scrollable body</div>   \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-actions>Pinned buttons</div>    \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      </UserDialogComponent>                           \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  </bk-dialog-container>                               \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502\r\n  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\r\n  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n  The host element IS the visible panel (background, radius, shadow).\r\n  CDK Portal projects the caller's component as a direct child.\r\n\r\n  Directives (BkDialogTitle, BkDialogContent, BkDialogActions, BkDialogClose)\r\n  apply the corresponding CSS classes and add accessibility features.\r\n-->\r\n\r\n<ng-template cdkPortalOutlet />\r\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;max-height:inherit;background:var(--bk-dialog-panel-bg, #ffffff);border-radius:var(--bk-dialog-panel-radius, 8px);box-shadow:var( --bk-dialog-panel-shadow, 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) );outline:0;box-sizing:border-box;overflow:hidden;will-change:transform,opacity}:host ::ng-deep>:first-child{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}:host ::ng-deep .bk-dialog-content{flex:1 1 auto;overflow:auto;min-height:0;display:block;-webkit-overflow-scrolling:touch}:host ::ng-deep .bk-dialog-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-height:52px}:host ::ng-deep .bk-dialog-title{flex:0 0 auto;margin:0}:host ::ng-deep .bk-dialog-actions-align-start{justify-content:flex-start}:host ::ng-deep .bk-dialog-actions-align-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bk-dialog-container', standalone: true, imports: [CdkPortalOutlet], host: {
                         'class': 'bk-dialog-container',
@@ -4692,7 +4692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }] });
 
 /**
- * DialogRef — Handle returned to callers by `DialogService.open()`.
+ * BkDialogRef — Handle returned to callers by `BkDialogService.open()`.
  *
  * Architecture Decision:
  * ─────────────────────
@@ -4707,13 +4707,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Ours keeps `<T, R>` (Component first, Result second) to match the
  * convention consumers already use.
  */
-class DialogRef {
+class BkDialogRef {
     _cdkRef;
     /** Unique dialog identifier (managed by CDK). */
     id;
     /** Instance of the component rendered inside the dialog. */
     componentInstance;
-    // ──── Internal wiring (set by DialogService) ──────────────────────────
+    // ──── Internal wiring (set by BkDialogService) ──────────────────────────
     /** @internal Container reference for leave animation. */
     _containerInstance;
     /** @internal Prevent double-close. */
@@ -4791,14 +4791,14 @@ class DialogRef {
  *
  * Architecture Decision:
  * ─────────────────────
- * Our `DialogConfig` mirrors the fields from CDK's `DialogConfig` that we
+ * Our `BkDialogConfig` mirrors the fields from CDK's `DialogConfig` that we
  * expose, plus adds custom animation properties powered by WAAPI.
  *
- * When `DialogService.open()` is called these values are:
+ * When `BkDialogService.open()` is called these values are:
  *  1. Merged with global defaults and per-call overrides.
  *  2. Mapped onto CDK's native `DialogConfig` for overlay, backdrop, scroll,
  *     position, ARIA, and focus-trap management.
- *  3. Passed to `DialogContainerComponent` via an internal token for
+ *  3. Passed to `BkDialogContainerComponent` via an internal token for
  *     animation playback and position offsets.
  *
  * CDK handles: unique IDs, z-index stacking, scroll blocking, focus trap,
@@ -4806,7 +4806,7 @@ class DialogRef {
  * We handle: WAAPI animations, panel appearance, convenience config sugar.
  */
 // ──── Defaults ───────────────────────────────────────────────────────────
-const DEFAULT_DIALOG_CONFIG = {
+const BK_DEFAULT_DIALOG_CONFIG = {
     id: undefined,
     width: undefined,
     height: undefined,
@@ -4836,7 +4836,7 @@ const DEFAULT_DIALOG_CONFIG = {
 };
 
 /**
- * DialogService — The core engine of the custom dialog system.
+ * BkDialogService — The core engine of the custom dialog system.
  *
  * Architecture Decision:
  * ─────────────────────
@@ -4847,10 +4847,10 @@ const DEFAULT_DIALOG_CONFIG = {
  *     z-index stacking, and unique ID management — battle-tested infra
  *     shared with every Angular Material dialog in the ecosystem.
  *
- *  2. We provide our own `DialogContainerComponent` (extending
+ *  2. We provide our own `BkDialogContainerComponent` (extending
  *     `CdkDialogContainer`) for WAAPI animations and panel styling.
  *
- *  3. We wrap CDK's `DialogRef` in our own `DialogRef` to add the
+ *  3. We wrap CDK's `DialogRef` in our own `BkDialogRef` to add the
  *     leave-animation step before CDK tears down the overlay, and to
  *     expose the same familiar API shape (`afterClosed()`, etc.).
  *
@@ -4873,13 +4873,13 @@ const DEFAULT_DIALOG_CONFIG = {
  * ─────────────
  * CDK manages the full lifecycle: on close it detaches the overlay,
  * destroys the container, and disposes the overlay ref.
- * Our DialogRef subjects complete via CDK's `closed` observable,
+ * Our BkDialogRef subjects complete via CDK's `closed` observable,
  * preventing lingering subscriptions.
  */
-class DialogService {
+class BkDialogService {
     _cdkDialog = inject(Dialog);
     _overlay = inject(Overlay);
-    _globalConfig = inject(DIALOG_GLOBAL_CONFIG, { optional: true });
+    _globalConfig = inject(BK_DIALOG_GLOBAL_CONFIG, { optional: true });
     /** Stack of currently open dialog refs (most recent = last). */
     _openDialogRefs = [];
     // ════════════════════════════════════════════════════════════════════
@@ -4891,7 +4891,7 @@ class DialogService {
      * @param component  The component class to render inside the dialog.
      * @param config     Optional per-dialog configuration (merged on top
      *                   of global and default settings).
-     * @returns          A strongly-typed `DialogRef` to interact with.
+     * @returns          A strongly-typed `BkDialogRef` to interact with.
      *
      * @example
      * ```ts
@@ -4905,7 +4905,7 @@ class DialogService {
     open(component, config) {
         // ── 1. Merge configs: DEFAULT ← GLOBAL ← per-call ──────────────
         const mergedConfig = {
-            ...DEFAULT_DIALOG_CONFIG,
+            ...BK_DEFAULT_DIALOG_CONFIG,
             ...(this._globalConfig ?? {}),
             ...(config ?? {}),
         };
@@ -4947,23 +4947,23 @@ class DialogService {
             positionStrategy: this._buildPositionStrategy(mergedConfig),
             // ── Custom container ──────────────────────────────────────────
             container: {
-                type: DialogContainerComponent,
+                type: BkDialogContainerComponent,
                 providers: () => [
-                    { provide: INTERNAL_DIALOG_CONFIG, useValue: mergedConfig },
+                    { provide: BK_INTERNAL_DIALOG_CONFIG, useValue: mergedConfig },
                 ],
             },
             // ── Provider callback ─────────────────────────────────────────
             // Runs after the container is created but before the user
-            // component.  We create our `DialogRef` wrapper here and make
+            // component.  We create our `BkDialogRef` wrapper here and make
             // it available for injection in the user component.
             providers: (cdkRef, _cdkConfig, containerInstance) => {
-                ourRef = new DialogRef(cdkRef);
+                ourRef = new BkDialogRef(cdkRef);
                 ourRef._containerInstance = containerInstance;
                 // Wire up afterOpened emission.
                 containerInstance.opened
                     .then(() => ourRef._emitOpened());
                 return [
-                    { provide: DialogRef, useValue: ourRef },
+                    { provide: BkDialogRef, useValue: ourRef },
                 ];
             },
         };
@@ -4992,7 +4992,7 @@ class DialogService {
         }
     }
     /**
-     * Returns the `DialogRef` of the most recently opened dialog,
+     * Returns the `BkDialogRef` of the most recently opened dialog,
      * or `undefined` if none are open.
      */
     getTopDialog() {
@@ -5013,7 +5013,7 @@ class DialogService {
     /**
      * Read-only snapshot of currently open dialog refs.
      * Used internally by content directives (`BkDialogTitle`, `BkDialogActions`,
-     * `BkDialogClose`) for the DOM-walk fallback when `DialogRef` is not
+     * `BkDialogClose`) for the DOM-walk fallback when `BkDialogRef` is not
      * available via injection (e.g. inside `<ng-template>`).
      */
     get openDialogsRef() {
@@ -5135,10 +5135,10 @@ class DialogService {
         }
         return strategy;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5172,7 +5172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 let nextTitleId = 0;
 // ──── Helper ─────────────────────────────────────────────────────────────
 /**
- * Finds the closest `DialogRef` by walking up the DOM from the given
+ * Finds the closest `BkDialogRef` by walking up the DOM from the given
  * element to the nearest `bk-dialog-container` host, then matching its
  * `id` attribute against the currently open dialogs.
  *
@@ -5193,15 +5193,15 @@ function getClosestDialog(element, openDialogs) {
 }
 // ──── Base for Title / Actions ───────────────────────────────────────────
 /**
- * Shared abstract base that resolves the owning `DialogRef` (via DI or
+ * Shared abstract base that resolves the owning `BkDialogRef` (via DI or
  * DOM walk) and invokes `_onAdd()` / `_onRemove()` lifecycle hooks.
  *
  * Same pattern as Material's internal `MatDialogLayoutSection`.
  */
 class BkDialogLayoutSection {
-    _dialogRef = inject(DialogRef, { optional: true });
+    _dialogRef = inject(BkDialogRef, { optional: true });
     _elementRef = inject((ElementRef));
-    _dialogService = inject(DialogService);
+    _dialogService = inject(BkDialogService);
     ngOnInit() {
         if (!this._dialogRef) {
             this._dialogRef = getClosestDialog(this._elementRef, this._dialogService.openDialogsRef);
@@ -5375,9 +5375,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * ```
  */
 class BkDialogClose {
-    _dialogRef = inject(DialogRef, { optional: true });
+    _dialogRef = inject(BkDialogRef, { optional: true });
     _elementRef = inject((ElementRef));
-    _dialogService = inject(DialogService);
+    _dialogService = inject(BkDialogService);
     /** Screen-reader label for the button. */
     ariaLabel;
     /** Prevents accidental form submits. Default: `'button'`. */
@@ -5440,7 +5440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  *
  *  • All components/directives are **standalone**.
  *  • This module simply imports + re-exports them for convenience.
- *  • `DialogService` is `providedIn: 'root'`, so it does NOT need to
+ *  • `BkDialogService` is `providedIn: 'root'`, so it does NOT need to
  *    be listed in `providers` here — it is tree-shakeable and available
  *    app-wide automatically.
  *
@@ -5473,7 +5473,7 @@ class BkDialogModule {
             OverlayModule,
             PortalModule,
             // ── Our standalone pieces ───────────────────────────────────────
-            DialogContainerComponent,
+            BkDialogContainerComponent,
             BkDialogTitle,
             BkDialogContent,
             BkDialogActions,
@@ -5500,7 +5500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         OverlayModule,
                         PortalModule,
                         // ── Our standalone pieces ───────────────────────────────────────
-                        DialogContainerComponent,
+                        BkDialogContainerComponent,
                         BkDialogTitle,
                         BkDialogContent,
                         BkDialogActions,
@@ -5543,6 +5543,231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+class AvatarProfile {
+    // ---------- Display inputs ----------
+    src = null;
+    alt = 'Avatar';
+    name = '';
+    size = 'md';
+    fallback = 'auto';
+    // ---------- Functional inputs ----------
+    /** Whether upload / remove actions are enabled */
+    editable = true;
+    /** Accepted file MIME types for the file picker */
+    accept = 'image/jpeg, image/png';
+    /** Max file size in KB (0 = no limit) */
+    maxFileSizeKB = 0;
+    /** Label shown on the upload button */
+    uploadLabel = 'Upload';
+    /** Hint text shown below the upload button */
+    hint = '500x500 JPEG, PNG Image';
+    /** External loading state (e.g. while uploading) */
+    loading = false;
+    /** Whether the remove badge is shown when an image is present */
+    removable = false;
+    // ---------- Form / CVA inputs ----------
+    /** Label displayed above the avatar */
+    label = '';
+    /** Whether the field is required (shows asterisk) */
+    required = false;
+    /** External error state flag */
+    hasError = false;
+    /** Error message to display when hasError is true */
+    errorMessage = '';
+    /** Disabled state (also set via CVA setDisabledState) */
+    disabled = false;
+    // ---------- Outputs ----------
+    /** Emits the selected File after validation passes */
+    fileSelected = new EventEmitter();
+    /** Emits when the user clicks the remove badge */
+    removed = new EventEmitter();
+    /** Emits a human-readable error string on validation failure */
+    fileError = new EventEmitter();
+    initials = '';
+    imageLoadFailed = false;
+    /** Local blob URL for instant preview before server upload completes */
+    previewUrl = null;
+    // ---------- CVA Callbacks ----------
+    onChange = (_value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.src = value || null;
+        // When a new value arrives from the form (e.g. server URL after upload),
+        // discard any stale local blob preview so displaySrc uses the real URL
+        this.revokePreview();
+        this.imageLoadFailed = false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.editable = !isDisabled;
+    }
+    // ---------- Lifecycle ----------
+    ngOnChanges(changes) {
+        if (this.name) {
+            this.initials = this.getInitials(this.name);
+        }
+        this.imageLoadFailed = false;
+        // When the parent updates [src] via @Input (non-CVA usage), discard the local preview
+        if (changes['src'] && this.previewUrl) {
+            this.revokePreview();
+        }
+    }
+    ngOnDestroy() {
+        this.revokePreview();
+    }
+    onImageError() {
+        this.imageLoadFailed = true;
+    }
+    // ---------- Derived UI ----------
+    /** The URL the template should display — local preview takes priority over the server src */
+    get displaySrc() {
+        return this.previewUrl ?? this.src;
+    }
+    get showInitials() {
+        if (!this.name)
+            return false;
+        if (this.fallback === 'icon')
+            return false;
+        if (this.fallback === 'camera')
+            return false;
+        if (this.fallback === 'initials')
+            return true;
+        return true; // auto
+    }
+    get containerClasses() {
+        return ['avatar-profile', this.size].join(' ');
+    }
+    get sizeClasses() {
+        return [this.size];
+    }
+    get showRemoveButton() {
+        return this.removable && this.editable && !!(this.displaySrc) && !this.imageLoadFailed;
+    }
+    // ---------- File handling ----------
+    onFileSelected(event) {
+        const input = event.target;
+        if (!input.files?.length)
+            return;
+        const file = input.files[0];
+        // Validate file type
+        if (this.accept && !this.isFileTypeValid(file)) {
+            this.fileError.emit(`Invalid file type. Accepted: ${this.accept}`);
+            input.value = '';
+            return;
+        }
+        // Validate file size
+        if (this.maxFileSizeKB > 0 && file.size > this.maxFileSizeKB * 1024) {
+            this.fileError.emit(`File size exceeds ${this.maxFileSizeKB}KB limit.`);
+            input.value = '';
+            return;
+        }
+        // Instant local preview — no server round-trip needed to show the image
+        this.revokePreview();
+        this.previewUrl = URL.createObjectURL(file);
+        this.imageLoadFailed = false;
+        // Push the preview URL as the form value so validation (e.g. required) passes
+        this.onChange(this.previewUrl);
+        this.onTouched();
+        this.fileSelected.emit(event);
+        input.value = ''; // reset so re-selecting the same file still triggers change
+    }
+    onRemove() {
+        this.revokePreview();
+        this.src = null;
+        this.onChange(null);
+        this.onTouched();
+        this.removed.emit();
+    }
+    // ---------- Utils ----------
+    /** Revoke the previous object URL to free memory */
+    revokePreview() {
+        if (this.previewUrl) {
+            URL.revokeObjectURL(this.previewUrl);
+            this.previewUrl = null;
+        }
+    }
+    isFileTypeValid(file) {
+        const accepted = this.accept.split(',').map(t => t.trim());
+        return accepted.some(type => {
+            if (type.endsWith('/*')) {
+                return file.type.startsWith(type.replace('/*', '/'));
+            }
+            return file.type === type;
+        });
+    }
+    getInitials(name) {
+        const parts = name.trim().split(/\s+/);
+        if (parts.length === 1) {
+            return parts[0].slice(0, 2).toUpperCase();
+        }
+        return (parts[0][0] + parts.at(-1)[0]).toUpperCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AvatarProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AvatarProfile, isStandalone: true, selector: "bk-avatar-profile", inputs: { src: "src", alt: "alt", name: "name", size: "size", fallback: "fallback", editable: "editable", accept: "accept", maxFileSizeKB: "maxFileSizeKB", uploadLabel: "uploadLabel", hint: "hint", loading: "loading", removable: "removable", label: "label", required: "required", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled" }, outputs: { fileSelected: "fileSelected", removed: "removed", fileError: "fileError" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AvatarProfile),
+                multi: true
+            }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n  @if (label) {\r\n    <label class=\"avatar-profile-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"avatar-profile-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"flex gap-4 justify-end\">\r\n    <div\r\n    [ngClass]=\"containerClasses\"\r\n    [bkTooltip]=\"name\"\r\n    [bkTooltipPosition]=\"'top'\"\r\n  >\r\n\r\n      <!-- Loading overlay -->\r\n      @if (loading) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n          <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n        </div>\r\n      }\r\n\r\n      @if (displaySrc && !imageLoadFailed) {\r\n        <img\r\n          [src]=\"displaySrc\"\r\n          [alt]=\"alt\"\r\n          class=\"avatar-img\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      }\r\n\r\n      @else if (fallback === 'camera') {\r\n        <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (showInitials) {\r\n        <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n      }\r\n\r\n      @else {\r\n        <svg class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n      }\r\n\r\n      <!-- Remove badge -->\r\n      @if (showRemoveButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-badge\"\r\n          (click)=\"onRemove()\"\r\n          aria-label=\"Remove avatar\"\r\n        >\r\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n    </div>\r\n    <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n      @if (editable) {\r\n        <label class=\"upload-button cursor-pointer\">\r\n          {{ uploadLabel }}\r\n          <input\r\n            type=\"file\"\r\n            class=\"hidden\"\r\n            [accept]=\"accept\"\r\n            [disabled]=\"disabled\"\r\n            (change)=\"onFileSelected($event)\"\r\n          />\r\n        </label>\r\n      }\r\n      @if (!hasError && hint) {\r\n        <p class=\"profile-size\">{{ hint }}</p>\r\n      }\r\n      @if (hasError && errorMessage) {\r\n        <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AvatarProfile, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-avatar-profile', imports: [NgClass, CommonModule, BKTooltipDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AvatarProfile),
+                            multi: true
+                        }
+                    ], template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n  @if (label) {\r\n    <label class=\"avatar-profile-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"avatar-profile-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"flex gap-4 justify-end\">\r\n    <div\r\n    [ngClass]=\"containerClasses\"\r\n    [bkTooltip]=\"name\"\r\n    [bkTooltipPosition]=\"'top'\"\r\n  >\r\n\r\n      <!-- Loading overlay -->\r\n      @if (loading) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n          <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n        </div>\r\n      }\r\n\r\n      @if (displaySrc && !imageLoadFailed) {\r\n        <img\r\n          [src]=\"displaySrc\"\r\n          [alt]=\"alt\"\r\n          class=\"avatar-img\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      }\r\n\r\n      @else if (fallback === 'camera') {\r\n        <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (showInitials) {\r\n        <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n      }\r\n\r\n      @else {\r\n        <svg class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n      }\r\n\r\n      <!-- Remove badge -->\r\n      @if (showRemoveButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-badge\"\r\n          (click)=\"onRemove()\"\r\n          aria-label=\"Remove avatar\"\r\n        >\r\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n    </div>\r\n    <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n      @if (editable) {\r\n        <label class=\"upload-button cursor-pointer\">\r\n          {{ uploadLabel }}\r\n          <input\r\n            type=\"file\"\r\n            class=\"hidden\"\r\n            [accept]=\"accept\"\r\n            [disabled]=\"disabled\"\r\n            (change)=\"onFileSelected($event)\"\r\n          />\r\n        </label>\r\n      }\r\n      @if (!hasError && hint) {\r\n        <p class=\"profile-size\">{{ hint }}</p>\r\n      }\r\n      @if (hasError && errorMessage) {\r\n        <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"] }]
+        }], propDecorators: { src: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], fallback: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], maxFileSizeKB: [{
+                type: Input
+            }], uploadLabel: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fileSelected: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }], fileError: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -5552,5 +5777,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogTitle, BkGrid, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, DEFAULT_DIALOG_CONFIG, DIALOG_DATA, DIALOG_GLOBAL_CONFIG, DialogRef, DialogService, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { AvatarProfile, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map